@yoobic/yobi 8.7.5 → 8.7.7

package/dist/collection/feature-platform/insight/kpi-container/kpi-container.js

@@ -1,984 +0,0 @@
-import { intersectionObserve, isIntersectionObserverSupported, isWeb, showActionSheet, translate, translateMulti } from '@shared/utils';
-import { h, Host } from '@stencil/core';
-import { getAppContext } from '@yobi/utils/helpers/common-helpers';
-export class YooKpiContainerComponent {
-  constructor() {
-    this.chartClass = undefined;
-    this.heading = undefined;
-    this.type = undefined;
-    this.config = undefined;
-    this.isInDashboard = undefined;
-    this.disableResize = undefined;
-    this.size = undefined;
-    this.isFullScreen = undefined;
-    this.isFullHeight = undefined;
-    this.definition = undefined;
-    this.forceAnimatedIllustration = undefined;
-    this.isFormPreview = undefined;
-    this.hideHeader = undefined;
-    this.isEditMode = undefined;
-    this.hasError = undefined;
-    this.hasErrorTooMuchData = undefined;
-    this.dontRender = undefined;
-    this.disableAnimation = undefined;
-    this.chartTypes = undefined;
-    this.isLoading = undefined;
-    this.isInScrollView = undefined;
-  }
-  async getSVG(width, height, x, y, margin = 0) {
-    if (this.kpi) {
-      return this.kpi.getSVG(width, height, x, y, margin);
-    }
-    return Promise.resolve('');
-  }
-  async toogleToolsPanel() {
-    if (this.kpi) {
-      this.kpi.toogleToolsPanel();
-    }
-  }
-  async resize() {
-    var _a;
-    (_a = this.kpi) === null || _a === void 0 ? void 0 : _a.resize();
-  }
-  async setLoading(loading) {
-    this.isLoading = loading;
-  }
-  componentWillLoad() {
-    this.initButtons();
-  }
-  componentDidLoad() {
-    this.observe();
-  }
-  onChangeEditMode() {
-    this.initButtons();
-  }
-  observe() {
-    this.removeIntersectionObserver();
-    if (isIntersectionObserverSupported()) {
-      this.addIntersectionObserver();
-    }
-    else {
-      this.markAsIntoView();
-    }
-  }
-  addIntersectionObserver() {
-    this.intersectionObserver = intersectionObserve(this.host, (nodes) => {
-      nodes.forEach((node) => {
-        if (node.isIntersecting) {
-          this.markAsIntoView();
-          this.removeIntersectionObserver();
-        }
-      });
-    }, {
-      rootMargin: '30px'
-    });
-  }
-  markAsIntoView() {
-    this.isInScrollView = true;
-    this.toggleInScrollView.emit(true);
-  }
-  removeIntersectionObserver() {
-    if (this.intersectionObserver) {
-      this.intersectionObserver.unobserve(this.host);
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = undefined;
-    }
-  }
-  connectedCallback() {
-    this.observe();
-  }
-  disconnectedCallback() {
-    this.removeIntersectionObserver();
-  }
-  initButtons() {
-    var _a, _b, _c, _d;
-    this.buttons = [{ text: translate('REFRESH'), icon: 'refresh', handler: () => this.onRefresh(), separator: true }];
-    if (this.isInDashboard && (this.type === 'chart' || this.type === 'grid')) {
-      this.buttons.push({ text: translate('KPIVIEWINFO'), icon: 'info', handler: () => this.onViewInfo(), separator: true });
-    }
-    if (this.isEditMode) {
-      if (this.type === 'chart') {
-        this.buttons.push({ text: translate('COLOR'), icon: 'theme', handler: () => this.onUpdateColors() });
-        if (this.chartTypes.length > 1) {
-          this.buttons.push({
-            text: translate('GRAPHCHARTTYPE'),
-            icon: 'chart',
-            subMenu: this.chartTypes.map((t) => {
-              var _a;
-              return {
-                text: translate('YOOBIC' + t.toUpperCase()),
-                textClass: ((_a = this === null || this === void 0 ? void 0 : this.definition) === null || _a === void 0 ? void 0 : _a.type) === t ? 'app-color' : null,
-                handler: () => this.onChangeChartType(t)
-              };
-            }),
-            separator: true
-          });
-        }
-      }
-      this.buttons.push({ text: translate('YOOBICEDIT'), icon: 'pen', handler: () => this.onEdit() });
-      this.buttons.push({
-        text: translate('DUPLICATE'),
-        icon: 'duplicate',
-        subMenu: [
-          { text: translate('COPYTOSAMETAB'), handler: () => this.onDuplicate() },
-          { text: translate('COPYTOANOTHERTAB'), handler: () => this.onCopyToAnotherTab() }
-        ]
-      });
-      this.buttons.push({ text: translate('DELETE'), icon: 'delete', actionType: 'delete', handler: () => this.onDelete(), separator: true });
-    }
-    if ((this.type === 'chart' || this.type === 'grid') && isWeb(this.host) && !((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.allowScroll)) {
-      this.buttons.push({ text: translate('EXPORTCSV'), icon: 'file-csv', handler: () => this.onExportCSV() });
-    }
-    if (this.type === 'grid' && isWeb(this.host)) {
-      this.buttons.push({ text: translate('EXPORTEXCEL'), icon: 'file-excel', handler: () => this.onExportXLSX() });
-    }
-    if (this.type === 'chart' && isWeb(this.host) && !((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.allowScroll)) {
-      this.buttons.push({ text: translate('EXPORTPNG'), icon: 'image', handler: () => this.onExport(), separator: true });
-    }
-  }
-  onShowDialog(index) {
-    this.showDetail.emit(index);
-  }
-  onShowMore(ev, el) {
-    this.initButtons();
-    showActionSheet(this.buttons, null, {}, el, ev);
-  }
-  onEdit() {
-    this.kpiEdit.emit(true);
-  }
-  onViewInfo() {
-    this.kpiViewInfo.emit();
-  }
-  onRefresh() {
-    this.kpiRefresh.emit();
-  }
-  onChangeChartType(t) {
-    this.kpiChartChangeType.emit(t);
-  }
-  onDelete() {
-    this.kpiDelete.emit(true);
-  }
-  onUpdateColors() {
-    this.kpiUpdateColors.emit(this.config);
-  }
-  onDuplicate() {
-    this.kpiDuplicate.emit(true);
-  }
-  onCopyToAnotherTab() {
-    this.kpiCopyToAnotherTab.emit(true);
-  }
-  onExport() {
-    if (this.kpi) {
-      this.kpi.export();
-    }
-  }
-  onExportCSV() {
-    if (this.kpi) {
-      this.kpi.exportCSV();
-    }
-  }
-  onExportXLSX() {
-    if (this.kpi) {
-      this.kpi.exportXLSX();
-    }
-  }
-  onKpiEdited(ev) {
-    ev.stopPropagation();
-    this.kpiEdited.emit(ev.detail);
-  }
-  onKpiClick(ev) {
-    ev.stopPropagation();
-    this.kpiClick.emit(ev.detail);
-  }
-  onKpiLinkClick(ev) {
-    ev.stopPropagation();
-    this.kpiLinkClick.emit(ev.detail);
-  }
-  onKpiDoubleClick(ev) {
-    ev.stopPropagation();
-    this.kpiDoubleClick.emit(ev.detail);
-  }
-  onKpiLegendItemClick(ev) {
-    if (ev && ev.stopPropagation) {
-      ev.stopPropagation();
-    }
-    if (ev && ev.detail) {
-      this.kpiLegendItemClick.emit(ev.detail);
-    }
-  }
-  onToggleTable() {
-    this.kpiToggleTable.emit();
-    // this.showTable = !this.showTable;
-  }
-  onToogleToolsPanel() {
-    this.kpiToggleToolsPanel.emit();
-  }
-  renderKpiContent() {
-    var _a, _b, _c, _d;
-    // only yoobic.com hosted iframes should be interactive
-    const isTableau = ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.provider) === 'Tableau';
-    const isPowerBI = ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.provider) === 'PowerBI';
-    if (this.hasError) {
-      return h("div", { class: "error" }, translate(isPowerBI ? 'YOBICPOWERBILOADINGERROR' : this.hasErrorTooMuchData ? 'CHARTLOADINGERROR' : 'CHARTLOADINGERRORGENERIC'));
-    }
-    else if ((!this.config || this.isLoading) && !this.forceAnimatedIllustration) {
-      return h("yoo-loader", { class: "absolute", size: "large" });
-    }
-    else if (!this.config && this.forceAnimatedIllustration) {
-      return (h("div", { class: "animated-illustration" }, h("yoo-animated-illustration", { type: "nodata" }), h("div", null, translate('LISTEMPTY'))));
-    }
-    return [
-      h("div", { class: 'kpi-container ' + this.type, onClick: () => !isTableau && !isPowerBI && !isWeb(this.host) && this.onShowDialog() }, this.renderKpi())
-    ];
-  }
-  renderKpi() {
-    var _a, _b, _c, _d, _e, _f;
-    let kpiStyle;
-    if (((_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.length) && ((_d = this.chartClass) === null || _d === void 0 ? void 0 : _d.includes) && this.chartClass.includes('feed-chart')) {
-      kpiStyle = { maxHeight: `${this.config.xAxis.categories.length * 70}px` };
-    }
-    return !this.dontRender && (h("yoo-kpi", { class: {
-        interactive: true,
-        rounded: (_f = (_e = this.host) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.contains('rounded') // only yoobic.com hosted iframes should be interactive
-      }, ref: (el) => (this.kpi = el), config: this.config, photosSrc: this.config.photos, type: this.type, chartClass: this.chartClass, disableAnimation: this.disableAnimation, style: kpiStyle, isFullScreen: this.isFullScreen, isFullHeight: this.isFullHeight, isFormPreview: this.isFormPreview, definition: this.definition,
-      // showTable={this.showTable}
-      disableResize: this.disableResize, onKpiEdited: (ev) => this.onKpiEdited(ev), onKpiClick: (ev) => this.onKpiClick(ev), onKpiDoubleClick: (ev) => this.onKpiDoubleClick(ev), onKpiLegendItemClick: (ev) => this.onKpiLegendItemClick(ev), onKpiLinkClick: (ev) => this.onKpiLinkClick(ev), onOpenInFullscreen: () => this.onShowDialog() }));
-  }
-  renderHelpButton(descriptionKey) {
-    const description = translate(descriptionKey);
-    return (h("yoo-tooltip", { clickable: true, content: description, placement: "right", coeffMaxWidth: 0.85 }, h("yoo-icon", { name: "help", color: "stable-alt" })));
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    let iconElement;
-    return (h(Host, { class: {
-        web: isWeb(this.host),
-        [this.type || 'default']: true,
-        ...getAppContext(this.host)
-      } }, h("div", { class: {
-        container: true,
-        fullscreen: this.isFullScreen,
-        'full-height': this.isFullHeight
-      } }, this.isFullScreen || this.hideHeader || !this.isInScrollView ? null : (h("div", { class: "heading" }, this.isEditMode && isWeb(this.host) && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('YOOBICMOVE'), placement: "bottom" }, h("yoo-icon", { class: "margin-right draggable", name: "draggable", color: "stable", size: "medium" }))), h("div", { class: "title" }, h("div", { class: "title-content" }, translateMulti(this.heading)), (_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.extraIcones) === null || _b === void 0 ? void 0 :
-      _b.map((extra) => {
-        return h("yoo-icon", { name: extra.icon, color: extra.color, size: "medium", onClick: () => this.onShowDialog() });
-      })), ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.locked) && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('GRAPHLOCKED'), placement: "bottom" }, h("yoo-icon", { name: "lock", color: "dark", size: "medium" }))), this.isEditMode && isWeb(this.host) && ((_e = this.definition) === null || _e === void 0 ? void 0 : _e.kpiType) === 'CampaignsPivotTableKpi' && ((_f = this.definition) === null || _f === void 0 ? void 0 : _f.showAs) === 'grid' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('TOGGLETOOLBOX'), placement: "bottom" }, h("yoo-icon", { name: "settings", color: "stable", size: "medium", onClick: () => this.onToogleToolsPanel() }))), h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: isWeb(this.host) ? translate('SHOWDATA') : '', placement: "bottom" }, h("yoo-icon", { name: "maximize", color: "stable", size: "medium", onClick: () => this.onShowDialog() })), this.isInDashboard && ((_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.exporting) === null || _h === void 0 ? void 0 : _h.showTable) !== false && this.type === 'chart' && ((_j = this.definition) === null || _j === void 0 ? void 0 : _j.kpiType) !== 'CampaignsPivotTableKpi' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('SHOWASTABLE'), placement: "bottom" }, h("yoo-icon", { name: "table", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))), ((_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.exporting) === null || _l === void 0 ? void 0 : _l.showTable) !== false && this.type === 'grid' && ((_m = this.definition) === null || _m === void 0 ? void 0 : _m.kpiType) !== 'CampaignsPivotTableKpi' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('SHOWASCHART'), placement: "bottom" }, h("yoo-icon", { name: "chart", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))), this.definition && this.definition.help && this.renderHelpButton(this.definition.help), this.buttons && this.buttons.length > 0 && (h("yoo-icon", { ref: (el) => (iconElement = el), slot: "icon-only", name: "more", color: "stable", size: "medium", onClick: (ev) => this.onShowMore(ev, iconElement) })))), h("slot", { name: "start" }), !this.isFullScreen && !this.hideHeader && ((_o = this.definition) === null || _o === void 0 ? void 0 : _o.description) && this.isInScrollView && (h("yoo-truncate", { class: { subheading: true, grid: ((_p = this.definition) === null || _p === void 0 ? void 0 : _p.showAs) === 'grid' }, showEllipsisButton: true, maxLength: 150, content: translateMulti(this.definition.description) })), this.isInScrollView && h("div", { class: "content" }, this.renderKpiContent()), h("slot", null))));
-  }
-  static get is() { return "yoo-kpi-container"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kpi-container.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kpi-container.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "chartClass": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "chart-class",
-        "reflect": false
-      },
-      "heading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "heading",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IKpiTypes",
-          "resolved": "\"calendar\" | \"carousel\" | \"chart\" | \"chartio\" | \"external\" | \"grid\" | \"map\" | \"micro\"",
-          "references": {
-            "IKpiTypes": {
-              "location": "import",
-              "path": "@yobi/interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false
-      },
-      "config": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "config",
-        "reflect": false
-      },
-      "isInDashboard": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-in-dashboard",
-        "reflect": false
-      },
-      "disableResize": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disable-resize",
-        "reflect": false
-      },
-      "size": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false
-      },
-      "isFullScreen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-full-screen",
-        "reflect": false
-      },
-      "isFullHeight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-full-height",
-        "reflect": false
-      },
-      "definition": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IChartDefinition",
-          "resolved": "IChartDefinition",
-          "references": {
-            "IChartDefinition": {
-              "location": "import",
-              "path": "@shared/interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "forceAnimatedIllustration": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "force-animated-illustration",
-        "reflect": false
-      },
-      "isFormPreview": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-form-preview",
-        "reflect": false
-      },
-      "hideHeader": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-header",
-        "reflect": false
-      },
-      "isEditMode": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-edit-mode",
-        "reflect": false
-      },
-      "hasError": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "has-error",
-        "reflect": false
-      },
-      "hasErrorTooMuchData": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "has-error-too-much-data",
-        "reflect": false
-      },
-      "dontRender": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dont-render",
-        "reflect": false
-      },
-      "disableAnimation": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disable-animation",
-        "reflect": false
-      },
-      "chartTypes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "TChartType[]",
-          "resolved": "(\"column\" | \"line\" | \"spline\" | \"area\" | \"areaspline\" | \"bar\" | \"radar\" | \"pie\" | \"doughnut\" | \"treemap\" | \"scatter\" | \"heatmap\" | \"wordcloud\")[]",
-          "references": {
-            "TChartType": {
-              "location": "import",
-              "path": "@shared/interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isLoading": {},
-      "isInScrollView": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "showDetail",
-        "name": "showDetail",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }, {
-        "method": "kpiClick",
-        "name": "kpiClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "kpiLinkClick",
-        "name": "kpiLinkClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "kpiDoubleClick",
-        "name": "kpiDoubleClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        }
-      }, {
-        "method": "kpiLegendItemClick",
-        "name": "kpiLegendItemClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "kpiToggleTable",
-        "name": "kpiToggleTable",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "toggleInScrollView",
-        "name": "toggleInScrollView",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "kpiEdit",
-        "name": "kpiEdit",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "kpiEdited",
-        "name": "kpiEdited",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "IChartDefinition",
-          "resolved": "IChartDefinition",
-          "references": {
-            "IChartDefinition": {
-              "location": "import",
-              "path": "@shared/interfaces"
-            }
-          }
-        }
-      }, {
-        "method": "kpiUpdateColors",
-        "name": "kpiUpdateColors",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "kpiDelete",
-        "name": "kpiDelete",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "kpiDuplicate",
-        "name": "kpiDuplicate",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "kpiCopyToAnotherTab",
-        "name": "kpiCopyToAnotherTab",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "kpiChartChangeType",
-        "name": "kpiChartChangeType",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "TChartType",
-          "resolved": "\"area\" | \"areaspline\" | \"bar\" | \"column\" | \"doughnut\" | \"heatmap\" | \"line\" | \"pie\" | \"radar\" | \"scatter\" | \"spline\" | \"treemap\" | \"wordcloud\"",
-          "references": {
-            "TChartType": {
-              "location": "import",
-              "path": "@shared/interfaces"
-            }
-          }
-        }
-      }, {
-        "method": "kpiToggleToolsPanel",
-        "name": "kpiToggleToolsPanel",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "kpiViewInfo",
-        "name": "kpiViewInfo",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "kpiRefresh",
-        "name": "kpiRefresh",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getSVG": {
-        "complexType": {
-          "signature": "(width: any, height: any, x: any, y: any, margin?: number) => Promise<string>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<string>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "toogleToolsPanel": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "resize": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "setLoading": {
-        "complexType": {
-          "signature": "(loading: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "isEditMode",
-        "methodName": "onChangeEditMode"
-      }];
-  }
-}