@websy/websy-designs 1.9.2 → 1.9.4

package/dist/websy-designs.js

@@ -219,7 +219,9 @@ var ButtonGroup = /*#__PURE__*/function () {
       subscribers: {},
       activeItem: -1,
       tag: 'div',
-      allowNone: false
+      allowNone: false,
+      onActivate: function onActivate() {},
+      onDeactivate: function onDeactivate() {}
     };
     this.options = _extends({}, DEFAULTS, options);
     var el = document.getElementById(this.elementId);
@@ -233,7 +235,17 @@ var ButtonGroup = /*#__PURE__*/function () {
     value: function handleClick(event) {
       if (event.target.classList.contains('websy-button-group-item')) {
         var 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) {
           var el = document.getElementById(this.elementId);
           var buttons = Array.from(el.querySelectorAll('.websy-button-group-item'));
           buttons.forEach(function (el) {
@@ -2528,7 +2540,7 @@ var WebsyForm = /*#__PURE__*/function () {
       var el = document.getElementById(this.elementId);
       var componentsToProcess = [];
       if (el) {
-        var html = "\n        <form id=\"".concat(this.elementId, "Form\" class=\"websy-form ").concat(this.options.classes || '', "\">\n      ");
+        var html = "\n        <form id=\"".concat(this.elementId, "Form\" class=\"websy-form ").concat((this.options.classes || []).join(' '), "\">\n      ");
         this.options.fields.forEach(function (f, i) {
           _this19.fieldMap[f.field] = f;
           if (f.component) {
@@ -2850,6 +2862,9 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
       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\">              \n        <rect x=\"0\" y=\"0\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n        <rect x=\"0\" y=\"12\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n        <rect x=\"0\" y=\"24\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n      </svg>",
       searchOptions: {}
     }, options);
@@ -3089,7 +3104,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
         if (Array.isArray(items[i].classes)) {
           items[i].classes = items[i].classes.join(' ');
         }
-        html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header websy-menu-level-").concat(level, " ").concat(items[i].classes || '', " ").concat(selected, " ").concat(active, "' \n          id='").concat(blockId, "' \n          data-id='").concat(currentBlock, "'\n          data-path='").concat(items[i].path, "'\n          data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n          data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n          data-text='").concat(items[i].isLink !== true ? items[i].text : '', "'\n          style='padding-left: ").concat(level * this.options.childIndentation, "px'\n          ").concat(items[i].attributes && items[i].attributes.join(' ') || '', "\n        >\n      ");
+        html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header websy-menu-level-").concat(level, " ").concat(items[i].classes || '', " ").concat(selected, " ").concat(active, "' \n          id='").concat(blockId, "' \n          data-id='").concat(currentBlock, "'\n          data-path='").concat(items[i].path, "'\n          data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n          data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n          data-text='").concat(items[i].isLink !== true ? items[i].text : '', "'\n          style='").concat(this.options.indent, "-left: ").concat(level * this.options.childIndentation, "px'\n          ").concat(items[i].attributes && items[i].attributes.join(' ') || '', "\n        >\n      ");
         if (this.options.orientation === 'horizontal') {
           html += items[i].text;
         }
@@ -3112,7 +3127,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           html += "</a>";
         }
         if (items[i].items && items[i].items.length > 0) {
-          html += "          \n          <span class='menu-carat'></span>\n        ";
+          html += "  \n          <div class='websy-menu-expand-collapse-buttons'>".concat(this.options.expandIcon).concat(this.options.collapseIcon, "</div>\n        ");
         }
         if (this.options.activeSymbol === 'triangle') {
           html += "\n          <span class='active-square'></span>\n        ";
@@ -5281,7 +5296,7 @@ var WebsyUtils = {
     if (numOut % 1 > 0) {
       decimals = 1;
     }
-    if (numOut < 1) {
+    if (numOut < 1 && decimals === 0) {
       decimals = getZeroDecimals(numOut);
     }
     numOut = (+numOut).toFixed(decimals);
@@ -6200,10 +6215,16 @@ var WebsyTable3 = /*#__PURE__*/function () {
       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 = _extends({}, 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;
@@ -6222,12 +6243,13 @@ var WebsyTable3 = /*#__PURE__*/function () {
       return;
     }
     var el = document.getElementById(this.elementId);
+    el.style.position = 'relative';
     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' : '', " ").concat(this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : '', "'>\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      ");
+      var html = "\n        <div id='".concat(this.elementId, "_tableContainer' style='width: calc(100% - ").concat(this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px); height: calc(100% - ").concat(this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px);' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', " ").concat(this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : '', "'>\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      ");
       if (this.isTouchDevice === true && this.options.virtualScroll === 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      ");
+      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        <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\" style=\"width: ").concat(this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px;\">\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\" style=\"height: ").concat(this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px;\">\n          <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></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        ");
       }
@@ -6823,50 +6845,8 @@ var WebsyTable3 = /*#__PURE__*/function () {
             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) {
         event.preventDefault();
         if (this.scrollDirection === 'y') {
@@ -7041,6 +7021,7 @@ 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";
@@ -7054,8 +7035,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
         var hScrollEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
         var hHandleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
         if (this.hScrollRequired === true) {
-          hScrollEl.style.left = "".concat(this.sizes.table.width - this.sizes.scrollableWidth, "px");
-          hScrollEl.style.width = "".concat(this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20), "px");
+          hScrollEl.style.right = "".concat(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 = "".concat(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";
@@ -7362,66 +7345,7 @@ var WebsyChart = /*#__PURE__*/function () {
           that.bottomAxisLayer.attr('transform', "translate(".concat(newX, ", ").concat(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`)
-      //     } 
-      //   }
-      // }      
     };
-
     var el = document.getElementById(this.elementId);
     if (el) {
       el.classList.add('websy-chart');
@@ -7524,6 +7448,9 @@ var WebsyChart = /*#__PURE__*/function () {
     value: function handleEventMouseOut(event, d) {
       this.trackingLineLayer.select('.tracking-line').attr('stroke-opacity', 0);
       this.tooltip.hide();
+      if (this.options.onMouseOut) {
+        this.options.onMouseOut();
+      }
     }
   }, {
     key: "handleEventMouseMove",
@@ -7553,6 +7480,9 @@ var WebsyChart = /*#__PURE__*/function () {
         var xDiff;
         if (typeof x0 === 'undefined') {
           this.tooltip.hide();
+          if (this.options.onMouseOut) {
+            this.options.onMouseOut();
+          }
           return;
         }
         var xLabel = this[xAxis].domain()[x0];
@@ -7575,7 +7505,7 @@ var WebsyChart = /*#__PURE__*/function () {
                 if (!d.y.color) {
                   d.y.color = s.color;
                 }
-                tooltipData.push(d.y);
+                tooltipData.push(d);
               }
             });
           } else {
@@ -7592,7 +7522,7 @@ var WebsyChart = /*#__PURE__*/function () {
               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(_this49.options.dateFormat || _this49.options.calculatedTimeFormatPattern)(pointA.x.value);
               }
@@ -7603,7 +7533,7 @@ var WebsyChart = /*#__PURE__*/function () {
               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(_this49.options.dateFormat || _this49.options.calculatedTimeFormatPattern)(pointB.x.value);
               }
@@ -7621,7 +7551,7 @@ var WebsyChart = /*#__PURE__*/function () {
                 if (!pointB.y.color) {
                   pointB.y.color = s.color;
                 }
-                tooltipData.push(pointB.y);
+                tooltipData.push(pointB);
               } else {
                 xPoint = d0;
                 tooltipTitle = pointA.x.value;
@@ -7631,15 +7561,18 @@ var WebsyChart = /*#__PURE__*/function () {
                 if (!pointA.y.color) {
                   pointA.y.color = s.color;
                 }
-                tooltipData.push(pointA.y);
+                tooltipData.push(pointA);
               }
             }
           }
         });
         tooltipHTML = "          \n        <ul>\n      ";
         tooltipHTML += tooltipData.map(function (d) {
-          return "\n        <li>\n          <i style='background-color: ".concat(d.color, ";'></i>\n          ").concat(d.tooltipLabel || '', "<span>: ").concat(d.tooltipValue || d.value, "</span>\n        </li>\n      ");
+          return "\n        <li>\n          <i style='background-color: ".concat(d.y.color, ";'></i>\n          ").concat(d.y.tooltipLabel || '', "<span>: ").concat(d.y.tooltipValue || d.value, "</span>\n        </li>\n      ");
         }).join('');
+        if (this.options.onMouseOver) {
+          this.options.onMouseOver(tooltipData);
+        }
         tooltipHTML += "</ul>";
         var posOptions = {
           width: this.options.tooltipWidth,
@@ -7682,6 +7615,9 @@ var WebsyChart = /*#__PURE__*/function () {
         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);
@@ -7722,9 +7658,9 @@ var WebsyChart = /*#__PURE__*/function () {
       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(#".concat(this.elementId, "_clip)")).append('g');
+      this.barLayer = this.svg.append('g').attr('class', 'bar-layer').attr('clip-path', "url(#".concat(this.elementId, "_clip)")).append('g');
       this.areaLayer = this.svg.append('g').attr('class', 'area-layer').attr('clip-path', "url(#".concat(this.elementId, "_clip)")).append('g');
       this.lineLayer = this.svg.append('g').attr('class', 'line-layer').attr('clip-path', "url(#".concat(this.elementId, "_clip)")).append('g');
-      this.barLayer = this.svg.append('g').attr('class', 'bar-layer').attr('clip-path', "url(#".concat(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(#".concat(this.elementId, "_clip)")).append('g');
       this.symbolLayer = this.svg.append('g').attr('class', 'symbol-layer').attr('clip-path', "url(#".concat(this.elementId, "_clip)")).append('g');
@@ -7917,23 +7853,23 @@ var WebsyChart = /*#__PURE__*/function () {
             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') {
               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.min = biggestLeft * -1;
               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.min = biggestRight * -1;
               this.options.data.right.max = biggestRight;
             }
           }
@@ -7957,7 +7893,7 @@ var WebsyChart = /*#__PURE__*/function () {
             }
           }
           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
@@ -8109,7 +8045,8 @@ var WebsyChart = /*#__PURE__*/function () {
           //   }
           // }    
           // Translate the layers
-          var leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight : 0;
+          var 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(".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);
@@ -8127,13 +8064,13 @@ var WebsyChart = /*#__PURE__*/function () {
           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, ")"));
-            this.yAxisClip.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).attr('width', this.options.margin.axisLeft + 10).attr('height', this.plotHeight);
-            this.xAxisClip.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")")).attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight).attr('height', longestBottomBounds.height + 10);
+            this.yAxisClip.attr('transform', "translate(".concat(leftBrushAdjustment, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).attr('width', this.options.margin.axisLeft + 10).attr('height', this.plotHeight);
+            this.xAxisClip.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")")).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(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).attr('height', this.plotHeight).attr('width', this.options.brushHeight);
           } else {
             this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height, ")"));
-            this.yAxisClip.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(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(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")")).attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight).attr('height', longestBottomBounds.height + 10);
+            this.yAxisClip.attr('transform', "translate(0, ".concat(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(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")")).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(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height, ")")).attr('width', this.plotWidth).attr('height', this.options.brushHeight);
           }
           this.eventLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));