Rework dashboard

public/js/pages/DashboardNew/DashboardNew.js

@@ -80,7 +80,7 @@ Vue.component('tt-dashboard-display-card', {
 
 Vue.component('tt-timeline-chart', {
     props: {
-        chartData: {
+        datasets: {
             type: Array,
             required: true
         },
@@ -88,14 +88,6 @@ Vue.component('tt-timeline-chart', {
             type: String,
             default: ''
         },
-        dataColor: {
-            type: String,
-            default: 'rgb(75, 192, 192)'
-        },
-        fillColor: {
-            type: Boolean,
-            default: true
-        },
         showGrid: {
             type: Boolean,
             default: true
@@ -112,19 +104,24 @@ Vue.component('tt-timeline-chart', {
     },
     methods: {
         renderChart() {
+            if (this.chart) {
+                this.chart.destroy();
+            }
             const ctx = this.$refs.chart.getContext('2d');
             this.chart = new Chart(ctx, {
                 type: 'line',
                 data: {
-                    labels: this.chartData.map(item => item.date),
-                    datasets: [{
-                        label: 'Bestellungen',
-                        data: this.chartData.map(item => item.value),
-                        borderColor: this.dataColor,
-                        backgroundColor: this.fillColor ? this.dataColor : 'transparent',
+                    labels: this.datasets[0].data.map(item => item.date),
+                    datasets: this.datasets.map((dataset, index) => ({
+                        label: dataset.label,
+                        data: dataset.data.map(item => item.value),
+                        borderColor: dataset.color,
+                        backgroundColor: dataset.fill ? dataset.color : 'transparent',
                         tension: 0.1,
-                        fill: this.fillColor
-                    }]
+                        fill: dataset.fill,
+                        yAxisID: dataset.yAxisID,
+                        order: dataset.order || index
+                    }))
                 },
                 options: {
                     responsive: true,
@@ -148,11 +145,7 @@ Vue.component('tt-timeline-chart', {
                             ticks: {
                                 callback: (value, index, values) => {
                                     const date = moment(value);
-                                    if (this.label === 'KW') {
-                                        return `KW ${date.isoWeek()}`;
-                                    } else {
-                                        return date.format('DD.MM');
-                                    }
+                                    return this.label === 'KW' ? `KW ${date.isoWeek()}` : date.format('DD.MM');
                                 }
                             }
                         },
@@ -160,7 +153,7 @@ Vue.component('tt-timeline-chart', {
                             beginAtZero: true,
                             title: {
                                 display: true,
-                                text: 'Anzahl der Bestellungen'
+                                text: 'Anzahl'
                             },
                             grid: {
                                 display: this.showGrid
@@ -168,18 +161,12 @@ Vue.component('tt-timeline-chart', {
                         }
                     },
                     plugins: {
-                        legend: {
-                            display: false
-                        },
                         tooltip: {
                             callbacks: {
                                 title: (context) => {
                                     const date = moment(context[0].label);
-                                    if (this.label === 'KW') {
-                                        return `KW ${date.isoWeek()}`;
-                                    } else {
-                                        return date.format('DD.MM');
-                                    }                                }
+                                    return this.label === 'KW' ? `KW ${date.isoWeek()}` : date.format('DD.MM.YYYY');
+                                }
                             }
                         }
                     }
@@ -188,11 +175,10 @@ Vue.component('tt-timeline-chart', {
         }
     },
     watch: {
-        chartData() {
-            if (this.chart) {
-                this.chart.data.labels = this.chartData.map(item => item.date);
-                this.chart.data.datasets[0].data = this.chartData.map(item => item.value);
-                this.chart.update();
+        datasets: {
+            deep: true,
+            handler() {
+                this.renderChart();
             }
         }
     }
@@ -332,12 +318,36 @@ Vue.component('dashboard-new', {
           <div class="dashboard-chart">
             <tt-timeline-chart
                 v-if="dashboardData.timeline.length > 0"
-                :chartData="dashboardData.timeline[0]"
+                :datasets="[
+        {
+            label: 'Bestellungen',
+            data: dashboardData.timeline[0],
+            color: 'rgb(75, 192, 192)',
+            fill: true,
+            yAxisID: 'y',
+            order: 3
+        },
+        {
+            label: 'Leerrohr',
+            data: dashboardData.timeline_leerrohr[0],
+            color: 'rgb(255, 99, 132)',
+            fill: false,
+            yAxisID: 'y',
+            order: 2
+        },
+        {
+            label: 'ONT installiert',
+            data: dashboardData.timeline_ont_installed[0],
+            color: 'rgb(54, 162, 235)',
+            fill: false,
+            yAxisID: 'y',
+            order: 1
+        }
+    ]"
                 label="KW"
-                dataColor="rgb(75, 192, 192)"
-                :fillColor="true"
                 :showGrid="false"
             />
+
           </div>
         </div>
       </tt-card>