feat(gv-chart-gauge): update gauge chart options

gravitee-io · Jun 28, 2021 · 46a38eb · 46a38eb
1 parent 623d65f
commit 46a38eb
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/src/charts/gv-chart-gauge.js b/src/charts/gv-chart-gauge.js
@@ -28,7 +28,8 @@ import HCSolidGauge from 'highcharts/modules/solid-gauge';
  *
  * @attr {number} max - The maximum value of the gauge.
  * @attr {Array} series - Array of the series to display.
- *
+ * @attr {Object} tooltip - The list of tooltip attributes to overwrite.
+ * @attr {Object} pane - The pane serves as a container for axes and backgrounds for circular gauges and polar charts.
  */
 export class GvChartGauge extends ChartElement(LitElement) {
   constructor() {
@@ -54,6 +55,7 @@ export class GvChartGauge extends ChartElement(LitElement) {
       },
       tooltip: {
         enabled: false,
+        ...this.tooltip,
       },
 
       pane: {
@@ -67,6 +69,7 @@ export class GvChartGauge extends ChartElement(LitElement) {
             borderWidth: 0,
           },
         ],
+        ...this.pane,
       },
 
       yAxis: [

diff --git a/stories/charts/gv-chart-gauge.stories.js b/stories/charts/gv-chart-gauge.stories.js
@@ -82,3 +82,52 @@ const confWithBackground = {
 export const WithColorfulBackground = makeStory(confWithBackground, {
   items: [{ series, max: 3 }],
 });
+
+const installationsSeries = [
+  {
+    name: 'Installations',
+    data: [
+      {
+        color: '#64b5f6',
+        opacity: 0.8,
+        radius: '112%',
+        innerRadius: '88%',
+        y: 2,
+      },
+    ],
+    dataLabels: [
+      {
+        enabled: true,
+        align: 'center',
+        verticalAlign: 'middle',
+        format: 'Installations: 3 ',
+        borderWidth: 0,
+        style: {
+          fontSize: '16px',
+        },
+      },
+    ],
+  },
+];
+
+const tooltip = {
+  enabled: true,
+  distance: 20,
+  pointFormat: '2 started<br/>1 pending',
+  nullFormat: 'Value is not available.',
+};
+
+const pane = {
+  background: [
+    {
+      outerRadius: '112%',
+      innerRadius: '88%',
+      backgroundColor: '#ffb74d80',
+      borderWidth: 0,
+    },
+  ],
+};
+
+export const witCustomPaneAndTooltip = makeStory(conf, {
+  items: [{ series: installationsSeries, max: 3, tooltip, pane }],
+});