Commit f8d85bf1 authored by Matija Obreza's avatar Matija Obreza

Added KPI charts to Admin dashboard

parent 7388af50
......@@ -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,
......
......@@ -7,7 +7,7 @@ class ExecutionRun {
public id: number;
public observations: Observation[];
public timestamp: Date;
public totalValue: number;
}
......
......@@ -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>
);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment