Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Website
Commits
7388af50
Commit
7388af50
authored
Mar 09, 2019
by
Matija Obreza
Browse files
KPI: Chart totalValues of loaded runs
parent
9f4609b1
Changes
2
Hide whitespace changes
Inline
Side-by-side
package-lock.json
View file @
7388af50
...
@@ -2642,11 +2642,11 @@
...
@@ -2642,11 +2642,11 @@
}
}
},
},
"chartjs-color": {
"chartjs-color": {
"version": "2.
2
.0",
"version": "2.
3
.0",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.
2
.0.tgz",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.
3
.0.tgz",
"integrity": "sha
1-hKL7dVeH7YXDndbdjHsdiEKbrq4
=",
"integrity": "sha
512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g=
=",
"requires": {
"requires": {
"chartjs-color-string": "^0.
5
.0",
"chartjs-color-string": "^0.
6
.0",
"color-convert": "^0.5.3"
"color-convert": "^0.5.3"
},
},
"dependencies": {
"dependencies": {
...
@@ -2658,9 +2658,9 @@
...
@@ -2658,9 +2658,9 @@
}
}
},
},
"chartjs-color-string": {
"chartjs-color-string": {
"version": "0.
5
.0",
"version": "0.
6
.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.
5
.0.tgz",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.
6
.0.tgz",
"integrity": "sha512-
amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ
==",
"integrity": "sha512-
TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A
==",
"requires": {
"requires": {
"color-name": "^1.0.0"
"color-name": "^1.0.0"
}
}
...
...
src/kpi/ui/admin/c/RunsSection.tsx
View file @
7388af50
...
@@ -12,7 +12,10 @@ import ObservationsTable from 'kpi/ui/admin/c/ObservationsTable';
...
@@ -12,7 +12,10 @@ import ObservationsTable from 'kpi/ui/admin/c/ObservationsTable';
import
PrettyDate
from
'
ui/common/time/PrettyDate
'
;
import
PrettyDate
from
'
ui/common/time/PrettyDate
'
;
import
DateInput
from
'
kpi/ui/admin/c/DateInput
'
;
import
DateInput
from
'
kpi/ui/admin/c/DateInput
'
;
import
FileCopyIcon
from
'
@material-ui/icons/FileCopy
'
;
import
FileCopyIcon
from
'
@material-ui/icons/FileCopy
'
;
import
{
LineChart
}
from
'
react-chartkick
'
;
import
*
as
moment
from
'
moment
'
;
require
(
'
chart.js
'
);
/*tslint:disable*/
/*tslint:disable*/
const
styles
=
(
theme
)
=>
({
const
styles
=
(
theme
)
=>
({
...
@@ -46,12 +49,74 @@ interface IRunsSectionProps extends React.ClassAttributes<any> {
...
@@ -46,12 +49,74 @@ interface IRunsSectionProps extends React.ClassAttributes<any> {
classes
:
any
;
classes
:
any
;
}
}
const
chartOptions
=
{
elements
:
{
line
:
{
tension
:
0
,
// disables bezier curves
},
},
};
class
RunsSection
extends
React
.
Component
<
IRunsSectionProps
>
{
class
RunsSection
extends
React
.
Component
<
IRunsSectionProps
>
{
public
state
=
{
public
state
=
{
currentRun
:
null
,
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
)
=>
{
private
copyRunTable
=
(
e
)
=>
{
// if (e.currentTarget.activeElement.id === 'copyBtn') {
// if (e.currentTarget.activeElement.id === 'copyBtn') {
// e.clipboardData.setData('text/html', document.getElementById('runTable').innerHTML);
// e.clipboardData.setData('text/html', document.getElementById('runTable').innerHTML);
...
@@ -104,12 +169,12 @@ class RunsSection extends React.Component<IRunsSectionProps> {
...
@@ -104,12 +169,12 @@ class RunsSection extends React.Component<IRunsSectionProps> {
public
render
()
{
public
render
()
{
const
{
t
,
classes
,
executionDetails
}
=
this
.
props
;
const
{
t
,
classes
,
executionDetails
}
=
this
.
props
;
const
{
currentRun
,
totalCountChart
}
=
this
.
state
;
const
execution
=
executionDetails
===
null
?
null
:
executionDetails
.
execution
;
const
execution
=
executionDetails
===
null
?
null
:
executionDetails
.
execution
;
const
runs
=
executionDetails
===
null
||
!
executionDetails
.
runs
?
null
:
executionDetails
.
runs
.
content
;
const
runs
=
executionDetails
===
null
||
!
executionDetails
.
runs
?
null
:
executionDetails
.
runs
.
content
;
const
lastRun
=
executionDetails
===
null
?
null
:
executionDetails
.
lastRun
;
const
lastRun
=
executionDetails
===
null
?
null
:
executionDetails
.
lastRun
;
console
.
log
(
totalCountChart
);
const
{
currentRun
}
=
this
.
state
;
return
(
return
(
<
Grid
container
spacing
=
{
8
}
>
<
Grid
container
spacing
=
{
8
}
>
<
Grid
item
sm
=
{
12
}
md
=
{
6
}
>
<
Grid
item
sm
=
{
12
}
md
=
{
6
}
>
...
@@ -148,6 +213,7 @@ class RunsSection extends React.Component<IRunsSectionProps> {
...
@@ -148,6 +213,7 @@ class RunsSection extends React.Component<IRunsSectionProps> {
{
runs
&&
runs
.
length
>
0
&&
{
runs
&&
runs
.
length
>
0
&&
<
div
>
<
div
>
<
h3
>
{
t
(
'
kpi.admin.p.executionDisplay.runs
'
)
}
</
h3
>
<
h3
>
{
t
(
'
kpi.admin.p.executionDisplay.runs
'
)
}
</
h3
>
<
LineChart
download
height
=
"200px"
thousands
=
","
{
...
totalCountChart
}
/>
<
Properties
>
<
Properties
>
{
runs
.
map
((
runInfo
,
i
)
=>
(
{
runs
.
map
((
runInfo
,
i
)
=>
(
<
PropertiesItem
numeric
key
=
{
runInfo
.
id
}
title
=
{
<
PrettyDate
value
=
{
runInfo
.
timestamp
}
/>
}
>
<
PropertiesItem
numeric
key
=
{
runInfo
.
id
}
title
=
{
<
PrettyDate
value
=
{
runInfo
.
timestamp
}
/>
}
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment