class blockDisplayValue {

    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","100%");

        //Size
        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");
        this.groups[1] = this.svg.append("g");
        this.groups[2] = this.svg.append("g")
        .attr("transform","translate(" + this.width/2 + ", " + 0 + ")");
        this.groups[3] = this.svg.append("g")
        .attr("transform","translate(" + this.width/2 + ", " + 0 + ")");
        this.groups[4] = this.svg.append("g")
        .attr("transform","translate(" + this.width/2 + ", " + 0 + ")");

        this.buildObject();
    };
  
    buildObject() {
        this.buildBorder(this.level);
        this.buildBlockSignal(this.level);
        this.buildTextValue(this.level);
        this.buildTextLabel(this.level);
        this.buildTextUnit(this.level);
    };
  
    buildBorder(level) {
        this.groups[0].selectAll("rect")
        .data([0])
        .enter()
            .append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", this.width)
            .attr("height", this.height)
            .attr("stroke", "#888b")
            .attr("fill", "#0000");
    };
  
    buildBlockSignal(level) {
        this.groups[1].selectAll("rect")
        .data([0])
        .enter()
            .append("rect")
            .attr("x", this.width*0.25)
            .attr("y", this.height*0.95)
            .attr("width", this.width*0.5)
            .attr("height", this.height*0.1)
            .attr("fill", "#fffa");
    };
  
    buildTextValue(level) {
        this.groups[2].selectAll("text")
        .data([0])
        .text(this.level)
        .enter()
            .append("text")
            .text(this.level)
            .attr("x", 0)
            .attr("y", this.height*0.42 + this.height*0.2)
            .attr("width", this.width)
            //.attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.30 + "px")
            .attr("text-anchor", "middle")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };
  
    buildTextLabel(level) {
        this.groups[3].selectAll("text")
        .data([0])
        .text(this.label)
        .enter()
            .append("text")
            .text(this.label)
            .attr("x", 0)
            .attr("y", this.height*0.30)
            //.attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.25 + "px")
            .attr("text-anchor", "middle")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };
  
    buildTextUnit(level) {
        this.groups[4].selectAll("text")
        .data([0])
        .text(this.unit)
        .enter()
            .append("text")
            .text(this.unit)
            .attr("x", 0)
            .attr("y", this.height*0.85)
            //.attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.25 + "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 counterValues = [];
/*counterValues[0] = new blockDisplayValue("counter-grand-distance", 1000.00, "Distance", "km");
counterValues[1] = new blockDisplayValue("counter-grand-volume", 2400.12, "Volume", "L");
counterValues[2] = new blockDisplayValue("counter-grand-area", 4100.00, "Area", "hec");
counterValues[3] = new blockDisplayValue("counter-grand-time", 2.36, "Time", "h");
counterValues[4] = new blockDisplayValue("counter-daily-distance", 125.00, "Distance", "km");
counterValues[5] = new blockDisplayValue("counter-daily-volume", 1444.05, "Volume", "L");
counterValues[6] = new blockDisplayValue("counter-daily-area", 123.05, "Area", "hec");
counterValues[7] = new blockDisplayValue("counter-daily-time", 11.00, "Time", "h");*/



