@websy/websy-designs 1.9.12 → 1.9.14

package/dist/websy-designs.debug.js

@@ -1617,7 +1617,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')
     }
@@ -1641,7 +1654,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()
@@ -1756,17 +1769,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`)
@@ -5523,7 +5546,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') => {
@@ -6694,7 +6719,8 @@ class WebsyTable3 {
       disableInternalLoader: false,
       disableTouch: false,
       scrollWidth: 10,
-      touchScrollWidth: 30
+      touchScrollWidth: 30,
+      autoFitColumns: true
     }
     this.options = Object.assign({}, DEFAULTS, options)
     this.isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
@@ -6843,7 +6869,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 = ''
@@ -7072,7 +7098,7 @@ class WebsyTable3 {
       maxWidth = this.options.maxColWidth
     }
     else if (this.options.maxColWidth.indexOf('%') !== -1) {
-      maxWidth = this.sizes.outer.width * (+(this.options.maxColWidth.replace('%', '')) / 100)
+      maxWidth = this.sizes.table.width * (+(this.options.maxColWidth.replace('%', '')) / 100)
     }
     else if (this.options.maxColWidth.indexOf('px') !== -1) {
       maxWidth = +this.options.maxColWidth.replace('px', '')
@@ -7085,7 +7111,7 @@ class WebsyTable3 {
     this.sizes.total = footerEl.getBoundingClientRect()
     const rows = Array.from(tableEl.querySelectorAll('.websy-table-row'))    
     let totalWidth = 0
-    this.sizes.scrollableWidth = this.sizes.outer.width
+    this.sizes.scrollableWidth = this.sizes.table.width
     let firstNonPinnedColumnWidth = 0
     let columnsForSizing = this.options.columns[this.options.columns.length - 1].filter(c => c.show !== false)
     rows.forEach((row, rowIndex) => {
@@ -7094,8 +7120,10 @@ class WebsyTable3 {
         this.sizes.cellHeight = colSize.height        
         if (columnsForSizing[colIndex]) {
           if (!columnsForSizing[colIndex].actualWidth) {
+            columnsForSizing[colIndex].potentialWidth = 0
             columnsForSizing[colIndex].actualWidth = 0
           }
+          columnsForSizing[colIndex].potentialWidth = Math.max(columnsForSizing[colIndex].potentialWidth, colSize.width)
           columnsForSizing[colIndex].actualWidth = Math.min(Math.max(columnsForSizing[colIndex].actualWidth, colSize.width), maxWidth)          
           // if (columnsForSizing[colIndex].width) {
           //   columnsForSizing[colIndex].actualWidth = columnsForSizing[colIndex].width
@@ -7115,19 +7143,53 @@ class WebsyTable3 {
     this.sizes.totalWidth = columnsForSizing.reduce((a, b) => a + (b.width || b.actualWidth), 0)
     this.sizes.totalNonPinnedWidth = columnsForSizing.filter((c, i) => i >= this.pinnedColumns).reduce((a, b) => a + (b.width || b.actualWidth), 0)
     this.sizes.pinnedWidth = this.sizes.totalWidth - this.sizes.totalNonPinnedWidth
-    // const outerSize = outerEl.getBoundingClientRect()
-    if (this.sizes.totalWidth < this.sizes.outer.width) {
-      let equalWidth = (this.sizes.outer.width - this.sizes.totalWidth) / columnsForSizing.length
+    // const outerSize = outerEl.getBoundingClientRect()    
+    if (this.sizes.totalWidth < this.sizes.table.width) {
+      let requiredSpace = 0
+      let availableSpace = (this.sizes.table.width - this.sizes.totalWidth)
+      columnsForSizing.forEach(c => {
+        c.shouldGrow = true
+        if (this.options.autoFitColumns === false) {
+          c.shouldGrow = false
+          if (c.potentialWidth > c.actualWidth) {
+            c.shouldGrow = true   
+            c.growDiff = c.potentialWidth - c.actualWidth
+            c.growDiffPerc = (c.potentialWidth - c.actualWidth) / availableSpace
+            requiredSpace += c.growDiff
+          }
+        }
+      })      
+      let equalWidth = (this.sizes.table.width - this.sizes.totalWidth) / columnsForSizing.filter(c => c.shouldGrow).length
       this.sizes.totalWidth = 0
       this.sizes.totalNonPinnedWidth = 0      
       columnsForSizing.forEach((c, i) => {        
         // if (!c.width) {
         // if (c.actualWidth < equalWidth) {
         // adjust the width
-        if (c.width) {
-          c.width += equalWidth
+        if (this.options.autoFitColumns === true) {
+          if (c.width) {
+            c.width += equalWidth
+          }
+          c.actualWidth += equalWidth
+        }
+        else {
+          if (requiredSpace > 0 && requiredSpace <= availableSpace) {
+            if (c.shouldGrow) {
+              if (c.width) {
+                c.width += c.growDiff
+              }
+              c.actualWidth += c.growDiff          
+            }
+          }
+          else {
+            if (c.shouldGrow) {
+              if (c.width) {
+                c.width += availableSpace * (c.growDiff / requiredSpace)
+              }
+              c.actualWidth += availableSpace * (c.growDiff / requiredSpace)
+            }            
+          }
         }
-        c.actualWidth += equalWidth
         //   }
         // }
         this.sizes.totalWidth += c.width || c.actualWidth
@@ -7138,9 +7200,9 @@ class WebsyTable3 {
       })
     }
     // check that we have enough from for all of the pinned columns plus 1 non pinned column    
-    if (this.sizes.pinnedWidth > (this.sizes.outer.width - firstNonPinnedColumnWidth)) {
+    if (this.sizes.pinnedWidth > (this.sizes.table.width - firstNonPinnedColumnWidth)) {
       this.sizes.totalWidth = 0
-      let diff = this.sizes.pinnedWidth - (this.sizes.outer.width - firstNonPinnedColumnWidth)
+      let diff = this.sizes.pinnedWidth - (this.sizes.table.width - firstNonPinnedColumnWidth)
       let oldPinnedWidth = this.sizes.pinnedWidth
       this.sizes.pinnedWidth = 0
       // let colDiff = diff / this.pinnedColumns
@@ -7178,7 +7240,7 @@ class WebsyTable3 {
     else {
       this.vScrollRequired = false 
     }
-    if (this.sizes.totalWidth > this.sizes.outer.width) {
+    if (this.sizes.totalWidth.toFixed(3) > this.sizes.table.width.toFixed(3)) {
       this.hScrollRequired = true
     }
     else {
@@ -7543,7 +7605,6 @@ class WebsyTable3 {
       let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
       if (this.vScrollRequired === true) {        
         vScrollEl.style.top = `${this.sizes.header.height + this.sizes.total.height}px`
-        // vScrollEl.style.left = `${this.sizes.outer.width - (this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
         vScrollEl.style.height = `${this.sizes.bodyHeight}px` 
         if (this.isTouchDevice === true) {
           vScrollEl.style.visibility = `unset` 
@@ -7656,7 +7717,8 @@ class WebsyTable3 {
           }
         }                     
       } 
-      cumulativeWidth = 0                
+      cumulativeWidth = 0   
+      let lastColWidth = 0             
       for (let i = this.startCol; i < this.options.allColumns[this.options.allColumns.length - 1].length; i++) {
         if (this.options.allColumns[this.options.allColumns.length - 1][i].show !== false) {
           cumulativeWidth += this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth
@@ -7671,9 +7733,22 @@ class WebsyTable3 {
       if (this.endCol === this.options.allColumns[this.options.allColumns.length - 1].length - 1 && cumulativeWidth > this.sizes.scrollableWidth && actualLeft > 0) {
         this.startCol += 1
       } 
-      if (scrollHandleEl.offsetWidth + scrollHandleEl.offsetLeft >= scrollContainerEl.offsetWidth) {
-        this.startCol += 1
-        this.endCol += 1
+      if (
+        scrollHandleEl.offsetWidth + scrollHandleEl.offsetLeft >=
+        scrollContainerEl.offsetWidth - lastColWidth
+      ) {
+        this.endCol = this.options.allColumns[this.options.allColumns.length - 1].length - 1
+        this.startCol = this.endCol + 1
+        // one last measurement
+        let finalAcc = 0
+        for (let i = this.endCol; i > -1; i--) {
+          if (this.options.allColumns[this.options.allColumns.length - 1][i].show !== false) {
+            finalAcc += this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth
+            if (finalAcc < this.sizes.scrollableWidth) {
+              this.startCol--
+            }
+          }
+        }
       }
       this.endCol = Math.max(this.startCol, this.endCol)         
       this.options.onScroll('y', this.startRow, this.endRow, this.startCol - this.pinnedColumns, this.endCol - this.pinnedColumns)
@@ -9786,6 +9861,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)})`       
     }
@@ -9812,6 +9895,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)})`       
     }
@@ -10490,8 +10581,12 @@ class WebsyKPI {
   constructor (elementId, options) {
     const DEFAULTS = {
       tooltip: {},
-      label: {},
-      value: {}
+      label: {
+        value: ''
+      },
+      value: {
+        value: ''
+      }
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
@@ -10527,7 +10622,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.js

@@ -1560,6 +1560,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');
       }
@@ -1585,7 +1597,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')) {
@@ -1699,18 +1711,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"));
@@ -5338,7 +5358,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) {
@@ -6392,7 +6414,8 @@ var WebsyTable3 = /*#__PURE__*/function () {
       disableInternalLoader: false,
       disableTouch: false,
       scrollWidth: 10,
-      touchScrollWidth: 30
+      touchScrollWidth: 30,
+      autoFitColumns: true
     };
     this.options = _extends({}, DEFAULTS, options);
     this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
@@ -6515,7 +6538,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' || _this43.options.columns[_this43.options.columns.length - 1][colIndex].show === false) {
             return; // need to revisit this logic
           }
 
@@ -6706,7 +6729,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
       if (typeof this.options.maxColWidth === 'number') {
         maxWidth = this.options.maxColWidth;
       } else if (this.options.maxColWidth.indexOf('%') !== -1) {
-        maxWidth = this.sizes.outer.width * (+this.options.maxColWidth.replace('%', '') / 100);
+        maxWidth = this.sizes.table.width * (+this.options.maxColWidth.replace('%', '') / 100);
       } else if (this.options.maxColWidth.indexOf('px') !== -1) {
         maxWidth = +this.options.maxColWidth.replace('px', '');
       }
@@ -6718,7 +6741,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
       this.sizes.total = footerEl.getBoundingClientRect();
       var rows = Array.from(tableEl.querySelectorAll('.websy-table-row'));
       var totalWidth = 0;
-      this.sizes.scrollableWidth = this.sizes.outer.width;
+      this.sizes.scrollableWidth = this.sizes.table.width;
       var firstNonPinnedColumnWidth = 0;
       var columnsForSizing = this.options.columns[this.options.columns.length - 1].filter(function (c) {
         return c.show !== false;
@@ -6729,8 +6752,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
           _this46.sizes.cellHeight = colSize.height;
           if (columnsForSizing[colIndex]) {
             if (!columnsForSizing[colIndex].actualWidth) {
+              columnsForSizing[colIndex].potentialWidth = 0;
               columnsForSizing[colIndex].actualWidth = 0;
             }
+            columnsForSizing[colIndex].potentialWidth = Math.max(columnsForSizing[colIndex].potentialWidth, colSize.width);
             columnsForSizing[colIndex].actualWidth = Math.min(Math.max(columnsForSizing[colIndex].actualWidth, colSize.width), maxWidth);
             // if (columnsForSizing[colIndex].width) {
             //   columnsForSizing[colIndex].actualWidth = columnsForSizing[colIndex].width
@@ -6756,19 +6781,53 @@ var WebsyTable3 = /*#__PURE__*/function () {
         return a + (b.width || b.actualWidth);
       }, 0);
       this.sizes.pinnedWidth = this.sizes.totalWidth - this.sizes.totalNonPinnedWidth;
-      // const outerSize = outerEl.getBoundingClientRect()
-      if (this.sizes.totalWidth < this.sizes.outer.width) {
-        var equalWidth = (this.sizes.outer.width - this.sizes.totalWidth) / columnsForSizing.length;
+      // const outerSize = outerEl.getBoundingClientRect()    
+      if (this.sizes.totalWidth < this.sizes.table.width) {
+        var requiredSpace = 0;
+        var availableSpace = this.sizes.table.width - this.sizes.totalWidth;
+        columnsForSizing.forEach(function (c) {
+          c.shouldGrow = true;
+          if (_this46.options.autoFitColumns === false) {
+            c.shouldGrow = false;
+            if (c.potentialWidth > c.actualWidth) {
+              c.shouldGrow = true;
+              c.growDiff = c.potentialWidth - c.actualWidth;
+              c.growDiffPerc = (c.potentialWidth - c.actualWidth) / availableSpace;
+              requiredSpace += c.growDiff;
+            }
+          }
+        });
+        var equalWidth = (this.sizes.table.width - this.sizes.totalWidth) / columnsForSizing.filter(function (c) {
+          return c.shouldGrow;
+        }).length;
         this.sizes.totalWidth = 0;
         this.sizes.totalNonPinnedWidth = 0;
         columnsForSizing.forEach(function (c, i) {
           // if (!c.width) {
           // if (c.actualWidth < equalWidth) {
           // adjust the width
-          if (c.width) {
-            c.width += equalWidth;
+          if (_this46.options.autoFitColumns === true) {
+            if (c.width) {
+              c.width += equalWidth;
+            }
+            c.actualWidth += equalWidth;
+          } else {
+            if (requiredSpace > 0 && requiredSpace <= availableSpace) {
+              if (c.shouldGrow) {
+                if (c.width) {
+                  c.width += c.growDiff;
+                }
+                c.actualWidth += c.growDiff;
+              }
+            } else {
+              if (c.shouldGrow) {
+                if (c.width) {
+                  c.width += availableSpace * (c.growDiff / requiredSpace);
+                }
+                c.actualWidth += availableSpace * (c.growDiff / requiredSpace);
+              }
+            }
           }
-          c.actualWidth += equalWidth;
           //   }
           // }
           _this46.sizes.totalWidth += c.width || c.actualWidth;
@@ -6779,9 +6838,9 @@ var WebsyTable3 = /*#__PURE__*/function () {
         });
       }
       // check that we have enough from for all of the pinned columns plus 1 non pinned column    
-      if (this.sizes.pinnedWidth > this.sizes.outer.width - firstNonPinnedColumnWidth) {
+      if (this.sizes.pinnedWidth > this.sizes.table.width - firstNonPinnedColumnWidth) {
         this.sizes.totalWidth = 0;
-        var diff = this.sizes.pinnedWidth - (this.sizes.outer.width - firstNonPinnedColumnWidth);
+        var diff = this.sizes.pinnedWidth - (this.sizes.table.width - firstNonPinnedColumnWidth);
         var oldPinnedWidth = this.sizes.pinnedWidth;
         this.sizes.pinnedWidth = 0;
         // let colDiff = diff / this.pinnedColumns
@@ -6818,7 +6877,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
       } else {
         this.vScrollRequired = false;
       }
-      if (this.sizes.totalWidth > this.sizes.outer.width) {
+      if (this.sizes.totalWidth.toFixed(3) > this.sizes.table.width.toFixed(3)) {
         this.hScrollRequired = true;
       } else {
         this.hScrollRequired = false;
@@ -7207,7 +7266,6 @@ var WebsyTable3 = /*#__PURE__*/function () {
         var vHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
         if (this.vScrollRequired === true) {
           vScrollEl.style.top = "".concat(this.sizes.header.height + this.sizes.total.height, "px");
-          // vScrollEl.style.left = `${this.sizes.outer.width - (this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
           vScrollEl.style.height = "".concat(this.sizes.bodyHeight, "px");
           if (this.isTouchDevice === true) {
             vScrollEl.style.visibility = "unset";
@@ -7325,6 +7383,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
           }
         }
         cumulativeWidth = 0;
+        var lastColWidth = 0;
         for (var _i10 = this.startCol; _i10 < this.options.allColumns[this.options.allColumns.length - 1].length; _i10++) {
           if (this.options.allColumns[this.options.allColumns.length - 1][_i10].show !== false) {
             cumulativeWidth += this.options.allColumns[this.options.allColumns.length - 1][_i10].actualWidth;
@@ -7339,9 +7398,19 @@ var WebsyTable3 = /*#__PURE__*/function () {
         if (this.endCol === this.options.allColumns[this.options.allColumns.length - 1].length - 1 && cumulativeWidth > this.sizes.scrollableWidth && actualLeft > 0) {
           this.startCol += 1;
         }
-        if (scrollHandleEl.offsetWidth + scrollHandleEl.offsetLeft >= scrollContainerEl.offsetWidth) {
-          this.startCol += 1;
-          this.endCol += 1;
+        if (scrollHandleEl.offsetWidth + scrollHandleEl.offsetLeft >= scrollContainerEl.offsetWidth - lastColWidth) {
+          this.endCol = this.options.allColumns[this.options.allColumns.length - 1].length - 1;
+          this.startCol = this.endCol + 1;
+          // one last measurement
+          var finalAcc = 0;
+          for (var _i11 = this.endCol; _i11 > -1; _i11--) {
+            if (this.options.allColumns[this.options.allColumns.length - 1][_i11].show !== false) {
+              finalAcc += this.options.allColumns[this.options.allColumns.length - 1][_i11].actualWidth;
+              if (finalAcc < this.sizes.scrollableWidth) {
+                this.startCol--;
+              }
+            }
+          }
         }
         this.endCol = Math.max(this.startCol, this.endCol);
         this.options.onScroll('y', this.startRow, this.endRow, this.startCol - this.pinnedColumns, this.endCol - this.pinnedColumns);
@@ -9235,6 +9304,13 @@ var WebsyChart = /*#__PURE__*/function () {
         } else {
           if (_this57.options.data[xAxis].scale === 'Time') {
             xPos = _this57["".concat(xAxis, "Axis")](_this57.parseX(d.x.value));
+          } else {
+            var _xIndex = _this57[xAxis + 'Axis'].domain().indexOf(d.x.value);
+            var _xPos = _this57["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex];
+            if (_this57["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex + 1]) {
+              _xPos = _xPos + (_this57["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(_this57["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
@@ -9263,6 +9339,13 @@ var WebsyChart = /*#__PURE__*/function () {
         } else {
           if (_this57.options.data[xAxis].scale === 'Time') {
             xPos = _this57["".concat(xAxis, "Axis")](_this57.parseX(d.x.value));
+          } else {
+            var _xIndex2 = _this57[xAxis + 'Axis'].domain().indexOf(d.x.value);
+            var _xPos2 = _this57["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex2];
+            if (_this57["custom".concat(xAxis.toInitialCaps(), "Range")][_xIndex2 + 1]) {
+              _xPos2 = _xPos2 + (_this57["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(_this57["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
@@ -9935,8 +10018,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);
@@ -9969,7 +10056,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        ");
         }