From decb91f117ca64445f71ec6b91e79d1388b2e0a8 Mon Sep 17 00:00:00 2001
From: Joel Alan <31396322+lxfu1@users.noreply.github.com>
Date: Mon, 26 Aug 2024 19:14:19 +0800
Subject: [PATCH] fix: tooltip interaction in api mode (#6411)
* fix: tooltip interaction in api mode
* fix: ci
---
.../static/energySankeyCustomTooltip.svg | 3179 +++++++++++++++++
__tests__/main.ts | 64 +-
.../static/energy-sankey-custom-tooltip.ts | 28 +
__tests__/plots/static/index.ts | 1 +
src/api/utils.ts | 1 +
5 files changed, 3253 insertions(+), 20 deletions(-)
create mode 100644 __tests__/integration/snapshots/static/energySankeyCustomTooltip.svg
create mode 100644 __tests__/plots/static/energy-sankey-custom-tooltip.ts
diff --git a/__tests__/integration/snapshots/static/energySankeyCustomTooltip.svg b/__tests__/integration/snapshots/static/energySankeyCustomTooltip.svg
new file mode 100644
index 0000000000..b537cb963a
--- /dev/null
+++ b/__tests__/integration/snapshots/static/energySankeyCustomTooltip.svg
@@ -0,0 +1,3179 @@
+
\ No newline at end of file
diff --git a/__tests__/main.ts b/__tests__/main.ts
index 51ce8e3365..c654a60f28 100644
--- a/__tests__/main.ts
+++ b/__tests__/main.ts
@@ -3,7 +3,7 @@ import { Renderer as CanvasRenderer } from '@antv/g-canvas';
import { Plugin as DragAndDropPlugin } from '@antv/g-plugin-dragndrop';
import { Renderer as SVGRenderer } from '@antv/g-svg';
import { Renderer as WebGLRenderer } from '@antv/g-webgl';
-import { stdlib, render } from '../src';
+import { stdlib, render, Chart } from '../src';
import { renderToMountedElement } from './utils/renderToMountedElement';
import * as statics from './plots/static';
import * as interactions from './plots/interaction';
@@ -80,6 +80,14 @@ selectRenderer.onchange = () => {
plot();
};
+// Select for renderer mode(Spec | API).
+const selectMode = document.createElement('select');
+selectMode.style.margin = '1em';
+selectMode.append(...['Spec', 'API'].map(createOption));
+selectMode.onchange = () => {
+ plot();
+};
+
// Search input
const searchInput = document.createElement('input');
searchInput.style.margin = '1em';
@@ -106,6 +114,7 @@ if (tests[initialValue]) selectChart.value = initialValue;
app.append(selectChart);
app.append(searchInput);
app.append(selectRenderer);
+app.append(selectMode);
app.append(span);
plot();
@@ -149,27 +158,42 @@ function createSpecRender(object) {
renderer.registerPlugin(
new DragAndDropPlugin({ dragstartDistanceThreshold: 1 }),
);
- canvas = new Canvas({
- container: document.createElement('div'),
- width,
- height,
- renderer,
- });
+ const mode = selectMode.value;
+ if (mode === 'API') {
+ const div = document.createElement('div');
+ const chart = new Chart({
+ container: div,
+ width,
+ height,
+ autoFit: false,
+ renderer,
+ });
+ chart.options(options);
+ chart.render();
+ container.append(div);
+ } else {
+ canvas = new Canvas({
+ container: document.createElement('div'),
+ width,
+ height,
+ renderer,
+ });
- // @ts-ignore
- window.__g_instances__ = [canvas];
- const renderChart = mounted ? renderToMountedElement : render;
- before?.();
- const node = renderChart(
- options,
// @ts-ignore
- { canvas, library: stdlib() },
- () => after?.(),
- );
-
- // Append nodes.
- if (node instanceof HTMLElement) container.append(node);
- if (dom instanceof HTMLElement) container.append(dom);
+ window.__g_instances__ = [canvas];
+ const renderChart = mounted ? renderToMountedElement : render;
+ before?.();
+ const node = renderChart(
+ options,
+ // @ts-ignore
+ { canvas, library: stdlib() },
+ () => after?.(),
+ );
+
+ // Append nodes.
+ if (node instanceof HTMLElement) container.append(node);
+ if (dom instanceof HTMLElement) container.append(dom);
+ }
};
};
return Object.fromEntries(
diff --git a/__tests__/plots/static/energy-sankey-custom-tooltip.ts b/__tests__/plots/static/energy-sankey-custom-tooltip.ts
new file mode 100644
index 0000000000..5a259a7d9b
--- /dev/null
+++ b/__tests__/plots/static/energy-sankey-custom-tooltip.ts
@@ -0,0 +1,28 @@
+import { csv } from 'd3-fetch';
+import { autoType } from 'd3-dsv';
+import { G2Spec } from '../../../src';
+
+export async function energySankeyCustomTooltip(): Promise {
+ const links = await csv('data/energy.csv', autoType);
+
+ return {
+ type: 'sankey',
+ data: { value: { links } },
+ interaction: {
+ tooltip: {
+ render: (e, { title, items }) => {
+ const iconStyle =
+ 'display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px;';
+ let tooltip = title ? `${title}
` : '';
+ items.forEach((item) => {
+ tooltip += `
+
+ ${item.name}: ${item.value}
+
`;
+ });
+ return tooltip;
+ },
+ },
+ },
+ };
+}
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
index 0c179c7152..95466ffe34 100644
--- a/__tests__/plots/static/index.ts
+++ b/__tests__/plots/static/index.ts
@@ -124,6 +124,7 @@ export { titanicPointPackNested } from './titanic-point-pack-nested';
export { commitsPointGroupedLayout } from './commits-point-grouped-layout';
export { alphabetIntervalDataDrivenStyled } from './alphabet-interval-data-driven-styled';
export { unemploymentAreaStackedDataDrivenStyled } from './unemployment-area-stacked-data-driven-styled';
+export { energySankeyCustomTooltip } from './energy-sankey-custom-tooltip';
export { energySankeyDefaults } from './energy-sankey-defaults';
export { energySankeyCustom } from './energy-sankey-custom';
export { sepalBoxSimpleBox } from './sepal-box-simple-box';
diff --git a/src/api/utils.ts b/src/api/utils.ts
index e243201a16..211ee90e2c 100644
--- a/src/api/utils.ts
+++ b/src/api/utils.ts
@@ -28,6 +28,7 @@ export const VIEW_KEYS = [
'autoFit',
'theme',
'title',
+ 'interaction',
];
export const REMOVE_FLAG = '__remove__';