feat(interaction): add elementpointmove interaction

__tests__/plots/static/flare-element-point-move-area-normalizeY.ts

@@ -0,0 +1,44 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMoveAreaNormalizeY(): G2Spec {
+  return {
+    type: 'area',
+    width: 600,
+    height: 400,
+    data: [
+      { year: '1991', value: 3, type: 'type1' },
+      { year: '1992', value: 4, type: 'type1' },
+      { year: '1993', value: 3.5, type: 'type1' },
+      { year: '1994', value: 5, type: 'type1' },
+      { year: '1995', value: 4.9, type: 'type1' },
+      { year: '1996', value: 2, type: 'type1' },
+      { year: '1997', value: 7, type: 'type1' },
+      { year: '1998', value: 11, type: 'type1' },
+      { year: '1999', value: 13, type: 'type1' },
+      { year: '1991', value: 6, type: 'type2' },
+      { year: '1992', value: 1, type: 'type2' },
+      { year: '1993', value: 4, type: 'type2' },
+      { year: '1994', value: 9, type: 'type2' },
+      { year: '1995', value: 1.9, type: 'type2' },
+      { year: '1996', value: 5, type: 'type2' },
+      { year: '1997', value: 4, type: 'type2' },
+      { year: '1998', value: 6, type: 'type2' },
+      { year: '1999', value: 15, type: 'type2' },
+      { year: '1991', value: 6, type: 'type3' },
+      { year: '1992', value: 1, type: 'type3' },
+      { year: '1993', value: 4, type: 'type3' },
+      { year: '1994', value: 9, type: 'type3' },
+      { year: '1995', value: 1.9, type: 'type3' },
+      { year: '1996', value: 5, type: 'type3' },
+      { year: '1997', value: 4, type: 'type3' },
+      { year: '1998', value: 6, type: 'type3' },
+      { year: '1999', value: 15, type: 'type3' },
+    ],
+    encode: { x: 'year', y: 'value', key: 'type', color: 'type' },
+    transform: [{ type: 'stackY' }, { type: 'normalizeY' }],
+    interaction: {
+      legendFilter: false,
+      elementPointMove: { selection: [1, 4] },
+    },
+  };
+}

__tests__/plots/static/flare-element-point-move-area.ts

@@ -0,0 +1,34 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMoveArea(): G2Spec {
+  return {
+    type: 'area',
+    width: 600,
+    height: 400,
+    data: [
+      { year: '1991', value: 3, type: 'type1' },
+      { year: '1992', value: 4, type: 'type1' },
+      { year: '1993', value: 3.5, type: 'type1' },
+      { year: '1994', value: 5, type: 'type1' },
+      { year: '1995', value: 4.9, type: 'type1' },
+      { year: '1996', value: 2, type: 'type1' },
+      { year: '1997', value: 7, type: 'type1' },
+      { year: '1998', value: 11, type: 'type1' },
+      { year: '1999', value: 13, type: 'type1' },
+      { year: '1991', value: 6, type: 'type2' },
+      { year: '1992', value: 1, type: 'type2' },
+      { year: '1993', value: 4, type: 'type2' },
+      { year: '1994', value: 9, type: 'type2' },
+      { year: '1995', value: 1.9, type: 'type2' },
+      { year: '1996', value: 5, type: 'type2' },
+      { year: '1997', value: 4, type: 'type2' },
+      { year: '1998', value: 6, type: 'type2' },
+      { year: '1999', value: 15, type: 'type2' },
+    ],
+    encode: { x: 'year', y: 'value', key: 'type', color: 'type' },
+    interaction: {
+      legendFilter: false,
+      elementPointMove: { selection: [1, 4] },
+    },
+  };
+}

__tests__/plots/static/flare-element-point-move-interval-normalizeY-transpose.ts

@@ -0,0 +1,44 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMoveIntervalNormalizeYTranspose(): G2Spec {
+  return {
+    type: 'interval',
+    width: 600,
+    height: 400,
+    coordinate: { transform: [{ type: 'transpose' }] },
+    data: [
+      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+      { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+      { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
+      { name: 'London', 月份: 'May', 月均降雨量: 47 },
+      { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
+      { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
+      { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
+      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+      { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+      { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
+      { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
+      { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
+      { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
+      { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
+    ],
+    encode: {
+      x: '月份',
+      y: '月均降雨量',
+      color: 'name',
+      key: (d) => d['name'] + d['月份'],
+    },
+    transform: [
+      { type: 'stackY' },
+      { type: 'normalizeY' },
+      { type: 'sortX', by: 'y', reverse: true },
+    ],
+    interaction: {
+      elementPointMove: {
+        selection: [6],
+      },
+    },
+  };
+}

__tests__/plots/static/flare-element-point-move-interval-normalizeY.ts

@@ -0,0 +1,43 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMoveIntervalNormalizeY(): G2Spec {
+  return {
+    type: 'interval',
+    width: 600,
+    height: 400,
+    data: [
+      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+      { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+      { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
+      { name: 'London', 月份: 'May', 月均降雨量: 47 },
+      { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
+      { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
+      { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
+      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+      { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+      { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
+      { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
+      { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
+      { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
+      { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
+    ],
+    encode: {
+      x: '月份',
+      y: '月均降雨量',
+      color: 'name',
+      key: (d) => d['name'] + d['月份'],
+    },
+    transform: [
+      { type: 'stackY' },
+      { type: 'normalizeY' },
+      { type: 'sortX', by: 'y', reverse: true },
+    ],
+    interaction: {
+      elementPointMove: {
+        selection: [6],
+      },
+    },
+  };
+}

__tests__/plots/static/flare-element-point-move-interval-transpose.ts

@@ -0,0 +1,40 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMoveIntervalTranspose(): G2Spec {
+  return {
+    type: 'interval',
+    width: 600,
+    height: 400,
+    coordinate: { transform: [{ type: 'transpose' }] },
+    data: [
+      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+      { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+      { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
+      { name: 'London', 月份: 'May', 月均降雨量: 47 },
+      { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
+      { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
+      { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
+      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+      { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+      { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
+      { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
+      { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
+      { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
+      { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
+    ],
+    encode: {
+      x: '月份',
+      y: '月均降雨量',
+      color: 'name',
+      key: (d) => d['name'] + d['月份'],
+    },
+    transform: [{ type: 'stackY' }],
+    interaction: {
+      elementPointMove: {
+        selection: [6],
+      },
+    },
+  };
+}

__tests__/plots/static/flare-element-point-move-interval.ts

@@ -0,0 +1,39 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMoveInterval(): G2Spec {
+  return {
+    type: 'interval',
+    width: 600,
+    height: 400,
+    data: [
+      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+      { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+      { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
+      { name: 'London', 月份: 'May', 月均降雨量: 47 },
+      { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
+      { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
+      { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
+      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+      { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+      { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
+      { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
+      { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
+      { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
+      { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
+    ],
+    encode: {
+      x: '月份',
+      y: '月均降雨量',
+      color: 'name',
+      key: (d) => d['name'] + d['月份'],
+    },
+    transform: [{ type: 'stackY' }],
+    interaction: {
+      elementPointMove: {
+        selection: [6],
+      },
+    },
+  };
+}

__tests__/plots/static/flare-element-point-move-line.ts

@@ -0,0 +1,41 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMoveLine(): G2Spec {
+  return {
+    type: 'line',
+    width: 600,
+    height: 400,
+    data: [
+      { year: '1991', value: 3, type: 'type1' },
+      { year: '1992', value: 4, type: 'type1' },
+      { year: '1993', value: 3.5, type: 'type1' },
+      { year: '1994', value: 5, type: 'type1' },
+      { year: '1995', value: 4.9, type: 'type1' },
+      { year: '1996', value: 2, type: 'type1' },
+      { year: '1997', value: 7, type: 'type1' },
+      { year: '1998', value: 11, type: 'type1' },
+      { year: '1999', value: 13, type: 'type1' },
+      { year: '1991', value: 6, type: 'type2' },
+      { year: '1992', value: 1, type: 'type2' },
+      { year: '1993', value: 4, type: 'type2' },
+      { year: '1994', value: 9, type: 'type2' },
+      { year: '1995', value: 1.9, type: 'type2' },
+      { year: '1996', value: 5, type: 'type2' },
+      { year: '1997', value: 4, type: 'type2' },
+      { year: '1998', value: 6, type: 'type2' },
+      { year: '1999', value: 15, type: 'type2' },
+    ],
+    encode: {
+      x: 'year',
+      y: 'value',
+      color: 'type',
+      key: 'type',
+    },
+    interaction: {
+      elementPointMove: {
+        precision: 4,
+        selection: [1, 4],
+      },
+    },
+  };
+}

__tests__/plots/static/flare-element-point-move-pie.ts

@@ -0,0 +1,36 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMovePie(): G2Spec {
+  return {
+    type: 'interval',
+    width: 600,
+    height: 400,
+    data: [
+      { item: '事例一', count: 40, percent: 0.4 },
+      { item: '事例二', count: 21, percent: 0.21 },
+      { item: '事例三', count: 17, percent: 0.17 },
+      { item: '事例四', count: 13, percent: 0.13 },
+      { item: '事例五', count: 9, percent: 0.09 },
+    ],
+    encode: { y: 'count', color: 'item', key: 'item' },
+    transform: [{ type: 'stackY' }],
+    coordinate: { type: 'theta', outerRadius: 0.8 },
+    tooltip: {
+      items: [
+        (data) => ({
+          name: data.item,
+          value: `${data.percent * 100}%`,
+        }),
+      ],
+    },
+    interaction: {
+      legendFilter: false,
+      elementPointMove: {
+        selection: [2],
+        pathLineDash: [2, 4],
+        pathStroke: '#fff',
+        pathLineWidth: 2,
+      },
+    },
+  };
+}

__tests__/plots/static/flare-element-point-move-radar.ts

@@ -0,0 +1,64 @@
+import { G2Spec } from '../../../src';
+
+export function flareElementPointMoveRadar(): G2Spec {
+  return {
+    type: 'view',
+    width: 600,
+    height: 400,
+    data: [
+      { item: 'Design', type: 'a', score: 70 },
+      { item: 'Design', type: 'b', score: 30 },
+      { item: 'Development', type: 'a', score: 60 },
+      { item: 'Development', type: 'b', score: 70 },
+      { item: 'Marketing', type: 'a', score: 50 },
+      { item: 'Marketing', type: 'b', score: 60 },
+      { item: 'Users', type: 'a', score: 40 },
+      { item: 'Users', type: 'b', score: 50 },
+      { item: 'Test', type: 'a', score: 60 },
+      { item: 'Test', type: 'b', score: 70 },
+      { item: 'Language', type: 'a', score: 70 },
+      { item: 'Language', type: 'b', score: 50 },
+      { item: 'Technology', type: 'a', score: 50 },
+      { item: 'Technology', type: 'b', score: 40 },
+      { item: 'Support', type: 'a', score: 30 },
+      { item: 'Support', type: 'b', score: 40 },
+      { item: 'Sales', type: 'a', score: 60 },
+      { item: 'Sales', type: 'b', score: 40 },
+      { item: 'UX', type: 'a', score: 50 },
+      { item: 'UX', type: 'b', score: 60 },
+    ],
+    coordinate: { type: 'polar' },
+    scale: {
+      x: { padding: 0.5, align: 0 },
+      y: { tickCount: 5, domainMax: 80 },
+    },
+    axis: {
+      x: { grid: true, gridStrokeWidth: 1, tick: false, gridLineDash: [0, 0] },
+      y: {
+        zIndex: 1,
+        title: false,
+        gridConnect: 'line',
+        gridStrokeWidth: 1,
+        gridLineDash: [0, 0],
+      },
+    },
+    children: [
+      {
+        type: 'area',
+        encode: { x: 'item', y: 'score', color: 'type', key: 'type' },
+        style: { fillOpacity: 0.5 },
+      },
+      {
+        type: 'line',
+        encode: { x: 'item', y: 'score', color: 'type', key: 'type' },
+        style: { lineWidth: 2 },
+      },
+    ],
+    interaction: {
+      elementPointMove: {
+        precision: 4,
+        selection: [1, 4],
+      },
+    },
+  };
+}