(Near) realtime update of statistics charts

1 files changed, 131 insertions, 88 deletions

diff --git a/src/main/resources/static/scripts.js b/src/main/resources/static/scripts.js
index 8f08ee5..2285167 100644
--- a/src/main/resources/static/scripts.js
+++ b/src/main/resources/static/scripts.js
@@ -13,101 +13,144 @@ window.onload = () => {
     });
 };
 
-function drawPieChart(url, elemId, title) {
-    fetch(url)
-        .then(resp => resp.json())
-        .then(data => {
-            let chartDom = document.getElementById(elemId);
-            let chart = echarts.init(chartDom);
-            let option= {
-                title: {
-                    text: title,
-                    left: 'center'
-                },
-                tooltip: {
-                    trigger: 'item'
-                },
-                color: data.map(i => i.color),
-                series: [
-                    {
-                        type: 'pie',
-                        radius: ['40%', '70%'],
-                        avoidLabelOverlap: false,
-                        label: {
-                            show: false,
-                            position: 'center'
-                        },
-                        labelLine: {
-                            show: false
-                        },
-                        data: data
-                    }
-                ]
-            };
+function drawPieChart(url, elemId, title, data) {
+    if (data) {
+        update(elemId, data);
+    } else {
+        fetch(url)
+            .then(resp => resp.json())
+            .then(d => {
+                draw(elemId, title, d);
+                update(elemId, d);
+            });
+    }
+
+    function update(elemId, data) {
+        let chartDom = document.getElementById(elemId);
+        let chart = echarts.init(chartDom);
+
+        let option = {
+            color: data.map(i => i.color),
+            animationDuration: 250,
+            animationDurationUpdate: 250,
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false,
+                        position: 'center'
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: data
+                }
+            ]
+        };
 
-            option && chart.setOption(option);
-        });
+        option && chart.setOption(option);
+    }
 
+    function draw(elemId, title, data) {
+        let chartDom = document.getElementById(elemId);
+        let chart = echarts.init(chartDom);
+        let option= {
+            title: {
+                text: title,
+                left: 'center'
+            },
+            tooltip: {
+                trigger: 'item'
+            },
+            color: data.map(i => i.color),
+            animationDuration: 250,
+            animationDurationUpdate: 250
+        };
+
+        option && chart.setOption(option);
+    }
 }
 
-function drawBarChart(url, elemId, title) {
-    fetch(url)
-        .then(resp => resp.json())
-        .then(data => {
-            let chartDom = document.getElementById(elemId);
-            let chart = echarts.init(chartDom);
-            let option= {
-                title: {
-                    text: title,
-                    left: 'center'
+function drawBarChart(url, elemId, title, data) {
+    if (data) {
+        update(elemId, data);
+    } else {
+        fetch(url)
+            .then(resp => resp.json())
+            .then(data => {
+                draw(elemId, title, data);
+                update(elemId, data);
+            });
+    }
+
+    function update(elemId, data) {
+        let chartDom = document.getElementById(elemId);
+        let chart = echarts.init(chartDom);
+
+        let option = {
+            series: [
+                {
+                    name: 'UNKNOWN',
+                    type: 'bar',
+                    stack: 'total',
+                    data: data.map(i => i.nameValues.unknown)
                 },
-                xAxis: {
-                    type: 'category',
-                    data: data.map(i => dateFormat.format(Date.parse(i.date)))
+                {
+                    name: 'ERROR',
+                    type: 'bar',
+                    stack: 'total',
+                    data: data.map(i => i.nameValues.error)
                 },
-                yAxis: {
-                    type: 'value',
-                    minInterval: 2,
+                {
+                    name: 'WARNING',
+                    type: 'bar',
+                    stack: 'total',
+                    data: data.map(i => i.nameValues.warning)
                 },
-                tooltip: {
-                    trigger: 'item'
+                {
+                    name: 'SUCCESS',
+                    type: 'bar',
+                    stack: 'total',
+                    data: data.map(i => i.nameValues.success)
                 },
-                animation: false,
-                color: ['slategray', 'red', 'darkorange', 'green', 'slategray'],
-                series: [
-                    {
-                        name: 'UNKNOWN',
-                        type: 'bar',
-                        stack: 'total',
-                        data: data.map(i => i.nameValues.unknown)
-                    },
-                    {
-                        name: 'ERROR',
-                        type: 'bar',
-                        stack: 'total',
-                        data: data.map(i => i.nameValues.error)
-                    },
-                    {
-                        name: 'WARNING',
-                        type: 'bar',
-                        stack: 'total',
-                        data: data.map(i => i.nameValues.warning)
-                    },
-                    {
-                        name: 'SUCCESS',
-                        type: 'bar',
-                        stack: 'total',
-                        data: data.map(i => i.nameValues.success)
-                    },
-                    {
-                        name: 'DUPLICATION',
-                        type: 'bar',
-                        stack: 'total',
-                        data: data.map(i => i.nameValues.duplication)
-                    }
-                ]
-            };
+                {
+                    name: 'DUPLICATION',
+                    type: 'bar',
+                    stack: 'total',
+                    data: data.map(i => i.nameValues.duplication)
+                }
+            ]
+        };
+
+        option && chart.setOption(option);
+    }
+
+    function draw(elemId, title, data) {
+        let chartDom = document.getElementById(elemId);
+        let chart = echarts.init(chartDom);
+        let option= {
+            title: {
+                text: title,
+                left: 'center'
+            },
+            xAxis: {
+                type: 'category',
+                data: data.map(i => dateFormat.format(Date.parse(i.date)))
+            },
+            yAxis: {
+                type: 'value',
+                minInterval: 1
+            },
+            tooltip: {
+                trigger: 'item'
+            },
+            color: ['slategray', 'red', 'darkorange', 'green', 'slategray'],
+            animationDuration: 250,
+            animationDurationUpdate: 250
+        };
 
-            option && chart.setOption(option);
-        });
+        option && chart.setOption(option);
+    }
 }
\ No newline at end of file