https://www.chateluslemarcheix.fr/assets/controllers/chart-abonnem…troller-9d5aa7f84055c25f28cc9922371aaa29.js

1import {Controller} from '@hotwired/stimulus';
2
3export default class extends Controller {
4    static values = {
5        station: String,
6    }
7
8    static targets = ['dateDebut', 'dateFin', 'chart'];
9
10    connect() {
11        this.chartTarget.addEventListener("chartjs:connect",(chartEv) => {
12            this.chartAbonnement = chartEv.detail.chart;
13            this._updateChart();
14        });
15    }
16
17
18    _updateChart(startDate = null, endDate = null) {
19        startDate = startDate || this.dateDebutTarget.value;
20        endDate = endDate || this.dateFinTarget.value;
21
22        const url = new URL(Routing.generate('moncompte_stats_json', { station_slug: this.stationValue }), window.location.origin);
23        url.searchParams.append('dateDebut', startDate);
24        url.searchParams.append('dateFin', endDate);
25
26        fetch(url, {
27            method: 'POST',
28            headers: {
29                'Content-Type': 'application/json'
30            }
31        })
32            .then(response => response.json())
33            .then(data => {
34                const labels = data.map(item => item.date);
35                const dataset = data.map(item => item.nombreAbonnes);
36                if (!this.chartAbonnement) {
37                    this.chartAbonnement = chartTarget;
38                }
39                if (this.chartAbonnement) {
40                    this.chartAbonnement.data.labels = labels;
41                    this.chartAbonnement.data.datasets[0].data = dataset;
42                    this.chartAbonnement.update();
43                } else {
44                    console.error('Chart instance not found.');
45                }
46            })
47            .catch(error => console.error('Error:', error));
48    }
49
50    _changePeriod(event) {
51        event.preventDefault();
52
53        const startDate = event.currentTarget.dataset.dateStart;
54        const endDate = event.currentTarget.dataset.dateEnd;
55
56        this.dateDebutTarget.value = startDate;
57        this.dateFinTarget.value = endDate;
58
59        this._updateChart(startDate, endDate);
60    }
61
62    onDateChange() {
63        this._updateChart();
64    }
65}