@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

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

@@ -1,83 +1 @@
-/*
- * 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);
+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);

package/src/charts/gv-chart-line.d.ts

@@ -0,0 +1,52 @@
+declare const GvChartLine_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _eventListener: () => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        getOptions(): Promise<void>;
+        updated(changedProperties: any): void;
+        _additionalOptions: void | undefined;
+        render(): import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+    };
+    readonly properties: {
+        series: {
+            type: ArrayConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        _additionalOptions: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _series: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * 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 GvChartLine_base {
+    firstUpdated(): void;
+}
+export {};

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

@@ -1,224 +1 @@
-/*
- * 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);
+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);

package/src/charts/gv-chart-map.d.ts

@@ -0,0 +1,50 @@
+declare const GvChartMap_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _eventListener: () => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        getOptions(): Promise<void>;
+        updated(changedProperties: any): void;
+        _additionalOptions: void | undefined;
+        render(): import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+    };
+    readonly properties: {
+        series: {
+            type: ArrayConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        _additionalOptions: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _series: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * 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 GvChartMap_base {
+}
+export {};

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

@@ -1,112 +1 @@
-/*
- * 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);
+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);

package/src/charts/gv-chart-pie.d.ts

@@ -0,0 +1,50 @@
+declare const GvChartPie_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _eventListener: () => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        getOptions(): Promise<void>;
+        updated(changedProperties: any): void;
+        _additionalOptions: void | undefined;
+        render(): import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+    };
+    readonly properties: {
+        series: {
+            type: ArrayConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        _additionalOptions: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _series: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * 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 GvChartPie_base {
+}
+export {};

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

@@ -1,91 +1 @@
-/*
- * 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);
+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);