import {Input} from "@angular/core";
import {IPadding, XAxisSide} from "../utilities/chart-helpers";
import {ScaleLinear} from "d3-scale";
import * as d3 from "d3";

export class ChartBase  {
  @Input() chartId: string;

// Chart Sizing Properties
  public _width: number;
  @Input('width')
  set width(value: string) {
    this._width = parseInt(value);
  }
  
  public _height: number;
  @Input('height')
  set height(value: string) {
    this._height = parseInt(value);
  }
  
  protected innerPadding: IPadding = {
    top: 0,
    right: 5,
    bottom: 5,
    left: 5
  };
  
  // Chart Elements
  protected chart;
  protected svg;
  
  protected xAxisSide = XAxisSide.Bottom;
  
  protected yScale: ScaleLinear<number, number>;
  
  protected xAxis;
  protected yAxis;
  protected yMin;
  protected yMax;
  
  
  constructor() {}
  
  public onInitBase (yMin, yMax) {
    this.svg = d3.select("#svg-" + this.chartId);
    this.yMin = yMin;
    this.yMax = yMax;
  
    this.buildYScale();
  }
  
  protected buildYScale() {
    this.yScale = d3.scaleLinear()
      .domain([
        this.yMin,
        this.yMax])
      .range([this._height- this.innerPadding.bottom, this.innerPadding.top]);
  }
}