@sme.up/ketchup 5.0.0 → 5.1.1

package/dist/esm/kup-echart.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement, a as getAssetPath } from './index-78f3699d.js';
-import { k as kupManagerInstance, j as KupDebugCategory, b as KupThemeColorValues } from './kup-manager-bba62291.js';
-import { g as getProps, s as setProps } from './utils-d1569956.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement, a as getAssetPath } from './index-aeec9835.js';
+import { k as kupManagerInstance, j as KupDebugCategory, b as KupThemeColorValues, u as KupDataNewColumnTypes } from './kup-manager-0ab94726.js';
+import { g as getProps, s as setProps } from './utils-35c7a90d.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
-import { c as getColumnByName } from './cell-utils-b80ccb8c.js';
+import { c as getColumnByName } from './cell-utils-69f75e2e.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -92237,6 +92237,8 @@ var KupEchartProps;
 (function (KupEchartProps) {
   KupEchartProps["axis"] = "Sets the axis of the chart.";
   KupEchartProps["chartTitle"] = "Title of the graph.";
+  KupEchartProps["colors"] = "Overrides theme's colors.";
+  KupEchartProps["consistencyCheck"] = "When true, performs checks in order to properly initialize props which could be missing (i.e.: axis). For performances purposes, this prop will run only once when the component is initially created.";
   KupEchartProps["customStyle"] = "Custom style of the component.";
   KupEchartProps["data"] = "The actual data of the chart.";
   KupEchartProps["legend"] = "Sets the position of the legend. Supported values: bottom, left, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work.";
@@ -92252,6 +92254,7 @@ var KupEchartLegendPlacement;
 (function (KupEchartLegendPlacement) {
   KupEchartLegendPlacement["BOTTOM"] = "bottom";
   KupEchartLegendPlacement["LEFT"] = "left";
+  KupEchartLegendPlacement["HIDDEN"] = "hidden";
   KupEchartLegendPlacement["RIGHT"] = "right";
   KupEchartLegendPlacement["TOP"] = "top";
 })(KupEchartLegendPlacement || (KupEchartLegendPlacement = {}));
@@ -92293,8 +92296,8 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupEchart_instances, _KupEchart_kupManager, _KupEchart_resizeTimeout, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_themeColors, _KupEchart_themeColorBrighter, _KupEchart_themeColorDarker, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_mapObj, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_fetchThemeColors;
-let KupEchart = class {
+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;
+const KupEchart = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.kupEchartClick = createEvent(this, "kup-echart-click", 6);
@@ -92307,6 +92310,17 @@ let KupEchart = class {
      * @default ""
      */
     this.axis = '';
+    /**
+     * Overrides theme's colors.
+     * @default []
+     */
+    this.colors = [];
+    /**
+     * When true, performs checks in order to properly initialize props which could be missing (i.e.: axis).
+     * For performances purposes, this prop will run only once when the component is initially created.
+     * @default false
+     */
+    this.consistencyCheck = false;
     /**
      * Title of the graph.
      * @default null
@@ -92324,7 +92338,7 @@ let KupEchart = class {
      */
     this.data = null;
     /**
-     * Sets the position of the legend. Supported values: bottom, left, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work.
+     * 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.
      * @default KupEchartLegendPlacement.RIGHT
      */
     this.legend = KupEchartLegendPlacement.RIGHT;
@@ -92366,20 +92380,20 @@ let KupEchart = class {
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
-    _KupEchart_kupManager.set(this, kupManagerInstance());
-    _KupEchart_resizeTimeout.set(this, void 0);
     _KupEchart_chartContainer.set(this, void 0);
     _KupEchart_chartEl.set(this, void 0);
     _KupEchart_gaussianDatasets.set(this, void 0);
+    _KupEchart_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_themeColors.set(this, null);
-    _KupEchart_themeColorBrighter.set(this, null);
-    _KupEchart_themeColorDarker.set(this, null);
+    _KupEchart_computedColors.set(this, null);
+    _KupEchart_minColorHeatMap.set(this, null);
+    _KupEchart_maxColorHeatMap.set(this, null);
     _KupEchart_themeFont.set(this, null);
     _KupEchart_themeText.set(this, null);
-    _KupEchart_mapObj.set(this, {});
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -92403,7 +92417,19 @@ let KupEchart = class {
    */
   async resizeCallback() {
     window.clearTimeout(__classPrivateFieldGet(this, _KupEchart_resizeTimeout, "f"));
-    __classPrivateFieldSet(this, _KupEchart_resizeTimeout, window.setTimeout(() => this.refresh(), 300), "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.
@@ -92418,6 +92444,9 @@ let KupEchart = class {
   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);
@@ -92425,7 +92454,7 @@ let KupEchart = class {
   }
   componentWillRender() {
     __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logRender(this, false);
-    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_fetchThemeColors).call(this);
+    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_fetchcomputedColors).call(this);
   }
   componentDidRender() {
     if (this.data && this.data.columns && this.data.rows) {
@@ -92450,7 +92479,7 @@ let KupEchart = class {
   static get assetsDirs() { return ["assets/maps"]; }
   get rootElement() { return getElement(this); }
 };
-_KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(), _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _KupEchart_gaussianDatasets = new WeakMap(), _KupEchart_sortedDataset = new WeakMap(), _KupEchart_themeBorder = new WeakMap(), _KupEchart_themeBackground = new WeakMap(), _KupEchart_themeColors = new WeakMap(), _KupEchart_themeColorBrighter = new WeakMap(), _KupEchart_themeColorDarker = new WeakMap(), _KupEchart_themeFont = new WeakMap(), _KupEchart_themeText = new WeakMap(), _KupEchart_mapObj = new WeakMap(), _KupEchart_instances = new WeakSet(), _KupEchart_initChart = function _KupEchart_initChart() {
+_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() {
   if (__classPrivateFieldGet(this, _KupEchart_chartEl, "f")) {
     dispose(__classPrivateFieldGet(this, _KupEchart_chartContainer, "f"));
   }
@@ -92463,18 +92492,6 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
   }
 }, _KupEchart_createChart = async function _KupEchart_createChart() {
   __classPrivateFieldSet(this, _KupEchart_sortedDataset, null, "f");
-  if (!this.types.includes(KupEchartTypes.GAUSSIAN) &&
-    (!this.axis ||
-      !__classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.datasetOperations.column.find(this.data, { name: this.axis }).length)) {
-    for (let index = 0; index < this.data.columns.length; index++) {
-      const column = this.data.columns[index];
-      if (!__classPrivateFieldGet(this, _KupEchart_kupManager, "f").objects.isNumber(column.obj)) {
-        this.axis = column.name;
-        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logMessage(this, 'Axis overridden. (' + this.axis + ')', KupDebugCategory.WARNING);
-        break;
-      }
-    }
-  }
   let options = null;
   const firstType = this.types[0];
   switch (firstType) {
@@ -92510,12 +92527,14 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
   }
   __classPrivateFieldGet(this, _KupEchart_chartEl, "f").setOption(options, true);
   __classPrivateFieldGet(this, _KupEchart_chartEl, "f").on('click', (e) => {
-    const column = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.datasetOperations.column.find(this.data, {
+    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.datasetOperations.row.find(this.data, { value: __classPrivateFieldGet(this, _KupEchart_mapObj, "f")[e.name] })[0];
+      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];
@@ -92612,6 +92631,9 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
     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);
@@ -92657,17 +92679,23 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
   const colorRange = !hasNumericValues
     ? undefined
     : colors.length > 0
-      ? { inRange: { color: colors }, min: min, max: max }
+      ? {
+        inRange: { color: colors },
+        min: min,
+        max: max,
+        textStyle: { color: __classPrivateFieldGet(this, _KupEchart_themeText, "f") },
+      }
       : {
         inRange: {
-          color: [__classPrivateFieldGet(this, _KupEchart_themeColorBrighter, "f"), __classPrivateFieldGet(this, _KupEchart_themeColorDarker, "f")],
+          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").data.format(value);
+        return __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(value);
       }, min: min, max: max, show: true });
   }
   return opts;
@@ -92713,7 +92741,7 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
         color = hexColor;
       }
       else {
-        n = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.numberify(value);
+        n = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.numberify(value);
         if (n > max) {
           max = n;
         }
@@ -92753,11 +92781,9 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
       return null;
     }
     else {
-      //TODO: handle locale properly inside KupData [KupDataLocale]
-      __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.numeral.locale(__classPrivateFieldGet(this, _KupEchart_kupManager, "f").dates.locale);
-      return (params.name +
-        ': ' +
-        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.format(value));
+      return ("<div style='min-width: 60px; text-align: center'>" +
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(value) +
+        '</div>');
     }
   };
   const echartOption = Object.assign({ emphasis: {
@@ -92768,13 +92794,44 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
       {
         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: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.datasetOperations.column.find(this.data, { name: this.axis })[0].title,
+        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+          name: this.axis,
+        })[0].title,
         roam: true,
+        select: {
+          itemStyle: {
+            areaColor: __classPrivateFieldGet(this, _KupEchart_computedColors, "f")[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));
@@ -92793,13 +92850,15 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
     });
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_themeColors, "f"),
+    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
     legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
     title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
     tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }),
     series: [
       {
-        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.datasetOperations.column.find(this.data, { name: this.axis })[0].title,
+        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+          name: this.axis,
+        })[0].title,
         type: 'pie',
         data: data,
         emphasis: {
@@ -92832,9 +92891,10 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
     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.datasetOperations.distinct(this.data, [column.name]);
-        values =
-          __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.datasetOperations.cell.getValue(newDataset, [column.name]);
+        const newDataset = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.distinct(this.data, [column.name]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(newDataset, [
+          column.name,
+        ]);
         __classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column.name] = newDataset;
       }
       else {
@@ -92844,14 +92904,14 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
     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.datasetOperations.sort(this.data, 'normalDistribution', column.name), "f");
-        values =
-          __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.datasetOperations.cell.getValue(__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"), [column.name]);
+        __classPrivateFieldSet(this, _KupEchart_sortedDataset, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.sort(this.data, 'normalDistribution', column.name), "f");
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"), [column.name]);
         x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this, __classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"));
       }
       else {
-        values =
-          __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.datasetOperations.cell.getValue(this.data, [column.name]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(this.data, [
+          column.name,
+        ]);
       }
     }
     __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, values, key, mixedSeries, needSortDataset);
@@ -92880,7 +92940,7 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
             min: value - (value / 100) * 50,
           },
         };
-        const rows = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.datasetOperations.row.find(__classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column]
+        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++) {
@@ -92937,7 +92997,7 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
     yAxisTmp.splice(0, 1);
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_themeColors, "f"),
+    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
     legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
     series: series,
     title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
@@ -92949,7 +93009,7 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
   switch (type) {
     case KupEchartTypes.GAUSSIAN:
       series.push({
-        data: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.normalDistribution(values),
+        data: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.normalDistribution(values),
         name: key,
         showSymbol: false,
         smooth: true,
@@ -93000,7 +93060,7 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
     i++;
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_themeColors, "f"),
+    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
     legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
     series: series,
     title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
@@ -93008,8 +93068,8 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = 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_fetchThemeColors = function _KupEchart_fetchThemeColors() {
-  let colorArray = [];
+}, _KupEchart_fetchcomputedColors = function _KupEchart_fetchcomputedColors() {
+  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]);
@@ -93018,10 +93078,100 @@ _KupEchart_kupManager = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(),
   __classPrivateFieldSet(this, _KupEchart_themeBorder, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BORDER], "f");
   __classPrivateFieldSet(this, _KupEchart_themeFont, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars['--kup-font-family'], "f");
   __classPrivateFieldSet(this, _KupEchart_themeText, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.TEXT], "f");
-  __classPrivateFieldSet(this, _KupEchart_themeColors, colorArray, "f");
-  const colorCheck = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(colorArray[0]);
-  __classPrivateFieldSet(this, _KupEchart_themeColorDarker, `hsl(${colorCheck.hue}, ${colorCheck.saturation},  ${(parseFloat(colorCheck.lightness) - 30).toString()}%)`, "f");
-  __classPrivateFieldSet(this, _KupEchart_themeColorBrighter, `hsl(${colorCheck.hue}, ${colorCheck.saturation}, ${(parseFloat(colorCheck.lightness) + 30).toString()}%)`, "f");
+  __classPrivateFieldSet(this, _KupEchart_computedColors, colorArray, "f");
+  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");
+  }
+}, _KupEchart_checks = function _KupEchart_checks() {
+  const gaussianCount = this.types.filter((type) => type === KupEchartTypes.GAUSSIAN).length;
+  const nonGaussianCount = this.types.filter((type) => type === KupEchartTypes.GAUSSIAN).length;
+  // Automatically sets axis when there is no Gaussian chart and when axis is invalid.
+  // The first visible and non-numerical column will be used as axis.
+  if (!gaussianCount &&
+    (!this.axis ||
+      !__classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+        name: this.axis,
+      }).length)) {
+    for (let index = 0; index < this.data.columns.length; index++) {
+      const column = this.data.columns[index];
+      if (column.visible &&
+        !__classPrivateFieldGet(this, _KupEchart_kupManager, "f").objects.isNumber(column.obj)) {
+        this.axis = column.name;
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logMessage(this, 'Axis overridden. (' + this.axis + ')', KupDebugCategory.WARNING);
+        break;
+      }
+    }
+  }
+  // Automatically copies columns when there are multiple types and no specified series.
+  // Also 1 types must be GAUSSIAN.
+  if ((!this.series || !this.series.length) &&
+    gaussianCount === 1 &&
+    nonGaussianCount > 0 &&
+    this.data.columns &&
+    ((this.data.columns.length === 1 && !this.axis) ||
+      (this.data.columns.length === 2 && this.axis))) {
+    const series = !this.axis
+      ? this.data.columns[0]
+      : this.data.columns.filter((col) => col.name !== this.axis)[0];
+    for (let index = 0; index < this.types.length; index++) {
+      const type = this.types[index];
+      if (type !== KupEchartTypes.GAUSSIAN) {
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.new(this.data, KupDataNewColumnTypes.DUPLICATE, {
+          columns: [series.name],
+          newColumn: Object.assign(Object.assign({}, series), { name: series.name + '_' + index, title: series.title + ` (${type})` }),
+        });
+      }
+    }
+  }
+  // Checks for multiple series with the same column name, creating duplicate columns in case they are present.
+  // When there are more types than series, new series will be automatically added to match chart types.
+  if (this.series &&
+    this.types &&
+    this.series.length &&
+    this.types.length &&
+    this.data.columns) {
+    if (this.types.length > this.series.length) {
+      const lastSerie = this.series[this.series.length - 1];
+      for (let index = this.series.length; index < this.types.length; index++) {
+        this.series.push(lastSerie);
+      }
+    }
+    const occurrences = {};
+    for (let index = 0; index < this.series.length; index++) {
+      const serie = this.series[index];
+      if (Object.keys(occurrences).includes(serie)) {
+        occurrences[serie].push(index);
+      }
+      else {
+        occurrences[serie] = [index];
+      }
+    }
+    for (const key in occurrences) {
+      const indexes = occurrences[key];
+      for (let index = 1; indexes.length > 1 && index < indexes.length; index++) {
+        const seriesIndex = indexes[index];
+        const column = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, { name: this.series[seriesIndex] })[0];
+        const newName = column.name + '_' + index;
+        __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.new(this.data, KupDataNewColumnTypes.DUPLICATE, {
+          columns: [column.name],
+          newColumn: Object.assign(Object.assign({}, column), { name: newName, title: column.title +
+              ` (${this.types[seriesIndex]})` }),
+        });
+        this.series[seriesIndex] = newName;
+      }
+    }
+  }
 };
 KupEchart.style = kupEchartCss;
 

package/dist/esm/kup-field.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-78f3699d.js';
-import { k as kupManagerInstance, j as KupDebugCategory } from './kup-manager-bba62291.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-aeec9835.js';
+import { k as kupManagerInstance, j as KupDebugCategory } from './kup-manager-0ab94726.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
 
 /**
@@ -20,7 +20,7 @@ var KupFieldProps;
 
 const kupFieldCss = ":host{display:block;font-size:var(--kup-font-size)}label{color:var(--kup-text-color);font-family:var(--kup-font-family);font-size:1em}.kup-field__component{display:inline-block}.label-top.submit-top label{float:left;margin:auto auto 1em auto}.label-top.submit-top kup-button{float:right;margin:auto auto 1em auto}.label-right label{display:inline-block;margin:auto auto auto 1em}.submit-right kup-button{display:inline-block;margin:auto auto auto 1em}.label-left label{display:inline-block;margin:auto 1em auto auto}.submit-left kup-button{display:inline-block;margin:auto 1em auto auto}.submit-bottom kup-button{display:block;margin:1em auto auto auto}";
 
-let KupField = class {
+const KupField = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.kupChange = createEvent(this, "kup-field-change", 6);

package/dist/esm/kup-iframe.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-78f3699d.js';
-import { k as kupManagerInstance, j as KupDebugCategory } from './kup-manager-bba62291.js';
-import { g as getProps, s as setProps } from './utils-d1569956.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-aeec9835.js';
+import { k as kupManagerInstance, j as KupDebugCategory } from './kup-manager-0ab94726.js';
+import { g as getProps, s as setProps } from './utils-35c7a90d.js';
 
 /**
  * Props of the kup-iframe component.
@@ -15,7 +15,7 @@ var KupIframeProps;
 
 const kupIframeCss = "iframe{box-sizing:border-box;height:100%;width:100%}:host([is-iframe]){box-sizing:border-box;display:block;height:100%;width:100%}";
 
-let KupIframe = class {
+const KupIframe = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.kupIframeError = createEvent(this, "kup-iframe-error", 6);

package/dist/esm/kup-lazy.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-78f3699d.js';
-import { k as kupManagerInstance } from './kup-manager-bba62291.js';
-import { g as getProps, s as setProps } from './utils-d1569956.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-aeec9835.js';
+import { k as kupManagerInstance } from './kup-manager-0ab94726.js';
+import { g as getProps, s as setProps } from './utils-35c7a90d.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
 
 /**
@@ -26,7 +26,7 @@ var KupLazyRender;
 
 const kupLazyCss = ":host{--kup_lazy_hor_alignment:var(--kup-lazy-hor-alignment, center);--kup_lazy_ver_alignment:var(--kup-lazy-ver-alignment, center);--kup_lazy_animation_time:var(--kup-lazy-animation-time, 2s);--kup_lazy_placeholder_color:var(\n    --kup-lazy-placeholder-color,\n    var(--kup-icon-color)\n  );display:block;height:100%;width:100%;position:relative}#kup-component{align-items:var(--kup_lazy_ver_alignment);display:flex;justify-content:var(--kup_lazy_hor_alignment);height:100%;width:100%}#kup-component kup-data-table{min-width:100%}svg{fill:var(--kup_lazy_placeholder_color);animation:shine ease var(--kup_lazy_animation_time) infinite}@keyframes shine{0%{opacity:0.4}50%{opacity:0.8}100%{opacity:0.4}}:host(.kup-bottom-aligned){--kup-lazy-ver-alignment:flex-end}:host(.kup-left-aligned){--kup-lazy-hor-alignment:flex-start}:host(.kup-right-aligned){--kup-lazy-hor-alignment:flex-end}:host(.kup-top-aligned){--kup-lazy-ver-alignment:flex-start}:host(.kup-to-be-loaded) #kup-component{position:absolute}:host(.kup-to-be-loaded) #kup-component>*{margin:auto}";
 
-let KupLazy = class {
+const KupLazy = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.kupLazyLoaded = createEvent(this, "kup-lazy-loaded", 6);

package/dist/esm/kup-magic-box.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-78f3699d.js';
-import { k as kupManagerInstance, i as KupLanguageGeneric, j as KupDebugCategory, $ as kupDropEvent, H as kupDraggableColumnAttr, a0 as kupDraggableRowAttr, p as KupDropEventTypes, b as KupThemeColorValues } from './kup-manager-bba62291.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-aeec9835.js';
+import { k as kupManagerInstance, i as KupLanguageGeneric, j as KupDebugCategory, _ as kupDropEvent, F as kupDraggableColumnAttr, $ as kupDraggableRowAttr, o as KupDropEventTypes, b as KupThemeColorValues } from './kup-manager-0ab94726.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FImage } from './f-image-78c5265e.js';
-import { g as getProps, s as setProps } from './utils-d1569956.js';
+import { F as FImage } from './f-image-de331954.js';
+import { g as getProps, s as setProps } from './utils-35c7a90d.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
 
 /**
@@ -31,7 +31,7 @@ var KupMagicBoxDisplay;
 
 const kupMagicBoxCss = ":host{background-color:var(--kup-background-color);color:var(--kup-text-color);display:block;height:300px;min-width:700px;width:700px}#kup-component,.magic-box-wrapper{height:100%;width:100%}.magic-box-wrapper{border:3px dashed var(--kup-border-color);box-sizing:border-box;display:flex;flex-direction:column}.actions{align-items:center;background-color:var(--kup-title-background-color);display:inline-flex;height:52px;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.actions kup-button{margin:0.5em}.actions #comp-switcher{margin:auto 0}.actions #close-dialog{position:absolute;margin:0;top:0;right:0;background-color:var(--kup-title-background-color)}.content{box-sizing:border-box;height:100%;margin-top:52px;overflow:auto;transition:background-color 125ms ease}.empty{flex-direction:column;display:flex;text-align:center;justify-content:center;height:100%;width:100%;opacity:0.5;transition:opacity 0.25s ease-out}.empty .f-image{margin:0}.json{font-family:var(--kup-font-family-monospace);margin:0}[kup-drag-over]{background-color:rgba(var(--kup-success-color-rgb), 0.25)}";
 
-let KupMagicBox = class {
+const KupMagicBox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /*-------------------------------------------------*/
@@ -100,9 +100,9 @@ let KupMagicBox = class {
     for (const key in KupMagicBoxDisplay) {
       if (Object.prototype.hasOwnProperty.call(KupMagicBoxDisplay, key)) {
         listData.push({
-          text: KupMagicBoxDisplay[key],
-          value: KupMagicBoxDisplay[key],
+          id: KupMagicBoxDisplay[key],
           selected: false,
+          value: KupMagicBoxDisplay[key],
         });
       }
     }