fix stories

gravity-ui · Aug 16, 2023 · f0c7eb3 · f0c7eb3
1 parent a019e1d
commit f0c7eb3
Show file tree

Hide file tree

Showing 6 changed files with 275 additions and 167 deletions.
diff --git a/src/plugins/d3/__stories__/Bar.stories.tsx b/src/plugins/d3/__stories__/Bar.stories.tsx
diff --git a/src/plugins/d3/__stories__/bar/category.stories.tsx b/src/plugins/d3/__stories__/bar/category.stories.tsx
@@ -0,0 +1,89 @@
+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 {ChartKitRef} from '../../../../types';
+import type {ChartKitWidgetData} from '../../../../types/widget-data';
+import {D3Plugin} from '../..';
+
+const Template: Story = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef<ChartKitRef>();
+    const data: ChartKitWidgetData = {
+        legend: {enabled: true},
+        tooltip: {enabled: false},
+        yAxis: [
+            {
+                type: 'linear',
+                labels: {enabled: true},
+                min: 0,
+            },
+        ],
+        series: {
+            data: [
+                {
+                    type: 'bar',
+                    visible: true,
+                    data: [
+                        {
+                            category: 'A',
+                            x: 10,
+                            y: 100,
+                        },
+                        {
+                            category: 'B',
+                            x: 12,
+                            y: 80,
+                        },
+                    ],
+                    name: 'AB',
+                },
+                {
+                    type: 'bar',
+                    visible: true,
+                    data: [
+                        {
+                            category: 'C',
+                            x: 95.5,
+                            y: 120,
+                        },
+                    ],
+                    name: 'C',
+                },
+            ],
+        },
+        title: {text: 'Category axis'},
+        xAxis: {
+            type: 'category',
+            categories: ['A', 'B', 'C'],
+            labels: {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 CategoryXAxis = Template.bind({});
+
+const meta: Meta = {
+    title: 'Plugins/D3/Bar',
+    decorators: [withKnobs],
+};
+
+export default meta;
diff --git a/src/plugins/d3/__stories__/bar/datetime.stories.tsx b/src/plugins/d3/__stories__/bar/datetime.stories.tsx
@@ -0,0 +1,85 @@
+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 {ChartKitRef} from '../../../../types';
+import type {ChartKitWidgetData} from '../../../../types/widget-data';
+import {D3Plugin} from '../..';
+
+const Template: Story = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef<ChartKitRef>();
+    const data: ChartKitWidgetData = {
+        title: {text: 'DateTime axis'},
+        xAxis: {
+            type: 'datetime',
+            labels: {enabled: true},
+        },
+        legend: {enabled: true},
+        tooltip: {enabled: false},
+        yAxis: [
+            {
+                type: 'linear',
+                labels: {enabled: true},
+                min: 0,
+            },
+        ],
+        series: {
+            data: [
+                {
+                    type: 'bar',
+                    visible: true,
+                    data: [
+                        {
+                            x: Number(new Date(2022, 10, 10)),
+                            y: 100,
+                        },
+                        {
+                            x: Number(new Date(2023, 2, 5)),
+                            y: 80,
+                        },
+                    ],
+                    name: 'AB',
+                },
+                {
+                    type: 'bar',
+                    visible: true,
+                    data: [
+                        {
+                            x: Number(new Date(2022, 11, 25)),
+                            y: 120,
+                        },
+                    ],
+                    name: 'C',
+                },
+            ],
+        },
+    };
+
+    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 DatetimeXAxis = Template.bind({});
+
+const meta: Meta = {
+    title: 'Plugins/D3/Bar',
+    decorators: [withKnobs],
+};
+
+export default meta;