https://beaky.com.br/assets/controllers/lesson_charts_controller-2…e50be0c374df4a8fab64b9ff5aed300b3ef508f8.js

1import { Controller } from '@hotwired/stimulus'
2import { Chart, registerables } from 'chart.js'
3
4Chart.register(...registerables)
5
6const BRAND      = 'rgba(109, 71, 163, 0.82)'
7const FUCHSIA    = 'rgba(217, 70, 239, 0.78)'
8const TOOLTIP_BG = 'rgba(19, 15, 56, 0.92)'
9
10export default class extends Controller {
11  static targets = ['monthlyChart']
12  static values  = { monthly: Array }
13
14  connect() {
15    this._charts = []
16    if (this.hasMonthlyChartTarget) this._initMonthlyChart()
17  }
18
19  disconnect() {
20    this._charts.forEach(c => c.destroy())
21    this._charts = []
22  }
23
24  _tooltip() {
25    return {
26      backgroundColor: TOOLTIP_BG,
27      titleColor: '#C9ADE7',
28      bodyColor: '#fff',
29      padding: 10,
30      cornerRadius: 8,
31      boxWidth: 8,
32      boxHeight: 8,
33    }
34  }
35
36  _initMonthlyChart() {
37    const data = this.monthlyValue
38    const chart = new Chart(this.monthlyChartTarget, {
39      type: 'bar',
40      data: {
41        labels: data.map(d => d.label),
42        datasets: [
43          // borderSkipped: 'bottom' rounds only the top edge of each segment.

44          // With borderSkipped: false every segment was a fully rounded pill, so
45          // a month with one type looked round and a stacked month looked square.
46          {
47            label: 'Normais',
48            data: data.map(d => d.homework),
49            backgroundColor: BRAND,
50            borderRadius: 4,
51            borderSkipped: 'bottom',
52            barPercentage: 0.72,
53            categoryPercentage: 0.75,
54          },
55          {
56            label: 'Autocorrigíveis',
57            data: data.map(d => d.self_correctable),
58            backgroundColor: FUCHSIA,
59            borderRadius: 4,
60            borderSkipped: 'bottom',
61            barPercentage: 0.72,
62            categoryPercentage: 0.75,
63          },
64        ],
65      },
66      options: {
67        responsive: true,
68        maintainAspectRatio: false,
69        plugins: {
70          legend: { display: false },
71          tooltip: this._tooltip(),
72        },
73        scales: {
74          x: {
75            stacked: true,
76            grid: { display: false },
77            border: { display: false },
78            ticks: { color: '#94a3b8', font: { size: 11 } },
79          },
80          y: {
81            stacked: true,
82            beginAtZero: true,
83            grid: { color: 'rgba(148, 163, 184, 0.14)' },
84            border: { display: false },
85            ticks: { color: '#94a3b8', font: { size: 11 }, precision: 0 },
86          },
87        },
88      },
89    })
90    this._charts.push(chart)
91  }
92};