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! +