class openDisplayLarge {

    constructor(div_id, level, label, unit) {
        this.div_id = div_id;
        this.level = level;
        this.label = label;
        this.unit = unit;

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

        //Size
        console.log(this);
        this.width = this.svg.node().getBoundingClientRect().width;
        this.height = this.svg.node().getBoundingClientRect().height;
        this.size_limit = Math.min(this.width, this.height);

        //groups
        this.groups = [];
        this.groups[0] = this.svg.append("g")
        .attr("transform","translate(" + this.width/2 + ", " + 0 + ")");
        this.groups[1] = this.svg.append("g")
        .attr("transform","translate(" + 0 + ", " + 0 + ")");
        this.groups[2] = this.svg.append("g")
        .attr("transform","translate(" + this.width*0.8 + ", " + 0 + ")");

        this.buildObject();
    };
  
    buildObject() {
        this.buildTextValue(this.level);
        this.buildTextLabel(this.level);
        this.buildTextUnit(this.level);
    };
  
    buildTextValue(level) {
        this.groups[0].selectAll("text")
        .data([0])
        .text(this.level)
        .enter()
            .append("text")
            .text(this.level)
            .attr("x", 0)
            .attr("y", this.height*0.55 + this.height*0.2)
            .attr("width", this.width)
            //.attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.85 + "px")
            .attr("text-anchor", "middle")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };
  
    buildTextLabel(level) {
        this.groups[1].selectAll("text")
        .data([0])
        .text(this.label)
        .enter()
            .append("text")
            .text(this.label)
            .attr("x", "5px")
            .attr("y", this.height*0.14)
            //.attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.15 + "px")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };
  
    buildTextUnit(level) {
        this.groups[2].selectAll("text")
        .data([0])
        .text(this.unit)
        .enter()
            .append("text")
            .text(this.unit)
            .attr("x", 0)
            .attr("y", this.height*0.88)
            //.attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.15 + "px")
            .attr("text-anchor", "middle")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };

    updateLevel(new_level) {
        if (this.level != new_level) {
            this.level = new_level;
            this.buildObject();
        }
    };
}
  
//Usage
var deviceValues = [];
deviceValues[0] = new openDisplayLarge("device-1-app-rate", 100, "APP RATE", "kg/hec");
deviceValues[1] = new openDisplayLarge("device-2-app-rate", 120, "APP RATE", "kg/hec");
deviceValues[2] = new openDisplayLarge("device-3-app-rate", 250, "APP RATE", "kg/hec");
deviceValues[3] = new openDisplayLarge("device-4-app-rate", 399, "APP RATE", "kg/hec");
deviceValues[4] = new openDisplayLarge("device-5-app-rate", 100, "APP RATE", "kg/hec");
deviceValues[5] = new openDisplayLarge("device-6-app-rate", 120, "APP RATE", "kg/hec");
deviceValues[6] = new openDisplayLarge("device-7-app-rate", 250, "APP RATE", "kg/hec");
deviceValues[7] = new openDisplayLarge("device-8-app-rate", 399, "APP RATE", "kg/hec");
deviceValues[8] = new openDisplayLarge("device-9-app-rate", 100, "APP RATE", "kg/hec");
deviceValues[9] = new openDisplayLarge("device-10-app-rate", 120, "APP RATE", "kg/hec");
deviceValues[10] = new openDisplayLarge("device-11-app-rate", 250, "APP RATE", "kg/hec");
deviceValues[11] = new openDisplayLarge("device-12-app-rate", 399, "APP RATE", "kg/hec");
deviceValues[12] = new openDisplayLarge("device-13-app-rate", 100, "APP RATE", "kg/hec");
deviceValues[13] = new openDisplayLarge("device-14-app-rate", 120, "APP RATE", "kg/hec");
deviceValues[14] = new openDisplayLarge("device-15-app-rate", 250, "APP RATE", "kg/hec");
deviceValues[15] = new openDisplayLarge("device-16-app-rate", 399, "APP RATE", "kg/hec");
deviceValues[16] = new openDisplayLarge("device-17-app-rate", 12, "SPEED", "km/h");
deviceValues[17] = new openDisplayLarge("device-18-app-rate", 120, "RPM", "Hz");



