github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/tests/unit/components/line-chart-test.js (about)

     1  import { module, test } from 'qunit';
     2  import { setupTest } from 'ember-qunit';
     3  import d3Format from 'd3-format';
     4  
     5  module('Unit | Component | line-chart', function(hooks) {
     6    setupTest(hooks);
     7  
     8    const data = [
     9      { foo: 1, bar: 100 },
    10      { foo: 2, bar: 200 },
    11      { foo: 3, bar: 300 },
    12      { foo: 8, bar: 400 },
    13      { foo: 4, bar: 500 },
    14    ];
    15  
    16    test('x scale domain is the min and max values in data based on the xProp value', function(assert) {
    17      const chart = this.owner.factoryFor('component:line-chart').create();
    18  
    19      chart.setProperties({
    20        xProp: 'foo',
    21        data,
    22      });
    23  
    24      let [xDomainLow, xDomainHigh] = chart.get('xScale').domain();
    25      assert.equal(
    26        xDomainLow,
    27        Math.min(...data.mapBy('foo')),
    28        'Domain lower bound is the lowest foo value'
    29      );
    30      assert.equal(
    31        xDomainHigh,
    32        Math.max(...data.mapBy('foo')),
    33        'Domain upper bound is the highest foo value'
    34      );
    35  
    36      chart.set('data', [...data, { foo: 12, bar: 600 }]);
    37  
    38      [, xDomainHigh] = chart.get('xScale').domain();
    39      assert.equal(xDomainHigh, 12, 'When the data changes, the xScale is recalculated');
    40    });
    41  
    42    test('y scale domain uses the max value in the data based off of yProp, but is always zero-based', function(assert) {
    43      const chart = this.owner.factoryFor('component:line-chart').create();
    44  
    45      chart.setProperties({
    46        yProp: 'bar',
    47        data,
    48      });
    49  
    50      let [yDomainLow, yDomainHigh] = chart.get('yScale').domain();
    51      assert.equal(yDomainLow, 0, 'Domain lower bound is always 0');
    52      assert.equal(
    53        yDomainHigh,
    54        Math.max(...data.mapBy('bar')),
    55        'Domain upper bound is the highest bar value'
    56      );
    57  
    58      chart.set('data', [...data, { foo: 12, bar: 600 }]);
    59  
    60      [, yDomainHigh] = chart.get('yScale').domain();
    61      assert.equal(yDomainHigh, 600, 'When the data changes, the yScale is recalculated');
    62    });
    63  
    64    test('the number of yTicks is always odd (to always have a mid-line) and is based off the chart height', function(assert) {
    65      const chart = this.owner.factoryFor('component:line-chart').create();
    66  
    67      chart.setProperties({
    68        yProp: 'bar',
    69        xAxisOffset: 100,
    70        data,
    71      });
    72  
    73      assert.equal(chart.get('yTicks').length, 3);
    74  
    75      chart.set('xAxisOffset', 240);
    76      assert.equal(chart.get('yTicks').length, 5);
    77  
    78      chart.set('xAxisOffset', 241);
    79      assert.equal(chart.get('yTicks').length, 7);
    80    });
    81  
    82    test('the values for yTicks are rounded to whole numbers', function(assert) {
    83      const chart = this.owner.factoryFor('component:line-chart').create();
    84  
    85      chart.setProperties({
    86        yProp: 'bar',
    87        xAxisOffset: 100,
    88        data,
    89      });
    90  
    91      assert.deepEqual(chart.get('yTicks'), [0, 250, 500]);
    92  
    93      chart.set('xAxisOffset', 240);
    94      assert.deepEqual(chart.get('yTicks'), [0, 125, 250, 375, 500]);
    95  
    96      chart.set('xAxisOffset', 241);
    97      assert.deepEqual(chart.get('yTicks'), [0, 83, 167, 250, 333, 417, 500]);
    98    });
    99  
   100    test('the values for yTicks are fractions when the domain is between 0 and 1', function(assert) {
   101      const chart = this.owner.factoryFor('component:line-chart').create();
   102  
   103      chart.setProperties({
   104        yProp: 'bar',
   105        xAxisOffset: 100,
   106        data: [
   107          { foo: 1, bar: 0.1 },
   108          { foo: 2, bar: 0.2 },
   109          { foo: 3, bar: 0.3 },
   110          { foo: 8, bar: 0.4 },
   111          { foo: 4, bar: 0.5 },
   112        ],
   113      });
   114  
   115      assert.deepEqual(chart.get('yTicks'), [0, 0.25, 0.5]);
   116    });
   117  
   118    test('activeDatumLabel is the xProp value of the activeDatum formatted with xFormat', function(assert) {
   119      const chart = this.owner.factoryFor('component:line-chart').create();
   120  
   121      chart.setProperties({
   122        xProp: 'foo',
   123        yProp: 'bar',
   124        data,
   125        activeDatum: data[1],
   126      });
   127  
   128      assert.equal(
   129        chart.get('activeDatumLabel'),
   130        d3Format.format(',')(data[1].foo),
   131        'activeDatumLabel correctly formats the correct prop of the correct datum'
   132      );
   133    });
   134  
   135    test('activeDatumValue is the yProp value of the activeDatum formatted with yFormat', function(assert) {
   136      const chart = this.owner.factoryFor('component:line-chart').create();
   137  
   138      chart.setProperties({
   139        xProp: 'foo',
   140        yProp: 'bar',
   141        data,
   142        activeDatum: data[1],
   143      });
   144  
   145      assert.equal(
   146        chart.get('activeDatumValue'),
   147        d3Format.format(',.2~r')(data[1].bar),
   148        'activeDatumValue correctly formats the correct prop of the correct datum'
   149      );
   150    });
   151  });