feat: add sankey series type (#46)

Author: kuzmadom

package-lock.json

@@ -60,6 +60,7 @@
     "@gravity-ui/date-utils": "^2.5.4",
     "@gravity-ui/i18n": "^1.6.0",
     "d3": "^7.9.0",
+    "d3-sankey": "^0.12.3",
     "lodash": "^4.17.21",
     "tslib": "^2.6.2"
   },
@@ -93,6 +94,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.3",
+    "@types/d3-sankey": "^0.12.4",
     "@types/d3-selection": "^3.0.11",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.12",

package.json

@@ -0,0 +1,30 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {ChartStory} from '../ChartStory';
+import {sankeyPlaygroundData} from '../__data__';
+
+const meta: Meta<typeof ChartStory> = {
+    title: 'Sankey',
+    component: ChartStory,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChartStory>;
+
+export const SankeyPlayground = {
+    name: 'Playground',
+    args: {
+        data: sankeyPlaygroundData,
+        wrapperProps: {
+            styles: {
+                height: 560,
+            },
+        },
+    },
+    argTypes: {
+        data: {
+            control: 'object',
+        },
+    },
+} satisfies Story;

src/__stories__/Sankey/Sankey.stories.tsx

@@ -29,8 +29,10 @@ import {
     lineTwoYAxisData,
     pieBasicData,
     pieDonutData,
+    sankeyPlaygroundData,
     scatterBasicData,
     scatterTwoYAxisData,
+    treemapPlaygroundData,
 } from './__data__';
 
 const ShowcaseStory = () => {
@@ -171,15 +173,19 @@ const ShowcaseStory = () => {
                         <ChartStory data={scatterTwoYAxisData} />
                     </Col>
                 </Row>
-                {/* <Row space={1}>
-                    <Text variant="header-2">Combined charts</Text>
+                <Row space={1}>
+                    <Text variant="header-2">Other</Text>
                 </Row>
-                <Row space={3} style={{minHeight: 280}}>
-                    <Col s={12}>
-                        <Text variant="subheader-1">Line + Bar-X</Text>
-                        <LineAndBarXCombinedChart />
+                <Row space={3}>
+                    <Col s={12} m={6} l={6}>
+                        <Text variant="subheader-1">Treemap</Text>
+                        <ChartStory data={treemapPlaygroundData} />
                     </Col>
-                </Row> */}
+                    <Col s={12} m={6} l={6}>
+                        <Text variant="subheader-1">Sankey</Text>
+                        <ChartStory data={sankeyPlaygroundData} />
+                    </Col>
+                </Row>
             </Container>
         </div>
     );

src/__stories__/Showcase.stories.tsx

@@ -7,3 +7,4 @@ export * from './pie';
 export * from './scatter';
 export * from './treemap';
 export * from './waterfall';
+export * from './sankey';

src/__stories__/__data__/index.ts

@@ -0,0 +1 @@
+export * from './playground';

src/__stories__/__data__/sankey/index.ts

@@ -0,0 +1,46 @@
+import {groups, sort} from 'd3';
+
+import type {ChartData} from '../../../types';
+import nintendoGames from '../nintendoGames';
+
+function prepareData(): ChartData {
+    const gamesWithScore = nintendoGames.filter((game) => Math.round(game.user_score ?? 0));
+    const gamesByPlatform = groups(gamesWithScore, (item) => item.platform);
+    const data = gamesByPlatform.map(([platform, games]) => {
+        const links = sort(
+            groups(games, (game) => Math.round(game.user_score ?? 0)).map(([score, items]) => ({
+                name: String(score),
+                value: items.length,
+            })),
+            (d) => d.name,
+        );
+
+        return {
+            name: platform,
+            links,
+        };
+    });
+
+    const scores = sort(
+        Array.from(new Set(gamesWithScore.map((game) => Math.round(game.user_score ?? 0)))),
+        (d) => d,
+    ).map((d) => ({name: String(d), links: []}));
+
+    return {
+        title: {
+            text: 'Average user score by platform',
+        },
+        tooltip: {enabled: true},
+        series: {
+            data: [
+                {
+                    type: 'sankey',
+                    data: [...data, ...scores],
+                    name: 'Series 1',
+                },
+            ],
+        },
+    };
+}
+
+export const sankeyPlaygroundData = prepareData();

src/__stories__/__data__/sankey/playground.ts

@@ -73,6 +73,8 @@ export function useChartInnerHandlers(props: Props) {
         const closest = getClosestPoints({
             position: [x, y],
             shapesData,
+            boundsHeight,
+            boundsWidth,
         });
         dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
         dispatcher.call(
@@ -128,6 +130,8 @@ export function useChartInnerHandlers(props: Props) {
         const items = getClosestPoints({
             position: [x, y],
             shapesData,
+            boundsHeight,
+            boundsWidth,
         });
         const selected = items?.find((item) => item.closest);
         if (!selected) {

src/components/ChartInner/useChartInnerHandlers.ts

@@ -10,12 +10,13 @@ import type {
     ChartXAxis,
     ChartYAxis,
     TooltipDataChunk,
+    TooltipDataChunkSankey,
     TreemapSeriesData,
     WaterfallSeriesData,
 } from '../../types';
 import {block, getDataCategoryValue, getWaterfallPointSubtotal} from '../../utils';
 
-const b = block('d3-tooltip');
+const b = block('tooltip');
 
 type Props = {
     hovered: TooltipDataChunk[];
@@ -55,7 +56,9 @@ const getXRowData = (data: ChartSeriesData, xAxis?: ChartXAxis) => getRowData('x
 const getYRowData = (data: ChartSeriesData, yAxis?: ChartYAxis) => getRowData('y', data, yAxis);
 
 const getMeasureValue = (data: TooltipDataChunk[], xAxis?: ChartXAxis, yAxis?: ChartYAxis) => {
-    if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
+    if (
+        data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))
+    ) {
         return null;
     }
 
@@ -72,7 +75,8 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
     return (
         <React.Fragment>
             {measureValue && <div>{measureValue}</div>}
-            {hovered.map(({data, series, closest}, i) => {
+            {hovered.map((seriesItem, i) => {
+                const {data, series, closest} = seriesItem;
                 const id = `${get(series, 'id')}_${i}`;
                 const color = get(series, 'color');
 
@@ -144,6 +148,22 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
                             </div>
                         );
                     }
+                    case 'sankey': {
+                        const {target, data: source} = seriesItem as TooltipDataChunkSankey;
+                        const value = source.links.find((d) => d.name === target?.name)?.value;
+
+                        return (
+                            <div key={id} className={b('content-row')}>
+                                <div
+                                    className={b('color')}
+                                    style={{backgroundColor: source.color}}
+                                />
+                                <div style={{display: 'flex', gap: 8, verticalAlign: 'center'}}>
+                                    {source.name} <span>→</span> {target?.name}: {value}
+                                </div>
+                            </div>
+                        );
+                    }
                     default: {
                         return null;
                     }

src/components/Tooltip/DefaultContent.tsx

@@ -10,6 +10,7 @@ export const SeriesType = {
     Scatter: 'scatter',
     Treemap: 'treemap',
     Waterfall: 'waterfall',
+    Sankey: 'sankey',
 } as const;
 
 export enum DashStyle {