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

    1×
    1×

    1×
    1×

    1×

     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;