@oliasoft-open-source/charts-library 2.0.0

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

@@ -0,0 +1,189 @@
+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

@@ -0,0 +1,339 @@
+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

@@ -0,0 +1,166 @@
+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,
+};