@websy/websy-designs 1.4.34 → 1.4.35

package/dist/websy-designs.debug.js

@@ -6977,6 +6977,7 @@ class WebsyChart {
     this.renderedKeys = {}
     this.brushedDomain = []
     this.brushBarsInitialized = {}
+    this.brushLinesInitialized = {}
     if (!elementId) {
       console.log('No element Id provided for Websy Chart')		
       return
@@ -7111,7 +7112,7 @@ class WebsyChart {
     this.labelLayer.selectAll('*').remove()
     this.symbolLayer.selectAll('*').remove()
   }
-  createDomain (side) {
+  createDomain (side, forBrush = false) {
     let domain = []
     /* global d3 side domain:writable forBrush */ 
 // if we have a brushed domain we use that
@@ -7271,7 +7272,7 @@ else {
       tooltipHTML += tooltipData.map(d => `
         <li>
           <i style='background-color: ${d.color};'></i>
-          ${d.tooltipLabel || ''}<span> - ${d.tooltipValue || d.value}</span>
+          ${d.tooltipLabel || ''}<span>: ${d.tooltipValue || d.value}</span>
         </li>
       `).join('')
       tooltipHTML += `</ul>`
@@ -7602,6 +7603,7 @@ else {
     // Define the plot size
     this.plotWidth = this.width - this.options.margin.legendLeft - this.options.margin.legendRight - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight
     this.plotHeight = this.height - this.options.margin.legendTop - this.options.margin.legendBottom - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom - this.options.margin.axisTop
+    this.brushNeeded = false
     if (this.options.orientation === 'vertical') {
       if (this.options.maxBandWidth) {
         this.plotWidth = Math.min(this.plotWidth, (this.options.data.bottom.data || []).length * this.options.maxBandWidth)
@@ -7762,6 +7764,7 @@ else {
     // this.brushArea.selectAll('*').remove()
     if (this.brushNeeded) {
       if (!this.brushInitialized) {
+        this.brushLayer.style('visibility', 'visible')
         this.brushInitialized = true
         this.brushLayer
           .select('.brush')
@@ -7770,7 +7773,9 @@ else {
       }
     }    
     else {
-      this.brushLayer.selectAll().remove()
+      this.brushLayer.style('visibility', 'hidden')
+      // this.brushLayer.selectAll().remove()
+      this.brushArea.selectAll('*').remove()
     }
     if (this.options.margin.axisBottom > 0) {
       let timeFormatPattern = ''
@@ -8359,7 +8364,7 @@ const drawLine = (xAxis, yAxis, curveStyle) => {
   return d3
     .line()
     .x(d => {
-      let adjustment = this.options.data[xAxis].scale === 'Time' ? 0 : this[`${xAxis}Axis`].bandwidth() / 2
+      let adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this[`${xAxis}Axis`].bandwidth() / 2
       return this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment
     })
     .y(d => {
@@ -8373,8 +8378,16 @@ if (this.options.orienation === 'horizontal') {
   xAxis = series.axis === 'secondary' ? 'right' : 'left'
   yAxis = 'bottom'
 }
+let xBrushAxis = 'bottomBrush'
+let yBrushAxis = 'leftBrush'
+if (this.options.orienation === 'horizontal') {  
+  xBrushAxis = 'leftBrush'
+  yBrushAxis = 'bottomBrush'
+}
 let lines = this.lineLayer.selectAll(`.line_${series.key}`)
   .data([series.data])
+let brushLines = this.brushArea.selectAll(`.line_${series.key}`)
+  .data([series.data])
 // Exit
 lines.exit()
   .transition(this.transition)
@@ -8401,6 +8414,35 @@ lines.enter().append('path')
   // .transition(this.transition)
   .style('stroke-opacity', 1)
 
+if (!this.brushLinesInitialized[series.key]) {
+  this.brushLinesInitialized[series.key] = true
+  // Exit
+  brushLines.exit()
+    .transition(this.transition)
+    .style('stroke-opacity', 1e-6)
+    .remove()
+  // Update
+  brushLines
+    .style('stroke-width', 1)
+    // .attr('id', `line_${series.key}`)
+    // .attr('transform', 'translate('+ (that.bandWidth/2) +',0)')
+    .attr('stroke', series.color)
+    .attr('fill', 'transparent')
+    .transition(this.transition)
+    .attr('d', d => drawLine(xBrushAxis, yBrushAxis, series.curveStyle)(d))
+  // Enter
+  brushLines.enter().append('path')
+    .attr('d', d => drawLine(xBrushAxis, yBrushAxis, series.curveStyle)(d))
+    .attr('class', `line_${series.key}`)
+    .attr('id', `line_${series.key}`)
+    // .attr('transform', 'translate('+ (that.bandWidth/2) +',0)')
+    .style('stroke-width', 1)
+    .attr('stroke', series.color)
+    .attr('fill', 'transparent')
+    // .transition(this.transition)
+    .style('stroke-opacity', 1)
+}
+
 if (series.showArea === true) {
   this.renderarea(series, index)
 }

package/dist/websy-designs.js

@@ -7672,6 +7672,7 @@ var WebsyChart = /*#__PURE__*/function () {
     this.renderedKeys = {};
     this.brushedDomain = [];
     this.brushBarsInitialized = {};
+    this.brushLinesInitialized = {};
 
     if (!elementId) {
       console.log('No element Id provided for Websy Chart');
@@ -7821,6 +7822,7 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "createDomain",
     value: function createDomain(side) {
+      var forBrush = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var domain = [];
       /* global d3 side domain:writable forBrush */
       // if we have a brushed domain we use that
@@ -8019,7 +8021,7 @@ var WebsyChart = /*#__PURE__*/function () {
         });
         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.color, ";'></i>\n          ").concat(d.tooltipLabel || '', "<span>: ").concat(d.tooltipValue || d.value, "</span>\n        </li>\n      ");
         }).join('');
         tooltipHTML += "</ul>";
         var posOptions = {
@@ -8397,6 +8399,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
           this.plotWidth = this.width - this.options.margin.legendLeft - this.options.margin.legendRight - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight;
           this.plotHeight = this.height - this.options.margin.legendTop - this.options.margin.legendBottom - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom - this.options.margin.axisTop;
+          this.brushNeeded = false;
 
           if (this.options.orientation === 'vertical') {
             if (this.options.maxBandWidth) {
@@ -8488,11 +8491,14 @@ var WebsyChart = /*#__PURE__*/function () {
 
           if (this.brushNeeded) {
             if (!this.brushInitialized) {
+              this.brushLayer.style('visibility', 'visible');
               this.brushInitialized = true;
               this.brushLayer.select('.brush').call(this.brush).call(this.brush.move, [0, brushEnd]);
             }
           } else {
-            this.brushLayer.selectAll().remove();
+            this.brushLayer.style('visibility', 'hidden'); // this.brushLayer.selectAll().remove()
+
+            this.brushArea.selectAll('*').remove();
           }
 
           if (this.options.margin.axisBottom > 0) {
@@ -9046,7 +9052,7 @@ 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].scale === 'Time' ? 0 : _this52["".concat(xAxis, "Axis")].bandwidth() / 2;
+          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);
@@ -9061,7 +9067,16 @@ var WebsyChart = /*#__PURE__*/function () {
         yAxis = 'bottom';
       }
 
-      var lines = this.lineLayer.selectAll(".line_".concat(series.key)).data([series.data]); // Exit
+      var xBrushAxis = 'bottomBrush';
+      var yBrushAxis = 'leftBrush';
+
+      if (this.options.orienation === 'horizontal') {
+        xBrushAxis = 'leftBrush';
+        yBrushAxis = 'bottomBrush';
+      }
+
+      var lines = this.lineLayer.selectAll(".line_".concat(series.key)).data([series.data]);
+      var brushLines = this.brushArea.selectAll(".line_".concat(series.key)).data([series.data]); // Exit
 
       lines.exit().transition(this.transition).style('stroke-opacity', 1e-6).remove(); // Update
 
@@ -9077,6 +9092,24 @@ var WebsyChart = /*#__PURE__*/function () {
       .style('stroke-width', series.lineWidth || this.options.lineWidth).attr('stroke', series.color).attr('fill', 'transparent') // .transition(this.transition)
       .style('stroke-opacity', 1);
 
+      if (!this.brushLinesInitialized[series.key]) {
+        this.brushLinesInitialized[series.key] = true; // Exit
+
+        brushLines.exit().transition(this.transition).style('stroke-opacity', 1e-6).remove(); // Update
+
+        brushLines.style('stroke-width', 1) // .attr('id', `line_${series.key}`)
+        // .attr('transform', 'translate('+ (that.bandWidth/2) +',0)')
+        .attr('stroke', series.color).attr('fill', 'transparent').transition(this.transition).attr('d', function (d) {
+          return drawLine(xBrushAxis, yBrushAxis, series.curveStyle)(d);
+        }); // Enter
+
+        brushLines.enter().append('path').attr('d', function (d) {
+          return drawLine(xBrushAxis, yBrushAxis, series.curveStyle)(d);
+        }).attr('class', "line_".concat(series.key)).attr('id', "line_".concat(series.key)) // .attr('transform', 'translate('+ (that.bandWidth/2) +',0)')
+        .style('stroke-width', 1).attr('stroke', series.color).attr('fill', 'transparent') // .transition(this.transition)
+        .style('stroke-opacity', 1);
+      }
+
       if (series.showArea === true) {
         this.renderarea(series, index);
       }