https://digbi-web-akl7i.ondigitalocean.app/assets/controllers/chart_controller-cfed4a38.js

1import { Controller } from "@hotwired/stimulus";
2//import Chart from "chart.js/auto";
3
4export default class extends Controller {
5  static values = {
6    type: String,
7    data: Object,
8    options: Object,
9  };
10
11  connect() {
12    this.renderChart();
13  }
14
15  disconnect() {
16    if (this.chart) {
17      this.chart.destroy();
18    }
19  }
20
21  renderChart() {
22    const ctx = this.element.querySelector(".chart-container").getContext("2d");
23    const data =
24      typeof this.dataValue === "string"
25        ? JSON.parse(this.dataValue)
26        : this.dataValue;
27
28    new Chart(ctx, {
29      type: this.typeValue || "bar",
30      data: this.formatChartData(data),
31      options: {
32        responsive: true,
33        maintainAspectRatio: false,
34        plugins: {
35          legend: {
36            position: "top",
37          },
38          title: {
39            display: true,
40            text: data.title || "Chart",
41          },
42        },
43      },
44    });
45  }
46
47  formatChartData(data) {
48    // Handle different data formats
49    if (data.datasets) {
50      return data;
51    }
52
53    // Handle simple array format
54    if (Array.isArray(data)) {
55      return {
56        labels: data.map((item) => item.name || item.label || item.x),
57        datasets: [
58          {
59            label: "Data",
60            data: data.map((item) => item.value || item.y),
61            backgroundColor: this.generateColors(data.length),
62          },
63        ],
64      };
65    }
66
67    // Handle object format
68    return {
69      labels: Object.keys(data),
70      datasets: [
71        {
72          label: "Data",
73          data: Object.values(data),
74          backgroundColor: this.generateColors(Object.keys(data).length),
75        },
76      ],
77    };
78  }
79
80  generateColors(count) {
81    const colors = [
82      "#4F46E5", // Indigo
83      "#7C3AED", // Violet
84      "#EC4899", // Pink
85      "#F59E0B", // Amber
86      "#10B981", // Emerald
87      "#3B82F6", // Blue
88      "#EF4444", // Red
89      "#8B5CF6", // Purple
90      "#06B6D4", // Cyan
91      "#F97316", // Orange
92    ];
93
94    return Array(count)
95      .fill()
96      .map((_, i) => colors[i % colors.length]);
97  }
98}