@websy/websy-designs 1.4.25 → 1.4.27

package/dist/websy-designs.debug.js

@@ -2839,7 +2839,8 @@ class WebsyNavigationMenu {
   }
   handleSearch (searchText) {
     const el = document.getElementById(this.elementId)
-    let lowestItems = this.flatItems.filter(d => d.level === this.maxLevel)
+    // let lowestItems = this.flatItems.filter(d => d.level === this.maxLevel)
+    let lowestItems = this.flatItems.filter(d => !d.hasChildren)
     let visibleItems = lowestItems
     let defaultMethod = 'remove'
     if (searchText && searchText.length > 1) {
@@ -7379,7 +7380,7 @@ else {
         firstBottom = Math.max(0, firstBottomWidth)
       }      
     }
-    this.options.margin.axisLeft = Math.max(longestLeftBounds.width, firstBottomWidth)
+    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.axisBottom = longestBottomBounds.height + 10
     this.options.margin.axisTop = 0       
@@ -7635,7 +7636,6 @@ else {
       if (this.rightAxis.nice) {
         this.rightAxis.nice()
       }
-      console.log('axis right', this.options.margin.axisRight)
       if (this.options.margin.axisRight > 0 && (this.options.data.right.min !== 0 || this.options.data.right.max !== 0)) {
         this.rightAxisLayer.call(
           d3.axisRight(this.rightAxis)
@@ -7891,7 +7891,12 @@ if (this.options.showLabels === true || series.showLabels === true) {
     .attr('x', d => getLabelX.call(this, d, series.labelPosition))  
     .attr('y', d => getLabelY.call(this, d, series.labelPosition))   
     .attr('class', `label_${series.key}`)
-    .attr('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
+    .attr('fill', d => {
+      if (this.options.grouping === 'stacked' && d.y.value === 0) {
+        return 'transparent'
+      }
+      return this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color)
+    })
     .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)    
     .transition(this.transition)
     .text(d => d.y.label || d.y.value)
@@ -7929,7 +7934,12 @@ if (this.options.showLabels === true || series.showLabels === true) {
     .attr('y', d => getLabelY.call(this, d, series.labelPosition))    
     .attr('alignment-baseline', 'central')
     .attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle')
-    .attr('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
+    .attr('fill', d => {
+      if (this.options.grouping === 'stacked' && d.y.value === 0) {
+        return 'transparent'
+      }
+      return this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color)
+    })
     .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)    
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
@@ -8047,18 +8057,24 @@ if (series.showSymbols === true) {
     /* global d3 data */
 let xAxis = 'bottom'
 let yAxis = 'left'  
+let yAttr = 'y'
+let xAttr = 'x'
 let that = this
+let length = this.plotWidth
 if (this.options.orientation === 'horizontal') {
   xAxis = 'left'
   yAxis = 'bottom'
+  yAttr = 'x'
+  xAttr = 'y'
+  length = this.plotHeight
 }
 this.refLineLayer.selectAll('.reference-line').remove()
 this.refLineLayer.selectAll('.reference-line-label').remove()
 this.refLineLayer
   .append('line')
-  .attr('y1', this[`${yAxis}Axis`](data.value))
-  .attr('y2', this[`${yAxis}Axis`](data.value))
-  .attr('x2', this.plotWidth)
+  .attr(`${yAttr}1`, this[`${yAxis}Axis`](data.value))
+  .attr(`${yAttr}2`, this[`${yAxis}Axis`](data.value))
+  .attr(`${xAttr}2`, length)
   .attr('class', `reference-line`)
   .style('stroke', data.color)
   .style('stroke-width', `${data.lineWidth}px`)
@@ -8068,7 +8084,7 @@ if (data.label && data.label !== '') {
   this.refLineLayer
     .append('text')
     .attr('class', `reference-line-label`)
-    .attr('x', this.plotWidth)
+    .attr('x', length)
     .attr('y', this[`${yAxis}Axis`](data.value))
     .attr('font-size', this.options.fontSize)
     .attr('fill', data.color)
@@ -8629,8 +8645,7 @@ class WebsyChartTooltip {
     }
     if (position.onTop === true) {
       classes.push('top')
-    }
-    console.log(classes.join(' '))
+    }    
     let fO = this.tooltipLayer
       .selectAll('foreignObject')
       .attr('width', `${position.width}px`)

package/dist/websy-designs.js

@@ -3036,9 +3036,10 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
     value: function handleSearch(searchText) {
       var _this19 = this;
 
-      var el = document.getElementById(this.elementId);
+      var el = document.getElementById(this.elementId); // let lowestItems = this.flatItems.filter(d => d.level === this.maxLevel)
+
       var lowestItems = this.flatItems.filter(function (d) {
-        return d.level === _this19.maxLevel;
+        return !d.hasChildren;
       });
       var visibleItems = lowestItems;
       var defaultMethod = 'remove';
@@ -8180,7 +8181,8 @@ var WebsyChart = /*#__PURE__*/function () {
             }
           }
 
-          this.options.margin.axisLeft = Math.max(longestLeftBounds.width, firstBottomWidth);
+          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.axisBottom = longestBottomBounds.height + 10;
           this.options.margin.axisTop = 0; // adjust axis margins based on title options
@@ -8385,8 +8387,6 @@ var WebsyChart = /*#__PURE__*/function () {
               this.rightAxis.nice();
             }
 
-            console.log('axis right', this.options.margin.axisRight);
-
             if (this.options.margin.axisRight > 0 && (this.options.data.right.min !== 0 || this.options.data.right.max !== 0)) {
               this.rightAxisLayer.call(d3.axisRight(this.rightAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
                 if (_this47.options.data.right.formatter) {
@@ -8616,6 +8616,10 @@ var WebsyChart = /*#__PURE__*/function () {
         }).attr('y', function (d) {
           return getLabelY.call(_this49, d, series.labelPosition);
         }).attr('class', "label_".concat(series.key)).attr('fill', function (d) {
+          if (_this49.options.grouping === 'stacked' && d.y.value === 0) {
+            return 'transparent';
+          }
+
           return _this49.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
         }).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).transition(this.transition).text(function (d) {
           return d.y.label || d.y.value;
@@ -8645,6 +8649,10 @@ var WebsyChart = /*#__PURE__*/function () {
         }).attr('y', function (d) {
           return getLabelY.call(_this49, d, series.labelPosition);
         }).attr('alignment-baseline', 'central').attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle').attr('fill', function (d) {
+          if (_this49.options.grouping === 'stacked' && d.y.value === 0) {
+            return 'transparent';
+          }
+
           return _this49.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
         }).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).text(function (d) {
           return d.y.label || d.y.value;
@@ -8752,20 +8760,26 @@ var WebsyChart = /*#__PURE__*/function () {
       /* global d3 data */
       var xAxis = 'bottom';
       var yAxis = 'left';
+      var yAttr = 'y';
+      var xAttr = 'x';
       var that = this;
+      var length = this.plotWidth;
 
       if (this.options.orientation === 'horizontal') {
         xAxis = 'left';
         yAxis = 'bottom';
+        yAttr = 'x';
+        xAttr = 'y';
+        length = this.plotHeight;
       }
 
       this.refLineLayer.selectAll('.reference-line').remove();
       this.refLineLayer.selectAll('.reference-line-label').remove();
-      this.refLineLayer.append('line').attr('y1', this["".concat(yAxis, "Axis")](data.value)).attr('y2', this["".concat(yAxis, "Axis")](data.value)).attr('x2', this.plotWidth).attr('class', "reference-line").style('stroke', data.color).style('stroke-width', "".concat(data.lineWidth, "px")).style('stroke-dasharray', data.lineStyle);
+      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 !== '') {
         // show the text on the line
-        this.refLineLayer.append('text').attr('class', "reference-line-label").attr('x', this.plotWidth).attr('y', this["".concat(yAxis, "Axis")](data.value)).attr('font-size', this.options.fontSize).attr('fill', data.color).text(data.label).attr('text-anchor', 'end').attr('alignment-baseline', 'text-after-edge');
+        this.refLineLayer.append('text').attr('class', "reference-line-label").attr('x', length).attr('y', this["".concat(yAxis, "Axis")](data.value)).attr('font-size', this.options.fontSize).attr('fill', data.color).text(data.label).attr('text-anchor', 'end').attr('alignment-baseline', 'text-after-edge');
       }
     }
   }, {
@@ -9371,7 +9385,6 @@ var WebsyChartTooltip = /*#__PURE__*/function () {
         classes.push('top');
       }
 
-      console.log(classes.join(' '));
       var fO = this.tooltipLayer.selectAll('foreignObject').attr('width', "".concat(position.width, "px")) // .attr('height', `${position.height}px`)
       // .attr('y', `0px`)      
       .attr('class', "websy-chart-tooltip ".concat(classes.join(' ')));