feat(D3 plugin): add chart click event (#423)

gravity-ui · Feb 13, 2024 · 647b127 · 647b127
1 parent 3324fc1
commit 647b127
Show file tree

Hide file tree

Showing 14 changed files with 337 additions and 54 deletions.
diff --git a/src/plugins/d3/__stories__/area/Playground.stories.tsx b/src/plugins/d3/__stories__/area/Playground.stories.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import {Button} from '@gravity-ui/uikit';
+import {action} from '@storybook/addon-actions';
+import {StoryObj} from '@storybook/react';
+
+import {D3Plugin} from '../..';
+import {ChartKit} from '../../../../components/ChartKit';
+import {settings} from '../../../../libs';
+import {ChartKitWidgetData} from '../../../../types';
+import {HighchartsPlugin} from '../../../highcharts';
+
+function prepareData(): ChartKitWidgetData {
+    return {
+        series: {
+            options: {
+                line: {
+                    lineWidth: 2,
+                },
+            },
+            data: [
+                {
+                    name: 'A',
+                    type: 'area',
+                    data: [
+                        {x: 1, y: 200},
+                        {x: 2, y: 220},
+                        {x: 3, y: 180},
+                    ],
+                    stacking: 'normal',
+                    dataLabels: {
+                        enabled: true,
+                    },
+                },
+                {
+                    name: 'B',
+                    type: 'area',
+                    data: [
+                        {x: 1, y: 30},
+                        {x: 2, y: 25},
+                        {x: 3, y: 45},
+                    ],
+                    stacking: 'normal',
+                    dataLabels: {
+                        enabled: true,
+                    },
+                },
+            ],
+        },
+        chart: {
+            events: {
+                click: action('chart.events.click'),
+            },
+        },
+    };
+}
+
+const ChartStory = ({data}: {data: ChartKitWidgetData}) => {
+    const [shown, setShown] = React.useState(false);
+
+    if (!shown) {
+        settings.set({plugins: [D3Plugin, HighchartsPlugin]});
+        return <Button onClick={() => setShown(true)}>Show chart</Button>;
+    }
+
+    return (
+        <>
+            <div
+                style={{
+                    height: '80vh',
+                    width: '100%',
+                }}
+            >
+                <ChartKit type="d3" data={data} />
+            </div>
+        </>
+    );
+};
+
+export const PlaygroundLineChartStory: StoryObj<typeof ChartStory> = {
+    name: 'Playground',
+    args: {
+        data: prepareData(),
+    },
+    argTypes: {
+        data: {
+            control: 'object',
+        },
+    },
+};
+
+export default {
+    title: 'Plugins/D3/Area',
+    component: ChartStory,
+};
diff --git a/src/plugins/d3/__stories__/bar-x/Playground.stories.tsx b/src/plugins/d3/__stories__/bar-x/Playground.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import {StoryObj} from '@storybook/react';
+
 import {Button} from '@gravity-ui/uikit';
+import {action} from '@storybook/addon-actions';
+import {StoryObj} from '@storybook/react';
 import {settings} from '../../../../libs';
 import {D3Plugin} from '../..';
 import {ChartKitWidgetData} from '../../../../types';
@@ -27,7 +29,7 @@ function prepareData(): ChartKitWidgetData {
         },
         xAxis: {
             type: 'category',
-            categories: gamesByPlatform.map(([key]) => key),
+            categories: gamesByPlatform.map(([key, _group]) => key),
             title: {
                 text: 'Game Platforms',
             },
@@ -48,6 +50,11 @@ function prepareData(): ChartKitWidgetData {
                 },
             },
         ],
+        chart: {
+            events: {
+                click: action('chart.events.click'),
+            },
+        },
     };
 }
 

diff --git a/src/plugins/d3/__stories__/bar-y/Playground.stories.tsx b/src/plugins/d3/__stories__/bar-y/Playground.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import {StoryObj} from '@storybook/react';
+
 import {Button} from '@gravity-ui/uikit';
+import {action} from '@storybook/addon-actions';
+import {StoryObj} from '@storybook/react';
 import {settings} from '../../../../libs';
 import {D3Plugin} from '../..';
 import {ChartKitWidgetData} from '../../../../types';
@@ -49,6 +51,11 @@ function prepareData(): ChartKitWidgetData {
                 },
             },
         ],
+        chart: {
+            events: {
+                click: action('chart.events.click'),
+            },
+        },
     };
 }
 

diff --git a/src/plugins/d3/__stories__/line/Playground.stories.tsx b/src/plugins/d3/__stories__/line/Playground.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import {StoryObj} from '@storybook/react';
+
 import {Button} from '@gravity-ui/uikit';
+import {action} from '@storybook/addon-actions';
+import {StoryObj} from '@storybook/react';
 import {settings} from '../../../../libs';
 import {D3Plugin} from '../..';
 import {ChartKitWidgetData, LineSeriesData} from '../../../../types';
@@ -84,6 +86,11 @@ function prepareData(): ChartKitWidgetData {
                 },
             },
         ],
+        chart: {
+            events: {
+                click: action('chart.events.click'),
+            },
+        },
     };
 }
 

diff --git a/src/plugins/d3/__stories__/pie/Playground.stories.tsx b/src/plugins/d3/__stories__/pie/Playground.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import {StoryObj} from '@storybook/react';
+
 import {Button} from '@gravity-ui/uikit';
+import {action} from '@storybook/addon-actions';
+import {StoryObj} from '@storybook/react';
 import {settings} from '../../../../libs';
 import {D3Plugin} from '../..';
 import {ChartKitWidgetData} from '../../../../types';
@@ -31,6 +33,11 @@ function prepareData(): ChartKitWidgetData {
             ],
         },
         legend: {enabled: true},
+        chart: {
+            events: {
+                click: action('chart.events.click'),
+            },
+        },
     };
 }
 

diff --git a/src/plugins/d3/__stories__/scatter/Playground.stories.tsx b/src/plugins/d3/__stories__/scatter/Playground.stories.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+
+import {Button} from '@gravity-ui/uikit';
+import {action} from '@storybook/addon-actions';
+import {StoryObj} from '@storybook/react';
+
+import {D3Plugin} from '../..';
+import {ChartKit} from '../../../../components/ChartKit';
+import {settings} from '../../../../libs';
+import {ChartKitWidgetData} from '../../../../types';
+import nintendoGames from '../../examples/nintendoGames';
+
+function prepareData() {
+    const dataset = nintendoGames.filter((d) => d.date && d.user_score);
+    const data = dataset.map((d) => ({
+        x: d.date || undefined,
+        y: d.user_score || undefined,
+        custom: d,
+    }));
+
+    const widgetData: ChartKitWidgetData = {
+        series: {
+            data: [
+                {
+                    type: 'scatter',
+                    data,
+                    name: 'Scatter series',
+                },
+            ],
+        },
+        yAxis: [
+            {
+                title: {
+                    text: 'User score',
+                },
+            },
+        ],
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Release dates',
+            },
+        },
+        chart: {
+            events: {
+                click: action('chart.events.click'),
+            },
+        },
+    };
+
+    return widgetData;
+}
+
+const ChartStory = ({data}: {data: ChartKitWidgetData}) => {
+    const [shown, setShown] = React.useState(false);
+
+    if (!shown) {
+        settings.set({plugins: [D3Plugin]});
+        return <Button onClick={() => setShown(true)}>Show chart</Button>;
+    }
+
+    return (
+        <div
+            style={{
+                height: '80vh',
+                width: '100%',
+            }}
+        >
+            <ChartKit type="d3" data={data} />
+        </div>
+    );
+};
+
+export const PlaygroundBarYChartStory: StoryObj<typeof ChartStory> = {
+    name: 'Playground',
+    args: {
+        data: prepareData(),
+    },
+    argTypes: {
+        data: {
+            control: 'object',
+        },
+    },
+};
+
+export default {
+    title: 'Plugins/D3/Scatter',
+    component: ChartStory,
+};
diff --git a/src/plugins/d3/__stories__/treemap/Playground.stories.tsx b/src/plugins/d3/__stories__/treemap/Playground.stories.tsx
@@ -1,38 +1,44 @@
 import React from 'react';
-import {StoryObj} from '@storybook/react';
+
 import {Button} from '@gravity-ui/uikit';
+import {action} from '@storybook/addon-actions';
+import {StoryObj} from '@storybook/react';
 import {settings} from '../../../../libs';
 import {ChartKit} from '../../../../components/ChartKit';
-import type {ChartKitRef} from '../../../../types';
-import type {ChartKitWidgetData} from '../../../../types/widget-data';
+import type {ChartKitRef, ChartKitWidgetData, TreemapSeries} from '../../../../types';
 import {D3Plugin} from '../..';
 
 const prepareData = (): ChartKitWidgetData => {
+    const treemapSeries: TreemapSeries = {
+        type: 'treemap',
+        name: 'Example',
+        dataLabels: {
+            enabled: true,
+        },
+        layoutAlgorithm: 'binary',
+        levels: [{index: 1}, {index: 2}, {index: 3}],
+        data: [
+            {name: 'One', value: 15},
+            {name: 'Two', value: 10},
+            {name: 'Three', value: 15},
+            {name: 'Four'},
+            {name: 'Four-1', value: 5, parentId: 'Four'},
+            {name: 'Four-2', parentId: 'Four'},
+            {name: 'Four-3', value: 4, parentId: 'Four'},
+            {name: 'Four-2-1', value: 5, parentId: 'Four-2'},
+            {name: 'Four-2-2', value: 7, parentId: 'Four-2'},
+            {name: 'Four-2-3', value: 10, parentId: 'Four-2'},
+        ],
+    };
+
     return {
         series: {
-            data: [
-                {
-                    type: 'treemap',
-                    name: 'Example',
-                    dataLabels: {
-                        enabled: true,
-                    },
-                    layoutAlgorithm: 'binary',
-                    levels: [{index: 1}, {index: 2}, {index: 3}],
-                    data: [
-                        {name: 'One', value: 15},
-                        {name: 'Two', value: 10},
-                        {name: 'Three', value: 15},
-                        {name: 'Four'},
-                        {name: 'Four-1', value: 5, parentId: 'Four'},
-                        {name: 'Four-2', parentId: 'Four'},
-                        {name: 'Four-3', value: 4, parentId: 'Four'},
-                        {name: 'Four-2-1', value: 5, parentId: 'Four-2'},
-                        {name: 'Four-2-2', value: 7, parentId: 'Four-2'},
-                        {name: 'Four-2-3', value: 10, parentId: 'Four-2'},
-                    ],
-                },
-            ],
+            data: [treemapSeries],
+        },
+        chart: {
+            events: {
+                click: action('chart.events.click'),
+            },
         },
     };
 };

diff --git a/src/plugins/d3/renderer/components/Chart.tsx b/src/plugins/d3/renderer/components/Chart.tsx
@@ -93,6 +93,15 @@ export const Chart = (props: Props) => {
         yScale,
         svgContainer: svgRef.current,
     });
+    React.useEffect(() => {
+        if (data.chart?.events?.click) {
+            dispatcher.on('click-chart', data.chart?.events?.click);
+        }
+
+        return () => {
+            dispatcher.on('click-chart', null);
+        };
+    }, [dispatcher]);
 
     const boundsOffsetTop = chart.margin.top;
     const boundsOffsetLeft = chart.margin.left + getWidthOccupiedByYAxis({preparedAxis: yAxis});