@oliasoft-open-source/charts-library 2.0.0

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

@@ -0,0 +1,752 @@
+import React from 'react';
+import { BarChart } from './bar-chart';
+import { Container } from '../../helpers/container';
+
+const style = {
+  height: '1000px',
+  width: '1000px',
+};
+
+const darkmodeStyle = {
+  backgroundColor: '#232628',
+};
+
+const labels1 = ['label 1', 'label 2', 'label 3'];
+const dataset1_1a = { label: 'data1', data: [3, 8, 7] };
+const dataset1_2a = { label: 'data2', data: [1, 2, 3] };
+const dataset1_3a = { label: 'data3', data: [5, 0, 4] };
+
+const dataset1_1b = { label: 'data1', data: [3, 8, 7], yAxisID: 'y1' };
+const dataset1_2b = { label: 'data2', data: [1, 2, 3], yAxisID: 'y2' };
+const dataset1_3b = { label: 'data3', data: [5, 0, 4], yAxisID: 'y2' };
+
+const dataset1_1c = { label: 'data1', data: [3, 8, 7], stack: 1 };
+const dataset1_2c = { label: 'data2', data: [1, 2, 3], stack: 1 };
+const dataset1_3c = { label: 'data3', data: [5, 0, 4], stack: 2 };
+
+const annotationDataset = { label: 'data', data: [42, 57, 64] };
+
+const numericData = {
+  label: 'numeric data',
+  data: [
+    {
+      x: 1,
+      y: 3,
+    },
+    {
+      x: 2,
+      y: 8,
+    },
+    {
+      x: 3,
+      y: 7,
+    },
+  ],
+};
+
+const floatingData = {
+  label: 'floating data',
+  data: [
+    [2, 3],
+    [1.2, 8],
+    [4, 7],
+  ],
+};
+
+const roundedDataset = {
+  label: 'rounded data',
+  borderRadius: 50,
+  data: [42, 57, 64],
+};
+const borderWidthDataset = {
+  label: 'rounded data',
+  borderWidth: 8,
+  data: [42, 57, 64],
+};
+
+const borderSkippedDataset = {
+  label: 'border skipped bottom',
+  borderSkipped: 'bottom',
+  data: [42, 57, 64],
+  backgroundColor: [
+    'rgba(255, 99, 132, 0.2)',
+    'rgba(255, 159, 64, 0.2)',
+    'rgba(255, 205, 86, 0.2)',
+  ],
+  borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)'],
+};
+const borderSkippedDataset2 = {
+  label: 'border skipped top',
+  borderSkipped: 'top',
+  data: [47, 53, 69],
+  backgroundColor: [
+    'rgba(99, 132, 255, 0.2)',
+    'rgba(159, 64, 255, 0.2)',
+    'rgba(205, 86, 255, 0.2)',
+  ],
+  borderColor: ['rgb(99, 132, 255)', 'rgb(159, 64, 255)', 'rgb(205, 86, 255)'],
+};
+
+const datasetDatalabels = {
+  label: 'data',
+  data: [
+    {
+      x: 0,
+      y: 210,
+      label: 'label',
+    },
+    {
+      x: 0,
+      y: 333,
+      label: 'labal',
+    },
+    {
+      x: 0,
+      y: 248,
+      label: 'lebel',
+    },
+  ],
+};
+const datasetNoDataLabels = {
+  label: 'data',
+  data: [210, 333, 248],
+};
+
+const singleChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+};
+
+const multipleBarData = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a, dataset1_2a, dataset1_3a],
+  },
+};
+
+const stakedBarData = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a, dataset1_2a, dataset1_3a],
+  },
+  options: {
+    title: 'Stacked',
+    additionalAxesOptions: {
+      stacked: true,
+    },
+  },
+};
+
+const multipleAxisData = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1b, dataset1_2b, dataset1_3b],
+  },
+  options: {
+    title: 'Multiple y axes',
+    axes: {
+      y: [
+        {},
+        {
+          gridLines: {
+            drawOnChartArea: false,
+          },
+        },
+      ],
+    },
+  },
+};
+
+const groupedStacked = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1c, dataset1_2c, dataset1_3c],
+  },
+  options: {
+    title: 'Grouped stacked',
+    additionalAxesOptions: {
+      stacked: true,
+    },
+  },
+};
+
+const vertical = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: { title: 'vertical' },
+};
+const reversed = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'reversed vertical',
+    additionalAxesOptions: {
+      reverse: true,
+    },
+  },
+};
+const horizontal = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'horizontal',
+    direction: 'horizontal',
+  },
+};
+const horizontalReversed = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'reversed horizontal',
+    direction: 'horizontal',
+    additionalAxesOptions: {
+      reverse: true,
+    },
+  },
+};
+
+const axesWithLabels = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'With axes labels',
+    axes: {
+      x: [
+        {
+          label: 'x axis',
+        },
+      ],
+      y: [
+        {
+          label: 'y axis',
+        },
+      ],
+    },
+  },
+};
+const axesWithUnits = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'With axes units',
+    axes: {
+      x: [
+        {
+          unit: 'day',
+        },
+      ],
+      y: [
+        {
+          unit: 'm',
+        },
+      ],
+    },
+  },
+};
+
+const axisPosition = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: ['x axis on top', 'y axis on right'],
+    axes: {
+      x: [
+        {
+          position: 'top',
+        },
+      ],
+      y: [
+        {
+          position: 'right',
+        },
+      ],
+    },
+  },
+};
+
+const notBeginAtZero = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'Not beginning at zero',
+    additionalAxesOptions: {
+      beginAtZero: false,
+    },
+  },
+};
+
+const stepSizeChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'With step size of 2',
+    additionalAxesOptions: {
+      stepSize: 2,
+    },
+  },
+};
+
+const suggestedRange = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'With suggested range',
+    additionalAxesOptions: {
+      beginAtZero: false,
+      suggestedMin: 2,
+      suggestedMax: 12,
+    },
+  },
+};
+
+const logartihmicChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'With logarithmic scale',
+    additionalAxesOptions: {
+      chartScaleType: 'logarithmic',
+    },
+  },
+};
+
+const dataLabelsChart = {
+  data: {
+    labels: labels1,
+    datasets: [datasetDatalabels],
+  },
+  options: {
+    title: 'With custom datalabels',
+    graph: {
+      showDataLabels: true,
+    },
+  },
+};
+const dataLabelsNumberChart = {
+  data: {
+    labels: labels1,
+    datasets: [datasetNoDataLabels],
+  },
+  options: {
+    title: 'With value as datalabels',
+    graph: {
+      showDataLabels: true,
+    },
+  },
+};
+
+const dataLabelsNoBeginAtZero = {
+  data: {
+    labels: labels1,
+    datasets: [datasetDatalabels],
+  },
+  options: {
+    title: 'When not beginning at zero',
+    additionalAxesOptions: {
+      beginAtZero: false,
+    },
+    graph: {
+      showDataLabels: true,
+    },
+  },
+};
+
+const dataLabelssTooltips = {
+  data: {
+    labels: labels1,
+    datasets: [datasetDatalabels],
+  },
+  options: {
+    title: 'With datalabels in tooltips',
+    tooltip: {
+      showLabelsInTooltips: true,
+    },
+  },
+};
+
+const minorGridlines = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    graph: {
+      showMinorGridlines: true,
+    },
+  },
+};
+
+const horizontalAnnotationChart = {
+  data: {
+    labels: labels1,
+    datasets: [annotationDataset],
+  },
+  options: {
+    title: 'Annotation Y Axis',
+    annotations: {
+      showAnnotations: true,
+      annotationsData: [
+        {
+          annotationAxis: 'y',
+          label: 'Horizontal Annotation',
+          value: 53,
+          color: 'rgba(96, 32, 196, 0.5)',
+        },
+      ],
+    },
+  },
+};
+const verticalAnnotationChart = {
+  data: {
+    labels: labels1,
+    datasets: [annotationDataset],
+  },
+  options: {
+    title: 'Annotation X Axis',
+    annotations: {
+      showAnnotations: true,
+      annotationsData: [
+        {
+          annotationAxis: 'x',
+          label: 'Vertical Annotation',
+          value: 0.5,
+          color: 'green',
+        },
+      ],
+    },
+  },
+};
+
+const diagonalAnnotationChart = {
+  data: {
+    labels: labels1,
+    datasets: [annotationDataset],
+  },
+  options: {
+    title: 'Diagonal Annotation',
+    annotations: {
+      showAnnotations: true,
+      annotationsData: [
+        {
+          annotationAxis: 'y',
+          label: 'Diagonal Annotation',
+          value: 40,
+          endValue: 67,
+          color: 'rgba(123, 16, 32, 0.8)',
+        },
+      ],
+    },
+  },
+};
+
+const controlAnnotationChart = {
+  data: {
+    labels: labels1,
+    datasets: [annotationDataset],
+  },
+  options: {
+    title: 'Control annotations in legend',
+    annotations: {
+      showAnnotations: true,
+      controlAnnotation: true,
+      annotationsData: [
+        {
+          annotationAxis: 'y',
+          label: 'Diagonal Annotation',
+          value: 40,
+          endValue: 67,
+          color: 'rgba(123, 16, 32, 0.8)',
+        },
+        {
+          annotationAxis: 'y',
+          label: 'Horizontal Annotation',
+          value: 53,
+          color: 'rgba(96, 32, 196, 0.5)',
+        },
+      ],
+    },
+  },
+};
+
+const lightMode = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a, dataset1_2a, dataset1_3a],
+  },
+  options: {
+    title: 'Light mode',
+    axes: {
+      x: [
+        {
+          label: 'X',
+        },
+      ],
+    },
+    chartStyling: {
+      darkMode: false,
+    },
+    graph: {
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      annotationsData: [
+        {
+          label: 'Annotation 1',
+          value: 6,
+        },
+      ],
+    },
+  },
+};
+const darkMode = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a, dataset1_2a, dataset1_3a],
+  },
+  options: {
+    title: 'Dark mode',
+    axes: {
+      x: [
+        {
+          label: 'X',
+        },
+      ],
+    },
+    chartStyling: {
+      darkMode: true,
+    },
+    graph: {
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      annotationsData: [
+        {
+          label: 'Annotation 1',
+          value: 6,
+        },
+      ],
+    },
+  },
+};
+
+const borderWidthChart = {
+  data: {
+    labels: labels1,
+    datasets: [borderWidthDataset],
+  },
+  options: { title: 'Custom border Width' },
+};
+
+const roundedBars = {
+  data: {
+    labels: labels1,
+    datasets: [roundedDataset],
+  },
+  options: { title: 'Rounded borders' },
+};
+
+const skippedBorders = {
+  data: {
+    labels: labels1,
+    datasets: [borderSkippedDataset, borderSkippedDataset2],
+  },
+  options: {
+    title: 'Skipped borders',
+    direction: 'horizontal',
+  },
+};
+
+const categoryChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: { title: 'Category data' },
+};
+
+const floatingChart = {
+  data: {
+    labels: labels1,
+    datasets: [floatingData],
+  },
+  options: { title: 'Floating bars' },
+};
+
+const numericChart = {
+  data: {
+    datasets: [numericData],
+  },
+  options: { title: 'Numeric data' },
+};
+
+const legendRight = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'Legend to the right',
+    legend: {
+      position: 'right',
+    },
+  },
+};
+
+const legendStart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    title: 'Legend aligned to start',
+    legend: {
+      align: 'start',
+    },
+  },
+};
+
+const animatedChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1_1a],
+  },
+  options: {
+    chartStyling: { performanceMode: false },
+  },
+};
+
+export default {
+  title: 'Bar Chart',
+  component: BarChart,
+};
+
+export const Default = () => (
+  <Container style={style}>
+    <BarChart chart={singleChart} />
+  </Container>
+);
+
+export const MultipleSets = () => (
+  <Container style={style}>
+    <BarChart chart={multipleBarData} />
+    <BarChart chart={stakedBarData} />
+    <BarChart chart={multipleAxisData} />
+    <BarChart chart={groupedStacked} />
+  </Container>
+);
+
+export const Orientation = () => (
+  <Container style={style}>
+    <BarChart chart={vertical} />
+    <BarChart chart={horizontal} />
+    <BarChart chart={reversed} />
+    <BarChart chart={horizontalReversed} />
+  </Container>
+);
+
+export const InputData = () => (
+  <Container style={style}>
+    <BarChart chart={categoryChart} />
+    <BarChart chart={floatingChart} />
+    <BarChart chart={numericChart} />
+  </Container>
+);
+
+export const AxesData = () => (
+  <Container style={style}>
+    <BarChart chart={axesWithLabels} />
+    <BarChart chart={axesWithUnits} />
+    <BarChart chart={axisPosition} />
+  </Container>
+);
+
+export const AxesOptions = () => (
+  <Container style={style}>
+    <BarChart chart={notBeginAtZero} />
+    <BarChart chart={suggestedRange} />
+    <BarChart chart={stepSizeChart} />
+    <BarChart chart={logartihmicChart} />
+  </Container>
+);
+
+export const WithMinorGridlines = () => (
+  <Container style={style}>
+    <BarChart chart={minorGridlines} />
+  </Container>
+);
+
+export const Datalabels = () => (
+  <Container style={style}>
+    <BarChart chart={dataLabelsChart} />
+    <BarChart chart={dataLabelsNumberChart} />
+    <BarChart chart={dataLabelsNoBeginAtZero} />
+    <BarChart chart={dataLabelssTooltips} />
+  </Container>
+);
+
+export const Legend = () => (
+  <Container style={style}>
+    <BarChart chart={legendRight} />
+    <BarChart chart={legendStart} />
+  </Container>
+);
+
+export const Annotations = () => (
+  <Container style={style}>
+    <BarChart chart={horizontalAnnotationChart} />
+    <BarChart chart={verticalAnnotationChart} />
+    <BarChart chart={diagonalAnnotationChart} />
+    <BarChart chart={controlAnnotationChart} />
+  </Container>
+);
+
+export const Animated = () => (
+  <Container style={style}>
+    <BarChart chart={animatedChart} />
+  </Container>
+);
+
+export const DarkMode = () => (
+  <Container style={style}>
+    <Container>
+      <BarChart chart={lightMode} />
+    </Container>
+    <Container style={darkmodeStyle}>
+      <BarChart chart={darkMode} />
+    </Container>
+  </Container>
+);
+
+export const BarStyling = () => (
+  <Container style={style}>
+    <BarChart chart={borderWidthChart} />
+    <BarChart chart={roundedBars} />
+    <BarChart chart={skippedBorders} />
+  </Container>
+);