all files / candela/components/TrackerDash/ StatusBarWidget.js

65.79% Statements 50/76
72.09% Branches 31/43
72.73% Functions 8/11
25.71% Lines 9/35
10 statements, 2 functions, 16 branches Ignored     
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71                                                                                                                              
import _ from 'underscore';
import $ from 'jquery';
import d3 from 'd3';
 
import statusBarWidget from './templates/statusBarWidget.jade';
import VisComponent from '../../VisComponent';
 
class StatusBarWidget extends VisComponent {
  constructor (el, settings) {
    super(el);
    this.$el = $(this.el);
 
    this.numSuccess = settings.numSuccess || 0;
    this.numBad = settings.numBad || 0;
    this.numFail = settings.numFail || 0;
    this.numIncomplete = settings.numIncomplete || 0;
    $(window).on('resize', _.bind(this.createChart, this));
  }
 
  createChart () {
    const total = this.numSuccess + this.numBad + this.numFail + this.numIncomplete;
    if (total <= 0) {
      return;
    }
 
    const svg = d3.select('.status-bar-chart svg');
    svg.html('');
    const curWidth = svg.style('width').slice(0, -2);
    const unitWidth = curWidth / total;
    const badStart = unitWidth * this.numSuccess;
    const failStart = badStart + unitWidth * this.numBad;
    const incompleteStart = failStart + unitWidth * this.numFail;
 
    const successGroup = svg.append('g');
    successGroup.append('rect')
      .attr('x', 0)
      .attr('width', unitWidth * this.numSuccess)
      .attr('height', '100%')
      .attr('class', 'success');
 
    const badGroup = svg.append('g');
    badGroup.append('rect')
      .attr('x', badStart)
      .attr('width', unitWidth * this.numBad)
      .attr('height', '100%')
      .attr('class', 'bad');
 
    const failGroup = svg.append('g');
    failGroup.append('rect')
      .attr('x', failStart)
      .attr('width', unitWidth * this.numFail)
      .attr('height', '100%')
      .attr('class', 'fail');
 
    const incompleteGroup = svg.append('g');
    incompleteGroup.append('rect')
      .attr('x', incompleteStart)
      .attr('width', unitWidth * this.numIncomplete)
      .attr('height', '100%')
      .attr('class', 'incomplete');
  }
 
  render () {
    this.$el.html(statusBarWidget());
    this.createChart();
  }
}
 
export default StatusBarWidget;