diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
index d17c225..49ff20e 100644
--- a/src/components/Dashboard.js
+++ b/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}: {point.percentage:.1f}%'
- },
- 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: ,
minGraph: ,
maxGraph: ,
- a1cGuage: ,
- timeInZonesPieChart: ,
+ a1cGuage: ,
+ timeInZonesPieChart: ,
})
}
// Else error happened or no data for specified time period
diff --git a/src/services/HighchartsConfigService.js b/src/services/HighchartsConfigService.js
new file mode 100644
index 0000000..8dedf38
--- /dev/null
+++ b/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}: {point.percentage:.1f}%'
+ },
+ 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,
+});