build: remove webjars and use custom build (#238)

1 files changed, 195 insertions, 0 deletions

diff --git a/src/web/charts.js b/src/web/charts.js
new file mode 100644
index 0000000..4826696
--- /dev/null
+++ b/src/web/charts.js
@@ -0,0 +1,195 @@
+import * as echarts from 'echarts/core';
+import { BarChart, PieChart } from 'echarts/charts';
+import { SVGRenderer } from 'echarts/renderers';
+import {
+    TitleComponent,
+    TooltipComponent,
+    DatasetComponent,
+    GridComponent
+} from 'echarts/components';
+
+echarts.use([
+    BarChart,
+    PieChart,
+    TitleComponent,
+    TooltipComponent,
+    DatasetComponent,
+    GridComponent,
+    SVGRenderer
+]);
+
+window.onload = () => {
+    drawPieChart('statistics/requeststates', 'piechart1', 'Statusverteilung aller Anfragen');
+    drawPieChart('statistics/requestpatientstates', 'piechart2', 'Statusverteilung nach Patient');
+    drawBarChart('statistics/requestslastmonth', 'barchart', 'Anfragen der letzten 30 Tage');
+
+    drawPieChart('statistics/requeststates?delete=true', 'piechartdel1', 'Statusverteilung aller Anfragen');
+    drawPieChart('statistics/requestpatientstates?delete=true', 'piechartdel2', 'Statusverteilung nach Patient');
+    drawBarChart('statistics/requestslastmonth?delete=true', 'barchartdel', 'Anfragen der letzten 30 Tage');
+
+    const eventSource = new EventSource('statistics/events');
+    eventSource.addEventListener('requeststates', event => {
+        drawPieChart('statistics/requeststates', 'piechart1', 'Statusverteilung aller Anfragen', JSON.parse(event.data));
+    });
+    eventSource.addEventListener('requestpatientstates', event => {
+        drawPieChart('statistics/requestpatientstates', 'piechart2', 'Statusverteilung nach Patient', JSON.parse(event.data));
+    });
+    eventSource.addEventListener('requestslastmonth', event => {
+        drawBarChart('statistics/requestslastmonth', 'barchart', 'Anfragen des letzten Monats', JSON.parse(event.data));
+    });
+
+    eventSource.addEventListener('deleterequeststates', event => {
+        drawPieChart('statistics/requeststates?delete=true', 'piechartdel1', 'Statusverteilung aller Anfragen', JSON.parse(event.data));
+    });
+    eventSource.addEventListener('deleterequestpatientstates', event => {
+        drawPieChart('statistics/requestpatientstates?delete=true', 'piechartdel2', 'Statusverteilung nach Patient', JSON.parse(event.data));
+    });
+    eventSource.addEventListener('deleterequestslastmonth', event => {
+        drawBarChart('statistics/requestslastmonth?delete=true', 'barchartdel', 'Anfragen des letzten Monats', JSON.parse(event.data));
+    });
+}
+
+const dateFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
+const dateFormat = new Intl.DateTimeFormat('de-DE', dateFormatOptions);
+
+export 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, null, {renderer: 'svg'});
+
+        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);
+    }
+
+    function draw(elemId, title, data) {
+        let chartDom = document.getElementById(elemId);
+        let chart = echarts.init(chartDom, null, {renderer: 'svg'});
+        let option= {
+            title: {
+                text: title,
+                left: 'center'
+            },
+            tooltip: {
+                trigger: 'item'
+            },
+            color: data.map(i => i.color),
+            animationDuration: 250,
+            animationDurationUpdate: 250
+        };
+
+        option && chart.setOption(option);
+    }
+}
+
+export 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, null, {renderer: 'svg'});
+
+        let option = {
+            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)
+                }
+            ]
+        };
+
+        option && chart.setOption(option);
+    }
+
+    function draw(elemId, title, data) {
+        let chartDom = document.getElementById(elemId);
+        let chart = echarts.init(chartDom, null, {renderer: 'svg'});
+        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);
+    }
+}
\ No newline at end of file