import {AnalyticalScope, Behavior, Visible} from "@webbpm/base-package";
import {ChartPlugin} from "./ChartPlugin";
import {Chart, ChartMeta} from "chart.js";
import {ErvuChartV2} from "../ErvuChartV2";

@AnalyticalScope(ErvuChartV2)
export class RoundArcCornersChartPlugin extends Behavior implements ChartPlugin {
  @Visible('false')
  id: string = 'roundArcCorners';

  /**
   * Основная идея: нарисовать полукруги на концах дуг, создавая эффект закругленности
   */
  afterDatasetDraw(chart: Chart, args: { index: number; meta: ChartMeta }): void {
    const ctx = chart.ctx;
    const datasetMeta = args.meta;
    // Обходим бублик против часовой стрелки, так как полукруги наслаиваются и начинают друг друга перекрывать
    for (let i = datasetMeta.data.length - 1; i >= 0; i--) {
      if (!chart.getDataVisibility(i)) continue;

      let data = datasetMeta.data[i] as any;
      let x = data.x;
      let y = data.y;
      let innerRadius = data.innerRadius;
      let outerRadius = data.outerRadius;
      // берем немного против часовой стрелки, чтобы не возникало стыков
      let endAngle = data.endAngle - Math.PI / 180 * 0.65;
      let radius = (outerRadius - innerRadius) / 2;
      let xCoor = Math.cos(endAngle) * (innerRadius + radius);
      let yCoor = Math.sin(endAngle) * (innerRadius + radius);
      ctx.save();
      ctx.fillStyle = data.options.backgroundColor;
      ctx.translate(x, y);
      ctx.beginPath();
      // рисуем полукруг немного большего радиуса, чтобы не возникало стыков
      ctx.arc(xCoor, yCoor, radius, endAngle, endAngle + Math.PI * 1.008);
      ctx.fill();
      ctx.restore();
    }
  }

}