@websy/websy-designs 1.9.2 → 1.9.4

package/dist/websy-designs.debug.js

@@ -181,7 +181,9 @@ class ButtonGroup {
       subscribers: {},
       activeItem: -1,
       tag: 'div',
-      allowNone: false
+      allowNone: false,
+      onActivate: () => {},
+      onDeactivate: () => {}
     }
     this.options = Object.assign({}, DEFAULTS, options)
     const el = document.getElementById(this.elementId)
@@ -193,7 +195,19 @@ class ButtonGroup {
   handleClick (event) {    
     if (event.target.classList.contains('websy-button-group-item')) {
       const index = +event.target.getAttribute('data-index')
-      if (this.options.activeItem !== index) {                       
+      if (this.options.multiSelect === true) {
+        if (event.target.classList.contains('active')) {
+          this.options.onDeactivate(this.options.items[index], index, event)
+          event.target.classList.remove('active')  
+          event.target.classList.add('inactive')               
+        }
+        else {
+          this.options.onActivate(this.options.items[index], index, event)                 
+          event.target.classList.add('active')  
+          event.target.classList.remove('inactive')
+        }
+      }
+      else if (this.options.activeItem !== index) {                       
         const el = document.getElementById(this.elementId)
         let buttons = Array.from(el.querySelectorAll('.websy-button-group-item'))
         buttons.forEach(el => {
@@ -2520,7 +2534,7 @@ class WebsyForm {
     let componentsToProcess = []
     if (el) {      
       let html = `
-        <form id="${this.elementId}Form" class="websy-form ${this.options.classes || ''}">
+        <form id="${this.elementId}Form" class="websy-form ${(this.options.classes || []).join(' ')}">
       `
       this.options.fields.forEach((f, i) => {
         this.fieldMap[f.field] = f
@@ -3039,6 +3053,9 @@ class WebsyNavigationMenu {
       activeSymbol: 'none',
       enableSearch: false,
       searchProp: 'text',
+      indent: 'padding',
+      expandIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 512 512"><polyline points="112 184 256 328 400 184" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`,
+      collapseIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 512 512"><polyline points="328 112 184 256 328 400" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`,
       menuIcon: `<svg viewbox="0 0 40 40" width="30" height="40">              
         <rect x="0" y="0" width="30" height="4" rx="2"></rect>
         <rect x="0" y="12" width="30" height="4" rx="2"></rect>
@@ -3283,7 +3300,7 @@ class WebsyNavigationMenu {
           data-menu-id='${this.elementId}_${currentBlock}_list'
           data-popout-id='${level > 1 ? block : currentBlock}'
           data-text='${items[i].isLink !== true ? items[i].text : ''}'
-          style='padding-left: ${level * this.options.childIndentation}px'
+          style='${this.options.indent}-left: ${level * this.options.childIndentation}px'
           ${(items[i].attributes && items[i].attributes.join(' ')) || ''}
         >
       `         
@@ -3313,8 +3330,8 @@ class WebsyNavigationMenu {
         html += `</a>`
       }
       if (items[i].items && items[i].items.length > 0) {
-        html += `          
-          <span class='menu-carat'></span>
+        html += `  
+          <div class='websy-menu-expand-collapse-buttons'>${this.options.expandIcon}${this.options.collapseIcon}</div>
         ` 
       }      
       if (this.options.activeSymbol === 'triangle') {
@@ -5446,7 +5463,7 @@ const WebsyUtils = {
     if (numOut % 1 > 0) {
       decimals = 1
     }
-    if (numOut < 1) {
+    if (numOut < 1 && decimals === 0) {
       decimals = getZeroDecimals(numOut)    
     }  
     numOut = (+numOut).toFixed(decimals)
@@ -6487,10 +6504,16 @@ class WebsyTable3 {
       searchIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-f</title><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`,
       plusIcon: WebsyDesigns.Icons.PlusFilled,
       minusIcon: WebsyDesigns.Icons.MinusFilled,
-      disableInternalLoader: false  
+      disableInternalLoader: false,
+      disableTouch: false,
+      scrollWidth: 10,
+      touchScrollWidth: 30
     }
     this.options = Object.assign({}, DEFAULTS, options)
     this.isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
+    if (this.options.disableTouch === true) {
+      this.isTouchDevice = false
+    }
     this.sizes = {}
     this.currentData = []
     this.scrollDragging = false
@@ -6508,10 +6531,11 @@ class WebsyTable3 {
       console.log('No element Id provided for Websy Table')		
       return
     }
-    const el = document.getElementById(this.elementId)    
+    const el = document.getElementById(this.elementId)  
+    el.style.position = 'relative'  
     if (el) {
       let html = `
-        <div id='${this.elementId}_tableContainer' class='websy-vis-table-3 ${this.options.paging === 'pages' ? 'with-paging' : ''} ${this.options.virtualScroll === true ? 'with-virtual-scroll' : ''} ${this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : ''}'>
+        <div id='${this.elementId}_tableContainer' style='width: calc(100% - ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px); height: calc(100% - ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px);' class='websy-vis-table-3 ${this.options.paging === 'pages' ? 'with-paging' : ''} ${this.options.virtualScroll === true ? 'with-virtual-scroll' : ''} ${this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : ''}'>
           <!--<div class="download-button">
             <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>
           </div>-->
@@ -6519,20 +6543,14 @@ class WebsyTable3 {
             <table id="${this.elementId}_tableHeader" class="websy-table-header"></table>
             <table id="${this.elementId}_tableBody" class="websy-table-body"></table>
             <table id="${this.elementId}_tableFooter" class="websy-table-footer"></table>
-            <div id="${this.elementId}_vScrollContainer" class="websy-v-scroll-container">
-              <div id="${this.elementId}_vScrollHandle" class="websy-scroll-handle websy-scroll-handle-y"></div>
-            </div>
-            <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>
       `
       if (this.isTouchDevice === true && this.options.virtualScroll === true) {
         html += `
             <div id="${this.elementId}_touchScroller" class="websy-table-touch-scroller"></div>
         `
       }
-      html += `            
-          </div>     
+      html += ` 
+          </div>                 
           <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
             <div>
               <div id="${this.elementId}_errorTitle"></div>
@@ -6542,6 +6560,12 @@ class WebsyTable3 {
           <div id="${this.elementId}_dropdownContainer" class="table-dropdown-container"></div>
           <div id="${this.elementId}_loadingContainer"></div>
         </div>
+        <div id="${this.elementId}_vScrollContainer" class="websy-v-scroll-container" style="width: ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px;">
+          <div id="${this.elementId}_vScrollHandle" class="websy-scroll-handle websy-scroll-handle-y"></div>
+        </div>
+        <div id="${this.elementId}_hScrollContainer" class="websy-h-scroll-container" style="height: ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px;">
+          <div id="${this.elementId}_hScrollHandle" class="websy-scroll-handle websy-scroll-handle-x"></div>
+        </div> 
       `      
       if (this.options.paging === 'pages') {
         html += `
@@ -6888,7 +6912,7 @@ class WebsyTable3 {
     //     this.sizes.scrollableWidth -= col.actualWidth
     //   }
     // })
-    this.sizes.totalWidth = columnsForSizing.reduce((a, b) => a + (b.width || b.actualWidth), 0)    
+    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()
@@ -7155,48 +7179,7 @@ class WebsyTable3 {
         else if (Math.abs(event.deltaX) > 50) {
           event.deltaY = 0
           this.handleScrollWheel(event)
-        }               
-        // 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`)
-        // // if (Math.abs(deltaY) > this.sizes.cellHeight) {
-        // //   this.isTouchScrolling = true			
-        // // }
-        // // else {
-        // //   this.isTouchScrolling = false
-        // // }
-        // // 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      
-        // // else if (Math.abs(deltaX) > 50) {
-        // //   this.isTouchScrolling = false			
-        // // }
-        // this.currentClientY = event.targetTouches[0].pageY			
-        // this.currentTouchtime = (new Date()).getTime()
-        // // end
-        // // delta = Math.min(10, delta)
-        // // 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 > 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)
-        //   }
-        // }		
+        }        
       }
     }
     if (this.scrollDragging === true) {      
@@ -7360,6 +7343,7 @@ 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` 
@@ -7374,8 +7358,10 @@ class WebsyTable3 {
       let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
       let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
       if (this.hScrollRequired === true) {        
-        hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
-        hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20)}px` 
+        hScrollEl.style.right = `${(this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
+        // hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
+        // hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px` 
+        hScrollEl.style.width = `${this.sizes.scrollableWidth}px` 
         hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px'
         if (this.isTouchDevice === true) {
           hScrollEl.style.visibility = `unset` 
@@ -7671,65 +7657,7 @@ class WebsyChart {
         if (that.bottomAxisLayer) {
           that.bottomAxisLayer.attr('transform', `translate(${newX}, ${newY + that.plotHeight})`)    
         }         
-      }      
-      // that.brushedDomain = []    
-      // let xAxis = 'bottom'
-      // let xAxisCaps = 'Bottom'
-      // if (that.options.orientation === 'horizontal') {
-      //   xAxis = 'left'
-      //   xAxisCaps = 'Left'
-      // } 
-      // if (!that[`${xAxis}Axis`]) {
-      //   return
-      // }
-      // if (!that[`${xAxis}Axis`].invert) {
-      //   that[`${xAxis}Axis`].invert = that.invertOverride
-      // }
-      // let s = event.selection || that[`${xAxis}Axis`].range()
-      // if (!event.selection || event.selection.length === 0) {
-      //   that.brushLayer
-      //     .select('.brush')
-      //     .call(that.brush)
-      //     .call(that.brush.move, s)
-      //   return
-      // }
-      // if (that.options.data[xAxis].scale && that.options.data[xAxis].scale === 'Time') {
-      //   that.brushedDomain = s.map(that[`${xAxis}BrushAxis`].invert, that[[`${xAxis}Axis`]])        
-      // }
-      // else {
-      //   let startEndOrdinal = s.map((a, b) => that.bottomAxis.invert(a, b, true), that.bottomBrushAxis)
-      //   if (
-      //     startEndOrdinal &&
-      //     startEndOrdinal.length === 2 &&
-      //     typeof startEndOrdinal[0] !== 'undefined' &&
-      //     typeof startEndOrdinal[1] !== 'undefined'
-      //   ) {
-      //     let domain = []
-      //     let domainValues = [...that[`${xAxis}BrushAxis`].domain()]
-      //     for (let i = startEndOrdinal[0]; i < startEndOrdinal[1] + 1; i++) {
-      //       // domain.push(that.xRange[i])
-      //       that.brushedDomain.push(domainValues[i])
-      //     }          
-      //   }
-      // }
-      // if (that.brushedDomain.length > 0) {
-      //   that[`${xAxis}Axis`].domain(that.brushedDomain)
-      //   that[`${xAxis}AxisLayer`].call(
-      //     d3[`axis${xAxisCaps}`](that[`${xAxis}Axis`])
-      //   )
-      // }      
-      // if (that.leftAxis && that.bottomAxis) {
-      //   that.renderComponents()
-      //   if (that.options.orientation === 'vertical') {
-      //     // that.bottomAxisLayer.call(that.bAxisFunc)
-      //     if (that.options.data.bottom.rotate) {
-      //       that.bottomAxisLayer.selectAll('text')
-      //         .attr('transform', `rotate(${((that.options.data.bottom && that.options.data.bottom.rotate) || 0)})`)
-      //         .style('text-anchor', `${((that.options.data.bottom && that.options.data.bottom.rotate) || 0) === 0 ? 'middle' : 'end'}`)
-      //         .style('transform-origin', ((that.options.data.bottom && that.options.data.bottom.rotate) || 0) === 0 ? '0 0' : `0 ${((that.options.data.bottom && that.options.data.bottom.fontSize) || that.options.fontSize)}px`)
-      //     } 
-      //   }
-      // }      
+      }            
     }
     const el = document.getElementById(this.elementId)    
     if (el) {
@@ -7837,6 +7765,9 @@ else {
       .select('.tracking-line')
       .attr('stroke-opacity', 0)
     this.tooltip.hide()
+    if (this.options.onMouseOut) {
+      this.options.onMouseOut()
+    }
   }
   handleEventMouseMove (event, d) {        
     let bisectDate = d3.bisector(d => {
@@ -7863,6 +7794,9 @@ else {
       let xDiff
       if (typeof x0 === 'undefined') {
         this.tooltip.hide()
+        if (this.options.onMouseOut) {
+          this.options.onMouseOut()
+        }
         return
       }
       let xLabel = this[xAxis].domain()[x0]
@@ -7885,7 +7819,7 @@ else {
               if (!d.y.color) {
                 d.y.color = s.color 
               }
-              tooltipData.push(d.y)
+              tooltipData.push(d)
             }
           })
         }
@@ -7903,7 +7837,7 @@ else {
             if (!pointA.y.color) {
               pointA.y.color = s.color 
             }          
-            tooltipData.push(pointA.y)
+            tooltipData.push(pointA)
             if (typeof pointA.x.value.getTime !== 'undefined') {
               tooltipTitle = d3.timeFormat(this.options.dateFormat || this.options.calculatedTimeFormatPattern)(pointA.x.value)
             }
@@ -7914,7 +7848,7 @@ else {
             if (!pointB.y.color) {
               pointB.y.color = s.color 
             }          
-            tooltipData.push(pointB.y)
+            tooltipData.push(pointB)
             if (typeof pointB.x.value.getTime !== 'undefined') {
               tooltipTitle = d3.timeFormat(this.options.dateFormat || this.options.calculatedTimeFormatPattern)(pointB.x.value)
             }          
@@ -7932,7 +7866,7 @@ else {
               if (!pointB.y.color) {
                 pointB.y.color = s.color 
               }          
-              tooltipData.push(pointB.y)
+              tooltipData.push(pointB)
             }
             else {
               xPoint = d0 
@@ -7943,7 +7877,7 @@ else {
               if (!pointA.y.color) {
                 pointA.y.color = s.color 
               }                 
-              tooltipData.push(pointA.y)
+              tooltipData.push(pointA)
             }            
           }
         }
@@ -7953,10 +7887,13 @@ else {
       `
       tooltipHTML += tooltipData.map(d => `
         <li>
-          <i style='background-color: ${d.color};'></i>
-          ${d.tooltipLabel || ''}<span>: ${d.tooltipValue || d.value}</span>
+          <i style='background-color: ${d.y.color};'></i>
+          ${d.y.tooltipLabel || ''}<span>: ${d.y.tooltipValue || d.value}</span>
         </li>
       `).join('')
+      if (this.options.onMouseOver) {
+        this.options.onMouseOver(tooltipData)
+      }
       tooltipHTML += `</ul>`
       let posOptions = {
         width: this.options.tooltipWidth,
@@ -8000,6 +7937,9 @@ else {
       this.tooltip.setHeight(this.plotHeight)
       if (isNaN(posOptions.left)) {
         this.tooltip.hide()
+        if (this.options.onMouseOut) {
+          this.options.onMouseOut()
+        }
         return
       }
       this.options.showTooltip && this.tooltip.show(tooltipTitle, tooltipHTML, posOptions)        
@@ -8046,9 +7986,9 @@ this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer')
 this.rightAxisLabel = this.svg.append('g').attr('class', 'right-axis-label-layer')
 this.bottomAxisLabel = this.svg.append('g').attr('class', 'bottom-axis-label-layer')
 this.plotArea = this.svg.append('g').attr('class', 'plot-layer').attr('clip-path', `url(#${this.elementId}_clip)`).append('g')
+this.barLayer = this.svg.append('g').attr('class', 'bar-layer').attr('clip-path', `url(#${this.elementId}_clip)`).append('g')
 this.areaLayer = this.svg.append('g').attr('class', 'area-layer').attr('clip-path', `url(#${this.elementId}_clip)`).append('g')
 this.lineLayer = this.svg.append('g').attr('class', 'line-layer').attr('clip-path', `url(#${this.elementId}_clip)`).append('g')
-this.barLayer = this.svg.append('g').attr('class', 'bar-layer').attr('clip-path', `url(#${this.elementId}_clip)`).append('g')
 // this.barLayer.attr('clip-path', `url(#${this.elementId}_clip)`)
 this.labelLayer = this.svg.append('g').attr('class', 'label-layer').attr('clip-path', `url(#${this.elementId}_clip)`).append('g')
 this.symbolLayer = this.svg.append('g').attr('class', 'symbol-layer').attr('clip-path', `url(#${this.elementId}_clip)`).append('g')
@@ -8233,13 +8173,13 @@ else {
       this.options.data.right.max = d3.max(this.options.data.right.data)
     }   
     if (this.options.data.right && typeof this.options.data.right.max !== 'undefined') {
-      this.longestRight = this.options.data.right.max.toString()
+      this.longestRight = this.options.data.right.max.length > this.options.data.right.min.length ? this.options.data.right.max.toString() : this.options.data.right.min.toString()
       if (this.options.data.right.formatter) {
-        this.longestRight = this.options.data.right.formatter(this.options.data.right.max).toString()
+        this.longestRight = this.options.data.right.formatter(this.longestRight).toString()
       }
     } 
     // Check to see if we need to balance the min and max values
-    if (this.options.balancedMinMax) {
+    if (this.options.balancedMinMax === true) {
       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
@@ -8247,13 +8187,13 @@ else {
       }
       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.min = biggestLeft * -1
         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.min = biggestRight * -1
         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
@@ -8275,7 +8215,7 @@ else {
       }      
     }
     this.options.margin.axisLeft = Math.max(longestLeftBounds.width, firstBottomWidth) + 5 // + 5 to accommodate for space between text and axis line
-    this.options.margin.axisRight = longestRightBounds.width
+    this.options.margin.axisRight = longestRightBounds.width + 10
     this.options.margin.axisBottom = longestBottomBounds.height + 10
     this.options.margin.axisTop = 0       
     // adjust axis margins based on title options
@@ -8340,7 +8280,8 @@ else {
     this.totalBrushBandPadding = 0
     let noOfPoints = 0
     let noOfGroups = 0
-    let plotable = 0
+    let plotable = 0    
+    
     if (this.options.maxBandWidth) {                  
       if (this.options.orientation === 'horizontal') {
         this.options.data.left.totalValueCount = this.options.data.left.data.reduce((a, b) => {
@@ -8434,7 +8375,8 @@ else {
     //   }
     // }    
     // Translate the layers
-    const leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight : 0
+    const leftBrushAdjustment = this.options.orientation === 'horizontal' && this.brushNeeded === true ? this.options.brushHeight : 0
+    // const bottomBrushAdjustment = this.options.orientation === 'vertical' && 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)
@@ -8474,12 +8416,12 @@ else {
       this.brushLayer
         .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
       this.yAxisClip
-        .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
+        .attr('transform', `translate(${leftBrushAdjustment}, ${this.options.margin.top + this.options.margin.axisTop})`)
         .attr('width', this.options.margin.axisLeft + 10)
         .attr('height', this.plotHeight)     
       this.xAxisClip
         .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
-        .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
+        .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight + this.options.margin.right)
         .attr('height', longestBottomBounds.height + 10)    
       this.brushClip
         .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)               
@@ -8490,12 +8432,12 @@ else {
       this.brushLayer
         .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)         
       this.yAxisClip
-        .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop - 10})`)
+        .attr('transform', `translate(0, ${this.options.margin.top + this.options.margin.axisTop - 10})`)
         .attr('width', this.options.margin.axisLeft + 10)
         .attr('height', this.plotHeight + 20)
       this.xAxisClip
         .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
-        .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
+        .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight + this.options.margin.right)
         .attr('height', longestBottomBounds.height + 10)      
       this.brushClip
         .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)               
@@ -8584,7 +8526,7 @@ else {
     }
     this.bottomAxis = d3[`scale${this.options.data.bottom.scale || 'Ordinal'}`]()
       .domain(bottomDomain)
-      .range(bottomRange)  
+      .range(bottomRange)
     if (!this.brushInitialized) {    
       this.bottomBrushAxis = d3[`scale${this.options.data.bottom.scale || 'Ordinal'}`]()
         .domain(bottomBrushDomain)