Added KPI charts to Admin dashboard

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

@@ -49,7 +49,7 @@ interface IRunsSectionProps extends React.ClassAttributes<any> {
   classes: any;
 }
 
-const chartOptions = {
+const DEFAULT_CHART_OPTIONS = {
   elements: {
     line: {
       tension: 0, // disables bezier curves
@@ -101,7 +101,7 @@ class RunsSection extends React.Component<IRunsSectionProps> {
     this.setState({
       ...this.state, totalCountChart: {
         data: series.data, library: {
-          ...chartOptions, scales: {
+          ...DEFAULT_CHART_OPTIONS, scales: {
             yAxes: [{
               ticks: {
                 beginAtZero: false,

src/model/kpi/ExecutionRun.ts

@@ -7,7 +7,7 @@ class ExecutionRun {
   public id: number;
   public observations: Observation[];
   public timestamp: Date;
-
+  public totalValue: number;
 
 }
 

src/ui/pages/admin/DashboardPage.tsx

@@ -6,24 +6,111 @@ import { bindActionCreators } from 'redux';
 
 import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
 import PageTitle from 'ui/common/PageTitle';
+import Grid from '@material-ui/core/Grid/Grid';
+import { PageContents, PageSection } from 'ui/layout/PageLayout';
+import { LineChart } from 'react-chartkick';
+import * as moment from 'moment';
+import KpiService from 'service/genesys/KpiService';
+import ExecutionRun from 'model/kpi/ExecutionRun';
+
+require('chart.js');
 
 interface IAdminDashProps extends React.ClassAttributes<any> {
   title: string;
 }
 
-class AdministrationDashboard extends React.Component<IAdminDashProps, void> {
+const DEFAULT_CHART_OPTIONS = {
+  elements: {
+    line: {
+      tension: 0, // disables bezier curves
+    },
+  },
+};
 
-  constructor(props) {
-    super(props);
+const makeKpiChart = (runs: ExecutionRun[]) => {
+  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);
+  return {
+      data: series.data,
+      library: {
+        ...DEFAULT_CHART_OPTIONS, scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: false,
+              autoSkip: false,
+              min: Math.floor(minVal),
+              max: Math.ceil(maxVal),
+            },
+          }],
+        },
+      },
+    };
+};
+
+class AdministrationDashboard extends React.Component<IAdminDashProps> {
 
+  public state = {
+    kpiCharts: [],
+  };
+
+  public componentWillMount() {
+    // load charts
+    const kpiCharts = [];
+    KpiService.listExecutions({ size: 20 }).then((paged) => paged.content)
+    .then((executions) => {
+      executions.forEach((execution) => {
+        console.log(`Loading ${execution.name}`);
+        KpiService.executionRuns(execution.name, { size: 20 }).then((runs) => {
+          kpiCharts.push({
+            title: execution.title,
+            chart: makeKpiChart(runs.content),
+          });
+          kpiCharts.sort((a, b) => a.title.localeCompare(b.title));
+          this.setState({ kpiCharts });
+        }).catch((err) => {
+          console.log(`Error loading ${execution.name} runs`, err);
+        });
+      });
+    }).catch((err) => {
+      console.log(`Error loading KPIs`, err);
+    });
+  }
 
   public render() {
-    console.log('Rendering admin??');
     return (
       <div>
         <PageTitle title="You're root, have fun!"/>
         <ContentHeaderWithButton title="You're root, have fun!"/>
+        <PageContents className="pt-1rem">
+          <Grid container spacing={ 8 }>
+            { this.state.kpiCharts.map((kpiChart) => (
+                <Grid item sm={ 12 } md={ 6 }>
+                  <PageSection title={ kpiChart.title }>
+                    <LineChart download height="200px" thousands="," { ...kpiChart.chart } />
+                  </PageSection>
+                </Grid>
+            )) }
+            </Grid>
+        </PageContents>
       </div>
     );
   }