import * as d3 from 'd3';
import {TemperatureSeries} from './StationLayer';


export default class TemperatureLegendChart{

    private d3svg: any;

    private margin = {top: 10, right: 30, bottom: 30, left: 20}
    private width = 0;
    private height = 0;

    public render(chartID: string, tSeries: TemperatureSeries[]):void{

        this.width = 360 - this.margin.left - this.margin.right;
        this.height = 80 - this.margin.top - this.margin.bottom;

        this.d3svg = d3.select("#"+chartID)
        .append("svg")
          .attr("width", this.width + this.margin.left + this.margin.right)
          .attr("height", this.height + this.margin.top + this.margin.bottom)
        .append("g")
          .attr("transform", "translate("+this.margin.left+","+this.margin.top+")");

        let xScale = d3.scaleLinear()
          .domain(d3.extent(tSeries, function(d){return d.date}))
          .range([0, this.width]);

        this.d3svg.append("g")
            .attr("transform", "translate(0," + this.height + ")")
            .call(d3.axisBottom(xScale).ticks(5).tickFormat(d3.format("d"));
        
        let yScale = d3.scaleLinear()
            .domain([d3.min(tSeries, function(d){return d.value}), d3.max(tSeries, function(d){return d.value})])
            .range([this.height, 0]).nice();
        
        let yAxis = d3.axisLeft(yScale).ticks(3);
        let yAxisContainer = this.d3svg.append("g")
            .call(yAxis);


        this.d3svg.append("path")
            .datum(tSeries)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-width", 1.5)
            .attr("d", d3.line()
              .x(function(d) { return xScale(d.date) })
              .y(function(d) { return yScale(d.value) })
              )
    }



}