Add ability to fade out elements on a horizontal bar chart and have custom colors. Tie this in with filter functionality on metadata health graph container

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

@@ -1,6 +1,8 @@
 import Component from '@ember/component';
-import { get, set } from '@ember/object';
+import { get, set, computed } from '@ember/object';
 import { task, TaskInstance } from 'ember-concurrency';
+import ComputedProperty from '@ember/object/computed';
+import { IChartDatum } from 'wherehows-web/typings/app/visualization/charts';
 
 /**
  * This is the container component for the dataset health tab. It should contain the health bar graphs and a table
@@ -26,6 +28,7 @@ export default class DatasetHealthContainer extends Component {
    * @type {Array<string>}
    */
   currentFilters: Set<string>;
+
   constructor() {
     super(...arguments);
     set(this, 'currentFilters', new Set());
@@ -48,20 +51,52 @@ export default class DatasetHealthContainer extends Component {
   });
 
   actions = {
-    /*
+    /**
      * 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
+     * @param filterDatum - Passed in to the action by the child component, contains the tag to be filtered for
      */
-    onFilterSelect(this: DatasetHealthContainer, filterName: string): void {
+    onFilterSelect(this: DatasetHealthContainer, filterDatum: IChartDatum): void {
       const currentFilters = get(this, 'currentFilters');
-      currentFilters.has(filterName) ? currentFilters.delete(filterName) : currentFilters.add(filterName);
+      const filterName = filterDatum.name;
+
+      if (currentFilters.has(filterName)) {
+        currentFilters.delete(filterName);
+      } else {
+        // This strange little logic here makes sure we have only one active filter at a time. Taking this away will
+        // essentially give us multiple filter support (if we decide to make such a UI for it)
+        currentFilters.clear();
+        currentFilters.add(filterName);
+      }
+
+      this.notifyPropertyChange('currentFilters');
     }
   };
 
   // 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 }];
+  fakeCategories: ComputedProperty<Array<IChartDatum>> = computed('currentFilters', function(
-  fakeSeverity = [{ name: 'Minor', value: 50 }, { name: 'Warning', value: 30 }, { name: 'Critical', value: 25 }];
+    this: DatasetHealthContainer
+  ): Array<IChartDatum> {
+    const baseCategories = [{ name: 'Compliance', value: 60 }, { name: 'Ownership', value: 40 }];
+    const currentFilters = get(this, 'currentFilters');
+    const hasFilters = Array.from(currentFilters).length > 0;
+
+    return baseCategories.map(datum => ({ ...datum, isFaded: hasFilters && !currentFilters.has(datum.name) }));
+  });
+
+  fakeSeverity: ComputedProperty<Array<IChartDatum>> = computed('currentFilters', function(
+    this: DatasetHealthContainer
+  ): Array<IChartDatum> {
+    const baseSeverities = [
+      { name: 'Minor', value: 50, customColorClass: 'severity-chart__bar--minor' },
+      { name: 'Warning', value: 30, customColorClass: 'severity-chart__bar--warning' },
+      { name: 'Critical', value: 25, customColorClass: 'severity-chart__bar--critical' }
+    ];
+    const currentFilters = get(this, 'currentFilters');
+    const hasFilters = Array.from(currentFilters).length > 0;
+
+    return baseSeverities.map(datum => ({ ...datum, isFaded: hasFilters && !currentFilters.has(datum.name) }));
+  });
 }

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

@@ -3,9 +3,30 @@
     @include nacho-container;
     display: flex;
   }
+
   &__chart-container {
     width: 100%;
     box-sizing: border-box;
     padding: 0 16px;
   }
+
+  .severity-chart {
+    &__bar {
+      &--minor {
+        $green3: get-color(green3);
+        fill: $green3;
+        stroke: $green3;
+      }
+      &--warning {
+        $orange3: get-color(orange3);
+        fill: $orange3;
+        stroke: $orange3;
+      }
+      &--critical {
+        $red3: get-color(red3);
+        fill: $red3;
+        stroke: $red3;
+      }
+    }
+  }
 }

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

@@ -29,5 +29,15 @@
       transform: scale(1.02, 1);
       height: 18px;
     }
+
+    &--faded {
+      opacity: 0.5;
+    }
+  }
+
+  &__label {
+    &--faded {
+      opacity: 0.5;
+    }
   }
 }

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

@@ -7,6 +7,7 @@
 </div>
 <div class="dataset-health__chart-container">
   {{visualization/charts/horizontal-bar-chart
+    class="severity-chart"
     title="Severity"
     series=severityData
     labelAppendValue="%"

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

@@ -3,14 +3,15 @@
   <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}} viz-bar-chart__bar" rx="2px" ry="2px"
+        <rect x="0" y="{{datum.yOffset}}" height="16" width="{{datum.barLength}}" rx="2px" ry="2px"
-         {{action onBarSelect (get datum labelTagProperty) datum.value}}>
+         class="highcharts-color-{{index}} viz-bar-chart__bar {{if datum.isFaded "viz-bar-chart__bar--faded"}} {{datum.customColorClass}}"
+         {{action onBarSelect datum}}>
         </rect>
       {{/each}}
     </g>
     <g class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker">
       {{#each seriesData as |datum index|}}
-      <g class="highcharts-label highcharts-data-label">
+      <g class="highcharts-label highcharts-data-label  viz-bar-chart__label {{if datum.isFaded "viz-bar-chart__label--faded"}}">
         <text x="0" y="{{datum.labelOffset}}">
           <tspan class="highcharts-emphasized">{{datum.value}}{{labelAppendValue}}</tspan>
           <tspan> | {{get datum labelTagProperty}}</tspan>

wherehows-web/app/typings/app/visualization/charts.d.ts

@@ -4,4 +4,6 @@
 export interface IChartDatum {
   name: string;
   value: number;
+  isFaded?: boolean;
+  customColorClass?: string;
 }