@sme.up/ketchup 6.2.0 → 6.4.0

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

@@ -142,6 +142,7 @@ export class KupDashboard {
       onChange: (e) => {
         const { target } = e;
         section.dim = target.value;
+        this.refresh();
       },
     };
     const addButtonProp = {
@@ -227,6 +228,25 @@ export class KupDashboard {
           ? section.sections.map((childSection) => this.buildSection(childSection, section))
           : undefined)));
   }
+  calcSectionPosition(pointerY, pointerX, vertical, sectionCount, elements) {
+    let idx = sectionCount;
+    for (let index = 0; index < elements.length; index++) {
+      const element = elements[index];
+      const srect = element.getBoundingClientRect();
+      if (vertical && pointerY < srect.y) {
+        idx = index;
+        break;
+      }
+      else if (!vertical && pointerX < srect.x) {
+        idx = index;
+        break;
+      }
+    }
+    //console.log(
+    //    `pointer: ${pointerX}:${pointerY} - vertical: ${vertical} - index: ${idx}`
+    //);
+    return idx;
+  }
   didRenderInteractables() {
     try {
       const items = [];
@@ -249,9 +269,17 @@ export class KupDashboard {
         .querySelectorAll('.form-dropzone')
         .forEach((x) => items.push(x));
       items.forEach((item) => {
-        this.kupManager.interact.dropzone(item, null, null, {
+        this.kupManager.interact.dropzone(item, {
+          ondropdeactivate: () => {
+            this.removeSectionPlaceHolder();
+          },
+          ondropmove: (ev) => {
+            this.removeSectionPlaceHolder();
+            this.dragEnter(ev.dragEvent.clientY, ev.dragEvent.clientX, ev.currentTarget);
+          },
+        }, null, {
           drop: (ev) => {
-            this.dropped(ev.currentTarget, ev.relatedTarget);
+            this.dropped(ev, ev.currentTarget, ev.relatedTarget);
           },
         });
       });
@@ -260,14 +288,33 @@ export class KupDashboard {
       this.kupManager.debug.logMessage(this, error, KupDebugCategory.ERROR);
     }
   }
-  dropped(parent, child) {
+  dragEnter(clientY, clientX, parent) {
+    if (parent.kupData.form) {
+      // form is the target of drop.
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(clientY, clientX, parent.kupData.form.layout == 'column', parent.kupData.form.sections.length, parent.children);
+      // set placeholder into target area.
+      this.setSectionPlaceHolder(parent, nidx);
+    }
+    else if (parent.kupData.section) {
+      // section is the target of drop.
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(clientY, clientX, parent.kupData.section.layout == 'column', parent.kupData.section.sections.length, parent.lastElementChild.children);
+      // set placeholder into target area.
+      this.setSectionPlaceHolder(parent.lastElementChild, nidx);
+    }
+  }
+  dropped(event, parent, child) {
     const idx = child.kupData.parent.sections.indexOf(child.kupData.section);
     child.kupData.parent.sections.splice(idx, 1);
     if (parent.kupData.form) {
       // form is the target of drop.
       if (!parent.kupData.form.sections)
         parent.kupData.form.sections = [];
-      parent.kupData.form.sections.push(child.kupData.section);
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(event.dragEvent.clientY, event.dragEvent.clientX, parent.kupData.form.layout == 'column', parent.kupData.form.sections.length, parent.children);
+      // set the section in 'nidx' position.
+      parent.kupData.form.sections.splice(nidx, 0, child.kupData.section);
       child.kupData.parent = parent.kupData.form;
     }
     else if (parent.kupData.section) {
@@ -282,17 +329,20 @@ export class KupDashboard {
         parent.kupData.section.sections = [];
         parent.kupData.section.sections.push(newSec);
       }
-      parent.kupData.section.sections.push(child.kupData.section);
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(event.dragEvent.clientY, event.dragEvent.clientX, parent.kupData.section.layout == 'column', parent.kupData.section.sections.length, parent.lastElementChild.children);
+      // set the section in 'nidx' position.
+      parent.kupData.section.sections.splice(nidx, 0, child.kupData.section);
       child.kupData.parent = parent.kupData.section;
     }
     this.resetData(this.internalData);
   }
   getGridStyle(entity) {
     let bodyStyles = {};
-    if (!this.enableDesign && entity.sections) {
+    if (entity.sections) {
       let gridTemplate = '';
       entity.sections.forEach((childSection) => {
-        if (!childSection.dim)
+        if (this.enableDesign || !childSection.dim)
           gridTemplate += ' 1fr';
         else
           gridTemplate +=
@@ -307,6 +357,16 @@ export class KupDashboard {
     }
     return bodyStyles;
   }
+  setSectionPlaceHolder(element, index) {
+    const ph = document.createElement('div');
+    ph.className = 'section-placeholder';
+    element.insertBefore(ph, element.childNodes[index]);
+  }
+  removeSectionPlaceHolder() {
+    const ph = this.rootElement.shadowRoot.querySelector('.section-placeholder');
+    if (ph)
+      ph.parentElement.removeChild(ph);
+  }
   resetData(form = null) {
     if (form)
       this.internalDataBackup = form;

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

@@ -1,7 +1,8 @@
 import { SortMode, TotalMode, } from './kup-data-table-declarations';
-import { stringToNumber } from '../../utils/utils';
+import { isNumber, stringToNumber } from '../../utils/utils';
 import { getCellValueForDisplay, getColumnByName, compareCell, } from '../../utils/cell-utils';
 import { FiltersRows } from '../../utils/filters/filters-rows';
+import { KupDatesFormats } from '../../managers/kup-dates/kup-dates-declarations';
 const dom = document.documentElement;
 export function sortRows(rows = [], sort = []) {
   if (!rows || rows.length === 0) {
@@ -567,8 +568,9 @@ export function calcTotals(rows = [], totals = {}) {
   }
   const keys = Object.keys(totals);
   const footerRow = {};
+  const dateColumns = new Array();
   // if there are only COUNT, no need to loop on rows
-  let onlyCount = keys.length === 0 &&
+  let onlyCount = keys.length === 0 ||
     keys.every((key) => totals[key] === TotalMode.COUNT);
   if (onlyCount) {
     keys.forEach((columnName) => (footerRow[columnName] = rows.length));
@@ -631,35 +633,40 @@ export function calcTotals(rows = [], totals = {}) {
             // TODO DRY the MIN and MAX functions
           }
           else if (dom.ketchup.objects.isDate(cell.obj)) {
-            const momentValue = cell.obj
-              ? dom.ketchup.objects.parseDate(cell.obj)
-              : dom.ketchup.dates.toDayjs(cell.value);
+            if (dateColumns.indexOf(key) == -1) {
+              dateColumns.push(key);
+            }
+            const momentValue = dom.ketchup.dates.toDayjs(cell.value);
             if (dom.ketchup.dates.isValid(momentValue)) {
               const cellValue = dom.ketchup.dates.toDate(momentValue);
-              const currentFooterValue = footerRow[key];
+              const currentFooterValue = footerRow[key]
+                ? dom.ketchup.dates.toDate(dom.ketchup.dates.toDayjs(footerRow[key]))
+                : null;
               switch (true) {
                 case totals[key] === TotalMode.MIN:
                   if (currentFooterValue) {
                     let moments = [];
                     moments.push(cellValue);
-                    moments.push(dom.ketchup.dates.format(currentFooterValue));
+                    moments.push(currentFooterValue);
                     footerRow[key] =
-                      dom.ketchup.dates.format(dom.ketchup.dates.min(moments));
+                      dom.ketchup.dates.format(dom.ketchup.dates.min(moments), KupDatesFormats.ISO_DATE);
                   }
                   else {
-                    footerRow[key] = cellValue;
+                    footerRow[key] =
+                      dom.ketchup.dates.format(cellValue, KupDatesFormats.ISO_DATE);
                   }
                   break;
                 case totals[key] === TotalMode.MAX:
                   if (currentFooterValue) {
                     let moments = [];
                     moments.push(cellValue);
-                    moments.push(dom.ketchup.dates.format(currentFooterValue));
+                    moments.push(currentFooterValue);
                     footerRow[key] =
-                      dom.ketchup.dates.format(dom.ketchup.dates.max(moments));
+                      dom.ketchup.dates.format(dom.ketchup.dates.max(moments), KupDatesFormats.ISO_DATE);
                   }
                   else {
-                    footerRow[key] = cellValue;
+                    footerRow[key] =
+                      dom.ketchup.dates.format(cellValue, KupDatesFormats.ISO_DATE);
                   }
                   break;
                 default:
@@ -676,25 +683,30 @@ export function calcTotals(rows = [], totals = {}) {
         }
       });
     });
-    // fixing MATH, AVERAGE and COUNT
-    for (let key of keys) {
-      switch (true) {
-        case totals[key] === TotalMode.AVERAGE:
-          const sum = footerRow[key];
-          if (sum && rows.length > 0) {
-            footerRow[key] = sum / rows.length;
-          }
-          break;
-        case totals[key] === TotalMode.COUNT:
-          footerRow[key] = rows.length;
-          break;
-        case totals[key].indexOf(TotalMode.MATH) == 0:
-          footerRow[key] = dom.ketchup.math.formulas.custom(totals[key].substring(TotalMode.MATH.length), footerRow);
-          break;
-        default:
-          break;
+  }
+  // fixing MATH, AVERAGE and COUNT
+  for (let key of keys) {
+    switch (true) {
+      case totals[key] === TotalMode.AVERAGE:
+        const sum = footerRow[key];
+        if (sum && rows.length > 0) {
+          footerRow[key] = sum / rows.length;
+        }
+        break;
+      case totals[key] === TotalMode.COUNT:
+        footerRow[key] = rows.length;
+        break;
+      case totals[key].indexOf(TotalMode.MATH) == 0:
+        footerRow[key] = dom.ketchup.math.formulas.custom(totals[key].substring(TotalMode.MATH.length), footerRow);
+        break;
+      default:
+        break;
+    }
+    if (footerRow[key]) {
+      if (dateColumns.indexOf(key) != -1) {
+        footerRow[key] = dom.ketchup.dates.format(footerRow[key]);
       }
-      if (footerRow[key]) {
+      else if (isNumber(footerRow[key])) {
         footerRow[key] = +footerRow[key].toFixed(2);
       }
     }

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

@@ -3350,7 +3350,9 @@ export class KupDataTable {
           });
         }
         else {
-          this.kupManager.debug.logMessage(this, "Grouped for a non-existent column! (" + group.column + ")", KupDebugCategory.WARNING);
+          this.kupManager.debug.logMessage(this, 'Grouped for a non-existent column! (' +
+            group.column +
+            ')', KupDebugCategory.WARNING);
         }
       }
       if (chipsData.length > 0) {

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

@@ -881,19 +881,21 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
   }
   const y = {};
   let objKey;
-  for (const row of this.data.rows) {
-    objKey = row.cells[this.axis].value;
-    y[objKey] = [];
-    for (const key of Object.keys(row.cells)) {
-      const cell = row.cells[key];
-      const value = cell.value;
-      if (!this.axis.includes(key)) {
-        if (this.series &&
-          this.series.length > 0 &&
-          !this.series.includes(key)) {
-          continue;
+  if (this.axis) {
+    for (const row of this.data.rows) {
+      objKey = row.cells[this.axis].value;
+      y[objKey] = [];
+      for (const key of Object.keys(row.cells)) {
+        const cell = row.cells[key];
+        const value = cell.value;
+        if (!this.axis.includes(key)) {
+          if (this.series &&
+            this.series.length > 0 &&
+            !this.series.includes(key)) {
+            continue;
+          }
+          y[objKey].push(value);
         }
-        y[objKey].push(value);
       }
     }
   }
@@ -957,6 +959,12 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
         '</div>');
     }
   };
+  let axisColumn = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+    name: this.axis,
+  });
+  let serieTitle = axisColumn && axisColumn.length > 0
+    ? axisColumn[0].title
+    : 'No title';
   const echartOption = Object.assign({ emphasis: {
       label: {
         show: true,
@@ -989,9 +997,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
           padding: 4,
         },
         map: this.rootElement.id ? this.rootElement.id : '',
-        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
-          name: this.axis,
-        })[0].title,
+        name: serieTitle,
         roam: true,
         select: {
           itemStyle: {
@@ -1063,29 +1069,33 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     if (type == KupEchartTypes.GAUSSIAN) {
       if (!__classPrivateFieldGet(this, _KupEchart_kupManager, "f").objects.isNumber(column.obj)) {
         const newDataset = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.distinct(this.data, [column.name]);
-        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(newDataset, [
-          column.name,
-        ]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getUnivocalValue(newDataset, column);
         __classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column.name] = newDataset;
       }
       else {
-        values = y[key];
+        values = [];
+        for (let index = 0; index < y[key].length; index++) {
+          const element = y[key][index];
+          values.push({ value: element });
+        }
       }
     }
     else {
       if (needSortDataset) {
         // if there is only one series other than the Gaussian then I apply the sorting algorithm that arranges the data in "mountain"
         __classPrivateFieldSet(this, _KupEchart_sortedDataset, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.sort(this.data, 'normalDistribution', column.name), "f");
-        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"), [column.name]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"), column);
         x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this, __classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"));
       }
       else {
-        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(this.data, [
-          column.name,
-        ]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(this.data, column);
       }
     }
-    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, values, key, mixedSeries, needSortDataset);
+    const justValues = new Array();
+    for (let i = 0; i < values.length; i++) {
+      justValues.push(values[i].value);
+    }
+    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, justValues, key, mixedSeries, needSortDataset);
     i++;
   }
   // "any" because type is mismanaged inside echarts library

package/dist/collection/components/kup-family-tree/kup-family-tree-declarations.js

@@ -4,9 +4,11 @@
  */
 export var KupFamilyTreeProps;
 (function (KupFamilyTreeProps) {
-  KupFamilyTreeProps["autofit"] = "The component's initial render will fit the container.";
+  KupFamilyTreeProps["autofitOnExpand"] = "The component will autofit everytime a node is expanded.";
+  KupFamilyTreeProps["autofitOnLoad"] = "The component's initial render will fit the container by invoking the runAutofit method.";
   KupFamilyTreeProps["collapsible"] = "Nodes can be expanded/collapsed.";
   KupFamilyTreeProps["customStyle"] = "Custom style of the component.";
   KupFamilyTreeProps["data"] = "Actual data of the component";
   KupFamilyTreeProps["layout"] = "Layout of the boxes.";
+  KupFamilyTreeProps["stackedLeaves"] = "Child nodes that have no children are arranged vertically.";
 })(KupFamilyTreeProps || (KupFamilyTreeProps = {}));

package/dist/collection/components/kup-family-tree/kup-family-tree.css

@@ -11,16 +11,16 @@
 :host {
   --kup_familytree_item_background_color: var(
     --kup-familytree-item-background-color,
-    var(--kup-primary-color)
+    var(--kup-background-color)
   );
   --kup_familytree_item_color: var(
     --kup-familytree-item-color,
-    var(--kup-text-on-primary-color)
+    var(--kup-text-color)
   );
-  --kup_familytree_item_height: var(--kup-familytree-item-height, 40px);
+  --kup_familytree_item_height: var(--kup-familytree-item-height, 80px);
   --kup_familytree_item_h_padding: var(--kup-familytree-item-h-padding, 8px);
   --kup_familytree_item_v_padding: var(--kup-familytree-item-v-padding, 10px);
-  --kup_familytree_item_width: var(--kup-familytree-item-width, 120px);
+  --kup_familytree_item_width: var(--kup-familytree-item-width, 280px);
   --kup_familytree_lines_color: var(
     --kup-familytree-lines-color,
     var(--kup-border-color)
@@ -30,20 +30,27 @@
 }
 
 .family-tree {
+  cursor: grab;
   display: flex;
   transform: scale(var(--kup_familytree_scale, 1));
   transform-origin: 0px 0px;
 }
+.family-tree--dragging {
+  cursor: grabbing;
+}
 .family-tree__node {
   border-collapse: collapse;
   margin: auto;
 }
+.family-tree__node--stacked {
+  margin-bottom: 4px;
+}
 .family-tree__node__staff {
   align-items: center;
   display: flex;
   flex-direction: column;
   height: 0;
-  transform: translateX(calc( ( var(--kup_familytree_item_width) + (var(--kup_familytree_item_h_padding) * 2) ) / 2 )) translateY(calc( 0px - ( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) ) ));
+  transform: translateX(calc( ( var(--kup_familytree_item_width) + (var(--kup_familytree_item_h_padding) * 2) ) / 2 )) translateY(calc( 0px - ( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * (var(--kup_familytree_item_v_padding) * 2) ) ));
 }
 .family-tree__node__staff__item {
   padding: var(--kup_familytree_item_v_padding);
@@ -67,7 +74,7 @@
   height: calc(var(--kup_familytree_item_height) / 2);
 }
 .family-tree__line--staff {
-  height: calc( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) );
+  height: calc( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * (var(--kup_familytree_item_v_padding) * 2) );
 }
 .family-tree__line--right {
   border-right: 2px solid var(--kup_familytree_lines_color);
@@ -95,7 +102,70 @@
   z-index: 1;
 }
 .family-tree__item__wrapper .f-button {
-  width: fit-content;
-  margin-left: auto;
-  margin-right: auto;
+  --kup-button-primary-color: var(--kup-text-color);
+  --kup-button-primary-color-rgb: var(--kup-text-color-rgb);
+  --kup-button-primary-color-h: var(--kup-text-color-h);
+  --kup-button-primary-color-s: var(--kup-text-color-s);
+  --kup-button-primary-color-l: var(--kup-text-color-l);
+  margin: 0 auto;
+  width: max-content;
+}
+.family-tree__item__wrapper .f-button button {
+  height: 32px;
+  width: 32px;
+}
+.family-tree__item__layout {
+  background-color: var(--kup_familytree_item_background_color);
+  border: 1px solid var(--kup_familytree_lines_color);
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  height: var(--kup_familytree_item_height);
+  margin: 0 18px;
+  width: var(--kup_familytree_item_width);
+}
+.family-tree__item__layout--1 {
+  justify-content: center;
+  color: var(--kup_familytree_item_color);
+}
+.family-tree__item__layout--1 > .family-tree__item__layout__text__title {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.family-tree__item__layout--2 {
+  background-color: var(--kup_familytree_item_background_color);
+  justify-content: flex-start;
+}
+.family-tree__item__layout__color {
+  background-color: var(--kup-secondary-color);
+  border-bottom-left-radius: 8px;
+  border-top-left-radius: 8px;
+  height: 100%;
+  width: 10px;
+}
+.family-tree__item__layout__image {
+  display: flex;
+  margin: auto 10px;
+}
+.family-tree__item__layout__image img {
+  border-radius: 50px;
+  object-fit: cover;
+}
+.family-tree__item__layout__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.family-tree__item__layout__text__title {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+.family-tree__item__layout__text__subtitle {
+  font-size: 14px;
+}
+.family-tree__item__layout__text__title, .family-tree__item__layout__text__subtitle {
+  max-width: calc(var(--kup_familytree_item_width) - 30%);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }