Added Graph for Orders in NewDashboard

public/js/pages/DashboardNew/DashboardNew.js

@@ -78,6 +78,128 @@ Vue.component('tt-dashboard-display-card', {
     `
 });
 
+Vue.component('tt-timeline-chart', {
+    props: {
+        chartData: {
+            type: Array,
+            required: true
+        },
+        label: {
+            type: String,
+            default: ''
+        },
+        dataColor: {
+            type: String,
+            default: 'rgb(75, 192, 192)'
+        },
+        fillColor: {
+            type: Boolean,
+            default: true
+        },
+        showGrid: {
+            type: Boolean,
+            default: true
+        }
+    },
+    template: '<canvas ref="chart"></canvas>',
+    data() {
+        return {
+            chart: null
+        };
+    },
+    mounted() {
+        this.renderChart();
+    },
+    methods: {
+        renderChart() {
+            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',
+                        tension: 0.1,
+                        fill: this.fillColor
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            type: 'time',
+                            time: {
+                                unit: 'week',
+                                displayFormats: {
+                                    week: 'DD.MM'
+                                }
+                            },
+                            title: {
+                                display: true,
+                                text: 'Datum'
+                            },
+                            grid: {
+                                display: this.showGrid
+                            },
+                            ticks: {
+                                callback: (value, index, values) => {
+                                    const date = moment(value);
+                                    if (this.label === 'KW') {
+                                        return `KW ${date.isoWeek()}`;
+                                    } else {
+                                        return date.format('DD.MM');
+                                    }
+                                }
+                            }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Anzahl der Bestellungen'
+                            },
+                            grid: {
+                                display: this.showGrid
+                            }
+                        }
+                    },
+                    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');
+                                    }                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    },
+    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();
+            }
+        }
+    }
+});
+
+
+
 
 Vue.component('dashboard-new', {
     template: `
@@ -204,6 +326,19 @@ Vue.component('dashboard-new', {
                 color="#0bb36c"
             />
           </div>
+
+          <hr>
+          <h4 class="mt-4">Bestellverlauf</h4>
+          <div class="dashboard-chart">
+            <tt-timeline-chart
+                v-if="dashboardData.timeline.length > 0"
+                :chartData="dashboardData.timeline[0]"
+                label="KW"
+                dataColor="rgb(75, 192, 192)"
+                :fillColor="true"
+                :showGrid="false"
+            />
+          </div>
         </div>
       </tt-card>
               `,
@@ -227,7 +362,8 @@ Vue.component('dashboard-new', {
                 ont_installiert_300: "0",
                 vollanschluss_dokumentiert_350: "0",
                 vorsorge_dokumentiert_351: "0",
-                provider_bestellt_500: "0"
+                provider_bestellt_500: "0",
+                timeline: []
             },
             selectedNetworkOwner: 'all',
             selectedCampaign: 'all',