@sme.up/ketchup 8.2.2 → 8.3.1

package/dist/collection/assets/echart.js

@@ -7,6 +7,10 @@ const echart6 = document.getElementById('funnelChart');
 const echart7 = document.getElementById('radarChart');
 const echart8 = document.getElementById('bubbleChart');
 const echart9 = document.getElementById('sankeyChart');
+const echart10 = document.getElementById('candleStickChart');
+const echart11 = document.getElementById('calendarChart');
+
+
 
 const mockData = {
     columns: [
@@ -1107,6 +1111,250 @@ echart9.data = {
     ],
 };
 
+echart10.consistencyCheck = true;
+echart10.types = ['Candle'];
+echart10.colors =  ['blue'];
+echart10.axis = '';
+echart10.chartTitle = {
+    value: 'Candle',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart10.data = { // actual dataset
+    columns: [
+        {
+            name: 'DATE',
+            obj: {
+                t: 'D8',
+                p: '*YYMD',
+                k: '',
+            },
+            title: 'Date',
+        },
+        {
+            name: 'LOW',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Low',
+        },
+        {
+            name: 'HIGH',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'High',
+        },
+        {
+            name: 'OPEN',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Open',
+        },
+        {
+            name: 'CLOSE',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Close',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20171024',
+                    },
+                    value: '2017-10-24',
+                },
+                HIGH: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '38',
+                    },
+                    value: '38',
+                },
+                LOW: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '10',
+                    },
+                    value: '10',
+                },
+                OPEN: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '34',
+                    },
+                    value: '34',
+                },
+                CLOSE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '20',
+                    },
+                    value: '20',
+                },
+            },
+        },{
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20171025',
+                    },
+                    value: '2017-10-25',
+                },
+                HIGH: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '50',
+                    },
+                    value: '50',
+                },
+                LOW: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '30',
+                    },
+                    value: '30',
+                },
+                OPEN: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '35',
+                    },
+                    value: '35',
+                },
+                CLOSE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '40',
+                    },
+                    value: '40',
+                },
+            },
+        },
+    ]
+}
+
+echart11.consistencyCheck = true;
+echart11.types = ['Calendar'];
+echart11.colors =  ['blue'];
+echart11.axis = '';
+echart11.chartTitle = {
+    value: 'Calendar',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart11.data = { // actual dataset
+    columns: [
+        {
+            name: 'DATE',
+            obj: {
+                t: 'D8',
+                p: '*YYMD',
+                k: '',
+            },
+            title: 'Date',
+        },
+        {
+            name: 'VALUE',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Value',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20230401',
+                    },
+                    value: '2023-04-01',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '50',
+                    },
+                    value: '50',
+                },
+            },
+        },
+        {
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20230415',
+                    },
+                    value: '2023-04-15',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '25',
+                    },
+                    value: '25',
+                },
+            },
+        },
+        {
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20230430',
+                    },
+                    value: '2023-04-30',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '100',
+                    },
+                    value: '100',
+                },
+            },
+        },
+    ],
+}
+
 document.addEventListener('kup-echart-click', (e) => {
     console.log(e);
 });

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -1237,6 +1237,8 @@ export class KupDataTable {
           for (let index = 0; index < this.data.columns.length; index++) {
             const column = this.data.columns[index];
             cells[column.name] = {
+              data: column.cellData,
+              slotData: column.cellSlotData,
               isEditable: column.isKey ||
                 column.isEditable,
               obj: Object.assign({}, column.obj),

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

@@ -51,4 +51,6 @@ export var KupEchartTypes;
   KupEchartTypes["RADAR"] = "Radar";
   KupEchartTypes["BUBBLE"] = "Bubble";
   KupEchartTypes["SANKEY"] = "Sankey";
+  KupEchartTypes["CANDLE"] = "Candle";
+  KupEchartTypes["CALENDAR"] = "Calendar";
 })(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_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_bubbleChart, _KupEchart_sankeyChart, _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;
+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';
 import * as echarts from 'echarts';
 import { KupEchartLegendPlacement, KupEchartMaps, KupEchartProps, KupEchartTypes, } from './kup-echart-declarations';
@@ -658,6 +658,13 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     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:
+      console.log('virtual 0');
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_calendarChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -907,6 +914,123 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
       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;
+        console.log('data', name);
+        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,
+    },
+  };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];
   if (!dataset)

package/dist/collection/components/kup-form/kup-form.css

@@ -5,6 +5,7 @@
 * @prop --kup-form-font-size: Sets font size of the component.
 * @prop --kup-form-label-alignment: Sets the text alignment of labels.
 * @prop --kup-form-label-width: Sets the width of labels.
+* @prop --kup-form-padding: Sets the padding of the form.
 */
 :host {
   --kup_form_background_color: var(
@@ -16,6 +17,7 @@
   --kup_form_font_size: var(--kup-form-font-size, var(--kup-font-size));
   --kup_form_label_alignment: var(--kup-form-label-alignment);
   --kup_form_label_width: var(--kup-form-label-width);
+  --kup_form_padding: var(--kup-form-padding, 1em 0);
   display: block;
   font-family: var(--kup_form_font_family);
   font-size: var(--kup_form_font_size);
@@ -27,7 +29,7 @@
   display: flex;
   flex-grow: 1;
   overflow: auto;
-  padding: 1em 0;
+  padding: var(--kup_form_padding);
   position: relative;
 }
 .form--column {

package/dist/collection/f-components/f-cell/f-cell-declarations.js

@@ -152,6 +152,8 @@ export const kupTypes = [
   FCellTypes.COLOR_PICKER,
   FCellTypes.GAUGE,
   FCellTypes.KNOB,
+  FCellTypes.MULTI_AUTOCOMPLETE,
+  FCellTypes.MULTI_COMBOBOX,
   FCellTypes.PROGRESS_BAR,
   FCellTypes.RADIO,
   FCellTypes.RATING,

package/dist/collection/f-components/f-cell/f-cell.js

@@ -331,6 +331,8 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+    case FCellTypes.MULTI_AUTOCOMPLETE:
+    case FCellTypes.MULTI_COMBOBOX:
     case FCellTypes.CHIP:
       return h(FChip, Object.assign({}, subcomponentProps));
     case FCellTypes.COLOR_PICKER:

package/dist/components/kup-autocomplete2.js

@@ -8304,6 +8304,8 @@ const kupTypes = [
   FCellTypes.COLOR_PICKER,
   FCellTypes.GAUGE,
   FCellTypes.KNOB,
+  FCellTypes.MULTI_AUTOCOMPLETE,
+  FCellTypes.MULTI_COMBOBOX,
   FCellTypes.PROGRESS_BAR,
   FCellTypes.RADIO,
   FCellTypes.RATING,
@@ -23333,6 +23335,8 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+    case FCellTypes.MULTI_AUTOCOMPLETE:
+    case FCellTypes.MULTI_COMBOBOX:
     case FCellTypes.CHIP:
       return h(FChip, Object.assign({}, subcomponentProps));
     case FCellTypes.COLOR_PICKER:
@@ -38336,7 +38340,7 @@ var KupFormLabelPlacement;
   KupFormLabelPlacement["TOP"] = "top";
 })(KupFormLabelPlacement || (KupFormLabelPlacement = {}));
 
-const kupFormCss = ":host{--kup_form_background_color:var(\n    --kup-form-background-color,\n    var(--kup-background-color)\n  );--kup_form_color:var(--kup-form-color, var(--kup-text-color));--kup_form_font_family:var(--kup-form-font-family, var(--kup-font-family));--kup_form_font_size:var(--kup-form-font-size, var(--kup-font-size));--kup_form_label_alignment:var(--kup-form-label-alignment);--kup_form_label_width:var(--kup-form-label-width);display:block;font-family:var(--kup_form_font_family);font-size:var(--kup_form_font_size)}.form{background:var(--kup_form_background_color);color:var(--kup_form_color);display:flex;flex-grow:1;overflow:auto;padding:1em 0;position:relative}.form--column{flex-direction:column}.form__section{display:flex;flex:1 1 1%;flex-direction:row;flex-wrap:wrap}.form__section--column{flex-direction:column;flex-wrap:unset}.form__section--column>.form__section{flex:0 0 auto}.form__section--grid{display:grid}.form__section--titled{border:1px solid var(--kup-border-color);padding-top:5px;position:relative;margin:10px}.form__section--titled>h3{background:var(--kup-background-color);font-size:calc(var(--kup-font-size) * 1.15);position:absolute;margin:0px;padding:0 8px;top:-11px;left:5px;transition:background-color 0.25s ease}.form__section--left .form__label{width:var(--kup_form_label_width, 0)}.form__section--right .form__field{min-width:200px;width:0}.form__label{-webkit-font-smoothing:antialiased;box-sizing:border-box;font-size:0.875em;letter-spacing:0.0178571429em;white-space:nowrap;width:var(--kup_form_label_width)}.form__label--center{text-align:var(--kup_form_label_alignment, center)}.form__label--left{text-align:var(--kup_form_label_alignment, left)}.form__label--right{text-align:var(--kup_form_label_alignment, right)}.form__field{min-height:16px}.form__field img{height:auto}.form__submit{height:0;opacity:0;overflow:hidden;position:absolute;width:0}.form .f-cell.c-right-aligned:not(.c-centered) .f-cell__content{justify-content:flex-start}";
+const kupFormCss = ":host{--kup_form_background_color:var(\n    --kup-form-background-color,\n    var(--kup-background-color)\n  );--kup_form_color:var(--kup-form-color, var(--kup-text-color));--kup_form_font_family:var(--kup-form-font-family, var(--kup-font-family));--kup_form_font_size:var(--kup-form-font-size, var(--kup-font-size));--kup_form_label_alignment:var(--kup-form-label-alignment);--kup_form_label_width:var(--kup-form-label-width);--kup_form_padding:var(--kup-form-padding, 1em 0);display:block;font-family:var(--kup_form_font_family);font-size:var(--kup_form_font_size)}.form{background:var(--kup_form_background_color);color:var(--kup_form_color);display:flex;flex-grow:1;overflow:auto;padding:var(--kup_form_padding);position:relative}.form--column{flex-direction:column}.form__section{display:flex;flex:1 1 1%;flex-direction:row;flex-wrap:wrap}.form__section--column{flex-direction:column;flex-wrap:unset}.form__section--column>.form__section{flex:0 0 auto}.form__section--grid{display:grid}.form__section--titled{border:1px solid var(--kup-border-color);padding-top:5px;position:relative;margin:10px}.form__section--titled>h3{background:var(--kup-background-color);font-size:calc(var(--kup-font-size) * 1.15);position:absolute;margin:0px;padding:0 8px;top:-11px;left:5px;transition:background-color 0.25s ease}.form__section--left .form__label{width:var(--kup_form_label_width, 0)}.form__section--right .form__field{min-width:200px;width:0}.form__label{-webkit-font-smoothing:antialiased;box-sizing:border-box;font-size:0.875em;letter-spacing:0.0178571429em;white-space:nowrap;width:var(--kup_form_label_width)}.form__label--center{text-align:var(--kup_form_label_alignment, center)}.form__label--left{text-align:var(--kup_form_label_alignment, left)}.form__label--right{text-align:var(--kup_form_label_alignment, right)}.form__field{min-height:16px}.form__field img{height:auto}.form__submit{height:0;opacity:0;overflow:hidden;position:absolute;width:0}.form .f-cell.c-right-aligned:not(.c-centered) .f-cell__content{justify-content:flex-start}";
 
 const dom = document.documentElement;
 const KupForm = /*@__PURE__*/ proxyCustomElement(class KupForm extends HTMLElement$1 {
@@ -40142,6 +40146,8 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
           for (let index = 0; index < this.data.columns.length; index++) {
             const column = this.data.columns[index];
             cells[column.name] = {
+              data: column.cellData,
+              slotData: column.cellSlotData,
               isEditable: column.isKey ||
                 column.isEditable,
               obj: Object.assign({}, column.obj),

package/dist/components/kup-echart2.js

@@ -93855,6 +93855,8 @@ var KupEchartTypes;
   KupEchartTypes["RADAR"] = "Radar";
   KupEchartTypes["BUBBLE"] = "Bubble";
   KupEchartTypes["SANKEY"] = "Sankey";
+  KupEchartTypes["CANDLE"] = "Candle";
+  KupEchartTypes["CALENDAR"] = "Calendar";
 })(KupEchartTypes || (KupEchartTypes = {}));
 
 const kupEchartCss = ":host{display:block;height:var(--kup_echart_height, 100%);min-height:var(--kup_echart_height, 100%);min-width:var(--kup_echart_width, 100%);width:var(--kup_echart_width, 100%)}#kup-component{width:100%;height:100%;position:relative}";
@@ -93875,7 +93877,7 @@ 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_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_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;
+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;
 const KupEchart = /*@__PURE__*/ proxyCustomElement(class KupEchart extends HTMLElement {
   constructor() {
     super();
@@ -94075,6 +94077,13 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     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:
+      console.log('virtual 0');
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_calendarChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -94324,6 +94333,123 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
       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;
+        console.log('data', name);
+        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,
+    },
+  };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];
   if (!dataset)

package/dist/esm/{f-button-c5b36ae1.js → f-button-38ee97e6.js}

@@ -1,6 +1,6 @@
 import { h } from './index-b45996ce.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
-import { F as FImage } from './f-image-c356f4c5.js';
+import { F as FImage } from './f-image-77ac3ca0.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */