Add click handling functionality to horizontal bar charts and hover effect for each bar

wherehows-web/app/components/datasets/containers/dataset-health.ts

@@ -30,6 +30,12 @@ export default class DatasetHealthContainer extends Component {
     // Do something in the future
   });
 
+  actions = {
+    onFilterSelect(): void {
+      // Change filter so that table can only show a certain category or severity
+    }
+  };
+
   // Mock data for testing demo purposes, to be deleted once we have actual data and further development
   testSeries = [{ name: 'Test1', value: 10 }, { name: 'Test2', value: 5 }, { name: 'Test3', value: 3 }];
 }

wherehows-web/app/components/datasets/health/metrics-charts.ts

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+export default class DatasetsHealthMetricsCharts extends Component.extend({
+  // anything which *must* be merged to prototype here
+}) {
+  // normal class body definition here
+}

wherehows-web/app/components/visualization/charts/horizontal-bar-chart.ts

@@ -2,6 +2,7 @@ import Component from '@ember/component';
 import { IChartDatum } from 'wherehows-web/typings/app/visualization/charts';
 import { computed, get, set, setProperties } from '@ember/object';
 import ComputedProperty from '@ember/object/computed';
+import { noop } from 'wherehows-web/utils/helpers/functions';
 
 interface IBarSeriesDatum extends IChartDatum {
   yOffset: number;
@@ -155,13 +156,22 @@ export default class HorizontalBarChart extends Component {
     };
   }
 
+  /**
+   * Expected to be optionally passed in from the containing component, this function handles the action to
+   * be taken if a user selects an individual bar from the chart.
+   * @param {string} name - the "category" or "tag" that goes with each legend label
+   * @param {number} value - the value associated with each series datum
+   */
+  onBarSelect: (name: string, value: number) => void;
+
   constructor() {
     super(...arguments);
     // Applying passed in properties or setting to default values
     setProperties(this, {
       labelTagProperty: this.labelTagProperty || 'name',
       labelAppendTag: this.labelAppendTag || '',
-      labelAppendValue: this.labelAppendValue || ''
+      labelAppendValue: this.labelAppendValue || '',
+      onBarSelect: this.onBarSelect || noop
     });
   }
 

wherehows-web/app/styles/components/visualization/charts/_bar-chart.scss

@@ -22,4 +22,12 @@
     font-size: 15px;
     margin-bottom: 16px;
   }
+
+  &__bar {
+    &:hover {
+      cursor: pointer;
+      transform: scale(1.02, 1);
+      height: 18px;
+    }
+  }
 }

wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs

@@ -1,7 +1,9 @@
-Coming Soon!
+<h3>Metadata Health</h3>
+
 <div style="width: 50%">
   {{visualization/charts/horizontal-bar-chart
-    title="Test Chart"
+    title="test Chart"
     series=testSeries
-    labelAppendValue="%"}}
+    labelAppendValue="%"
+    onBarSelect=(action "onFilterSelect")}}
 </div>

wherehows-web/app/templates/components/datasets/health/metrics-charts.hbs

@@ -0,0 +1 @@
+{{yield}}

wherehows-web/app/templates/components/visualization/charts/horizontal-bar-chart.hbs

@@ -3,7 +3,9 @@
   <g class="highcharts-series-group">
     <g class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-tracker highcharts-series-hover">
       {{#each seriesData as |datum index|}}
-      <rect x="0" y="{{datum.yOffset}}" height="16" width="{{datum.barLength}}" class="highcharts-color-{{index}}" rx="2px" ry="2px"></rect>
+        <rect x="0" y="{{datum.yOffset}}" height="16" width="{{datum.barLength}}" class="highcharts-color-{{index}} viz-bar-chart__bar" rx="2px" ry="2px"
+         {{action onBarSelect (get datum labelTagProperty) datum.value}}>
+        </rect>
       {{/each}}
     </g>
     <g class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker">

wherehows-web/tests/integration/components/datasets/health/metrics-charts-test.ts

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | datasets/health/metrics-charts', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{datasets/health/metrics-charts}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#datasets/health/metrics-charts}}
+        template block text
+      {{/datasets/health/metrics-charts}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});