Natuurlijk! Hier is een basisvoorbeeld van hoe je een Vue.js-dashboard kunt ontwerpen dat real-time gegevensvisualisaties toont met een lijn grafiek, gebruikmakend van bijvoorbeeld Chart.js en Vue 3. Stap 1: Installeer benodigde dependencies ```bash npm install vue chart.js vue-chartjs axios ``` Stap 2: Maak een Vue-component voor het dashboard ```vue <template> <div> <h1>Sales Dashboard</h1> <!-- Filters --> <div> <label for="start-date">Startdatum:</label> <input type="date" v-model="filters.startDate" @change="fetchData" /> <label for="end-date">Einddatum:</label> <input type="date" v-model="filters.endDate" @change="fetchData" /> <label for="region">Regio:</label> <select v-model="filters.region" @change="fetchData"> <option value="">Alle regio's</option> <option v-for="regio in regioOptions" :key="regio" :value="regio">{{ regio }}</option> </select> </div> <!-- Zoom op regio --> <button @click="zoomIn">Zoom op Regio</button> <button @click="resetZoom">Reset Zoom</button> <!-- Grafiek --> <LineChart :chart-data="chartData" /> </div> </template> <script> import { ref, reactive, onMounted } from 'vue'; import { Line } from 'vue-chartjs'; import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, PointElement, LinearScale, TimeScale, } from 'chart.js'; import axios from 'axios'; // Registreer chart.js component ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, LinearScale, TimeScale); export default { name: 'SalesDashboard', components: { LineChart: { props: ['chart-data'], template: `<Line :chart-data="chartData" />`, components: { Line, }, computed: { chartData() { return this.chartDataProp; }, }, }, }, setup() { const rawData = ref([]); const filteredData = ref([]); const regioOptions = ref([]); const filters = reactive({ startDate: '', endDate: '', region: '', }); const chartData = ref({ labels: [], datasets: [ { label: 'Omzet', data: [], fill: false, borderColor: 'blue', }, ], }); // Functie om data op te halen const fetchData = async () => { try { const response = await axios.get('https://api.example.com/salesdata'); rawData.value = response.data; // Bepaal regio opties regioOptions.value = [...new Set(rawData.value.map(item => item.regio))]; // Filter data op basis van filters filteredData.value = rawData.value.filter(item => { const dateMatch = (!filters.startDate || item.datum >= filters.startDate) && (!filters.endDate || item.datum <= filters.endDate); const regioMatch = !filters.region || item.regio === filters.region; return dateMatch && regioMatch; }); // Update grafiek data updateChart(); } catch (error) { console.error('Fout bij ophalen data:', error); } }; const updateChart = () => { // Groepeer data op datum const grouped = {}; filteredData.value.forEach(item => { if (!grouped[item.datum]) { grouped[item.datum] = 0; } grouped[item.datum] += item.omzet; }); // Sorteer datums const sortedDates = Object.keys(grouped).sort(); chartData.value.labels = sortedDates; chartData.value.datasets[0].data = sortedDates.map(date => grouped[date]); }; // Interactie functies const zoomIn = () => { // Implementatie van zoom op regio (bijvoorbeeld door filter te beperken tot geselecteerde regio) // Hier kan je verdere zoomfunctionaliteit toevoegen indien gewenst alert('Zoom functionaliteit moet verder worden geïmplementeerd.'); }; const resetZoom = () => { // Reset filters of zoom filters.region = ''; fetchData(); }; onMounted(() => { fetchData(); }); return { filters, regioOptions, chartData, fetchData, zoomIn, resetZoom, }; }, }; </script> ``` Kort samengevat: - Je hebt filters voor datums en regio. - De data wordt opgehaald via axios van de API. - Data wordt gefilterd en geaggregeerd op datum. - Een lijn grafiek toont de omzet per datum. - Knoppen voor zoom en reset (voor verdere functionaliteit). Voor meer geavanceerde zoommogelijkheden kun je bijvoorbeeld gebruik maken van Chart.js plugins of aanvullende Vue libraries. Wil je dat ik je help met verdere uitbreidingen of styling?