# 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
    711×
    1×
    1×
    1×

    1×
    1×

    1×
    1×

    1×

     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;