import { Controller } from '@hotwired/stimulus'; import 'echarts'; import 'echarts.themeloader'; RailsCharts.loadTheme('dark'); export default class extends Controller { static values = { theme: String, locale: String, renderer: { type: String, default: 'canvas', }, option: { type: Object, default: {}, }, }; async connect() { this.chart = echarts.init(this.element, this.themeValue, { locale: this.localeValue, renderer: this.rendererValue, }); const option = { ...this.optionValue }; const applyKFormat = (axis) => { if (axis?.axisLabel?.formatter === 'kFormat') { axis.axisLabel.formatter = (value) => { if (value>= 1000) return (value / 1000).toFixed(1) + 'K'; return value; }; } }; if (Array.isArray(option.xAxis)) { option.xAxis.forEach(applyKFormat); } else { applyKFormat(option.xAxis); } this.chart.setOption(option); } disconnect() { if (this.chart) { this.chart.dispose(); } this.chart = null; } }