import { Component, ElementRef, ViewChild } from '@angular/core';
import * as echarts from 'echarts';
import { getOption } from './getOption';

@Component({
  selector: 'workbench-risk-statistics',
  standalone: true,
  imports: [],
  templateUrl: './risk-statistics.component.html',
  styleUrl: './risk-statistics.component.less',
})
export class RiskStatisticsComponent {
  @ViewChild('chart') chartElement!: ElementRef<HTMLDivElement>;
  chart?: echarts.ECharts;

  ngAfterViewInit() {
    const dom = this.chartElement?.nativeElement;
    if (dom) {
      this.chart = echarts.init(dom);
      this.chart.setOption(
        getOption(
          [
            { name: 'R1', color: '#F42323', data: [12, 2, 6, 9, 10, 4, 5, 7, 3, 7, 11, 8] },
            { name: 'R2', color: '#F48323', data: [5, 15, 12, 4, 4, 11, 4, 2, 5, 9, 12, 16] },
            { name: 'R3', color: '#FFCB13', data: [7, 12, 8, 4, 5, 5, 5, 7, 6, 7, 3, 7] },
            { name: 'R4', color: '#0177FB', data: [10, 8, 8, 5, 9, 8, 6, 7, 10, 12, 10, 8] },
          ],
          ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          window.innerWidth
        )
      );
    }
  }
}
