Create a summary health metrics container and render mock data for graphs

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

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { get } from '@ember/object';
+import { get, set } from '@ember/object';
 import { task, TaskInstance } from 'ember-concurrency';
 
 /**
@@ -14,6 +14,23 @@ export default class DatasetHealthContainer extends Component {
    */
   urn: string;
 
+  /**
+   * Sets the classes for the rendered html element for the component
+   * @type {Array<string>}
+   */
+  classNames = ['dataset-health'];
+  /**
+   * The current filter is used to set a filter for the table to show only items within a certain category or
+   * severity. It is set as a set of strings in order to support the idea of multiple filters in the future,
+   * even though our initial version will support only one filter at a time.
+   * @type {Array<string>}
+   */
+  currentFilters: Set<string>;
+  constructor() {
+    super(...arguments);
+    set(this, 'currentFilters', new Set());
+  }
+
   didInsertElement() {
     get(this, 'getContainerDataTask').perform();
   }
@@ -31,11 +48,20 @@ export default class DatasetHealthContainer extends Component {
   });
 
   actions = {
-    onFilterSelect(): void {
+    /*
-      // Change filter so that table can only show a certain category or severity
+     * Triggered when the user clicks on one of the bars in the summary charts child component, will trigger
+     * a filter for whatever bar they select, unless it already is one in which case we will remove the filter
+     * @param this - Explicit this declaration for typescript
+     * @param filterName - Passed in to the action by the child component, contains the tag to be filtered for
+     */
+    onFilterSelect(this: DatasetHealthContainer, filterName: string): void {
+      const currentFilters = get(this, 'currentFilters');
+      currentFilters.has(filterName) ? currentFilters.delete(filterName) : currentFilters.add(filterName);
     }
   };
 
   // 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 }];
+  fakeCategories = [{ name: 'Compliance', value: 60 }, { name: 'Ownership', value: 40 }];
+  fakeSeverity = [{ name: 'Minor', value: 50 }, { name: 'Warning', value: 30 }, { name: 'Critical', value: 25 }];
 }

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

@@ -1,7 +1,9 @@
 import Component from '@ember/component';
 
-export default class DatasetsHealthMetricsCharts extends Component.extend({
+export default class DatasetsHealthMetricsCharts extends Component {
-  // anything which *must* be merged to prototype here
+  /**
-}) {
+   * Sets the classes for the rendered html element for the compoennt
-  // normal class body definition here
+   * @type {Array<string>}
+   */
+  classNames = ['dataset-health__metrics-charts'];
 }

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

@@ -35,7 +35,7 @@ export default class HorizontalBarChart extends Component {
    * Sets the classes for the rendered html element for the component
    * @type {Array<string>}
    */
-  classNames = ['vz-chart', 'viz-bar-chart', 'single-series'];
+  classNames = ['viz-chart', 'viz-bar-chart', 'single-series'];
 
   /**
    * Represents the series of data needed to power our chart. Format is

wherehows-web/app/styles/components/_all.scss

@@ -26,6 +26,7 @@
 @import 'dataset-fabric/all';
 @import 'dataset-relationships/all';
 @import 'visualization/all';
+@import 'dataset-health/all';
 
 @import 'nacho/nacho-button';
 @import 'nacho/nacho-global-search';

wherehows-web/app/styles/components/dataset-health/_all.scss

@@ -0,0 +1 @@
+@import 'metrics-charts';

wherehows-web/app/styles/components/dataset-health/_metrics-charts.scss

@@ -0,0 +1,11 @@
+.dataset-health {
+  &__metrics-charts {
+    @include nacho-container;
+    display: flex;
+  }
+  &__chart-container {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 16px;
+  }
+}

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

@@ -1,9 +1,5 @@
 <h3>Metadata Health</h3>
-
+{{datasets/health/metrics-charts
-<div style="width: 50%">
+  categoryData=fakeCategories
-  {{visualization/charts/horizontal-bar-chart
+  severityData=fakeSeverity
-    title="test Chart"
+  onFilterSelect=(action "onFilterSelect")}}
-    series=testSeries
-    labelAppendValue="%"
-    onBarSelect=(action "onFilterSelect")}}
-</div>

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

@@ -1 +1,14 @@
-{{yield}}
+<div class="dataset-health__chart-container">
+  {{visualization/charts/horizontal-bar-chart
+    title="Categories"
+    series=categoryData
+    labelAppendValue="%"
+    onBarSelect=(action onFilterSelect)}}
+</div>
+<div class="dataset-health__chart-container">
+  {{visualization/charts/horizontal-bar-chart
+    title="Severity"
+    series=severityData
+    labelAppendValue="%"
+    onBarSelect=(action onFilterSelect)}}
+</div>