From 5d23c7301f9cff4b0e2d9284af5e37e8961ef9c4 Mon Sep 17 00:00:00 2001 From: Runtus Date: Sat, 15 Jun 2024 11:50:35 +0800 Subject: [PATCH 1/4] feat: add tooltip markerType --- .../step0.svg | 428 ++++++++++++++++++ .../step1.svg | 428 ++++++++++++++++++ ...abet-interval-activate-line-marker-type.ts | 108 +++++ __tests__/plots/interaction/index.ts | 1 + src/interaction/tooltip.ts | 10 +- 5 files changed, 972 insertions(+), 3 deletions(-) create mode 100644 __tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg create mode 100644 __tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg create mode 100644 __tests__/plots/interaction/alphabet-interval-activate-line-marker-type.ts diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg new file mode 100644 index 0000000000..b89759dd12 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg @@ -0,0 +1,428 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + + + + + + + + + + + + + + + + + + + + b + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg new file mode 100644 index 0000000000..9f8e2beeb4 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg @@ -0,0 +1,428 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + + + + + + + + + + + + + + + + + + + + b + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/interaction/alphabet-interval-activate-line-marker-type.ts b/__tests__/plots/interaction/alphabet-interval-activate-line-marker-type.ts new file mode 100644 index 0000000000..91e23fde45 --- /dev/null +++ b/__tests__/plots/interaction/alphabet-interval-activate-line-marker-type.ts @@ -0,0 +1,108 @@ +import { G2Spec, PLOT_CLASS_NAME } from '../../../src'; +import { step } from './utils'; + +export async function alphabetIntervalActiveMarkerType(): Promise { + 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], + markerType: 'hollow', + }, + }, + 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, + }, + }, + ], + }; +} + +alphabetIntervalActiveMarkerType.tooltip = true; + +alphabetIntervalActiveMarkerType.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 index 20159216ab..cbe9e9187f 100644 --- a/__tests__/plots/interaction/index.ts +++ b/__tests__/plots/interaction/index.ts @@ -80,3 +80,4 @@ 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'; +export { alphabetIntervalActiveMarkerType } from './alphabet-interval-activate-line-marker-type'; diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index a7f9f172e6..602bfa19c0 100644 --- a/src/interaction/tooltip.ts +++ b/src/interaction/tooltip.ts @@ -442,6 +442,7 @@ function updateRuleY( ...defaults, }, }); + root.appendChild(line); return line; }; @@ -472,6 +473,8 @@ function hideRuleX(root) { function updateMarker(root, { data, style, theme }) { if (root.markers) root.markers.forEach((d) => d.remove()); + const { type = '' } = style; + const markers = data .filter((d) => { const [{ x, y }] = d; @@ -479,19 +482,20 @@ function updateMarker(root, { data, style, theme }) { }) .map((d) => { const [{ color, element }, point] = d; - const fill = + const originColor = color || // encode value element.style.fill || element.style.stroke || theme.color; - + const fill = type === 'hollow' ? 'transparent' : originColor; + const stroke = type === 'hollow' ? originColor : '#fff'; const shape = new Circle({ style: { cx: point[0], cy: point[1], fill, r: 4, - stroke: '#fff', + stroke, lineWidth: 2, ...style, }, From 4122522daeba841598a923516bf68abee69297f7 Mon Sep 17 00:00:00 2001 From: Runtus Date: Sat, 15 Jun 2024 23:12:20 +0800 Subject: [PATCH 2/4] feat: add docs description --- site/docs/spec/interaction/tooltip.zh.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/docs/spec/interaction/tooltip.zh.md b/site/docs/spec/interaction/tooltip.zh.md index 02f70f81e5..ec29c312d2 100644 --- a/site/docs/spec/interaction/tooltip.zh.md +++ b/site/docs/spec/interaction/tooltip.zh.md @@ -51,8 +51,9 @@ chart.render(); | crosshairsY | 是否展示Y方向指示线 | `boolean` | - | | `crosshairs${StyleAttrs}` | 指示线的样式 | `number \| string` | - | | `crosshairsX${StyleAttrs}` | X方向指示线的样式（优先级更高） | `number \| string` | - | -| `crosshairsY${StyleAttrs}` | Y方向指示线的样式 （优先级很高） | `number \| string` | - | +| `crosshairsY${StyleAttrs}` | Y方向指示线的样式 （优先级更高） | `number \| string` | - | | `marker${StyleAttrs}` | marker 的样式 | `number \| string` | - | +| markerType | marker 的类型 | `'hollow' \| undefined` | undefined | | render | 自定义 tooltip 渲染函数 | `(event, options) => HTMLElement \| string` | - | | sort | item 排序器 | `(d: TooltipItemValue) => any` | - | | filter | item 筛选器 | `(d: TooltipItemValue) => any` | - | From 59a55ce41ef6d15e3325df749fe47ec23bd7f9d8 Mon Sep 17 00:00:00 2001 From: Runtus Date: Mon, 17 Jun 2024 12:32:24 +0800 Subject: [PATCH 3/4] feat: add docs description --- site/docs/spec/interaction/tooltip.zh.md | 30 ++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/site/docs/spec/interaction/tooltip.zh.md b/site/docs/spec/interaction/tooltip.zh.md index ec29c312d2..d7d6d65a84 100644 --- a/site/docs/spec/interaction/tooltip.zh.md +++ b/site/docs/spec/interaction/tooltip.zh.md @@ -179,3 +179,33 @@ chart.emit('tooltip:hide'); chart.emit('tooltip:disable'); // 禁用 tooltip chart.emit('tooltip:enable'); // 启用交互 ``` + +### 设置十字辅助线 +默认情况下，`crossharisY`是开启的，`crosshairsX`是关闭的，所以如果要开启十字辅助线，有以下两种方式。 +1. 设置`crosshairs`为`true`。 +```js +chart.interaction("tooltip", { + crosshairs: true, // 开启十字辅助线 + crosshairsXStroke: 'red', // 设置 X 轴辅助线颜色为'red' + crosshairsYStroke: 'blue',// 设置 Y 轴辅助线颜色为'blue' +}) +``` + +2. 设置`crosshairsX`为`true`。 +```js +chart.interaction("tooltip", { + crosshairsX: true, // 开启crosshairsX辅助线 + crosshairsXStroke: 'red', // 设置 X 轴辅助线颜色为'red' + crosshairsYStroke: 'blue',// 设置 Y 轴辅助线颜色为'blue' +}) +``` +`crosshairsX`的优先级大于`crosshairs`的优先级。 + + +### 设置提示点为空心圆 + +```js +chart.interaction("tooltip", { + markerType: "hollow", // 设置提示点的样式为空心圆 +}) +``` \ No newline at end of file From 53ca4d0969e9a2718168fa06cc1cf34b7bb838d0 Mon Sep 17 00:00:00 2001 From: Runtus Date: Mon, 17 Jun 2024 16:06:20 +0800 Subject: [PATCH 4/4] feat: update image --- site/docs/spec/interaction/tooltip.zh.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/site/docs/spec/interaction/tooltip.zh.md b/site/docs/spec/interaction/tooltip.zh.md index d7d6d65a84..b223f1ee6a 100644 --- a/site/docs/spec/interaction/tooltip.zh.md +++ b/site/docs/spec/interaction/tooltip.zh.md @@ -201,6 +201,10 @@ chart.interaction("tooltip", { ``` `crosshairsX`的优先级大于`crosshairs`的优先级。 +example + + + ### 设置提示点为空心圆 @@ -208,4 +212,6 @@ chart.interaction("tooltip", { chart.interaction("tooltip", { markerType: "hollow", // 设置提示点的样式为空心圆 }) -``` \ No newline at end of file +``` + +example \ No newline at end of file