@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

package/src/charts/gv-chart-gauge.js

@@ -1 +1,92 @@
-var e=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartGauge=void 0;const t=require("lit"),r=require("../mixins/chart-element"),a=e(require("highcharts/highcharts-more")),i=e(require("highcharts")),s=e(require("highcharts/modules/solid-gauge"));class n extends((0,r.ChartElement)(t.LitElement)){constructor(){super(),(0,a.default)(i.default),(0,s.default)(i.default)}static get properties(){return{max:{type:Number},series:{type:Array}}}async getOptions(){return this._empty=!1,{chart:{type:"solidgauge",backgroundColor:"transparent"},tooltip:{enabled:!1,...this.tooltip},pane:{startAngle:0,endAngle:360,background:[{outerRadius:"112%",innerRadius:"88%",backgroundColor:"transparent",borderWidth:0}],...this.pane},yAxis:[{min:0,max:this.max,lineWidth:0,tickPositions:[]}],plotOptions:{solidgauge:{dataLabels:{enabled:!0},linecap:"round",stickyTracking:!1,rounded:!0}},series:this.series}}}exports.GvChartGauge=n,window.customElements.define("gv-chart-gauge",n);
+/*
+ * 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';
+import { ChartElement } from '../mixins/chart-element';
+import ChartModuleMore from 'highcharts/highcharts-more';
+import Highcharts from 'highcharts';
+import HCSolidGauge from 'highcharts/modules/solid-gauge';
+/**
+ * Gauge chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @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() {
+        super();
+        ChartModuleMore(Highcharts);
+        HCSolidGauge(Highcharts);
+    }
+    static get properties() {
+        return {
+            /** @required */
+            max: { type: Number },
+            series: { type: Array },
+        };
+    }
+    async getOptions() {
+        this._empty = false;
+        return {
+            chart: {
+                type: 'solidgauge',
+                backgroundColor: 'transparent',
+            },
+            tooltip: {
+                enabled: false,
+                ...this.tooltip,
+            },
+            pane: {
+                startAngle: 0,
+                endAngle: 360,
+                background: [
+                    {
+                        outerRadius: '112%',
+                        innerRadius: '88%',
+                        backgroundColor: 'transparent',
+                        borderWidth: 0,
+                    },
+                ],
+                ...this.pane,
+            },
+            yAxis: [
+                {
+                    min: 0,
+                    max: this.max,
+                    lineWidth: 0,
+                    tickPositions: [],
+                },
+            ],
+            plotOptions: {
+                solidgauge: {
+                    dataLabels: {
+                        enabled: true,
+                    },
+                    linecap: 'round',
+                    stickyTracking: false,
+                    rounded: true,
+                },
+            },
+            series: this.series,
+        };
+    }
+}
+window.customElements.define('gv-chart-gauge', GvChartGauge);

package/src/charts/gv-chart-histogram.js

@@ -1 +1,78 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartHistogram=void 0;const t=require("lit"),e=require("../mixins/chart-element");class s extends((0,e.ChartElement)(t.LitElement)){async getOptions(){let t,e,s,i;return this.options&&(t=this.options.yAxis,e=this.options.title,s=this.options.subtitle,i=this.options.plotOptions),this._series&&this._series.values&&0===this._series.values.length&&(this._empty=!0),{chart:{type:"column",backgroundColor:"transparent"},title:{text:e,align:"left",style:{fontSize:"12px",fontWeight:"700"}},subtitle:{text:s,align:"left",style:{fontSize:"11px",color:"#000000",opacity:"0.54"}},series:this._series.values,xAxis:{type:"datetime",dateTimeLabelFormats:{month:"%e. %b",year:"%b"}},legend:{enabled:!1},yAxis:t,plotOptions:i,tooltip:{pointFormat:"Value: <b>{point.y}</b>"}}}}exports.GvChartHistogram=s,window.customElements.define("gv-chart-histogram",s);
+/*
+ * 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';
+import { ChartElement } from '../mixins/chart-element';
+/**
+ * Histogram chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @attr {Array} series - The series to display on the histogram chart.
+ * @attr {Object} options - The list of options to display.
+ *
+ */
+export class GvChartHistogram extends ChartElement(LitElement) {
+    async getOptions() {
+        let yAxis;
+        let title;
+        let subtitle;
+        let plotOptions;
+        if (this.options) {
+            yAxis = this.options.yAxis;
+            title = this.options.title;
+            subtitle = this.options.subtitle;
+            plotOptions = this.options.plotOptions;
+        }
+        if (this._series && this._series.values && this._series.values.length === 0) {
+            this._empty = true;
+        }
+        return {
+            chart: {
+                type: 'column',
+                backgroundColor: 'transparent',
+            },
+            title: {
+                text: title,
+                align: 'left',
+                style: { fontSize: '12px', fontWeight: '700' },
+            },
+            subtitle: {
+                text: subtitle,
+                align: 'left',
+                style: { fontSize: '11px', color: '#000000', opacity: '0.54' },
+            },
+            series: this._series.values,
+            xAxis: {
+                type: 'datetime',
+                dateTimeLabelFormats: {
+                    month: '%e. %b',
+                    year: '%b',
+                },
+            },
+            legend: {
+                enabled: false,
+            },
+            yAxis,
+            plotOptions,
+            tooltip: {
+                pointFormat: 'Value: <b>{point.y}</b>',
+            },
+        };
+    }
+}
+window.customElements.define('gv-chart-histogram', GvChartHistogram);

package/src/charts/gv-chart-line.js

@@ -1 +1,218 @@
-var e=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartLine=void 0;const t=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const s=e(require("highcharts")),i=require("../mixins/chart-element"),o=require("../lib/events"),a=require("../lib/i18n");class n extends((0,i.ChartElement)(t.LitElement)){async getOptions(){if(this._series&&this._series.values&&this._series.values[0]&&this._series.values[0].buckets){const e=this._series.values[0].buckets.slice(),t=this._series.values[0].metadata;e.forEach(((e,s)=>{this._series.values[s]={...e,...this.options.data[0]};let i=this.options.request.aggs&&this.options.request.aggs.startsWith("field:");("1"===e.name||e.name.match("^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$"))&&(i=!1);let o=this.options.labels?this.options.labels[0]:"";!o&&t&&t[e.name]&&(o=t[e.name].name),i?(this._series.values[s].name=e.name,this._series.values[s].labelPrefix=o,this._series.values[s].value=e.name):(this._series.values[s].name=o,this._series.values[s].labelPrefix="",this._series.values[s].value=e.name)}))}return this.options.plotLines=this.options.plotLines?this.options.plotLines.map((e=>({...e,events:{mouseover:function(){this.label.element.firstElementChild.style.visibility="visible"},mouseout:function(){this.label.element.firstElementChild.style.visibility="hidden"}}}))):[],{chart:{type:"areaspline",zoomType:"x",events:{selection:e=>{e.preventDefault(),(0,o.dispatchCustomEvent)(this,"zoom",{from:Math.floor(e.xAxis[0].min),to:Math.round(e.xAxis[0].max)})}}},tooltip:{formatter:function(){const e=Math.trunc(this.points.filter((e=>e.y)).length/10);let t="<div><b>"+new Date(this.x).toLocaleString((0,a.getLanguage)())+"</b></div>";if(t+='<div class="'+(e>=2?"tooltip tooltip-"+(e>5?5:e):"")+'">',this.points.filter((e=>0!==e.y)).length){let i=0;this.points.forEach((o=>{if(o.y){const a=" "+(o.series.options.labelPrefix?o.series.options.labelPrefix+" "+o.series.name:o.series.name);e<2&&i++>0&&(t+="<br />"),t+='<span style="margin: 1px 5px;"><span style="color:'+o.color+'">●</span>'+a+": <b>"+(o.series.options.decimalFormat?s.default.numberFormat(o.y,2):o.y)+(o.series.options.labelSuffix?o.series.options.labelSuffix:"")+"</b></span>"}}))}return t+="</div>",t},shared:!0,useHTML:!0},plotOptions:{line:{allowPointSelect:!0,cursor:"pointer",dataLabels:{enabled:!0,format:"<b>{point.name}</b>: {point.percentage:.1f} %"}},series:{...this.options,marker:{enabled:!1},fillOpacity:.1,events:{legendItemClick:e=>{e.preventDefault(),(0,o.dispatchCustomEvent)(this,"select",e.target)}}}},xAxis:{type:"datetime",dateTimeLabelFormats:{month:"%e. %b",year:"%b"},crosshair:!0,plotLines:[...this.options.plotLines]},yAxis:{title:{text:""}}}}updated(e){super.updated(e),e.has("options")&&this.getOptions().then((e=>{this._additionalOptions=e}))}firstUpdated(){this.shadowRoot.addEventListener("mousemove",(e=>{let t,i,o,a;for(i=0;i<s.default.charts.length;i++)t=s.default.charts[i],t&&t.pointer&&(o=e.originalEvent?t.pointer.normalize(e.originalEvent):t.pointer.normalize(e),a=t.series.map((e=>e.searchPoint(o,!0))),a=a.filter((e=>e)),e.points=a,a.length&&a[0]&&a[0].series.area&&a[0].highlight(e))})),s.default.Pointer.prototype.reset=function(){let e;for(let t=0;t<s.default.charts.length;t++)e=s.default.charts[t],e&&(e.tooltip&&e.tooltip.hide(this),e.xAxis[0]&&e.xAxis[0].hideCrosshair())},s.default.Point.prototype.highlight=function(e){e.points.length&&(this.series.chart.tooltip.refresh(e.points),this.series.chart.xAxis[0].drawCrosshair(e,this))}}}exports.GvChartLine=n,window.customElements.define("gv-chart-line",n);
+/*
+ * 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';
+import '../atoms/gv-button';
+import '../atoms/gv-tag';
+import Highcharts from 'highcharts';
+import { ChartElement } from '../mixins/chart-element';
+import { dispatchCustomEvent } from '../lib/events';
+import { getLanguage } from '../lib/i18n';
+/**
+ * Line chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @fires gv-chart-line:zoom - Custom event with zoomed timeframe
+ * @fires gv-chart-line:select - Custom event with selected value
+ *
+ * @attr {Array} series - The series to display on the line chart.
+ * @attr {Array} options - The list of options to display.
+ *
+ */
+export class GvChartLine extends ChartElement(LitElement) {
+    async getOptions() {
+        if (this._series && this._series.values && this._series.values[0] && this._series.values[0].buckets) {
+            const values = this._series.values[0].buckets.slice();
+            const metadata = this._series.values[0].metadata;
+            values.forEach((bucket, i) => {
+                this._series.values[i] = { ...bucket, ...this.options.data[0] };
+                let isFieldRequest = this.options.request.aggs && this.options.request.aggs.startsWith('field:');
+                if (bucket.name === '1' || bucket.name.match('^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$')) {
+                    isFieldRequest = false;
+                }
+                let label = this.options.labels ? this.options.labels[0] : '';
+                if (!label && metadata && metadata[bucket.name]) {
+                    label = metadata[bucket.name].name;
+                }
+                if (isFieldRequest) {
+                    this._series.values[i].name = bucket.name;
+                    this._series.values[i].labelPrefix = label;
+                    this._series.values[i].value = bucket.name;
+                }
+                else {
+                    this._series.values[i].name = label;
+                    this._series.values[i].labelPrefix = '';
+                    this._series.values[i].value = bucket.name;
+                }
+            });
+        }
+        this.options.plotLines = this.options.plotLines
+            ? this.options.plotLines.map((line) => {
+                return {
+                    ...line,
+                    events: {
+                        mouseover: function () {
+                            this.label.element.firstElementChild.style.visibility = 'visible';
+                        },
+                        mouseout: function () {
+                            this.label.element.firstElementChild.style.visibility = 'hidden';
+                        },
+                    },
+                };
+            })
+            : [];
+        return {
+            chart: {
+                type: 'areaspline',
+                zoomType: 'x',
+                events: {
+                    selection: (event) => {
+                        event.preventDefault();
+                        dispatchCustomEvent(this, 'zoom', {
+                            from: Math.floor(event.xAxis[0].min),
+                            to: Math.round(event.xAxis[0].max),
+                        });
+                    },
+                },
+            },
+            tooltip: {
+                formatter: function () {
+                    const nbCol = Math.trunc(this.points.filter((p) => p.y).length / 10);
+                    let s = '<div><b>' + new Date(this.x).toLocaleString(getLanguage()) + '</b></div>';
+                    s += '<div class="' + (nbCol >= 2 ? 'tooltip tooltip-' + (nbCol > 5 ? 5 : nbCol) : '') + '">';
+                    if (this.points.filter((point) => {
+                        return point.y !== 0;
+                    }).length) {
+                        let i = 0;
+                        this.points.forEach((point) => {
+                            if (point.y) {
+                                const name = ' ' + (point.series.options.labelPrefix ? point.series.options.labelPrefix + ' ' + point.series.name : point.series.name);
+                                if (nbCol < 2 && i++ > 0) {
+                                    s += '<br />';
+                                }
+                                s +=
+                                    '<span style="margin: 1px 5px;"><span style="color:' +
+                                        point.color +
+                                        '">\u25CF</span>' +
+                                        name +
+                                        ': <b>' +
+                                        (point.series.options.decimalFormat ? Highcharts.numberFormat(point.y, 2) : point.y) +
+                                        (point.series.options.labelSuffix ? point.series.options.labelSuffix : '') +
+                                        '</b></span>';
+                            }
+                        });
+                    }
+                    s += '</div>';
+                    return s;
+                },
+                shared: true,
+                useHTML: true,
+            },
+            plotOptions: {
+                line: {
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    dataLabels: {
+                        enabled: true,
+                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+                    },
+                },
+                series: {
+                    ...this.options,
+                    ...{
+                        marker: {
+                            enabled: false,
+                        },
+                        fillOpacity: 0.1,
+                    },
+                    events: {
+                        legendItemClick: (event) => {
+                            event.preventDefault();
+                            dispatchCustomEvent(this, 'select', event.target);
+                        },
+                    },
+                },
+            },
+            xAxis: {
+                type: 'datetime',
+                dateTimeLabelFormats: {
+                    month: '%e. %b',
+                    year: '%b',
+                },
+                crosshair: true,
+                plotLines: [...this.options.plotLines],
+            },
+            yAxis: { title: { text: '' } },
+        };
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('options')) {
+            this.getOptions().then((options) => {
+                this._additionalOptions = options;
+            });
+        }
+    }
+    firstUpdated() {
+        this.shadowRoot.addEventListener('mousemove', (e) => {
+            let chart, i, event, points;
+            for (i = 0; i < Highcharts.charts.length; i++) {
+                chart = Highcharts.charts[i];
+                if (chart && chart.pointer) {
+                    if (e.originalEvent) {
+                        event = chart.pointer.normalize(e.originalEvent);
+                    }
+                    else {
+                        event = chart.pointer.normalize(e);
+                    }
+                    points = chart.series.map((serie) => {
+                        return serie.searchPoint(event, true);
+                    });
+                    points = points.filter((point) => {
+                        return point;
+                    });
+                    e.points = points;
+                    if (points.length && points[0] && points[0].series.area) {
+                        points[0].highlight(e);
+                    }
+                }
+            }
+        });
+        Highcharts.Pointer.prototype.reset = function () {
+            let chart;
+            for (let i = 0; i < Highcharts.charts.length; i++) {
+                chart = Highcharts.charts[i];
+                if (chart) {
+                    if (chart.tooltip) {
+                        chart.tooltip.hide(this);
+                    }
+                    if (chart.xAxis[0]) {
+                        chart.xAxis[0].hideCrosshair();
+                    }
+                }
+            }
+        };
+        Highcharts.Point.prototype.highlight = function (event) {
+            if (event.points.length) {
+                this.series.chart.tooltip.refresh(event.points);
+                this.series.chart.xAxis[0].drawCrosshair(event, this);
+            }
+        };
+    }
+}
+window.customElements.define('gv-chart-line', GvChartLine);

package/src/charts/gv-chart-map.js

@@ -1 +1,111 @@
-var e=Object.create?function(e,t,o,r){void 0===r&&(r=o),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[o]}})}:function(e,t,o,r){void 0===r&&(r=o),e[r]=t[o]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},o=function(o){if(o&&o.__esModule)return o;var r={};if(null!=o)for(var i in o)"default"!==i&&Object.prototype.hasOwnProperty.call(o,i)&&e(r,o,i);return t(r,o),r},r=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartMap=void 0;const i=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const n=require("../mixins/chart-element"),s=r(require("highcharts")),a=require("../lib/events");class l extends((0,n.ChartElement)(i.LitElement)){async getOptions(){const e=[];let t,r;if(this._series&&this._series.values&&Object.keys(this._series.values).forEach((t=>{(!this.options.excludedKeys||this.options.excludedKeys&&!this.options.excludedKeys.includes(t))&&e.push({key:t,value:this._series.values[t]})})),this.options.zone){const e=this.options.zone.toLowerCase();t="name",r=await Promise.resolve().then((()=>o(require("@highcharts/map-collection/countries/"+e.substring(0,2)+"/"+e+"-all.geo.json"))))}else t="hc-a2",r=await Promise.resolve().then((()=>o(require("@highcharts/map-collection/custom/world.geo.json"))));return{chart:{map:r},mapNavigation:{enabled:!0,enableMouseWheelZoom:!1},legend:{layout:"vertical",align:"left",verticalAlign:"bottom"},colorAxis:{min:0,stops:[[0,"#EFEFFF"],[.5,s.default.getOptions().colors[0]],[1,s.default.Color(s.default.getOptions().colors[0]).brighten(-.5).get()]]},series:[{data:e,joinBy:[t,"key"],name:this.options.name,dataLabels:{enabled:!0,formatter:function(){return"name"===t?this.point[t]:""}},states:{hover:{color:"#a4edba",borderColor:"gray"}},nullColor:"#eaecfd",point:{events:{click:e=>{e.preventDefault(),(0,a.dispatchCustomEvent)(this,"select",e.point.properties)}}}}],tooltip:{headerFormat:"",pointFormat:"<b>{point.name}:</b> {point.value}"}}}}exports.GvChartMap=l,window.customElements.define("gv-chart-map",l);
+/*
+ * 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';
+import '../atoms/gv-button';
+import '../atoms/gv-tag';
+import { ChartElement } from '../mixins/chart-element';
+import Highcharts from 'highcharts';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Map chart component.
+ *
+ * ⚠️ This component is based on `highcharts` and `@highcharts/map-collection`.
+ * To use this component in your project be sure the dependencies are installed or
+ * install them with: `npm install highcharts @highcharts/map-collection --save`
+ *
+ * @fires gv-chart-map:select - Custom event with selected value
+ *
+ * @attr {Array} series - The series to display on the map chart.
+ * @attr {Array} options - The list of options to display.
+ *
+ */
+export class GvChartMap extends ChartElement(LitElement) {
+    async getOptions() {
+        const data = [];
+        if (this._series && this._series.values) {
+            Object.keys(this._series.values).forEach((k) => {
+                if (!this.options.excludedKeys || (this.options.excludedKeys && !this.options.excludedKeys.includes(k))) {
+                    data.push({ key: k, value: this._series.values[k] });
+                }
+            });
+        }
+        let key, map;
+        if (this.options.zone) {
+            const zone = this.options.zone.toLowerCase();
+            key = 'name';
+            map = await import('@highcharts/map-collection/countries/' + zone.substring(0, 2) + '/' + zone + '-all.geo.json');
+        }
+        else {
+            key = 'hc-a2';
+            map = await import('@highcharts/map-collection/custom/world.geo.json');
+        }
+        return {
+            chart: {
+                map,
+            },
+            mapNavigation: {
+                enabled: true,
+                enableMouseWheelZoom: false,
+            },
+            legend: {
+                layout: 'vertical',
+                align: 'left',
+                verticalAlign: 'bottom',
+            },
+            colorAxis: {
+                min: 0,
+                stops: [
+                    [0, '#EFEFFF'],
+                    [0.5, Highcharts.getOptions().colors[0]],
+                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()],
+                ],
+            },
+            series: [
+                {
+                    data,
+                    joinBy: [key, 'key'],
+                    name: this.options.name,
+                    dataLabels: {
+                        enabled: true,
+                        formatter: function () {
+                            return key === 'name' ? this.point[key] : '';
+                        },
+                    },
+                    states: {
+                        hover: {
+                            color: '#a4edba',
+                            borderColor: 'gray',
+                        },
+                    },
+                    nullColor: '#eaecfd',
+                    point: {
+                        events: {
+                            click: (event) => {
+                                event.preventDefault();
+                                dispatchCustomEvent(this, 'select', event.point.properties);
+                            },
+                        },
+                    },
+                },
+            ],
+            tooltip: {
+                headerFormat: '',
+                pointFormat: '<b>{point.name}:</b> {point.value}',
+            },
+        };
+    }
+}
+window.customElements.define('gv-chart-map', GvChartMap);

package/src/charts/gv-chart-pie.js

@@ -1 +1,89 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartPie=void 0;const e=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const t=require("../mixins/chart-element"),i=require("../lib/events");class s extends((0,t.ChartElement)(e.LitElement)){async getOptions(){let e=0;return this._series&&this._series.values&&(this.options.data.forEach(((e,t)=>{e.y=this._series.values[Object.keys(this._series.values)[t]]||0})),this.options.data.forEach((t=>{e+=t.y}))),e||(this._empty=!0),{chart:{type:"pie"},series:0===e?[]:[this.options],plotOptions:{pie:{allowPointSelect:!0,cursor:"pointer",dataLabels:{enabled:!0,format:"<b>{point.name}</b>: {point.percentage:.1f} %"}},series:{animation:!1,events:{click:e=>{e.preventDefault(),(0,i.dispatchCustomEvent)(this,"select",e.point.options)}}}},tooltip:{pointFormat:"Nb hits: <b>{point.y}</b>"},title:{text:"Total: "+e,useHTML:!0,align:"left",verticalAlign:"bottom",y:10,style:{fontSize:"12px",fontWeight:"bold"}}}}}exports.GvChartPie=s,window.customElements.define("gv-chart-pie",s);
+/*
+ * 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';
+import '../atoms/gv-button';
+import '../atoms/gv-tag';
+import { ChartElement } from '../mixins/chart-element';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Pie chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @fires gv-chart-pie:select - Custom event with selected value
+ *
+ * @attr {Array} series - The series to display on the pie chart.
+ * @attr {Array} options - The list of options to display.
+ *
+ */
+export class GvChartPie extends ChartElement(LitElement) {
+    async getOptions() {
+        let total = 0;
+        if (this._series && this._series.values) {
+            this.options.data.forEach((data, i) => {
+                data.y = this._series.values[Object.keys(this._series.values)[i]] || 0;
+            });
+            this.options.data.forEach((d) => {
+                total += d.y;
+            });
+        }
+        if (!total) {
+            this._empty = true;
+        }
+        return {
+            chart: {
+                type: 'pie',
+            },
+            series: total === 0 ? [] : [this.options],
+            plotOptions: {
+                pie: {
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    dataLabels: {
+                        enabled: true,
+                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+                    },
+                },
+                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-pie', GvChartPie);