From f0c7eb3b6de8686e6d45f27bc854b4c2bde085df Mon Sep 17 00:00:00 2001 From: "Irina V. Kuzmina" Date: Wed, 16 Aug 2023 18:06:17 +0300 Subject: [PATCH] fix stories --- src/plugins/d3/__stories__/Bar.stories.tsx | 154 ------------------ .../d3/__stories__/bar/category.stories.tsx | 89 ++++++++++ .../d3/__stories__/bar/datetime.stories.tsx | 85 ++++++++++ .../d3/__stories__/bar/linear.stories.tsx | 88 ++++++++++ .../LinearCategories.stories.tsx | 14 +- .../{ => scatter}/Timestamp.stories.tsx | 12 +- 6 files changed, 275 insertions(+), 167 deletions(-) delete mode 100644 src/plugins/d3/__stories__/Bar.stories.tsx create mode 100644 src/plugins/d3/__stories__/bar/category.stories.tsx create mode 100644 src/plugins/d3/__stories__/bar/datetime.stories.tsx create mode 100644 src/plugins/d3/__stories__/bar/linear.stories.tsx rename src/plugins/d3/__stories__/{ => scatter}/LinearCategories.stories.tsx (93%) rename src/plugins/d3/__stories__/{ => scatter}/Timestamp.stories.tsx (90%) diff --git a/src/plugins/d3/__stories__/Bar.stories.tsx b/src/plugins/d3/__stories__/Bar.stories.tsx deleted file mode 100644 index bf3cf7d0..00000000 --- a/src/plugins/d3/__stories__/Bar.stories.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import React from 'react'; -import {Meta, Story} from '@storybook/react'; -import {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(); - const chartBaseOptions = { - 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', - color: 'salmon', - }, - ], - }, - }; - - const categoryXAxis = { - ...chartBaseOptions, - title: {text: 'Category axis'}, - xAxis: { - type: 'category', - categories: ['A', 'B', 'C'], - labels: {enabled: true}, - }, - } as ChartKitWidgetData; - - const linearXAxis = { - ...chartBaseOptions, - title: {text: 'Linear axis'}, - xAxis: { - type: 'linear', - labels: {enabled: true}, - }, - } as ChartKitWidgetData; - - const dateTimeXAxis = { - ...chartBaseOptions, - title: {text: 'DateTime axis'}, - xAxis: { - type: 'datetime', - labels: {enabled: true}, - }, - 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', - color: 'salmon', - }, - ], - }, - } as ChartKitWidgetData; - - if (!shown) { - settings.set({plugins: [D3Plugin]}); - return ; - } - - return ( -
-
- -
-
- -
-
- -
-
- ); -}; - -export const Bar = Template.bind({}); - -const meta: Meta = { - title: 'Plugins/D3', - decorators: [withKnobs], -}; - -export default meta; diff --git a/src/plugins/d3/__stories__/bar/category.stories.tsx b/src/plugins/d3/__stories__/bar/category.stories.tsx new file mode 100644 index 00000000..22026c60 --- /dev/null +++ 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(); + 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 ; + } + + return ( +
+ ('data', data)} /> +
+ ); +}; + +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 new file mode 100644 index 00000000..5de3fbd2 --- /dev/null +++ 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(); + 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 ; + } + + return ( +
+ ('data', data)} /> +
+ ); +}; + +export const DatetimeXAxis = Template.bind({}); + +const meta: Meta = { + title: 'Plugins/D3/Bar', + decorators: [withKnobs], +}; + +export default meta; diff --git a/src/plugins/d3/__stories__/bar/linear.stories.tsx b/src/plugins/d3/__stories__/bar/linear.stories.tsx new file mode 100644 index 00000000..07a3bc79 --- /dev/null +++ b/src/plugins/d3/__stories__/bar/linear.stories.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import {Meta, Story} from '@storybook/react'; +import {withKnobs, object} 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(); + const data: ChartKitWidgetData = { + 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: 'Linear axis'}, + xAxis: { + type: 'linear', + labels: {enabled: true}, + }, + yAxis: [ + { + type: 'linear', + labels: {enabled: true}, + min: 0, + }, + ], + legend: {enabled: true}, + tooltip: {enabled: false}, + }; + + if (!shown) { + settings.set({plugins: [D3Plugin]}); + return ; + } + + return ( +
+ ('data', data)} /> +
+ ); +}; + +export const LinearXAxis = Template.bind({}); + +const meta: Meta = { + title: 'Plugins/D3/Bar', + decorators: [withKnobs], +}; + +export default meta; diff --git a/src/plugins/d3/__stories__/LinearCategories.stories.tsx b/src/plugins/d3/__stories__/scatter/LinearCategories.stories.tsx similarity index 93% rename from src/plugins/d3/__stories__/LinearCategories.stories.tsx rename to src/plugins/d3/__stories__/scatter/LinearCategories.stories.tsx index 1c6cf6a7..5f02abf4 100644 --- a/src/plugins/d3/__stories__/LinearCategories.stories.tsx +++ b/src/plugins/d3/__stories__/scatter/LinearCategories.stories.tsx @@ -3,17 +3,17 @@ import random from 'lodash/random'; import {Meta, Story} from '@storybook/react'; import {withKnobs, select, radios, text} 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 {settings} from '../../../../libs'; +import {ChartKit} from '../../../../components/ChartKit'; +import type {ChartKitRef} from '../../../../types'; import type { ChartKitWidgetAxis, ChartKitWidgetData, ScatterSeries, ScatterSeriesData, -} from '../../../types/widget-data'; -import {D3Plugin} from '..'; -import penguins from './penguins.json'; +} from '../../../../types/widget-data'; +import {D3Plugin} from '../..'; +import penguins from '../penguins.json'; const shapeScatterSeriesData = (args: {data: Record[]; groupBy: string; map: any}) => { const {data, groupBy, map} = args; @@ -156,7 +156,7 @@ const Template: Story = () => { export const LinearAndCategories = Template.bind({}); const meta: Meta = { - title: 'Plugins/D3', + title: 'Plugins/D3/Scatter', decorators: [withKnobs], }; diff --git a/src/plugins/d3/__stories__/Timestamp.stories.tsx b/src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx similarity index 90% rename from src/plugins/d3/__stories__/Timestamp.stories.tsx rename to src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx index 5dd2daea..a31cdb61 100644 --- a/src/plugins/d3/__stories__/Timestamp.stories.tsx +++ b/src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx @@ -3,15 +3,15 @@ import random from 'lodash/random'; import {Meta, Story} from '@storybook/react'; import {dateTime} from '@gravity-ui/date-utils'; import {Button} from '@gravity-ui/uikit'; -import {settings} from '../../../libs'; -import {ChartKit} from '../../../components/ChartKit'; -import type {ChartKitRef} from '../../../types'; +import {settings} from '../../../../libs'; +import {ChartKit} from '../../../../components/ChartKit'; +import type {ChartKitRef} from '../../../../types'; import type { ChartKitWidgetData, ScatterSeries, ScatterSeriesData, -} from '../../../types/widget-data'; -import {D3Plugin} from '..'; +} from '../../../../types/widget-data'; +import {D3Plugin} from '../..'; const rowData: ScatterSeriesData[] = [ { @@ -105,7 +105,7 @@ const Template: Story = () => { export const Timestamp = Template.bind({}); const meta: Meta = { - title: 'Plugins/D3', + title: 'Plugins/D3/Scatter', }; export default meta;