import { Component, Input, OnInit } from '@angular/core';

export class GaugeChart {
  hasNeedle?: boolean;
  needleColor?: string;
  needleUpdateSpeed?: number;
  arcColors?: Array<string>;
  arcDelimiters?: Array<number>;
  rangeLabel?: Array<string>;
  needleStartValue?: number;
}

export const DEFAULT_OPTIONS_GAUGE_CHART: GaugeChart = {
  hasNeedle: true,
  needleColor: '#5D2418',
  needleUpdateSpeed: 1000,
  arcColors: ['#1ab394', '#f8ac59', '#ed5565'],
  arcDelimiters: [20, 50],
  rangeLabel: ['0', '100'],
  needleStartValue: 50,
}

@Component({
  selector: 'byte-gauge-chart',
  templateUrl: './gauge-chart.component.html',
  styleUrls: ['./gauge-chart.component.scss']
})
export class GaugeChartComponent implements OnInit {

  @Input()
  name: string = "Gauge chart";

  @Input()
  value: any = 1.2;

  @Input()
  unit: string = "s";

  @Input()
  options: GaugeChart;

  canvasWidth = 300
  centralLabel = ''
  bottomLabel = '';

  constructor() { }

  ngOnInit() {
    this.bottomLabel = this.value + ' ' + this.unit;
    if (!this.options) {
      this.options = DEFAULT_OPTIONS_GAUGE_CHART;
    }
  }

}
