From 8e3538ca65908112c60588097bfc1d811bbee468 Mon Sep 17 00:00:00 2001 From: Joel Alan <31396322+lxfu1@users.noreply.github.com> Date: Fri, 30 Aug 2024 11:42:41 +0800 Subject: [PATCH] fix: sankey tooltip interaction when type is view (#6417) --- .../static/energySankeyViewCustomTooltip.svg | 3179 +++++++++++++++++ .../energy-sankey-view-custom-tooltip.ts | 32 + __tests__/plots/static/index.ts | 1 + src/mark/sankey.ts | 3 + 4 files changed, 3215 insertions(+) create mode 100644 __tests__/integration/snapshots/static/energySankeyViewCustomTooltip.svg create mode 100644 __tests__/plots/static/energy-sankey-view-custom-tooltip.ts diff --git a/__tests__/integration/snapshots/static/energySankeyViewCustomTooltip.svg b/__tests__/integration/snapshots/static/energySankeyViewCustomTooltip.svg new file mode 100644 index 0000000000..b537cb963a --- /dev/null +++ b/__tests__/integration/snapshots/static/energySankeyViewCustomTooltip.svg @@ -0,0 +1,3179 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Agricultural 'waste' + + + + + + + + + + + + + Bio-conversion + + + + + + + + + + + + + Biofuel imports + + + + + + + + + + + + + Biomass imports + + + + + + + + + + + + + Coal imports + + + + + + + + + + + + + Coal reserves + + + + + + + + + + + + + Coal + + + + + + + + + + + + + District heating + + + + + + + + + + + + + Electricity grid + + + + + + + + + + + + + Gas imports + + + + + + + + + + + + + Gas reserves + + + + + + + + + + + + + Gas + + + + + + + + + + + + + Geothermal + + + + + + + + + + + + + H2 conversion + + + + + + + + + + + + + H2 + + + + + + + + + + + + + Hydro + + + + + + + + + + + + + Liquid + + + + + + + + + + + + + Marine algae + + + + + + + + + + + + + Ngas + + + + + + + + + + + + + Nuclear + + + + + + + + + + + + + Oil imports + + + + + + + + + + + + + Oil reserves + + + + + + + + + + + + + Oil + + + + + + + + + + + + + Other waste + + + + + + + + + + + + + Pumped heat + + + + + + + + + + + + + Solar PV + + + + + + + + + + + + + Solar Thermal + + + + + + + + + + + + + Solar + + + + + + + + + + + + + Solid + + + + + + + + + + + + + Thermal generation + + + + + + + + + + + + + Tidal + + + + + + + + + + + + + UK land based bioenergy + + + + + + + + + + + + + Wave + + + + + + + + + + + + + Wind + + + + + + + + + + + + + Losses + + + + + + + + + + + + + Industry + + + + + + + + + + + + + Heating and cooling - commercial + + + + + + + + + + + + + Heating and cooling - homes + + + + + + + + + + + + + Over generation / exports + + + + + + + + + + + + + Road transport + + + + + + + + + + + + + Agriculture + + + + + + + + + + + + + Rail transport + + + + + + + + + + + + + Lighting & appliances - commercial + + + + + + + + + + + + + Lighting & appliances - homes + + + + + + + + + + + + + International shipping + + + + + + + + + + + + + Domestic aviation + + + + + + + + + + + + + International aviation + + + + + + + + + + + + + National navigation + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/static/energy-sankey-view-custom-tooltip.ts b/__tests__/plots/static/energy-sankey-view-custom-tooltip.ts new file mode 100644 index 0000000000..de21bd420d --- /dev/null +++ b/__tests__/plots/static/energy-sankey-view-custom-tooltip.ts @@ -0,0 +1,32 @@ +import { csv } from 'd3-fetch'; +import { autoType } from 'd3-dsv'; +import { G2Spec } from '../../../src'; + +export async function energySankeyViewCustomTooltip(): Promise { + const links = await csv('data/energy.csv', autoType); + return { + type: 'view', + children: [ + { + 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 95466ffe34..71e6d5f3e7 100644 --- a/__tests__/plots/static/index.ts +++ b/__tests__/plots/static/index.ts @@ -347,3 +347,4 @@ export { mockPieSpiderExceed } from './mock-pie-spider-exceed'; export { mockFacetPieLegend } from './mock-facet-pie-legend'; export { weatherLineMultiAxesSync } from './weather-line-multi-axes-sync'; export { mockIntervalLegendMarker } from './mock-interval-legend-marker'; +export { energySankeyViewCustomTooltip } from './energy-sankey-view-custom-tooltip'; diff --git a/src/mark/sankey.ts b/src/mark/sankey.ts index 7ecfef3800..26219ed4e9 100644 --- a/src/mark/sankey.ts +++ b/src/mark/sankey.ts @@ -68,6 +68,7 @@ export const Sankey: CC = (options) => { linkLabels = [], animate = {}, tooltip = {}, + interaction, } = options; // Initialize data, generating nodes by link if is not specified. @@ -129,6 +130,7 @@ export const Sankey: CC = (options) => { tooltip: nodeTooltip, animate: maybeAnimation(animate, 'node'), axis: false, + interaction, }), deepMix({}, DEFAULT_LINK_OPTIONS, { data: linkData, @@ -141,6 +143,7 @@ export const Sankey: CC = (options) => { }, tooltip: linkTooltip, animate: maybeAnimation(animate, 'link'), + interaction, }), ]; };