let intro_svg;

function make_intro_svg() {
    "use strict";
    let maxValue;
    let yAxis, yAxisG, dataArea, dataLine;
    let margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    };

    let width = 960 - margin.left - margin.right;
    let height = 500 - margin.top - margin.bottom;

    let x = d3.scaleTime().range([0, width]);
    let y = d3.scaleLinear().range([height, 0]);

    let area = d3.area()
        .x(function (d) { return x(d.date) })
        .y0(height)
        .y1(function (d) { return y(d.volume) });

    let valueline = d3.line()
        .x(function (d) { return x(d.date) })
        .y(function (d) { return y(d.volume) });

    intro_svg = d3.select('svg#intro')
        .attr('width', width + margin.left + margin.bottom)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', `translate(${margin.left},${margin.top})`);

    console.log(x);

    d3.csv('volume.csv', function (d) {
        return {
            date: new Date(d.date),
            volume: +d.volume, // make sure volume is numeric
        }
    }, function (d) {
        plotArea(d);
    });


    function plotArea(data) {
        "use strict";
        x.domain(d3.extent(data, d => d.date));
        maxValue = d3.max(data, d=> d.volume);
        y.domain([0, 1000000000]);

        dataArea = intro_svg.append('path')
            .data([data])
            .attr('class', 'area')
            .attr('d', area);

        dataLine = intro_svg.append('path')
            .data([data])
            .attr('class', 'line')
            .attr('d', valueline);

        intro_svg.append('g')
            .attr("transform", `translate(0, ${height})`)
            .call(d3.axisBottom(x));

        yAxis = d3.axisLeft(y);

        yAxisG = intro_svg.append('g')
            .attr('class', 'yaxis')
            .call(yAxis);
    }

    d3.select("#growth1").on('impress:stepenter', function () {
        y.domain([0, 1000000000]);

        yAxisG
            .call(yAxis);
        dataArea
            .attr('d', yAxis);
        dataLine
            .attr('d', yAxis);
    });

    d3.select("#growth").on('impress:stepenter', function () {
        y.domain([0, maxValue]);

        yAxisG
            .call(yAxis);
        dataArea
            .attr('d', yAxis);
        dataLine
            .attr('d', yAxis);
    });
}

make_intro_svg();