@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

package/dist/collection/components/kup-echart/kup-echart.js

@@ -0,0 +1,1165 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _KupEchart_instances, _KupEchart_kupManager, _KupEchart_resizeTimeout, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_themeColors, _KupEchart_themeColorBrighter, _KupEchart_themeColorDarker, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_mapObj, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_fetchThemeColors;
+import { Component, Element, Event, forceUpdate, getAssetPath, Host, h, Method, Prop, } from '@stencil/core';
+import * as echarts from 'echarts';
+import { KupEchartLegendPlacement, KupEchartMaps, KupEchartProps, KupEchartTypes, } from './kup-echart-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { getColumnByName } from '../../utils/cell-utils';
+export class KupEchart {
+  constructor() {
+    _KupEchart_instances.add(this);
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Sets the axis of the chart.
+     * @default ""
+     */
+    this.axis = '';
+    /**
+     * Title of the graph.
+     * @default null
+     */
+    this.chartTitle = null;
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * The actual data of the chart.
+     * @default null
+     */
+    this.data = null;
+    /**
+     * Sets the position of the legend. Supported values: bottom, left, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work.
+     * @default KupEchartLegendPlacement.RIGHT
+     */
+    this.legend = KupEchartLegendPlacement.RIGHT;
+    /**
+     * Choose which map you want to view, supported values: "europe", "africa", "asia", "oceania", "america", "italy" and "world". It's possible to supply a custom JSON too.
+     * @default null
+     */
+    this.map = null;
+    /**
+     * The data series to be displayed. They must be of the same type.
+     * @default []
+     */
+    this.series = [];
+    /**
+     * The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).
+     * @default "100%"
+     */
+    this.sizeX = '100%';
+    /**
+     * The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).
+     * @default "100%"
+     */
+    this.sizeY = '100%';
+    /**
+     * The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter.
+     * @default [KupEchartTypes.LINE]
+     */
+    this.types = [KupEchartTypes.LINE];
+    /**
+     * Customization options for the x Axis.
+     * @default null
+     */
+    this.xAxis = null;
+    /**
+     * Customization options for the y Axis.
+     * @default null
+     */
+    this.yAxis = null;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    _KupEchart_kupManager.set(this, kupManagerInstance());
+    _KupEchart_resizeTimeout.set(this, void 0);
+    _KupEchart_chartContainer.set(this, void 0);
+    _KupEchart_chartEl.set(this, void 0);
+    _KupEchart_gaussianDatasets.set(this, void 0);
+    _KupEchart_sortedDataset.set(this, null);
+    _KupEchart_themeBorder.set(this, null);
+    _KupEchart_themeBackground.set(this, null);
+    _KupEchart_themeColors.set(this, null);
+    _KupEchart_themeColorBrighter.set(this, null);
+    _KupEchart_themeColorDarker.set(this, null);
+    _KupEchart_themeFont.set(this, null);
+    _KupEchart_themeText.set(this, null);
+    _KupEchart_mapObj.set(this, {});
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupEchartProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * This method is invoked by KupManager whenever the component changes size.
+   */
+  async resizeCallback() {
+    window.clearTimeout(__classPrivateFieldGet(this, _KupEchart_resizeTimeout, "f"));
+    __classPrivateFieldSet(this, _KupEchart_resizeTimeout, window.setTimeout(() => this.refresh(), 300), "f");
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupEchartProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.register(this);
+  }
+  componentDidLoad() {
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").resize.observe(this.rootElement);
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logRender(this, false);
+    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_fetchThemeColors).call(this);
+  }
+  componentDidRender() {
+    if (this.data && this.data.columns && this.data.rows) {
+      __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_initChart).call(this);
+    }
+    else {
+      __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logMessage(this, 'Insufficient data.(' + this.data + ')', KupDebugCategory.WARNING);
+    }
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logRender(this, true);
+  }
+  render() {
+    const style = {
+      '--kup_echart_height': this.sizeY ? this.sizeY : '100%',
+      '--kup_echart_width': this.sizeX ? this.sizeX : '100%',
+    };
+    return (h(Host, { style: style },
+      h("style", null, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId, ref: (chartContainer) => (__classPrivateFieldSet(this, _KupEchart_chartContainer, chartContainer, "f")) })));
+  }
+  disconnectedCallback() {
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.unregister(this);
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").resize.unobserve(this.rootElement);
+  }
+  static get is() { return "kup-echart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["kup-echart.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["kup-echart.css"]
+  }; }
+  static get assetsDirs() { return ["assets/maps"]; }
+  static get properties() { return {
+    "axis": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"\""
+          }],
+        "text": "Sets the axis of the chart."
+      },
+      "attribute": "axis",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "chartTitle": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "KupEchartTitle",
+        "resolved": "KupEchartTitle",
+        "references": {
+          "KupEchartTitle": {
+            "location": "import",
+            "path": "./kup-echart-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Title of the graph."
+      },
+      "defaultValue": "null"
+    },
+    "customStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"\""
+          }, {
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+          }],
+        "text": "Custom style of the component."
+      },
+      "attribute": "custom-style",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "data": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "KupDataDataset",
+        "resolved": "KupDataDataset",
+        "references": {
+          "KupDataDataset": {
+            "location": "import",
+            "path": "../../managers/kup-data/kup-data-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "The actual data of the chart."
+      },
+      "defaultValue": "null"
+    },
+    "legend": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "KupEchartLegendPlacement",
+        "resolved": "KupEchartLegendPlacement.BOTTOM | KupEchartLegendPlacement.LEFT | KupEchartLegendPlacement.RIGHT | KupEchartLegendPlacement.TOP",
+        "references": {
+          "KupEchartLegendPlacement": {
+            "location": "import",
+            "path": "./kup-echart-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "KupEchartLegendPlacement.RIGHT"
+          }],
+        "text": "Sets the position of the legend. Supported values: bottom, left, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work."
+      },
+      "attribute": "legend",
+      "reflect": false,
+      "defaultValue": "KupEchartLegendPlacement.RIGHT"
+    },
+    "map": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "KupEchartMaps | string | GeoJSON",
+        "resolved": "Feature<Geometry, { [name: string]: any; }> | FeatureCollection<Geometry, { [name: string]: any; }> | GeometryCollection | LineString | MultiLineString | MultiPoint | MultiPolygon | Point | Polygon | string",
+        "references": {
+          "KupEchartMaps": {
+            "location": "import",
+            "path": "./kup-echart-declarations"
+          },
+          "GeoJSON": {
+            "location": "import",
+            "path": "geojson"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Choose which map you want to view, supported values: \"europe\", \"africa\", \"asia\", \"oceania\", \"america\", \"italy\" and \"world\". It's possible to supply a custom JSON too."
+      },
+      "attribute": "map",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "series": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "[]"
+          }],
+        "text": "The data series to be displayed. They must be of the same type."
+      },
+      "defaultValue": "[]"
+    },
+    "sizeX": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"100%\""
+          }],
+        "text": "The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
+      },
+      "attribute": "size-x",
+      "reflect": false,
+      "defaultValue": "'100%'"
+    },
+    "sizeY": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"100%\""
+          }],
+        "text": "The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
+      },
+      "attribute": "size-y",
+      "reflect": false,
+      "defaultValue": "'100%'"
+    },
+    "types": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "KupEchartTypes[]",
+        "resolved": "KupEchartTypes[]",
+        "references": {
+          "KupEchartTypes": {
+            "location": "import",
+            "path": "./kup-echart-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "[KupEchartTypes.LINE]"
+          }],
+        "text": "The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter."
+      },
+      "defaultValue": "[KupEchartTypes.LINE]"
+    },
+    "xAxis": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "XAXisComponentOption",
+        "resolved": "AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"xAxis\"; } | CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"xAxis\"; } | LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"xAxis\"; } | TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"xAxis\"; } | ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"xAxis\"; }",
+        "references": {
+          "XAXisComponentOption": {
+            "location": "import",
+            "path": "echarts"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Customization options for the x Axis."
+      },
+      "defaultValue": "null"
+    },
+    "yAxis": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "YAXisComponentOption",
+        "resolved": "AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"yAxis\"; } | CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"yAxis\"; } | LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"yAxis\"; } | TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"yAxis\"; } | ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: \"yAxis\"; }",
+        "references": {
+          "YAXisComponentOption": {
+            "location": "import",
+            "path": "echarts"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Customization options for the y Axis."
+      },
+      "defaultValue": "null"
+    }
+  }; }
+  static get events() { return [{
+      "method": "kupEchartClick",
+      "name": "kup-echart-click",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "KupEchartClickEventPayload",
+        "resolved": "KupEchartClickEventPayload",
+        "references": {
+          "KupEchartClickEventPayload": {
+            "location": "import",
+            "path": "./kup-echart-declarations"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "getProps": {
+      "complexType": {
+        "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
+              }],
+            "text": "- When provided and true, the result will be the list of props with their description."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<GenericObject>"
+      },
+      "docs": {
+        "text": "Used to retrieve component's props values.",
+        "tags": [{
+            "name": "param",
+            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+          }, {
+            "name": "returns",
+            "text": "List of props as object, each key will be a prop."
+          }]
+      }
+    },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "This method is used to trigger a new render of the component.",
+        "tags": []
+      }
+    },
+    "resizeCallback": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "This method is invoked by KupManager whenever the component changes size.",
+        "tags": []
+      }
+    },
+    "setProps": {
+      "complexType": {
+        "signature": "(props: GenericObject) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
+              }],
+            "text": "- Object containing props that will be set to the component."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the props to the component.",
+        "tags": [{
+            "name": "param",
+            "text": "props - Object containing props that will be set to the component."
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "rootElement"; }
+}
+_KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(), _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _KupEchart_gaussianDatasets = new WeakMap(), _KupEchart_sortedDataset = new WeakMap(), _KupEchart_themeBorder = new WeakMap(), _KupEchart_themeBackground = new WeakMap(), _KupEchart_themeColors = new WeakMap(), _KupEchart_themeColorBrighter = new WeakMap(), _KupEchart_themeColorDarker = new WeakMap(), _KupEchart_themeFont = new WeakMap(), _KupEchart_themeText = new WeakMap(), _KupEchart_mapObj = new WeakMap(), _KupEchart_instances = new WeakSet(), _KupEchart_initChart = function _KupEchart_initChart() {
+  if (__classPrivateFieldGet(this, _KupEchart_chartEl, "f")) {
+    echarts.dispose(__classPrivateFieldGet(this, _KupEchart_chartContainer, "f"));
+  }
+  if (this.types && this.types.length > 0) {
+    __classPrivateFieldSet(this, _KupEchart_chartEl, echarts.init(__classPrivateFieldGet(this, _KupEchart_chartContainer, "f")), "f");
+    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createChart).call(this);
+  }
+  else {
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logMessage(this, "Can't intialize chart without specifiying at least 1 type.", KupDebugCategory.WARNING);
+  }
+}, _KupEchart_createChart = async function _KupEchart_createChart() {
+  __classPrivateFieldSet(this, _KupEchart_sortedDataset, null, "f");
+  if (!this.types.includes(KupEchartTypes.GAUSSIAN) &&
+    (!this.axis ||
+      !__classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+        name: this.axis,
+      }).length)) {
+    for (let index = 0; index < this.data.columns.length; index++) {
+      const column = this.data.columns[index];
+      if (!__classPrivateFieldGet(this, _KupEchart_kupManager, "f").objects.isNumber(column.obj)) {
+        this.axis = column.name;
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logMessage(this, 'Axis overridden. (' + this.axis + ')', KupDebugCategory.WARNING);
+        break;
+      }
+    }
+  }
+  let options = null;
+  const firstType = this.types[0];
+  switch (firstType) {
+    case KupEchartTypes.GAUSSIAN:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setGaussianOptions).call(this);
+      break;
+    case KupEchartTypes.MAP:
+      let stringifiedMap = '';
+      if (this.map) {
+        if (this.map.features) {
+          stringifiedMap = JSON.stringify(this.map);
+        }
+        else if (Object.values(KupEchartMaps).includes(this.map)) {
+          stringifiedMap = await (await fetch(getAssetPath(`./assets/maps/${this.map}.json`))).text();
+        }
+        else {
+          stringifiedMap = this.map;
+        }
+      }
+      if (!stringifiedMap) {
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logMessage(this, "Couldn't fetch map JSON.", KupDebugCategory.WARNING);
+        return;
+      }
+      echarts.registerMap(this.rootElement.id ? this.rootElement.id : '', stringifiedMap);
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setMapOptions).call(this, stringifiedMap);
+      break;
+    case KupEchartTypes.PIE:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setPieOptions).call(this);
+      break;
+    default:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
+      break;
+  }
+  __classPrivateFieldGet(this, _KupEchart_chartEl, "f").setOption(options, true);
+  __classPrivateFieldGet(this, _KupEchart_chartEl, "f").on('click', (e) => {
+    const column = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+      title: e.seriesName,
+    })[0];
+    let row = null;
+    if (e.seriesType === 'map') {
+      row = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.row.find(this.data, {
+        value: __classPrivateFieldGet(this, _KupEchart_mapObj, "f")[e.name],
+      })[0];
+    }
+    else if (__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f") && e.seriesType === 'bar') {
+      row = __classPrivateFieldGet(this, _KupEchart_sortedDataset, "f").rows[e.dataIndex];
+    }
+    else if (!Array.isArray(e.data)) {
+      row = this.data.rows[e.dataIndex];
+    }
+    this.kupEchartClick.emit({
+      comp: this,
+      id: this.rootElement.id,
+      column: column,
+      row: row,
+      x: Array.isArray(e.data) ? e.data[0] : e.name,
+      y: Array.isArray(e.data) ? e.data[1] : e.value,
+    });
+  });
+}, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
+  const x = [];
+  if (!dataset)
+    dataset = this.data;
+  if (!this.axis) {
+    for (let i = 0; i < dataset.rows.length; i++) {
+      const cells = dataset.rows[i].cells;
+      const treatedCells = {};
+      for (const key in cells) {
+        const cell = cells[key];
+        const title = getColumnByName(dataset.columns, key).title;
+        treatedCells[title] = cell;
+      }
+      if (treatedCells[0]) {
+        x.push(treatedCells[0].value);
+      }
+    }
+  }
+  else {
+    for (let i = 0; i < dataset.rows.length; i++) {
+      const cells = dataset.rows[i].cells;
+      const treatedCells = {};
+      const title = getColumnByName(dataset.columns, this.axis).title;
+      treatedCells[title] = cells[this.axis];
+      x.push(treatedCells[title].value);
+    }
+  }
+  return x;
+}, _KupEchart_createY = function _KupEchart_createY() {
+  const y = {};
+  if (this.series && this.series.length > 0) {
+    for (const row of this.data.rows) {
+      for (const key of Object.keys(row.cells)) {
+        if (key != this.axis) {
+          if (this.series.includes(key)) {
+            const cell = row.cells[key];
+            const value = cell.value;
+            const column = getColumnByName(this.data.columns, key);
+            if (column) {
+              const title = column.title;
+              if (!y[title]) {
+                y[title] = [];
+              }
+              y[title].push(value);
+            }
+          }
+        }
+      }
+    }
+  }
+  else {
+    for (const row of this.data.rows) {
+      for (const key of Object.keys(row.cells)) {
+        if (key !== this.axis) {
+          const cell = row.cells[key];
+          const value = cell.value;
+          const column = getColumnByName(this.data.columns, key);
+          if (column) {
+            const title = column.title;
+            if (!y[title]) {
+              y[title] = [];
+            }
+            y[title].push(value);
+          }
+        }
+      }
+    }
+  }
+  return y;
+}, _KupEchart_setAxisColors = function _KupEchart_setAxisColors() {
+  return {
+    axisLabel: {
+      color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+      fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
+    },
+    axisLine: { lineStyle: { color: __classPrivateFieldGet(this, _KupEchart_themeText, "f") } },
+    axisTick: { lineStyle: { color: __classPrivateFieldGet(this, _KupEchart_themeBorder, "f") } },
+    splitLine: { lineStyle: { color: __classPrivateFieldGet(this, _KupEchart_themeBorder, "f") } },
+  };
+}, _KupEchart_setLegend = function _KupEchart_setLegend(y) {
+  const data = [];
+  for (let key in y) {
+    data.push(key);
+  }
+  return {
+    data: data,
+    [this.legend]: 0,
+    textStyle: {
+      color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+      fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
+    },
+  };
+}, _KupEchart_setTitle = function _KupEchart_setTitle() {
+  return {
+    text: this.chartTitle ? this.chartTitle.value : undefined,
+    [this.chartTitle && this.chartTitle.position
+      ? this.chartTitle.position
+      : 'left']: 0,
+    textStyle: {
+      color: this.chartTitle && this.chartTitle.color
+        ? this.chartTitle.color
+        : 'black',
+      fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
+      fontSize: this.chartTitle && this.chartTitle.size
+        ? this.chartTitle.size
+        : 16,
+    },
+  };
+}, _KupEchart_setTooltip = function _KupEchart_setTooltip() {
+  return {
+    backgroundColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
+    textStyle: {
+      color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+      fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
+    },
+  };
+}, _KupEchart_setVisualMap = function _KupEchart_setVisualMap(max, min, colors, hasNumericValues) {
+  const opts = {
+    visualMap: {
+      show: false,
+    },
+  };
+  const colorRange = !hasNumericValues
+    ? undefined
+    : colors.length > 0
+      ? { inRange: { color: colors }, min: min, max: max }
+      : {
+        inRange: {
+          color: [__classPrivateFieldGet(this, _KupEchart_themeColorBrighter, "f"), __classPrivateFieldGet(this, _KupEchart_themeColorDarker, "f")],
+        },
+        min: min,
+        max: max,
+      };
+  if (colorRange) {
+    opts.visualMap = Object.assign(Object.assign(Object.assign({}, opts.visualMap), colorRange), { calculable: true, formatter: (value) => {
+        return __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(value);
+      }, min: min, max: max, show: true });
+  }
+  return opts;
+}, _KupEchart_setMapOptions = function _KupEchart_setMapOptions(map) {
+  const mapJson = JSON.parse(map);
+  const isoA2 = [];
+  const names = [];
+  for (let index = 0; index < mapJson.features.length; index++) {
+    const feature = mapJson.features[index];
+    isoA2.push(feature.properties.iso_a2);
+    names.push(feature.properties.name);
+  }
+  const y = {};
+  let objKey;
+  for (const row of this.data.rows) {
+    objKey = row.cells[this.axis].value;
+    y[objKey] = [];
+    for (const key of Object.keys(row.cells)) {
+      const cell = row.cells[key];
+      const value = cell.value;
+      if (!this.axis.includes(key)) {
+        if (this.series &&
+          this.series.length > 0 &&
+          !this.series.includes(key)) {
+          continue;
+        }
+        y[objKey].push(value);
+      }
+    }
+  }
+  const colors = [];
+  const data = [];
+  let hasNumericValues = false;
+  let min = 0;
+  let max = 0;
+  for (let key in y) {
+    let color = null;
+    let n = null;
+    for (let index = 0; index < y[key].length; index++) {
+      const value = y[key][index];
+      const hexColor = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(value).hexColor;
+      if (hexColor) {
+        color = hexColor;
+      }
+      else {
+        n = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.numberify(value);
+        if (n > max) {
+          max = n;
+        }
+        if (n < min) {
+          min = n;
+        }
+      }
+    }
+    const keyIsName = names.includes(key);
+    if (n !== null) {
+      data.push({
+        name: keyIsName ? key : names[isoA2.indexOf(key)],
+        value: n ? n : undefined,
+      });
+      if (color) {
+        colors.push(color);
+      }
+      hasNumericValues = true;
+    }
+    else if (color) {
+      data.push({
+        itemStyle: {
+          color: color,
+        },
+        name: keyIsName ? key : names[isoA2.indexOf(key)],
+      });
+    }
+    __classPrivateFieldGet(this, _KupEchart_mapObj, "f")[keyIsName
+      ? names[names.indexOf(key)]
+      : names[isoA2.indexOf(key)]] = key;
+  }
+  const tipCb = (params) => {
+    const value = params.value;
+    if (isNaN(value) ||
+      value === null ||
+      value === undefined) {
+      return null;
+    }
+    else {
+      return (params.name +
+        ': ' +
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(value));
+    }
+  };
+  const echartOption = Object.assign({ emphasis: {
+      label: {
+        show: true,
+      },
+    }, title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this), tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { formatter: tipCb, showDelay: 0, trigger: 'item', transitionDuration: 0.2 }), series: [
+      {
+        data: data,
+        emphasis: {
+          label: {
+            show: true,
+          },
+        },
+        map: this.rootElement.id ? this.rootElement.id : '',
+        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+          name: this.axis,
+        })[0].title,
+        roam: true,
+        type: 'map',
+      },
+    ] }, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setVisualMap).call(this, max, min, colors, hasNumericValues));
+  return echartOption;
+}, _KupEchart_setPieOptions = function _KupEchart_setPieOptions() {
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+  const data = [];
+  for (let key in y) {
+    let sum = 0;
+    for (let j = 0; j < y[key].length; j++) {
+      sum = sum + parseFloat(y[key][j]);
+    }
+    data.push({
+      name: key,
+      value: sum,
+    });
+  }
+  return {
+    color: __classPrivateFieldGet(this, _KupEchart_themeColors, "f"),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }),
+    series: [
+      {
+        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+          name: this.axis,
+        })[0].title,
+        type: 'pie',
+        data: data,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  };
+}, _KupEchart_setGaussianOptions = function _KupEchart_setGaussianOptions() {
+  let x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+  const series = [];
+  const mixedSeries = this.types.filter((i) => i != KupEchartTypes.GAUSSIAN).length > 0;
+  const needSortDataset = this.types.filter((j) => j != KupEchartTypes.GAUSSIAN).length == 1;
+  __classPrivateFieldSet(this, _KupEchart_gaussianDatasets, {}, "f");
+  let i = 0;
+  for (const key in y) {
+    let type;
+    if (this.types[i]) {
+      type = this.types[i];
+    }
+    else {
+      type = KupEchartTypes.GAUSSIAN;
+    }
+    let values = null;
+    const column = this.data.columns.find((col) => col.title === key);
+    if (type == KupEchartTypes.GAUSSIAN) {
+      if (!__classPrivateFieldGet(this, _KupEchart_kupManager, "f").objects.isNumber(column.obj)) {
+        const newDataset = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.distinct(this.data, [column.name]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(newDataset, [
+          column.name,
+        ]);
+        __classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column.name] = newDataset;
+      }
+      else {
+        values = y[key];
+      }
+    }
+    else {
+      if (needSortDataset) {
+        // if there is only one series other than the Gaussian then I apply the sorting algorithm that arranges the data in "mountain"
+        __classPrivateFieldSet(this, _KupEchart_sortedDataset, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.sort(this.data, 'normalDistribution', column.name), "f");
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"), [column.name]);
+        x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this, __classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"));
+      }
+      else {
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(this.data, [
+          column.name,
+        ]);
+      }
+    }
+    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, values, key, mixedSeries, needSortDataset);
+    i++;
+  }
+  // "any" because type is mismanaged inside echarts library
+  const tipCb = (params) => {
+    params.sort((a, b) => a.seriesIndex - b.seriesIndex);
+    const wrapper = '<div style="display: flex; flex-direction: column">';
+    let format = wrapper;
+    let count = 0;
+    for (let index = 0; index < params.length; index++) {
+      const param = params[index];
+      if (this.types[param.seriesIndex] == undefined ||
+        this.types[param.seriesIndex] == KupEchartTypes.GAUSSIAN) {
+        const value = param.value[0];
+        const x = `<div style="color: ${param.color};"><span style="margin-right: 5px;"><strong>x:</strong></span><span>${param.value[0]}</span></div>`;
+        if (!index) {
+          format += x;
+        }
+        const column = this.data.columns.find((col) => col.title === param.seriesName).name;
+        const filters = {
+          columns: [column],
+          range: {
+            max: value + (value / 100) * 50,
+            min: value - (value / 100) * 50,
+          },
+        };
+        const rows = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.row.find(__classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column]
+          ? __classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column]
+          : this.data, filters);
+        for (let index = 0; index < rows.length; index++) {
+          const row = rows[index];
+          const cells = row.cells;
+          if (cells[this.axis] || cells[column].title) {
+            let title = '';
+            if (cells[this.axis]) {
+              title = cells[this.axis].value;
+            }
+            else {
+              title = cells[column].title;
+            }
+            const remainder = count % 4;
+            if (!remainder) {
+              if (count) {
+                format += `</div>`;
+              }
+              format += `<div style="display: flex; flex-direction: row;">`;
+            }
+            const style = `style="color: ${param.color}; margin-right: 5px"`;
+            format += `<span ${style}><strong>${title}</strong>: ${cells[column].value}</span>`;
+            count++;
+          }
+        }
+        if (format !== wrapper)
+          format += '</div>';
+      }
+      else {
+        const style = `style="color: ${param.color}; margin-right: 5px"`;
+        format += `<div ${style}><strong>${param.name}</strong>: ${param.value}</div>`;
+      }
+    }
+    if (format === wrapper) {
+      return null;
+    }
+    else {
+      return format;
+    }
+  };
+  // list of x-axis, one for the non-Gaussian series which appears on the left and one for the Gaussian series on the right.
+  const xAxisTmp = [
+    Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { data: x.length > 0 ? x : null, type: 'category' }), this.xAxis),
+    Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { type: 'value', max: 'dataMax', min: 'dataMin' }), this.xAxis),
+  ];
+  // list of y-axis, one for the non-Gaussian series which appears at the bottom and one for the Gaussian series at the top.
+  const yAxisTmp = [
+    Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { type: 'value' }), this.yAxis),
+    Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { type: 'value' }), this.yAxis),
+  ];
+  // If the series are not mixed, then I eliminate the extra axis
+  if (!mixedSeries) {
+    xAxisTmp.splice(0, 1);
+    yAxisTmp.splice(0, 1);
+  }
+  return {
+    color: __classPrivateFieldGet(this, _KupEchart_themeColors, "f"),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
+    series: series,
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'axis', formatter: tipCb }),
+    xAxis: xAxisTmp,
+    yAxis: yAxisTmp,
+  };
+}, _KupEchart_addSeries = function _KupEchart_addSeries(type, series, values, key, mixedSeries = false, needSortDataset = false) {
+  switch (type) {
+    case KupEchartTypes.GAUSSIAN:
+      series.push({
+        data: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.normalDistribution(values),
+        name: key,
+        showSymbol: false,
+        smooth: true,
+        type: 'line',
+        xAxisIndex: mixedSeries ? 1 : 0,
+        yAxisIndex: mixedSeries ? 1 : 0,
+      });
+      break;
+    case KupEchartTypes.BAR:
+      series.push({
+        data: values,
+        name: key,
+        type: 'bar',
+        barWidth: needSortDataset ? '100%' : undefined,
+      });
+      break;
+    case KupEchartTypes.SCATTER:
+      series.push({
+        data: values,
+        name: key,
+        type: 'scatter',
+      });
+      break;
+    case KupEchartTypes.LINE:
+    default:
+      series.push({
+        data: values,
+        name: key,
+        type: 'line',
+      });
+      break;
+  }
+}, _KupEchart_setOptions = function _KupEchart_setOptions() {
+  const x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+  let i = 0;
+  const series = [];
+  for (const key in y) {
+    const values = y[key];
+    let type;
+    if (this.types[i]) {
+      type = this.types[i];
+    }
+    else {
+      type = KupEchartTypes.LINE;
+    }
+    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, values, key);
+    i++;
+  }
+  return {
+    color: __classPrivateFieldGet(this, _KupEchart_themeColors, "f"),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
+    series: series,
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'axis' }),
+    xAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { data: x, type: 'category' }), this.xAxis),
+    yAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { type: 'value' }), this.yAxis),
+  };
+}, _KupEchart_fetchThemeColors = function _KupEchart_fetchThemeColors() {
+  let colorArray = [];
+  let key = '--kup-chart-color-';
+  for (let index = 1; __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[key + index]; index++) {
+    colorArray.push(__classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[key + index]);
+  }
+  __classPrivateFieldSet(this, _KupEchart_themeBackground, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BACKGROUND], "f");
+  __classPrivateFieldSet(this, _KupEchart_themeBorder, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BORDER], "f");
+  __classPrivateFieldSet(this, _KupEchart_themeFont, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars['--kup-font-family'], "f");
+  __classPrivateFieldSet(this, _KupEchart_themeText, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.TEXT], "f");
+  __classPrivateFieldSet(this, _KupEchart_themeColors, colorArray, "f");
+  const colorCheck = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(colorArray[0]);
+  __classPrivateFieldSet(this, _KupEchart_themeColorDarker, `hsl(${colorCheck.hue}, ${colorCheck.saturation},  ${(parseFloat(colorCheck.lightness) - 30).toString()}%)`, "f");
+  __classPrivateFieldSet(this, _KupEchart_themeColorBrighter, `hsl(${colorCheck.hue}, ${colorCheck.saturation}, ${(parseFloat(colorCheck.lightness) + 30).toString()}%)`, "f");
+};