@sme.up/ketchup 7.1.1 → 7.2.0

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

@@ -0,0 +1,467 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _KupDialog_header, _KupDialog_kupManager;
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { FImage } from '../../f-components/f-image/f-image';
+import { kupManagerInstance } from '../../managers/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupDialogProps, } from './kup-dialog-declarations';
+export class KupDialog {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    _KupDialog_header.set(this, null);
+    _KupDialog_kupManager.set(this, kupManagerInstance());
+    this.autoCenter = { onReady: true };
+    this.customStyle = '';
+    this.header = { icons: { close: true } };
+    this.modal = { closeOnBackdropClick: true };
+    this.resizable = true;
+    this.sizeX = 'auto';
+    this.sizeY = 'auto';
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Closes the dialog detaching it from the DOM.
+   */
+  async close() {
+    this.kupClose.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
+    this.rootElement.remove();
+  }
+  /**
+   * 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, KupDialogProps, descriptions);
+  }
+  /**
+   * Places the dialog at the center of the screen.
+   */
+  async recalcPosition() {
+    const rect = this.rootElement.getBoundingClientRect();
+    const left = window.innerWidth / 2 - rect.width / 2;
+    const top = window.innerHeight / 2 - rect.height / 2;
+    this.rootElement.style.setProperty('--kup_dialog_left', left + 'px');
+    this.rootElement.style.setProperty('--kup_dialog_top', top + 'px');
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupDialogProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    __classPrivateFieldGet(this, _KupDialog_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupDialog_kupManager, "f").theme.register(this);
+  }
+  componentDidLoad() {
+    var _a;
+    __classPrivateFieldGet(this, _KupDialog_kupManager, "f").interact.dialogify(this.rootElement, __classPrivateFieldGet(this, _KupDialog_header, "f") ? __classPrivateFieldGet(this, _KupDialog_header, "f") : null, !this.resizable);
+    if ((_a = this.autoCenter) === null || _a === void 0 ? void 0 : _a.onReady) {
+      this.recalcPosition().then(() => {
+        this.rootElement.removeAttribute('fade-in');
+      });
+    }
+    else {
+      this.rootElement.removeAttribute('fade-in');
+    }
+    if (this.modal) {
+      __classPrivateFieldGet(this, _KupDialog_kupManager, "f").interact.showModalBackdrop(this.modal.closeOnBackdropClick
+        ? () => {
+          this.close();
+        }
+        : null);
+    }
+    this.kupReady.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
+    __classPrivateFieldGet(this, _KupDialog_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __classPrivateFieldGet(this, _KupDialog_kupManager, "f").debug.logRender(this, false);
+  }
+  componentDidRender() {
+    __classPrivateFieldGet(this, _KupDialog_kupManager, "f").debug.logRender(this, true);
+  }
+  render() {
+    var _a;
+    const style = {
+      '--kup_dialog_height': this.sizeY ? this.sizeY : 'auto',
+      '--kup_dialog_width': this.sizeX ? this.sizeX : 'auto',
+    };
+    return (h(Host, { "fade-in": true, style: style }, h("style", null, __classPrivateFieldGet(this, _KupDialog_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, this.header ? (h("div", { class: "header", ref: (el) => (__classPrivateFieldSet(this, _KupDialog_header, el, "f")) }, this.header.title ? (h("div", { class: "header__title" }, this.header.title)) : null, ((_a = this.header.icons) === null || _a === void 0 ? void 0 : _a.close) ? (h(FImage, { onClick: () => this.close(), sizeX: "1.25em", sizeY: "100%", resource: "clear", wrapperClass: "header__close" })) : null)) : null, h("div", { class: "content" }, h("slot", null)))));
+  }
+  disconnectedCallback() {
+    if (this.modal) {
+      __classPrivateFieldGet(this, _KupDialog_kupManager, "f").interact.hideModalBackdrop();
+    }
+    __classPrivateFieldGet(this, _KupDialog_kupManager, "f").theme.unregister(this);
+  }
+  static get is() { return "kup-dialog"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-dialog.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-dialog.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoCenter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupDialogAutoCenter",
+          "resolved": "KupDialogAutoCenter",
+          "references": {
+            "KupDialogAutoCenter": {
+              "location": "import",
+              "path": "./kup-dialog-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"{ onReady: true }\""
+            }],
+          "text": "Auto centers the dialog relatively to the viewport."
+        },
+        "defaultValue": "{ onReady: true }"
+      },
+      "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": "''"
+      },
+      "header": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupDialogHeader",
+          "resolved": "KupDialogHeader",
+          "references": {
+            "KupDialogHeader": {
+              "location": "import",
+              "path": "./kup-dialog-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"{ icons: { close: true } }\""
+            }],
+          "text": "Header options."
+        },
+        "defaultValue": "{ icons: { close: true } }"
+      },
+      "modal": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupDialogModal",
+          "resolved": "KupDialogModal",
+          "references": {
+            "KupDialogModal": {
+              "location": "import",
+              "path": "./kup-dialog-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"{ closeOnBackdropClick: true }\""
+            }],
+          "text": "Set of options to display the dialog as a modal."
+        },
+        "defaultValue": "{ closeOnBackdropClick: true }"
+      },
+      "resizable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"true\""
+            }],
+          "text": "Sets whether the dialog is resizable or not."
+        },
+        "attribute": "resizable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "sizeX": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"auto\""
+            }],
+          "text": "The width of the dialog, defaults to auto. Accepts any valid CSS format (px, %, vw, etc.)."
+        },
+        "attribute": "size-x",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "sizeY": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"auto\""
+            }],
+          "text": "The height of the card, defaults to auto. Accepts any valid CSS format (px, %, vh, etc.)."
+        },
+        "attribute": "size-y",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupClose",
+        "name": "kup-dialog-close",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          }
+        }
+      }, {
+        "method": "kupReady",
+        "name": "kup-dialog-ready",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Closes the dialog detaching it from the DOM.",
+          "tags": []
+        }
+      },
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                }],
+              "text": "- When provided and true, the result will be the list of props with their description."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<GenericObject>"
+        },
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
+      },
+      "recalcPosition": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Places the dialog at the center of the screen.",
+          "tags": []
+        }
+      },
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
+      },
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "props - Object containing props that will be set to the component."
+                }],
+              "text": "- Object containing props that will be set to the component."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "rootElement"; }
+}
+_KupDialog_header = new WeakMap(), _KupDialog_kupManager = new WeakMap();

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

@@ -45,4 +45,5 @@ export var KupEchartTypes;
   KupEchartTypes["MAP"] = "Map";
   KupEchartTypes["PIE"] = "Pie";
   KupEchartTypes["SCATTER"] = "Scatter";
+  KupEchartTypes["FUNNEL"] = "Funnel";
 })(KupEchartTypes || (KupEchartTypes = {}));

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

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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_computedColors, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_fetchcomputedColors, _KupEchart_checks;
+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_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
 import { forceUpdate, getAssetPath, Host, h, } from '@stencil/core';
 import * as echarts from 'echarts';
 import { KupEchartLegendPlacement, KupEchartMaps, KupEchartProps, KupEchartTypes, } from './kup-echart-declarations';
@@ -40,7 +40,6 @@ export class KupEchart {
     _KupEchart_sortedDataset.set(this, null);
     _KupEchart_themeBorder.set(this, null);
     _KupEchart_themeBackground.set(this, null);
-    _KupEchart_computedColors.set(this, null);
     _KupEchart_minColorHeatMap.set(this, null);
     _KupEchart_maxColorHeatMap.set(this, null);
     _KupEchart_themeFont.set(this, null);
@@ -118,8 +117,11 @@ export class KupEchart {
     __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);
-    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_fetchcomputedColors).call(this);
   }
   componentDidRender() {
     if (this.data && this.data.columns && this.data.rows) {
@@ -602,7 +604,7 @@ export class KupEchart {
   }
   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_computedColors = 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() {
+_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"));
   }
@@ -644,6 +646,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     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;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -674,6 +679,73 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
       y: Array.isArray(e.data) ? e.data[1] : e.value,
     });
   });
+}, _KupEchart_funnelChart = function _KupEchart_funnelChart() {
+  const x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+  const cellsSum = {};
+  const data = [];
+  let highest = 0;
+  for (let key in y) {
+    for (let j = 0; j < y[key].length; j++) {
+      if (cellsSum[x[j]]) {
+        cellsSum[x[j]] += parseFloat(y[key][j]);
+      }
+      else {
+        cellsSum[x[j]] = parseFloat(y[key][j]);
+      }
+    }
+  }
+  for (let key in cellsSum) {
+    const value = cellsSum[key];
+    if (value > highest) {
+      highest = value;
+    }
+  }
+  for (const key in cellsSum) {
+    const value = cellsSum[key];
+    data.push({
+      name: key,
+      value: ((100 * value) / highest).toFixed(2),
+    });
+  }
+  return {
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(cellsSum).length),
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
+        const name = value.data.name;
+        const percentage = value.data
+          .value;
+        return `${name}: <strong>${cellsSum[name]}</strong> (${__classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(percentage)}%)`;
+      } }),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, cellsSum),
+    series: [
+      {
+        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+          name: this.axis,
+        })[0].title,
+        type: 'funnel',
+        gap: 2,
+        label: {
+          show: true,
+          position: 'right',
+        },
+        labelLine: {
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+          },
+        },
+        itemStyle: {
+          borderColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
+          borderWidth: 1,
+        },
+        left: '10%',
+        right: '10%',
+        width: '80%',
+        data,
+      },
+    ],
+  };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];
   if (!dataset)
@@ -823,6 +895,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
   }
   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 = [];
@@ -955,7 +1028,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
         roam: true,
         select: {
           itemStyle: {
-            areaColor: __classPrivateFieldGet(this, _KupEchart_computedColors, "f")[0],
+            areaColor: computedColors[0],
           },
           label: {
             color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
@@ -981,7 +1054,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     });
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
+    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}%)' }),
@@ -1132,7 +1205,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     yAxisTmp.splice(0, 1);
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
+    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),
     series: series,
     title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
@@ -1195,7 +1268,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     i++;
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
+    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),
     series: series,
     title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
@@ -1203,17 +1276,12 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     xAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { data: x, type: 'category' }), this.xAxis),
     yAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { type: 'value' }), this.yAxis),
   };
-}, _KupEchart_fetchcomputedColors = function _KupEchart_fetchcomputedColors() {
+}, _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]);
   }
-  __classPrivateFieldSet(this, _KupEchart_themeBackground, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BACKGROUND], "f");
-  __classPrivateFieldSet(this, _KupEchart_themeBorder, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BORDER], "f");
-  __classPrivateFieldSet(this, _KupEchart_themeFont, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars['--kup-font-family'], "f");
-  __classPrivateFieldSet(this, _KupEchart_themeText, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.TEXT], "f");
-  __classPrivateFieldSet(this, _KupEchart_computedColors, colorArray, "f");
   if (this.colors && this.colors[0]) {
     __classPrivateFieldSet(this, _KupEchart_maxColorHeatMap, this.colors[0], "f");
   }
@@ -1228,6 +1296,10 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     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;