chore(D3 plugin): fix showcase (#377)

* chore(D3 plugin): fix showcase * chore: use Showcase as default story
gravity-ui · Jan 9, 2024 · 3c0f6c2 · 3c0f6c2
1 parent 0b2f931
commit 3c0f6c2
Show file tree

Hide file tree

Showing 20 changed files with 172 additions and 102 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -38,8 +38,8 @@ export const parameters = {
     },
     options: {
         storySort: {
-            order: ['Theme', 'Components', ['Basic']],
-            method: 'alphabetical',
+            order: ['Showcase'],
+            includeNames: true,
         },
     },
 };

diff --git a/src/plugins/d3/__stories__/Showcase.stories.tsx b/src/plugins/d3/__stories__/Showcase.stories.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
+import {Container, Row, Col, Text} from '@gravity-ui/uikit';
 import {StoryObj} from '@storybook/react';
 import {withKnobs} from '@storybook/addon-knobs';
+
 import {settings} from '../../../libs';
-import {D3Plugin} from '../index';
 import {Loader} from '../../../components/Loader/Loader';
+import {D3Plugin} from '../index';
 import {BasicBarXChart} from '../examples/bar-x/Basic';
 import {GroupedColumns} from '../examples/bar-x/GroupedColumns';
 import {StackedColumns} from '../examples/bar-x/StackedColumns';
 import {DataLabels as BarXDataLabels} from '../examples/bar-x/DataLabels';
 import {Basic as BasicBarY} from '../examples/bar-y/Basic';
 import {GroupedColumns as GroupedColumnsBarY} from '../examples/bar-y/GroupedColumns';
 import {StackedColumns as StackedColumnsBarY} from '../examples/bar-y/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 {Basic as BasicLine} from '../examples/line/Basic';
@@ -25,6 +26,7 @@ import {StackedArea} from '../examples/area/StackedArea';
 
 const ShowcaseStory = () => {
     const [loading, setLoading] = React.useState(true);
+
     React.useEffect(() => {
         settings.set({plugins: [D3Plugin]});
         setLoading(false);
@@ -39,117 +41,105 @@ const ShowcaseStory = () => {
                     <Row space={1}>
                         <Text variant="header-2">Line charts</Text>
                     </Row>
-                    <Row space={3} style={{minHeight: 280}}>
-                        <Col>
+                    <Row space={3}>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Basic line chart</Text>
                             <BasicLine />
                         </Col>
-                        <Col>
-                            <Text variant="subheader-1">With data labels</Text>
-                            <LineWithDataLabels />
-                        </Col>
-                        <Col>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">With markers</Text>
                             <LineWithMarkers />
                         </Col>
-                    </Row>
-                    <Row space={1} style={{minHeight: 280}}>
-                        <Col>
+                        <Col s={12} m={12} l={6}>
+                            <Text variant="subheader-1">With data labels</Text>
+                            <LineWithDataLabels />
+                        </Col>
+                        <Col s={12} m={12} l={6}>
                             <Text variant="subheader-1">Lines with different shapes</Text>
                             <LinesWithShapes />
                         </Col>
                     </Row>
                     <Row space={1}>
                         <Text variant="header-2">Area charts</Text>
                     </Row>
-                    <Row space={3} style={{minHeight: 280}}>
-                        <Col>
+                    <Row space={3}>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Basic area chart</Text>
                             <BasicArea />
                         </Col>
-                        <Col>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Stacked area</Text>
                             <StackedArea />
                         </Col>
-                        <Col></Col>
                     </Row>
                     <Row space={1}>
                         <Text variant="header-2">Bar-x charts</Text>
                     </Row>
-                    <Row space={3} style={{minHeight: 280}}>
-                        <Col>
+                    <Row space={3}>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Basic column chart</Text>
                             <BasicBarXChart />
                         </Col>
-                        <Col>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Grouped columns</Text>
                             <GroupedColumns />
                         </Col>
-                        <Col>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Stacked columns</Text>
                             <StackedColumns />
                         </Col>
-                    </Row>
-                    <Row space={3} style={{minHeight: 280}}>
-                        <Col>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Bar-x chart with data labels</Text>
                             <BarXDataLabels />
                         </Col>
-                        <Col></Col>
-                        <Col></Col>
                     </Row>
                     <Row space={1}>
                         <Text variant="header-2">Bar-y charts</Text>
                     </Row>
-                    <Row space={3} style={{minHeight: 280}}>
-                        <Col>
+                    <Row space={3}>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Basic bar chart</Text>
                             <BasicBarY />
                         </Col>
-                        <Col>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Grouped bars</Text>
                             <GroupedColumnsBarY />
                         </Col>
-                        <Col>
+                        <Col s={12} m={12}>
                             <Text variant="subheader-1">Stacked bars</Text>
                             <StackedColumnsBarY />
                         </Col>
                     </Row>
                     <Row space={1}>
                         <Text variant="header-2">Pie charts</Text>
                     </Row>
-                    <Row space={3} style={{minHeight: 280}}>
-                        <Col>
+                    <Row space={3}>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Basic pie chart</Text>
                             <BasicPie />
                         </Col>
-                        <Col>
+                        <Col s={12} m={6}>
                             <Text variant="subheader-1">Donut chart</Text>
                             <Donut />
                         </Col>
-                        <Col></Col>
                     </Row>
                     <Row space={1}>
                         <Text variant="header-2">Scatter charts</Text>
                     </Row>
-                    <Row space={3} style={{minHeight: 280}}>
-                        <Col>
+                    <Row space={3}>
+                        <Col s={12}>
                             <Text variant="subheader-1">Basic scatter</Text>
                             <BasicScatter />
                         </Col>
-                        <Col></Col>
-                        <Col></Col>
                     </Row>
                     <Row space={1}>
-                        <Text variant="header-2">Combined chart</Text>
+                        <Text variant="header-2">Combined charts</Text>
                     </Row>
                     <Row space={3} style={{minHeight: 280}}>
-                        <Col>
+                        <Col s={12}>
                             <Text variant="subheader-1">Line + Bar-X</Text>
                             <LineAndBarXCombinedChart />
                         </Col>
-                        <Col></Col>
-                        <Col></Col>
                     </Row>
                 </Container>
             )}

diff --git a/src/plugins/d3/examples/ExampleWrapper.tsx b/src/plugins/d3/examples/ExampleWrapper.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+type Props = {
+    children?: React.ReactNode;
+    styles?: React.CSSProperties;
+};
+
+export const ExampleWrapper = (props: Props) => {
+    const styles: React.CSSProperties = {
+        height: 280,
+        ...props.styles,
+    };
+    return <div style={styles}>{props.children}</div>;
+};
diff --git a/src/plugins/d3/examples/area/Basic.tsx b/src/plugins/d3/examples/area/Basic.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {ChartKit} from '../../../../components/ChartKit';
 import type {ChartKitWidgetData, AreaSeries, AreaSeriesData} from '../../../../types';
+import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
 
 function prepareData(): AreaSeries[] {
@@ -26,9 +27,6 @@ export const Basic = () => {
     const series = prepareData();
 
     const widgetData: ChartKitWidgetData = {
-        title: {
-            text: 'User score (puzzle genre)',
-        },
         series: {
             data: series,
         },
@@ -37,5 +35,9 @@ export const Basic = () => {
         },
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };
diff --git a/src/plugins/d3/examples/area/StackedArea.tsx b/src/plugins/d3/examples/area/StackedArea.tsx
@@ -2,6 +2,7 @@ import {groups} from 'd3';
 import React from 'react';
 import {ChartKit} from '../../../../components/ChartKit';
 import type {ChartKitWidgetData, AreaSeries, AreaSeriesData} from '../../../../types';
+import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
 
 const years = Array.from(
@@ -57,11 +58,12 @@ export const StackedArea = () => {
         xAxis: {
             type: 'category',
             categories: years,
-            title: {
-                text: 'Release year',
-            },
         },
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };
diff --git a/src/plugins/d3/examples/bar-x/Basic.tsx b/src/plugins/d3/examples/bar-x/Basic.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import {groups} from 'd3';
 import {ChartKit} from '../../../../components/ChartKit';
 import type {ChartKitWidgetData, BarXSeries, BarXSeriesData} from '../../../../types';
+import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import {groups} from 'd3';
 
 function prepareData(
     {field, filterNulls}: {field: 'platform' | 'meta_score' | 'date'; filterNulls?: boolean} = {
@@ -52,7 +53,11 @@ export const BasicBarXChart = () => {
         yAxis: [{title: {text: 'Number of games released'}}],
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };
 
 export const BasicLinearBarXChart = () => {
@@ -73,7 +78,11 @@ export const BasicLinearBarXChart = () => {
         },
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };
 
 export const BasicDateTimeBarXChart = () => {
@@ -95,5 +104,9 @@ export const BasicDateTimeBarXChart = () => {
         },
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };
diff --git a/src/plugins/d3/examples/bar-x/DataLabels.tsx b/src/plugins/d3/examples/bar-x/DataLabels.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import {groups, sort} from 'd3';
 import {ChartKit} from '../../../../components/ChartKit';
 import type {BarXSeries, BarXSeriesData, ChartKitWidgetData} from '../../../../types';
+import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import {groups, sort} from 'd3';
 
 const years = Array.from(
     new Set(
@@ -63,5 +64,9 @@ export const DataLabels = () => {
         },
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };
diff --git a/src/plugins/d3/examples/bar-x/GroupedColumns.tsx b/src/plugins/d3/examples/bar-x/GroupedColumns.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import {groups} from 'd3';
 import {ChartKit} from '../../../../components/ChartKit';
 import type {BarXSeries, ChartKitWidgetData} from '../../../../types';
+import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import {groups} from 'd3';
 
 function prepareData() {
     const displayedYears = [2015, 2016, 2017, 2018, 2019];
@@ -55,5 +56,9 @@ export const GroupedColumns = () => {
         },
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };
diff --git a/src/plugins/d3/examples/bar-x/StackedColumns.tsx b/src/plugins/d3/examples/bar-x/StackedColumns.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import {groups} from 'd3';
 import {ChartKit} from '../../../../components/ChartKit';
 import type {BarXSeries, ChartKitWidgetData} from '../../../../types';
+import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import {groups} from 'd3';
 
 function prepareData() {
     const grouped = groups(
@@ -52,5 +53,9 @@ export const StackedColumns = () => {
         },
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };
diff --git a/src/plugins/d3/examples/bar-y/Basic.tsx b/src/plugins/d3/examples/bar-y/Basic.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import {groups} from 'd3';
 import {ChartKit} from '../../../../components/ChartKit';
 import type {ChartKitWidgetData, BarYSeries, BarYSeriesData} from '../../../../types';
+import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import {groups} from 'd3';
 
 function prepareData(field: 'platform' | 'meta_score' | 'date' = 'platform') {
     const gamesByPlatform = groups(nintendoGames, (item) => item[field]);
@@ -45,5 +46,9 @@ export const Basic = () => {
         ],
     };
 
-    return <ChartKit type="d3" data={widgetData} />;
+    return (
+        <ExampleWrapper>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
 };