class lineChartSmall {

    constructor(div_id, lineData, label, colours) {
        this.lineData = lineData;
        this.label = label;
        this.margin = {top: 10, right: 10, bottom: 10, left: 10};
        this.axis_w = 55;
        this.colours = colours;

        this.svg = d3.select("#" + div_id).append("svg")
            .attr("width",  "100%")
            .attr("height", "100%");

        this.width = this.svg.node().getBoundingClientRect().width - this.margin.left - this.margin.right - this.axis_w;
        this.height = this.svg.node().getBoundingClientRect().height - this.margin.top - this.margin.bottom;

        this.g0 = this.svg.append("g")
            .attr("transform", "translate(" + (this.margin.left + this.axis_w) + "," + this.margin.top + ")");

        this.g1 = this.svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + this.axis_w + "," + this.margin.top + ")")
            .attr("width",  "95%")
            .attr("height", "100%");

        this.g2 = this.svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + (this.width + this.axis_w) + "," + (this.height - this.margin.top - this.margin.bottom) + ") rotate(-90)")
            .attr("width",  "95%")
            .attr("height", "100%");

        // set the ranges
        this.buildObject();

        
    };
  
    buildObject() {
        var x = d3.scaleLinear().range([0, this.width])
        .domain([0, this.lineData[0].length]);


        var y = d3.scaleLinear().range([this.height, 0]);
        //y.domain(d3.extent(this.lineData, function(d, i) { return Math.min(d); }));
        y.domain([
            d3.min(this.lineData, function (series) {
              return d3.min(series, function (d) { return d; });
            }),
            d3.max(this.lineData, function (series) {
              return d3.max(series, function (d) { return d; });
            })
          ]);
        this.buildLines(x, y);
        this.buildAxis(x, y);
        this.buildTextLabel(this.level);
    };
  
    buildLines(x, y) {

        this.valueline = d3.line()
                .x(function(d, i) { return x(i); })
                .y(function(d, i) { return y(d);  })
                .curve(d3.curveMonotoneX);

        var colors = this.colours;

        this.g0.selectAll("path")
            .data(this.lineData)
            .attr("class", "line")
            .attr("style", function(d, i) { return "stroke: " + colors[i];})
            .attr("d", this.valueline)
            .enter().append("path")
                .attr("class", "line")  
                .attr("d", this.valueline)
            .exit()
                .remove();
    };
  
    buildAxis(x, y) {
        this.yAxis_woy = d3.axisLeft(y).ticks(3);
        this.g1.call(this.yAxis_woy); 
    };
  
    buildTextLabel() {
        this.g2.selectAll("text")
        .data([0])
        .text(this.label)
        .enter()
            .append("text")
            .text(this.label)
            .attr("x", 0)
            .attr("y", this.height*0.10)
            .attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.25 + "px")
            .attr("text-anchor", "middle")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };

    updateLevel(values) {
        for (var i = 0; i < this.lineData.length; i++) {
            if (this.lineData[i].length >= 50) {
                this.lineData[i].shift();
            }
            this.lineData[i].push(values[i]);
        }
        this.buildObject();
    };

    updateLabel(data) {
        this.label = data;
        this.buildTextLabel();
    };

    updateColors(colours) {
        this.colours = colours;
    };

    updateData(data) {
        this.lineData = data;
    };
}
  
//Usage
var lineData = [[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]],[[]]];
var charts = [];

var resetCharts = function(type)
{
    if (type == 0xA5) {
        lineData = [
            [[]],
            [[],[],[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[],[],[],[],[],[],[],[],[]],
            [[],[],[]],
            [[]],
            [[],[],[],[],[],[],[],[],[],[]],
            [[],[]],
            [[],[]],
            [[],[]],
            [[],[]],
            [[],[],[],[]],
            [[],[],[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[],[],[]],
            [[],[],[]],
        ];
        for (var i = 0; i < 24; i++) {
            charts[i].updateData(lineData[i]);
        }
        charts[0].updateLabel("INTERRUPT TIME");
        charts[1].updateLabel("FLOW RATE");
        charts[2].updateLabel("FLOW TARGET");
        charts[3].updateLabel("FLOW RATE ONLY");
        charts[4].updateLabel("FLOW ERROR");
        charts[5].updateLabel("FLOW_ERROR_%");
        charts[6].updateLabel("PULSE_RANGE");
        charts[7].updateLabel("PULSE_PROCESS");
        charts[8].updateLabel("MEDIAN FILTER");
        charts[9].updateLabel("MEDIAN EXTREMES + MID");
        charts[10].updateLabel("GOLDEN NUMBER");
        charts[11].updateLabel("AVERAGE_FILTER");
        charts[12].updateLabel("AVERAGE_EXTREMES");
        charts[13].updateLabel("PULSE RANGE VS PROC");
        charts[14].updateLabel("PROCESS VS ADJUST");
        charts[15].updateLabel("AMP METER");
        charts[16].updateLabel("VOLTAGE");
        charts[17].updateLabel("MOTOR STATE");
        charts[18].updateLabel("MOTOR ERROR");
        charts[19].updateLabel("MOTOR ERROR OUT");
        charts[20].updateLabel("LAT C");
        charts[21].updateLabel("TRIS C");
        charts[22].updateLabel("--");
        charts[23].updateLabel("--");

        charts[0].updateColors(["#ffa600"]);
        charts[1].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[2].updateColors(["#ffa600"]);
        charts[3].updateColors(["#ffa600"]);
        charts[4].updateColors(["#ffa600"]);
        charts[5].updateColors(["#ffa600"]);
        charts[6].updateColors(["#ffa600"]);
        charts[7].updateColors(["#ffa600"]);
        charts[8].updateColors(["#ffa600", "#ff2100", "#0083ff", "#ffa600", "#ff2100", "#0083ff", "#ffa600", "#ff2100", "#0083ff"]);
        charts[9].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[10].updateColors(["#ffa600", "ff2100"]);
        charts[11].updateColors(["#ffa600", "#ff2100", "#0083ff", "#ffa600", "#ff2100", "#0083ff", "#ffa600", "#ff2100", "#0083ff", "#ffa600"]);
        charts[12].updateColors(["#ffa600", "#ff2100"]);
        charts[13].updateColors(["#ffa600", "#ff2100"]);
        charts[14].updateColors(["#ffa600", "#ff2100"]);
        charts[15].updateColors(["#ffa600", "#ff2100"]);
        charts[16].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[17].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[18].updateColors(["#ff2100", "#ffa600", "#0083ff"]);
        charts[19].updateColors(["#ff2100", "#ffa600", "#0083ff"]);
        charts[20].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[21].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[22].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[23].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
    } else if (type == 0xFC) {
        lineData = [
            [[]],
            [[],[],[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[],[],[],[],[],[],[],[],[]],
            [[],[],[]],
            [[],[]],
            [[],[],[],[],[],[],[],[],[],[]],
            [[]],
            [[]],
            [[],[]],
            [[],[]],
            [[],[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
        ];
        for (var i = 0; i < 24; i++) {
            charts[i].updateData(lineData[i]);
        }
        charts[0].updateLabel("INTERRUPT TIME");
        charts[1].updateLabel("FLOW RATE");
        charts[2].updateLabel("FLOW TARGET");
        charts[3].updateLabel("FLOW RATE ONLY");
        charts[4].updateLabel("FLOW ERROR");
        charts[5].updateLabel("FLOW_ERROR_%");
        charts[6].updateLabel("PULSE_RANGE");
        charts[7].updateLabel("PULSE_PROCESS");
        charts[8].updateLabel("MEDIAN FILTER");
        charts[9].updateLabel("MEDIAN EXTREMES + MID");
        charts[10].updateLabel("GOLDEN NUMBER");
        charts[11].updateLabel("AVERAGE_FILTER");
        charts[12].updateLabel("ANALOGUE PRESS");
        charts[13].updateLabel("REAL PRESSURE");
        charts[14].updateLabel("TARGET PRESSURE");
        charts[15].updateLabel("FLAGS");
        charts[16].updateLabel("VOLTAGE");
        charts[17].updateLabel("--");
        charts[18].updateLabel("--");
        charts[19].updateLabel("--");
        charts[20].updateLabel("--");
        charts[21].updateLabel("--");
        charts[22].updateLabel("--");
        charts[23].updateLabel("--");

        charts[0].updateColors(["#ffa600"]);
        charts[1].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[2].updateColors(["#ffa600"]);
        charts[3].updateColors(["#ffa600"]);
        charts[4].updateColors(["#ffa600"]);
        charts[5].updateColors(["#ffa600"]);
        charts[6].updateColors(["#ffa600"]);
        charts[7].updateColors(["#ffa600"]);
        charts[8].updateColors(["#ffa600", "#ff2100", "#0083ff", "#ffa600", "#ff2100", "#0083ff", "#ffa600", "#ff2100", "#0083ff"]);
        charts[9].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[10].updateColors(["#ffa600", "ff2100"]);
        charts[11].updateColors(["#ffa600", "#ff2100", "#0083ff", "#ffa600", "#ff2100", "#0083ff", "#ffa600", "#ff2100", "#0083ff", "#ffa600"]);
        charts[12].updateColors(["#ffa600", "#ff2100"]);
        charts[13].updateColors(["#ffa600", "#ff2100"]);
        charts[14].updateColors(["#ffa600", "#ff2100"]);
        charts[15].updateColors(["#ffa600", "#ff2100"]);
        charts[16].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[17].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[18].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[19].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[20].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[21].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[22].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[23].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
    } else if (type == 0xC7) {
        lineData = [
            [[]],
            [[]],
            [[]],
            [[],[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[]],
            [[],[]],
            [[]],
            [[]],
            [[],[]],
            [[]],
            [[],[],[],[]],
            [[],[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
            [[],[],[]],
        ];
        for (var i = 0; i < 24; i++) {
            charts[i].updateData(lineData[i]);
        }
        charts[0].updateLabel("INTERRUPT TIME");
        charts[1].updateLabel("INTERRUPT WORK");
        charts[2].updateLabel("CALC P");
        charts[3].updateLabel("RPM");
        charts[4].updateLabel("ERROR");
        charts[5].updateLabel("ERROR %");
        charts[6].updateLabel("RPM_ERROR");
        charts[7].updateLabel("PWM_OUTR");
        charts[8].updateLabel("PWM_OUT");
        charts[9].updateLabel("PULSE_RANGE");
        charts[10].updateLabel("VOLUME");
        charts[11].updateLabel("ACTUAL FLOW");
        charts[12].updateLabel("TARGET FLOW");
        charts[13].updateLabel("PWM_OUT VS SP");
        charts[14].updateLabel("GOLDEN NUMBER");
        charts[15].updateLabel("FLAGS");
        charts[16].updateLabel("VOLTAGE");
        charts[17].updateLabel("--");
        charts[18].updateLabel("--");
        charts[19].updateLabel("--");
        charts[20].updateLabel("--");
        charts[21].updateLabel("--");
        charts[22].updateLabel("--");
        charts[23].updateLabel("--");

        charts[0].updateColors(["#ffa600"]);
        charts[1].updateColors(["#ffa600"]);
        charts[2].updateColors(["#ffa600"]);
        charts[3].updateColors(["#ffa600", "#ff2100"]);
        charts[4].updateColors(["#ffa600"]);
        charts[5].updateColors(["#ffa600"]);
        charts[6].updateColors(["#ffa600"]);
        charts[7].updateColors(["#ffa600"]);
        charts[8].updateColors(["#ffa600"]);
        charts[9].updateColors(["#ffa600"]);
        charts[10].updateColors(["#ffa600", "#ff2100"]);
        charts[11].updateColors(["#ffa600"]);
        charts[12].updateColors(["#ffa600"]);
        charts[13].updateColors(["#ffa600", "#ff2100"]);
        charts[14].updateColors(["#ffa600"]);
        charts[15].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[16].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[17].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[18].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[19].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[20].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[21].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[22].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
        charts[23].updateColors(["#ffa600", "#ff2100", "#0083ff"]);
    }
}

var changeDeviceIndex = function(data)
{
    //document.getElementById("ai-heading-device-charts").innerHTML = data;
}

/*setInterval(function() {
    for (var i = 0; i < charts.length; i++) {
        var values = [];
        for (var j = 0; j < lineData[i].length; j++) {
            if ((i == 0 || i == 4) && j == 2) {
                values[j] = Math.round(Math.abs(values[1] - values[0]));
            } else {
                values[j] = Math.round((Math.random()*10 + 95), 0);
            }
        }
        charts[i].updateLevel(values);
    }
}, 100);*/

charts[0] = new lineChartSmall("device-1-linechart-0", lineData[0], "FLOW RATE", ["#ffa600", "#ff2100", "#0083ff"]);
charts[1] = new lineChartSmall("device-1-linechart-1", lineData[1], "TIME INT", ["#ffa600"]);
charts[2] = new lineChartSmall("device-1-linechart-2", lineData[2], "MEDIAN", ["#ffa600", "#ff6361", "#bc5090", "#58508d", "#003f5c", "#ff2100", "#0083ff", "#00d4ff", "#49b1c6", "#80d6d0"]);
charts[3] = new lineChartSmall("device-1-linechart-3", lineData[3], "AVERAGE", ["#ffa600", "#ff6361", "#bc5090", "#58508d", "#003f5c", "#ff2100", "#0083ff", "#00d4ff", "#49b1c6", "#80d6d0"]);
charts[4] = new lineChartSmall("device-1-linechart-4", lineData[4], "FLOW RATE", ["#0083ff", "#ff2100", "#0083ff"]);
charts[5] = new lineChartSmall("device-1-linechart-5", lineData[5], "TIME INT", ["#0083ff"]);
charts[6] = new lineChartSmall("device-1-linechart-6", lineData[6], "MEDIAN", ["#ffa600", "#ff6361", "#bc5090", "#58508d", "#003f5c", "#ff2100", "#0083ff", "#00d4ff", "#49b1c6", "#80d6d0"]);
charts[7] = new lineChartSmall("device-1-linechart-7", lineData[7], "AVERAGE", ["#ffa600", "#ff6361", "#bc5090", "#58508d", "#003f5c", "#ff2100", "#0083ff", "#00d4ff", "#49b1c6", "#80d6d0"]);
charts[8] = new lineChartSmall("device-1-linechart-8", lineData[8], "RPM_SP", ["#ffa600", "#ff2100"]);
charts[9] = new lineChartSmall("device-1-linechart-9", lineData[9], "RPM_PV", ["#ffa600", "#ff2100", "#0083ff"]);
charts[10] = new lineChartSmall("device-1-linechart-10", lineData[10], "RPM_SP_Error", ["#ffa600", "#0083ff"]);
charts[11] = new lineChartSmall("device-1-linechart-11", lineData[11], "RPM_SP_OutR", ["#ad7101", "#ffa600"]);
charts[12] = new lineChartSmall("device-1-linechart-12", lineData[12], "GOLDEN", ["#ffa600", "#0083ff"]);
charts[13] = new lineChartSmall("device-1-linechart-13", lineData[13], "OFFSET", ["#ad7101", "#ffa600"]);
charts[14] = new lineChartSmall("device-1-linechart-14", lineData[14], "LOWEST", ["#ffa600", "#0083ff"]);
charts[15] = new lineChartSmall("device-1-linechart-15", lineData[15], "HIGHEST", ["#ad7101", "#ffa600"]);
charts[16] = new lineChartSmall("device-1-linechart-16", lineData[16], "VOLTAGE", ["#ad7101", "#ffa600"]);
charts[17] = new lineChartSmall("device-1-linechart-17", lineData[17], "HIGHEST", ["#ad7101", "#ffa600"]);
charts[18] = new lineChartSmall("device-1-linechart-18", lineData[18], "HIGHEST", ["#ad7101", "#ffa600"]);
charts[19] = new lineChartSmall("device-1-linechart-19", lineData[19], "HIGHEST", ["#ad7101", "#ffa600"]);
charts[20] = new lineChartSmall("device-1-linechart-20", lineData[20], "HIGHEST", ["#ad7101", "#ffa600"]);
charts[21] = new lineChartSmall("device-1-linechart-21", lineData[21], "HIGHEST", ["#ad7101", "#ffa600"]);
charts[22] = new lineChartSmall("device-1-linechart-22", lineData[22], "HIGHEST", ["#ad7101", "#ffa600"]);
charts[23] = new lineChartSmall("device-1-linechart-23", lineData[23], "HIGHEST", ["#ad7101", "#ffa600"]);