UI/bar chart updates

changelog/12622.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: update bar chart when model changes
+```

ui/lib/core/addon/components/bar-chart.js

@@ -64,10 +64,6 @@ class BarChartComponent extends Component {
     return this.args.mapLegend;
   }
 
-  get dataset() {
-    return this.args.dataset || null;
-  }
-
   hasLegend() {
     if (!this.args.mapLegend || !Array.isArray(this.args.mapLegend)) {
       return false;
@@ -78,12 +74,12 @@ class BarChartComponent extends Component {
   }
 
   @action
-  renderBarChart(element) {
+  renderBarChart(element, data) {
     let elementId = guidFor(element);
-    let totalCount = this.dataset.reduce((prevValue, currValue) => prevValue + currValue.total, 0);
+    let [dataset] = data;
+    let totalCount = dataset.reduce((prevValue, currValue) => prevValue + currValue.total, 0);
     let handleClick = this.args.onClick;
     let labelKey = this.labelKey;
-    let dataset = this.dataset;
     let stackFunction = stack().keys(this.mapLegend.map(l => l.key));
     // creates an array of data for each map legend key
     // each array contains coordinates for each data bar
@@ -117,6 +113,8 @@ class BarChartComponent extends Component {
     // creates group for each array of stackedData
     let groups = chartSvg
       .selectAll('g')
+      .remove()
+      .exit()
       .data(stackedData)
       .enter()
       .append('g')
@@ -136,7 +134,8 @@ class BarChartComponent extends Component {
 
     let rects = groups
       .selectAll('rect')
-      .data(d => d)
+      // iterate through the stacked data and chart respectively
+      .data(stackedData => stackedData)
       .enter()
       .append('rect')
       .attr('class', 'data-bar')
@@ -214,8 +213,8 @@ class BarChartComponent extends Component {
         select('.chart-tooltip')
           .style('opacity', 1)
           .style('max-width', '200px')
-          .style('left', `${event.pageX - 95}px`)
-          .style('top', `${event.pageY - 155}px`)
+          .style('left', `${event.pageX - 400}px`)
+          .style('top', `${event.pageY - 150}px`)
           .text(
             `${Math.round((chartData.total * 100) / totalCount)}% of total client counts:
             ${chartData.non_entity_tokens} non-entity tokens, ${chartData.distinct_entities} unique entities.
@@ -301,7 +300,7 @@ class BarChartComponent extends Component {
     // removes axes lines
     groups.selectAll('.domain, .tick line').remove();
 
-    // TODO: make more flexible, make legend a div instead of svg?
+    // TODO: if mapLegend has more than 4 keys, yCoord will need to change. currently map keys are centered in the legend SVG
     // each map key symbol & label takes up 20% of legend SVG width
     let startingXCoordinate = 100 - this.mapLegend.length * 20; // subtract from 100% to find starting x-coordinate
     let legendSvg = select('.legend');

ui/lib/core/addon/templates/components/bar-chart.hbs

@@ -1,4 +1,4 @@
-<div class="bar-chart-wrapper">
+<div data-test-bar-chart class="bar-chart-wrapper">
     <div class="chart-header">
       <div class="header-left">
         <h2 class="chart-title">{{@title}}</h2>
@@ -7,18 +7,21 @@
         {{/if}}
       </div> 
       <div class="header-right">
-      {{#if this.dataset}}
+      {{#if @dataset}}
         {{yield}}
       {{/if}}
       </div>
     </div>
-  {{#unless this.dataset}}
+  {{#unless @dataset}}
   <div class="toolbar"></div>
     <EmptyState @title="No namespace data" @message="There is no data to display for namespaces."/>
   {{else}}
     <div class="is-border"></div>
     <div class="bar-chart-container">
-      <svg {{did-insert this.renderBarChart}} class="bar-chart"></svg>
+      <svg 
+        {{did-insert this.renderBarChart @dataset}} 
+        {{did-update this.renderBarChart @dataset}} 
+        class="bar-chart"></svg>
     </div>
     <div class="is-border"></div>
     <div class="legend-container">

ui/tests/integration/components/bar-chart-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { findAll, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | bar-chart', function(hooks) {
@@ -75,7 +75,11 @@ module('Integration | Component | bar-chart', function(hooks) {
           </button>
       </BarChart>
     `);
-
-    assert.dom('.bar-chart-wrapper').exists('it renders');
+    assert.dom('[data-test-bar-chart]').exists('bar chart renders');
+    assert.dom('[data-test-bar-chart] .chart-title').hasText('Top Namespaces', 'displays title');
+    assert
+      .dom('[data-test-bar-chart] .chart-description')
+      .hasText('Each namespaces client count includes clients in child namespaces.', 'displays description');
+    assert.equal(findAll('.data-bar').length, 8, 'bars render');
   });
 });