feat(D3 plugin): grouped bar-x series (#272)

* feat(D3 plugin): grouped bar-x series * fix story * fix stories
gravity-ui · Sep 6, 2023 · 1751c88 · 1751c88
1 parent eabf291
commit 1751c88
Show file tree

Hide file tree

Showing 9 changed files with 475 additions and 174 deletions.
diff --git a/...d3/__stories__/bar-x/datetime.stories.tsx → ..._stories__/bar-x/DatetimeAxis.stories.tsx b/...d3/__stories__/bar-x/datetime.stories.tsx → ..._stories__/bar-x/DatetimeAxis.stories.tsx
@@ -18,7 +18,7 @@ const Template: Story = () => {
             labels: {enabled: true},
         },
         legend: {enabled: true},
-        tooltip: {enabled: false},
+        tooltip: {enabled: true},
         yAxis: [
             {
                 type: 'linear',

diff --git a/src/plugins/d3/__stories__/bar-x/Grouped.stories.tsx b/src/plugins/d3/__stories__/bar-x/Grouped.stories.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/react';
+import {object, withKnobs} from '@storybook/addon-knobs';
+import {Button} from '@gravity-ui/uikit';
+import {settings} from '../../../../libs';
+import {ChartKit} from '../../../../components/ChartKit';
+import type {ChartKitWidgetData, ChartKitRef} from '../../../../types';
+import {D3Plugin} from '../..';
+
+const Template: Story = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef<ChartKitRef>();
+    const data: ChartKitWidgetData = {
+        tooltip: {enabled: true},
+        title: {text: 'Grouped'},
+        xAxis: {
+            type: 'category',
+            categories: ['A', 'B', 'C'],
+            labels: {enabled: true},
+        },
+        yAxis: [
+            {
+                type: 'linear',
+                labels: {enabled: true},
+                min: 0,
+            },
+        ],
+        series: {
+            data: [
+                {
+                    type: 'bar-x',
+                    visible: true,
+                    data: [
+                        {
+                            x: 'A',
+                            y: 10,
+                        },
+                        {
+                            x: 'B',
+                            y: 80,
+                        },
+                        {
+                            x: 'C',
+                            y: 25,
+                        },
+                    ],
+                    name: 'Min',
+                    dataLabels: {
+                        enabled: true,
+                    },
+                },
+                {
+                    type: 'bar-x',
+                    visible: true,
+                    data: [
+                        {
+                            x: 'A',
+                            y: 110,
+                        },
+                        {
+                            x: 'B',
+                            y: 80,
+                        },
+                        {
+                            x: 'C',
+                            y: 200,
+                        },
+                    ],
+                    name: 'Mid',
+                    dataLabels: {
+                        enabled: true,
+                    },
+                },
+                {
+                    type: 'bar-x',
+                    visible: true,
+                    data: [
+                        {
+                            x: 'A',
+                            y: 410,
+                        },
+                        {
+                            x: 'B',
+                            y: 580,
+                        },
+                        {
+                            x: 'C',
+                            y: 205,
+                        },
+                    ],
+                    name: 'Max',
+                    dataLabels: {
+                        enabled: true,
+                    },
+                },
+            ],
+        },
+    };
+
+    if (!shown) {
+        settings.set({plugins: [D3Plugin]});
+        return <Button onClick={() => setShown(true)}>Show chart</Button>;
+    }
+
+    return (
+        <div
+            style={{
+                height: '80vh',
+                width: '100%',
+            }}
+        >
+            <ChartKit ref={chartkitRef} type="d3" data={object<ChartKitWidgetData>('data', data)} />
+        </div>
+    );
+};
+
+export const Grouped = Template.bind({});
+
+const meta: Meta = {
+    title: 'Plugins/D3/Bar-X',
+    decorators: [withKnobs],
+};
+
+export default meta;
diff --git a/src/plugins/d3/__stories__/bar-x/GroupedAndStacked.stories.tsx b/src/plugins/d3/__stories__/bar-x/GroupedAndStacked.stories.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/react';
+import {object, withKnobs} from '@storybook/addon-knobs';
+import {Button} from '@gravity-ui/uikit';
+import {settings} from '../../../../libs';
+import {ChartKit} from '../../../../components/ChartKit';
+import type {ChartKitWidgetData, ChartKitRef} from '../../../../types';
+import {D3Plugin} from '../..';
+
+const Template: Story = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef<ChartKitRef>();
+    const data: ChartKitWidgetData = {
+        tooltip: {enabled: true},
+        title: {text: 'Grouped and stacked'},
+        xAxis: {
+            type: 'category',
+            categories: ['A', 'B', 'C'],
+            labels: {enabled: true},
+        },
+        yAxis: [
+            {
+                type: 'linear',
+                labels: {enabled: true},
+                min: 0,
+            },
+        ],
+        series: {
+            data: [
+                {
+                    type: 'bar-x',
+                    visible: true,
+                    stacking: 'normal',
+                    data: [
+                        {
+                            x: 'A',
+                            y: 100,
+                        },
+                        {
+                            x: 'B',
+                            y: 805,
+                        },
+                        {
+                            x: 'C',
+                            y: 250,
+                        },
+                    ],
+                    stackId: 'stack1',
+                    name: 'Base1',
+                },
+                {
+                    type: 'bar-x',
+                    visible: true,
+                    stacking: 'normal',
+                    data: [
+                        {
+                            x: 'A',
+                            y: 40,
+                        },
+                        {
+                            x: 'B',
+                            y: 80,
+                        },
+                        {
+                            x: 'C',
+                            y: 25,
+                        },
+                    ],
+                    stackId: 'stack1',
+                    name: 'Extended1',
+                },
+                {
+                    type: 'bar-x',
+                    visible: true,
+                    stacking: 'normal',
+                    data: [
+                        {
+                            x: 'A',
+                            y: 110,
+                        },
+                        {
+                            x: 'B',
+                            y: 80,
+                        },
+                        {
+                            x: 'C',
+                            y: 200,
+                        },
+                    ],
+                    stackId: 'stack2',
+                    name: 'Base2',
+                },
+                {
+                    type: 'bar-x',
+                    visible: true,
+                    stacking: 'normal',
+                    data: [
+                        {
+                            x: 'A',
+                            y: 110,
+                        },
+                        {
+                            x: 'B',
+                            y: 80,
+                        },
+                        {
+                            x: 'C',
+                            y: 200,
+                        },
+                    ],
+                    stackId: 'stack2',
+                    name: 'Extended2',
+                },
+            ],
+        },
+    };
+
+    if (!shown) {
+        settings.set({plugins: [D3Plugin]});
+        return <Button onClick={() => setShown(true)}>Show chart</Button>;
+    }
+
+    return (
+        <div
+            style={{
+                height: '80vh',
+                width: '100%',
+            }}
+        >
+            <ChartKit ref={chartkitRef} type="d3" data={object<ChartKitWidgetData>('data', data)} />
+        </div>
+    );
+};
+
+export const GroupedAndStacked = Template.bind({});
+
+const meta: Meta = {
+    title: 'Plugins/D3/Bar-X',
+    decorators: [withKnobs],
+};
+
+export default meta;
diff --git a/...s/d3/__stories__/bar-x/linear.stories.tsx → .../__stories__/bar-x/LinearAxis.stories.tsx b/...s/d3/__stories__/bar-x/linear.stories.tsx → .../__stories__/bar-x/LinearAxis.stories.tsx
@@ -19,12 +19,10 @@ const Template: Story = () => {
                     visible: true,
                     data: [
                         {
-                            category: 'A',
                             x: 10,
                             y: 100,
                         },
                         {
-                            category: 'B',
                             x: 12,
                             y: 80,
                         },
@@ -36,7 +34,6 @@ const Template: Story = () => {
                     visible: true,
                     data: [
                         {
-                            category: 'C',
                             x: 95.5,
                             y: 120,
                         },
@@ -62,7 +59,7 @@ const Template: Story = () => {
             },
         ],
         legend: {enabled: true},
-        tooltip: {enabled: false},
+        tooltip: {enabled: true},
     };
 
     if (!shown) {

diff --git a/.../d3/__stories__/bar-x/stacked.stories.tsx → .../d3/__stories__/bar-x/Stacked.stories.tsx b/.../d3/__stories__/bar-x/stacked.stories.tsx → .../d3/__stories__/bar-x/Stacked.stories.tsx
@@ -35,15 +35,15 @@ const Template: Story = () => {
                     stacking: 'normal',
                     data: [
                         {
-                            category: 'A',
+                            x: 'A',
                             y: 100,
                         },
                         {
-                            category: 'B',
+                            x: 'B',
                             y: 80,
                         },
                         {
-                            category: 'C',
+                            x: 'C',
                             y: 120,
                         },
                     ],
@@ -63,11 +63,11 @@ const Template: Story = () => {
                     stacking: 'normal',
                     data: [
                         {
-                            category: 'A',
+                            x: 'A',
                             y: 5,
                         },
                         {
-                            category: 'B',
+                            x: 'B',
                             y: 25,
                         },
                     ],

diff --git a/...d3/__stories__/bar-x/category.stories.tsx → ..._stories__/bar-x/СategoryAxis.stories.tsx b/...d3/__stories__/bar-x/category.stories.tsx → ..._stories__/bar-x/СategoryAxis.stories.tsx
diff --git a/src/plugins/d3/renderer/components/Tooltip/DefaultContent.tsx b/src/plugins/d3/renderer/components/Tooltip/DefaultContent.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import get from 'lodash/get';
-
-import type {ChartKitWidgetSeriesData, TooltipHoveredData} from '../../../../../types/widget-data';
-
+import {dateTime} from '@gravity-ui/date-utils';
+import type {ChartKitWidgetSeriesData, TooltipHoveredData} from '../../../../../types';
+import {formatNumber} from '../../../../shared';
 import type {PreparedAxis} from '../../hooks';
 import {getDataCategoryValue} from '../../utils';
 
@@ -12,21 +12,32 @@ type Props = {
     yAxis: PreparedAxis;
 };
 
-const getXRowData = (xAxis: PreparedAxis, data: ChartKitWidgetSeriesData) => {
-    const categories = get(xAxis, 'categories', [] as string[]);
+const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
+
+const getRowData = (fieldName: 'x' | 'y', axis: PreparedAxis, data: ChartKitWidgetSeriesData) => {
+    const categories = get(axis, 'categories', [] as string[]);
 
-    return xAxis.type === 'category'
-        ? getDataCategoryValue({axisDirection: 'x', categories, data})
-        : (data as {x: number}).x;
+    switch (axis.type) {
+        case 'category': {
+            return getDataCategoryValue({axisDirection: fieldName, categories, data});
+        }
+        case 'datetime': {
+            const value = get(data, fieldName);
+            return dateTime({input: value}).format(DEFAULT_DATE_FORMAT);
+        }
+        case 'linear':
+        default: {
+            const value = get(data, fieldName) as unknown as number;
+            return formatNumber(value);
+        }
+    }
 };
 
-const getYRowData = (yAxis: PreparedAxis, data: ChartKitWidgetSeriesData) => {
-    const categories = get(yAxis, 'categories', [] as string[]);
+const getXRowData = (xAxis: PreparedAxis, data: ChartKitWidgetSeriesData) =>
+    getRowData('x', xAxis, data);
 
-    return yAxis.type === 'category'
-        ? getDataCategoryValue({axisDirection: 'y', categories, data})
-        : (data as {y: number}).y;
-};
+const getYRowData = (yAxis: PreparedAxis, data: ChartKitWidgetSeriesData) =>
+    getRowData('y', yAxis, data);
 
 export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
     const {data, series} = hovered;