@websy/websy-designs 1.7.7 → 1.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/websy-designs-es6.debug.js +69 -47
  2. package/dist/websy-designs-es6.js +60 -45
  3. package/dist/websy-designs-es6.min.js +1 -1
  4. package/dist/websy-designs.debug.js +69 -47
  5. package/dist/websy-designs.js +60 -45
  6. package/dist/websy-designs.min.js +1 -1
  7. package/package.json +1 -1
package/dist/websy-designs-es6.debug.js CHANGED
@@ -7048,32 +7048,43 @@ class WebsyChart {
7048
7048
  }
7049
7049
  let that = this
7050
7050
  this.brushed = function (event) {
7051
- console.log('brushing', event)
7052
7051
  let newX = (that.options.margin.left + that.options.margin.axisLeft) + (1 - (event.selection[0] / ((that.plotWidth) / (that.widthForCalc + that.totalBandPadding))))
7052
+ let newY = that.options.margin.top + that.options.margin.axisTop
7053
+ if (that.options.orientation === 'horizontal') {
7054
+ newX = that.options.brushHeight + that.options.margin.left + that.options.margin.axisLeft
7055
+ newY = (that.options.margin.top + that.options.margin.axisTop) + (1 - (event.selection[0] / ((that.plotHeight) / (that.widthForCalc + that.totalBandPadding))))
7056
+ }
7053
7057
  if (that.plotArea) {
7054
- that.plotArea.attr('transform', `translate(${newX}, ${that.options.margin.top + that.options.margin.axisTop})`)
7058
+ that.plotArea.attr('transform', `translate(${newX}, ${newY})`)
7055
7059
  }
7056
7060
  if (that.areaLayer) {
7057
- that.areaLayer.attr('transform', `translate(${newX}, ${that.options.margin.top + that.options.margin.axisTop})`)
7061
+ that.areaLayer.attr('transform', `translate(${newX}, ${newY})`)
7058
7062
  }
7059
7063
  if (that.lineLayer) {
7060
- that.lineLayer.attr('transform', `translate(${newX}, ${that.options.margin.top + that.options.margin.axisTop})`)
7064
+ that.lineLayer.attr('transform', `translate(${newX}, ${newY})`)
7061
7065
  }
7062
7066
  if (that.barLayer) {
7063
- that.barLayer.attr('transform', `translate(${newX}, ${that.options.margin.top + that.options.margin.axisTop})`)
7067
+ that.barLayer.attr('transform', `translate(${newX}, ${newY})`)
7064
7068
  }
7065
7069
  if (that.labelLayer) {
7066
- that.labelLayer.attr('transform', `translate(${newX}, ${that.options.margin.top + that.options.margin.axisTop})`)
7070
+ that.labelLayer.attr('transform', `translate(${newX}, ${newY})`)
7067
7071
  }
7068
7072
  if (that.symbolLayer) {
7069
- that.symbolLayer.attr('transform', `translate(${newX}, ${that.options.margin.top + that.options.margin.axisTop})`)
7073
+ that.symbolLayer.attr('transform', `translate(${newX}, ${newY})`)
7070
7074
  }
7071
7075
  if (that.refLineLayer) {
7072
- that.refLineLayer.attr('transform', `translate(${newX}, ${that.options.margin.top + that.options.margin.axisTop})`)
7073
- }
7074
- if (that.bottomAxisLayer) {
7075
- that.bottomAxisLayer.attr('transform', `translate(${newX}, ${that.options.margin.top + that.options.margin.axisTop + that.plotHeight})`)
7076
+ that.refLineLayer.attr('transform', `translate(${newX}, ${newY})`)
7077
+ }
7078
+ if (that.options.orientation === 'horizontal') {
7079
+ if (that.leftAxisLayer) {
7080
+ that.leftAxisLayer.attr('transform', `translate(${that.options.brushHeight + that.options.margin.left + that.options.margin.axisLeft}, ${newY})`)
7081
+ }
7076
7082
  }
7083
+ else {
7084
+ if (that.bottomAxisLayer) {
7085
+ that.bottomAxisLayer.attr('transform', `translate(${newX}, ${newY + that.plotHeight})`)
7086
+ }
7087
+ }
7077
7088
  // that.brushedDomain = []
7078
7089
  // let xAxis = 'bottom'
7079
7090
  // let xAxisCaps = 'Bottom'
@@ -7441,7 +7452,7 @@ this.clip = this.defs.append('clipPath').attr('id', `${this.elementId}_clip`).ap
7441
7452
  this.xAxisClip = this.defs.append('clipPath').attr('id', `${this.elementId}_xAxisClip`).append('rect')
7442
7453
  this.yAxisClip = this.defs.append('clipPath').attr('id', `${this.elementId}_yAxisClip`).append('rect')
7443
7454
  this.brushClip = this.defs.append('clipPath').attr('id', `${this.elementId}_brushclip`).append('rect')
7444
- this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer') // .attr('clip-path', `url(#${this.elementId}_yAxisClip)`).append('g')
7455
+ this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer').attr('clip-path', `url(#${this.elementId}_yAxisClip)`).append('g')
7445
7456
  this.rightAxisLayer = this.svg.append('g').attr('class', 'right-axis-layer')
7446
7457
  this.bottomAxisLayer = this.svg.append('g').attr('class', 'bottom-axis-layer').attr('clip-path', `url(#${this.elementId}_xAxisClip)`).append('g')
7447
7458
  this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer')
@@ -7820,48 +7831,53 @@ else {
7820
7831
  // }
7821
7832
  // }
7822
7833
  // Translate the layers
7834
+ const leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight + 5 : 0
7823
7835
  this.leftAxisLayer
7824
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7836
+ .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7825
7837
  .style('font-size', (this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize)
7826
7838
  this.rightAxisLayer
7827
- .attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7839
+ .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7828
7840
  .style('font-size', (this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize)
7829
7841
  this.bottomAxisLayer
7830
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
7842
+ .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
7831
7843
  .style('font-size', (this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize)
7832
7844
  this.leftAxisLabel
7833
- .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
7845
+ .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
7834
7846
  this.rightAxisLabel
7835
- .attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight}, ${this.options.margin.top + this.options.margin.axisTop})`)
7847
+ .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight}, ${this.options.margin.top + this.options.margin.axisTop})`)
7836
7848
  this.bottomAxisLabel
7837
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
7849
+ .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
7838
7850
  this.plotArea
7839
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7851
+ .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7840
7852
  this.areaLayer
7841
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7853
+ .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7842
7854
  this.lineLayer
7843
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7855
+ .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7844
7856
  this.barLayer
7845
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7857
+ .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7846
7858
  this.labelLayer
7847
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7859
+ .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7848
7860
  this.symbolLayer
7849
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7861
+ .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7850
7862
  this.refLineLayer
7851
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7863
+ .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7852
7864
  this.trackingLineLayer
7853
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7865
+ .attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
7854
7866
  this.clip
7855
- .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, 0)`)
7867
+ .attr('transform', `translate(${(leftBrushAdjustment - 5) + this.options.margin.left + this.options.margin.axisLeft}, 0)`)
7856
7868
  .attr('width', this.plotWidth)
7857
7869
  .attr('height', this.plotHeight + this.options.margin.top + this.options.margin.axisTop)
7858
7870
  if (this.options.orientation === 'horizontal') {
7859
7871
  this.brushLayer
7860
7872
  .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
7861
7873
  this.yAxisClip
7862
- .attr('transform', `translate(${this.options.brushHeight + this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
7863
- .attr('width', this.options.margin.axisLeft - this.options.brushHeight)
7864
- .attr('height', this.plotHeight)
7874
+ .attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
7875
+ .attr('width', this.options.margin.axisLeft + 10)
7876
+ .attr('height', this.plotHeight)
7877
+ this.xAxisClip
7878
+ .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
7879
+ .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
7880
+ .attr('height', longestBottomBounds.height + 10)
7865
7881
  this.brushClip
7866
7882
  .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
7867
7883
  .attr('height', this.plotHeight)
@@ -7870,6 +7886,10 @@ else {
7870
7886
  else {
7871
7887
  this.brushLayer
7872
7888
  .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)
7889
+ this.yAxisClip
7890
+ .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop - 10})`)
7891
+ .attr('width', this.options.margin.axisLeft + 10)
7892
+ .attr('height', this.plotHeight + 20)
7873
7893
  this.xAxisClip
7874
7894
  .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
7875
7895
  .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
@@ -8386,7 +8406,7 @@ function getBarHeight (d, i, yAxis, xAxis) {
8386
8406
  output = Math.max(1, this.options.data[xAxis].bandWidth - (xAxis.indexOf('Brush') !== -1 ? 2 : this.options.groupPadding * 2))
8387
8407
  }
8388
8408
  else {
8389
- let x = getBarX.call(this, d, i, xAxis)
8409
+ let x = getBarX.call(this, d, i, yAxis, xAxis)
8390
8410
  if (typeof x === 'undefined' || x === null) {
8391
8411
  return null
8392
8412
  }
@@ -8397,15 +8417,16 @@ function getBarHeight (d, i, yAxis, xAxis) {
8397
8417
  }
8398
8418
  return output
8399
8419
  }
8400
- function getBarWidth (d, i, xAxis) {
8420
+ function getBarWidth (d, i, yAxis, xAxis) {
8401
8421
  let output
8402
8422
  if (this.options.orientation === 'horizontal') {
8403
8423
  // output = this[`${yAxis}Axis`](Math.abs(d.y.value))
8404
- output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
8424
+ output = this[`${yAxis}Axis`](Math.abs(d.y.value))
8425
+ // output = (this[`${yAxis}Axis`](0)) + this[`${yAxis}Axis`](Math.abs(d.y.value))
8405
8426
  // output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
8406
8427
  }
8407
8428
  else {
8408
- let x = getBarX.call(this, d, i, xAxis)
8429
+ let x = getBarX.call(this, d, i, yAxis, xAxis)
8409
8430
  if (typeof x === 'undefined' || x === null) {
8410
8431
  return null
8411
8432
  }
@@ -8416,7 +8437,7 @@ function getBarWidth (d, i, xAxis) {
8416
8437
  }
8417
8438
  return output
8418
8439
  }
8419
- function getBarX (d, i, xAxis) {
8440
+ function getBarX (d, i, yAxis, xAxis) {
8420
8441
  let output
8421
8442
  if (this.options.orientation === 'horizontal') {
8422
8443
  // if (this.options.grouping === 'stacked') {
@@ -8435,12 +8456,13 @@ function getBarX (d, i, xAxis) {
8435
8456
  // output = (this[`${yAxis}Axis`](0)) + (h * (d.y.value < 0 ? 1 : 0))
8436
8457
  // }
8437
8458
  if (this.options.grouping === 'stacked') { // no support for stacks yet
8438
- let accH = getBarWidth.call(this, {x: d.x, y: { value: d.y.accumulative }}, i, xAxis)
8439
- let h = getBarWidth.call(this, d, i, xAxis)
8440
- output = (this[`${yAxis}Axis`](0)) + ((accH + h) * (d.y.accumulative > 0 ? 0 : 1))
8459
+ let accH = getBarWidth.call(this, {x: d.x, y: { value: d.y.accumulative }}, i, yAxis, xAxis)
8460
+ let h = getBarWidth.call(this, d, i, yAxis, xAxis)
8461
+ // output = (this[`${yAxis}Axis`](0)) + ((accH + h) * (d.y.accumulative > 0 ? 0 : 1))
8462
+ output = (this[`${yAxis}Axis`](0)) + ((accH) * (d.y.accumulative > 0 ? 1 : 0))
8441
8463
  }
8442
8464
  else {
8443
- let h = getBarWidth.call(this, d, i, xAxis)
8465
+ let h = getBarWidth.call(this, d, i, yAxis, xAxis)
8444
8466
  output = (this[`${yAxis}Axis`](0)) + (h * (d.y.value > 0 ? 0 : 1))
8445
8467
  }
8446
8468
  }
@@ -8530,9 +8552,9 @@ bars
8530
8552
  .remove()
8531
8553
 
8532
8554
  bars
8533
- .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, xAxis)))
8555
+ .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, yAxis, xAxis)))
8534
8556
  .attr('height', (d, i) => getBarHeight.call(this, d, i, yAxis, xAxis))
8535
- .attr('x', (d, i) => getBarX.call(this, d, i, xAxis))
8557
+ .attr('x', (d, i) => getBarX.call(this, d, i, yAxis, xAxis))
8536
8558
  .attr('y', (d, i) => getBarY.call(this, d, i, yAxis, xAxis))
8537
8559
  // .transition(this.transition)
8538
8560
  .attr('fill', d => d.y.color || d.color || series.color)
@@ -8540,9 +8562,9 @@ bars
8540
8562
  bars
8541
8563
  .enter()
8542
8564
  .append('rect')
8543
- .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, xAxis)))
8565
+ .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, yAxis, xAxis)))
8544
8566
  .attr('height', (d, i) => getBarHeight.call(this, d, i, yAxis, xAxis))
8545
- .attr('x', (d, i) => getBarX.call(this, d, i, xAxis))
8567
+ .attr('x', (d, i) => getBarX.call(this, d, i, yAxis, xAxis))
8546
8568
  .attr('y', (d, i) => getBarY.call(this, d, i, yAxis, xAxis))
8547
8569
  // .transition(this.transition)
8548
8570
  .attr('fill', d => d.y.color || d.color || series.color)
@@ -8559,9 +8581,9 @@ if (!this.brushBarsInitialized[series.key]) {
8559
8581
  .remove()
8560
8582
 
8561
8583
  brushBars
8562
- .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${xAxis}Brush`)))
8584
+ .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`)))
8563
8585
  .attr('height', (d, i) => getBarHeight.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
8564
- .attr('x', (d, i) => getBarX.call(this, d, i, `${xAxis}Brush`))
8586
+ .attr('x', (d, i) => getBarX.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
8565
8587
  .attr('y', (d, i) => getBarY.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
8566
8588
  // .transition(this.transition)
8567
8589
  .attr('fill', d => d.y.color || d.color || series.color)
@@ -8569,9 +8591,9 @@ if (!this.brushBarsInitialized[series.key]) {
8569
8591
  brushBars
8570
8592
  .enter()
8571
8593
  .append('rect')
8572
- .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${xAxis}Brush`)))
8594
+ .attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`)))
8573
8595
  .attr('height', (d, i) => getBarHeight.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
8574
- .attr('x', (d, i) => getBarX.call(this, d, i, `${xAxis}Brush`))
8596
+ .attr('x', (d, i) => getBarX.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
8575
8597
  .attr('y', (d, i) => getBarY.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
8576
8598
  // .transition(this.transition)
8577
8599
  .attr('fill', d => d.y.color || d.color || series.color)
package/dist/websy-designs-es6.js CHANGED
@@ -7777,39 +7777,50 @@ var WebsyChart = /*#__PURE__*/function () {
7777
7777
  var that = this;
7778
7778
 
7779
7779
  this.brushed = function (event) {
7780
- console.log('brushing', event);
7781
7780
  var newX = that.options.margin.left + that.options.margin.axisLeft + (1 - event.selection[0] / (that.plotWidth / (that.widthForCalc + that.totalBandPadding)));
7781
+ var newY = that.options.margin.top + that.options.margin.axisTop;
7782
+
7783
+ if (that.options.orientation === 'horizontal') {
7784
+ newX = that.options.brushHeight + that.options.margin.left + that.options.margin.axisLeft;
7785
+ newY = that.options.margin.top + that.options.margin.axisTop + (1 - event.selection[0] / (that.plotHeight / (that.widthForCalc + that.totalBandPadding)));
7786
+ }
7782
7787
 
7783
7788
  if (that.plotArea) {
7784
- that.plotArea.attr('transform', "translate(".concat(newX, ", ").concat(that.options.margin.top + that.options.margin.axisTop, ")"));
7789
+ that.plotArea.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
7785
7790
  }
7786
7791
 
7787
7792
  if (that.areaLayer) {
7788
- that.areaLayer.attr('transform', "translate(".concat(newX, ", ").concat(that.options.margin.top + that.options.margin.axisTop, ")"));
7793
+ that.areaLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
7789
7794
  }
7790
7795
 
7791
7796
  if (that.lineLayer) {
7792
- that.lineLayer.attr('transform', "translate(".concat(newX, ", ").concat(that.options.margin.top + that.options.margin.axisTop, ")"));
7797
+ that.lineLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
7793
7798
  }
7794
7799
 
7795
7800
  if (that.barLayer) {
7796
- that.barLayer.attr('transform', "translate(".concat(newX, ", ").concat(that.options.margin.top + that.options.margin.axisTop, ")"));
7801
+ that.barLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
7797
7802
  }
7798
7803
 
7799
7804
  if (that.labelLayer) {
7800
- that.labelLayer.attr('transform', "translate(".concat(newX, ", ").concat(that.options.margin.top + that.options.margin.axisTop, ")"));
7805
+ that.labelLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
7801
7806
  }
7802
7807
 
7803
7808
  if (that.symbolLayer) {
7804
- that.symbolLayer.attr('transform', "translate(".concat(newX, ", ").concat(that.options.margin.top + that.options.margin.axisTop, ")"));
7809
+ that.symbolLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
7805
7810
  }
7806
7811
 
7807
7812
  if (that.refLineLayer) {
7808
- that.refLineLayer.attr('transform', "translate(".concat(newX, ", ").concat(that.options.margin.top + that.options.margin.axisTop, ")"));
7813
+ that.refLineLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
7809
7814
  }
7810
7815
 
7811
- if (that.bottomAxisLayer) {
7812
- that.bottomAxisLayer.attr('transform', "translate(".concat(newX, ", ").concat(that.options.margin.top + that.options.margin.axisTop + that.plotHeight, ")"));
7816
+ if (that.options.orientation === 'horizontal') {
7817
+ if (that.leftAxisLayer) {
7818
+ that.leftAxisLayer.attr('transform', "translate(".concat(that.options.brushHeight + that.options.margin.left + that.options.margin.axisLeft, ", ").concat(newY, ")"));
7819
+ }
7820
+ } else {
7821
+ if (that.bottomAxisLayer) {
7822
+ that.bottomAxisLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY + that.plotHeight, ")"));
7823
+ }
7813
7824
  } // that.brushedDomain = []
7814
7825
  // let xAxis = 'bottom'
7815
7826
  // let xAxisCaps = 'Bottom'
@@ -8213,8 +8224,7 @@ var WebsyChart = /*#__PURE__*/function () {
8213
8224
  this.xAxisClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_xAxisClip")).append('rect');
8214
8225
  this.yAxisClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_yAxisClip")).append('rect');
8215
8226
  this.brushClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_brushclip")).append('rect');
8216
- this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer'); // .attr('clip-path', `url(#${this.elementId}_yAxisClip)`).append('g')
8217
-
8227
+ this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer').attr('clip-path', "url(#".concat(this.elementId, "_yAxisClip)")).append('g');
8218
8228
  this.rightAxisLayer = this.svg.append('g').attr('class', 'right-axis-layer');
8219
8229
  this.bottomAxisLayer = this.svg.append('g').attr('class', 'bottom-axis-layer').attr('clip-path', "url(#".concat(this.elementId, "_xAxisClip)")).append('g');
8220
8230
  this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer');
@@ -8652,28 +8662,31 @@ var WebsyChart = /*#__PURE__*/function () {
8652
8662
  // Translate the layers
8653
8663
 
8654
8664
 
8655
- this.leftAxisLayer.attr('transform', "translate(".concat(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);
8656
- this.rightAxisLayer.attr('transform', "translate(".concat(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);
8657
- this.bottomAxisLayer.attr('transform', "translate(".concat(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);
8658
- this.leftAxisLabel.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8659
- this.rightAxisLabel.attr('transform', "translate(".concat(this.options.margin.left + this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8660
- this.bottomAxisLabel.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")"));
8661
- this.plotArea.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8662
- this.areaLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8663
- this.lineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8664
- this.barLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8665
- this.labelLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8666
- this.symbolLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8667
- this.refLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8668
- this.trackingLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8669
- this.clip.attr('transform', "translate(".concat(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);
8665
+ var leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight + 5 : 0;
8666
+ 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);
8667
+ 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);
8668
+ 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);
8669
+ this.leftAxisLabel.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8670
+ this.rightAxisLabel.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8671
+ this.bottomAxisLabel.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")"));
8672
+ this.plotArea.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8673
+ this.areaLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8674
+ this.lineLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8675
+ this.barLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8676
+ this.labelLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8677
+ this.symbolLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8678
+ this.refLineLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8679
+ this.trackingLineLayer.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8680
+ this.clip.attr('transform', "translate(".concat(leftBrushAdjustment - 5 + 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);
8670
8681
 
8671
8682
  if (this.options.orientation === 'horizontal') {
8672
8683
  this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8673
- this.yAxisClip.attr('transform', "translate(".concat(this.options.brushHeight + this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).attr('width', this.options.margin.axisLeft - this.options.brushHeight).attr('height', this.plotHeight);
8684
+ 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);
8685
+ 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);
8674
8686
  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);
8675
8687
  } else {
8676
8688
  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, ")"));
8689
+ 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);
8677
8690
  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);
8678
8691
  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);
8679
8692
  }
@@ -9154,7 +9167,7 @@ var WebsyChart = /*#__PURE__*/function () {
9154
9167
  if (this.options.orientation === 'horizontal') {
9155
9168
  output = Math.max(1, this.options.data[xAxis].bandWidth - (xAxis.indexOf('Brush') !== -1 ? 2 : this.options.groupPadding * 2));
9156
9169
  } else {
9157
- var x = getBarX.call(this, d, i, xAxis);
9170
+ var x = getBarX.call(this, d, i, yAxis, xAxis);
9158
9171
 
9159
9172
  if (typeof x === 'undefined' || x === null) {
9160
9173
  return null;
@@ -9170,14 +9183,15 @@ var WebsyChart = /*#__PURE__*/function () {
9170
9183
  return output;
9171
9184
  }
9172
9185
 
9173
- function getBarWidth(d, i, xAxis) {
9186
+ function getBarWidth(d, i, yAxis, xAxis) {
9174
9187
  var output;
9175
9188
 
9176
9189
  if (this.options.orientation === 'horizontal') {
9177
9190
  // output = this[`${yAxis}Axis`](Math.abs(d.y.value))
9178
- output = this["".concat(yAxis, "Axis")](0) - this["".concat(yAxis, "Axis")](Math.abs(d.y.value)); // output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
9191
+ output = this["".concat(yAxis, "Axis")](Math.abs(d.y.value)); // output = (this[`${yAxis}Axis`](0)) + this[`${yAxis}Axis`](Math.abs(d.y.value))
9192
+ // output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
9179
9193
  } else {
9180
- var x = getBarX.call(this, d, i, xAxis);
9194
+ var x = getBarX.call(this, d, i, yAxis, xAxis);
9181
9195
 
9182
9196
  if (typeof x === 'undefined' || x === null) {
9183
9197
  return null;
@@ -9193,7 +9207,7 @@ var WebsyChart = /*#__PURE__*/function () {
9193
9207
  return output;
9194
9208
  }
9195
9209
 
9196
- function getBarX(d, i, xAxis) {
9210
+ function getBarX(d, i, yAxis, xAxis) {
9197
9211
  var output;
9198
9212
 
9199
9213
  if (this.options.orientation === 'horizontal') {
@@ -9219,11 +9233,12 @@ var WebsyChart = /*#__PURE__*/function () {
9219
9233
  y: {
9220
9234
  value: d.y.accumulative
9221
9235
  }
9222
- }, i, xAxis);
9223
- var h = getBarWidth.call(this, d, i, xAxis);
9224
- output = this["".concat(yAxis, "Axis")](0) + (accH + h) * (d.y.accumulative > 0 ? 0 : 1);
9236
+ }, i, yAxis, xAxis);
9237
+ var h = getBarWidth.call(this, d, i, yAxis, xAxis); // output = (this[`${yAxis}Axis`](0)) + ((accH + h) * (d.y.accumulative > 0 ? 0 : 1))
9238
+
9239
+ output = this["".concat(yAxis, "Axis")](0) + accH * (d.y.accumulative > 0 ? 1 : 0);
9225
9240
  } else {
9226
- var _h = getBarWidth.call(this, d, i, xAxis);
9241
+ var _h = getBarWidth.call(this, d, i, yAxis, xAxis);
9227
9242
 
9228
9243
  output = this["".concat(yAxis, "Axis")](0) + _h * (d.y.value > 0 ? 0 : 1);
9229
9244
  }
@@ -9324,11 +9339,11 @@ var WebsyChart = /*#__PURE__*/function () {
9324
9339
 
9325
9340
  bars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
9326
9341
  bars.attr('width', function (d, i) {
9327
- return Math.abs(getBarWidth.call(_this50, d, i, xAxis));
9342
+ return Math.abs(getBarWidth.call(_this50, d, i, yAxis, xAxis));
9328
9343
  }).attr('height', function (d, i) {
9329
9344
  return getBarHeight.call(_this50, d, i, yAxis, xAxis);
9330
9345
  }).attr('x', function (d, i) {
9331
- return getBarX.call(_this50, d, i, xAxis);
9346
+ return getBarX.call(_this50, d, i, yAxis, xAxis);
9332
9347
  }).attr('y', function (d, i) {
9333
9348
  return getBarY.call(_this50, d, i, yAxis, xAxis);
9334
9349
  }) // .transition(this.transition)
@@ -9336,11 +9351,11 @@ var WebsyChart = /*#__PURE__*/function () {
9336
9351
  return d.y.color || d.color || series.color;
9337
9352
  });
9338
9353
  bars.enter().append('rect').attr('width', function (d, i) {
9339
- return Math.abs(getBarWidth.call(_this50, d, i, xAxis));
9354
+ return Math.abs(getBarWidth.call(_this50, d, i, yAxis, xAxis));
9340
9355
  }).attr('height', function (d, i) {
9341
9356
  return getBarHeight.call(_this50, d, i, yAxis, xAxis);
9342
9357
  }).attr('x', function (d, i) {
9343
- return getBarX.call(_this50, d, i, xAxis);
9358
+ return getBarX.call(_this50, d, i, yAxis, xAxis);
9344
9359
  }).attr('y', function (d, i) {
9345
9360
  return getBarY.call(_this50, d, i, yAxis, xAxis);
9346
9361
  }) // .transition(this.transition)
@@ -9354,11 +9369,11 @@ var WebsyChart = /*#__PURE__*/function () {
9354
9369
  this.brushBarsInitialized[series.key] = true;
9355
9370
  brushBars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
9356
9371
  brushBars.attr('width', function (d, i) {
9357
- return Math.abs(getBarWidth.call(_this50, d, i, "".concat(xAxis, "Brush")));
9372
+ return Math.abs(getBarWidth.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush")));
9358
9373
  }).attr('height', function (d, i) {
9359
9374
  return getBarHeight.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9360
9375
  }).attr('x', function (d, i) {
9361
- return getBarX.call(_this50, d, i, "".concat(xAxis, "Brush"));
9376
+ return getBarX.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9362
9377
  }).attr('y', function (d, i) {
9363
9378
  return getBarY.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9364
9379
  }) // .transition(this.transition)
@@ -9366,11 +9381,11 @@ var WebsyChart = /*#__PURE__*/function () {
9366
9381
  return d.y.color || d.color || series.color;
9367
9382
  });
9368
9383
  brushBars.enter().append('rect').attr('width', function (d, i) {
9369
- return Math.abs(getBarWidth.call(_this50, d, i, "".concat(xAxis, "Brush")));
9384
+ return Math.abs(getBarWidth.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush")));
9370
9385
  }).attr('height', function (d, i) {
9371
9386
  return getBarHeight.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9372
9387
  }).attr('x', function (d, i) {
9373
- return getBarX.call(_this50, d, i, "".concat(xAxis, "Brush"));
9388
+ return getBarX.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9374
9389
  }).attr('y', function (d, i) {
9375
9390
  return getBarY.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9376
9391
  }) // .transition(this.transition)