@sme.up/ketchup 8.0.1 → 8.1.0

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

@@ -1,1437 +1,1437 @@
-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_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _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_setColors, _KupEchart_checks;
-import { forceUpdate, getAssetPath, Host, h, } 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';
-import { KupDataNewColumnTypes, } from '../../managers/kup-data/kup-data-declarations';
-export class KupEchart {
-  constructor() {
-    _KupEchart_instances.add(this);
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    _KupEchart_chartContainer.set(this, void 0);
-    _KupEchart_chartEl.set(this, void 0);
-    _KupEchart_gaussianDatasets.set(this, void 0);
-    _KupEchart_kupManager.set(this, kupManagerInstance());
-    _KupEchart_mapObj.set(this, {});
-    _KupEchart_resizeTimeout.set(this, void 0);
-    _KupEchart_sortedDataset.set(this, null);
-    _KupEchart_themeBorder.set(this, null);
-    _KupEchart_themeBackground.set(this, null);
-    _KupEchart_minColorHeatMap.set(this, null);
-    _KupEchart_maxColorHeatMap.set(this, null);
-    _KupEchart_themeFont.set(this, null);
-    _KupEchart_themeText.set(this, null);
-    this.axis = '';
-    this.colors = [];
-    this.consistencyCheck = false;
-    this.chartTitle = null;
-    this.customStyle = '';
-    this.data = null;
-    this.legend = KupEchartLegendPlacement.RIGHT;
-    this.map = null;
-    this.series = [];
-    this.sizeX = '100%';
-    this.sizeY = '100%';
-    this.types = [KupEchartTypes.LINE];
-    this.xAxis = null;
-    this.yAxis = null;
-  }
-  /*-------------------------------------------------*/
-  /*           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(() => {
-      if (__classPrivateFieldGet(this, _KupEchart_chartEl, "f")) {
-        const xMin = this.rootElement.clientWidth - 5;
-        const xMax = this.rootElement.clientWidth + 5;
-        const yMin = this.rootElement.clientHeight - 5;
-        const yMax = this.rootElement.clientHeight + 5;
-        const x = __classPrivateFieldGet(this, _KupEchart_chartEl, "f").getWidth();
-        const y = __classPrivateFieldGet(this, _KupEchart_chartEl, "f").getHeight();
-        if (x < xMin || x > xMax || y < yMin || y > yMax) {
-          __classPrivateFieldGet(this, _KupEchart_chartEl, "f").resize();
-        }
-      }
-    }, 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);
-    if (this.consistencyCheck) {
-      __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_checks).call(this);
-    }
-  }
-  componentDidLoad() {
-    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").resize.observe(this.rootElement);
-    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    __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");
-    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logRender(this, false);
-  }
-  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": true,
-        "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": "''"
-      },
-      "colors": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "[]"
-            }],
-          "text": "Overrides theme's colors."
-        },
-        "defaultValue": "[]"
-      },
-      "consistencyCheck": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "When true, performs checks in order to properly initialize props which could be missing (i.e.: axis).\r\nFor performances purposes, this prop will run only once when the component is initially created."
-        },
-        "attribute": "consistency-check",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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.HIDDEN | 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, hidden. 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<Geometry> | 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_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _KupEchart_gaussianDatasets = new WeakMap(), _KupEchart_kupManager = new WeakMap(), _KupEchart_mapObj = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(), _KupEchart_sortedDataset = new WeakMap(), _KupEchart_themeBorder = new WeakMap(), _KupEchart_themeBackground = new WeakMap(), _KupEchart_minColorHeatMap = new WeakMap(), _KupEchart_maxColorHeatMap = new WeakMap(), _KupEchart_themeFont = new WeakMap(), _KupEchart_themeText = 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");
-  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;
-    case KupEchartTypes.FUNNEL:
-      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_funnelChart).call(this);
-      break;
-    case KupEchartTypes.RADAR:
-      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_radarChart).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_funnelChart = function _KupEchart_funnelChart() {
-  const x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
-  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
-  const cellsSum = {};
-  const data = [];
-  let highest = 0;
-  for (let key in y) {
-    for (let j = 0; j < y[key].length; j++) {
-      if (cellsSum[x[j]]) {
-        cellsSum[x[j]] += parseFloat(y[key][j]);
-      }
-      else {
-        cellsSum[x[j]] = parseFloat(y[key][j]);
-      }
-    }
-  }
-  for (let key in cellsSum) {
-    const value = cellsSum[key];
-    if (value > highest) {
-      highest = value;
-    }
-  }
-  for (const key in cellsSum) {
-    const value = cellsSum[key];
-    data.push({
-      name: key,
-      value: ((100 * value) / highest).toFixed(2),
-    });
-  }
-  return {
-    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(cellsSum).length),
-    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: (value) => {
-        const name = value.data.name;
-        const percentage = value.data
-          .value;
-        return `${name}: <strong>${cellsSum[name]}</strong> (${__classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(percentage)}%)`;
-      } }),
-    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, cellsSum),
-    series: [
-      {
-        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
-          name: this.axis,
-        })[0].title,
-        type: 'funnel',
-        gap: 2,
-        label: {
-          show: true,
-          position: 'right',
-        },
-        labelLine: {
-          lineStyle: {
-            width: 1,
-            type: 'solid',
-          },
-        },
-        itemStyle: {
-          borderColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
-          borderWidth: 1,
-        },
-        left: '10%',
-        right: '10%',
-        width: '80%',
-        data,
-      },
-    ],
-  };
-}, _KupEchart_radarChart = function _KupEchart_radarChart() {
-  const x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
-  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
-  let indicator;
-  const data = [], indicatorData = [], legend = {};
-  for (const [index, values] of x.entries()) {
-    data.push({ name: values, value: [] });
-    legend[values] = index;
-  }
-  for (const key in y) {
-    indicator = {
-      name: key,
-      max: Math.floor(Math.max(...y[key]) * 1.05),
-    };
-    indicatorData.push(indicator);
-    for (const values in y[key]) {
-      data[values].value.push(y[key][values]);
-    }
-  }
-  return {
-    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, x.length),
-    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
-    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
-    radar: {
-      indicator: indicatorData,
-    },
-    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
-    series: [
-      {
-        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
-          name: this.axis,
-        })[0].title,
-        type: 'radar',
-        data: data,
-      },
-    ],
-  };
-}, _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) {
-  if (this.legend === KupEchartLegendPlacement.HIDDEN) {
-    return null;
-  }
-  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,
-        textStyle: { color: __classPrivateFieldGet(this, _KupEchart_themeText, "f") },
-      }
-      : {
-        inRange: {
-          color: [__classPrivateFieldGet(this, _KupEchart_minColorHeatMap, "f"), __classPrivateFieldGet(this, _KupEchart_maxColorHeatMap, "f")],
-        },
-        min: min,
-        max: max,
-        textStyle: { color: __classPrivateFieldGet(this, _KupEchart_themeText, "f") },
-      };
-  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 computedColors = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, 3);
-  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;
-  if (this.axis) {
-    for (const row of this.data.rows) {
-      objKey = row.cells[this.axis].value.trim();
-      if (!y[objKey]) {
-        y[objKey] = [];
-      }
-      for (const key of Object.keys(row.cells)) {
-        const cell = row.cells[key];
-        const value = cell.value.trim();
-        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 ("<div style='min-width: 60px; text-align: center'>" +
-        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(value) +
-        '</div>');
-    }
-  };
-  let axisColumn = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
-    name: this.axis,
-  });
-  let serieTitle = axisColumn && axisColumn.length > 0
-    ? axisColumn[0].title
-    : 'No title';
-  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: {
-          itemStyle: {
-            areaColor: null,
-            borderWidth: 1.5,
-          },
-          label: {
-            color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
-            fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
-            show: true,
-          },
-        },
-        itemStyle: {
-          areaColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
-          borderColor: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
-        },
-        label: {
-          backgroundColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
-          borderColor: __classPrivateFieldGet(this, _KupEchart_themeBorder, "f"),
-          borderRadius: 4,
-          borderWidth: 1,
-          color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
-          fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
-          padding: 4,
-        },
-        map: this.rootElement.id ? this.rootElement.id : '',
-        name: serieTitle,
-        roam: true,
-        select: {
-          itemStyle: {
-            areaColor: computedColors[0],
-          },
-          label: {
-            color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
-            fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
-            show: 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_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length),
-    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;
-  const color = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length);
-  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.getUnivocalValue(newDataset, column);
-        __classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column.name] = newDataset;
-      }
-      else {
-        values = [];
-        for (let index = 0; index < y[key].length; index++) {
-          const element = y[key][index];
-          values.push({ value: element });
-        }
-      }
-    }
-    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);
-        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);
-      }
-    }
-    const justValues = new Array();
-    for (let i = 0; i < values.length; i++) {
-      justValues.push(values[i].value);
-    }
-    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, justValues, key, color[i], 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,
-    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, color, 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:
-    case KupEchartTypes.HBAR:
-      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.AREA:
-    case KupEchartTypes.LINE:
-    default:
-      series.push({
-        data: values,
-        name: key,
-        type: 'line',
-        areaStyle: type === KupEchartTypes.AREA
-          ? {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.25, [
-              {
-                offset: 0,
-                color: `rgba(${__classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(color).rgbValues}, 0.375)`,
-              },
-            ]),
-          }
-          : undefined,
-      });
-      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 = [];
-  const color = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length);
-  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, color[i]);
-    i++;
-  }
-  const isHorizontal = !!(KupEchartTypes.HBAR === this.types[0]);
-  return {
-    color,
-    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: isHorizontal ? undefined : x, type: isHorizontal ? 'value' : 'category' }), this.xAxis),
-    yAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { data: isHorizontal ? x : undefined, type: isHorizontal ? 'category' : 'value' }), this.yAxis),
-  };
-}, _KupEchart_setColors = function _KupEchart_setColors(requiredNumber) {
-  let colorArray = this.colors && this.colors.length > 0 ? [...this.colors] : [];
-  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]);
-  }
-  if (this.colors && this.colors[0]) {
-    __classPrivateFieldSet(this, _KupEchart_maxColorHeatMap, this.colors[0], "f");
-  }
-  else {
-    const colorCheckDark = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(colorArray[0]);
-    __classPrivateFieldSet(this, _KupEchart_maxColorHeatMap, `hsl(${colorCheckDark.hue}, ${colorCheckDark.saturation},  ${(parseFloat(colorCheckDark.lightness) - 30).toString()}%)`, "f");
-  }
-  if (this.colors && this.colors[1]) {
-    __classPrivateFieldSet(this, _KupEchart_minColorHeatMap, this.colors[1], "f");
-  }
-  else {
-    const colorCheckBright = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(colorArray[0]);
-    __classPrivateFieldSet(this, _KupEchart_minColorHeatMap, `hsl(${colorCheckBright.hue}, ${colorCheckBright.saturation}, ${(parseFloat(colorCheckBright.lightness) + 30).toString()}%)`, "f");
-  }
-  for (let index = colorArray.length; requiredNumber && index < requiredNumber; index++) {
-    colorArray.push(__classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.randomColor(128));
-  }
-  return colorArray;
-}, _KupEchart_checks = function _KupEchart_checks() {
-  const gaussianCount = this.types.filter((type) => type === KupEchartTypes.GAUSSIAN).length;
-  const nonGaussianCount = this.types.filter((type) => type === KupEchartTypes.GAUSSIAN).length;
-  // Automatically sets axis when there is no Gaussian chart and when axis is invalid.
-  // The first visible and non-numerical column will be used as axis.
-  if (!gaussianCount &&
-    (!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 (column.visible &&
-        !__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;
-      }
-    }
-  }
-  // Automatically copies columns when there are multiple types and no specified series.
-  // Also 1 types must be GAUSSIAN.
-  if ((!this.series || !this.series.length) &&
-    gaussianCount === 1 &&
-    nonGaussianCount > 0 &&
-    this.data.columns &&
-    ((this.data.columns.length === 1 && !this.axis) ||
-      (this.data.columns.length === 2 && this.axis))) {
-    const series = !this.axis
-      ? this.data.columns[0]
-      : this.data.columns.filter((col) => col.name !== this.axis)[0];
-    for (let index = 0; index < this.types.length; index++) {
-      const type = this.types[index];
-      if (type !== KupEchartTypes.GAUSSIAN) {
-        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.new(this.data, KupDataNewColumnTypes.DUPLICATE, {
-          columns: [series.name],
-          newColumn: Object.assign(Object.assign({}, series), { name: series.name + '_' + index, title: series.title + ` (${type})` }),
-        });
-      }
-    }
-  }
-  // Checks for multiple series with the same column name, creating duplicate columns in case they are present.
-  // When there are more types than series, new series will be automatically added to match chart types.
-  if (this.series &&
-    this.types &&
-    this.series.length &&
-    this.types.length &&
-    this.data.columns) {
-    if (this.types.length > this.series.length) {
-      const lastSerie = this.series[this.series.length - 1];
-      for (let index = this.series.length; index < this.types.length; index++) {
-        this.series.push(lastSerie);
-      }
-    }
-    const occurrences = {};
-    for (let index = 0; index < this.series.length; index++) {
-      const serie = this.series[index];
-      if (Object.keys(occurrences).includes(serie)) {
-        occurrences[serie].push(index);
-      }
-      else {
-        occurrences[serie] = [index];
-      }
-    }
-    for (const key in occurrences) {
-      const indexes = occurrences[key];
-      for (let index = 1; indexes.length > 1 && index < indexes.length; index++) {
-        const seriesIndex = indexes[index];
-        const column = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, { name: this.series[seriesIndex] })[0];
-        const newName = column.name + '_' + index;
-        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.new(this.data, KupDataNewColumnTypes.DUPLICATE, {
-          columns: [column.name],
-          newColumn: Object.assign(Object.assign({}, column), { name: newName, title: column.title +
-              ` (${this.types[seriesIndex]})` }),
-        });
-        this.series[seriesIndex] = newName;
-      }
-    }
-  }
-};
+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_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _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_setColors, _KupEchart_checks;
+import { forceUpdate, getAssetPath, Host, h, } 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';
+import { KupDataNewColumnTypes, } from '../../managers/kup-data/kup-data-declarations';
+export class KupEchart {
+  constructor() {
+    _KupEchart_instances.add(this);
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    _KupEchart_chartContainer.set(this, void 0);
+    _KupEchart_chartEl.set(this, void 0);
+    _KupEchart_gaussianDatasets.set(this, void 0);
+    _KupEchart_kupManager.set(this, kupManagerInstance());
+    _KupEchart_mapObj.set(this, {});
+    _KupEchart_resizeTimeout.set(this, void 0);
+    _KupEchart_sortedDataset.set(this, null);
+    _KupEchart_themeBorder.set(this, null);
+    _KupEchart_themeBackground.set(this, null);
+    _KupEchart_minColorHeatMap.set(this, null);
+    _KupEchart_maxColorHeatMap.set(this, null);
+    _KupEchart_themeFont.set(this, null);
+    _KupEchart_themeText.set(this, null);
+    this.axis = '';
+    this.colors = [];
+    this.consistencyCheck = false;
+    this.chartTitle = null;
+    this.customStyle = '';
+    this.data = null;
+    this.legend = KupEchartLegendPlacement.RIGHT;
+    this.map = null;
+    this.series = [];
+    this.sizeX = '100%';
+    this.sizeY = '100%';
+    this.types = [KupEchartTypes.LINE];
+    this.xAxis = null;
+    this.yAxis = null;
+  }
+  /*-------------------------------------------------*/
+  /*           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(() => {
+      if (__classPrivateFieldGet(this, _KupEchart_chartEl, "f")) {
+        const xMin = this.rootElement.clientWidth - 5;
+        const xMax = this.rootElement.clientWidth + 5;
+        const yMin = this.rootElement.clientHeight - 5;
+        const yMax = this.rootElement.clientHeight + 5;
+        const x = __classPrivateFieldGet(this, _KupEchart_chartEl, "f").getWidth();
+        const y = __classPrivateFieldGet(this, _KupEchart_chartEl, "f").getHeight();
+        if (x < xMin || x > xMax || y < yMin || y > yMax) {
+          __classPrivateFieldGet(this, _KupEchart_chartEl, "f").resize();
+        }
+      }
+    }, 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);
+    if (this.consistencyCheck) {
+      __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_checks).call(this);
+    }
+  }
+  componentDidLoad() {
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").resize.observe(this.rootElement);
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __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");
+    __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logRender(this, false);
+  }
+  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": true,
+        "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": "''"
+      },
+      "colors": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "[]"
+            }],
+          "text": "Overrides theme's colors."
+        },
+        "defaultValue": "[]"
+      },
+      "consistencyCheck": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When true, performs checks in order to properly initialize props which could be missing (i.e.: axis).\r\nFor performances purposes, this prop will run only once when the component is initially created."
+        },
+        "attribute": "consistency-check",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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.HIDDEN | 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, hidden. 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<Geometry> | 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_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _KupEchart_gaussianDatasets = new WeakMap(), _KupEchart_kupManager = new WeakMap(), _KupEchart_mapObj = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(), _KupEchart_sortedDataset = new WeakMap(), _KupEchart_themeBorder = new WeakMap(), _KupEchart_themeBackground = new WeakMap(), _KupEchart_minColorHeatMap = new WeakMap(), _KupEchart_maxColorHeatMap = new WeakMap(), _KupEchart_themeFont = new WeakMap(), _KupEchart_themeText = 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");
+  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;
+    case KupEchartTypes.FUNNEL:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_funnelChart).call(this);
+      break;
+    case KupEchartTypes.RADAR:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_radarChart).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_funnelChart = function _KupEchart_funnelChart() {
+  const x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+  const cellsSum = {};
+  const data = [];
+  let highest = 0;
+  for (let key in y) {
+    for (let j = 0; j < y[key].length; j++) {
+      if (cellsSum[x[j]]) {
+        cellsSum[x[j]] += parseFloat(y[key][j]);
+      }
+      else {
+        cellsSum[x[j]] = parseFloat(y[key][j]);
+      }
+    }
+  }
+  for (let key in cellsSum) {
+    const value = cellsSum[key];
+    if (value > highest) {
+      highest = value;
+    }
+  }
+  for (const key in cellsSum) {
+    const value = cellsSum[key];
+    data.push({
+      name: key,
+      value: ((100 * value) / highest).toFixed(2),
+    });
+  }
+  return {
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(cellsSum).length),
+    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: (value) => {
+        const name = value.data.name;
+        const percentage = value.data
+          .value;
+        return `${name}: <strong>${cellsSum[name]}</strong> (${__classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(percentage)}%)`;
+      } }),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, cellsSum),
+    series: [
+      {
+        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+          name: this.axis,
+        })[0].title,
+        type: 'funnel',
+        gap: 2,
+        label: {
+          show: true,
+          position: 'right',
+        },
+        labelLine: {
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+          },
+        },
+        itemStyle: {
+          borderColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
+          borderWidth: 1,
+        },
+        left: '10%',
+        right: '10%',
+        width: '80%',
+        data,
+      },
+    ],
+  };
+}, _KupEchart_radarChart = function _KupEchart_radarChart() {
+  const x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+  let indicator;
+  const data = [], indicatorData = [], legend = {};
+  for (const [index, values] of x.entries()) {
+    data.push({ name: values, value: [] });
+    legend[values] = index;
+  }
+  for (const key in y) {
+    indicator = {
+      name: key,
+      max: Math.floor(Math.max(...y[key]) * 1.05),
+    };
+    indicatorData.push(indicator);
+    for (const values in y[key]) {
+      data[values].value.push(y[key][values]);
+    }
+  }
+  return {
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, x.length),
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    radar: {
+      indicator: indicatorData,
+    },
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+    series: [
+      {
+        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+          name: this.axis,
+        })[0].title,
+        type: 'radar',
+        data: data,
+      },
+    ],
+  };
+}, _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) {
+  if (this.legend === KupEchartLegendPlacement.HIDDEN) {
+    return null;
+  }
+  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,
+        textStyle: { color: __classPrivateFieldGet(this, _KupEchart_themeText, "f") },
+      }
+      : {
+        inRange: {
+          color: [__classPrivateFieldGet(this, _KupEchart_minColorHeatMap, "f"), __classPrivateFieldGet(this, _KupEchart_maxColorHeatMap, "f")],
+        },
+        min: min,
+        max: max,
+        textStyle: { color: __classPrivateFieldGet(this, _KupEchart_themeText, "f") },
+      };
+  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 computedColors = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, 3);
+  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;
+  if (this.axis) {
+    for (const row of this.data.rows) {
+      objKey = row.cells[this.axis].value.trim();
+      if (!y[objKey]) {
+        y[objKey] = [];
+      }
+      for (const key of Object.keys(row.cells)) {
+        const cell = row.cells[key];
+        const value = cell.value.trim();
+        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 ("<div style='min-width: 60px; text-align: center'>" +
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(value) +
+        '</div>');
+    }
+  };
+  let axisColumn = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+    name: this.axis,
+  });
+  let serieTitle = axisColumn && axisColumn.length > 0
+    ? axisColumn[0].title
+    : 'No title';
+  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: {
+          itemStyle: {
+            areaColor: null,
+            borderWidth: 1.5,
+          },
+          label: {
+            color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+            fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
+            show: true,
+          },
+        },
+        itemStyle: {
+          areaColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
+          borderColor: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+        },
+        label: {
+          backgroundColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
+          borderColor: __classPrivateFieldGet(this, _KupEchart_themeBorder, "f"),
+          borderRadius: 4,
+          borderWidth: 1,
+          color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+          fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
+          padding: 4,
+        },
+        map: this.rootElement.id ? this.rootElement.id : '',
+        name: serieTitle,
+        roam: true,
+        select: {
+          itemStyle: {
+            areaColor: computedColors[0],
+          },
+          label: {
+            color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+            fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
+            show: 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_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length),
+    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;
+  const color = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length);
+  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.getUnivocalValue(newDataset, column);
+        __classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column.name] = newDataset;
+      }
+      else {
+        values = [];
+        for (let index = 0; index < y[key].length; index++) {
+          const element = y[key][index];
+          values.push({ value: element });
+        }
+      }
+    }
+    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);
+        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);
+      }
+    }
+    const justValues = new Array();
+    for (let i = 0; i < values.length; i++) {
+      justValues.push(values[i].value);
+    }
+    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, justValues, key, color[i], 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,
+    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, color, 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:
+    case KupEchartTypes.HBAR:
+      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.AREA:
+    case KupEchartTypes.LINE:
+    default:
+      series.push({
+        data: values,
+        name: key,
+        type: 'line',
+        areaStyle: type === KupEchartTypes.AREA
+          ? {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.25, [
+              {
+                offset: 0,
+                color: `rgba(${__classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(color).rgbValues}, 0.375)`,
+              },
+            ]),
+          }
+          : undefined,
+      });
+      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 = [];
+  const color = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length);
+  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, color[i]);
+    i++;
+  }
+  const isHorizontal = !!(KupEchartTypes.HBAR === this.types[0]);
+  return {
+    color,
+    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: isHorizontal ? undefined : x, type: isHorizontal ? 'value' : 'category' }), this.xAxis),
+    yAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { data: isHorizontal ? x : undefined, type: isHorizontal ? 'category' : 'value' }), this.yAxis),
+  };
+}, _KupEchart_setColors = function _KupEchart_setColors(requiredNumber) {
+  let colorArray = this.colors && this.colors.length > 0 ? [...this.colors] : [];
+  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]);
+  }
+  if (this.colors && this.colors[0]) {
+    __classPrivateFieldSet(this, _KupEchart_maxColorHeatMap, this.colors[0], "f");
+  }
+  else {
+    const colorCheckDark = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(colorArray[0]);
+    __classPrivateFieldSet(this, _KupEchart_maxColorHeatMap, `hsl(${colorCheckDark.hue}, ${colorCheckDark.saturation},  ${(parseFloat(colorCheckDark.lightness) - 30).toString()}%)`, "f");
+  }
+  if (this.colors && this.colors[1]) {
+    __classPrivateFieldSet(this, _KupEchart_minColorHeatMap, this.colors[1], "f");
+  }
+  else {
+    const colorCheckBright = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(colorArray[0]);
+    __classPrivateFieldSet(this, _KupEchart_minColorHeatMap, `hsl(${colorCheckBright.hue}, ${colorCheckBright.saturation}, ${(parseFloat(colorCheckBright.lightness) + 30).toString()}%)`, "f");
+  }
+  for (let index = colorArray.length; requiredNumber && index < requiredNumber; index++) {
+    colorArray.push(__classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.randomColor(128));
+  }
+  return colorArray;
+}, _KupEchart_checks = function _KupEchart_checks() {
+  const gaussianCount = this.types.filter((type) => type === KupEchartTypes.GAUSSIAN).length;
+  const nonGaussianCount = this.types.filter((type) => type === KupEchartTypes.GAUSSIAN).length;
+  // Automatically sets axis when there is no Gaussian chart and when axis is invalid.
+  // The first visible and non-numerical column will be used as axis.
+  if (!gaussianCount &&
+    (!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 (column.visible &&
+        !__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;
+      }
+    }
+  }
+  // Automatically copies columns when there are multiple types and no specified series.
+  // Also 1 types must be GAUSSIAN.
+  if ((!this.series || !this.series.length) &&
+    gaussianCount === 1 &&
+    nonGaussianCount > 0 &&
+    this.data.columns &&
+    ((this.data.columns.length === 1 && !this.axis) ||
+      (this.data.columns.length === 2 && this.axis))) {
+    const series = !this.axis
+      ? this.data.columns[0]
+      : this.data.columns.filter((col) => col.name !== this.axis)[0];
+    for (let index = 0; index < this.types.length; index++) {
+      const type = this.types[index];
+      if (type !== KupEchartTypes.GAUSSIAN) {
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.new(this.data, KupDataNewColumnTypes.DUPLICATE, {
+          columns: [series.name],
+          newColumn: Object.assign(Object.assign({}, series), { name: series.name + '_' + index, title: series.title + ` (${type})` }),
+        });
+      }
+    }
+  }
+  // Checks for multiple series with the same column name, creating duplicate columns in case they are present.
+  // When there are more types than series, new series will be automatically added to match chart types.
+  if (this.series &&
+    this.types &&
+    this.series.length &&
+    this.types.length &&
+    this.data.columns) {
+    if (this.types.length > this.series.length) {
+      const lastSerie = this.series[this.series.length - 1];
+      for (let index = this.series.length; index < this.types.length; index++) {
+        this.series.push(lastSerie);
+      }
+    }
+    const occurrences = {};
+    for (let index = 0; index < this.series.length; index++) {
+      const serie = this.series[index];
+      if (Object.keys(occurrences).includes(serie)) {
+        occurrences[serie].push(index);
+      }
+      else {
+        occurrences[serie] = [index];
+      }
+    }
+    for (const key in occurrences) {
+      const indexes = occurrences[key];
+      for (let index = 1; indexes.length > 1 && index < indexes.length; index++) {
+        const seriesIndex = indexes[index];
+        const column = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, { name: this.series[seriesIndex] })[0];
+        const newName = column.name + '_' + index;
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.new(this.data, KupDataNewColumnTypes.DUPLICATE, {
+          columns: [column.name],
+          newColumn: Object.assign(Object.assign({}, column), { name: newName, title: column.title +
+              ` (${this.types[seriesIndex]})` }),
+        });
+        this.series[seriesIndex] = newName;
+      }
+    }
+  }
+};