From fded516db70085a42e9afb68f83fa8a9d3ca802f Mon Sep 17 00:00:00 2001 From: cptran777 Date: Wed, 1 Aug 2018 15:35:21 -0700 Subject: [PATCH] Create a summary health metrics container and render mock data for graphs --- .../datasets/containers/dataset-health.ts | 32 +++++++++++++++++-- .../datasets/health/metrics-charts.ts | 10 +++--- .../charts/horizontal-bar-chart.ts | 2 +- wherehows-web/app/styles/components/_all.scss | 1 + .../components/dataset-health/_all.scss | 1 + .../dataset-health/_metrics-charts.scss | 11 +++++++ .../datasets/containers/dataset-health.hbs | 12 +++---- .../datasets/health/metrics-charts.hbs | 15 ++++++++- ...-charts-test.ts => metrics-charts-test.js} | 0 9 files changed, 67 insertions(+), 17 deletions(-) create mode 100644 wherehows-web/app/styles/components/dataset-health/_all.scss create mode 100644 wherehows-web/app/styles/components/dataset-health/_metrics-charts.scss rename wherehows-web/tests/integration/components/datasets/health/{metrics-charts-test.ts => metrics-charts-test.js} (100%) diff --git a/wherehows-web/app/components/datasets/containers/dataset-health.ts b/wherehows-web/app/components/datasets/containers/dataset-health.ts index d7b14d2876..0172b91904 100644 --- a/wherehows-web/app/components/datasets/containers/dataset-health.ts +++ b/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} + */ + 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} + */ + currentFilters: Set; + 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 }]; } diff --git a/wherehows-web/app/components/datasets/health/metrics-charts.ts b/wherehows-web/app/components/datasets/health/metrics-charts.ts index b8bdfc8f31..3570952924 100644 --- a/wherehows-web/app/components/datasets/health/metrics-charts.ts +++ b/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({ - // anything which *must* be merged to prototype here -}) { - // normal class body definition here +export default class DatasetsHealthMetricsCharts extends Component { + /** + * Sets the classes for the rendered html element for the compoennt + * @type {Array} + */ + classNames = ['dataset-health__metrics-charts']; } 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 c476935a4f..218895246b 100644 --- a/wherehows-web/app/components/visualization/charts/horizontal-bar-chart.ts +++ b/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} */ - 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 diff --git a/wherehows-web/app/styles/components/_all.scss b/wherehows-web/app/styles/components/_all.scss index 4fa83fbc98..03d5fad0c9 100644 --- a/wherehows-web/app/styles/components/_all.scss +++ b/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'; diff --git a/wherehows-web/app/styles/components/dataset-health/_all.scss b/wherehows-web/app/styles/components/dataset-health/_all.scss new file mode 100644 index 0000000000..dcbb0e5fdc --- /dev/null +++ b/wherehows-web/app/styles/components/dataset-health/_all.scss @@ -0,0 +1 @@ +@import 'metrics-charts'; diff --git a/wherehows-web/app/styles/components/dataset-health/_metrics-charts.scss b/wherehows-web/app/styles/components/dataset-health/_metrics-charts.scss new file mode 100644 index 0000000000..57a8a432e2 --- /dev/null +++ b/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; + } +} 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 9d057b1375..9054a18bde 100644 --- a/wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs +++ b/wherehows-web/app/templates/components/datasets/containers/dataset-health.hbs @@ -1,9 +1,5 @@

Metadata Health

- -
- {{visualization/charts/horizontal-bar-chart - title="test Chart" - series=testSeries - labelAppendValue="%" - onBarSelect=(action "onFilterSelect")}} -
+{{datasets/health/metrics-charts + categoryData=fakeCategories + severityData=fakeSeverity + onFilterSelect=(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 index fb5c4b157d..665d30589e 100644 --- a/wherehows-web/app/templates/components/datasets/health/metrics-charts.hbs +++ b/wherehows-web/app/templates/components/datasets/health/metrics-charts.hbs @@ -1 +1,14 @@ -{{yield}} \ No newline at end of file +
+ {{visualization/charts/horizontal-bar-chart + title="Categories" + series=categoryData + labelAppendValue="%" + onBarSelect=(action onFilterSelect)}} +
+
+ {{visualization/charts/horizontal-bar-chart + title="Severity" + series=severityData + labelAppendValue="%" + onBarSelect=(action onFilterSelect)}} +
\ No newline at end of file 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.js similarity index 100% rename from wherehows-web/tests/integration/components/datasets/health/metrics-charts-test.ts rename to wherehows-web/tests/integration/components/datasets/health/metrics-charts-test.js