@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -1,18 +1,18 @@
 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);
+    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;
+    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_bubbleChart, _KupEchart_sankeyChart, _KupEchart_candleChart, _KupEchart_calendarChart, _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";
@@ -26,1682 +26,1682 @@ 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);
+    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);
+    }
     /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
+    /*          L i f e c y c l e   H o o k 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();
+    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);
         }
-      }
-    }, 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);
+    componentDidLoad() {
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").resize.observe(this.rootElement);
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logLoad(this, true);
     }
-    else {
-      __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logMessage(this, 'Insufficient data.(' + this.data + ')', KupDebugCategory.WARNING);
+    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);
     }
-    __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",
-              "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartTitle"
-            }
-          }
-        },
-        "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",
-              "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataDataset"
-            }
-          }
-        },
-        "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",
-              "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartLegendPlacement"
-            }
-          }
-        },
-        "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",
-              "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartMaps"
+    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": "''"
             },
-            "GeoJSON": {
-              "location": "import",
-              "path": "geojson",
-              "id": "../../node_modules/@types/geojson/index.d.ts::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",
-              "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartTypes"
+            "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",
+                            "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartTitle"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataDataset"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartLegendPlacement"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartMaps"
+                        },
+                        "GeoJSON": {
+                            "location": "import",
+                            "path": "geojson",
+                            "id": "../../node_modules/@types/geojson/index.d.ts::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",
+                            "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartTypes"
+                        }
+                    }
+                },
+                "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",
+                            "id": ""
+                        }
+                    }
+                },
+                "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",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Customization options for the y Axis."
+                },
+                "defaultValue": "null"
             }
-          }
-        },
-        "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",
-              "id": ""
+        };
+    }
+    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",
+                            "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartClickEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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."
+                        }]
+                }
             }
-          }
-        },
-        "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",
-              "id": ""
+        };
+    }
+    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;
+                }
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-echart/kup-echart-declarations.tsx::KupEchartClickEventPayload"
+            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;
+        case KupEchartTypes.BUBBLE:
+            options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_bubbleChart).call(this);
+            break;
+        case KupEchartTypes.SANKEY:
+            options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_sankeyChart).call(this);
+            break;
+        case KupEchartTypes.CANDLE:
+            options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_candleChart).call(this);
+            break;
+        case KupEchartTypes.CALENDAR:
+            options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_calendarChart).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];
         }
-      }];
-  }
-  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",
-              "id": "global::Promise"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
-            }
-          },
-          "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."
-            }]
+        else if (__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f") && e.seriesType === 'bar') {
+            row = __classPrivateFieldGet(this, _KupEchart_sortedDataset, "f").rows[e.dataIndex];
         }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
+        else if (!Array.isArray(e.data)) {
+            row = this.data.rows[e.dataIndex];
         }
-      },
-      "resizeCallback": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        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]);
             }
-          },
-          "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",
-              "id": "global::Promise"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            else {
+                cellsSum[x[j]] = parseFloat(y[key][j]);
             }
-          },
-          "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."
-            }]
         }
-      }
+    }
+    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,
+            },
+        ],
     };
-  }
-  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);
+}, _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);
+    const data = [], transposedData = [], transposedIndicator = [];
+    for (const [_index, values] of x.entries()) {
+        data.push({ name: values, value: [] });
+    }
+    for (const key in y) {
+        transposedData.push({
+            name: key,
+            value: y[key],
+        });
+        for (const values in y[key]) {
+            data[values].value.push(y[key][values]);
         }
-        else if (Object.values(KupEchartMaps).includes(this.map)) {
-          stringifiedMap = await (await fetch(getAssetPath(`./assets/maps/${this.map}.json`))).text();
+    }
+    for (let index = 0; index < data.length; index++) {
+        const dataEl = data[index];
+        const key = dataEl.name;
+        const foundEl = transposedIndicator.find((d) => d.name === key);
+        const max = Math.floor(Math.max(...dataEl.value) * 1.05);
+        if (!foundEl) {
+            transposedIndicator.push({
+                name: key,
+                max,
+            });
         }
         else {
-          stringifiedMap = this.map;
+            foundEl.max = foundEl.max > max ? foundEl.max : max;
         }
-      }
-      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;
-    case KupEchartTypes.BUBBLE:
-      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_bubbleChart).call(this);
-      break;
-    case KupEchartTypes.SANKEY:
-      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_sankeyChart).call(this);
-      break;
-    case KupEchartTypes.CANDLE:
-      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_candleChart).call(this);
-      break;
-    case KupEchartTypes.CALENDAR:
-      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_calendarChart).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];
+    return {
+        color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length),
+        title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+        legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
+        radar: {
+            indicator: transposedIndicator,
+        },
+        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: transposedData,
+            },
+        ],
+    };
+}, _KupEchart_bubbleChart = function _KupEchart_bubbleChart() {
+    const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), data = [], temp = [], legend = {}, series = [];
+    let year = [];
+    const content = this.data.columns.map((data) => data.title);
+    if (content && content.length) {
+        for (let i = 0; i < y[content[0]].length; i++) {
+            const arr = [];
+            for (let j = 0; j < content.length; j++) {
+                arr.push(y[content[j]][i]);
+                // last value always be a year
+                if (j === content.length - 1) {
+                    year.push(y[content[j]][i]);
+                }
+            }
+            temp.push(arr);
+        }
     }
-    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,
+    year = [...new Set(year)];
+    year.forEach((e, i) => {
+        let k = [];
+        temp.forEach((data) => {
+            if (data.includes(e))
+                k.push(data);
+        });
+        data.push(k);
+        legend[e] = i;
     });
-  });
-}, _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),
+    data.forEach((el, i) => {
+        series.push({
+            name: year[i],
+            data: el,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return Math.sqrt(data[2]) / 5e2;
+            },
+            emphasis: {
+                focus: 'series',
+                label: {
+                    show: true,
+                    formatter: function (param) {
+                        return param.data[3];
+                    },
+                    position: 'top',
+                },
+            },
+        });
     });
-  }
-  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',
+    return {
+        title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+        legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+        tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
+                const name = value.data;
+                const data = content.map((e, i) => {
+                    return `<li>  ${e}: ${name[i]} </li>`;
+                });
+                let showContent = '';
+                data.forEach((r) => {
+                    showContent += r;
+                });
+                return `<ul>${showContent}</ul> `;
+            } }),
+        xAxis: {
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                },
+            },
+        },
+        yAxis: {
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                },
+            },
+            scale: true,
         },
-        labelLine: {
-          lineStyle: {
-            width: 1,
-            type: 'solid',
-          },
+        color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, content.length),
+        series: series,
+    };
+}, _KupEchart_sankeyChart = function _KupEchart_sankeyChart() {
+    const links = [], y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), keys = Object.keys(y);
+    // Assuming all arrays in the question object have the same length
+    const arrayLength = y[keys[0]].length;
+    for (let i = 0; i < arrayLength; i++) {
+        const entry = {};
+        entry['source'] = y[keys[0]][i];
+        entry['target'] = y[keys[1]][i];
+        entry['value'] = parseInt(y[keys[2]][i]);
+        links.push(entry);
+    }
+    const data = Array.from(new Set([
+        ...links.map((link) => link.source),
+        ...links.map((link) => link.target),
+    ])).map((name) => ({ name }));
+    const legend = {};
+    data.forEach((e, i) => {
+        legend[e.name] = i;
+    });
+    return {
+        title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+        legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+        color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
+        tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+        series: {
+            type: 'sankey',
+            layout: 'none',
+            emphasis: {
+                focus: 'adjacency',
+            },
+            data,
+            links,
+            right: '10%',
+            left: '10%',
         },
-        itemStyle: {
-          borderColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
-          borderWidth: 1,
+    };
+}, _KupEchart_candleChart = function _KupEchart_candleChart() {
+    const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), answer = [], itemStyle = {
+        color: 'red',
+        borderColor: 'red',
+        color0: 'green',
+        borderColor0: 'green',
+    };
+    let caseInsensitiveObj = new Proxy(y, {
+        get: function (target, prop) {
+            // Convert the property name to lowercase
+            const lowercaseProp = prop.toLowerCase();
+            // Search for the property case-insensitively
+            for (let key in target) {
+                if (key.toLowerCase() === lowercaseProp) {
+                    return target[key];
+                }
+            }
+            // Property not found, return undefined
+            return undefined;
         },
-        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);
-  const data = [], transposedData = [], transposedIndicator = [];
-  for (const [_index, values] of x.entries()) {
-    data.push({ name: values, value: [] });
-  }
-  for (const key in y) {
-    transposedData.push({
-      name: key,
-      value: y[key],
     });
-    for (const values in y[key]) {
-      data[values].value.push(y[key][values]);
-    }
-  }
-  for (let index = 0; index < data.length; index++) {
-    const dataEl = data[index];
-    const key = dataEl.name;
-    const foundEl = transposedIndicator.find((d) => d.name === key);
-    const max = Math.floor(Math.max(...dataEl.value) * 1.05);
-    if (!foundEl) {
-      transposedIndicator.push({
-        name: key,
-        max,
-      });
-    }
-    else {
-      foundEl.max = foundEl.max > max ? foundEl.max : max;
+    const date = caseInsensitiveObj['date'];
+    for (let i = 0; i < caseInsensitiveObj['Open'].length; i++) {
+        answer.push([
+            parseInt(caseInsensitiveObj['close'][i]),
+            parseInt(caseInsensitiveObj['Open'][i]),
+            parseInt(caseInsensitiveObj['Low'][i]),
+            parseInt(caseInsensitiveObj['High'][i]),
+        ]);
     }
-  }
-  return {
-    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length),
-    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
-    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
-    radar: {
-      indicator: transposedIndicator,
-    },
-    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: transposedData,
-      },
-    ],
-  };
-}, _KupEchart_bubbleChart = function _KupEchart_bubbleChart() {
-  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), data = [], temp = [], legend = {}, series = [];
-  let year = [];
-  const content = this.data.columns.map((data) => data.title);
-  if (content && content.length) {
-    for (let i = 0; i < y[content[0]].length; i++) {
-      const arr = [];
-      for (let j = 0; j < content.length; j++) {
-        arr.push(y[content[j]][i]);
-        // last value always be a year
-        if (j === content.length - 1) {
-          year.push(y[content[j]][i]);
-        }
-      }
-      temp.push(arr);
-    }
-  }
-  year = [...new Set(year)];
-  year.forEach((e, i) => {
-    let k = [];
-    temp.forEach((data) => {
-      if (data.includes(e))
-        k.push(data);
+    let legend = {};
+    date.forEach((e, i) => {
+        legend[e] = i;
     });
-    data.push(k);
-    legend[e] = i;
-  });
-  data.forEach((el, i) => {
-    series.push({
-      name: year[i],
-      data: el,
-      type: 'scatter',
-      symbolSize: function (data) {
-        return Math.sqrt(data[2]) / 5e2;
-      },
-      emphasis: {
-        focus: 'series',
-        label: {
-          show: true,
-          formatter: function (param) {
-            return param.data[3];
-          },
-          position: 'top',
+    return {
+        legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+        tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+        title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+        xAxis: {
+            data: date,
+        },
+        yAxis: {},
+        series: [
+            {
+                type: 'candlestick',
+                data: answer,
+                itemStyle: itemStyle,
+            },
+        ],
+    };
+}, _KupEchart_calendarChart = function _KupEchart_calendarChart() {
+    const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+    let caseInsensitiveObj = new Proxy(y, {
+        get: function (target, prop) {
+            // Convert the property name to lowercase
+            const lowercaseProp = prop.toLowerCase();
+            // Search for the property case-insensitively
+            for (let key in target) {
+                if (key.toLowerCase() === lowercaseProp) {
+                    return target[key];
+                }
+            }
+            // Property not found, return undefined
+            return undefined;
         },
-      },
     });
-  });
-  return {
-    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
-    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
-    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
-        const name = value.data;
-        const data = content.map((e, i) => {
-          return `<li>  ${e}: ${name[i]} </li>`;
-        });
-        let showContent = '';
-        data.forEach((r) => {
-          showContent += r;
-        });
-        return `<ul>${showContent}</ul> `;
-      } }),
-    xAxis: {
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
+    const date = caseInsensitiveObj['Date'], answer = [], keys = Object.keys(y), year = new Date(date[0]).getFullYear(), arrayLength = date.length;
+    date.forEach((element, i) => {
+        answer.push([element, caseInsensitiveObj['Value'][i]]);
+    });
+    return {
+        tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
+                const name = value.data;
+                const data = keys.map((e, i) => {
+                    return `<li>  ${e}: ${name[i]} </li>`;
+                });
+                let showContent = '';
+                data.forEach((r) => {
+                    showContent += r;
+                });
+                return `<ul>${showContent}</ul> `;
+            } }),
+        gradientColor: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
+        title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+        visualMap: {
+            show: false,
+            min: 0,
+            max: 10000,
         },
-      },
-    },
-    yAxis: {
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
+        calendar: {
+            range: year,
+            itemStyle: {
+                color: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
+            },
+            dayLabel: {
+                color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+            },
+            yearLabel: {
+                color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+            },
+            monthLabel: {
+                color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+                },
+            },
         },
-      },
-      scale: true,
-    },
-    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, content.length),
-    series: series,
-  };
-}, _KupEchart_sankeyChart = function _KupEchart_sankeyChart() {
-  const links = [], y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), keys = Object.keys(y);
-  // Assuming all arrays in the question object have the same length
-  const arrayLength = y[keys[0]].length;
-  for (let i = 0; i < arrayLength; i++) {
-    const entry = {};
-    entry['source'] = y[keys[0]][i];
-    entry['target'] = y[keys[1]][i];
-    entry['value'] = parseInt(y[keys[2]][i]);
-    links.push(entry);
-  }
-  const data = Array.from(new Set([
-    ...links.map((link) => link.source),
-    ...links.map((link) => link.target),
-  ])).map((name) => ({ name }));
-  const legend = {};
-  data.forEach((e, i) => {
-    legend[e.name] = i;
-  });
-  return {
-    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
-    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
-    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
-    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
-    series: {
-      type: 'sankey',
-      layout: 'none',
-      emphasis: {
-        focus: 'adjacency',
-      },
-      data,
-      links,
-      right: '10%',
-      left: '10%',
-    },
-  };
-}, _KupEchart_candleChart = function _KupEchart_candleChart() {
-  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), answer = [], itemStyle = {
-    color: 'red',
-    borderColor: 'red',
-    color0: 'green',
-    borderColor0: 'green',
-  };
-  let caseInsensitiveObj = new Proxy(y, {
-    get: function (target, prop) {
-      // Convert the property name to lowercase
-      const lowercaseProp = prop.toLowerCase();
-      // Search for the property case-insensitively
-      for (let key in target) {
-        if (key.toLowerCase() === lowercaseProp) {
-          return target[key];
-        }
-      }
-      // Property not found, return undefined
-      return undefined;
-    },
-  });
-  const date = caseInsensitiveObj['date'];
-  for (let i = 0; i < caseInsensitiveObj['Open'].length; i++) {
-    answer.push([
-      parseInt(caseInsensitiveObj['close'][i]),
-      parseInt(caseInsensitiveObj['Open'][i]),
-      parseInt(caseInsensitiveObj['Low'][i]),
-      parseInt(caseInsensitiveObj['High'][i]),
-    ]);
-  }
-  let legend = {};
-  date.forEach((e, i) => {
-    legend[e] = i;
-  });
-  return {
-    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
-    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
-    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
-    xAxis: {
-      data: date,
-    },
-    yAxis: {},
-    series: [
-      {
-        type: 'candlestick',
-        data: answer,
-        itemStyle: itemStyle,
-      },
-    ],
-  };
-}, _KupEchart_calendarChart = function _KupEchart_calendarChart() {
-  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
-  let caseInsensitiveObj = new Proxy(y, {
-    get: function (target, prop) {
-      // Convert the property name to lowercase
-      const lowercaseProp = prop.toLowerCase();
-      // Search for the property case-insensitively
-      for (let key in target) {
-        if (key.toLowerCase() === lowercaseProp) {
-          return target[key];
-        }
-      }
-      // Property not found, return undefined
-      return undefined;
-    },
-  });
-  const date = caseInsensitiveObj['Date'], answer = [], keys = Object.keys(y), year = new Date(date[0]).getFullYear(), arrayLength = date.length;
-  date.forEach((element, i) => {
-    answer.push([element, caseInsensitiveObj['Value'][i]]);
-  });
-  return {
-    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
-        const name = value.data;
-        const data = keys.map((e, i) => {
-          return `<li>  ${e}: ${name[i]} </li>`;
-        });
-        let showContent = '';
-        data.forEach((r) => {
-          showContent += r;
-        });
-        return `<ul>${showContent}</ul> `;
-      } }),
-    gradientColor: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
-    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
-    visualMap: {
-      show: false,
-      min: 0,
-      max: 10000,
-    },
-    calendar: {
-      range: year,
-      itemStyle: {
-        color: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
-      },
-      dayLabel: {
-        color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
-      },
-      yearLabel: {
-        color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
-      },
-      monthLabel: {
-        color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+        series: {
+            type: 'heatmap',
+            coordinateSystem: 'calendar',
+            data: answer,
         },
-      },
-    },
-    series: {
-      type: 'heatmap',
-      coordinateSystem: 'calendar',
-      data: answer,
-    },
-  };
+    };
 }, _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);
-      }
+    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);
+    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;
+    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);
+    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] = [];
+    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);
+                    }
+                }
             }
-            y[title].push(value);
-          }
         }
-      }
     }
-  }
-  return y;
+    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,
+    return {
+        axisLabel: {
+            color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+            fontFamily: __classPrivateFieldGet(this, _KupEchart_themeFont, "f"),
         },
-        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;
+        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;
     }
-    else {
-      return ("<div style='min-width: 60px; text-align: center'>" +
-        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(value) +
-        '</div>');
+    const data = [];
+    for (let key in y) {
+        data.push(key);
     }
-  };
-  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: [
-      {
+    return {
         data: data,
-        emphasis: {
-          itemStyle: {
-            areaColor: null,
-            borderWidth: 1.5,
-          },
-          label: {
+        [this.legend]: 0,
+        textStyle: {
             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,
+    };
+}, _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,
         },
-        map: this.rootElement.id ? this.rootElement.id : '',
-        name: serieTitle,
-        roam: true,
-        select: {
-          itemStyle: {
-            areaColor: computedColors[0],
-          },
-          label: {
+    };
+}, _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"),
-            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_setVisualMap = function _KupEchart_setVisualMap(max, min, colors, hasNumericValues) {
+    const opts = {
+        visualMap: {
+            show: false,
         },
-      },
-    ],
-  };
-}, _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];
+    };
+    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 });
     }
-    else {
-      type = KupEchartTypes.GAUSSIAN;
+    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);
     }
-    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 });
+    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);
+                }
+            }
         }
-      }
     }
-    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 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 justValues = new Array();
-    for (let i = 0; i < values.length; i++) {
-      justValues.push(values[i].value);
+    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,
+        });
     }
-    __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;
+    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];
         }
-        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 {
+            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 {
-              title = cells[column].title;
+                values = [];
+                for (let index = 0; index < y[key].length; index++) {
+                    const element = y[key][index];
+                    values.push({ value: element });
+                }
             }
-            const remainder = count % 4;
-            if (!remainder) {
-              if (count) {
-                format += `</div>`;
-              }
-              format += `<div style="display: flex; flex-direction: row;">`;
+        }
+        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 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;
+        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++;
     }
-    else {
-      return format;
+    // "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);
     }
-  };
-  // 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,
-  };
+    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;
-  }
+    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];
+    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 {
-      type = KupEchartTypes.LINE;
+        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");
     }
-    __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;
-      }
+    if (this.colors && this.colors[1]) {
+        __classPrivateFieldSet(this, _KupEchart_minColorHeatMap, this.colors[1], "f");
     }
-  }
-  // 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})` }),
-        });
-      }
+    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");
     }
-  }
-  // 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);
-      }
+    for (let index = colorArray.length; requiredNumber && index < requiredNumber; index++) {
+        colorArray.push(__classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.randomColor(128));
     }
-    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];
-      }
+    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;
+            }
+        }
     }
-    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;
-      }
+    // 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;
+            }
+        }
     }
-  }
 };