@websy/websy-designs 1.4.37 → 1.4.38

package/dist/websy-designs.debug.js

@@ -7083,6 +7083,18 @@ class WebsyChart {
           .attr('id', `${this.elementId}_legend`)
           .attr('class', 'websy-chart-legend')
         this.legend = new WebsyDesigns.Legend(`${this.elementId}_legend`, {})
+        this.errorContainer = d3.select(el).append('div')
+          .attr('id', `${this.elementId}_errorContainer`)
+          .attr('class', 'websy-vis-error-container')
+          .html(`          
+            <div>
+              <div id="${this.elementId}_errorTitle"></div>
+              <div id="${this.elementId}_errorMessage"></div>
+            </div>
+          `)
+        this.loadingContainer = d3.select(el).append('div')
+          .attr('id', `${this.elementId}_loadingContainer`)
+        this.loadingDialog = new WebsyDesigns.LoadingDialog(`${this.elementId}_loadingContainer`)
         this.prep()
         // el.innerHTML += `
         //   <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
@@ -8097,9 +8109,10 @@ function getBarWidth (d, i, xAxis) {
   let groupedBarWidth = (barWidth - (xAxis.indexOf('Brush') === -1 ? 10 : 2)) / this.options.data.series.length
   let output
   if (this.options.orientation === 'horizontal') {
-    let width = this[`${yAxis}Axis`](d.y.value)
+    // let width = this[`${yAxis}Axis`](d.y.value)
+    let width = (this[`${yAxis}Axis`](0)) - this[`${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)) {
@@ -8123,10 +8136,16 @@ function getBarX (d, i, xAxis) {
   let output
   if (this.options.orientation === 'horizontal') {
     if (this.options.grouping === 'stacked') {      
-      output = this[`${yAxis}Axis`](d.y.accumulative)
+      let h = getBarWidth.call(this, d, i, xAxis)
+      let adjustment = 0
+      if (d.y.accumulative && d.y.accumulative !== 0) {
+        adjustment = this[`${yAxis}Axis`](d.y.accumulative || 0)
+      }
+      output = this[`${yAxis}Axis`](0) + (adjustment * (d.y.value < 0 ? 1 : 0)) + (h * (d.y.value < 0 ? 1 : 0))
     }
     else {
-      output = 0
+      let h = getBarWidth.call(this, d, i, xAxis)
+      output = (this[`${yAxis}Axis`](0)) + (h * (d.y.value < 0 ? 1 : 0))
     }
   }
   else {
@@ -8178,7 +8197,7 @@ bars
   .remove()
 
 bars
-  .attr('width', (d, i) => getBarWidth.call(this, d, i, xAxis))
+  .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, xAxis)))
   .attr('height', (d, i) => getBarHeight.call(this, d, i, this.plotHeight, yAxis, xAxis))
   .attr('x', (d, i) => getBarX.call(this, d, i, xAxis))  
   .attr('y', (d, i) => getBarY.call(this, d, i, this.plotHeight, yAxis, xAxis))
@@ -8188,7 +8207,7 @@ bars
 bars
   .enter()
   .append('rect')
-  .attr('width', (d, i) => getBarWidth.call(this, d, i, xAxis))
+  .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, xAxis)))
   .attr('height', (d, i) => getBarHeight.call(this, d, i, this.plotHeight, yAxis, xAxis))
   .attr('x', (d, i) => getBarX.call(this, d, i, xAxis))  
   .attr('y', (d, i) => getBarY.call(this, d, i, this.plotHeight, yAxis, xAxis))
@@ -8207,7 +8226,7 @@ if (!this.brushBarsInitialized[series.key]) {
     .remove()
 
   brushBars
-    .attr('width', (d, i) => getBarWidth.call(this, d, i, `${xAxis}Brush`))
+    .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${xAxis}Brush`)))
     .attr('height', (d, i) => getBarHeight.call(this, d, i, this.options.brushHeight, `${yAxis}Brush`, `${xAxis}Brush`))
     .attr('x', (d, i) => getBarX.call(this, d, i, `${xAxis}Brush`))  
     .attr('y', (d, i) => getBarY.call(this, d, i, this.options.brushHeight, `${yAxis}Brush`, `${xAxis}Brush`))
@@ -8217,7 +8236,7 @@ if (!this.brushBarsInitialized[series.key]) {
   brushBars
     .enter()
     .append('rect')
-    .attr('width', (d, i) => getBarWidth.call(this, d, i, `${xAxis}Brush`))
+    .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${xAxis}Brush`)))
     .attr('height', (d, i) => getBarHeight.call(this, d, i, this.options.brushHeight, `${yAxis}Brush`, `${xAxis}Brush`))
     .attr('x', (d, i) => getBarX.call(this, d, i, `${xAxis}Brush`))  
     .attr('y', (d, i) => getBarY.call(this, d, i, this.options.brushHeight, `${yAxis}Brush`, `${xAxis}Brush`))
@@ -8667,6 +8686,9 @@ if (el) {
       containerEl.classList.remove('active')
     }
   }
+  hideLoading () {
+    this.loadingDialog.hide()
+  }
   showError (options) {
     const el = document.getElementById(`${this.elementId}`)
     if (el) {
@@ -8692,6 +8714,9 @@ if (el) {
       } 
     }
   }
+  showLoading (options) {
+    this.loadingDialog.show(options)
+  }
 }
 
 class WebsyLegend {

package/dist/websy-designs.js

@@ -7794,6 +7794,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>
@@ -8792,9 +8795,10 @@ var WebsyChart = /*#__PURE__*/function () {
         var output;
 
         if (this.options.orientation === 'horizontal') {
-          var width = this["".concat(yAxis, "Axis")](d.y.value);
+          // let width = this[`${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)) {
             return null;
@@ -8821,12 +8825,21 @@ var WebsyChart = /*#__PURE__*/function () {
 
         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;
+          var _adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this["".concat(xAxis, "Axis")].bandwidth() / 2;
 
           if (this.options.grouping === 'grouped') {
             var barAdjustment = groupedBarWidth * index + (xAxis.indexOf('Brush') === -1 ? 5 : 1); // + (index > 0 ? 4 : 0)
@@ -8874,7 +8887,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 +8899,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 +8917,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 +8929,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) {
@@ -9307,6 +9320,11 @@ var WebsyChart = /*#__PURE__*/function () {
         containerEl.classList.remove('active');
       }
     }
+  }, {
+    key: "hideLoading",
+    value: function hideLoading() {
+      this.loadingDialog.hide();
+    }
   }, {
     key: "showError",
     value: function showError(options) {
@@ -9341,6 +9359,11 @@ var WebsyChart = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "showLoading",
+    value: function showLoading(options) {
+      this.loadingDialog.show(options);
+    }
   }, {
     key: "data",
     set: function set(d) {