https://internationaldayofzerowaste.org/assets/admin_controllers/c…_log_condition_chart_controller-ca8615ca.js

1import { Controller } from "@hotwired/stimulus"
2
3const CONDITION_COLORS = {
4  good: "#059669",
5  fair: "#d97706",
6  poor: "#dc2626"
7}
8
9export default class extends Controller {
10  static values = { data: Object }
11
12  connect() {
13    if (typeof Chart === "undefined") {
14      setTimeout(() => this.connect(), 100)
15      return
16    }
17    this.renderChart()
18  }
19
20  renderChart() {
21    const labels = Object.keys(this.dataValue).map(k => k.charAt(0).toUpperCase() + k.slice(1))
22    const values = Object.values(this.dataValue)
23    const colors = Object.keys(this.dataValue).map(k => CONDITION_COLORS[k] || "#a8a29e")
24
25    new Chart(this.element.getContext("2d"), {
26      type: "doughnut",
27      data: {
28        labels,
29        datasets: [{
30          data: values,
31          backgroundColor: colors
32        }]
33      },
34      options: {
35        responsive: true,
36        maintainAspectRatio: false,
37        cutout: "60%",
38        plugins: {
39          legend: { position: "bottom", labels: { padding: 16 } }
40        }
41      }
42    })
43  }
44}