@oliasoft-open-source/charts-library 2.1.0 → 2.1.2

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

@@ -1,390 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { PieChart } from './pie-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 = { label: 'data1', data: [3, 8, 7] };
-const dataset2 = { label: 'data2', data: [1, 2, 3] };
-const dataset3 = { label: 'data3', data: [5, 0, 4] };
-
-const spacingDataset = {
-  label: 'spacing data',
-  spacing: 50,
-  data: [3, 8, 7],
-};
-const offsetDataset = {
-  label: 'spacing data',
-  offset: 40,
-  data: [3, 8, 7],
-};
-const circumferenceDataset = {
-  label: 'circumference data',
-  circumference: 270,
-  data: [3, 8, 7],
-};
-const borderWidthDataset = {
-  label: 'border data',
-  borderWidth: 8,
-  data: [3, 8, 7],
-};
-const hoverOffsetDataset = {
-  label: 'hover data',
-  data: [3, 8, 7],
-  hoverOffset: 40,
-};
-
-const datasetDatalabels = {
-  label: 'data',
-  data: [
-    {
-      value: 210,
-      label: 'label',
-    },
-    {
-      value: 333,
-      label: 'labal',
-    },
-    {
-      value: 248,
-      label: 'lebel',
-    },
-  ],
-};
-const datasetNoDataLabels = {
-  label: 'data',
-  data: [210, 333, 248],
-};
-
-const singleChart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1],
-  },
-};
-
-const multiplePieData = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1, dataset2, dataset3],
-  },
-};
-const stackedMultiplePieData = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1, dataset2, dataset3],
-  },
-  options: {
-    title: 'Stacked',
-    graph: { stacked: true },
-  },
-};
-
-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 dataLabelssTooltips = {
-  data: {
-    labels: labels1,
-    datasets: [datasetDatalabels],
-  },
-  options: {
-    title: 'With datalabels in tooltips',
-    tooltip: {
-      showLabelsInTooltips: true,
-    },
-  },
-};
-
-const lightMode = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1, dataset2, dataset3],
-  },
-  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, dataset2, dataset3],
-  },
-  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 hoverOffsetChart = {
-  data: {
-    labels: labels1,
-    datasets: [hoverOffsetDataset],
-  },
-  options: { title: 'Hover offset' },
-};
-
-const spacingChart = {
-  data: {
-    labels: labels1,
-    datasets: [spacingDataset],
-  },
-  options: { title: 'Segment spacing' },
-};
-
-const offsetChart = {
-  data: {
-    labels: labels1,
-    datasets: [offsetDataset],
-  },
-  options: { title: 'Segment offset' },
-};
-
-const circumferenceChart = {
-  data: {
-    labels: labels1,
-    datasets: [circumferenceDataset],
-  },
-  options: { title: 'Using circumference' },
-};
-
-const datasetLegend = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1, dataset2, dataset3],
-  },
-  options: {
-    title: 'Legend with dataset instead of label',
-    legend: {
-      useDataset: true,
-    },
-  },
-};
-
-const datasetLegendStacked = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1, dataset2, dataset3],
-  },
-  options: {
-    title: 'Legend with stacked dataset',
-    legend: {
-      useDataset: true,
-    },
-    graph: {
-      stacked: true,
-    },
-  },
-};
-
-const legendRight = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1],
-  },
-  options: {
-    title: 'Legend to the right',
-    legend: {
-      position: 'right',
-    },
-  },
-};
-
-const legendStart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1],
-  },
-  options: {
-    title: 'Legend aligned to start',
-    legend: {
-      align: 'start',
-    },
-  },
-};
-
-const animatedChart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1],
-  },
-  options: {
-    chartStyling: { performanceMode: false },
-  },
-};
-
-const animatedMultiChart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1, dataset2],
-  },
-  options: {
-    chartStyling: { performanceMode: false },
-    legend: {
-      useDataset: true,
-    },
-  },
-};
-
-const doughnutPercentage = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1],
-  },
-  options: {
-    title: 'Cutout 50%',
-    graph: { cutout: '50%' },
-  },
-};
-
-const doughnutNumber = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1],
-  },
-  options: {
-    title: 'Cutout 20 pixels',
-    graph: { cutout: 20 },
-  },
-};
-
-storiesOf('Charts/PieChart/Basics', module)
-  .add('Default', () => (
-    <Container style={style}>
-      <PieChart chart={singleChart} />
-    </Container>
-  ))
-  .add('Multiple Sets', () => (
-    <Container style={style}>
-      <PieChart chart={multiplePieData} />
-      <PieChart chart={stackedMultiplePieData} />
-    </Container>
-  ))
-  .add('Datalabels', () => (
-    <Container style={style}>
-      <PieChart chart={dataLabelsChart} />
-      <PieChart chart={dataLabelsNumberChart} />
-      <PieChart chart={dataLabelssTooltips} />
-    </Container>
-  ))
-  .add('Legend', () => (
-    <Container style={style}>
-      <PieChart chart={datasetLegend} />
-      <PieChart chart={datasetLegendStacked} />
-      <PieChart chart={legendRight} />
-      <PieChart chart={legendStart} />
-    </Container>
-  ))
-  .add('Animated', () => (
-    <Container style={style}>
-      <PieChart chart={animatedChart} />
-      <PieChart chart={animatedMultiChart} />
-    </Container>
-  ))
-  .add('Dark mode', () => (
-    <Container style={style}>
-      <Container>
-        <PieChart chart={lightMode} />
-      </Container>
-      <Container style={darkmodeStyle}>
-        <PieChart chart={darkMode} />
-      </Container>
-    </Container>
-  ))
-  .add('Doughnut', () => (
-    <Container style={style}>
-      <PieChart chart={doughnutPercentage} />
-      <PieChart chart={doughnutNumber} />
-    </Container>
-  ))
-  .add('Segment styling', () => (
-    <Container style={style}>
-      <PieChart chart={hoverOffsetChart} />
-      <PieChart chart={borderWidthChart} />
-      <PieChart chart={spacingChart} />
-      <PieChart chart={offsetChart} />
-      <PieChart chart={circumferenceChart} />
-    </Container>
-  ));

package/src/components/pie-chart/charts.stories.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { PieChart } from './pie-chart';
-import { Container } from '../../helpers/container';
-
-const style = {
-  height: '1000px',
-  width: '1000px',
-};
-
-const chart = {
-  data: {
-    labels: ['monday', 'tuesday', 'wednesday', 'friday'],
-    datasets: [
-      {
-        label: 'some data',
-        borderColor: ['blue', 'red', 'orange', 'green'],
-        backgroundColor: ['#333333', '#777777', '#bbbbbb', '#ffffff'],
-        borderWidth: 4,
-        offset: 100,
-        data: [2, 4, 8, 16],
-      },
-      {
-        label: 'some other data',
-        borderColor: ['#880088', '#ff8800'],
-        backgroundColor: ['#ff8800dd', '#880088dd'],
-        borderWidth: 10,
-        spacing: 50,
-        data: [42, 8, 22, 19],
-      },
-      {
-        label: 'some otter data',
-        circumference: 270,
-        hoverOffset: -40,
-
-        data: [10, 20, 22, 19],
-      },
-    ],
-  },
-  options: {
-    title: 'Take a piece of this pie!',
-    chartStyling: {
-      width: 1200,
-      height: 800,
-      performanceMode: false,
-    },
-    graph: {
-      showDataLabels: true,
-      cutout: '20%',
-    },
-    legend: {
-      position: 'top',
-      align: 'start',
-    },
-    interactions: {
-      onPieHover: null,
-      onPieUnhover: null,
-    },
-  },
-};
-
-storiesOf('Charts/PieChart', module).add('Kitchen Sink', () => (
-  <Container style={style}>
-    <PieChart chart={chart} />
-  </Container>
-));