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

@AnalyticalScope(ErvuChartV2)
export class BackgroundColorChartPlugin extends Behavior implements ChartPlugin {
  @Visible('false')
  id: string = 'background-color';
  @ColorEditor()
  public color: string;
  @AdvancedProperty()
  public onlyChartArea: boolean;

  /**
   * Настройка цвета фона
   */
  beforeDraw(chart: Chart): void {
    const {ctx, chartArea: {left, top, width, height}} = chart;
    ctx.save();
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = this.color ? this.color : 'lightGreen';

    if (this.onlyChartArea) {
      ctx.fillRect(left, top, width, height);
    }
    else {
      ctx.fillRect(0, 0, chart.width, chart.height);
    }
    ctx.restore();
  }
}
