Commit 7388af50 authored by Matija Obreza's avatar Matija Obreza
Browse files

KPI: Chart totalValues of loaded runs

parent 9f4609b1
......@@ -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 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 }/> }>
......
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