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

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

@@ -1,264 +0,0 @@
-import React from 'react';
-import { LineChart } from './line-chart';
-import { Container } from '../../helpers/container';
-
-const style = {
-  height: '1000px',
-  width: '1000px',
-};
-
-const dataset1 = {
-  label: 'Curve 1',
-  lineTension: 0,
-  borderColor: '#a30125',
-  pointBackgroundColor: '#a30125',
-  pointRadius: 2,
-  pointHoverRadius: 5,
-  pointHitRadius: 20,
-  borderWidth: 2,
-  fill: false,
-  yAxisID: 'y1',
-  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 dataset2 = {
-  label: 'Curve 2',
-  lineTension: 0,
-  borderColor: '#a30125',
-  pointBackgroundColor: '#a30125',
-  pointRadius: 2,
-  pointHoverRadius: 5,
-  pointHitRadius: 20,
-  borderWidth: 2,
-  fill: false,
-  yAxisID: 'y1',
-  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',
-  lineTension: 0,
-  borderColor: '#011fa3',
-  pointBackgroundColor: '#011fa3',
-  pointRadius: 2,
-  pointHoverRadius: 5,
-  pointHitRadius: 20,
-  borderWidth: 2,
-  fill: false,
-  yAxisID: 'y2',
-  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 formation = {
-  label: 'Formation',
-  formation: true,
-  lineTension: 0,
-  borderColor: '#987654',
-  pointBackgroundColor: '#987654',
-  pointRadius: 2,
-  pointHoverRadius: 5,
-  pointHitRadius: 20,
-  borderWidth: 2,
-  borderDash: [10, 5],
-  fill: false,
-  yAxisID: 'y2',
-  hideLegend: true,
-  data: [
-    {
-      x: 0,
-      y: 66,
-    },
-    {
-      x: 35.0 / 2,
-      y: 66,
-      label: 'formation label',
-    },
-    {
-      x: 35,
-      y: 66,
-    },
-  ],
-};
-
-const testChartData = {
-  datasets: [dataset1, dataset2, dataset3, formation],
-};
-
-const kitchenSinkLineChart = {
-  data: testChartData,
-  options: {
-    title: 'Look at this graph!',
-    axes: {
-      x: [
-        {
-          label: 'The X',
-        },
-      ],
-      y: [
-        {
-          label: 'The Y',
-          position: 'right',
-          color: '#a30125',
-        },
-        {
-          label: 'The Y 2',
-          position: 'left',
-          color: '#011fa3',
-          gridLines: {
-            drawOnChartArea: false,
-          },
-        },
-      ],
-    },
-    additionalAxesOptions: {
-      chartScaleType: 'linear',
-      reverse: false,
-      beginAtZero: false,
-      stepSize: 50,
-      truncateAxisNumbersToDigitsCallback: 0,
-      suggestedMin: 0,
-      suggestedMax: 35,
-      // range: {
-      //   x: {
-      //     min: 0,
-      //     max: 100,
-      //   },
-      //   y: {
-      //     min: 0,
-      //     max: 100,
-      //   },
-      // },
-    },
-    chartStyling: {
-      width: 800,
-      height: 800,
-      maintainAspectRatio: false,
-      staticChartHeight: false,
-      performanceMode: true,
-    },
-    tooltip: {
-      tooltips: true,
-      showLabelsInTooltips: false,
-      hideSimulationName: false,
-    },
-    graph: {
-      lineTension: 0,
-      spanGaps: false,
-      showDataLabels: true,
-      showMinorGridlines: true,
-    },
-    annotations: {
-      showAnnotations: true,
-      controlAnnotation: true,
-      annotationsData: [
-        {
-          annotationAxis: 'y',
-          label: 'cool annotation',
-          value: 40,
-          color: 'rgba(128, 32, 196, 0.5)',
-        },
-      ],
-    },
-    legend: {
-      display: true,
-      position: 'bottom',
-      align: 'center',
-    },
-    chartOptions: {
-      showPoints: true,
-      enableZoom: false,
-      enablePan: false,
-    },
-    interactions: {
-      onLegendClick: null,
-      onPointHover: null,
-      onPointUnhover: null,
-    },
-  },
-};
-
-export const LineChartKitchenSink = () => (
-  <Container style={style}>
-    <LineChart chart={kitchenSinkLineChart} />
-  </Container>
-);
-
-export default {
-  title: 'Line Chart Kitchen Sink',
-  component: LineChartKitchenSink,
-};

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

@@ -1,326 +0,0 @@
-import React from 'react';
-import { LineChart } from '../../line-chart';
-import { Container } from '../../../../helpers/container';
-
-const style = {
-  height: '1000px',
-  width: '1000px',
-};
-
-const cubeLines = {
-  borderColor: '#011fa3',
-  pointBackgroundColor: '#011fa3',
-  pointRadius: '0',
-  pointHoverRadius: '0',
-  pointHitRadius: '0',
-  borderWidth: 4,
-  data: [
-    {
-      x: 10,
-      y: 30,
-    },
-    {
-      x: 10,
-      y: 10,
-    },
-    {
-      x: 30,
-      y: 10,
-    },
-    {
-      x: 36,
-      y: 17,
-    },
-    {
-      x: 36,
-      y: 33,
-    },
-    {
-      x: 20,
-      y: 33,
-    },
-    {
-      x: 10,
-      y: 30,
-    },
-    {
-      x: 30,
-      y: 30,
-    },
-    {
-      x: 30,
-      y: 10,
-    },
-    {
-      x: 30,
-      y: 30,
-    },
-    {
-      x: 36,
-      y: 33,
-    },
-  ],
-};
-
-const cubeDashedLines = {
-  borderColor: '#011fa3',
-  pointBackgroundColor: '#011fa3',
-  pointRadius: '0',
-  pointHoverRadius: '0',
-  pointHitRadius: '0',
-  borderDash: [10, 5],
-  borderWidth: 2,
-  data: [
-    {
-      x: 10,
-      y: 10,
-    },
-    {
-      x: 20,
-      y: 17,
-    },
-    {
-      x: 36,
-      y: 17,
-    },
-    {
-      x: 20,
-      y: 17,
-    },
-    {
-      x: 20,
-      y: 33,
-    },
-  ],
-};
-
-const cubeData = {
-  datasets: [cubeLines, cubeDashedLines],
-};
-
-export const CubesLineChartExample = () => (
-  <Container style={style}>
-    <LineChart
-      chart={{
-        data: cubeData,
-        options: {
-          title: 'Cube using datasets',
-          axes: {
-            x: [
-              {
-                gridLines: {
-                  drawOnChartArea: false,
-                },
-              },
-            ],
-            y: [
-              {
-                gridLines: {
-                  drawOnChartArea: false,
-                },
-              },
-            ],
-          },
-          additionalAxesOptions: {
-            range: {
-              x: {
-                min: 5,
-                max: 40,
-              },
-              y: {
-                min: 5,
-                max: 40,
-              },
-            },
-          },
-          chartStyling: {
-            width: 768,
-            height: 768,
-          },
-          legend: {
-            display: false,
-          },
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: cubeData,
-        options: {
-          title: 'Cube with perspective lines using annotations',
-          axes: {
-            x: [
-              {
-                gridLines: {
-                  drawOnChartArea: false,
-                },
-              },
-            ],
-            y: [
-              {
-                gridLines: {
-                  drawOnChartArea: false,
-                },
-              },
-            ],
-          },
-          additionalAxesOptions: {
-            range: {
-              x: {
-                min: 5,
-                max: 40,
-              },
-              y: {
-                min: 5,
-                max: 40,
-              },
-            },
-          },
-          chartStyling: {
-            width: 768,
-            height: 768,
-          },
-          annotations: {
-            annotationsData: [
-              {
-                annotationAxis: 'x',
-                value: 55.7,
-                endValue: 25.8,
-                color: 'rgba(128, 32, 196, 0.5)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 52.5,
-                endValue: 3,
-                color: 'rgba(128, 32, 196, 0.5)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 49.3,
-                endValue: -19.8,
-                color: 'rgba(128, 32, 196, 0.4)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 46.1,
-                endValue: -42.6,
-                color: 'rgba(128, 32, 196, 0.3)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 42.9,
-                endValue: -65.4,
-                color: 'rgba(128, 32, 196, 0.2)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 39.7,
-                endValue: -88.2,
-                color: 'rgba(128, 32, 196, 0.1)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 36.5,
-                endValue: -111,
-                color: 'rgba(128, 32, 196, 0.1)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 33.3,
-                endValue: -133.8,
-                color: 'rgba(128, 32, 196, 0.1)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 30.1,
-                endValue: -156.6,
-                color: 'rgba(128, 32, 196, 0.1)',
-              },
-              {
-                annotationAxis: 'x',
-                value: 26.9,
-                endValue: -179.4,
-                color: 'rgba(128, 32, 196, 0.1)',
-              },
-              {
-                annotationAxis: 'y',
-                value: 10,
-                color: 'rgba(128, 32, 196, 0.5)',
-              },
-              {
-                annotationAxis: 'y',
-                value: 17,
-                color: 'rgba(128, 32, 196, 0.5)',
-              },
-              {
-                annotationAxis: 'y',
-                value: 23,
-                color: 'rgba(128, 32, 196, 0.5)',
-              },
-              {
-                annotationAxis: 'y',
-                value: 28,
-                color: 'rgba(128, 32, 196, 0.5)',
-              },
-              {
-                annotationAxis: 'y',
-                value: 32,
-                color: 'rgba(128, 32, 196, 0.4)',
-              },
-              {
-                annotationAxis: 'y',
-                value: 35,
-                color: 'rgba(128, 32, 196, 0.3)',
-              },
-              {
-                annotationAxis: 'y',
-                value: 37,
-                color: 'rgba(128, 32, 196, 0.2)',
-              },
-              {
-                annotationAxis: 'y',
-                value: 38,
-                color: 'rgba(128, 32, 196, 0.1)',
-              },
-            ],
-          },
-          legend: {
-            display: false,
-          },
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: cubeData,
-        options: {
-          title: 'Cube with gridlines',
-          additionalAxesOptions: {
-            range: {
-              x: {
-                min: 5,
-                max: 40,
-              },
-              y: {
-                min: 5,
-                max: 40,
-              },
-            },
-          },
-          chartStyling: {
-            width: 768,
-            height: 768,
-          },
-          legend: {
-            display: false,
-          },
-        },
-      }}
-    />
-  </Container>
-);
-
-export default {
-  title: 'Line Chart - Cube Shape',
-  component: CubesLineChartExample,
-};