Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Changed Dashboard

Browse Source
This commit is contained in:
Luca Haid
2025-02-12 17:51:29 +01:00
parent 1e868e9b84
commit 14308d3285
2 changed files with 98 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/pages/DashboardNew/DashboardNew.css
+6
View File
@@ -38,6 +38,12 @@
margin-top: 20px; margin-top: 20px;
} }
.dashboard-buttons {
display: flex;
gap: 1rem;
margin-top: 20px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.dashboard-cards { .dashboard-cards {
public/js/pages/DashboardNew/DashboardNew.js
+92 -46
View File
@@ -190,6 +190,39 @@ Vue.component('tt-timeline-chart', {
Vue.component('dashboard-default', { Vue.component('dashboard-default', {
props: ['dashboardData'], props: ['dashboardData'],
data() {
return {
selectedTimeframe: 'all',
window: window,
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: ` template: `
<div> <div>
<h4 class="mt-4">Bestellungen</h4> <h4 class="mt-4">Bestellungen</h4>
@@ -307,13 +340,25 @@ Vue.component('dashboard-default', {
<hr> <hr>
<h4 class="mt-4">Bestellverlauf</h4> <h4 class="mt-4">Bestellverlauf</h4>
<!-- add 4 new buttons here tt-button "Letzten 4 Wochen, Letzte 3 Monate, Letzten 6 Monate-->
<div class="dashboard-buttons">
<tt-button text="CSV Download" additional-class="btn-success" @click="exportTimeline" icon="fas fa-download"/>
<tt-button text="Letzten 4 Wochen" additional-class="btn-primary" @click="selectedTimeframe = '4 weeks'" v-if="selectedTimeframe !== '4 weeks'"/>
<tt-button text="Letzte 3 Monate" additional-class="btn-primary" @click="selectedTimeframe = '3 months'" v-if="selectedTimeframe !== '3 months'"/>
<tt-button text="Letzte 6 Monate" additional-class="btn-primary" @click="selectedTimeframe = '6 months'" v-if="selectedTimeframe !== '6 months'"/>
<tt-button text="Alle" additional-class="btn-primary" @click="selectedTimeframe = 'all'" v-if="selectedTimeframe !== 'all'"/>
</div>
<div class="dashboard-chart"> <div class="dashboard-chart">
<tt-timeline-chart <tt-timeline-chart
v-if="dashboardData.timeline.length > 0" v-if="dashboardData.timeline.length > 0"
:datasets="[ :datasets="[
{ {
label: 'Bestellungen', label: 'Bestellungen',
data: dashboardData.timeline[0], data: dashboardData.timeline[0].filter(item => {
return selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))
}),
color: 'rgb(75, 192, 192)', color: 'rgb(75, 192, 192)',
fill: true, fill: true,
yAxisID: 'y', yAxisID: 'y',
@@ -321,7 +366,7 @@ Vue.component('dashboard-default', {
}, },
{ {
label: 'Leerrohr', label: 'Leerrohr',
data: dashboardData.timeline_leerrohr[0], 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)', color: 'rgb(255, 99, 132)',
fill: false, fill: false,
yAxisID: 'y', yAxisID: 'y',
@@ -329,7 +374,7 @@ Vue.component('dashboard-default', {
}, },
{ {
label: 'ONT installiert', label: 'ONT installiert',
data: dashboardData.timeline_ont_installed[0], 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)', color: 'rgb(54, 162, 235)',
fill: false, fill: false,
yAxisID: 'y', yAxisID: 'y',
@@ -347,6 +392,13 @@ Vue.component('dashboard-default', {
Vue.component('dashboard-rml', { Vue.component('dashboard-rml', {
props: ['dashboardData'], props: ['dashboardData'],
data() {
return {
selectedTimeframe: 'all',
window: window,
moment: moment
}
},
template: ` template: `
<div> <div>
<h4 class="mt-4">Bestellungen</h4> <h4 class="mt-4">Bestellungen</h4>
@@ -439,57 +491,51 @@ Vue.component('dashboard-rml', {
<hr> <hr>
<h4 class="mt-4">Bestellverlauf</h4> <h4 class="mt-4">Bestellverlauf</h4>
<div class="dashboard-buttons">
<tt-button text="CSV Download" additional-class="btn-success" @click="exportTimeline" icon="fas fa-download"/>
<tt-button text="Letzten 4 Wochen" additional-class="btn-primary" @click="selectedTimeframe = '4 weeks'" v-if="selectedTimeframe !== '4 weeks'"/>
<tt-button text="Letzte 3 Monate" additional-class="btn-primary" @click="selectedTimeframe = '3 months'" v-if="selectedTimeframe !== '3 months'"/>
<tt-button text="Letzte 6 Monate" additional-class="btn-primary" @click="selectedTimeframe = '6 months'" v-if="selectedTimeframe !== '6 months'"/>
<tt-button text="Alle" additional-class="btn-primary" @click="selectedTimeframe = 'all'" v-if="selectedTimeframe !== 'all'"/>
</div>
<div class="dashboard-chart"> <div class="dashboard-chart">
<tt-timeline-chart <tt-timeline-chart
v-if="dashboardData.timeline.length > 0" v-if="dashboardData.timeline.length > 0"
:datasets="[ :datasets="[
{ {
label: 'Bestellungen', label: 'Bestellungen',
data: dashboardData.timeline[0], data: dashboardData.timeline[0].filter(item => {
color: 'rgb(23, 162, 184)', return selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))
fill: true, }),
yAxisID: 'y', color: 'rgb(75, 192, 192)',
order: 5 fill: true,
}, yAxisID: 'y',
{ order: 3
label: 'Summe von 244+245', },
data: dashboardData.timeline_inhouse_kabel_verlegt_efh[0], {
color: 'rgb(0, 123, 255)', label: 'Leerrohr',
fill: false, data: dashboardData.timeline_leerrohr[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
yAxisID: 'y', color: 'rgb(255, 99, 132)',
order: 4 fill: false,
}, yAxisID: 'y',
{ order: 2
label: 'Status 500 Energie Steiermark', },
data: dashboardData.timeline_status_500_energie_steiermark[0], {
color: 'rgb(40, 167, 69)', label: 'ONT installiert',
fill: false, data: dashboardData.timeline_ont_installed[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
yAxisID: 'y', color: 'rgb(54, 162, 235)',
order: 3 fill: false,
}, yAxisID: 'y',
{ order: 1
label: 'Status 500 Magenta', }
data: dashboardData.timeline_status_500_magenta[0], ]"
color: 'rgb(226, 0, 116)',
fill: false,
yAxisID: 'y',
order: 2
},
{
label: 'Status 500 Salzburg AG',
data: dashboardData.timeline_status_500_salzburg_ag[0],
color: 'rgb(0, 102, 179)',
fill: false,
yAxisID: 'y',
order: 1
}
]"
label="KW" label="KW"
:showGrid="false" :showGrid="false"
/> />
</div> </div>
</div> </div> `
`
}) })