https://www.bedoues-cocures.fr/assets/controllers/sondage_chart_controller-d7f711a20854ca1c4affda90eb15fbb9.js

1import {Controller} from '@hotwired/stimulus';
2import merge from 'lodash/merge';
3
4export default class extends Controller {
5    connect() {
6        this.element.addEventListener('chartjs:pre-connect', this._onPreConnect);
7    }
8
9    disconnect() {
10        // You should always remove listeners when the controller is disconnected to avoid side effects
11        this.element.removeEventListener('chartjs:pre-connect', this._onPreConnect);
12    }
13
14    _onPreConnect(event) {
15        const originalConfig = event.detail.config;
16        const defaultConfig = {
17            options: {
18                responsive: true,
19                maintainAspectRatio: false,
20                plugins: {
21                    tooltip: {
22                        borderWidth: 1,
23                        borderColor: 'white',
24                    }
25                }
26            }
27        };
28        let customConfig = {};
29        const data = originalConfig.data;
30
31        if (originalConfig.type === 'pie') {
32            customConfig = {
33                options: {
34                    plugins: {
35                        tooltip: {
36                            callbacks: {
37                                label: function (tooltipItem) {
38                                    const dataItem = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.dataIndex];
39                                    const percentItem = data.datasets[1].data[tooltipItem.dataIndex];
40
41                                    return " " + percentItem + "%, " + dataItem + " réponses";
42                                }
43                            }
44                        }
45                    }
46                }
47            }
48        } else if (originalConfig.type === 'bar') {
49            customConfig = {
50                options: {
51                    indexAxis: 'y',
52                    scales: {
53                        x: {
54                            beginAtZero: true,
55                        },
56                        y: {
57                            barThicknes: 20,
58                            tick: {
59                                alig: 'start',
60                            },
61                        },
62                    },
63                    plugins: {
64                        legend: {
65                            display: false,
66                        },
67                        tooltip: {
68                            callbacks: {
69                                label: function (tooltipItem) {
70                                    var dataItem = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.dataIndex];
71                                    var percentItem = data.datasets[1].data[tooltipItem.dataIndex];
72
73                                    return "Nombre de réponse : " + dataItem + " / Pourcentage : " + percentItem + "%";
74                                }
75                            }
76                        }
77                    }
78                }
79            };
80        }
81
82        event.detail.config = merge(originalConfig, defaultConfig, customConfig);
83    }
84}