From e58c40ec40fe0082d02737290fe49450d19326f0 Mon Sep 17 00:00:00 2001 From: cptran777 Date: Wed, 1 Aug 2018 15:27:17 -0700 Subject: [PATCH] Add click handling functionality to horizontal bar charts and hover effect for each bar --- .../datasets/containers/dataset-health.ts | 6 +++++ .../datasets/health/metrics-charts.ts | 7 +++++ .../charts/horizontal-bar-chart.ts | 12 ++++++++- .../visualization/charts/_bar-chart.scss | 8 ++++++ .../datasets/containers/dataset-health.hbs | 10 ++++--- .../datasets/health/metrics-charts.hbs | 1 + .../charts/horizontal-bar-chart.hbs | 4 ++- .../datasets/health/metrics-charts-test.ts | 26 +++++++++++++++++++ 8 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 wherehows-web/app/components/datasets/health/metrics-charts.ts create mode 100644 wherehows-web/app/templates/components/datasets/health/metrics-charts.hbs create mode 100644 wherehows-web/tests/integration/components/datasets/health/metrics-charts-test.ts diff --git a/wherehows-web/app/components/datasets/containers/dataset-health.ts b/wherehows-web/app/components/datasets/containers/dataset-health.ts index 0cd799eb2f..d7b14d2876 100644 --- a/wherehows-web/app/components/datasets/containers/dataset-health.ts +++ b/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 }]; } diff --git a/wherehows-web/app/components/datasets/health/metrics-charts.ts b/wherehows-web/app/components/datasets/health/metrics-charts.ts new file mode 100644 index 0000000000..b8bdfc8f31 --- /dev/null +++ b/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 +} diff --git a/wherehows-web/app/components/visualization/charts/horizontal-bar-chart.ts b/wherehows-web/app/components/visualization/charts/horizontal-bar-chart.ts index e9f9a20050..c476935a4f 100644 --- a/wherehows-web/app/components/visualization/charts/horizontal-bar-chart.ts +++ b/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 }); } diff --git a/wherehows-web/app/styles/components/visualization/charts/_bar-chart.scss b/wherehows-web/app/styles/components/visualization/charts/_bar-chart.scss index d0af343a6e..430edb83d1 100644 --- a/wherehows-web/app/styles/components/visualization/charts/_bar-chart.scss +++ b/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; + } + } } diff --git a/wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs b/wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs index 2fb02b5407..9d057b1375 100644 --- a/wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs +++ b/wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs @@ -1,7 +1,9 @@ -Coming Soon! +

Metadata Health

+
{{visualization/charts/horizontal-bar-chart - title="Test Chart" + title="test Chart" series=testSeries - labelAppendValue="%"}} -
\ No newline at end of file + labelAppendValue="%" + onBarSelect=(action "onFilterSelect")}} + diff --git a/wherehows-web/app/templates/components/datasets/health/metrics-charts.hbs b/wherehows-web/app/templates/components/datasets/health/metrics-charts.hbs new file mode 100644 index 0000000000..fb5c4b157d --- /dev/null +++ b/wherehows-web/app/templates/components/datasets/health/metrics-charts.hbs @@ -0,0 +1 @@ +{{yield}} \ No newline at end of file diff --git a/wherehows-web/app/templates/components/visualization/charts/horizontal-bar-chart.hbs b/wherehows-web/app/templates/components/visualization/charts/horizontal-bar-chart.hbs index 4026b44ee3..b0283b73e3 100644 --- a/wherehows-web/app/templates/components/visualization/charts/horizontal-bar-chart.hbs +++ b/wherehows-web/app/templates/components/visualization/charts/horizontal-bar-chart.hbs @@ -3,7 +3,9 @@ {{#each seriesData as |datum index|}} - + + {{/each}} diff --git a/wherehows-web/tests/integration/components/datasets/health/metrics-charts-test.ts b/wherehows-web/tests/integration/components/datasets/health/metrics-charts-test.ts new file mode 100644 index 0000000000..0ba8f98508 --- /dev/null +++ b/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'); + }); +});