var width = 200, height = 200;

var svg = d3.select("svg.demo");

/*

var g = svg.selectAll("circle.gradient")

.data([{id:"c1",cx:100,cy:100,r:100,fill:"url(#grad1)"},{id:"c1_1",cx:100,cy:100,r:80,fill:"#000"},{id:"c2",cx:400,cy:200,r:100,fill:"url(#grad1)"}],d=>d.id)

.enter()

.append("circle")

.attr("class","gradient");

svg.selectAll("circle.gradient")

.attr("cx",d=>d.cx)

.attr("cy",d=>d.cy)

.attr("r",d=>d.r)

.attr("fill",d=>d.fill);

return [

{id:"gauge1" , xtype:"arcgauge2", x:10, y:60, min:0, max:90, title:"Tempture", repaint:1},

];

let xtype = {}

xtype.arcgauge2 = arcgauge();

return xtype

const gauge = {};

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

const default_config = {

min:0,

max:100,

bgRadius:34,

bgArcWidth:3,

bgColor:"rgba(112, 193, 224, 1)",

ftRadius:37,

ftArcWidth:4,

ftColor:"rgba(93, 155, 236, 1)",

startAngle:-0.78,

endAngle:0.78,

cornerRadius:0,

title:"Tempture",

width:100,

height:100,

valueX:0,

valueY:20,

valueSize:28,

x:0,

y:0}; //default config

const _config = conf ? conf : default_config;

gauge.updateShape = function(node,config){

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

this.render(node,config) ;

};

gauge.updateValue = function(node,v){

node.value = v;

let g = d3.select(node)

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

node.bgconf[0].startAngle = -(node.scale(v)+0.78)/2;

node.bgconf[0].endAngle = +(node.scale(v)+0.78)/2;

node.bgconf[1].startAngle = -(node.scale(v)+0.78)/2;

node.bgconf[1].endAngle = +(node.scale(v)+0.78)/2;

node.bgconf[2].startAngle = -(node.scale(v)+0.78)/2;

node.bgconf[2].endAngle = +(node.scale(v)+0.78)/2;

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

.attr("d",function(d){

return d3.arc().innerRadius(d.innerR).outerRadius(d.outerR).cornerRadius(d.cornerRadius)

.startAngle(d.startAngle).endAngle(d.endAngle)();

});

};

gauge.render = function(node,config){

config = Object.assign({},_config,config);

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

node.scale.clamp(true) ;

node.bgconf = [

{id: "ft2", innerR: config.ftRadius/2, outerR: config.ftRadius+config.ftArcWidth, startAngle: config.startAngle, endAngle: config.endAngle, color: "rgba(44,56,72,0.9)", cornerRadius:config.cornerRadius },

{id: "bg", innerR: config.bgRadius, outerR: config.bgRadius+config.bgArcWidth, startAngle: config.startAngle, endAngle: config.endAngle, color: config.bgColor, cornerRadius:config.cornerRadius },

{id: "ft", innerR: config.ftRadius, outerR: config.ftRadius+config.ftArcWidth, startAngle: config.startAngle, endAngle: config.endAngle, color: config.ftColor, cornerRadius:config.cornerRadius }

];

let g=d3.select(node)

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

//draw background and title

g.append("rect")

//.attr("style", "cursor:move; opacity:0.7; fill: #FF9000")

.attr("fill","none")

.attr("stroke-width",0.3)

.attr("stroke","#fcfcfc")

.attr("width", config.width)

.attr("height", config.height)

;

var corner1_width=2 , corner1_height=2;

g.selectAll("rect.corner1")

.data([[0,0],[config.width,0],[config.width,config.height],[0,config.height]])

.enter()

.append("rect")

.attr("class","corner1")

.attr("fill","#fcfcfc")

.attr("width", corner1_width)

.attr("height", corner1_height)

.attr("x",d=>d[0]-corner1_width/2)

.attr("y",d=>d[1]-corner1_height/2)

var corner2_width=4, corner2_height=4, inner_offsetX=10, inner_offsetY=10;

g.selectAll("rect.corner2")

.data([[0+inner_offsetX,0+inner_offsetY],[config.width-inner_offsetY,0+inner_offsetY],[config.width-inner_offsetX,config.height-inner_offsetY],[0+inner_offsetX,config.height-inner_offsetY]])

.enter()

.append("rect")

.attr("class","corner2")

.attr("fill","#454545")

.attr("width", corner2_width)

.attr("height", corner2_height)

.attr("x",d=>d[0]-corner2_width/2)

.attr("y",d=>d[1]-corner2_height/2)

var tilte_offsetX=5, tilte_offsetY=-14;

var title_width=config.width-tilte_offsetX*2 ,title_height=12;

g.selectAll("rect.title")

.data([[tilte_offsetX,title_width,"#fcfcfc"],[tilte_offsetX+1,title_width-2,"#434343"]])

.enter()

.append("rect")

.attr("class","title")

.attr("fill",d=>d[2])

.attr("width",d=>d[1])

.attr("height",title_height)

.attr("x",d=>d[0])

.attr("y",tilte_offsetY)

;

var bg_circle_color = config.bgColor ? config.bgColor : "rgba(32,32,32,0.8)" ;

//bgRadius, bgArcWidth

g.selectAll("circle")

.data([

{r:config.bgRadius, stroke:"#FFFFFF", "stroke-width":1, fill:"rgba(67, 73, 83, 1)"},

{r:config.bgRadius-4, stroke:"#fafafa", "stroke-width":0.5, fill:"rgba(32,32,32,0.8)"},

{r:config.bgRadius-7, stroke:"#808080", "stroke-width":0.2, fill:"rgba(32,32,32,0.8)"}

])

.enter()

.append("circle")

.attr("class","bgCircle")

.attr("cx",config.width/2)

.attr("cy",config.height/2)

.attr("r",d=>d.r)

.attr("stroke",d=>d.stroke)

.attr("stroke-width",d=>d["stroke-width"])

.attr("fill",d=>d.fill)

;

//draw arc

node.bgconf[1].endAngle = node.scale(config.value);

g.append("g")

.attr("transform","translate("+[config.width/2,config.height/2]+")")

.selectAll("path")

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

.enter().append("path")

.attr("d",function(d){

return d3.arc().innerRadius(d.innerR).outerRadius(d.outerR).cornerRadius(d.cornerRadius)

.startAngle(d.startAngle).endAngle(d.endAngle)();

})

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

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

;

//draw text

g.append("text")

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

.attr("fill","#FFF")

.attr("text-anchor","middle")

.attr("font-size",config.valueSize)

.attr("x",config.width/2 + config.valueX)

.attr("y",config.height/2 + config.valueY)

.text(_f1(config.value));

var title_font_size = 10;

g.append("text")

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

.attr("text-anchor","middle")

.attr("fill","#FFF")

.attr("font-size",title_font_size)

.attr("x",tilte_offsetX + title_width/2)

.attr("y",tilte_offsetY + title_font_size-1)

.text(config.title);

}

return gauge ;

}