@oliasoft-open-source/charts-library 2.5.15 → 2.5.16-0

package/src/components/line-chart/line-chart.stories.jsx

@@ -1,664 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Flex,
-  Menu,
-  Select,
-  Slider,
-  Table,
-  Text,
-  Toggle,
-} from '@oliasoft-open-source/react-ui-library';
-import { LineChart } from './line-chart';
-import { getCustomLegendPlugin } from '../../helpers/get-custom-legend-plugin-example';
-
-const dataset1 = {
-  label: 'Dataset 1',
-  data: [
-    {
-      x: 0,
-      y: 0,
-    },
-    {
-      x: 5,
-      y: 25,
-    },
-    {
-      x: 10,
-      y: 60,
-    },
-    {
-      x: 15,
-      y: 90,
-    },
-    {
-      x: 20,
-      y: 120,
-    },
-    {
-      x: 25,
-      y: 150,
-    },
-  ],
-};
-
-const datasetLabelled1 = {
-  ...dataset1,
-  data: dataset1.data.map((item) => ({ ...item, label: ['Label'] })),
-};
-
-const dataset2 = {
-  label: 'Dataset 2',
-  data: [
-    {
-      x: 0,
-      y: 0,
-    },
-    {
-      x: 3,
-      y: 15,
-    },
-    {
-      x: 6,
-      y: 30,
-    },
-    {
-      x: 9,
-      y: 60,
-    },
-    {
-      x: 12,
-      y: 120,
-    },
-    {
-      x: 15,
-      y: 240,
-    },
-  ],
-};
-
-const datasetMissingValues = {
-  label: 'Dataset with missing (null) values',
-  data: [
-    {
-      x: 0,
-      y: 0,
-    },
-    {
-      x: 3,
-      y: 0,
-    },
-    null, //reproduce OW-9855
-    undefined, //reproduce OW-9855
-    {
-      x: 3,
-      y: 30,
-    },
-    {
-      x: null,
-      y: 60,
-    },
-    {
-      x: 12,
-      y: 120,
-    },
-    {
-      x: 15,
-      y: 240,
-    },
-  ],
-};
-
-const datasetLabelled2 = {
-  ...dataset2,
-  data: dataset2.data.map((item) => ({ ...item, label: ['Label'] })),
-};
-
-const basicChart = {
-  data: {
-    datasets: [dataset1, dataset2],
-  },
-  options: {
-    title: 'Chart title',
-    chartStyling: {
-      height: 400,
-    },
-  },
-};
-
-export default {
-  title: 'LineChart',
-  component: LineChart,
-  args: {
-    chart: basicChart,
-  },
-};
-
-const Template = (args) => {
-  return (
-    <LineChart
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    />
-  );
-};
-
-const customLegendContainerID = 'custom-legend-container';
-
-const TemplateWithCustomLegendContainer = (args) => {
-  return (
-    <>
-      <LineChart
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...args}
-      />
-      <div id={customLegendContainerID}></div>
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-
-export const FillContainer = Template.bind({});
-FillContainer.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      chartStyling: {
-        ...basicChart.options.chartStyling,
-        height: '100%',
-      },
-    },
-  },
-};
-FillContainer.decorators = [
-  (Story) => (
-    <div style={{ height: 400, width: 500 }}>
-      <Story />
-    </div>
-  ),
-];
-
-export const NoTitle = Template.bind({});
-NoTitle.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      title: undefined,
-    },
-  },
-};
-
-export const DataGaps = Template.bind({});
-DataGaps.args = {
-  chart: {
-    ...basicChart,
-    data: {
-      datasets: [datasetMissingValues],
-    },
-  },
-};
-
-export const MinorGridlines = Template.bind({});
-MinorGridlines.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      graph: {
-        showMinorGridlines: true,
-      },
-    },
-  },
-};
-
-export const AxesLabels = Template.bind({});
-AxesLabels.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      axes: {
-        x: [
-          {
-            label: 'x-axis title here',
-          },
-        ],
-        y: [
-          {
-            label: 'y-axis title here',
-          },
-        ],
-      },
-    },
-  },
-};
-
-export const MultipleXAxes = Template.bind({});
-MultipleXAxes.args = {
-  chart: {
-    data: {
-      datasets: [
-        dataset1,
-        {
-          ...dataset2,
-          xAxisID: 'x2',
-        },
-      ],
-    },
-    options: {
-      title: 'Chart title',
-      chartStyling: {
-        height: 400,
-      },
-      axes: {
-        x: [
-          {
-            label: 'The X',
-            position: 'bottom',
-          },
-          {
-            label: 'The X 2',
-            position: 'top',
-          },
-        ],
-      },
-    },
-  },
-};
-
-export const ReversedYAxis = Template.bind({});
-ReversedYAxis.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      additionalAxesOptions: {
-        reverse: true,
-      },
-    },
-  },
-};
-
-export const LogarithmicScale = Template.bind({});
-LogarithmicScale.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      additionalAxesOptions: {
-        chartScaleType: 'logarithmic',
-      },
-    },
-  },
-};
-
-export const PresetRange = Template.bind({});
-PresetRange.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      additionalAxesOptions: {
-        range: {
-          x: {
-            min: -10,
-            max: 40,
-          },
-          y: {
-            min: -10,
-            max: 180,
-          },
-        },
-      },
-    },
-  },
-};
-
-export const DataLabels = Template.bind({});
-DataLabels.args = {
-  chart: {
-    ...basicChart,
-    data: {
-      datasets: [datasetLabelled1, datasetLabelled2],
-    },
-    options: {
-      ...basicChart.options,
-      graph: {
-        showDataLabels: true,
-      },
-    },
-  },
-};
-
-export const DataLabelsInTooltips = Template.bind({});
-DataLabelsInTooltips.args = {
-  chart: {
-    ...basicChart,
-    data: {
-      datasets: [datasetLabelled1, datasetLabelled2],
-    },
-    options: {
-      ...basicChart.options,
-      tooltip: {
-        showLabelsInTooltips: true,
-      },
-    },
-  },
-};
-
-export const LegendOnRight = Template.bind({});
-LegendOnRight.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      legend: {
-        position: 'right',
-      },
-    },
-  },
-};
-
-export const Annotations = Template.bind({});
-Annotations.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      annotations: {
-        showAnnotations: true,
-        labelAnnotation: {
-          content: ['Annotation label'],
-        },
-        annotationsData: [
-          {
-            annotationAxis: 'y',
-            label: 'Annotation on y-axis',
-            value: 50,
-          },
-          {
-            annotationAxis: 'x',
-            label: 'Annotation on x-axis',
-            value: 10,
-          },
-          {
-            annotationAxis: 'y',
-            label: 'Diagonal annotation',
-            value: 20,
-            endValue: 170,
-          },
-        ],
-      },
-    },
-  },
-};
-
-export const AnnotationsInLegend = Template.bind({});
-AnnotationsInLegend.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      annotations: {
-        controlAnnotation: true,
-        showAnnotations: true,
-        annotationsData: [
-          {
-            annotationAxis: 'x',
-            label: 'Annotation',
-            value: 20,
-          },
-        ],
-      },
-    },
-  },
-};
-
-export const CustomLegend = TemplateWithCustomLegendContainer.bind({});
-CustomLegend.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      title: 'Custom HTML legend',
-      legend: {
-        customLegend: {
-          customLegendPlugin: getCustomLegendPlugin(customLegendContainerID),
-          customLegendContainerID,
-        },
-      },
-    },
-  },
-};
-
-export const Animation = Template.bind({});
-Animation.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      chartStyling: {
-        ...basicChart.options.chartStyling,
-        performanceMode: false,
-      },
-    },
-  },
-};
-
-export const SquareAspectRatio = Template.bind({});
-SquareAspectRatio.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      title: 'Square aspect ratio',
-      chartStyling: {
-        squareAspectRatio: true,
-        maintainAspectRatio: true,
-      },
-    },
-  },
-};
-
-export const HeaderComponentNoTitle = (args) => {
-  const options = ['Category A', 'Category B', 'Category C'];
-
-  const suboptions = ['Chart 1', 'Chart 2', 'Chart 3'];
-
-  const charts = options.map((option) => ({
-    label: option,
-    options: suboptions.map((suboption) => ({
-      label: suboption,
-      options: {
-        label: `${option} - ${suboption}`,
-      },
-    })),
-  }));
-
-  const [selectedChartTitle, setSelectedChartTitle] = useState(
-    `${options[0]} - ${suboptions[0]}`,
-  );
-
-  const chart = {
-    ...basicChart,
-    options: { ...basicChart.options, title: null },
-  };
-
-  return (
-    <LineChart
-      chart={chart}
-      headerComponent={
-        <Flex gap="10px" alignItems="center">
-          <Text bold>
-            <Menu
-              menu={{
-                label: selectedChartTitle,
-                sections: charts.map((option) => ({
-                  type: 'Menu',
-                  trigger: 'Text',
-                  menu: {
-                    label: option.label,
-                    trigger: 'Text',
-                    sections: option.options.map((suboption) => ({
-                      label: suboption.label,
-                      type: 'Option',
-                      onClick: () =>
-                        setSelectedChartTitle(
-                          `${option.label} - ${suboption.label}`,
-                        ),
-                    })),
-                  },
-                })),
-                trigger: 'Text',
-                small: true,
-              }}
-            />
-          </Text>
-          <Toggle label="Toggle" onChange={() => {}} noMargin />
-        </Flex>
-      }
-    />
-  );
-};
-HeaderComponentNoTitle.parameters = {
-  docs: {
-    description: {
-      story:
-        'If no chart title is set, a `headerComponent` can take its place.',
-    },
-  },
-};
-
-const testComponent = (
-  <div
-    style={{
-      flexGrow: 1,
-      minWidth: 280,
-      margin: '-9px 0',
-      display: 'flex',
-      alignItems: 'center',
-    }}
-  >
-    <Select
-      options={['Aardvarks', 'Kangaroos']}
-      value="Aardvarks"
-      small
-      width="90px"
-      autoLayerWidth
-    />
-    <Slider max={100} min={0} onChange={() => {}} showArrows value={50} />
-    <Text>180s</Text>
-  </div>
-);
-
-export const HeaderComponentWithTitle = Template.bind({});
-HeaderComponentWithTitle.args = {
-  headerComponent: testComponent,
-};
-HeaderComponentWithTitle.parameters = {
-  docs: {
-    description: {
-      story:
-        "If a chart title is set, the `headerComponent` will be displayed to the right of it. Setting a `minWidth` on the `headerComponent` will make sure it isn't squashed.",
-    },
-  },
-};
-
-export const SubheaderComponent = Template.bind({});
-SubheaderComponent.args = {
-  subheaderComponent: testComponent,
-};
-
-const table = {
-  headers: [
-    {
-      cells: [
-        { value: 'Name' },
-        { value: 'Weight' },
-        { value: 'Energy' },
-        { value: 'Origin' },
-      ],
-    },
-  ],
-  rows: [
-    {
-      cells: [
-        { value: 'Brown rice' },
-        { value: 100 },
-        { value: 361 },
-        { value: 'Vietnam' },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Buckwheat' },
-        { value: 50 },
-        { value: 358 },
-        { value: 'Poland' },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Couscous' },
-        { value: 10 },
-        { value: 368 },
-        { value: 'France' },
-      ],
-    },
-  ],
-};
-SubheaderComponent.parameters = {
-  docs: {
-    description: {
-      story:
-        'This will be displayed between the title/controls and the chart itself.',
-    },
-  },
-};
-
-export const WithTable = (args) => {
-  return <LineChart chart={basicChart} table={<Table table={table} />} />;
-};
-export const SquareAspectRatioFillContainer = Template.bind({});
-SquareAspectRatioFillContainer.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      title: 'Square aspect ratio',
-      chartStyling: {
-        squareAspectRatio: true,
-        maintainAspectRatio: true,
-        height: '100%',
-      },
-    },
-  },
-};
-SquareAspectRatioFillContainer.decorators = [
-  (Story) => (
-    <div style={{ display: 'flex', height: 400, width: 600 }}>
-      <Story />
-    </div>
-  ),
-];
-
-export const OnPointHover = Template.bind({});
-OnPointHover.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      interactions: {
-        onPointHover: (evt, datasetIndex, pointIndex, datasets) => {
-          console.log({ evt });
-          console.log(datasets[datasetIndex].data[pointIndex]);
-        },
-        onPointUnhover: () => {
-          console.log('No point hovered');
-        },
-      },
-    },
-  },
-};