Merge remote-tracking branch 'origin/154-add-barchart' into 154-add-b…

…archart
IT2901-SINTEF01 · Apr 30, 2021 · 189821b · 189821b
2 parents 62dfe9c + e794122
commit 189821b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/src/components/visualisations/LineChart.tsx b/src/components/visualisations/LineChart.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { CartesianChartInput } from '../../types/ChartInput';
 import Plot from 'react-plotly.js';
+import { plotlyLineMapper } from '../../utils/plotlyLineMapper';
 
 export type LineChartProps = {
     yLabel?: string;
@@ -26,15 +27,7 @@ const LineChart: React.FC<LineChartProps> = ({
     return (
         <Plot
             useResizeHandler
-            data={data.map((el) => ({
-                x: el.map((d) => d.x),
-                y: el.map((d) => d.y),
-                fillcolor: 'rgba(0,0,255,0.10)',
-                type: 'scatter',
-                mode: 'lines+markers',
-                line: { color: strokeColor, shape: 'spline', width: 1.337 },
-                marker: { color: markerColor, size: 3 },
-            }))}
+            data={plotlyLineMapper(data, strokeColor, markerColor)}
             style={{ width: width, height: height, margin: '0' }}
             layout={{
                 autosize: true,

diff --git a/src/components/visualisations/ThresholdChart.tsx b/src/components/visualisations/ThresholdChart.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { CartesianChartInput } from '../../types/ChartInput';
 import Plot from 'react-plotly.js';
+import { plotlyLineMapper } from '../../utils/plotlyLineMapper';
 
 export type ThresholdChartProps = {
     yLabel?: string;
@@ -34,15 +35,7 @@ const ThresholdChart: React.FC<ThresholdChartProps> = ({
     return (
         <Plot
             useResizeHandler
-            data={data.map((el) => ({
-                x: el.map((d) => d.x),
-                y: el.map((d) => d.y),
-                fillcolor: 'rgba(0,0,255,0.10)',
-                type: 'scatter',
-                mode: 'lines+markers',
-                line: { color: strokeColor, shape: 'spline', width: 1.337 },
-                marker: { color: markerColors, size: 3 },
-            }))}
+            data={plotlyLineMapper(data, strokeColor, markerColors)}
             style={{ width: width, height: height, margin: '0' }}
             layout={{
                 autosize: true,

diff --git a/src/utils/plotlyLineMapper.ts b/src/utils/plotlyLineMapper.ts
@@ -0,0 +1,18 @@
+import { Data } from 'plotly.js';
+import { CartesianChartInput } from '../types/ChartInput';
+
+export function plotlyLineMapper(
+    data: CartesianChartInput[],
+    strokeColor: string,
+    markerColor: string | string[],
+): Data[] {
+    return data.map((el) => ({
+        x: el.map((d) => d.x),
+        y: el.map((d) => d.y),
+        fillcolor: 'rgba(0,0,255,0.10)',
+        type: 'scatter',
+        mode: 'lines+markers',
+        line: { color: strokeColor, shape: 'spline', width: 1.337 },
+        marker: { color: markerColor, size: 3 },
+    }));
+}