@websy/websy-designs 1.9.13 → 1.9.14

package/dist/server/utils.js

@@ -12,6 +12,6 @@ module.exports = {
     const rect = el.getBoundingClientRect()
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
+    return { top: rect.top + scrollTop, left: rect.left + scrollLeft, width: rect.width, height: rect.height }
   }
 }

package/dist/websy-designs-es6.debug.js

@@ -1696,7 +1696,20 @@ class WebsyDropdown {
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
     const scrollEl = document.getElementById(`${this.elementId}_itemsContainer`)
-    const actionEl = document.getElementById(`${this.elementId}_actionContainer`)
+    const actionEl = document.getElementById(`${this.elementId}_actionContainer`)    
+    const headerEl = document.getElementById(`${this.elementId}_header`)    
+    const headerPos = WebsyUtils.getElementPos(headerEl)    
+    const contentPos = WebsyUtils.getElementPos(contentEl)    
+    if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
+      contentEl.style.right = 'unset'
+      if (headerPos.bottom + contentPos.height > window.innerHeight) {
+        // contentEl.classList.add('on-top')
+        contentEl.style.bottom = 'unset'
+      }
+      else {
+        contentEl.style.top = 'unset'
+      }
+    }
     if (actionEl) {
       actionEl.classList.remove('active')
     }
@@ -1720,7 +1733,7 @@ class WebsyDropdown {
       return
     }
     if (event.target.classList.contains('websy-dropdown-header')) {
-      this.open()
+      this.open(event)
     }
     else if (event.target.classList.contains('websy-dropdown-mask')) {
       this.close()
@@ -1835,17 +1848,27 @@ class WebsyDropdown {
       }
     }
   }
-  open (options, override = false) {
+  open (event, override = false) {
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
-    const el = document.getElementById(this.elementId)
-    if (el) {
-      el.style.zIndex = 999
-    }
+    const headerEl = document.getElementById(`${this.elementId}_header`)    
     maskEl.classList.add('active')
     contentEl.classList.add('active')
-    if (WebsyUtils.getElementPos(contentEl).bottom > window.innerHeight) {
-      contentEl.classList.add('on-top')
+    const headerPos = WebsyUtils.getElementPos(headerEl)    
+    const contentPos = WebsyUtils.getElementPos(contentEl)    
+    if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
+      contentEl.style.right = `calc(100vw - ${headerPos.right}px)`
+      if (headerPos.bottom + contentPos.height > window.innerHeight) {
+        // contentEl.classList.add('on-top')
+        contentEl.style.bottom = `calc(100vh - ${headerPos.top}px)`
+      }
+      else {
+        contentEl.style.top = headerPos.bottom + 'px'
+      }
+    }
+    else if (this.options.style === 'plain' && headerPos.width === 0 && headerPos.height === 0) {
+      const targetPos = WebsyUtils.getElementPos(event.target)
+      contentEl.style.right = `calc(100vw - ${targetPos.right}px)`  
     }
     if (this.options.disableSearch !== true) {
       const searchEl = document.getElementById(`${this.elementId}_search`)
@@ -5107,7 +5130,9 @@ const WebsyUtils = {
       top: rect.top + scrollTop,
       left: rect.left + scrollLeft,
       bottom: rect.top + scrollTop + el.clientHeight,
-      right: rect.left + scrollLeft + el.clientWidth
+      right: rect.left + scrollLeft + el.clientWidth,
+      width: rect.width,
+      height: rect.height
     }
   },
   getLightDark: (backgroundColor, darkColor = '#000000', lightColor = '#ffffff') => {
@@ -6428,7 +6453,7 @@ class WebsyTable3 {
       row.forEach((cell, cellIndex) => {        
         let sizeIndex = cell.level || cellIndex
         let colIndex = cell.index || cellIndex        
-        if (typeof sizingColumns[sizeIndex] === 'undefined' || sizingColumns[sizeIndex].show === false) {
+        if (typeof sizingColumns[sizeIndex] === 'undefined' || this.options.columns[this.options.columns.length - 1][colIndex].show === false) {
           return // need to revisit this logic
         }
         let style = ''
@@ -9420,6 +9445,14 @@ symbols
       if (this.options.data[xAxis].scale === 'Time') {          
         xPos = this[`${xAxis}Axis`](this.parseX(d.x.value))          
       }      
+      else {
+        let xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value)
+        let xPos = this[`custom${xAxis.toInitialCaps()}Range`][xIndex]
+        if (this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1]) {
+          xPos = xPos + ((this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1] - xPos) / 2)
+        }          
+        // return xPos
+      } 
       // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})` 
       return `translate(${xPos}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`       
     }
@@ -9446,6 +9479,14 @@ symbols.enter()
       if (this.options.data[xAxis].scale === 'Time') {          
         xPos = this[`${xAxis}Axis`](this.parseX(d.x.value))          
       }
+      else {
+        let xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value)
+        let xPos = this[`custom${xAxis.toInitialCaps()}Range`][xIndex]
+        if (this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1]) {
+          xPos = xPos + ((this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1] - xPos) / 2)
+        }          
+        // return xPos
+      } 
       // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})` 
       return `translate(${xPos}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`       
     }
@@ -9696,8 +9737,12 @@ class WebsyKPI {
   constructor (elementId, options) {
     const DEFAULTS = {
       tooltip: {},
-      label: {},
-      value: {}
+      label: {
+        value: ''
+      },
+      value: {
+        value: ''
+      }
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
@@ -9733,7 +9778,7 @@ class WebsyKPI {
       html += `   
           <div class="websy-kpi-info">
             <div class="websy-kpi-label ${this.options.label.classes.join(' ') || ''}">
-              ${this.options.label.value || ''}
+              ${(this.options.label || {}).value || ''}
       `
       if (this.options.tooltip && this.options.tooltip.value) {
         html += `

package/dist/websy-designs-es6.js

@@ -1667,6 +1667,18 @@ var WebsyDropdown = /*#__PURE__*/function () {
       var contentEl = document.getElementById("".concat(this.elementId, "_content"));
       var scrollEl = document.getElementById("".concat(this.elementId, "_itemsContainer"));
       var actionEl = document.getElementById("".concat(this.elementId, "_actionContainer"));
+      var headerEl = document.getElementById("".concat(this.elementId, "_header"));
+      var headerPos = WebsyUtils.getElementPos(headerEl);
+      var contentPos = WebsyUtils.getElementPos(contentEl);
+      if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
+        contentEl.style.right = 'unset';
+        if (headerPos.bottom + contentPos.height > window.innerHeight) {
+          // contentEl.classList.add('on-top')
+          contentEl.style.bottom = 'unset';
+        } else {
+          contentEl.style.top = 'unset';
+        }
+      }
       if (actionEl) {
         actionEl.classList.remove('active');
       }
@@ -1692,7 +1704,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
         return;
       }
       if (event.target.classList.contains('websy-dropdown-header')) {
-        this.open();
+        this.open(event);
       } else if (event.target.classList.contains('websy-dropdown-mask')) {
         this.close();
       } else if (event.target.classList.contains('websy-dropdown-item')) {
@@ -1806,18 +1818,26 @@ var WebsyDropdown = /*#__PURE__*/function () {
     }
   }, {
     key: "open",
-    value: function open(options) {
+    value: function open(event) {
       var override = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
       var contentEl = document.getElementById("".concat(this.elementId, "_content"));
-      var el = document.getElementById(this.elementId);
-      if (el) {
-        el.style.zIndex = 999;
-      }
+      var headerEl = document.getElementById("".concat(this.elementId, "_header"));
       maskEl.classList.add('active');
       contentEl.classList.add('active');
-      if (WebsyUtils.getElementPos(contentEl).bottom > window.innerHeight) {
-        contentEl.classList.add('on-top');
+      var headerPos = WebsyUtils.getElementPos(headerEl);
+      var contentPos = WebsyUtils.getElementPos(contentEl);
+      if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
+        contentEl.style.right = "calc(100vw - ".concat(headerPos.right, "px)");
+        if (headerPos.bottom + contentPos.height > window.innerHeight) {
+          // contentEl.classList.add('on-top')
+          contentEl.style.bottom = "calc(100vh - ".concat(headerPos.top, "px)");
+        } else {
+          contentEl.style.top = headerPos.bottom + 'px';
+        }
+      } else if (this.options.style === 'plain' && headerPos.width === 0 && headerPos.height === 0) {
+        var targetPos = WebsyUtils.getElementPos(event.target);
+        contentEl.style.right = "calc(100vw - ".concat(targetPos.right, "px)");
       }
       if (this.options.disableSearch !== true) {
         var searchEl = document.getElementById("".concat(this.elementId, "_search"));
@@ -4945,7 +4965,9 @@ var WebsyUtils = {
       top: rect.top + scrollTop,
       left: rect.left + scrollLeft,
       bottom: rect.top + scrollTop + el.clientHeight,
-      right: rect.left + scrollLeft + el.clientWidth
+      right: rect.left + scrollLeft + el.clientWidth,
+      width: rect.width,
+      height: rect.height
     };
   },
   getLightDark: function getLightDark(backgroundColor) {
@@ -6123,7 +6145,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
         row.forEach(function (cell, cellIndex) {
           var sizeIndex = cell.level || cellIndex;
           var colIndex = cell.index || cellIndex;
-          if (typeof sizingColumns[sizeIndex] === 'undefined' || sizingColumns[sizeIndex].show === false) {
+          if (typeof sizingColumns[sizeIndex] === 'undefined' || _this40.options.columns[_this40.options.columns.length - 1][colIndex].show === false) {
             return; // need to revisit this logic
           }
 
@@ -8889,6 +8911,13 @@ var WebsyChart = /*#__PURE__*/function () {
         } else {
           if (_this54.options.data[xAxis].scale === 'Time') {
             xPos = _this54["".concat(xAxis, "Axis")](_this54.parseX(d.x.value));
+          } else {
+            var _xIndex = _this54[xAxis + 'Axis'].domain().indexOf(d.x.value);
+            var _xPos = _this54["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex];
+            if (_this54["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex + 1]) {
+              _xPos = _xPos + (_this54["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex + 1] - _xPos) / 2;
+            }
+            // return xPos
           }
           // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})` 
           return "translate(".concat(xPos, ", ").concat(_this54["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
@@ -8917,6 +8946,13 @@ var WebsyChart = /*#__PURE__*/function () {
         } else {
           if (_this54.options.data[xAxis].scale === 'Time') {
             xPos = _this54["".concat(xAxis, "Axis")](_this54.parseX(d.x.value));
+          } else {
+            var _xIndex2 = _this54[xAxis + 'Axis'].domain().indexOf(d.x.value);
+            var _xPos2 = _this54["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex2];
+            if (_this54["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex2 + 1]) {
+              _xPos2 = _xPos2 + (_this54["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex2 + 1] - _xPos2) / 2;
+            }
+            // return xPos
           }
           // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})` 
           return "translate(".concat(xPos, ", ").concat(_this54["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
@@ -9162,8 +9198,12 @@ var WebsyKPI = /*#__PURE__*/function () {
     _classCallCheck(this, WebsyKPI);
     var DEFAULTS = {
       tooltip: {},
-      label: {},
-      value: {}
+      label: {
+        value: ''
+      },
+      value: {
+        value: ''
+      }
     };
     this.elementId = elementId;
     this.options = _extends({}, DEFAULTS, options);
@@ -9196,7 +9236,7 @@ var WebsyKPI = /*#__PURE__*/function () {
         if (this.options.icon) {
           html += "\n          <div class=\"websy-kpi-icon\"><img src=\"".concat(this.options.icon, "\"></div>   \n        ");
         }
-        html += "   \n          <div class=\"websy-kpi-info\">\n            <div class=\"websy-kpi-label ".concat(this.options.label.classes.join(' ') || '', "\">\n              ").concat(this.options.label.value || '', "\n      ");
+        html += "   \n          <div class=\"websy-kpi-info\">\n            <div class=\"websy-kpi-label ".concat(this.options.label.classes.join(' ') || '', "\">\n              ").concat((this.options.label || {}).value || '', "\n      ");
         if (this.options.tooltip && this.options.tooltip.value) {
           html += "\n          <div class=\"websy-info ".concat(this.options.tooltip.classes.join(' ') || '', "\" data-info=\"").concat(this.options.tooltip.value, "\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><title>ionicons-v5-e</title><path d=\"M256,56C145.72,56,56,145.72,56,256s89.72,200,200,200,200-89.72,200-200S366.28,56,256,56Zm0,82a26,26,0,1,1-26,26A26,26,0,0,1,256,138Zm48,226H216a16,16,0,0,1,0-32h28V244H228a16,16,0,0,1,0-32h32a16,16,0,0,1,16,16V332h28a16,16,0,0,1,0,32Z\"/></svg>\n          </div>   \n        ");
         }