<template>
  <div ref="station-chart" id="stationChartSVG" width="200px" height="200px"></div>
</template>

<script lang="ts">

import * as d3 from 'd3';
import {Vue, Ref } from 'vue-property-decorator';
import {TemperatureSeries} from './StationLayer';

export default class StationChartPopup extends Vue{
    name = 'StationChartPopup';

    private d3svg: any;
    private path: any;
    private xScale: any;
    private yScale: any;
    private yAxis: any;
    private yAxisContainer: any;
    private xAxisContainer: any;
    private xAxis: any;
    private margin = {top: 10, right: 30, bottom: 30, left: 60}
    private width = 500 - this.margin.left - this.margin.right;
    private height = 200 - this.margin.top - this.margin.bottom;

    mounted(){
      
    }

    public renderGraph(tSeries: TemperatureSeries[]): void{
        if (!this.path){
          console.log("new path 2")
            this.d3svg = d3.select("#stationChartSVG")
              .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+")");

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

            this.xAxis = d3.axisBottom(this.xScale).tickFormat(d3.format("d"));
            this.xAxisContainer = this.d3svg.append("g")
              .attr("transform", "translate(0,"+this.height+")")
              .call(this.xAxis);

            this.yScale = d3.scaleLinear()
              .domain([d3.min(tSeries, function(d){return d.value}), d3.max(tSeries, function(d){return d.value})])
              .range([this.height, 0]);
            this.yAxis = d3.axisLeft(this.yScale);
            this.yAxisContainer = this.d3svg.append("g")
              .call(this.yAxis);
              
              
			  }
        this.xScale.domain(d3.extent(tSeries, function(d){return d.date})).range([0, this.width]);
        
        this.xAxis = d3.axisBottom(this.xScale).tickFormat(d3.format("d"));
        this.xAxisContainer.call(this.xAxis).transition().duration(1000);

        this.yScale.domain([d3.min(tSeries, function(d){return d.value}), d3.max(tSeries, function(d){return d.value})])
            .range([this.height, 0]).nice();
        this.yAxisContainer.call(this.yAxis).transition()
            .duration(1000);
        
        
        
        this.path = this.d3svg.selectAll(".t-line")
          .data([tSeries], function(d){ return d.value });
        
        this.path.enter().append("path")
            .attr("class", "t-line")
            .merge(this.path)
            .transition()
            .duration(1000)				      
            .attr("d", d3.line()
              .x((d)=>{return this.xScale(d.date)})
              .y((d)=>{return this.yScale(d.value)}))
              .attr("fill", "none")
              .attr("stroke", "blue")
              .attr("stroke-width", 2);

    }

}
</script>