@oliasoft-open-source/charts-library 2.0.0

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

@@ -0,0 +1,735 @@
+import React from 'react';
+import { LineChart } from './line-chart';
+import { Container } from '../../helpers/container';
+
+const style = {
+  height: '1000px',
+  width: '1000px',
+};
+
+const darkmodeStyle = {
+  backgroundColor: '#232628',
+};
+
+const dataset1 = {
+  label: 'Curve 1',
+  borderColor: '#a30125',
+  pointBackgroundColor: '#a30125',
+  backgroundColor: '#e5f013',
+  pointRadius: 2,
+  pointHoverRadius: 5,
+  pointHitRadius: 20,
+  borderWidth: 2,
+  fill: false,
+  data: [
+    {
+      x: 0,
+      y: 0,
+      label: ['Label'],
+    },
+    {
+      x: 5,
+      y: 25,
+      label: ['Label'],
+    },
+    {
+      x: 10,
+      y: 60,
+      label: ['Label'],
+    },
+    {
+      x: 15,
+      y: 90,
+      label: ['Label'],
+    },
+    {
+      x: 20,
+      y: 120,
+      label: ['Label'],
+    },
+    {
+      x: 25,
+      y: 150,
+      label: ['Label'],
+    },
+  ],
+};
+
+const dataset2 = {
+  label: 'Curve 2',
+  borderColor: '#017aa3',
+  pointBackgroundColor: '#e5f013',
+  pointRadius: 4,
+  pointHoverRadius: 5,
+  pointHitRadius: 20,
+  borderWidth: 1,
+  fill: true,
+  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 dataset3 = {
+  label: 'Curve 3',
+  borderColor: '#011fa3',
+  pointBackgroundColor: '#011fa3',
+  pointRadius: 3,
+  pointHoverRadius: 5,
+  pointHitRadius: 20,
+  borderWidth: 2,
+  lineTension: 0.5,
+  fill: false,
+  yAxisID: 'y2',
+  borderDash: [10, 5],
+  data: [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: 7,
+      y: 25,
+    },
+    {
+      x: 14,
+      y: 12,
+    },
+    {
+      x: 21,
+      y: 50,
+    },
+    {
+      x: 28,
+      y: 25,
+    },
+    {
+      x: 30,
+      y: 100,
+    },
+  ],
+};
+
+const testChartData = {
+  datasets: [dataset1, dataset2, dataset3],
+};
+
+const multiplelinesKitchensink = {
+  data: testChartData,
+  options: {
+    title: 'Multiple lines Kitchen sink',
+    axes: {
+      x: [
+        {
+          label: 'The X',
+          position: 'bottom',
+          color: 'rgba(128, 32, 196, 0.5)',
+          gridLines: {
+            drawOnChartArea: false,
+          },
+        },
+        {
+          label: 'The X 2',
+          position: 'top',
+        },
+      ],
+      y: [
+        {
+          label: 'The Y',
+          position: 'left',
+          color: '#a30125',
+        },
+        {
+          label: 'The Y 2',
+          position: 'right',
+          gridLines: {
+            drawOnChartArea: false,
+          },
+        },
+      ],
+    },
+  },
+};
+
+const simpleMultipleLines = {
+  data: {
+    datasets: [dataset1, dataset2],
+  },
+  options: {
+    title: 'Simple multiple lines',
+    axes: {
+      y: [
+        {
+          label: 'The Y',
+          position: 'left',
+          color: '#a30125',
+        },
+      ],
+    },
+  },
+};
+
+const withMinorGridlines = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Minor gridlines',
+    graph: {
+      showMinorGridlines: true,
+    },
+  },
+};
+
+const multiXAxes = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Multiple X Axes',
+    axes: {
+      x: [
+        {
+          label: 'The X',
+          position: 'bottom',
+          color: 'rgba(128, 32, 196, 0.5)',
+        },
+        {
+          label: 'The X 2',
+          position: 'top',
+        },
+      ],
+    },
+  },
+};
+
+const reversedYAxis = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Reversed Y Axis',
+    axes: {
+      x: [
+        {
+          label: 'The X',
+          position: 'bottom',
+          color: 'rgba(128, 32, 196, 0.5)',
+        },
+      ],
+    },
+    additionalAxesOptions: {
+      reverse: true,
+    },
+  },
+};
+
+const logarithmicScale = {
+  data: {
+    datasets: [dataset2],
+  },
+  options: {
+    title: 'Logarithmic scale',
+    axes: {
+      y: [
+        {
+          label: 'The Y',
+          position: 'right',
+          color: '#a30125',
+        },
+        {
+          label: 'The Y 2',
+          position: 'left',
+          color: '#011fa3',
+          gridLines: {
+            drawOnChartArea: false,
+          },
+        },
+      ],
+    },
+    additionalAxesOptions: {
+      chartScaleType: 'logarithmic',
+    },
+  },
+};
+const presetRange = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Preset range',
+    additionalAxesOptions: {
+      range: {
+        x: {
+          min: -10,
+          max: 40,
+        },
+        y: {
+          min: -10,
+          max: 180,
+        },
+      },
+    },
+  },
+};
+
+const withDatalabels = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'With datalabels',
+    graph: {
+      showDataLabels: true,
+    },
+  },
+};
+
+const datalabelsTooltips = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'With datalabels in tooltips',
+    tooltip: {
+      showLabelsInTooltips: true,
+    },
+  },
+};
+
+const legendPosition = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Legend to the right',
+    legend: {
+      position: 'right',
+    },
+  },
+};
+
+const legendAlign = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Legend aligned to start',
+    legend: {
+      align: 'start',
+    },
+  },
+};
+
+const annotationKitchensink = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Annotations Kitchen Sink',
+    annotations: {
+      borderWidth: 10,
+      controlAnnotation: true,
+      annotationsData: [
+        {
+          label: 'Annotation 1',
+          value: 40,
+        },
+        {
+          label: 'Annotation 2',
+          value: 120,
+        },
+        {
+          annotationAxis: 'x',
+          label: 'Annotation 3',
+          value: 7,
+        },
+        {
+          annotationAxis: 'x',
+          label: 'Annotation 4',
+          value: 20,
+        },
+        {
+          label: 'Annotation 5',
+          value: 20,
+          endValue: 170,
+        },
+      ],
+    },
+  },
+};
+
+const annotationsYAxis = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Annotations Y Axis',
+    annotations: {
+      annotationsData: [
+        {
+          label: 'Annotation',
+          value: 40,
+        },
+      ],
+    },
+  },
+};
+
+const annotationsXAxis = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Annotations X Axis',
+    annotations: {
+      annotationsData: [
+        {
+          annotationAxis: 'x',
+          label: 'Annotation',
+          value: 20,
+        },
+      ],
+    },
+  },
+};
+
+const diagonalAnnotation = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Diagonal annotation',
+    annotations: {
+      annotationsData: [
+        {
+          annotationAxis: 'y',
+          label: 'Annotation',
+          value: 20,
+          endValue: 170,
+        },
+      ],
+    },
+  },
+};
+
+const controlAnnotation = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Control annotations in legend',
+    annotations: {
+      controlAnnotation: true,
+      annotationsData: [
+        {
+          annotationAxis: 'x',
+          label: 'Annotation',
+          value: 20,
+        },
+      ],
+    },
+  },
+};
+
+const multipleAnnotations = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Multiple annotations',
+    annotations: {
+      controlAnnotation: true,
+      annotationsData: [
+        {
+          annotationAxis: 'y',
+          label: 'Annotation 1',
+          value: 50,
+        },
+        {
+          annotationAxis: 'x',
+          label: 'Annotation 2',
+          value: 10,
+        },
+        {
+          annotationAxis: 'y',
+          label: 'Annotation 3',
+          value: 20,
+        },
+      ],
+    },
+  },
+};
+
+const widthHeight = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Custom width and height',
+    chartStyling: {
+      width: 400,
+      height: 800,
+    },
+  },
+};
+
+const noAnimation = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'No animations',
+  },
+};
+
+const withAnimation = {
+  data: {
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'With animations',
+    chartStyling: {
+      performanceMode: false,
+    },
+  },
+};
+
+const withAnimationMultiple = {
+  data: {
+    datasets: [dataset1, dataset2],
+  },
+  options: {
+    title: 'Animations with multiple lines and annotations',
+    chartStyling: {
+      performanceMode: false,
+    },
+    annotations: {
+      annotationsData: [
+        {
+          annotationAxis: 'y',
+          value: 200,
+        },
+        {
+          annotationAxis: 'x',
+          value: 10,
+        },
+      ],
+    },
+  },
+};
+
+const lightMode = {
+  data: {
+    datasets: [dataset1, dataset2],
+  },
+  options: {
+    title: 'Light mode',
+    axes: {
+      x: [
+        {
+          label: 'The X',
+          position: 'bottom',
+        },
+        {
+          label: 'The X 2',
+          position: 'top',
+        },
+      ],
+      y: [{}],
+    },
+    graph: {
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      controlAnnotation: true,
+      annotationsData: [
+        {
+          label: 'Annotation 1',
+          annotationAxis: 'y',
+          value: 100,
+        },
+      ],
+    },
+  },
+};
+const darkMode = {
+  data: {
+    datasets: [dataset1, dataset2],
+  },
+  options: {
+    title: 'Dark mode',
+    axes: {
+      x: [
+        {
+          label: 'The X',
+          position: 'bottom',
+        },
+        {
+          label: 'The X 2',
+          position: 'top',
+        },
+      ],
+    },
+    chartStyling: {
+      darkMode: true,
+    },
+    graph: {
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      controlAnnotation: true,
+      annotationsData: [
+        {
+          label: 'Annotation 1',
+          annotationAxis: 'y',
+          value: 100,
+        },
+      ],
+    },
+  },
+};
+
+export default {
+  title: 'Basic Line Chart',
+  component: LineChart,
+};
+
+export const SingleLine = () => {
+  const singleChart = {
+    data: {
+      datasets: [dataset1],
+    },
+  };
+
+  return (
+    <Container style={style}>
+      <LineChart chart={singleChart} />
+    </Container>
+  );
+};
+
+export const MultipleLines = () => (
+  <Container style={style}>
+    <LineChart chart={multiplelinesKitchensink} />
+    <LineChart chart={simpleMultipleLines} />
+  </Container>
+);
+
+export const WithMinorGridlines = () => (
+  <Container style={style}>
+    <LineChart chart={withMinorGridlines} />
+  </Container>
+);
+
+export const AxesOptions = () => (
+  <Container style={style}>
+    <LineChart chart={multiXAxes} />
+    <LineChart chart={reversedYAxis} />
+    <LineChart chart={logarithmicScale} />
+    <LineChart chart={presetRange} />
+  </Container>
+);
+
+export const GraphOptions = () => (
+  <Container style={style}>
+    <LineChart chart={withDatalabels} />
+    <LineChart chart={datalabelsTooltips} />
+  </Container>
+);
+
+export const LegendOptions = () => (
+  <Container style={style}>
+    <LineChart chart={legendPosition} />
+    <LineChart chart={legendAlign} />
+  </Container>
+);
+
+export const Annotations = () => (
+  <Container style={style}>
+    <LineChart chart={annotationKitchensink} />
+    <LineChart chart={annotationsYAxis} />
+    <LineChart chart={annotationsXAxis} />
+    <LineChart chart={diagonalAnnotation} />
+    <LineChart chart={controlAnnotation} />
+    <LineChart chart={multipleAnnotations} />
+  </Container>
+);
+
+export const Styling = () => (
+  <Container style={style}>
+    <LineChart chart={widthHeight} />
+  </Container>
+);
+
+export const Animations = () => (
+  <Container style={style}>
+    <LineChart chart={noAnimation} />
+    <LineChart chart={withAnimation} />
+    <LineChart chart={withAnimationMultiple} />
+  </Container>
+);
+
+export const DarkMode = () => (
+  <Container style={style}>
+    <Container>
+      <LineChart chart={lightMode} />
+    </Container>
+    <Container style={darkmodeStyle}>
+      <LineChart chart={darkMode} />
+    </Container>
+  </Container>
+);
+
+export const ControlsPopup = () => {
+  const closeOnCross = {
+    data: {
+      datasets: [dataset1],
+    },
+    options: {
+      title: 'Close controls popup on cross (default)',
+    },
+  };
+  const closeOnOutsideClick = {
+    data: {
+      datasets: [dataset1],
+    },
+    options: {
+      title: 'Close controls popup on outside click',
+      chartOptions: {
+        closeOnOutsideClick: true,
+      },
+    },
+  };
+
+  return (
+    <Container style={style}>
+      <LineChart chart={closeOnCross} />
+      <LineChart chart={closeOnOutsideClick} />
+    </Container>
+  );
+};