Chart.js埋め込み

<% set_breadcrumbs [["ChartJS", component_path(:chartjs)]] %>

<%= render 'template',
           title: "ChartJS",
           description: "" do %>
  <div data-controller="chartjs"
       data-chartjs-label-value="UFO sightings per year!!!!"
       data-chartjs-data-value="<%= [{ year: 2010, count: 10 },
                                     { year: 2011, count: 20 },
                                     { year: 2012, count: 15 },
                                     { year: 2013, count: 25 },
                                     { year: 2014, count: 22 },
                                     { year: 2015, count: 30 },
                                     { year: 2016, count: 28 },
                                    ].to_json %>">

    <div class="flex justify-between">
      <% [2010, 2011, 2012, 2013, 2014, 2015, 2016].each_with_index do |year, index| %>
        <div>
          <div><%= year %>:</div>
          <input type="range" min="0" max="100" value="10" step="10" class="w-20"
                 data-chartjs-bar-param="<%= index %>"
                 data-action="input->chartjs#changeBar"/>
        </div>
      <% end %>
    </div>
    <div class="w-full">
      <canvas data-chartjs-target="chart"></canvas>
    </div>
  </div>
<% end %>

import {Controller} from "@hotwired/stimulus"
import Chart from "chart.js/auto"

// Connects to data-controller="chartjs"
export default class extends Controller {
  static values = {
    data: {type: Array, default: []},
    label: String
  }
  static targets = ["chart"]

  connect() {
  }

  disconnect() {
    this.chart?.destroy()
  }

  changeBar(event) {
    const value = event.currentTarget.value
    const barIndex = Number(event.params.bar)
    const newDataValue = [...this.dataValue]
    newDataValue[barIndex] = {year: 2010 + barIndex, count: value}

    // We create a new dataValue object and use the
    // `this.dataValue` setter to update the value.
    // This is to trigger the `this.dataValueChange()` callback.
    // It is unnecessary if you call `this.#render()` directly
    // in this function.
    this.dataValue = newDataValue
  }

  dataValueChanged() {
    this.#render()
  }

  #render() {
    this.#renderChart()
  }

  #renderChart() {
    const data = this.dataValue
    if (this.chart) {
      this.chart.data = this.#data()
      this.chart.update()
    } else {
      this.chart = new Chart(
        this.chartTarget,
        {
          type: 'bar',
          data: this.#data()
        }
      );
    }
  }

  #data() {
    return {
      labels: this.dataValue.map(row => row.year),
      datasets: [
        {
          label: this.labelValue,
          data: this.dataValue.map(row => row.count)
        }
      ]
    }
  }
}