@websy/websy-designs 1.9.11 → 1.9.13

package/dist/websy-designs.debug.js

@@ -2783,7 +2783,9 @@ class MultiForm {
     this.elementId = elementId    
     const DEFAULTS = {
       addButton: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="256" y1="112" x2="256" y2="400" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="400" y1="256" x2="112" y2="256" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,      
-      deleteButton: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`
+      deleteButton: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
+      allowAdd: true,
+      allowDelete: true
     }
     this.options = Object.assign({}, DEFAULTS, options)
     this.formData = []
@@ -2848,7 +2850,9 @@ class MultiForm {
         deleteButtonEl.classList.remove('hidden')
       }
       // add new form
-      this.addEntry()
+      if (this.options.allowAdd === true) {
+        this.addEntry()
+      }
     }
     if (event.target.classList.contains('websy-multi-form-delete')) {
       // delete form based on index
@@ -2884,25 +2888,33 @@ class MultiForm {
           <div id='${this.elementId}_${d.formId}_formContainer' class='websy-multi-form-form-container'>
             <div id='${this.elementId}_${d.formId}_form' class='websy-multi-form-form'>
             </div>
+        `
+        if (this.options.allowDelete === true) {          
+          html += `
             <button id='${this.elementId}_${d.formId}_deleteButton' data-formid='${d.formId}' data-rowid='${d.id}' class='websy-multi-form-delete'>
               ${this.options.deleteButton}
-            </button>          
+            </button>
+          `
+        }
+        html += `
           </div>
         `
       })
       let id = WebsyDesigns.Utils.createIdentity()
-      html += `
-        <div id='${this.elementId}_${id}_formContainer' class='websy-multi-form-form-container'>
-          <div id='${this.elementId}_${id}_form' class='websy-multi-form-form'>
+      if (this.options.allowAdd === true) {
+        html += `
+          <div id='${this.elementId}_${id}_formContainer' class='websy-multi-form-form-container'>
+            <div id='${this.elementId}_${id}_form' class='websy-multi-form-form'>
+            </div>
+            <button id='${this.elementId}_${id}_deleteButton' data-formid='${id}' class='hidden websy-multi-form-delete'>
+              ${this.options.deleteButton}
+            </button>          
+            <button id='${this.elementId}_${id}_addButton' data-formid='${id}' class='websy-multi-form-add'>
+              ${this.options.addButton}
+            </button>                    
           </div>
-          <button id='${this.elementId}_${id}_deleteButton' data-formid='${id}' class='hidden websy-multi-form-delete'>
-            ${this.options.deleteButton}
-          </button>          
-          <button id='${this.elementId}_${id}_addButton' data-formid='${id}' class='websy-multi-form-add'>
-            ${this.options.addButton}
-          </button>                    
-        </div>
-      `
+        `
+      }
       el.innerHTML = html
       this.formData.forEach(d => {
         let formOptions = Object.assign({}, this.options)
@@ -2910,8 +2922,10 @@ class MultiForm {
         formObject.data = d
         this.forms.push(formObject)
       })
-      let formOptions = Object.assign({}, this.options)
-      this.forms.push(new WebsyDesigns.Form(`${this.elementId}_${id}_form`, formOptions))
+      if (this.options.allowAdd === true) {
+        let formOptions = Object.assign({}, this.options)
+        this.forms.push(new WebsyDesigns.Form(`${this.elementId}_${id}_form`, formOptions))
+      }
     }
   }
   validateForm () {
@@ -6680,7 +6694,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)
@@ -7058,7 +7073,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', '')
@@ -7071,7 +7086,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) => {
@@ -7080,8 +7095,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
@@ -7101,19 +7118,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
@@ -7124,9 +7175,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
@@ -7164,7 +7215,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 {
@@ -7529,7 +7580,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` 
@@ -7642,7 +7692,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
@@ -7657,9 +7708,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)
@@ -8700,6 +8764,7 @@ else {
     let rangeLength = bottomDomain.length
     this.options.data.bottomBrush = {}    
     this.options.data.leftBrush = {}  
+    this.options.data.rightBrush = {}
     if (this.options.orientation === 'vertical') {
       this.options.data.bottom.bandWidth = proposedBandWidth    
       this.options.data.bottomBrush.bandWidth = (this.plotWidth - this.totalBandPadding) / noOfPoints
@@ -8707,6 +8772,7 @@ else {
     else {
       this.options.data.left.bandWidth = proposedBandWidth    
       this.options.data.leftBrush.bandWidth = (this.plotHeight - this.totalBandPadding) / noOfPoints
+      this.options.data.rightBrush.bandWidth = (this.plotHeight - this.totalBandPadding) / noOfPoints
     }   
     this.brushBandPadding = this.totalBandPadding / noOfGroups 
     if (this.options.orientation === 'vertical') {
@@ -8910,7 +8976,8 @@ else {
     // Configure the left axis
     let leftDomain = this.createDomain('left')
     let leftBrushDomain = this.createDomain('left') 
-    let rightDomain = this.createDomain('right')       
+    let rightDomain = this.createDomain('right')    
+    let rightBrushDomain = this.createDomain('right')    
     this.leftAxis = d3[`scale${this.options.data.left.scale || 'Linear'}`]()
       .domain(leftDomain)
       .range(leftRange)
@@ -8983,6 +9050,9 @@ else {
       this.rightAxis = d3[`scale${this.options.data.right.scale || 'Linear'}`]()
         .domain(rightDomain)
         .range([this.plotHeight, 0])
+      this.rightBrushAxis = d3[`scale${this.options.data.right.scale || 'Linear'}`]()
+        .domain(rightBrushDomain)
+        .range(leftBrushRange)
       if (this.rightAxis.nice) {
         this.rightAxis.nice()
       }
@@ -9573,10 +9643,10 @@ if (this.options.orientation === 'horizontal') {
   yAxis = 'bottom'
 }
 let xBrushAxis = 'bottomBrush'
-let yBrushAxis = 'leftBrush'
+let yBrushAxis = series.axis === 'secondary' ? 'rightBrush' : 'leftBrush'
 if (this.options.orientation === 'horizontal') {  
   xBrushAxis = 'leftBrush'
-  yBrushAxis = 'bottomBrush'
+  yBrushAxis = 'bottomBrush'  
 }
 let lines = this.lineLayer.selectAll(`.line_${series.key}`)
   .data([series.data])

package/dist/websy-designs.js

@@ -2742,7 +2742,9 @@ var MultiForm = /*#__PURE__*/function () {
     this.elementId = elementId;
     var DEFAULTS = {
       addButton: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 512 512\"><line x1=\"256\" y1=\"112\" x2=\"256\" y2=\"400\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"400\" y1=\"256\" x2=\"112\" y2=\"256\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
-      deleteButton: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>"
+      deleteButton: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
+      allowAdd: true,
+      allowDelete: true
     };
     this.options = _extends({}, DEFAULTS, options);
     this.formData = [];
@@ -2808,7 +2810,9 @@ var MultiForm = /*#__PURE__*/function () {
           deleteButtonEl.classList.remove('hidden');
         }
         // add new form
-        this.addEntry();
+        if (this.options.allowAdd === true) {
+          this.addEntry();
+        }
       }
       if (event.target.classList.contains('websy-multi-form-delete')) {
         // delete form based on index
@@ -2843,10 +2847,16 @@ var MultiForm = /*#__PURE__*/function () {
         var html = '';
         this.formData.forEach(function (d) {
           d.formId = WebsyDesigns.Utils.createIdentity();
-          html += "\n          <div id='".concat(_this21.elementId, "_").concat(d.formId, "_formContainer' class='websy-multi-form-form-container'>\n            <div id='").concat(_this21.elementId, "_").concat(d.formId, "_form' class='websy-multi-form-form'>\n            </div>\n            <button id='").concat(_this21.elementId, "_").concat(d.formId, "_deleteButton' data-formid='").concat(d.formId, "' data-rowid='").concat(d.id, "' class='websy-multi-form-delete'>\n              ").concat(_this21.options.deleteButton, "\n            </button>          \n          </div>\n        ");
+          html += "\n          <div id='".concat(_this21.elementId, "_").concat(d.formId, "_formContainer' class='websy-multi-form-form-container'>\n            <div id='").concat(_this21.elementId, "_").concat(d.formId, "_form' class='websy-multi-form-form'>\n            </div>\n        ");
+          if (_this21.options.allowDelete === true) {
+            html += "\n            <button id='".concat(_this21.elementId, "_").concat(d.formId, "_deleteButton' data-formid='").concat(d.formId, "' data-rowid='").concat(d.id, "' class='websy-multi-form-delete'>\n              ").concat(_this21.options.deleteButton, "\n            </button>\n          ");
+          }
+          html += "\n          </div>\n        ";
         });
         var id = WebsyDesigns.Utils.createIdentity();
-        html += "\n        <div id='".concat(this.elementId, "_").concat(id, "_formContainer' class='websy-multi-form-form-container'>\n          <div id='").concat(this.elementId, "_").concat(id, "_form' class='websy-multi-form-form'>\n          </div>\n          <button id='").concat(this.elementId, "_").concat(id, "_deleteButton' data-formid='").concat(id, "' class='hidden websy-multi-form-delete'>\n            ").concat(this.options.deleteButton, "\n          </button>          \n          <button id='").concat(this.elementId, "_").concat(id, "_addButton' data-formid='").concat(id, "' class='websy-multi-form-add'>\n            ").concat(this.options.addButton, "\n          </button>                    \n        </div>\n      ");
+        if (this.options.allowAdd === true) {
+          html += "\n          <div id='".concat(this.elementId, "_").concat(id, "_formContainer' class='websy-multi-form-form-container'>\n            <div id='").concat(this.elementId, "_").concat(id, "_form' class='websy-multi-form-form'>\n            </div>\n            <button id='").concat(this.elementId, "_").concat(id, "_deleteButton' data-formid='").concat(id, "' class='hidden websy-multi-form-delete'>\n              ").concat(this.options.deleteButton, "\n            </button>          \n            <button id='").concat(this.elementId, "_").concat(id, "_addButton' data-formid='").concat(id, "' class='websy-multi-form-add'>\n              ").concat(this.options.addButton, "\n            </button>                    \n          </div>\n        ");
+        }
         el.innerHTML = html;
         this.formData.forEach(function (d) {
           var formOptions = _extends({}, _this21.options);
@@ -2854,8 +2864,10 @@ var MultiForm = /*#__PURE__*/function () {
           formObject.data = d;
           _this21.forms.push(formObject);
         });
-        var formOptions = _extends({}, this.options);
-        this.forms.push(new WebsyDesigns.Form("".concat(this.elementId, "_").concat(id, "_form"), formOptions));
+        if (this.options.allowAdd === true) {
+          var formOptions = _extends({}, this.options);
+          this.forms.push(new WebsyDesigns.Form("".concat(this.elementId, "_").concat(id, "_form"), formOptions));
+        }
       }
     }
   }, {
@@ -6380,7 +6392,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;
@@ -6694,7 +6707,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', '');
       }
@@ -6706,7 +6719,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;
@@ -6717,8 +6730,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
@@ -6744,19 +6759,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;
@@ -6767,9 +6816,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
@@ -6806,7 +6855,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;
@@ -7195,7 +7244,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";
@@ -7313,6 +7361,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;
@@ -7327,9 +7376,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);
@@ -8311,12 +8370,14 @@ var WebsyChart = /*#__PURE__*/function () {
           var rangeLength = bottomDomain.length;
           this.options.data.bottomBrush = {};
           this.options.data.leftBrush = {};
+          this.options.data.rightBrush = {};
           if (this.options.orientation === 'vertical') {
             this.options.data.bottom.bandWidth = proposedBandWidth;
             this.options.data.bottomBrush.bandWidth = (this.plotWidth - this.totalBandPadding) / noOfPoints;
           } else {
             this.options.data.left.bandWidth = proposedBandWidth;
             this.options.data.leftBrush.bandWidth = (this.plotHeight - this.totalBandPadding) / noOfPoints;
+            this.options.data.rightBrush.bandWidth = (this.plotHeight - this.totalBandPadding) / noOfPoints;
           }
           this.brushBandPadding = this.totalBandPadding / noOfGroups;
           if (this.options.orientation === 'vertical') {
@@ -8493,6 +8554,7 @@ var WebsyChart = /*#__PURE__*/function () {
           var leftDomain = this.createDomain('left');
           var leftBrushDomain = this.createDomain('left');
           var rightDomain = this.createDomain('right');
+          var rightBrushDomain = this.createDomain('right');
           this.leftAxis = d3["scale".concat(this.options.data.left.scale || 'Linear')]().domain(leftDomain).range(leftRange);
           this.leftBrushAxis = d3["scale".concat(this.options.data.left.scale || 'Linear')]().domain(leftBrushDomain).range(leftBrushRange);
           if (this.leftAxis.padding && this.options.data.left.padding) {
@@ -8532,6 +8594,7 @@ var WebsyChart = /*#__PURE__*/function () {
           // Configure the right axis    
           if (rightDomain.length > 0) {
             this.rightAxis = d3["scale".concat(this.options.data.right.scale || 'Linear')]().domain(rightDomain).range([this.plotHeight, 0]);
+            this.rightBrushAxis = d3["scale".concat(this.options.data.right.scale || 'Linear')]().domain(rightBrushDomain).range(leftBrushRange);
             if (this.rightAxis.nice) {
               this.rightAxis.nice();
             }
@@ -9075,7 +9138,7 @@ var WebsyChart = /*#__PURE__*/function () {
         yAxis = 'bottom';
       }
       var xBrushAxis = 'bottomBrush';
-      var yBrushAxis = 'leftBrush';
+      var yBrushAxis = series.axis === 'secondary' ? 'rightBrush' : 'leftBrush';
       if (this.options.orientation === 'horizontal') {
         xBrushAxis = 'leftBrush';
         yBrushAxis = 'bottomBrush';