Refactor Dashboard component

src/components/Dashboard.js

@@ -14,159 +14,23 @@ import { Connect } from 'uport-connect';
 import { getTimeWeightedMean } from './../services/AverageGlucoseService';
 import { getA1CFromMgPerDl } from './../services/A1CService';
 import { getTimeInZone } from './../services/TimeInZoneService';
+import {
+  getDailyGlucoseLineChartConfig,
+  getTimeInZonePieChartConfig,
+  getHA1CGuageConfig,
+} from './../services/HighchartsConfigService';
 
 const uport = new Connect('dPanc');
 
-const dateOptions = [
-  {
-    key: 1,
-    text: '1 month',
-    value: 1
-  },
-  {
-    key: 3,
-    text: '3 months',
-    value: 3
-  },
-  {
-    key: 6,
-    text: '6 months',
-    value: 6
-  }
-];
-
-const getPieChargeConfig = (timeInNormal, timeInLow, timeInHigh) => ({
-    chart: {
-        plotBackgroundColor: null,
-        plotBorderWidth: null,
-        plotShadow: false,
-        type: 'pie'
-    },
-    title: {
-        text: 'Time in glucose zones'
-    },
-    tooltip: {
-        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-    },
-    plotOptions: {
-        pie: {
-            allowPointSelect: true,
-            cursor: 'pointer',
-            dataLabels: {
-                enabled: false
-            },
-            showInLegend: true
-        }
-    },
-    series: [{
-        name: 'Time in zone',
-        colorByPoint: true,
-        data: [{
-            name: 'Normal (80 - 180 mg/dL)',
-            y: timeInNormal,
-        }, {
-            name: 'Low (< 80 mg/dL)',
-            y: timeInLow
-        }, {
-            name: 'High (> 180 mg/dL)',
-            y: timeInHigh
-        }],
-    }]
-});
-
-const getSolidGuageConfig = guageValue => ({
-    chart: {
-        type: 'solidgauge'
-    },
-
-    title: null,
-
-    pane: {
-        center: ['50%', '85%'],
-        size: '140%',
-        startAngle: -90,
-        endAngle: 90,
-        background: {
-            backgroundColor: '#EEE',
-            innerRadius: '60%',
-            outerRadius: '100%',
-            shape: 'arc'
-        }
-    },
-
-    tooltip: {
-        enabled: false
-    },
-
-    // the value axis
-    yAxis: {
-        stops: [
-            [0.1, '#55BF3B'], // green
-            [0.5, '#DDDF0D'], // yellow
-            [0.9, '#DF5353'] // red
-        ],
-        lineWidth: 0,
-        minorTickInterval: null,
-        tickAmount: 2,
-        title: {
-            y: -150,
-            text: 'Hemoglobin A1C Estimate'
-        },
-        labels: {
-            y: 16
-        },
-        min: 5,
-        max: 12,
-    },
-
-    plotOptions: {
-        solidgauge: {
-            dataLabels: {
-                y: 5,
-                borderWidth: 0,
-                useHTML: true
-            }
-        }
-    },
-    credits: {
-        enabled: false
-    },
-
-    series: [{
-        name: 'Speed',
-        data: [guageValue],
-    }]
-});
-
-const graphConfigsTemplate = {
-  chart: {
-    type: 'line'
-  },
-  title: {
-    text: ''
-  },
-  tooltip: {
-        crosshairs: true,
-        shared: true,
-        valueSuffix: '°C'
-  },
-  xAxis: {
-      type: 'datetime',
-      dateTimeLabelFormats: {
-          month: '%e. %b',
-      },
-      title: {
-          text: 'Date'
-      }
-  },
-  yAxis: {
-    min: 0,
-    title: {
-      text: 'Blood Glucose (mg/dL)'
-    }
-  },
-  series: ''
-};
+const DATE_OPTIONS_IN_MONTHS = [1, 3, 6];
+
+const createDateOption = durationInMonths => ({
+  key: durationInMonths,
+  text: `${durationInMonths} month`,
+  value: durationInMonths
+})
+
+const dateOptions = DATE_OPTIONS_IN_MONTHS.map(createDateOption)
 
 class Dashboard extends Component {
   state = {
@@ -235,36 +99,33 @@ class Dashboard extends Component {
   };
 
   getGraphConfigs = (title, series, range) => {
-    let seriesConfig = [{
-            name: 'Blood Glucose',
-            type: 'spline',
-            data: '',
-            zIndex: 1,
-            marker: {
-                fillColor: 'white',
-                lineWidth: 2,
-                lineColor: ReactHighcharts.Highcharts.getOptions().colors[0]
-            }
-        }, {
-            name: 'Target Range',
-            data: '',
-            type: 'arearange',
-            lineWidth: 0,
-            linkedTo: ':previous',
-            color: ReactHighcharts.Highcharts.getOptions().colors[0],
-            fillOpacity: 0.3,
-            zIndex: 0,
-            marker: {
-                enabled: false
-            }
-        }];
-    seriesConfig[0].data = series[0].data;
-    seriesConfig[1].data = range;
-
-    let graphConfigs = JSON.parse(JSON.stringify(graphConfigsTemplate));
-    graphConfigs.title.text = title;
-    graphConfigs.series = seriesConfig;
-    return graphConfigs;
+    const seriesConfig = [
+      {
+        name: 'Blood Glucose',
+        type: 'spline',
+        data: series[0].data,
+        zIndex: 1,
+        marker: {
+          fillColor: 'white',
+          lineWidth: 2,
+          lineColor: ReactHighcharts.Highcharts.getOptions().colors[0]
+        }
+      }, {
+        name: 'Target Range',
+        data: range,
+        type: 'arearange',
+        lineWidth: 0,
+        linkedTo: ':previous',
+        color: ReactHighcharts.Highcharts.getOptions().colors[0],
+        fillOpacity: 0.3,
+        zIndex: 0,
+        marker: {
+            enabled: false
+        }
+      }
+    ];
+
+    return getDailyGlucoseLineChartConfig(title, seriesConfig);
   };
 
   getLookbackMonths = (lookbackNum) => {
@@ -349,8 +210,8 @@ class Dashboard extends Component {
         avgGraph: <HighchartsContainer config={avgGraphConfigs} />,
         minGraph: <HighchartsContainer config={minGraphConfigs}/>,
         maxGraph: <HighchartsContainer config={maxGraphConfigs}/>,
-        a1cGuage: <HighchartsContainer config={getSolidGuageConfig(a1c)}/>,
-        timeInZonesPieChart: <HighchartsContainer config={getPieChargeConfig(timeInNormal, timeInLow, timeInHigh)}/>,
+        a1cGuage: <HighchartsContainer config={getHA1CGuageConfig(a1c)}/>,
+        timeInZonesPieChart: <HighchartsContainer config={getTimeInZonePieChartConfig(timeInNormal, timeInLow, timeInHigh)}/>,
       })
     }
     // Else error happened or no data for specified time period

src/services/HighchartsConfigService.js

@@ -0,0 +1,132 @@
+export const getTimeInZonePieChartConfig = (timeInNormal, timeInLow, timeInHigh) => ({
+  chart: {
+    plotBackgroundColor: null,
+    plotBorderWidth: null,
+    plotShadow: false,
+    type: 'pie'
+  },
+  title: {
+    text: 'Time in glucose zones'
+  },
+  tooltip: {
+    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+  },
+  plotOptions: {
+    pie: {
+      allowPointSelect: true,
+      cursor: 'pointer',
+      dataLabels: {
+        enabled: false
+      },
+      showInLegend: true
+    }
+  },
+  series: [{
+    name: 'Time in zone',
+    colorByPoint: true,
+    data: [{
+      name: 'Normal (80 - 180 mg/dL)',
+      y: timeInNormal,
+  }, {
+      name: 'Low (< 80 mg/dL)',
+      y: timeInLow
+  }, {
+      name: 'High (> 180 mg/dL)',
+      y: timeInHigh
+    }],
+  }]
+});
+
+export const getHA1CGuageConfig = guageValue => ({
+  chart: {
+    type: 'solidgauge'
+  },
+
+  title: null,
+
+  pane: {
+    center: ['50%', '85%'],
+    size: '140%',
+    startAngle: -90,
+    endAngle: 90,
+    background: {
+      backgroundColor: '#EEE',
+      innerRadius: '60%',
+      outerRadius: '100%',
+      shape: 'arc'
+    }
+  },
+
+  tooltip: {
+    enabled: false
+  },
+
+  // the value axis
+  yAxis: {
+    stops: [
+      [0.1, '#55BF3B'], // green
+      [0.5, '#DDDF0D'], // yellow
+      [0.9, '#DF5353'] // red
+    ],
+    lineWidth: 0,
+    minorTickInterval: null,
+    tickAmount: 2,
+    title: {
+      y: -150,
+      text: 'Hemoglobin A1C Estimate'
+    },
+    labels: {
+      y: 16
+    },
+    min: 5,
+    max: 12,
+  },
+
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        y: 5,
+        borderWidth: 0,
+        useHTML: true
+      }
+    }
+  },
+  credits: {
+    enabled: false
+  },
+
+  series: [{
+    name: 'Speed',
+    data: [guageValue],
+  }]
+});
+
+export const getDailyGlucoseLineChartConfig = (title, series) => ({
+  chart: {
+    type: 'line'
+  },
+  title: {
+    text: title
+  },
+  tooltip: {
+    crosshairs: true,
+    shared: true,
+    valueSuffix: '°C'
+  },
+  xAxis: {
+    type: 'datetime',
+    dateTimeLabelFormats: {
+      month: '%e. %b',
+    },
+    title: {
+      text: 'Date'
+    }
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: 'Blood Glucose (mg/dL)'
+    }
+  },
+  series,
+});