@websy/websy-designs 1.7.8 → 1.7.10

package/dist/websy-designs.debug.js

@@ -6470,7 +6470,13 @@ class WebsyTable3 {
             <div id="${this.elementId}_hScrollContainer" class="websy-h-scroll-container">
               <div id="${this.elementId}_hScrollHandle" class="websy-scroll-handle websy-scroll-handle-x"></div>
             </div>
-            <div id="${this.elementId}_touchScroller" class="websy-table-touch-scroller hidden"></div>
+      `
+      if (this.isTouchDevice === true) {
+        html += `
+            <div id="${this.elementId}_touchScroller" class="websy-table-touch-scroller"></div>
+        `
+      }
+      html += `            
           </div>     
           <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
             <div>
@@ -6494,7 +6500,7 @@ class WebsyTable3 {
       el.addEventListener('click', this.handleClick.bind(this))
       el.addEventListener('mousedown', this.handleMouseDown.bind(this))
       el.addEventListener('touchstart', this.handleTouchStart.bind(this))
-      window.addEventListener('touchmove', this.handleTouchMove.bind(this))
+      el.addEventListener('touchmove', this.handleTouchMove.bind(this))
       window.addEventListener('touchend', this.handleTouchEnd.bind(this))
       window.addEventListener('mousemove', this.handleMouseMove.bind(this))
       window.addEventListener('mouseup', this.handleMouseUp.bind(this))
@@ -6627,12 +6633,12 @@ class WebsyTable3 {
         }
         if (sizingColumns[sizeIndex].showAsLink === true && cell.value.trim() !== '') {
           cell.value = `
-            <a href='${cell.value}' target='${sizingColumns[sizeIndex].openInNewTab === true ? '_blank' : '_self'}'>${cell.displayText || sizingColumns[sizeIndex].linkText || cell.value}</a>
+            <a href="${cell.value}" target='${sizingColumns[sizeIndex].openInNewTab === true ? '_blank' : '_self'}'>${cell.displayText || sizingColumns[sizeIndex].linkText || cell.value}</a>
           `
         }
         if (sizingColumns[sizeIndex].showAsRouterLink === true && cell.value.trim() !== '') {
           cell.value = `
-            <a data-view='${(cell.link || cell.value).replace(/'/g, '\'')}' class='websy-trigger'>${cell.value}</a>
+            <a data-view="${(cell.link || cell.value).replace(/'/g, '\'')}" class='websy-trigger'>${cell.value}</a>
           `
         }
         if (sizingColumns[sizeIndex].showAsImage === true) {
@@ -7038,8 +7044,8 @@ class WebsyTable3 {
       this.isPerpetual = true
       // this.perpetualScroll()	
       this.touchStartTime = null
-      const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
-      touchScrollEl.classList.add('hidden')
+      // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
+      // touchScrollEl.classList.add('hidden')
     }
   }
   handleTouchMove (event) {
@@ -7050,6 +7056,12 @@ class WebsyTable3 {
       if (typeof event.targetTouches !== 'undefined' && event.targetTouches.length > 0) {
         let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
         let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
+        const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
+        const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
+        const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)    
+        const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)    
+        let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
+        let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
         // need to adjust the delta so that it scrolls at a reasonable speed/distance
         const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
         const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
@@ -7059,7 +7071,7 @@ class WebsyTable3 {
         // else {
         //   this.isTouchScrolling = false
         // }
-        console.log('delta init', deltaY)
+        console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
         // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
         // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
         // console.log('delta', deltaY)
@@ -7074,11 +7086,13 @@ class WebsyTable3 {
         // delta = Math.max(-10, delta)		
         if (this.isTouchScrolling === true) {			
           // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))          		
-          if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 10) {
-            this.scrollX(Math.max(-5, Math.min(5, deltaX)))
+          if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
+            // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
+            this.scrollX(translatedDeltaX)
           }
-          else {
-            this.scrollY(Math.max(-5, Math.min(5, deltaY)))
+          else if (deltaY > 20) {
+            // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
+            this.scrollY(translatedDeltaY)
           }
         }		
       }
@@ -7098,8 +7112,8 @@ class WebsyTable3 {
       this.isPerpetual = false
       this.mouseYStart = event.targetTouches[0].pageY
       this.mouseXStart = event.targetTouches[0].pageX    
-      const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
-      touchScrollEl.classList.remove('hidden')
+      // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
+      // touchScrollEl.classList.remove('hidden')
       const handleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
       this.handleYStart = handleYEl.offsetTop
       const handleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
@@ -7402,7 +7416,8 @@ class WebsyChart {
       brushHeight: 50,
       minBandWidth: 30,
       maxBandWidth: 100,
-      allowUnevenBands: true
+      allowUnevenBands: true,
+      balancedMinMax: false
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
@@ -7942,14 +7957,14 @@ else {
     this.options.data.bottom = { data: [] }
   }  
   if (this.options.orientation === 'vertical') {
-    this.leftAxisLayer.attr('class', 'y-axis')
-    this.rightAxisLayer.attr('class', 'y-axis')
-    this.bottomAxisLayer.attr('class', 'x-axis')
+    this.leftAxisLayer && this.leftAxisLayer.attr('class', 'y-axis')
+    this.rightAxisLayer && this.rightAxisLayer.attr('class', 'y-axis')
+    this.bottomAxisLayer && this.bottomAxisLayer.attr('class', 'x-axis')
   }
   else {
-    this.leftAxisLayer.attr('class', 'x-axis')
-    this.rightAxisLayer.attr('class', 'x-axis')
-    this.bottomAxisLayer.attr('class', 'y-axis')
+    this.leftAxisLayer && this.leftAxisLayer.attr('class', 'x-axis')
+    this.rightAxisLayer && this.rightAxisLayer.attr('class', 'x-axis')
+    this.bottomAxisLayer && this.bottomAxisLayer.attr('class', 'y-axis')
   }
   const el = document.getElementById(this.elementId)
   if (el) {
@@ -8065,6 +8080,22 @@ else {
       if (this.options.data.right.formatter) {
         this.longestRight = this.options.data.right.formatter(this.options.data.right.max).toString()
       }
+    } 
+    // Check to see if we need to balance the min and max values
+    if (this.options.balancedMinMax) {
+      if (this.options.orientation === 'horizontal') {
+        let biggestBottom = Math.max(Math.abs(this.options.data.bottom.min, this.options.data.bottom.max))
+        this.options.data.bottom.min = 1 - biggestBottom
+        this.options.data.bottom.max = biggestBottom
+      }
+      else {
+        let biggestLeft = Math.max(Math.abs(this.options.data.left.min, this.options.data.left.max))
+        this.options.data.left.min = 1 - biggestLeft
+        this.options.data.left.max = biggestLeft
+        let biggestRight = Math.max(Math.abs(this.options.data.right.min, this.options.data.right.max))
+        this.options.data.right.min = 1 - biggestRight
+        this.options.data.right.max = biggestRight
+      }
     }    
     // establish the space needed for the various axes    
     // this.options.margin.axisLeft = this.longestLeft * ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize) * 0.7
@@ -8246,7 +8277,7 @@ else {
     //   }
     // }    
     // Translate the layers
-    const leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight + 5 : 0
+    const leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight : 0
     this.leftAxisLayer
       .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
       .style('font-size', (this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize)
@@ -8263,23 +8294,23 @@ else {
     this.bottomAxisLabel
       .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
     this.plotArea
-      .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.areaLayer
-      .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.lineLayer
-      .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.barLayer
-      .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.labelLayer
-      .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.symbolLayer
-      .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.refLineLayer
-      .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.trackingLineLayer
-      .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)         
+      .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)         
     this.clip
-      .attr('transform', `translate(${(leftBrushAdjustment - 5) + this.options.margin.left + this.options.margin.axisLeft}, 0)`)
+      .attr('transform', `translate(${(leftBrushAdjustment) + this.options.margin.left + this.options.margin.axisLeft}, 0)`)
       .attr('width', this.plotWidth)
       .attr('height', this.plotHeight + this.options.margin.top + this.options.margin.axisTop)   
     if (this.options.orientation === 'horizontal') {
@@ -8836,9 +8867,9 @@ function getBarWidth (d, i, yAxis, xAxis) {
   let output
   if (this.options.orientation === 'horizontal') {    
     // output = this[`${yAxis}Axis`](Math.abs(d.y.value))
-    output = this[`${yAxis}Axis`](Math.abs(d.y.value))
+    // output = this[`${yAxis}Axis`](Math.abs(d.y.value))
     // output = (this[`${yAxis}Axis`](0)) + this[`${yAxis}Axis`](Math.abs(d.y.value))
-    // output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
+    output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
   }
   else {
     let x = getBarX.call(this, d, i, yAxis, xAxis)
@@ -8874,11 +8905,21 @@ function getBarX (d, i, yAxis, xAxis) {
       let accH = getBarWidth.call(this, {x: d.x, y: { value: d.y.accumulative }}, i, yAxis, xAxis)      
       let h = getBarWidth.call(this, d, i, yAxis, xAxis)      
       // output = (this[`${yAxis}Axis`](0)) + ((accH + h) * (d.y.accumulative > 0 ? 0 : 1))
-      output = (this[`${yAxis}Axis`](0)) + ((accH) * (d.y.accumulative > 0 ? 1 : 0))
+      if (d.y.value >= 0) {
+        output = (this[`${yAxis}Axis`](0)) + ((Math.abs(accH)) * (d.y.accumulative > 0 ? 1 : 0)) 
+      }
+      else {
+        output = (this[`${yAxis}Axis`](0)) - ((Math.abs(accH) + Math.abs(h)) * (d.y.accumulative > 0 ? 1 : 0))
+      }      
     }
     else {
       let h = getBarWidth.call(this, d, i, yAxis, xAxis)
-      output = (this[`${yAxis}Axis`](0)) + (h * (d.y.value > 0 ? 0 : 1))
+      if (d.y.value >= 0) {
+        output = (this[`${yAxis}Axis`](0))
+      }
+      else {
+        output = (this[`${yAxis}Axis`](0)) + h
+      }
     }
   }
   else {
@@ -9063,27 +9104,28 @@ if (this.options.showLabels === true || series.showLabels === true) {
         if (that.options.grouping === 'stacked' && series.labelPosition !== 'outside') {
           this.setAttribute('text-anchor', 'middle')
         }
-        else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
+        else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {          
           this.setAttribute('text-anchor', 'end')
           this.setAttribute('x', +(this.getAttribute('x')) - 8)                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
         } 
-        else if (d.y.value < 0 && d.y.value !== that.options.data[yAxis].min) {
-          this.setAttribute('text-anchor', 'end')
-          this.setAttribute('x', +(this.getAttribute('x')) - 8)                  
-          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
-        }     
-        else if (d.y.value < 0 && d.y.value === that.options.data[yAxis].min) {
+        else if (d.y.value < 0 && this.getAttribute('x') < 0) {
           this.setAttribute('text-anchor', 'start')
-          this.setAttribute('x', +(this.getAttribute('x')) + 8)                  
+          this.setAttribute('x', Math.max(+(this.getAttribute('x')) + 8, 8))                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
         }  
+        else if (d.y.value < 0 && this.getAttribute('x') > 0) {          
+          this.setAttribute('text-anchor', 'end')
+          this.setAttribute('x', +(this.getAttribute('x')) - 8)                  
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
+        }             
         else if (series.labelPosition === 'outside') {
           this.setAttribute('text-anchor', 'start')
           this.setAttribute('x', +(this.getAttribute('x')) + 8)                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
         }
-        else {                  
+        else {              
+          this.setAttribute('text-anchor', 'start')         
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
         }
       }
@@ -9120,16 +9162,16 @@ if (this.options.showLabels === true || series.showLabels === true) {
           this.setAttribute('x', +(this.getAttribute('x')) - 8)                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
         }  
-        else if (d.y.value < 0 && d.y.value !== that.options.data[yAxis].min) {
-          this.setAttribute('text-anchor', 'end')
-          this.setAttribute('x', +(this.getAttribute('x')) - 8)                  
-          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
-        }
-        else if (d.y.value < 0 && d.y.value === that.options.data[yAxis].min) {
+        else if (d.y.value < 0 && this.getAttribute('x') < 0) {
           this.setAttribute('text-anchor', 'start')
-          this.setAttribute('x', +(this.getAttribute('x')) + 8)                  
+          this.setAttribute('x', Math.max(+(this.getAttribute('x')) + 8, 8))                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
         }  
+        else if (d.y.value < 0 && this.getAttribute('x') > 0) {          
+          this.setAttribute('text-anchor', 'end')
+          this.setAttribute('x', +(this.getAttribute('x')) - 8)                  
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
+        } 
         else if (series.labelPosition === 'outside') {
           this.setAttribute('text-anchor', 'start')
           this.setAttribute('x', +(this.getAttribute('x')) + 8)                  

package/dist/websy-designs.js

@@ -7118,7 +7118,13 @@ var WebsyTable3 = /*#__PURE__*/function () {
     var el = document.getElementById(this.elementId);
 
     if (el) {
-      var html = "\n        <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', "'>\n          <!--<div class=\"download-button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n          </div>-->\n          <div id=\"").concat(this.elementId, "_tableInner\" class=\"websy-table-inner-container\">\n            <table id=\"").concat(this.elementId, "_tableHeader\" class=\"websy-table-header\"></table>\n            <table id=\"").concat(this.elementId, "_tableBody\" class=\"websy-table-body\"></table>\n            <table id=\"").concat(this.elementId, "_tableFooter\" class=\"websy-table-footer\"></table>\n            <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n              <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n            </div>\n            <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n              <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n            </div>\n            <div id=\"").concat(this.elementId, "_touchScroller\" class=\"websy-table-touch-scroller hidden\"></div>\n          </div>     \n          <div id=\"").concat(this.elementId, "_errorContainer\" class='websy-vis-error-container'>\n            <div>\n              <div id=\"").concat(this.elementId, "_errorTitle\"></div>\n              <div id=\"").concat(this.elementId, "_errorMessage\"></div>\n            </div>            \n          </div>\n          <div id=\"").concat(this.elementId, "_dropdownContainer\" class=\"table-dropdown-container\"></div>\n          <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n        </div>\n      ");
+      var html = "\n        <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', "'>\n          <!--<div class=\"download-button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n          </div>-->\n          <div id=\"").concat(this.elementId, "_tableInner\" class=\"websy-table-inner-container\">\n            <table id=\"").concat(this.elementId, "_tableHeader\" class=\"websy-table-header\"></table>\n            <table id=\"").concat(this.elementId, "_tableBody\" class=\"websy-table-body\"></table>\n            <table id=\"").concat(this.elementId, "_tableFooter\" class=\"websy-table-footer\"></table>\n            <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n              <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n            </div>\n            <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n              <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n            </div>\n      ");
+
+      if (this.isTouchDevice === true) {
+        html += "\n            <div id=\"".concat(this.elementId, "_touchScroller\" class=\"websy-table-touch-scroller\"></div>\n        ");
+      }
+
+      html += "            \n          </div>     \n          <div id=\"".concat(this.elementId, "_errorContainer\" class='websy-vis-error-container'>\n            <div>\n              <div id=\"").concat(this.elementId, "_errorTitle\"></div>\n              <div id=\"").concat(this.elementId, "_errorMessage\"></div>\n            </div>            \n          </div>\n          <div id=\"").concat(this.elementId, "_dropdownContainer\" class=\"table-dropdown-container\"></div>\n          <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n        </div>\n      ");
 
       if (this.options.paging === 'pages') {
         html += "\n          <div class=\"websy-table-paging-container\">\n            Show <div id=\"".concat(this.elementId, "_pageSizeSelector\" class=\"websy-vis-page-selector\"></div> rows\n            <ul id=\"").concat(this.elementId, "_pageList\" class=\"websy-vis-page-list\"></ul>\n          </div>\n        ");
@@ -7128,7 +7134,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
       el.addEventListener('click', this.handleClick.bind(this));
       el.addEventListener('mousedown', this.handleMouseDown.bind(this));
       el.addEventListener('touchstart', this.handleTouchStart.bind(this));
-      window.addEventListener('touchmove', this.handleTouchMove.bind(this));
+      el.addEventListener('touchmove', this.handleTouchMove.bind(this));
       window.addEventListener('touchend', this.handleTouchEnd.bind(this));
       window.addEventListener('mousemove', this.handleMouseMove.bind(this));
       window.addEventListener('mouseup', this.handleMouseUp.bind(this));
@@ -7255,11 +7261,11 @@ var WebsyTable3 = /*#__PURE__*/function () {
           }
 
           if (sizingColumns[sizeIndex].showAsLink === true && cell.value.trim() !== '') {
-            cell.value = "\n            <a href='".concat(cell.value, "' target='").concat(sizingColumns[sizeIndex].openInNewTab === true ? '_blank' : '_self', "'>").concat(cell.displayText || sizingColumns[sizeIndex].linkText || cell.value, "</a>\n          ");
+            cell.value = "\n            <a href=\"".concat(cell.value, "\" target='").concat(sizingColumns[sizeIndex].openInNewTab === true ? '_blank' : '_self', "'>").concat(cell.displayText || sizingColumns[sizeIndex].linkText || cell.value, "</a>\n          ");
           }
 
           if (sizingColumns[sizeIndex].showAsRouterLink === true && cell.value.trim() !== '') {
-            cell.value = "\n            <a data-view='".concat((cell.link || cell.value).replace(/'/g, '\''), "' class='websy-trigger'>").concat(cell.value, "</a>\n          ");
+            cell.value = "\n            <a data-view=\"".concat((cell.link || cell.value).replace(/'/g, '\''), "\" class='websy-trigger'>").concat(cell.value, "</a>\n          ");
           }
 
           if (sizingColumns[sizeIndex].showAsImage === true) {
@@ -7714,9 +7720,8 @@ var WebsyTable3 = /*#__PURE__*/function () {
         this.touchEndTime = new Date().getTime();
         this.isPerpetual = true; // this.perpetualScroll()	
 
-        this.touchStartTime = null;
-        var touchScrollEl = document.getElementById("".concat(this.elementId, "_touchScroller"));
-        touchScrollEl.classList.add('hidden');
+        this.touchStartTime = null; // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
+        // touchScrollEl.classList.add('hidden')
       }
     }
   }, {
@@ -7730,7 +7735,13 @@ var WebsyTable3 = /*#__PURE__*/function () {
 
         if (typeof event.targetTouches !== 'undefined' && event.targetTouches.length > 0) {
           var deltaX = this.mouseXStart - event.targetTouches[0].pageX;
-          var deltaY = this.mouseYStart - event.targetTouches[0].pageY; // need to adjust the delta so that it scrolls at a reasonable speed/distance
+          var deltaY = this.mouseYStart - event.targetTouches[0].pageY;
+          var hScrollContainerEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
+          var vScrollContainerEl = document.getElementById("".concat(this.elementId, "_vScrollContainer"));
+          var hScrollHandleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
+          var vScrollHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
+          var translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width);
+          var translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height); // need to adjust the delta so that it scrolls at a reasonable speed/distance
 
           var scrollHandleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
           var scrollHandleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle")); // if (Math.abs(deltaY) > this.sizes.cellHeight) {
@@ -7740,7 +7751,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
           //   this.isTouchScrolling = false
           // }
 
-          console.log('delta init', deltaY); // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
+          console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY); // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
           // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
           // console.log('delta', deltaY)
           // NW      
@@ -7755,10 +7766,12 @@ var WebsyTable3 = /*#__PURE__*/function () {
 
           if (this.isTouchScrolling === true) {
             // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))          		
-            if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 10) {
-              this.scrollX(Math.max(-5, Math.min(5, deltaX)));
-            } else {
-              this.scrollY(Math.max(-5, Math.min(5, deltaY)));
+            if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
+              // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
+              this.scrollX(translatedDeltaX);
+            } else if (deltaY > 20) {
+              // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
+              this.scrollY(translatedDeltaY);
             }
           }
         }
@@ -7782,9 +7795,9 @@ var WebsyTable3 = /*#__PURE__*/function () {
         this.isTouchScrolling = true;
         this.isPerpetual = false;
         this.mouseYStart = event.targetTouches[0].pageY;
-        this.mouseXStart = event.targetTouches[0].pageX;
-        var touchScrollEl = document.getElementById("".concat(this.elementId, "_touchScroller"));
-        touchScrollEl.classList.remove('hidden');
+        this.mouseXStart = event.targetTouches[0].pageX; // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
+        // touchScrollEl.classList.remove('hidden')
+
         var handleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
         this.handleYStart = handleYEl.offsetTop;
         var handleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
@@ -8187,7 +8200,8 @@ var WebsyChart = /*#__PURE__*/function () {
       brushHeight: 50,
       minBandWidth: 30,
       maxBandWidth: 100,
-      allowUnevenBands: true
+      allowUnevenBands: true,
+      balancedMinMax: false
     };
     this.elementId = elementId;
     this.options = _extends({}, DEFAULTS, options);
@@ -8790,13 +8804,13 @@ var WebsyChart = /*#__PURE__*/function () {
         }
 
         if (this.options.orientation === 'vertical') {
-          this.leftAxisLayer.attr('class', 'y-axis');
-          this.rightAxisLayer.attr('class', 'y-axis');
-          this.bottomAxisLayer.attr('class', 'x-axis');
+          this.leftAxisLayer && this.leftAxisLayer.attr('class', 'y-axis');
+          this.rightAxisLayer && this.rightAxisLayer.attr('class', 'y-axis');
+          this.bottomAxisLayer && this.bottomAxisLayer.attr('class', 'x-axis');
         } else {
-          this.leftAxisLayer.attr('class', 'x-axis');
-          this.rightAxisLayer.attr('class', 'x-axis');
-          this.bottomAxisLayer.attr('class', 'y-axis');
+          this.leftAxisLayer && this.leftAxisLayer.attr('class', 'x-axis');
+          this.rightAxisLayer && this.rightAxisLayer.attr('class', 'x-axis');
+          this.bottomAxisLayer && this.bottomAxisLayer.attr('class', 'y-axis');
         }
 
         var el = document.getElementById(this.elementId);
@@ -8945,6 +8959,22 @@ var WebsyChart = /*#__PURE__*/function () {
             if (this.options.data.right.formatter) {
               this.longestRight = this.options.data.right.formatter(this.options.data.right.max).toString();
             }
+          } // Check to see if we need to balance the min and max values
+
+
+          if (this.options.balancedMinMax) {
+            if (this.options.orientation === 'horizontal') {
+              var biggestBottom = Math.max(Math.abs(this.options.data.bottom.min, this.options.data.bottom.max));
+              this.options.data.bottom.min = 1 - biggestBottom;
+              this.options.data.bottom.max = biggestBottom;
+            } else {
+              var biggestLeft = Math.max(Math.abs(this.options.data.left.min, this.options.data.left.max));
+              this.options.data.left.min = 1 - biggestLeft;
+              this.options.data.left.max = biggestLeft;
+              var biggestRight = Math.max(Math.abs(this.options.data.right.min, this.options.data.right.max));
+              this.options.data.right.min = 1 - biggestRight;
+              this.options.data.right.max = biggestRight;
+            }
           } // establish the space needed for the various axes    
           // this.options.margin.axisLeft = this.longestLeft * ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize) * 0.7
           // this.options.margin.axisRight = this.longestRight * ((this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize) * 0.7
@@ -9143,22 +9173,22 @@ var WebsyChart = /*#__PURE__*/function () {
           // Translate the layers
 
 
-          var leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight + 5 : 0;
+          var leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight : 0;
           this.leftAxisLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).style('font-size', this.options.data.left && this.options.data.left.fontSize || this.options.fontSize);
           this.rightAxisLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.plotWidth + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).style('font-size', this.options.data.right && this.options.data.right.fontSize || this.options.fontSize);
           this.bottomAxisLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")")).style('font-size', this.options.data.bottom && this.options.data.bottom.fontSize || this.options.fontSize);
           this.leftAxisLabel.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
           this.rightAxisLabel.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
           this.bottomAxisLabel.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")"));
-          this.plotArea.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
-          this.areaLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
-          this.lineLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
-          this.barLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
-          this.labelLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
-          this.symbolLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
-          this.refLineLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
-          this.trackingLineLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
-          this.clip.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", 0)")).attr('width', this.plotWidth).attr('height', this.plotHeight + this.options.margin.top + this.options.margin.axisTop);
+          this.plotArea.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
+          this.areaLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
+          this.lineLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
+          this.barLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
+          this.labelLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
+          this.symbolLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
+          this.refLineLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
+          this.trackingLineLayer.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
+          this.clip.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", 0)")).attr('width', this.plotWidth).attr('height', this.plotHeight + this.options.margin.top + this.options.margin.axisTop);
 
           if (this.options.orientation === 'horizontal') {
             this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
@@ -9669,8 +9699,9 @@ var WebsyChart = /*#__PURE__*/function () {
 
         if (this.options.orientation === 'horizontal') {
           // output = this[`${yAxis}Axis`](Math.abs(d.y.value))
-          output = this["".concat(yAxis, "Axis")](Math.abs(d.y.value)); // output = (this[`${yAxis}Axis`](0)) + this[`${yAxis}Axis`](Math.abs(d.y.value))
-          // output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
+          // output = this[`${yAxis}Axis`](Math.abs(d.y.value))
+          // output = (this[`${yAxis}Axis`](0)) + this[`${yAxis}Axis`](Math.abs(d.y.value))
+          output = this["".concat(yAxis, "Axis")](0) - this["".concat(yAxis, "Axis")](Math.abs(d.y.value));
         } else {
           var x = getBarX.call(this, d, i, yAxis, xAxis);
 
@@ -9717,11 +9748,19 @@ var WebsyChart = /*#__PURE__*/function () {
             }, i, yAxis, xAxis);
             var h = getBarWidth.call(this, d, i, yAxis, xAxis); // output = (this[`${yAxis}Axis`](0)) + ((accH + h) * (d.y.accumulative > 0 ? 0 : 1))
 
-            output = this["".concat(yAxis, "Axis")](0) + accH * (d.y.accumulative > 0 ? 1 : 0);
+            if (d.y.value >= 0) {
+              output = this["".concat(yAxis, "Axis")](0) + Math.abs(accH) * (d.y.accumulative > 0 ? 1 : 0);
+            } else {
+              output = this["".concat(yAxis, "Axis")](0) - (Math.abs(accH) + Math.abs(h)) * (d.y.accumulative > 0 ? 1 : 0);
+            }
           } else {
             var _h = getBarWidth.call(this, d, i, yAxis, xAxis);
 
-            output = this["".concat(yAxis, "Axis")](0) + _h * (d.y.value > 0 ? 0 : 1);
+            if (d.y.value >= 0) {
+              output = this["".concat(yAxis, "Axis")](0);
+            } else {
+              output = this["".concat(yAxis, "Axis")](0) + _h;
+            }
           }
         } else {
           // let adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this.options.data[xAxis.replace('Brush', '')].bandWidth / 2
@@ -9924,19 +9963,20 @@ var WebsyChart = /*#__PURE__*/function () {
               this.setAttribute('text-anchor', 'end');
               this.setAttribute('x', +this.getAttribute('x') - 8);
               this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color));
-            } else if (d.y.value < 0 && d.y.value !== that.options.data[yAxis].min) {
+            } else if (d.y.value < 0 && this.getAttribute('x') < 0) {
+              this.setAttribute('text-anchor', 'start');
+              this.setAttribute('x', Math.max(+this.getAttribute('x') + 8, 8));
+              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color));
+            } else if (d.y.value < 0 && this.getAttribute('x') > 0) {
               this.setAttribute('text-anchor', 'end');
               this.setAttribute('x', +this.getAttribute('x') - 8);
               this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
-            } else if (d.y.value < 0 && d.y.value === that.options.data[yAxis].min) {
-              this.setAttribute('text-anchor', 'start');
-              this.setAttribute('x', +this.getAttribute('x') + 8);
-              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color));
             } else if (series.labelPosition === 'outside') {
               this.setAttribute('text-anchor', 'start');
               this.setAttribute('x', +this.getAttribute('x') + 8);
               this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
             } else {
+              this.setAttribute('text-anchor', 'start');
               this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
             }
           } else {
@@ -9965,14 +10005,14 @@ var WebsyChart = /*#__PURE__*/function () {
               this.setAttribute('text-anchor', 'end');
               this.setAttribute('x', +this.getAttribute('x') - 8);
               this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color));
-            } else if (d.y.value < 0 && d.y.value !== that.options.data[yAxis].min) {
+            } else if (d.y.value < 0 && this.getAttribute('x') < 0) {
+              this.setAttribute('text-anchor', 'start');
+              this.setAttribute('x', Math.max(+this.getAttribute('x') + 8, 8));
+              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color));
+            } else if (d.y.value < 0 && this.getAttribute('x') > 0) {
               this.setAttribute('text-anchor', 'end');
               this.setAttribute('x', +this.getAttribute('x') - 8);
               this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
-            } else if (d.y.value < 0 && d.y.value === that.options.data[yAxis].min) {
-              this.setAttribute('text-anchor', 'start');
-              this.setAttribute('x', +this.getAttribute('x') + 8);
-              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color));
             } else if (series.labelPosition === 'outside') {
               this.setAttribute('text-anchor', 'start');
               this.setAttribute('x', +this.getAttribute('x') + 8);