@websy/websy-designs 1.4.37 → 1.5.0

package/dist/websy-designs.js

@@ -7658,6 +7658,7 @@ var WebsyChart = /*#__PURE__*/function () {
       lineWidth: 2,
       forceZero: true,
       grouping: 'grouped',
+      groupPadding: 3,
       fontSize: 14,
       symbolSize: 20,
       showTrackingLine: true,
@@ -7666,7 +7667,8 @@ var WebsyChart = /*#__PURE__*/function () {
       legendPosition: 'bottom',
       tooltipWidth: 200,
       brushHeight: 50,
-      minBandWidth: 30
+      minBandWidth: 30,
+      allowUnevenBands: true
     };
     this.elementId = elementId;
     this.options = _extends({}, DEFAULTS, options);
@@ -7697,24 +7699,39 @@ var WebsyChart = /*#__PURE__*/function () {
       }
 
       xAxis += 'Axis';
-
-      var width = _this45[xAxis].step();
-
       var output;
 
-      var domain = _toConsumableArray(_this45[xAxis].domain());
+      var width = _this45.options.data[xAxis.replace('Brush', '').replace('Axis', '')].bandWidth;
 
-      if (_this45.options.orientation === 'horizontal') {
-        domain = domain.reverse();
-      }
+      if (_this45.customBottomRange) {
+        for (var index = 0; index < _this45.customBottomRange.length; index++) {
+          if (input > _this45.customBottomRange[index]) {
+            if (_this45.customBottomRange[index + 1]) {
+              if (input < _this45.customBottomRange[index + 1]) {
+                output = index;
+                break;
+              }
+            } else {
+              output = index;
+              break;
+            }
+          }
+        }
+      } else {
+        var domain = _toConsumableArray(_this45[xAxis].domain());
 
-      for (var j = 0; j < domain.length; j++) {
-        var breakA = _this45[xAxis](domain[j]) - width / 2;
-        var breakB = breakA + width;
+        if (_this45.options.orientation === 'horizontal') {
+          domain = domain.reverse();
+        }
 
-        if (input > breakA && input <= breakB) {
-          output = j;
-          break;
+        for (var j = 0; j < domain.length; j++) {
+          var breakA = _this45[xAxis](domain[j]) - width / 2;
+          var breakB = breakA + width;
+
+          if (input > breakA && input <= breakB) {
+            output = j;
+            break;
+          }
         }
       }
 
@@ -7734,6 +7751,10 @@ var WebsyChart = /*#__PURE__*/function () {
         xAxisCaps = 'Left';
       }
 
+      if (!that["".concat(xAxis, "Axis")]) {
+        return;
+      }
+
       if (!that["".concat(xAxis, "Axis")].invert) {
         that["".concat(xAxis, "Axis")].invert = that.invertOverride;
       }
@@ -7794,6 +7815,9 @@ var WebsyChart = /*#__PURE__*/function () {
 
         this.legendArea = d3.select(el).append('div').attr('id', "".concat(this.elementId, "_legend")).attr('class', 'websy-chart-legend');
         this.legend = new WebsyDesigns.Legend("".concat(this.elementId, "_legend"), {});
+        this.errorContainer = d3.select(el).append('div').attr('id', "".concat(this.elementId, "_errorContainer")).attr('class', 'websy-vis-error-container').html("          \n            <div>\n              <div id=\"".concat(this.elementId, "_errorTitle\"></div>\n              <div id=\"").concat(this.elementId, "_errorMessage\"></div>\n            </div>\n          "));
+        this.loadingContainer = d3.select(el).append('div').attr('id', "".concat(this.elementId, "_loadingContainer"));
+        this.loadingDialog = new WebsyDesigns.LoadingDialog("".concat(this.elementId, "_loadingContainer"));
         this.prep(); // el.innerHTML += `
         //   <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
         //     <div>
@@ -7933,7 +7957,12 @@ var WebsyChart = /*#__PURE__*/function () {
 
         this.options.data.series.forEach(function (s) {
           if (_this46.options.data[xData].scale !== 'Time') {
-            xPoint = _this46[xAxis](_this46.parseX(xLabel));
+            if (_this46.customBottomRange && _this46.customBottomRange.length > 0) {
+              xPoint = _this46.customBottomRange[x0] + (_this46.customBottomRange[x0 + 1] - _this46.customBottomRange[x0]) / 2;
+            } else {
+              xPoint = _this46[xAxis](_this46.parseX(xLabel));
+            }
+
             s.data.forEach(function (d) {
               if (d.x.value === xLabel) {
                 if (!tooltipTitle) {
@@ -8037,7 +8066,7 @@ var WebsyChart = /*#__PURE__*/function () {
         };
 
         if (xPoint > this.plotWidth / 2) {
-          posOptions.left = xPoint - this.options.tooltipWidth + this.options.margin.left + this.options.margin.axisLeft + 15;
+          posOptions.left = xPoint - this.options.tooltipWidth - 15; // + this.options.margin.left + this.options.margin.axisLeft + 15)
 
           if (this.options.data[xData].scale !== 'Time') {
             // posOptions.left -= (this[xAxis].bandwidth())
@@ -8047,7 +8076,7 @@ var WebsyChart = /*#__PURE__*/function () {
           posOptions.left = xPoint + this.options.margin.left + this.options.margin.axisLeft + 15;
 
           if (this.options.data[xData].scale !== 'Time') {
-            posOptions.left += this[xAxis].bandwidth() / 2;
+            posOptions.left += this.options.data[xAxis.replace('Axis', '')].bandWidth / 2;
           }
         }
 
@@ -8058,7 +8087,7 @@ var WebsyChart = /*#__PURE__*/function () {
           var adjuster = 0;
 
           if (this.options.data[xData].scale !== 'Time') {
-            adjuster = this[xAxis].bandwidth() / 2; // - this.options.margin.top
+            adjuster = this.options.data[xAxis.replace('Axis', '')].bandWidth / 2; // - this.options.margin.top
           }
 
           posOptions = {
@@ -8081,8 +8110,8 @@ var WebsyChart = /*#__PURE__*/function () {
         //   xPoint = x0
         // }      
 
-        if (this.options.data[xData].scale !== 'Time') {
-          xPoint += this[xAxis].bandwidth() / 2; // - this.options.margin.top
+        if (this.options.data[xData].scale !== 'Time' && this.customBottomRange.length === 0) {
+          xPoint += this.options.data[xAxis.replace('Axis', '')].bandWidth / 2; // - this.options.margin.top
         }
 
         var trackingXStart = xPoint;
@@ -8146,6 +8175,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
       if (!this.options.data) {// tell the user no data has been provided
       } else {
+        this.processedX = {};
         this.transition = d3.transition().duration(this.options.transitionDuration);
 
         if (this.options.data.bottom.scale && this.options.data.bottom.scale === 'Time') {
@@ -8203,12 +8233,18 @@ var WebsyChart = /*#__PURE__*/function () {
           // the legend gets rendered so that we can get its actual size
 
           if (this.options.showLegend === true) {
-            var legendData = this.options.data.series.map(function (s, i) {
-              return {
-                value: s.label || s.key,
-                color: s.color || _this47.options.colors[i % _this47.options.colors.length]
-              };
-            });
+            var legendData = [];
+
+            if (this.options.legendData && this.options.legendData.length > 0) {
+              legendData = this.options.legendData;
+            } else {
+              this.options.data.series.map(function (s, i) {
+                return {
+                  value: s.label || s.key,
+                  color: s.color || _this47.options.colors[i % _this47.options.colors.length]
+                };
+              });
+            }
 
             if (this.options.legendPosition === 'top' || this.options.legendPosition === 'bottom') {
               this.legendArea.style('width', '100%');
@@ -8412,18 +8448,34 @@ var WebsyChart = /*#__PURE__*/function () {
           this.brushNeeded = false;
 
           if (this.options.orientation === 'vertical') {
+            this.options.data.bottom.totalValueCount = this.options.data.bottom.data.reduce(function (a, b) {
+              if (typeof b.valueCount === 'undefined') {
+                return a + 1;
+              }
+
+              return a + b.valueCount;
+            }, 0);
+
             if (this.options.maxBandWidth) {
-              this.plotWidth = Math.min(this.plotWidth, (this.options.data.bottom.data || []).length * this.options.maxBandWidth);
+              this.plotWidth = Math.min(this.plotWidth, this.options.data.bottom.totalValueCount * this.options.maxBandWidth);
             } // some if to check if brushing is needed
 
 
-            if (this.plotWidth / this.options.data.bottom.data.length < this.options.minBandWidth) {
+            if (this.plotWidth / this.options.data.bottom.totalValueCount < this.options.minBandWidth) {
               this.brushNeeded = true;
               this.plotHeight -= this.options.brushHeight;
             }
           } else {
             // some if to check if brushing is needed
-            if (this.plotHeight / this.options.data.left.data.length < this.options.minBandWidth) {
+            this.options.data.left.totalValueCount = this.options.data.left.data.reduce(function (a, b) {
+              if (typeof b.valueCount === 'undefined') {
+                return a + 1;
+              }
+
+              return a + b.valueCount;
+            }, 0);
+
+            if (this.plotHeight / this.options.data.left.totalValueCount < this.options.minBandWidth) {
               this.brushNeeded = true;
               this.plotWidth -= this.options.brushHeight;
             }
@@ -8453,10 +8505,42 @@ var WebsyChart = /*#__PURE__*/function () {
 
           var bottomDomain = this.createDomain('bottom');
           var bottomBrushDomain = this.createDomain('bottom', true);
-          this.bottomAxis = d3["scale".concat(this.options.data.bottom.scale || 'Band')]().domain(bottomDomain).range([0, this.plotWidth]);
+          var bottomRange = [0, this.plotWidth];
+          this.customBottomRange = [];
+
+          if (this.options.allowUnevenBands === true) {
+            if (this.options.data.bottom.data && this.options.data.bottom.data[0] && this.options.data.bottom.data[0].valueCount && this.options.data.bottom.scale === 'Ordinal') {
+              var acc = 0;
+              this.customBottomRange = [0].concat(_toConsumableArray(this.options.data.bottom.data.map(function (d) {
+                acc += d.valueCount;
+                return _this47.plotWidth / _this47.options.data.bottom.totalValueCount * acc;
+              })));
+            }
+          }
+
+          this.options.data.bottom.step = this.plotWidth / this.options.data.bottom.totalValueCount;
+          this.options.data.bottom.bandWidth = this.options.data.bottom.step;
+
+          if (this.options.data.bottom.padding) {
+            this.totalPadding = this.plotWidth * this.options.data.bottom.padding;
+            var rangeLength = bottomDomain.length;
+
+            if (this.customBottomRange.length > 0) {
+              rangeLength = this.customBottomRange.length;
+            }
+
+            this.bandPadding = this.totalPadding / rangeLength / 2;
+            this.options.data.bottom.bandWidth = (this.plotWidth - this.totalPadding) / this.options.data.bottom.totalValueCount;
+          }
+
+          if (this.options.grouping === 'grouped' && this.options.data.series.length > 1) {
+            this.options.data.bottom.bandWidth = this.options.data.bottom.bandWidth - this.options.groupPadding * 2;
+          }
+
+          this.bottomAxis = d3["scale".concat(this.options.data.bottom.scale || 'Band')]().domain(bottomDomain).range(bottomRange);
 
           if (!this.brushInitialized) {
-            this.bottomBrushAxis = d3["scale".concat(this.options.data.bottom.scale || 'Band')]().domain(bottomBrushDomain).range([0, this.plotWidth]);
+            this.bottomBrushAxis = d3["scale".concat(this.options.data.bottom.scale || 'Band')]().domain(bottomBrushDomain).range(bottomRange);
           }
 
           if (this.bottomAxis.nice) {// this.bottomAxis.nice()
@@ -8575,6 +8659,12 @@ var WebsyChart = /*#__PURE__*/function () {
             if (this.options.data.bottom.rotate) {
               this.bottomAxisLayer.selectAll('text').attr('transform', "rotate(".concat(this.options.data.bottom && this.options.data.bottom.rotate || 0, ")")).style('text-anchor', "".concat((this.options.data.bottom && this.options.data.bottom.rotate || 0) === 0 ? 'middle' : 'end')).style('transform-origin', (this.options.data.bottom && this.options.data.bottom.rotate || 0) === 0 ? '0 0' : "0 ".concat(this.options.data.bottom && this.options.data.bottom.fontSize || this.options.fontSize, "px"));
             }
+
+            if (this.customBottomRange.length > 0) {
+              this.bottomAxisLayer.selectAll('g').attr('transform', function (d, i) {
+                return "translate(".concat(_this47.customBottomRange[i] + (_this47.customBottomRange[i + 1] - _this47.customBottomRange[i]) / 2, ", 0)");
+              });
+            }
           } // Configure the left axis
 
 
@@ -8692,6 +8782,8 @@ var WebsyChart = /*#__PURE__*/function () {
 
         _this48.renderedKeys[series.key] = series.type;
       });
+      this.refLineLayer.selectAll('.reference-line').remove();
+      this.refLineLayer.selectAll('.reference-line-label').remove();
 
       if (this.options.refLines && this.options.refLines.length > 0) {
         this.options.refLines.forEach(function (l) {
@@ -8707,20 +8799,20 @@ var WebsyChart = /*#__PURE__*/function () {
       /* global d3 series index */
       var drawArea = function drawArea(xAxis, yAxis, curveStyle) {
         return d3.area().x(function (d) {
-          return _this49[xAxis](_this49.parseX(d.x.value));
+          return _this49["".concat(xAxis, "Axis")](_this49.parseX(d.x.value));
         }).y0(function (d) {
-          return _this49[yAxis](0);
+          return _this49["".concat(yAxis, "Axis")](0);
         }).y1(function (d) {
-          return _this49[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
+          return _this49["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
         }).curve(d3[curveStyle || _this49.options.curveStyle]);
       };
 
-      var xAxis = 'bottomAxis';
-      var yAxis = series.axis === 'secondary' ? 'rightAxis' : 'leftAxis';
+      var xAxis = 'bottom';
+      var yAxis = series.axis === 'secondary' ? 'right' : 'left';
 
-      if (this.options.orienation === 'horizontal') {
-        xAxis = series.axis === 'secondary' ? 'rightAxis' : 'leftAxis';
-        yAxis = 'bottomAxis';
+      if (this.options.orientation === 'horizontal') {
+        xAxis = series.axis === 'secondary' ? 'right' : 'left';
+        yAxis = 'bottom';
       }
 
       var areas = this.areaLayer.selectAll(".area_".concat(series.key)).data([series.data]); // Exit
@@ -8738,8 +8830,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
       areas.enter().append('path').attr('d', function (d) {
         return drawArea(xAxis, yAxis, series.curveStyle)(d);
-      }).attr('class', "area_".concat(series.key)).attr('id', "area_".concat(series.key)) // .attr('transform', 'translate('+ (that.bandWidth/2) +',0)')
-      // .style('stroke-width', series.lineWidth || this.options.lineWidth)
+      }).attr('class', "area_".concat(series.key)).attr('id', "area_".concat(series.key)).attr('transform', 'translate(' + (this.options.data[xAxis].scale === 'Time' ? 0 : this.options.data["".concat(xAxis, "Axis")].bandWidth / 2) + ',0)') // .style('stroke-width', series.lineWidth || this.options.lineWidth)
       .attr('fill', series.color) // .style('fill-opacity', 0)
       .attr('stroke', 'transparent') // .transition(this.transition)
       .style('fill-opacity', series.opacity || 0.5);
@@ -8765,14 +8856,14 @@ var WebsyChart = /*#__PURE__*/function () {
 
 
       function getBarHeight(d, i, heightBounds, yAxis, xAxis) {
-        var barWidth = this["".concat(xAxis, "Axis")].bandwidth();
-        var groupedBarWidth = (barWidth - 10) / this.options.data.series.length;
         var output;
 
         if (this.options.orientation === 'horizontal') {
-          output = barWidth;
+          output = this.options.data[xAxis.replace('Brush', '')].bandWidth;
         } else {
-          if (!getBarX.call(this, d, i, xAxis)) {
+          var x = getBarX.call(this, d, i, xAxis);
+
+          if (typeof x === 'undefined' || x === null) {
             return null;
           }
 
@@ -8787,24 +8878,20 @@ var WebsyChart = /*#__PURE__*/function () {
       }
 
       function getBarWidth(d, i, xAxis) {
-        var barWidth = this["".concat(xAxis, "Axis")].bandwidth();
-        var groupedBarWidth = (barWidth - (xAxis.indexOf('Brush') === -1 ? 10 : 2)) / this.options.data.series.length;
         var output;
 
         if (this.options.orientation === 'horizontal') {
-          var width = this["".concat(yAxis, "Axis")](d.y.value);
+          var width = this["".concat(yAxis, "Axis")](0) - this["".concat(yAxis, "Axis")](Math.abs(d.y.value));
           acummulativeY[d.y.index] += width;
-          output = Math.max(1, width);
+          output = width;
         } else {
-          if (!getBarX.call(this, d, i, xAxis)) {
+          var x = getBarX.call(this, d, i, xAxis);
+
+          if (typeof x === 'undefined' || x === null) {
             return null;
           }
 
-          if (this.options.grouping === 'grouped') {
-            output = Math.max(1, groupedBarWidth);
-          } else {
-            output = Math.max(1, barWidth);
-          }
+          output = Math.max(1, this.options.data[xAxis.replace('Brush', '')].bandWidth);
         }
 
         if (isNaN(output)) {
@@ -8815,23 +8902,59 @@ var WebsyChart = /*#__PURE__*/function () {
       }
 
       function getBarX(d, i, xAxis) {
-        var barWidth = this["".concat(xAxis, "Axis")].bandwidth();
-        var groupedBarWidth = (barWidth - (xAxis.indexOf('Brush') === -1 ? 10 : 2)) / this.options.data.series.length;
+        // let barWidth = this.plotWidth / this.options.data[xAxis.replace('Brush', '')].totalValueCount  
+        // if (this.options.data[xAxis.replace('Brush', '')].padding) {
+        //   barWidth = barWidth - (barWidth * this.options.data[xAxis.replace('Brush', '')].padding)
+        // } 
+        // let groupedBarWidth = (barWidth - (xAxis.indexOf('Brush') === -1 ? 10 : 2)) / this.options.data[xAxis.replace('Brush', '')].totalValueCount
         var output;
 
         if (this.options.orientation === 'horizontal') {
           if (this.options.grouping === 'stacked') {
-            output = this["".concat(yAxis, "Axis")](d.y.accumulative);
+            var h = getBarWidth.call(this, d, i, xAxis);
+            var adjustment = 0;
+
+            if (d.y.accumulative && d.y.accumulative !== 0) {
+              adjustment = this["".concat(yAxis, "Axis")](d.y.accumulative || 0);
+            }
+
+            output = this["".concat(yAxis, "Axis")](0) + adjustment * (d.y.value < 0 ? 1 : 0) + h * (d.y.value < 0 ? 1 : 0);
           } else {
-            output = 0;
+            var _h = getBarWidth.call(this, d, i, xAxis);
+
+            output = this["".concat(yAxis, "Axis")](0) + _h * (d.y.value < 0 ? 1 : 0);
           }
         } else {
-          var adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this["".concat(xAxis, "Axis")].bandwidth() / 2;
+          // let adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this.options.data[xAxis.replace('Brush', '')].bandWidth / 2
+          var _adjustment = this.customBottomRange[i] + i * this.options.data[xAxis.replace('Brush', '')].bandWidth;
 
           if (this.options.grouping === 'grouped') {
-            var barAdjustment = groupedBarWidth * index + (xAxis.indexOf('Brush') === -1 ? 5 : 1); // + (index > 0 ? 4 : 0)
+            var xIndex = 0;
+
+            if (this.processedX[d.x.value]) {
+              xIndex = Math.max(0, this.processedX[d.x.value].indexOf(d.y.tooltipLabel));
+            }
+
+            var barAdjustment = this.options.data[xAxis.replace('Brush', '')].bandWidth * xIndex + xIndex * this.options.groupPadding * 2 + this.options.groupPadding + (xAxis.indexOf('Brush') === -1 ? this.bandPadding : 1); // let barAdjustment = 
+            //   (this.options.data[xAxis.replace('Brush', '')].step * xIndex) +
+            //   this.options.groupPadding
+            //   // (xAxis.indexOf('Brush') === -1 ? this.bandPadding : 1)
+
+            if (this.customBottomRange.length > 0) {
+              output = this.customBottomRange[this[xAxis.replace('Brush', '') + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment;
+            } else {
+              output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + barAdjustment;
+            }
+
+            if (!this.processedX[d.x.value]) {
+              this.processedX[d.x.value] = [];
+            }
 
-            output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + barAdjustment;
+            if (this.processedX[d.x.value].indexOf(d.y.tooltipLabel) === -1) {
+              this.processedX[d.x.value].push(d.y.tooltipLabel);
+            }
+
+            console.log(d.x.value, d.y.tooltipLabel, xIndex, i, barAdjustment, output);
           } else {
             // output = this[`${xAxis}Axis`](this.parseX(d.x.value)) + (i * barWidth) + adjustment
             output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)); //  + (i * barWidth)
@@ -8846,15 +8969,15 @@ var WebsyChart = /*#__PURE__*/function () {
       }
 
       function getBarY(d, i, heightBounds, yAxis, xAxis) {
-        var barWidth = this["".concat(xAxis, "Axis")].bandwidth();
-        var groupedBarWidth = (barWidth - 10) / this.options.data.series.length;
+        // let barWidth = this[`${xAxis}Axis`].bandwidth()
+        // let groupedBarWidth = (barWidth - 10) / this.options.data.series.length
         var output;
 
         if (this.options.orientation === 'horizontal') {
           if (this.options.grouping !== 'grouped') {
             output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value));
           } else {
-            output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + (d.y.index || i) * barWidth;
+            output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + (d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth;
           }
         } else {
           if (this.options.grouping === 'stacked') {
@@ -8874,7 +8997,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
       bars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
       bars.attr('width', function (d, i) {
-        return getBarWidth.call(_this50, d, i, xAxis);
+        return Math.abs(getBarWidth.call(_this50, d, i, xAxis));
       }).attr('height', function (d, i) {
         return getBarHeight.call(_this50, d, i, _this50.plotHeight, yAxis, xAxis);
       }).attr('x', function (d, i) {
@@ -8886,7 +9009,7 @@ var WebsyChart = /*#__PURE__*/function () {
         return d.y.color || d.color || series.color;
       });
       bars.enter().append('rect').attr('width', function (d, i) {
-        return getBarWidth.call(_this50, d, i, xAxis);
+        return Math.abs(getBarWidth.call(_this50, d, i, xAxis));
       }).attr('height', function (d, i) {
         return getBarHeight.call(_this50, d, i, _this50.plotHeight, yAxis, xAxis);
       }).attr('x', function (d, i) {
@@ -8904,7 +9027,7 @@ var WebsyChart = /*#__PURE__*/function () {
         this.brushBarsInitialized[series.key] = true;
         brushBars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
         brushBars.attr('width', function (d, i) {
-          return getBarWidth.call(_this50, d, i, "".concat(xAxis, "Brush"));
+          return Math.abs(getBarWidth.call(_this50, d, i, "".concat(xAxis, "Brush")));
         }).attr('height', function (d, i) {
           return getBarHeight.call(_this50, d, i, _this50.options.brushHeight, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
         }).attr('x', function (d, i) {
@@ -8916,7 +9039,7 @@ var WebsyChart = /*#__PURE__*/function () {
           return d.y.color || d.color || series.color;
         });
         brushBars.enter().append('rect').attr('width', function (d, i) {
-          return getBarWidth.call(_this50, d, i, "".concat(xAxis, "Brush"));
+          return Math.abs(getBarWidth.call(_this50, d, i, "".concat(xAxis, "Brush")));
         }).attr('height', function (d, i) {
           return getBarHeight.call(_this50, d, i, _this50.options.brushHeight, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
         }).attr('x', function (d, i) {
@@ -9036,7 +9159,7 @@ var WebsyChart = /*#__PURE__*/function () {
             return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4;
           }
         } else {
-          return this[xAxis](this.parseX(d.x.value)) + this[xAxis].bandwidth() / 2;
+          return this[xAxis](this.parseX(d.x.value)) + this.options.data[xAxis.replace('Axis', '')].bandWidth / 2;
         }
       }
 
@@ -9044,7 +9167,7 @@ var WebsyChart = /*#__PURE__*/function () {
         var labelPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inside';
 
         if (this.options.orientation === 'horizontal') {
-          return this[xAxis](this.parseX(d.x.value)) + this[xAxis].bandwidth() / 2;
+          return this[xAxis](this.parseX(d.x.value)) + this.options.data[xAxis.replace('Axis', '')].bandWidth / 2;
         } else {
           if (this.options.grouping === 'stacked') {
             return this[yAxis](d.y.accumulative) + this[yAxis](d.y.value) / (labelPosition === 'inside' ? 2 : 1);
@@ -9062,17 +9185,26 @@ var WebsyChart = /*#__PURE__*/function () {
       /* global series index d3 */
       var drawLine = function drawLine(xAxis, yAxis, curveStyle) {
         return d3.line().x(function (d) {
-          var adjustment = _this52.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : _this52["".concat(xAxis, "Axis")].bandwidth() / 2;
-          return _this52["".concat(xAxis, "Axis")](_this52.parseX(d.x.value)) + adjustment;
+          if (_this52.options.orientation === 'horizontal') {
+            return _this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
+          } else {
+            var adjustment = _this52.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : _this52["".concat(xAxis, "Axis")].bandwidth() / 2;
+            return _this52["".concat(xAxis, "Axis")](_this52.parseX(d.x.value)) + adjustment;
+          }
         }).y(function (d) {
-          return _this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
+          if (_this52.options.orientation === 'horizontal') {
+            var adjustment = _this52.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : _this52["".concat(xAxis, "Axis")].bandwidth() / 2;
+            return _this52["".concat(xAxis, "Axis")](_this52.parseX(d.x.value)) + adjustment;
+          } else {
+            return _this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
+          }
         }).curve(d3[curveStyle || _this52.options.curveStyle]);
       };
 
       var xAxis = 'bottom';
       var yAxis = series.axis === 'secondary' ? 'right' : 'left';
 
-      if (this.options.orienation === 'horizontal') {
+      if (this.options.orientation === 'horizontal') {
         xAxis = series.axis === 'secondary' ? 'right' : 'left';
         yAxis = 'bottom';
       }
@@ -9080,7 +9212,7 @@ var WebsyChart = /*#__PURE__*/function () {
       var xBrushAxis = 'bottomBrush';
       var yBrushAxis = 'leftBrush';
 
-      if (this.options.orienation === 'horizontal') {
+      if (this.options.orientation === 'horizontal') {
         xBrushAxis = 'leftBrush';
         yBrushAxis = 'bottomBrush';
       }
@@ -9147,8 +9279,6 @@ var WebsyChart = /*#__PURE__*/function () {
         length = this.plotHeight;
       }
 
-      this.refLineLayer.selectAll('.reference-line').remove();
-      this.refLineLayer.selectAll('.reference-line-label').remove();
       this.refLineLayer.append('line').attr("".concat(yAttr, "1"), this["".concat(yAxis, "Axis")](data.value)).attr("".concat(yAttr, "2"), this["".concat(yAxis, "Axis")](data.value)).attr("".concat(xAttr, "2"), length).attr('class', "reference-line").style('stroke', data.color).style('stroke-width', "".concat(data.lineWidth, "px")).style('stroke-dasharray', data.lineStyle);
 
       if (data.label && data.label !== '') {
@@ -9178,7 +9308,7 @@ var WebsyChart = /*#__PURE__*/function () {
       var xAxis = 'bottom';
       var yAxis = series.axis === 'secondary' ? 'right' : 'left';
 
-      if (this.options.orienation === 'horizontal') {
+      if (this.options.orientation === 'horizontal') {
         xAxis = series.axis === 'secondary' ? 'right' : 'left';
         yAxis = 'bottom';
       }
@@ -9190,8 +9320,13 @@ var WebsyChart = /*#__PURE__*/function () {
       symbols.attr('d', function (d) {
         return drawSymbol(d.y.size || series.symbolSize)(d);
       }).transition(this.transition).attr('fill', series.fillSymbols ? series.color : 'white').attr('stroke', series.color).attr('transform', function (d) {
-        var adjustment = _this53.options.data[xAxis].scale === 'Time' ? 0 : _this53["".concat(xAxis, "Axis")].bandwidth() / 2;
-        return "translate(".concat(_this53["".concat(xAxis, "Axis")](_this53.parseX(d.x.value)) + adjustment, ", ").concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        var adjustment = _this53.options.data[xAxis].scale === 'Time' || _this53.options.data[xAxis].scale === 'Linear' ? 0 : _this53["".concat(xAxis, "Axis")].bandwidth() / 2;
+
+        if (_this53.options.orientation === 'horizontal') {
+          return "translate(".concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(_this53["".concat(xAxis, "Axis")](_this53.parseX(d.x.value)) + adjustment, ")");
+        } else {
+          return "translate(".concat(_this53["".concat(xAxis, "Axis")](_this53.parseX(d.x.value)) + adjustment, ", ").concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        }
       }); // Enter
 
       symbols.enter().append('path').attr('d', function (d) {
@@ -9200,8 +9335,13 @@ var WebsyChart = /*#__PURE__*/function () {
       .attr('fill', series.fillSymbols ? series.color : 'white').attr('stroke', series.color).attr('class', function (d) {
         return "symbol symbol_".concat(series.key);
       }).attr('transform', function (d) {
-        var adjustment = _this53.options.data[xAxis].scale === 'Time' ? 0 : _this53["".concat(xAxis, "Axis")].bandwidth() / 2;
-        return "translate(".concat(_this53["".concat(xAxis, "Axis")](_this53.parseX(d.x.value)) + adjustment, ", ").concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        var adjustment = _this53.options.data[xAxis].scale === 'Time' || _this53.options.data[xAxis].scale === 'Linear' ? 0 : _this53["".concat(xAxis, "Axis")].bandwidth() / 2;
+
+        if (_this53.options.orientation === 'horizontal') {
+          return "translate(".concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(_this53["".concat(xAxis, "Axis")](_this53.parseX(d.x.value)) + adjustment, ")");
+        } else {
+          return "translate(".concat(_this53["".concat(xAxis, "Axis")](_this53.parseX(d.x.value)) + adjustment, ", ").concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        }
       });
     }
   }, {
@@ -9296,17 +9436,23 @@ var WebsyChart = /*#__PURE__*/function () {
 
       if (el) {
         el.classList.remove('has-error');
-      } // const chartEl = document.getElementById(`${this.elementId}_chartContainer`)
-      // chartEl.classList.remove('hidden')
+      }
 
+      if (this.svg) {
+        this.svg.classed('hidden', false);
+      }
 
-      this.svg.classed('hidden', false);
       var containerEl = document.getElementById("".concat(this.elementId, "_errorContainer"));
 
       if (containerEl) {
         containerEl.classList.remove('active');
       }
     }
+  }, {
+    key: "hideLoading",
+    value: function hideLoading() {
+      this.loadingDialog.hide();
+    }
   }, {
     key: "showError",
     value: function showError(options) {
@@ -9315,10 +9461,13 @@ var WebsyChart = /*#__PURE__*/function () {
       if (el) {
         el.classList.add('has-error');
       } // const chartEl = document.getElementById(`${this.elementId}_chartContainer`)
-      // chartEl.classList.add('hidden')    
+      // chartEl.classList.add('hidden') 
 
 
-      this.svg.classed('hidden', true);
+      if (this.svg) {
+        this.svg.classed('hidden', true);
+      }
+
       var containerEl = document.getElementById("".concat(this.elementId, "_errorContainer"));
 
       if (containerEl) {
@@ -9341,6 +9490,11 @@ var WebsyChart = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "showLoading",
+    value: function showLoading(options) {
+      this.loadingDialog.show(options);
+    }
   }, {
     key: "data",
     set: function set(d) {