Changed Dashboard

public/js/pages/DashboardNew/DashboardNew.js

@@ -399,6 +399,32 @@ Vue.component('dashboard-rml', {
             moment: moment
         }
     },
+    methods: {
+        exportTimeline() {
+            //     we need all timelines with "ONT installiert", "Leerrohr", "Bestellungen"
+            const data = this.dashboardData.timeline[0].map((item, index) => ({
+                date: item.date,
+                bestellungen: item.value,
+                leerrohr: this.dashboardData.timeline_leerrohr[0][index].value,
+                ont_installiert: this.dashboardData.timeline_ont_installed[0][index].value
+            }));
+
+            // dont use any library for the csv
+            const csv = [
+                ['Datum', 'Bestellungen', 'Leerrohr', 'ONT installiert'],
+                ...data.map(item => [item.date, item.bestellungen, item.leerrohr, item.ont_installiert])
+            ].map(row => row.join(',')).join('\n');
+
+            const blob = new Blob([csv], {type: 'text/csv'});
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+
+            a.href = url;
+            a.download = 'timeline.csv';
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+    },
     template: `
              <div>
                <h4 class="mt-4">Bestellungen</h4>
@@ -514,17 +540,33 @@ Vue.component('dashboard-rml', {
             order: 3
         },
         {
-            label: 'Leerrohr',
-            data: dashboardData.timeline_leerrohr[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
-            color: 'rgb(255, 99, 132)',
+            label: 'Summe von 244+245',
+            data: dashboardData.timeline_inhouse_kabel_verlegt_efh[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
+            color: 'rgb(0, 123, 255)',
             fill: false,
             yAxisID: 'y',
             order: 2
         },
         {
-            label: 'ONT installiert',
-            data: dashboardData.timeline_ont_installed[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
-            color: 'rgb(54, 162, 235)',
+            label: 'Status 500 Energie Steiermark',
+            data: dashboardData.timeline_status_500_energie_steiermark[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
+            color: 'rgb(40, 167, 69)',
+            fill: false,
+            yAxisID: 'y',
+            order: 1
+        },
+        {
+            label: 'Status 500 Magenta',
+            data: dashboardData.timeline_status_500_magenta[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
+            color: 'rgb(226, 0, 116)',
+            fill: false,
+            yAxisID: 'y',
+            order: 1
+        },
+        {
+            label: 'Status 500 Salzburg AG',
+            data: dashboardData.timeline_status_500_salzburg_ag[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
+            color: 'rgb(0, 102, 179)',
             fill: false,
             yAxisID: 'y',
             order: 1