Commit 82567b41 authored by Matija Obreza's avatar Matija Obreza

Merge branch 'kpi-charts' into 'master'

Kpi charts

See merge request genesys-pgr/genesys-ui!250
parents 9f4609b1 f8d85bf1
......@@ -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"
}
......
......@@ -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 DEFAULT_CHART_OPTIONS = {
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: {
...DEFAULT_CHART_OPTIONS, 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 }/> }>
......
......@@ -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