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

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

@@ -1,189 +0,0 @@
-import React from 'react';
-import { LineChart } from '../../line-chart';
-import { Container } from '../../../../helpers/container';
-
-const style = {
-  height: '1000px',
-  width: '1000px',
-};
-
-const tetrahedronPoints = [
-  {
-    x: -0.930313,
-    y: -0.308393,
-  },
-  {
-    x: 0.651745,
-    y: -0.547048,
-  },
-  {
-    x: 0.093034,
-    y: 0.963013,
-  },
-  {
-    x: 0.185534,
-    y: -0.107573,
-  },
-];
-
-const tetrahedronLines = {
-  label: 'Tetrahedron',
-  borderColor: 'purple',
-  borderWidth: 4,
-  pointRadius: '0',
-  pointHitRadius: '0',
-  pointBackgroundColor: 'purple',
-  data: [
-    tetrahedronPoints[0],
-    tetrahedronPoints[1],
-    tetrahedronPoints[2],
-    tetrahedronPoints[0],
-  ],
-};
-
-const tetrahedronDashedLines = {
-  borderColor: 'purple',
-  borderWidth: 2,
-  borderDash: [10, 5],
-  pointRadius: '0',
-  pointHitRadius: '0',
-  hideLegend: true,
-  data: [
-    tetrahedronPoints[0],
-    tetrahedronPoints[3],
-    tetrahedronPoints[2],
-    tetrahedronPoints[3],
-    tetrahedronPoints[1],
-  ],
-};
-
-const tetrahedronData = {
-  datasets: [tetrahedronLines, tetrahedronDashedLines],
-};
-
-const pyramidPoints = [
-  {
-    x: 0.419253,
-    y: -0.507608,
-  },
-  {
-    x: 0.928705,
-    y: -0.247533,
-  },
-  {
-    x: -0.383145,
-    y: -0.29446,
-  },
-  {
-    x: -0.892597,
-    y: -0.554536,
-  },
-  {
-    x: -0.119469,
-    y: 0.966812,
-  },
-];
-
-const pyramidLines = {
-  label: 'Pyramid',
-  borderColor: 'orange',
-  borderWidth: 2,
-  pointRadius: '0',
-  pointHitRadius: '0',
-  pointBackgroundColor: 'orange',
-  data: [
-    pyramidPoints[0],
-    pyramidPoints[1],
-    pyramidPoints[4],
-    pyramidPoints[3],
-    pyramidPoints[0],
-    pyramidPoints[4],
-  ],
-};
-
-const pyramidDashedLines = {
-  borderColor: 'orange',
-  borderDash: [10, 5],
-  pointRadius: '0',
-  pointHitRadius: '0',
-  hideLegend: true,
-  data: [
-    pyramidPoints[2],
-    pyramidPoints[4],
-    pyramidPoints[2],
-    pyramidPoints[1],
-    pyramidPoints[2],
-    pyramidPoints[3],
-  ],
-};
-
-const pyramidData = {
-  datasets: [pyramidLines, pyramidDashedLines],
-};
-
-const combinedData = {
-  datasets: [
-    tetrahedronLines,
-    tetrahedronDashedLines,
-    pyramidLines,
-    pyramidDashedLines,
-  ],
-};
-
-export const PyramidsLineChartExample = () => (
-  <Container style={style}>
-    <LineChart
-      chart={{
-        data: pyramidData,
-        options: {
-          title: 'Pyramid',
-          chartStyling: {
-            width: 600,
-            height: 600,
-            performanceMode: false, // enables animation
-          },
-          legend: {
-            display: false,
-          },
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: tetrahedronData,
-        options: {
-          title: 'Tetrahedron',
-          chartStyling: {
-            width: 600,
-            height: 600,
-            performanceMode: false, // enables animation
-          },
-          legend: {
-            display: false,
-          },
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: combinedData,
-        options: {
-          title: 'Both, with legend',
-          chartStyling: {
-            width: 600,
-            height: 600,
-            performanceMode: false, // enables animation
-          },
-          legend: {
-            position: 'top',
-          },
-        },
-      }}
-    />
-  </Container>
-);
-
-export default {
-  title: 'Line Chart - Pyramid Shape',
-  component: PyramidsLineChartExample,
-};

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

@@ -1,339 +0,0 @@
-import React from 'react';
-import { LineChart } from '../../line-chart';
-import { Container } from '../../../../helpers/container';
-
-const style = {
-  height: '1000px',
-  width: '1000px',
-};
-
-const circlePoints24 = [
-  {
-    x: 1,
-    y: 0,
-  },
-  {
-    x: 0.9659258262890683,
-    y: 0.25881904510252074,
-  },
-  {
-    x: 0.8660254037844387,
-    y: 0.49999999999999994,
-  },
-  {
-    x: 0.7071067811865476,
-    y: 0.7071067811865475,
-  },
-  {
-    x: 0.5000000000000001,
-    y: 0.8660254037844386,
-  },
-  {
-    x: 0.25881904510252074,
-    y: 0.9659258262890683,
-  },
-  {
-    x: 6.123233995736766e-17,
-    y: 1,
-  },
-  {
-    x: -0.25881904510252063,
-    y: 0.9659258262890683,
-  },
-  {
-    x: -0.4999999999999998,
-    y: 0.8660254037844387,
-  },
-  {
-    x: -0.7071067811865475,
-    y: 0.7071067811865476,
-  },
-  {
-    x: -0.8660254037844387,
-    y: 0.49999999999999994,
-  },
-  {
-    x: -0.9659258262890682,
-    y: 0.258819045102521,
-  },
-  {
-    x: -1,
-    y: 1.2246467991473532e-16,
-  },
-  {
-    x: -0.9659258262890683,
-    y: -0.2588190451025208,
-  },
-  {
-    x: -0.8660254037844388,
-    y: -0.4999999999999997,
-  },
-  {
-    x: -0.7071067811865479,
-    y: -0.7071067811865471,
-  },
-  {
-    x: -0.5000000000000004,
-    y: -0.8660254037844385,
-  },
-  {
-    x: -0.25881904510252063,
-    y: -0.9659258262890683,
-  },
-  {
-    x: -1.8369701987210297e-16,
-    y: -1,
-  },
-  {
-    x: 0.2588190451025203,
-    y: -0.9659258262890684,
-  },
-  {
-    x: 0.5000000000000001,
-    y: -0.8660254037844386,
-  },
-  {
-    x: 0.7071067811865474,
-    y: -0.7071067811865477,
-  },
-  {
-    x: 0.8660254037844384,
-    y: -0.5000000000000004,
-  },
-  {
-    x: 0.9659258262890681,
-    y: -0.25881904510252157,
-  },
-  {
-    x: 1,
-    y: 0,
-  },
-];
-
-const circlePoints32 = [
-  {
-    x: 1,
-    y: 0,
-  },
-  {
-    x: 0.9807852804032304,
-    y: 0.19509032201612825,
-  },
-  {
-    x: 0.9238795325112867,
-    y: 0.3826834323650898,
-  },
-  {
-    x: 0.8314696123025452,
-    y: 0.5555702330196022,
-  },
-  {
-    x: 0.7071067811865476,
-    y: 0.7071067811865475,
-  },
-  {
-    x: 0.5555702330196023,
-    y: 0.8314696123025452,
-  },
-  {
-    x: 0.38268343236508984,
-    y: 0.9238795325112867,
-  },
-  {
-    x: 0.19509032201612833,
-    y: 0.9807852804032304,
-  },
-  {
-    x: 6.123233995736766e-17,
-    y: 1,
-  },
-  {
-    x: -0.1950903220161282,
-    y: 0.9807852804032304,
-  },
-  {
-    x: -0.3826834323650897,
-    y: 0.9238795325112867,
-  },
-  {
-    x: -0.555570233019602,
-    y: 0.8314696123025453,
-  },
-  {
-    x: -0.7071067811865475,
-    y: 0.7071067811865476,
-  },
-  {
-    x: -0.8314696123025453,
-    y: 0.5555702330196022,
-  },
-  {
-    x: -0.9238795325112867,
-    y: 0.3826834323650899,
-  },
-  {
-    x: -0.9807852804032304,
-    y: 0.1950903220161286,
-  },
-  {
-    x: -1,
-    y: 1.2246467991473532e-16,
-  },
-  {
-    x: -0.9807852804032304,
-    y: -0.19509032201612836,
-  },
-  {
-    x: -0.9238795325112868,
-    y: -0.38268343236508967,
-  },
-  {
-    x: -0.8314696123025455,
-    y: -0.555570233019602,
-  },
-  {
-    x: -0.7071067811865477,
-    y: -0.7071067811865475,
-  },
-  {
-    x: -0.5555702330196022,
-    y: -0.8314696123025452,
-  },
-  {
-    x: -0.38268343236509034,
-    y: -0.9238795325112865,
-  },
-  {
-    x: -0.19509032201612866,
-    y: -0.9807852804032303,
-  },
-  {
-    x: -1.8369701987210297e-16,
-    y: -1,
-  },
-  {
-    x: 0.1950903220161283,
-    y: -0.9807852804032304,
-  },
-  {
-    x: 0.38268343236509,
-    y: -0.9238795325112866,
-  },
-  {
-    x: 0.5555702330196018,
-    y: -0.8314696123025455,
-  },
-  {
-    x: 0.7071067811865474,
-    y: -0.7071067811865477,
-  },
-  {
-    x: 0.8314696123025452,
-    y: -0.5555702330196022,
-  },
-  {
-    x: 0.9238795325112865,
-    y: -0.3826834323650904,
-  },
-  {
-    x: 0.9807852804032303,
-    y: -0.19509032201612872,
-  },
-  {
-    x: 1,
-    y: 0,
-  },
-];
-
-export const RoundLineChartExample = () => (
-  <Container style={style}>
-    <LineChart
-      chart={{
-        data: {
-          datasets: [
-            {
-              label: 'circular data',
-              data: circlePoints24,
-            },
-          ],
-        },
-        options: {
-          title: 'Round data',
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: {
-          datasets: [
-            {
-              label: 'circular data',
-              data: circlePoints24,
-            },
-          ],
-        },
-        options: {
-          title: 'With line tension',
-          graph: { lineTension: 0.3 },
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: {
-          datasets: [
-            {
-              label: 'circular data',
-              pointRadius: '0',
-              pointHoverRadius: '0',
-              pointHitRadius: '0',
-              backgroundColor: '#987654',
-              data: circlePoints32,
-            },
-          ],
-        },
-        options: {
-          title: 'Points with no radius',
-          graph: { lineTension: 0.3 },
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: {
-          datasets: [
-            {
-              label: 'circular data',
-              backgroundColor: '#987654',
-              data: circlePoints24,
-            },
-          ],
-        },
-        options: {
-          title: 'With fixed chart size and range',
-          additionalAxesOptions: {
-            range: {
-              x: {
-                min: -1.5,
-                max: 1.5,
-              },
-              y: {
-                min: -1.5,
-                max: 1.5,
-              },
-            },
-          },
-          chartStyling: {
-            width: 500,
-            height: 500,
-          },
-        },
-      }}
-    />
-  </Container>
-);
-
-export default {
-  title: 'Line Chart - Round Shape',
-  component: RoundLineChartExample,
-};

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

@@ -1,166 +0,0 @@
-import React from 'react';
-import { LineChart } from '../../line-chart';
-import { Container } from '../../../../helpers/container';
-
-const style = {
-  height: '1000px',
-  width: '1000px',
-};
-
-const triangleLinesEquilateral = {
-  label: 'Equilateral Triangle',
-  data: [
-    {
-      x: 200,
-      y: 200,
-    },
-    {
-      x: 500,
-      y: 719.615242271,
-    },
-    {
-      x: 800,
-      y: 200,
-    },
-    {
-      x: 200,
-      y: 200,
-    },
-  ],
-};
-
-const triangleLines = {
-  label: 'Triangle',
-  borderDash: [10, 5],
-  data: [
-    {
-      x: 345,
-      y: 123,
-    },
-    {
-      x: 270,
-      y: 876,
-    },
-    {
-      x: 768,
-      y: 421,
-    },
-    {
-      x: 345,
-      y: 123,
-    },
-  ],
-};
-
-const triangleLinesIsosceles = {
-  label: 'Isosceles triangle',
-  borderWidth: 3,
-  data: [
-    {
-      x: 420,
-      y: 70,
-    },
-    {
-      x: 570,
-      y: 720,
-    },
-    {
-      x: 720,
-      y: 70,
-    },
-    {
-      x: 420,
-      y: 70,
-    },
-  ],
-};
-
-const triangleLinesRightAngled = {
-  label: 'Right-angled triangle',
-  pointRadius: 5,
-  data: [
-    {
-      x: 60,
-      y: 360,
-    },
-    {
-      x: 60,
-      y: 654,
-    },
-    {
-      x: 813,
-      y: 360,
-    },
-    {
-      x: 60,
-      y: 360,
-    },
-  ],
-};
-
-const triangleData = {
-  datasets: [triangleLinesEquilateral],
-};
-
-const multipleTriangleData = {
-  datasets: [
-    triangleLinesEquilateral,
-    triangleLinesIsosceles,
-    triangleLinesRightAngled,
-    triangleLines,
-  ],
-};
-
-export const TriangleLineChartExample = () => (
-  <Container style={style}>
-    <LineChart
-      chart={{
-        data: triangleData,
-        options: {
-          title: 'Triangle',
-          chartStyling: {
-            height: 500,
-            width: 500,
-          },
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: triangleData,
-        options: {
-          title: 'Centered Triangle',
-          additionalAxesOptions: {
-            suggestedMin: 0,
-            suggestedMax: 1000,
-          },
-          chartStyling: {
-            height: 500,
-            width: 500,
-          },
-        },
-      }}
-    />
-    <LineChart
-      chart={{
-        data: multipleTriangleData,
-        options: {
-          title: 'Multiple triangles with different styling',
-          additionalAxesOptions: {
-            suggestedMin: 0,
-            suggestedMax: 900,
-          },
-          chartStyling: {
-            height: 500,
-            width: 500,
-          },
-        },
-      }}
-    />
-  </Container>
-);
-
-export default {
-  title: 'Line Chart - Triangle Shape',
-  component: TriangleLineChartExample,
-};