feat: dashboard of all alerts

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: <b>{point.y}</b>',
+      },
+      title: {
+        text: 'Total: ' + total,
+        useHTML: true,
+        align: 'left',
+        verticalAlign: 'bottom',
+        y: 10,
+        style: {
+          fontSize: '12px',
+          fontWeight: 'bold',
+        },
+      },
+    };
+  }
+}
+
+window.customElements.define('gv-chart-bar', GvChartBar);

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';

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(() => {

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);
+    }),
+  ],
+});

wc/gv-chart-bar.js

@@ -0,0 +1 @@
+import '../src/charts/gv-chart-bar';