Horizontal Bar Gauge / 余俊男

余俊男

Workspace

Published

Edited

Jan 15, 2020

Fork of Bar Gauge

md`# Horizontal Bar Gauge`

config = {

return [

{id:"gauge8" , xtype:"hbargauge", x:50, y:30, width:500, repaint:1},

];

}

data = {

return [

{id:"gauge1" , value:value},

{id:"gauge2" , value:24+value},

{id:"gauge3" , value:2*value},

{id:"gauge4" , value:2*value},

{id:"gauge5" , value:0+value},

{id:"gauge6" , value:60-value},

{id:"gauge7" , value:2*value},

{id:"gauge8" , value:[value,value2]},

];

}

joined_data = {

let jdata = config.leftJoinWith( data , "id" ) ;

vzPanel.updateAll( jdata );

return jdata ;

}

shapeStore ={

let xtype = {}

xtype.hbargauge = bargauge();

return xtype

}

bargauge = conf => {

const gauge = {};

const _f0 = d3.format(".0f");

const _f1 = d3.format(".1f");

const _f2 = d3.format(".2f");

//default config

const _config = conf ? conf: {x:0, y:0, min:0, max:100, width: 300, height:50, value:[20,50] ,

textX:0, textY:-10, textFill:"#FFF",

direction:"h", //or h

axisFill:"#FFF", axisStroke:"#CCC", axisSide:"Bottom", axisX:0, axisY:50,

leftFill:"#2d91c9", leftTextFill:"#FFF", leftTextX:20, leftTextY:20,

rightFill:"#73a55b", rightTextFill:"#FFF", rightTextX:20, rightTextY:20,

} ;

gauge.updateShape = function(node,config){

d3.select(node).selectAll("*").remove();

this.render(node,config) ;

};

gauge.updateValue = function(node,v){

node.value = v;

let config = node.config;

let g = d3.select(node);

node.bgconf[1].width = node.scale( v[0] ) ;

g.selectAll("rect")

.attr("x",function(d){return d.x; })

.attr("width",function(d){return d.width; });

//update text

var value_l = _f2(node.value[0]),

value_r = _f2(node.value[1]),

value_t = _f2(node.value[0]+node.value[1]) ;

var p_l = _f0(node.value[0]/(node.value[0]+node.value[1])*100),

p_r = _f0(node.value[1]/(node.value[0]+node.value[1])*100);

node.texts = [

{id:"lText", value: value_l, size:14, fill:"#FFF", x:50, y:20, anchor:"end", format:".2f"},

{id:"luText", value:"KWH", size:8, fill:"#FFF", x:55, y:20, anchor:"start", format:""},

{id:"rText", value: value_r, size:14, fill:"#FFF", x:config.width-30, y:20, anchor:"end", format:".2f"},

{id:"ruText", value:"KWH", size:8, fill:"#FFF", x:config.width-25, y:20, anchor:"start", format:""},

{id:"lpText", value:p_l, size:18, fill:"#FFF", x:50, y:40, anchor:"end", format:""},

{id:"lpuText", value:"%", size:14, fill:"#FFF", x:55, y:40, anchor:"start", format:""},

{id:"rpText", value:p_r, size:18, fill:"#FFF", x:config.width-30, y:40, anchor:"end", format:""},

{id:"rpuText", value:"%", size:14, fill:"#FFF", x:config.width-25, y:40, anchor:"start", format:""},

{id:"bText", value: value_t, unit:"KWH", size:14, fill:"#FFF", x:50, y:70, anchor:"end", format:".2f"},

{id:"buText", value:"KWH", size:8, fill:"#FFF", x:55, y:70, anchor:"start", format:""},

]

g.selectAll("text")

.attr("class","tempText unselectable")

.text(d=>d.value);

};

gauge.render = function(node,config){

//merge default config

config = Object.assign({},_config,config); //clone default config and merge user's config

node.scale = d3.scaleLinear().domain([0, d3.sum(config.value)]).range([0,config.width]);

node.scale.clamp(true) ;

node.scale2 = d3.scaleLinear().domain([0, 100]).range([0,config.width]);

node.scale2.clamp(true) ;

let bgconf = [

{id: "rRect", width: config.width, height: config.height, x:0 , y: 0, fill:config.rightFill },

{id: "lRect", width: node.scale( config.value[0] ) , height: config.height, x:0 , y: 0, fill:config.leftFill },

{id: "bRect", width: config.width, height: 20, x:0 , y: 56, fill:"#b4a148" },

];

node.bgconf = bgconf;

node.config = config;

let g=d3.select(node)

.attr("transform","translate("+[config.x,config.y]+")") ;

g.selectAll("rect")

.data(bgconf,function(d){return d.id;})

.enter().append("rect")

.attr("x",function(d){return d.x; })

.attr("y",function(d){return d.y; })

.attr("height",function(d){return d.height; })

.attr("width",function(d){return d.width; })

.attr("stroke-width",function(d){return 1})

.attr("stroke",function(d){return "#FFF";})

.attr("fill",function(d){return d.fill;});

g.append('g')

.attr("class","axisY")

.attr("transform","translate(" + [config.axisX,config.axisY] + ")")

.call(d3["axis"+config.axisSide]( node.scale2 ));

g.selectAll(".axisY text").attr("fill","#FFF0");

g.selectAll(".axisY line")

.attr("y1",2)

.attr("y2",3)

.attr("stroke",config.axisStroke);

node.value = config.value;