D3 Gauge

by amindunited

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<h3>
  Taken from
</h3>
<a href="http://tomerdoron.blogspot.com/2011/12/google-style-gauges-using-d3js.html">Blog</a>
<a href="https://gist.github.com/tomerd/1499279">Gist</a>
<a href="http://bl.ocks.org/tomerd/1499279">Demo</a>
<speed-gauge name="Gauge One" label="Gauge One" min="0" max="100"></speed-gauge>
<speed-gauge name="Gauge One" label="Gauge One" min="0" max="100"></speed-gauge>
<speed-gauge name="Gauge One" label="Gauge One" min="0" max="100"></speed-gauge>

CSS

speed-gauge {
  display: inline-block;
}

JavaScript

class SpeedGauge extends HTMLElement {
	constructor (props) {
  	super(props);
    console.log('loaded');
    const size = (120 * 0.9); 
    this.config = {
    	size: size,
      raduis: size * 0.97 / 2,
      cx: size / 2,
      cy: size / 2
    }
    let range = this.config.max - this.config.min;
      this.config.yellowZones = [{ from: this.config.min + range*0.75, to: this.config.min + range*0.9 }];
      this.config.redZones = [{ from: this.config.min + range*0.9, to: this.config.max }];
      
    this.config.greenColor 	= this.config.greenColor || "#109618";
		this.config.yellowColor = this.config.yellowColor || "#FF9900";
		this.config.redColor 	= this.config.redColor || "#DC3912";
  }
  
  connectedCallback () {
  	this.render();
  }
  
  render () {
  	const body = d3.select(this);
    this.body = body;
    console.log('body', body);
		this.svg = body.append("svg:svg")
      .attr("class", "gauge")
      .attr("width", this.config.size)
      .attr("height", this.config.size)
      .attr("fill", "pink");
    this.svg.append("svg:circle")
      .attr("cx", this.config.cx)
      .attr("cy", this.config.cy)
      .attr("r", this.config.raduis)
      .style("fill", "#ccc")
      .style("stroke", "#000")
      .style("stroke-width", "0.5px");
    this.svg.append("svg:circle")
      .attr("cx", this.config.cx)
      .attr("cy", this.config.cy)
      .attr("r", 0.9 * this.config.raduis)
      .style("fill", "#fff")
      .style("stroke", "#e0e0e0")
      .style("stroke-width", "2px");
      
      for (var index in this.config.greenZones)
      {
        this.drawBand(this.config.greenZones[index].from, this.config.greenZones[index].to, this.config.greenColor);
      }

      for (var index in this.config.yellowZones)
      {
        this.drawBand(this.config.yellowZones[index].from, this.config.yellowZones[index].to, this.config.yellowColor);
      }

      for (var index in this.config.redZones)
      {
       ...