feat(interaction.tooltip): add crosshairs, crosshairsX, crosshairsY s…

…etting (#6229) * fix: loca bugs * feat: finish crosshairx crosshairsy features * feat: finish features develop * fix: fix test error * fix: fix test error * fix: remove unused code * fix: fix ci error * fix: flatting configure * fix: change remove judge * fix: crosshairsX default is close
antvis · May 22, 2024 · 0f7dc62 · 0f7dc62
1 parent f444a74
commit 0f7dc62
Show file tree

Hide file tree

Showing 14 changed files with 1,651 additions and 26 deletions.
diff --git a/...__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y/step0.svg b/...__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y/step0.svg
diff --git a/...__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y/step1.svg b/...__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y/step1.svg
diff --git a/__tests__/integration/snapshots/interaction/indices-line-crosshairs-x-y/step0.svg b/__tests__/integration/snapshots/interaction/indices-line-crosshairs-x-y/step0.svg
diff --git a/__tests__/integration/snapshots/interaction/indices-line-crosshairs-x-y/step1.svg b/__tests__/integration/snapshots/interaction/indices-line-crosshairs-x-y/step1.svg
diff --git a/__tests__/plots/interaction/change-size-polar-crosshairs-xy.ts b/__tests__/plots/interaction/change-size-polar-crosshairs-xy.ts
@@ -0,0 +1,107 @@
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export async function changeSizePolarCrosshairsXY(): Promise<G2Spec> {
+  const 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 },
+  ];
+
+  return {
+    type: 'view',
+    coordinate: {
+      type: 'polar',
+    },
+    scale: {
+      x: { padding: 0.5, align: 0 },
+      y: { tickCount: 5, domainMax: 80 },
+    },
+    autoFit: true,
+    data,
+    interaction: {
+      legendFilter: false,
+      elementPointMove: true,
+      tooltip: {
+        crosshairs: true,
+        crosshairsStroke: 'red',
+        crosshairsLineDash: [4, 4],
+      },
+    },
+    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,
+        },
+      },
+    ],
+  };
+}
+
+changeSizePolarCrosshairsXY.tooltip = true;
+
+changeSizePolarCrosshairsXY.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [plot] = document.getElementsByClassName(PLOT_CLASS_NAME);
+  return [
+    step(plot, 'pointermove', {
+      offsetX: 100,
+      offsetY: 350,
+    }),
+    step(plot, 'pointermove', {
+      offsetX: 176,
+      offsetY: 350,
+    }),
+  ];
+};
diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts
@@ -78,3 +78,5 @@ export { profitIntervalLegendFilterElementHighlight } from './profit-interval-le
 export { stocksLineSlider } from './stocks-line-slider';
 export { alphabetIntervalCustom } from './alphabet-interval-custom';
 export { mockIntervalTooltipBackground } from './mock-interval-tooltip-background';
+export { indicesLineCrosshairsXY } from './indices-line-crosshairs-xy';
+export { changeSizePolarCrosshairsXY } from './change-size-polar-crosshairs-xy';
diff --git a/__tests__/plots/interaction/indices-line-chart-facet.ts b/__tests__/plots/interaction/indices-line-chart-facet.ts
@@ -38,8 +38,8 @@ export async function indicesLineChartFacet(): Promise<G2Spec> {
         series: true,
         facet: true,
         body: false,
-        crosshairs: true,
-        crosshairsLineWidth: 30,
+        crosshairsY: true,
+        crosshairsYLineWidth: 30,
         marker: false,
       },
     },

diff --git a/__tests__/plots/interaction/indices-line-crosshairs-xy.ts b/__tests__/plots/interaction/indices-line-crosshairs-xy.ts
@@ -0,0 +1,55 @@
+import { csv } from 'd3-fetch';
+import { autoType } from 'd3-dsv';
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export async function indicesLineCrosshairsXY(): Promise<G2Spec> {
+  const data = await csv('data/indices.csv', autoType);
+  return {
+    type: 'view',
+    children: [
+      {
+        type: 'line',
+        data,
+        axis: {
+          y: { labelAutoRotate: false },
+        },
+        transform: [{ type: 'normalizeY', basis: 'first', groupBy: 'color' }],
+        legend: false,
+        encode: {
+          x: 'Date',
+          y: 'Close',
+          color: 'Symbol',
+          key: 'Symbol',
+        },
+        state: {
+          active: { stroke: 'red' },
+        },
+      },
+    ],
+    interaction: {
+      tooltip: {
+        crosshairs: true,
+        crosshairsXStroke: 'red',
+        crosshairsYStroke: 'blue',
+      },
+    },
+  };
+}
+
+indicesLineCrosshairsXY.tooltip = true;
+
+indicesLineCrosshairsXY.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [plot] = document.getElementsByClassName(PLOT_CLASS_NAME);
+  return [
+    step(plot, 'pointermove', {
+      offsetX: 100,
+      offsetY: 350,
+    }),
+    step(plot, 'pointermove', {
+      offsetX: 176,
+      offsetY: 350,
+    }),
+  ];
+};
diff --git a/__tests__/plots/interaction/points-point-regression-quad-inset.ts b/__tests__/plots/interaction/points-point-regression-quad-inset.ts
@@ -17,7 +17,11 @@ export function pointsPointRegressionQuadInset(): G2Spec {
     scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
     axis: { x: { title: false }, y: { title: false } },
     interaction: {
-      tooltip: { body: false, crosshairsLineWidth: 30, marker: false },
+      tooltip: {
+        body: false,
+        crosshairsLineWidth: 30,
+        marker: false,
+      },
     },
     children: [
       {

diff --git a/__tests__/plots/interaction/points-point-regression-quad-transpose.ts b/__tests__/plots/interaction/points-point-regression-quad-transpose.ts
@@ -16,7 +16,11 @@ export function pointsPointRegressionQuadTranspose(): G2Spec {
     scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
     axis: { x: { title: false }, y: { title: false } },
     interaction: {
-      tooltip: { body: false, crosshairsLineWidth: 30, marker: false },
+      tooltip: {
+        body: false,
+        crosshairsLineWidth: 30,
+        marker: false,
+      },
     },
     coordinate: { transform: [{ type: 'transpose' }] },
     children: [

diff --git a/__tests__/plots/interaction/points-point-regression-quad.ts b/__tests__/plots/interaction/points-point-regression-quad.ts
@@ -16,7 +16,11 @@ export function pointsPointRegressionQuad(): G2Spec {
     scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
     axis: { x: { title: false }, y: { title: false } },
     interaction: {
-      tooltip: { body: false, crosshairsLineWidth: 30, marker: false },
+      tooltip: {
+        body: false,
+        crosshairsLineWidth: 30,
+        marker: false,
+      },
     },
     children: [
       {

diff --git a/__tests__/plots/interaction/stocks-line-slider.ts b/__tests__/plots/interaction/stocks-line-slider.ts
@@ -26,7 +26,12 @@ export function stocksLineSlider(): G2Spec {
         tooltip: false,
       },
     ],
-    interaction: { tooltip: { crosshairsLineWidth: 10, body: false } },
+    interaction: {
+      tooltip: {
+        crosshairsLineWidth: 10,
+        body: false,
+      },
+    },
   };
 }
 

diff --git a/site/docs/spec/interaction/tooltip.zh.md b/site/docs/spec/interaction/tooltip.zh.md
@@ -46,8 +46,12 @@ chart.render();
 | position                  | tooltip 位置                                                      | `TooltipPosition`                           | -                     |
 | mount                     | tooltip 渲染的 dom 节点                                           | `string` \| `HTMLElement`                   | 图表容器              |
 | bounding                  | tooltip 渲染的限制区域，超出会自动调整位置                        | `BBox`                                      | 图表区域大小          |
-| crosshairs                | 是否展示指示线                                                    | `boolean`                                   | -                     |
-| `crosshairs${StyleAttrs}` | 指示线的样式                                                      | `number \| string`                          | -                     |
+| crosshairs                | 是否展示指示线                                                     | `boolean`                                   | -                     |
+| crosshairsX               | 是否展示X方向指示线                                            | `boolean`                                   | -                     |
+| crosshairsY               | 是否展示Y方向指示线                                                  | `boolean`                                   | -                     |
+| `crosshairs${StyleAttrs}`               | 指示线的样式                                                  | `number \| string`                                   | -                     |
+| `crosshairsX${StyleAttrs}`               | X方向指示线的样式（优先级更高）                                                  | `number \| string`                                   | -                     |
+| `crosshairsY${StyleAttrs}`              | Y方向指示线的样式 （优先级很高）                                                 | `number \| string`                                   | -                     |
 | `marker${StyleAttrs}`     | marker 的样式                                                     | `number \| string`                          | -                     |
 | render                    | 自定义 tooltip 渲染函数                                           | `(event, options) => HTMLElement \| string` | -                     |
 | sort                      | item 排序器                                                       | `(d: TooltipItemValue) => any`              | -                     |