@sme.up/ketchup 8.1.0 → 8.2.1

package/dist/collection/assets/echart.js

@@ -5,6 +5,8 @@ const echart4 = document.getElementById('gaussian1chart');
 const echart5 = document.getElementById('gaussian2chart');
 const echart6 = document.getElementById('funnelChart');
 const echart7 = document.getElementById('radarChart');
+const echart8 = document.getElementById('bubbleChart');
+const echart9 = document.getElementById('sankeyChart');
 
 const mockData = {
     columns: [
@@ -789,6 +791,322 @@ echart7.data = {
     ],
 };
 
+echart8.consistencyCheck = true;
+echart8.types = ['Bubble'];
+echart8.colors = ['blue'];
+echart8.axis = '';
+echart8.chartTitle = {
+    value: 'Bubble',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart8.data = {
+    columns: [
+        {
+            name: 'GDP',
+            title: 'Gdp',
+        },
+        {
+            name: 'AGE',
+            title: 'Age',
+        },
+        {
+            name: 'SIZE',
+            title: 'Size',
+        },
+        {
+            name: 'COUNTRY',
+            title: 'Country',
+        },
+        {
+            name: 'YEAR',
+            title: 'Year',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                COUNTRY: {
+                    value: 'China',
+                },
+                GDP: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1516',
+                    },
+                    value: '1516',
+                },
+                AGE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '68',
+                    },
+                    value: '68',
+                },
+                SIZE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1154605773',
+                    },
+                    value: '1154605773',
+                },
+                YEAR: {
+                    value: '1990',
+                },
+            },
+        },
+        {
+            cells: {
+                COUNTRY: {
+                    value: 'China',
+                },
+                GDP: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '13334',
+                    },
+                    value: '13334',
+                },
+                AGE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '76.9',
+                    },
+                    value: '76.9',
+                },
+                SIZE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1376048943',
+                    },
+                    value: '1376048943',
+                },
+                YEAR: {
+                    value: '2015',
+                },
+            },
+        },
+        {
+            cells: {
+                COUNTRY: {
+                    value: 'United States',
+                },
+                GDP: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '37062',
+                    },
+                    value: '37062',
+                },
+                AGE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '75.4',
+                    },
+                    value: '75.4',
+                },
+                SIZE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '252847810',
+                    },
+                    value: '252847810',
+                },
+                YEAR: {
+                    value: '1990',
+                },
+            },
+        },
+        {
+            cells: {
+                COUNTRY: {
+                    value: 'United States',
+                },
+                GDP: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '53354',
+                    },
+                    value: '53354',
+                },
+                AGE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '79.1',
+                    },
+                    value: '79.1',
+                },
+                SIZE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '321773631',
+                    },
+                    value: '321773631',
+                },
+                YEAR: {
+                    value: '2015',
+                },
+            },
+        },
+    ],
+};
+
+echart9.consistencyCheck = true;
+echart9.types = ['Sankey'];
+echart9.colors = ['blue'];
+echart9.axis = '';
+echart9.chartTitle = {
+    value: 'Sankey',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart9.data = {
+    // actual dataset
+    columns: [
+        {
+            name: 'SOURCE',
+            title: 'Source',
+        },
+        {
+            name: 'TARGET',
+            title: 'Target',
+        },
+        {
+            name: 'VALUE',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Value',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'a1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '5',
+                    },
+                    value: '5',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'a2',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '3',
+                    },
+                    value: '3',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b',
+                },
+                TARGET: {
+                    value: 'b1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '8',
+                    },
+                    value: '8',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'b1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '3',
+                    },
+                    value: '3',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b1',
+                },
+                TARGET: {
+                    value: 'a1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1',
+                    },
+                    value: '1',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b1',
+                },
+                TARGET: {
+                    value: 'c',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '2',
+                    },
+                    value: '2',
+                },
+            },
+        },
+    ],
+};
+
 document.addEventListener('kup-echart-click', (e) => {
     console.log(e);
 });

package/dist/collection/collection-manifest.json

@@ -52,7 +52,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.3.0",
+    "version": "3.4.0",
     "typescriptVersion": "5.0.4"
   },
   "collections": [],

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

@@ -19,7 +19,6 @@ export var KupBoxProps;
   KupBoxProps["lazyLoadRows"] = "When set to true, extra rows will be automatically loaded once the last row enters the viewport.";
   KupBoxProps["multiSelection"] = "Enable multi selection.";
   KupBoxProps["pageSelected"] = "Current page number.";
-  KupBoxProps["pageSize"] = "Number of boxes per page.";
   KupBoxProps["pagination"] = "Enables pagination.";
   KupBoxProps["rowsPerPage"] = "Number of current rows per page.";
   KupBoxProps["scrollOnHover"] = "Activates the scroll on hover function.";

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

@@ -79,7 +79,6 @@ export class KupBox {
     this.lazyLoadRows = false;
     this.multiSelection = false;
     this.pageSelected = 1;
-    this.pageSize = 10;
     this.pagination = false;
     this.rowsPerPage = undefined;
     this.scrollOnHover = false;
@@ -1068,9 +1067,6 @@ export class KupBox {
     if (this.rowsPerPage) {
       this.currentRowsPerPage = this.rowsPerPage;
     }
-    else if (this.pageSize) {
-      this.currentRowsPerPage = this.pageSize;
-    }
     if (this.data &&
       this.data.rows &&
       this.currentRowsPerPage > this.data.rows.length) {
@@ -1163,7 +1159,7 @@ export class KupBox {
     if (this.pagination) {
       paginator = (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.filteredRows.length, mode: FPaginatorMode.SIMPLE, perPage: this.currentRowsPerPage
           ? this.currentRowsPerPage
-          : this.pageSize, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));
+          : this.rowsPerPage, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));
     }
     let boxContent = null;
     let containerStyle = {};
@@ -1565,27 +1561,6 @@ export class KupBox {
         "reflect": false,
         "defaultValue": "1"
       },
-      "pageSize": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "10"
-            }],
-          "text": "Number of boxes per page"
-        },
-        "attribute": "page-size",
-        "reflect": false,
-        "defaultValue": "10"
-      },
       "pagination": {
         "type": "boolean",
         "mutable": false,
@@ -2097,7 +2072,7 @@ export class KupBox {
   static get elementRef() { return "rootElement"; }
   static get watchers() {
     return [{
-        "propName": "pageSize",
+        "propName": "rowsPerPage",
         "methodName": "rowsPerPageHandler"
       }, {
         "propName": "globalFilterValue",
@@ -2109,7 +2084,7 @@ export class KupBox {
         "propName": "pagination",
         "methodName": "recalculateRows"
       }, {
-        "propName": "pageSize",
+        "propName": "rowsPerPage",
         "methodName": "recalculateRows"
       }, {
         "propName": "currentPage",

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

@@ -44,6 +44,7 @@ export var KupDataTableProps;
   KupDataTableProps["showCustomization"] = "If set to true, displays the button to open the customization panel.";
   KupDataTableProps["selection"] = "Set the type of the rows selection.";
   KupDataTableProps["showDeleteButton"] = "Enables the delete row button.";
+  KupDataTableProps["showHistoryButton"] = "Enables the history datatable button.";
   KupDataTableProps["showFilters"] = "When set to true enables the column filters.";
   KupDataTableProps["showFooter"] = "When set to true shows the footer.";
   KupDataTableProps["showGrid"] = "Can be used to customize the grid view of the table.";

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

@@ -418,6 +418,7 @@ th.obj:hover span:not(.overlay-action) {
 
 .insert-button,
 .delete-button,
+.history-button,
 .save-button {
   padding: 1em 0.5em;
 }

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

@@ -203,6 +203,7 @@ export class KupDataTable {
     this.selection = SelectionMode.SINGLE;
     this.showCustomization = true;
     this.showDeleteButton = false;
+    this.showHistoryButton = false;
     this.showFilters = false;
     this.showFooter = false;
     this.showGrid = ShowGrid.ROW;
@@ -1261,7 +1262,13 @@ export class KupDataTable {
       }, styling: FButtonStyling.OUTLINED, title: "Save", wrapperClass: "save-button" })) : null, this.showDeleteButton &&
       this.selectedRows.length > 0 ? (h(FButton, { icon: "delete", onClick: () => {
         __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_rowsDelete).call(this);
-      }, styling: FButtonStyling.OUTLINED, title: "Delete selected rows", wrapperClass: "delete-button" })) : null), h("div", { class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
+      }, styling: FButtonStyling.OUTLINED, title: "Delete selected rows", wrapperClass: "delete-button" })) : null, this.showHistoryButton ? (h(FButton, { icon: "history", onClick: () => {
+        this.kupHistory.emit({
+          comp: this,
+          id: this.rootElement.id,
+          selectedRows: this.selectedRows,
+        });
+      }, styling: FButtonStyling.OUTLINED, title: "History", wrapperClass: "history-button" })) : null), h("div", { class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
       ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
       : null), h("div", { style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
       ? [
@@ -2137,6 +2144,24 @@ export class KupDataTable {
         "reflect": false,
         "defaultValue": "false"
       },
+      "showHistoryButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables the history button."
+        },
+        "attribute": "show-history-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "showFilters": {
         "type": "boolean",
         "mutable": false,
@@ -2704,6 +2729,26 @@ export class KupDataTable {
             }
           }
         }
+      }, {
+        "method": "kupHistory",
+        "name": "kup-datatable-history",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the history confirm button is pressed."
+        },
+        "complexType": {
+          "original": "KupDatatableHistoryEventPayload",
+          "resolved": "KupDatatableHistoryEventPayload",
+          "references": {
+            "KupDatatableHistoryEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -49,4 +49,6 @@ export var KupEchartTypes;
   KupEchartTypes["SCATTER"] = "Scatter";
   KupEchartTypes["FUNNEL"] = "Funnel";
   KupEchartTypes["RADAR"] = "Radar";
+  KupEchartTypes["BUBBLE"] = "Bubble";
+  KupEchartTypes["SANKEY"] = "Sankey";
 })(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_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_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';
@@ -652,6 +652,12 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     case KupEchartTypes.RADAR:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_radarChart).call(this);
       break;
+    case KupEchartTypes.BUBBLE:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_bubbleChart).call(this);
+      break;
+    case KupEchartTypes.SANKEY:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_sankeyChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -786,6 +792,121 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
       },
     ],
   };
+}, _KupEchart_bubbleChart = function _KupEchart_bubbleChart() {
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), data = [], temp = [], legend = {}, series = [];
+  let year = [];
+  const content = this.data.columns.map((data) => data.title);
+  if (content && content.length) {
+    for (let i = 0; i < y[content[0]].length; i++) {
+      const arr = [];
+      for (let j = 0; j < content.length; j++) {
+        arr.push(y[content[j]][i]);
+        // last value always be a year
+        if (j === content.length - 1) {
+          year.push(y[content[j]][i]);
+        }
+      }
+      temp.push(arr);
+    }
+  }
+  year = [...new Set(year)];
+  year.forEach((e, i) => {
+    let k = [];
+    temp.forEach((data) => {
+      if (data.includes(e))
+        k.push(data);
+    });
+    data.push(k);
+    legend[e] = i;
+  });
+  data.forEach((el, i) => {
+    series.push({
+      name: year[i],
+      data: el,
+      type: 'scatter',
+      symbolSize: function (data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        focus: 'series',
+        label: {
+          show: true,
+          formatter: function (param) {
+            return param.data[3];
+          },
+          position: 'top',
+        },
+      },
+    });
+  });
+  return {
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
+        const name = value.data;
+        const data = content.map((e, i) => {
+          return `<li>  ${e}: ${name[i]} </li>`;
+        });
+        let showContent = '';
+        data.forEach((r) => {
+          showContent += r;
+        });
+        return `<ul>${showContent}</ul> `;
+      } }),
+    xAxis: {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+    },
+    yAxis: {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+      scale: true,
+    },
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, content.length),
+    series: series,
+  };
+}, _KupEchart_sankeyChart = function _KupEchart_sankeyChart() {
+  const links = [], y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), keys = Object.keys(y);
+  // Assuming all arrays in the question object have the same length
+  const arrayLength = y[keys[0]].length;
+  for (let i = 0; i < arrayLength; i++) {
+    const entry = {};
+    entry['source'] = y[keys[0]][i];
+    entry['target'] = y[keys[1]][i];
+    entry['value'] = parseInt(y[keys[2]][i]);
+    links.push(entry);
+  }
+  const data = Array.from(new Set([
+    ...links.map((link) => link.source),
+    ...links.map((link) => link.target),
+  ])).map((name) => ({ name }));
+  const legend = {};
+  data.forEach((e, i) => {
+    legend[e.name] = i;
+  });
+  return {
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+    series: {
+      type: 'sankey',
+      layout: 'none',
+      emphasis: {
+        focus: 'adjacency',
+      },
+      data,
+      links,
+      right: '10%',
+      left: '10%',
+    },
+  };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];
   if (!dataset)