KPI: Chart totalValues of loaded runs

package-lock.json

@@ -2642,11 +2642,11 @@
       }
     },
     "chartjs-color": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
-      "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
+      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
       "requires": {
-        "chartjs-color-string": "^0.5.0",
+        "chartjs-color-string": "^0.6.0",
         "color-convert": "^0.5.3"
       },
       "dependencies": {
@@ -2658,9 +2658,9 @@
       }
     },
     "chartjs-color-string": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
-      "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
       "requires": {
         "color-name": "^1.0.0"
       }

src/kpi/ui/admin/c/RunsSection.tsx

@@ -12,7 +12,10 @@ import ObservationsTable from 'kpi/ui/admin/c/ObservationsTable';
 import PrettyDate from 'ui/common/time/PrettyDate';
 import DateInput from 'kpi/ui/admin/c/DateInput';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
+import { LineChart } from 'react-chartkick';
+import * as moment from 'moment';
 
+require('chart.js');
 
 /*tslint:disable*/
 const styles = (theme) => ({
@@ -46,12 +49,74 @@ interface IRunsSectionProps extends React.ClassAttributes<any> {
   classes: any;
 }
 
+const chartOptions = {
+  elements: {
+    line: {
+      tension: 0, // disables bezier curves
+    },
+  },
+};
+
 class RunsSection extends React.Component<IRunsSectionProps> {
 
   public state = {
     currentRun: null,
+    totalCountChart: [],
+    totalCountMinVal: 0,
   };
 
+  public componentWillMount() {
+    // console.log(`runsSection#mount`, this.props);
+    this.updateTotalCountChart(this.props);
+  }
+  public componentWillReceiveProps(nextProps) {
+    // console.log(`runsSection#props`, nextProps);
+    this.updateTotalCountChart(nextProps);
+  }
+
+  private updateTotalCountChart(props) {
+    const { executionDetails } = props;
+    const runs = executionDetails === null || !executionDetails.runs ? null : executionDetails.runs.content;
+    if (! runs) {
+      return;
+    }
+    // console.log(`Updating chart`, runs);
+    const series = { name: 'Total count', data: {} };
+    let minVal = null;
+    let maxVal = null;
+    runs.forEach((element) => {
+      series.data[moment(element.timestamp).format('YYYY-MM-DD')] = element.totalValue;
+      minVal = minVal === null ? element.totalValue : Math.min(minVal, element.totalValue);
+      maxVal = maxVal === null ? element.totalValue : Math.max(maxVal, element.totalValue);
+    });
+    const diff = (maxVal - minVal);
+    if (diff !== 0) {
+      maxVal += diff * 0.1;
+      minVal -= diff * 0.1;
+    } else {
+      maxVal = maxVal + 1;
+      minVal = minVal - 1;
+    }
+    // console.log(`Chart series min=${minVal} max=${maxVal}`, series);
+    this.setState({
+      ...this.state, totalCountChart: {
+        data: series.data, library: {
+          ...chartOptions, scales: {
+            yAxes: [{
+              ticks: {
+                beginAtZero: false,
+                autoSkip: false,
+                min: Math.floor(minVal),
+                max: Math.ceil(maxVal),
+              },
+            }],
+          },
+        },
+      },
+    });
+  }
+
+
   private copyRunTable = (e) => {
     // if (e.currentTarget.activeElement.id === 'copyBtn') {
     // e.clipboardData.setData('text/html', document.getElementById('runTable').innerHTML);
@@ -104,12 +169,12 @@ class RunsSection extends React.Component<IRunsSectionProps> {
 
   public render() {
     const {t, classes, executionDetails} = this.props;
+    const { currentRun, totalCountChart } = this.state;
 
     const execution = executionDetails === null ? null : executionDetails.execution;
     const runs = executionDetails === null || !executionDetails.runs ? null : executionDetails.runs.content;
     const lastRun = executionDetails === null ? null : executionDetails.lastRun;
-
-    const {currentRun} = this.state;
+    console.log(totalCountChart);
     return (
       <Grid container spacing={ 8 }>
         <Grid item sm={ 12 } md={ 6 }>
@@ -148,6 +213,7 @@ class RunsSection extends React.Component<IRunsSectionProps> {
           { runs && runs.length > 0 &&
           <div>
               <h3>{ t('kpi.admin.p.executionDisplay.runs') }</h3>
+              <LineChart download height="200px" thousands="," { ...totalCountChart } />
               <Properties>
                 { runs.map((runInfo, i) => (
                   <PropertiesItem numeric key={ runInfo.id } title={ <PrettyDate value={ runInfo.timestamp }/> }>