chore(D3 plugin): add D3 showcase (#301)

* chore(D3 plugin): add D3 showcase

* add pie and scatter

src/plugins/d3/__stories__/BarX.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {StoryObj} from '@storybook/react';
+import {withKnobs} from '@storybook/addon-knobs';
+import {Button} from '@gravity-ui/uikit';
+import {settings} from '../../../libs';
+import {D3Plugin} from '..';
+import {
+    BasicBarXChart,
+    BasicLinearBarXChart,
+    BasicDateTimeBarXChart,
+} from '../examples/bar-x/Basic';
+import {GroupedColumns} from '../examples/bar-x/GroupedColumns';
+import {StackedColumns} from '../examples/bar-x/StackedColumns';
+
+const ChartStory = ({Chart}: {Chart: React.FC}) => {
+    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%',
+            }}
+        >
+            <Chart />
+        </div>
+    );
+};
+
+export const BasicBarXChartStory: StoryObj<typeof ChartStory> = {
+    name: 'Basic column chart',
+    args: {
+        Chart: BasicBarXChart,
+    },
+};
+
+export const BasicLinearBarXChartStory: StoryObj<typeof ChartStory> = {
+    name: 'Linear X axis',
+    args: {
+        Chart: BasicLinearBarXChart,
+    },
+};
+
+export const BasicDateTimeBarXChartStory: StoryObj<typeof ChartStory> = {
+    name: 'Datetime X axis',
+    args: {
+        Chart: BasicDateTimeBarXChart,
+    },
+};
+
+export const GroupedBarXChartStory: StoryObj<typeof ChartStory> = {
+    name: 'Grouped columns',
+    args: {
+        Chart: GroupedColumns,
+    },
+};
+
+export const StackedBarXChartStory: StoryObj<typeof ChartStory> = {
+    name: 'Stacked columns',
+    args: {
+        Chart: StackedColumns,
+    },
+};
+
+export default {
+    title: 'Plugins/D3/Bar-X',
+    decorators: [withKnobs],
+    component: ChartStory,
+};

src/plugins/d3/__stories__/Pie.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {StoryObj} from '@storybook/react';
+import {withKnobs} from '@storybook/addon-knobs';
+import {Button} from '@gravity-ui/uikit';
+import {settings} from '../../../libs';
+import {D3Plugin} from '..';
+import {BasicPie} from '../examples/pie/Basic';
+import {Donut} from '../examples/pie/Donut';
+
+const ChartStory = ({Chart}: {Chart: React.FC}) => {
+    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%',
+            }}
+        >
+            <Chart />
+        </div>
+    );
+};
+
+export const BasicPieStory: StoryObj<typeof ChartStory> = {
+    name: 'Basic pie',
+    args: {
+        Chart: BasicPie,
+    },
+};
+
+export const BasicDonutStory: StoryObj<typeof ChartStory> = {
+    name: 'Basic donut',
+    args: {
+        Chart: Donut,
+    },
+};
+
+export default {
+    title: 'Plugins/D3/Pie',
+    decorators: [withKnobs],
+    component: ChartStory,
+};

src/plugins/d3/__stories__/Showcase.stories.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import {StoryObj} from '@storybook/react';
+import {withKnobs} from '@storybook/addon-knobs';
+import {BasicBarXChart} from '../examples/bar-x/Basic';
+import {settings} from '../../../libs';
+import {D3Plugin} from '../index';
+import {Loader} from '../../../components/Loader/Loader';
+import {GroupedColumns} from '../examples/bar-x/GroupedColumns';
+import {StackedColumns} from '../examples/bar-x/StackedColumns';
+import {Container, Row, Col, Text} from '@gravity-ui/uikit';
+import {BasicPie} from '../examples/pie/Basic';
+import {Basic as BasicScatter} from '../examples/scatter/Basic';
+import {Donut} from '../examples/pie/Donut';
+
+const ShowcaseStory = () => {
+    const [loading, setLoading] = React.useState(true);
+    React.useEffect(() => {
+        settings.set({plugins: [D3Plugin]});
+        setLoading(false);
+    }, []);
+
+    return (
+        <div style={{width: '100%', height: '100%'}}>
+            {loading ? (
+                <Loader />
+            ) : (
+                <Container spaceRow={5}>
+                    <Row space={1}>
+                        <Text variant="header-2">Bar-x charts</Text>
+                    </Row>
+                    <Row space={3} style={{minHeight: 280}}>
+                        <Col>
+                            <Text variant="subheader-1">Basic column chart</Text>
+                            <BasicBarXChart />
+                        </Col>
+                        <Col>
+                            <Text variant="subheader-1">Grouped columns</Text>
+                            <GroupedColumns />
+                        </Col>
+                        <Col>
+                            <Text variant="subheader-1">Stacked columns</Text>
+                            <StackedColumns />
+                        </Col>
+                    </Row>
+                    <Row space={1}>
+                        <Text variant="header-2">Pie charts</Text>
+                    </Row>
+                    <Row space={3} style={{minHeight: 280}}>
+                        <Col>
+                            <Text variant="subheader-1">Basic pie chart</Text>
+                            <BasicPie />
+                        </Col>
+                        <Col>
+                            <Text variant="subheader-1">Donut chart</Text>
+                            <Donut />
+                        </Col>
+                    </Row>
+                    <Row space={1}>
+                        <Text variant="header-2">Scatter charts</Text>
+                    </Row>
+                    <Row space={3} style={{minHeight: 280}}>
+                        <Col>
+                            <Text variant="subheader-1">Basic scatter</Text>
+                            <BasicScatter />
+                        </Col>
+                    </Row>
+                </Container>
+            )}
+        </div>
+    );
+};
+
+export const D3ShowcaseStory: StoryObj<typeof ShowcaseStory> = {
+    name: 'Showcase',
+};
+
+export default {
+    title: 'Plugins/D3/Showcase',
+    decorators: [withKnobs],
+    component: ShowcaseStory,
+};