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

68.49% Statements 50/73
79.49% Branches 31/39
53.33% Functions 8/15
30.3% Lines 10/33
9 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 d3 from 'd3';
import nv from 'nvd3';
import $ from 'jquery';
 
import { computeColor } from './utility.js';
import VisComponent from '../../VisComponent';
 
class ErrorBulletWidget extends VisComponent {
  constructor (el, settings) {
    super(el);
 
    this.result = settings.result;
    this.trend = settings.trend;
    if (this.result === undefined) {
      console.error('No result passed to error bullet.');
    }
    if (this.trend === undefined) {
      console.error('No trend passed to error bullet.');
    }
  }
 
  chartData () {
    return {
      ranges: this.trend.incompleteThreshold ? [0, 0, this.trend.max] : [this.trend.warning, this.trend.fail, this.trend.max],
      measures: [Math.round(Math.min(this.result.current, this.trend.max) * 10000) / 10000]
    };
  }
 
  render () {
    nv.addGraph({
      generate: _.bind(function () {
        let chart = nv.models.bulletChart()
          .margin({top: 5, right: 20, bottom: 20, left: 10});
        chart.color(computeColor(this.trend, this.result.current));
        // d3.select('[id=\'' + this.el.id + '-svg\']')
        d3.select(this.el)
          .datum(this.chartData())
          .call(chart);
        chart.bullet.dispatch.on('elementMouseover.tooltip', null);
        chart.bullet.dispatch.on('elementMouseover.tooltip', _.bind(function (evt) {
          evt['series'] = {
            key: 'Current value',
            value: Math.round(this.result.current * 10000) / 10000,
            color: chart.color()
          };
          chart.tooltip.data(evt).hidden(false);
        }, this));
        return chart;
      }, this),
      callback: _.bind(function (graph) {
        nv.utils.windowResize(_.bind(function () {
          let parent = $(this.el.parentNode);
          let width = parent.width();
          let height = parent.height();
          graph.width(width).height(height);
 
          d3.select(this.el)
            .attr('width', width)
            .attr('height', height)
            .transition().duration(0)
            .call(graph);
        }, this));
      }, this)
    });
  }
}
 
export default ErrorBulletWidget;