return [

{id:"gauge1" , xtype:"bargauge", x:70, y:60, min:0, max:50},

{id:"gauge2" , xtype:"bargauge", x:170, y:60, min:0, max:80, width:20, height:140, ftFill:"#7c9f41", axisFill:"#475b66", axisStroke:"none", repaint:0},

{id:"gauge3" , xtype:"bargauge", x:270, y:60, min:30, max:70, ftWidth:7, ftHeight:124 , ftX:4, ftRx:8, ftRy:4, bgWidth:15, bgHeight:130, bgRx:10, bgRy:6, bgY:-3, repaint:0},

{id:"gauge4" , xtype:"bargauge", x:370, y:60, min:0, max:100, ftWidth:7, ftHeight:94 , ftX:4, ftRx:8, ftRy:4, bgWidth:15, bgRx:10, bgRy:6, bgY:-3, bgFill:"none", bgStroke:"#7c9f41", bgStrokeWidth:2, repaint:0},

{id:"gauge5" , xtype:"bargauge", x:470, y:30, min:0, max:50, height:150, bgWidth:4, bgFill:"#222b32", ftWidth:5, ftFill:"#019abf", textFill:"none", axisFill:"#aaa", repaint:0},

{id:"gauge6" , xtype:"bargauge", x:500, y:30, min:0, max:50, height:150, bgWidth:4, bgFill:"#222b32", ftWidth:5, ftFill:"#019abf", textFill:"none", axisFill:"0", axisStroke:"0", repaint:0},

{id:"gauge7" , xtype:"bargauge", x:530, y:30, min:0, max:50, height:150, bgWidth:4, bgFill:"#222b32", ftWidth:5, ftFill:"#019abf", textFill:"none", axisFill:"0", axisStroke:"0", repaint:0},

{id:"gauge8" , xtype:"bargauge", x:580, y:30, min:0, max:50, height:30, bgWidth:200, bgFill:"#222b32", ftWidth:200, ftFill:"#019abf", textFill:"#FFF", textY:20, axisSide:"Top", axisY:-2, direction:"h", repaint:1},

];

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},

];

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

vzPanel.updateAll( jdata );

return jdata ;

let xtype = {}

xtype.bargauge = bargauge();

return xtype

const gauge = {};

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

//default config

const _config = conf ? conf: {x:0, y:0, min:0, max:100, width: 30, height:100, value:0,

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

direction:"v", //or h

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

bgX:0, bgY:0, bgWidth:0, bgHeight:0, bgRx:0, bgRy:0, bgFill:"#475b66", bgStroke:0, bgStrokeWidth:0,

ftX:0, ftY:0, ftWidth:0, ftHeight:0, ftRx:0, ftRy:0, ftFill:"#ff9633", ftStroke:0, ftStrokeWidth:0 } ;

const dir = { "v":["ftHeight","height","y"], "h":["ftWidth","width","x"] } ;

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)

g.select("text.tempText").text(function(d){return _f1(d.value);});

let bgconf = [Object.assign({},node.bgconf[0]),Object.assign({},node.bgconf[1])];

var p1=dir[config.direction][1], p2=dir[config.direction][2];

bgconf[1][p1] = config.direction=="v" ? bgconf[1][p1] - node.scale(v) : node.scale(v) ; //height , width

bgconf[1][p2] = config.direction=="v" ? node.scale(v):0 ; //y, x

g.selectAll("rect").data(bgconf,function(d){return d.id;})

.attr(p1,function(d){return d[p1]; })

.attr(p2,function(d){return d[p2]; });

};

gauge.render = function(node,config){

//merge default config

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

config.bgHeight = config.bgHeight ? config.bgHeight : config.height ;

config.ftHeight = config.ftHeight ? config.ftHeight : config.height ;

config.bgWidth = config.bgWidth ? config.bgWidth : config.width ;

config.ftWidth = config.ftWidth ? config.ftWidth : config.width ;

let bgconf = [

{id: "bg", x:config.bgX, y:config.bgY, width:config.bgWidth, height:config.bgHeight, rx:config.bgRx, ry:config.bgRy, fill:config.bgFill, stroke:config.bgStroke, strokeWidth:config.bgStrokeWidth},

{id: "ft", x:config.ftX, y:config.ftY, width:config.ftWidth, height:config.ftHeight, rx:config.ftRx, ry:config.ftRy, fill:config.ftFill, stroke:config.ftStroke, strokeWidth:config.ftStrokeWidth}

];

node.bgconf = bgconf;

node.config = config;

let r1 = config.direction=="v" ? config[dir[config.direction][0]] : 0,

r2 = config.direction=="v" ? 0 : config[dir[config.direction][0]] ;

node.scale = d3.scaleLinear().domain([config.min, config.max]).range([r1,r2]);

node.scale.clamp(true) ;

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("rx",function(d){return d.rx; })

.attr("ry",function(d){return d.ry })

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

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

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

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

.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.scale ));

g.selectAll(".axisY text").attr("fill",config.axisFill);

g.selectAll(".axisY line").attr("stroke",config.axisStroke);

g.append("text")

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

.attr("fill",config.textFill)

.attr("x",config.textX)

.attr("y",config.textY)

.text(_f1(config.value));

this.updateValue(node,config.value);

}

return gauge ;

}