From 7ccef4bee27a5eae41a09576dd263551d1ff0047 Mon Sep 17 00:00:00 2001 From: Yann Tavernier Date: Fri, 19 Mar 2021 14:35:17 +0100 Subject: [PATCH] feat: dashboard of all alerts --- src/charts/gv-chart-bar.js | 99 ++++++++++++++++++++++++++ src/index.js | 1 + src/mixins/with-skeleton-attribute.js | 1 + stories/charts/gv-chart-bar.stories.js | 78 ++++++++++++++++++++ wc/gv-chart-bar.js | 1 + 5 files changed, 180 insertions(+) create mode 100644 src/charts/gv-chart-bar.js create mode 100644 stories/charts/gv-chart-bar.stories.js create mode 100644 wc/gv-chart-bar.js diff --git a/src/charts/gv-chart-bar.js b/src/charts/gv-chart-bar.js new file mode 100644 index 00000000..d886932f --- /dev/null +++ b/src/charts/gv-chart-bar.js @@ -0,0 +1,99 @@ +/* + * Copyright (C) 2015 The Gravitee team (http://gravitee.io) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { LitElement } from 'lit-element'; +import '../atoms/gv-button'; +import '../atoms/gv-tag'; +import { ChartElement } from '../mixins/chart-element'; +import { dispatchCustomEvent } from '../lib/events'; + +/** + * Bar chart component + * + * @fires gv-chart-bar:select - Custom event with selected value + * + * @attr {Array} series - The series to display on the bar chart. + * @attr {Array} options - The list of options to display. + * + */ +export class GvChartBar extends ChartElement(LitElement) { + async getOptions() { + let total = 0; + const categories = []; + if (this._series && this._series.values) { + this.options.data.forEach((data, i) => { + data.y = this._series.values[this.options.data[i].name] || 0; + categories.push(data.name); + }); + this.options.data.forEach((d) => { + total += d.y; + }); + } + if (!total) { + this._empty = true; + } + return { + chart: { + type: 'bar', + }, + series: total === 0 ? [] : [this.options], + xAxis: { + categories: categories, + }, + legend: { + enabled: false, + }, + yAxis: { + allowDecimals: false, + title: { + text: null, + }, + min: 0, + }, + plotOptions: { + bar: { + dataLabels: { + enabled: true, + }, + }, + series: { + animation: false, + events: { + click: (event) => { + event.preventDefault(); + dispatchCustomEvent(this, 'select', event.point.options); + }, + }, + }, + }, + tooltip: { + pointFormat: 'Nb hits: {point.y}', + }, + title: { + text: 'Total: ' + total, + useHTML: true, + align: 'left', + verticalAlign: 'bottom', + y: 10, + style: { + fontSize: '12px', + fontWeight: 'bold', + }, + }, + }; + } +} + +window.customElements.define('gv-chart-bar', GvChartBar); diff --git a/src/index.js b/src/index.js index 5edf3fa6..04f6b776 100644 --- a/src/index.js +++ b/src/index.js @@ -19,6 +19,7 @@ export { GvState } from './atoms/gv-state'; export { GvSwitch } from './atoms/gv-switch'; export { GvTag } from './atoms/gv-tag'; export { GvText } from './atoms/gv-text'; +export { GvChartBar } from './charts/gv-chart-bar'; export { GvChartGauge } from './charts/gv-chart-gauge'; export { GvChartLine } from './charts/gv-chart-line'; export { GvChartMap } from './charts/gv-chart-map'; diff --git a/src/mixins/with-skeleton-attribute.js b/src/mixins/with-skeleton-attribute.js index b84c7b3a..e0c198f4 100644 --- a/src/mixins/with-skeleton-attribute.js +++ b/src/mixins/with-skeleton-attribute.js @@ -63,6 +63,7 @@ export function withSkeletonAttribute(ParentClass) { updated(changedProperties) { if (this._skeletonAttribute != null && changedProperties.has(this._skeletonAttribute)) { this._error = false; + this._empty = false; const start = new Date().getTime(); let end = null; const timer = setTimeout(() => { diff --git a/stories/charts/gv-chart-bar.stories.js b/stories/charts/gv-chart-bar.stories.js new file mode 100644 index 00000000..72a322fc --- /dev/null +++ b/stories/charts/gv-chart-bar.stories.js @@ -0,0 +1,78 @@ +/* + * Copyright (C) 2015 The Gravitee team (http://gravitee.io) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import notes from '../../.docs/gv-chart-bar.md'; +import '../../src/charts/gv-chart-bar'; +import { makeStory, storyWait } from '../lib/make-story'; + +const events = ['gv-chart-bar:select']; + +const series = { + values: { + INFO: 152460, + WARNING: 27567, + CRITICAL: 21000, + }, +}; + +const options = { + data: [ + { name: 'INFO', color: '#54a3ff' }, + { name: 'WARNING', color: '#ff9f40' }, + { name: 'CRITICAL', color: '#cf3942' }, + ], +}; + +export default { + title: 'charts/gv-chart-bar', + component: 'gv-chart-bar', + parameters: { + notes, + chromatic: { disable: true }, + }, +}; + +const conf = { + component: 'gv-chart-bar', + events, + css: ` + gv-chart-bar { + min-height: 200px; + } + `, +}; + +export const Basics = makeStory(conf, { + items: [{ series, options }], +}); + +export const Empty = makeStory(conf, { + items: [{ series: [], options }], +}); + +let seriesResolver; +export const Loading = makeStory(conf, { + items: [{}], + simulations: [ + storyWait(0, ([component]) => { + component.series = new Promise((resolve) => (seriesResolver = resolve)); + component.options = options; + }), + + storyWait(750, () => { + seriesResolver(series); + }), + ], +}); diff --git a/wc/gv-chart-bar.js b/wc/gv-chart-bar.js new file mode 100644 index 00000000..76b80543 --- /dev/null +++ b/wc/gv-chart-bar.js @@ -0,0 +1 @@ +import '../src/charts/gv-chart-bar';