@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.
|
@@ -7463,32 +7463,43 @@ class WebsyChart {
|
|
|
7463
7463
|
}
|
|
7464
7464
|
let that = this
|
|
7465
7465
|
this.brushed = function (event) {
|
|
7466
|
-
console.log('brushing', event)
|
|
7467
7466
|
let newX = (that.options.margin.left + that.options.margin.axisLeft) + (1 - (event.selection[0] / ((that.plotWidth) / (that.widthForCalc + that.totalBandPadding))))
|
|
7467
|
+
let newY = that.options.margin.top + that.options.margin.axisTop
|
|
7468
|
+
if (that.options.orientation === 'horizontal') {
|
|
7469
|
+
newX = that.options.brushHeight + that.options.margin.left + that.options.margin.axisLeft
|
|
7470
|
+
newY = (that.options.margin.top + that.options.margin.axisTop) + (1 - (event.selection[0] / ((that.plotHeight) / (that.widthForCalc + that.totalBandPadding))))
|
|
7471
|
+
}
|
|
7468
7472
|
if (that.plotArea) {
|
|
7469
|
-
that.plotArea.attr('transform', `translate(${newX}, ${
|
|
7473
|
+
that.plotArea.attr('transform', `translate(${newX}, ${newY})`)
|
|
7470
7474
|
}
|
|
7471
7475
|
if (that.areaLayer) {
|
|
7472
|
-
that.areaLayer.attr('transform', `translate(${newX}, ${
|
|
7476
|
+
that.areaLayer.attr('transform', `translate(${newX}, ${newY})`)
|
|
7473
7477
|
}
|
|
7474
7478
|
if (that.lineLayer) {
|
|
7475
|
-
that.lineLayer.attr('transform', `translate(${newX}, ${
|
|
7479
|
+
that.lineLayer.attr('transform', `translate(${newX}, ${newY})`)
|
|
7476
7480
|
}
|
|
7477
7481
|
if (that.barLayer) {
|
|
7478
|
-
that.barLayer.attr('transform', `translate(${newX}, ${
|
|
7482
|
+
that.barLayer.attr('transform', `translate(${newX}, ${newY})`)
|
|
7479
7483
|
}
|
|
7480
7484
|
if (that.labelLayer) {
|
|
7481
|
-
that.labelLayer.attr('transform', `translate(${newX}, ${
|
|
7485
|
+
that.labelLayer.attr('transform', `translate(${newX}, ${newY})`)
|
|
7482
7486
|
}
|
|
7483
7487
|
if (that.symbolLayer) {
|
|
7484
|
-
that.symbolLayer.attr('transform', `translate(${newX}, ${
|
|
7488
|
+
that.symbolLayer.attr('transform', `translate(${newX}, ${newY})`)
|
|
7485
7489
|
}
|
|
7486
7490
|
if (that.refLineLayer) {
|
|
7487
|
-
that.refLineLayer.attr('transform', `translate(${newX}, ${
|
|
7488
|
-
}
|
|
7489
|
-
if (that.
|
|
7490
|
-
|
|
7491
|
+
that.refLineLayer.attr('transform', `translate(${newX}, ${newY})`)
|
|
7492
|
+
}
|
|
7493
|
+
if (that.options.orientation === 'horizontal') {
|
|
7494
|
+
if (that.leftAxisLayer) {
|
|
7495
|
+
that.leftAxisLayer.attr('transform', `translate(${that.options.brushHeight + that.options.margin.left + that.options.margin.axisLeft}, ${newY})`)
|
|
7496
|
+
}
|
|
7491
7497
|
}
|
|
7498
|
+
else {
|
|
7499
|
+
if (that.bottomAxisLayer) {
|
|
7500
|
+
that.bottomAxisLayer.attr('transform', `translate(${newX}, ${newY + that.plotHeight})`)
|
|
7501
|
+
}
|
|
7502
|
+
}
|
|
7492
7503
|
// that.brushedDomain = []
|
|
7493
7504
|
// let xAxis = 'bottom'
|
|
7494
7505
|
// let xAxisCaps = 'Bottom'
|
|
@@ -7856,7 +7867,7 @@ this.clip = this.defs.append('clipPath').attr('id', `${this.elementId}_clip`).ap
|
|
|
7856
7867
|
this.xAxisClip = this.defs.append('clipPath').attr('id', `${this.elementId}_xAxisClip`).append('rect')
|
|
7857
7868
|
this.yAxisClip = this.defs.append('clipPath').attr('id', `${this.elementId}_yAxisClip`).append('rect')
|
|
7858
7869
|
this.brushClip = this.defs.append('clipPath').attr('id', `${this.elementId}_brushclip`).append('rect')
|
|
7859
|
-
this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer')
|
|
7870
|
+
this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer').attr('clip-path', `url(#${this.elementId}_yAxisClip)`).append('g')
|
|
7860
7871
|
this.rightAxisLayer = this.svg.append('g').attr('class', 'right-axis-layer')
|
|
7861
7872
|
this.bottomAxisLayer = this.svg.append('g').attr('class', 'bottom-axis-layer').attr('clip-path', `url(#${this.elementId}_xAxisClip)`).append('g')
|
|
7862
7873
|
this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer')
|
|
@@ -8235,48 +8246,53 @@ else {
|
|
|
8235
8246
|
// }
|
|
8236
8247
|
// }
|
|
8237
8248
|
// Translate the layers
|
|
8249
|
+
const leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight + 5 : 0
|
|
8238
8250
|
this.leftAxisLayer
|
|
8239
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8251
|
+
.attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8240
8252
|
.style('font-size', (this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize)
|
|
8241
8253
|
this.rightAxisLayer
|
|
8242
|
-
.attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8254
|
+
.attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8243
8255
|
.style('font-size', (this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize)
|
|
8244
8256
|
this.bottomAxisLayer
|
|
8245
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
|
|
8257
|
+
.attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
|
|
8246
8258
|
.style('font-size', (this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize)
|
|
8247
8259
|
this.leftAxisLabel
|
|
8248
|
-
.attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8260
|
+
.attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8249
8261
|
this.rightAxisLabel
|
|
8250
|
-
.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})`)
|
|
8262
|
+
.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})`)
|
|
8251
8263
|
this.bottomAxisLabel
|
|
8252
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
|
|
8264
|
+
.attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
|
|
8253
8265
|
this.plotArea
|
|
8254
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8266
|
+
.attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8255
8267
|
this.areaLayer
|
|
8256
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8268
|
+
.attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8257
8269
|
this.lineLayer
|
|
8258
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8270
|
+
.attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8259
8271
|
this.barLayer
|
|
8260
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8272
|
+
.attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8261
8273
|
this.labelLayer
|
|
8262
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8274
|
+
.attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8263
8275
|
this.symbolLayer
|
|
8264
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8276
|
+
.attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8265
8277
|
this.refLineLayer
|
|
8266
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8278
|
+
.attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8267
8279
|
this.trackingLineLayer
|
|
8268
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8280
|
+
.attr('transform', `translate(${leftBrushAdjustment - 5 + this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8269
8281
|
this.clip
|
|
8270
|
-
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, 0)`)
|
|
8282
|
+
.attr('transform', `translate(${(leftBrushAdjustment - 5) + this.options.margin.left + this.options.margin.axisLeft}, 0)`)
|
|
8271
8283
|
.attr('width', this.plotWidth)
|
|
8272
8284
|
.attr('height', this.plotHeight + this.options.margin.top + this.options.margin.axisTop)
|
|
8273
8285
|
if (this.options.orientation === 'horizontal') {
|
|
8274
8286
|
this.brushLayer
|
|
8275
8287
|
.attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8276
8288
|
this.yAxisClip
|
|
8277
|
-
.attr('transform', `translate(${
|
|
8278
|
-
.attr('width', this.options.margin.axisLeft
|
|
8279
|
-
.attr('height', this.plotHeight)
|
|
8289
|
+
.attr('transform', `translate(${leftBrushAdjustment + this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8290
|
+
.attr('width', this.options.margin.axisLeft + 10)
|
|
8291
|
+
.attr('height', this.plotHeight)
|
|
8292
|
+
this.xAxisClip
|
|
8293
|
+
.attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
|
|
8294
|
+
.attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
|
|
8295
|
+
.attr('height', longestBottomBounds.height + 10)
|
|
8280
8296
|
this.brushClip
|
|
8281
8297
|
.attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
|
|
8282
8298
|
.attr('height', this.plotHeight)
|
|
@@ -8285,6 +8301,10 @@ else {
|
|
|
8285
8301
|
else {
|
|
8286
8302
|
this.brushLayer
|
|
8287
8303
|
.attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)
|
|
8304
|
+
this.yAxisClip
|
|
8305
|
+
.attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop - 10})`)
|
|
8306
|
+
.attr('width', this.options.margin.axisLeft + 10)
|
|
8307
|
+
.attr('height', this.plotHeight + 20)
|
|
8288
8308
|
this.xAxisClip
|
|
8289
8309
|
.attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
|
|
8290
8310
|
.attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
|
|
@@ -8801,7 +8821,7 @@ function getBarHeight (d, i, yAxis, xAxis) {
|
|
|
8801
8821
|
output = Math.max(1, this.options.data[xAxis].bandWidth - (xAxis.indexOf('Brush') !== -1 ? 2 : this.options.groupPadding * 2))
|
|
8802
8822
|
}
|
|
8803
8823
|
else {
|
|
8804
|
-
let x = getBarX.call(this, d, i, xAxis)
|
|
8824
|
+
let x = getBarX.call(this, d, i, yAxis, xAxis)
|
|
8805
8825
|
if (typeof x === 'undefined' || x === null) {
|
|
8806
8826
|
return null
|
|
8807
8827
|
}
|
|
@@ -8812,15 +8832,16 @@ function getBarHeight (d, i, yAxis, xAxis) {
|
|
|
8812
8832
|
}
|
|
8813
8833
|
return output
|
|
8814
8834
|
}
|
|
8815
|
-
function getBarWidth (d, i, xAxis) {
|
|
8835
|
+
function getBarWidth (d, i, yAxis, xAxis) {
|
|
8816
8836
|
let output
|
|
8817
8837
|
if (this.options.orientation === 'horizontal') {
|
|
8818
8838
|
// output = this[`${yAxis}Axis`](Math.abs(d.y.value))
|
|
8819
|
-
output =
|
|
8839
|
+
output = this[`${yAxis}Axis`](Math.abs(d.y.value))
|
|
8840
|
+
// output = (this[`${yAxis}Axis`](0)) + this[`${yAxis}Axis`](Math.abs(d.y.value))
|
|
8820
8841
|
// output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
|
|
8821
8842
|
}
|
|
8822
8843
|
else {
|
|
8823
|
-
let x = getBarX.call(this, d, i, xAxis)
|
|
8844
|
+
let x = getBarX.call(this, d, i, yAxis, xAxis)
|
|
8824
8845
|
if (typeof x === 'undefined' || x === null) {
|
|
8825
8846
|
return null
|
|
8826
8847
|
}
|
|
@@ -8831,7 +8852,7 @@ function getBarWidth (d, i, xAxis) {
|
|
|
8831
8852
|
}
|
|
8832
8853
|
return output
|
|
8833
8854
|
}
|
|
8834
|
-
function getBarX (d, i, xAxis) {
|
|
8855
|
+
function getBarX (d, i, yAxis, xAxis) {
|
|
8835
8856
|
let output
|
|
8836
8857
|
if (this.options.orientation === 'horizontal') {
|
|
8837
8858
|
// if (this.options.grouping === 'stacked') {
|
|
@@ -8850,12 +8871,13 @@ function getBarX (d, i, xAxis) {
|
|
|
8850
8871
|
// output = (this[`${yAxis}Axis`](0)) + (h * (d.y.value < 0 ? 1 : 0))
|
|
8851
8872
|
// }
|
|
8852
8873
|
if (this.options.grouping === 'stacked') { // no support for stacks yet
|
|
8853
|
-
let accH = getBarWidth.call(this, {x: d.x, y: { value: d.y.accumulative }}, i, xAxis)
|
|
8854
|
-
let h = getBarWidth.call(this, d, i, xAxis)
|
|
8855
|
-
output = (this[`${yAxis}Axis`](0)) + ((accH + h) * (d.y.accumulative > 0 ? 0 : 1))
|
|
8874
|
+
let accH = getBarWidth.call(this, {x: d.x, y: { value: d.y.accumulative }}, i, yAxis, xAxis)
|
|
8875
|
+
let h = getBarWidth.call(this, d, i, yAxis, xAxis)
|
|
8876
|
+
// output = (this[`${yAxis}Axis`](0)) + ((accH + h) * (d.y.accumulative > 0 ? 0 : 1))
|
|
8877
|
+
output = (this[`${yAxis}Axis`](0)) + ((accH) * (d.y.accumulative > 0 ? 1 : 0))
|
|
8856
8878
|
}
|
|
8857
8879
|
else {
|
|
8858
|
-
let h = getBarWidth.call(this, d, i, xAxis)
|
|
8880
|
+
let h = getBarWidth.call(this, d, i, yAxis, xAxis)
|
|
8859
8881
|
output = (this[`${yAxis}Axis`](0)) + (h * (d.y.value > 0 ? 0 : 1))
|
|
8860
8882
|
}
|
|
8861
8883
|
}
|
|
@@ -8945,9 +8967,9 @@ bars
|
|
|
8945
8967
|
.remove()
|
|
8946
8968
|
|
|
8947
8969
|
bars
|
|
8948
|
-
.attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, xAxis)))
|
|
8970
|
+
.attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, yAxis, xAxis)))
|
|
8949
8971
|
.attr('height', (d, i) => getBarHeight.call(this, d, i, yAxis, xAxis))
|
|
8950
|
-
.attr('x', (d, i) => getBarX.call(this, d, i, xAxis))
|
|
8972
|
+
.attr('x', (d, i) => getBarX.call(this, d, i, yAxis, xAxis))
|
|
8951
8973
|
.attr('y', (d, i) => getBarY.call(this, d, i, yAxis, xAxis))
|
|
8952
8974
|
// .transition(this.transition)
|
|
8953
8975
|
.attr('fill', d => d.y.color || d.color || series.color)
|
|
@@ -8955,9 +8977,9 @@ bars
|
|
|
8955
8977
|
bars
|
|
8956
8978
|
.enter()
|
|
8957
8979
|
.append('rect')
|
|
8958
|
-
.attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, xAxis)))
|
|
8980
|
+
.attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, yAxis, xAxis)))
|
|
8959
8981
|
.attr('height', (d, i) => getBarHeight.call(this, d, i, yAxis, xAxis))
|
|
8960
|
-
.attr('x', (d, i) => getBarX.call(this, d, i, xAxis))
|
|
8982
|
+
.attr('x', (d, i) => getBarX.call(this, d, i, yAxis, xAxis))
|
|
8961
8983
|
.attr('y', (d, i) => getBarY.call(this, d, i, yAxis, xAxis))
|
|
8962
8984
|
// .transition(this.transition)
|
|
8963
8985
|
.attr('fill', d => d.y.color || d.color || series.color)
|
|
@@ -8974,9 +8996,9 @@ if (!this.brushBarsInitialized[series.key]) {
|
|
|
8974
8996
|
.remove()
|
|
8975
8997
|
|
|
8976
8998
|
brushBars
|
|
8977
|
-
.attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${xAxis}Brush`)))
|
|
8999
|
+
.attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`)))
|
|
8978
9000
|
.attr('height', (d, i) => getBarHeight.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
|
|
8979
|
-
.attr('x', (d, i) => getBarX.call(this, d, i, `${xAxis}Brush`))
|
|
9001
|
+
.attr('x', (d, i) => getBarX.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
|
|
8980
9002
|
.attr('y', (d, i) => getBarY.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
|
|
8981
9003
|
// .transition(this.transition)
|
|
8982
9004
|
.attr('fill', d => d.y.color || d.color || series.color)
|
|
@@ -8984,9 +9006,9 @@ if (!this.brushBarsInitialized[series.key]) {
|
|
|
8984
9006
|
brushBars
|
|
8985
9007
|
.enter()
|
|
8986
9008
|
.append('rect')
|
|
8987
|
-
.attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${xAxis}Brush`)))
|
|
9009
|
+
.attr('width', (d, i) => Math.abs(getBarWidth.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`)))
|
|
8988
9010
|
.attr('height', (d, i) => getBarHeight.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
|
|
8989
|
-
.attr('x', (d, i) => getBarX.call(this, d, i, `${xAxis}Brush`))
|
|
9011
|
+
.attr('x', (d, i) => getBarX.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
|
|
8990
9012
|
.attr('y', (d, i) => getBarY.call(this, d, i, `${yAxis}Brush`, `${xAxis}Brush`))
|
|
8991
9013
|
// .transition(this.transition)
|
|
8992
9014
|
.attr('fill', d => d.y.color || d.color || series.color)
|
package/dist/websy-designs.js
CHANGED
|
@@ -8258,39 +8258,50 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
8258
8258
|
var that = this;
|
|
8259
8259
|
|
|
8260
8260
|
this.brushed = function (event) {
|
|
8261
|
-
console.log('brushing', event);
|
|
8262
8261
|
var newX = that.options.margin.left + that.options.margin.axisLeft + (1 - event.selection[0] / (that.plotWidth / (that.widthForCalc + that.totalBandPadding)));
|
|
8262
|
+
var newY = that.options.margin.top + that.options.margin.axisTop;
|
|
8263
|
+
|
|
8264
|
+
if (that.options.orientation === 'horizontal') {
|
|
8265
|
+
newX = that.options.brushHeight + that.options.margin.left + that.options.margin.axisLeft;
|
|
8266
|
+
newY = that.options.margin.top + that.options.margin.axisTop + (1 - event.selection[0] / (that.plotHeight / (that.widthForCalc + that.totalBandPadding)));
|
|
8267
|
+
}
|
|
8263
8268
|
|
|
8264
8269
|
if (that.plotArea) {
|
|
8265
|
-
that.plotArea.attr('transform', "translate(".concat(newX, ", ").concat(
|
|
8270
|
+
that.plotArea.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
|
|
8266
8271
|
}
|
|
8267
8272
|
|
|
8268
8273
|
if (that.areaLayer) {
|
|
8269
|
-
that.areaLayer.attr('transform', "translate(".concat(newX, ", ").concat(
|
|
8274
|
+
that.areaLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
|
|
8270
8275
|
}
|
|
8271
8276
|
|
|
8272
8277
|
if (that.lineLayer) {
|
|
8273
|
-
that.lineLayer.attr('transform', "translate(".concat(newX, ", ").concat(
|
|
8278
|
+
that.lineLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
|
|
8274
8279
|
}
|
|
8275
8280
|
|
|
8276
8281
|
if (that.barLayer) {
|
|
8277
|
-
that.barLayer.attr('transform', "translate(".concat(newX, ", ").concat(
|
|
8282
|
+
that.barLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
|
|
8278
8283
|
}
|
|
8279
8284
|
|
|
8280
8285
|
if (that.labelLayer) {
|
|
8281
|
-
that.labelLayer.attr('transform', "translate(".concat(newX, ", ").concat(
|
|
8286
|
+
that.labelLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
|
|
8282
8287
|
}
|
|
8283
8288
|
|
|
8284
8289
|
if (that.symbolLayer) {
|
|
8285
|
-
that.symbolLayer.attr('transform', "translate(".concat(newX, ", ").concat(
|
|
8290
|
+
that.symbolLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
|
|
8286
8291
|
}
|
|
8287
8292
|
|
|
8288
8293
|
if (that.refLineLayer) {
|
|
8289
|
-
that.refLineLayer.attr('transform', "translate(".concat(newX, ", ").concat(
|
|
8294
|
+
that.refLineLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY, ")"));
|
|
8290
8295
|
}
|
|
8291
8296
|
|
|
8292
|
-
if (that.
|
|
8293
|
-
|
|
8297
|
+
if (that.options.orientation === 'horizontal') {
|
|
8298
|
+
if (that.leftAxisLayer) {
|
|
8299
|
+
that.leftAxisLayer.attr('transform', "translate(".concat(that.options.brushHeight + that.options.margin.left + that.options.margin.axisLeft, ", ").concat(newY, ")"));
|
|
8300
|
+
}
|
|
8301
|
+
} else {
|
|
8302
|
+
if (that.bottomAxisLayer) {
|
|
8303
|
+
that.bottomAxisLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY + that.plotHeight, ")"));
|
|
8304
|
+
}
|
|
8294
8305
|
} // that.brushedDomain = []
|
|
8295
8306
|
// let xAxis = 'bottom'
|
|
8296
8307
|
// let xAxisCaps = 'Bottom'
|
|
@@ -8694,8 +8705,7 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
8694
8705
|
this.xAxisClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_xAxisClip")).append('rect');
|
|
8695
8706
|
this.yAxisClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_yAxisClip")).append('rect');
|
|
8696
8707
|
this.brushClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_brushclip")).append('rect');
|
|
8697
|
-
this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer')
|
|
8698
|
-
|
|
8708
|
+
this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer').attr('clip-path', "url(#".concat(this.elementId, "_yAxisClip)")).append('g');
|
|
8699
8709
|
this.rightAxisLayer = this.svg.append('g').attr('class', 'right-axis-layer');
|
|
8700
8710
|
this.bottomAxisLayer = this.svg.append('g').attr('class', 'bottom-axis-layer').attr('clip-path', "url(#".concat(this.elementId, "_xAxisClip)")).append('g');
|
|
8701
8711
|
this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer');
|
|
@@ -9133,28 +9143,31 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9133
9143
|
// Translate the layers
|
|
9134
9144
|
|
|
9135
9145
|
|
|
9136
|
-
|
|
9137
|
-
this.
|
|
9138
|
-
this.
|
|
9139
|
-
this.
|
|
9140
|
-
this.
|
|
9141
|
-
this.
|
|
9142
|
-
this.
|
|
9143
|
-
this.
|
|
9144
|
-
this.
|
|
9145
|
-
this.
|
|
9146
|
-
this.
|
|
9147
|
-
this.
|
|
9148
|
-
this.
|
|
9149
|
-
this.
|
|
9150
|
-
this.
|
|
9146
|
+
var leftBrushAdjustment = this.brushNeeded === true ? this.options.brushHeight + 5 : 0;
|
|
9147
|
+
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);
|
|
9148
|
+
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);
|
|
9149
|
+
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);
|
|
9150
|
+
this.leftAxisLabel.attr('transform', "translate(".concat(leftBrushAdjustment + this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
|
|
9151
|
+
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, ")"));
|
|
9152
|
+
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, ")"));
|
|
9153
|
+
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, ")"));
|
|
9154
|
+
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, ")"));
|
|
9155
|
+
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, ")"));
|
|
9156
|
+
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, ")"));
|
|
9157
|
+
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, ")"));
|
|
9158
|
+
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, ")"));
|
|
9159
|
+
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, ")"));
|
|
9160
|
+
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, ")"));
|
|
9161
|
+
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);
|
|
9151
9162
|
|
|
9152
9163
|
if (this.options.orientation === 'horizontal') {
|
|
9153
9164
|
this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
|
|
9154
|
-
this.yAxisClip.attr('transform', "translate(".concat(
|
|
9165
|
+
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);
|
|
9166
|
+
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);
|
|
9155
9167
|
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);
|
|
9156
9168
|
} else {
|
|
9157
9169
|
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, ")"));
|
|
9170
|
+
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);
|
|
9158
9171
|
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);
|
|
9159
9172
|
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);
|
|
9160
9173
|
}
|
|
@@ -9635,7 +9648,7 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9635
9648
|
if (this.options.orientation === 'horizontal') {
|
|
9636
9649
|
output = Math.max(1, this.options.data[xAxis].bandWidth - (xAxis.indexOf('Brush') !== -1 ? 2 : this.options.groupPadding * 2));
|
|
9637
9650
|
} else {
|
|
9638
|
-
var x = getBarX.call(this, d, i, xAxis);
|
|
9651
|
+
var x = getBarX.call(this, d, i, yAxis, xAxis);
|
|
9639
9652
|
|
|
9640
9653
|
if (typeof x === 'undefined' || x === null) {
|
|
9641
9654
|
return null;
|
|
@@ -9651,14 +9664,15 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9651
9664
|
return output;
|
|
9652
9665
|
}
|
|
9653
9666
|
|
|
9654
|
-
function getBarWidth(d, i, xAxis) {
|
|
9667
|
+
function getBarWidth(d, i, yAxis, xAxis) {
|
|
9655
9668
|
var output;
|
|
9656
9669
|
|
|
9657
9670
|
if (this.options.orientation === 'horizontal') {
|
|
9658
9671
|
// output = this[`${yAxis}Axis`](Math.abs(d.y.value))
|
|
9659
|
-
output = this["".concat(yAxis, "Axis")](
|
|
9672
|
+
output = this["".concat(yAxis, "Axis")](Math.abs(d.y.value)); // output = (this[`${yAxis}Axis`](0)) + this[`${yAxis}Axis`](Math.abs(d.y.value))
|
|
9673
|
+
// output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
|
|
9660
9674
|
} else {
|
|
9661
|
-
var x = getBarX.call(this, d, i, xAxis);
|
|
9675
|
+
var x = getBarX.call(this, d, i, yAxis, xAxis);
|
|
9662
9676
|
|
|
9663
9677
|
if (typeof x === 'undefined' || x === null) {
|
|
9664
9678
|
return null;
|
|
@@ -9674,7 +9688,7 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9674
9688
|
return output;
|
|
9675
9689
|
}
|
|
9676
9690
|
|
|
9677
|
-
function getBarX(d, i, xAxis) {
|
|
9691
|
+
function getBarX(d, i, yAxis, xAxis) {
|
|
9678
9692
|
var output;
|
|
9679
9693
|
|
|
9680
9694
|
if (this.options.orientation === 'horizontal') {
|
|
@@ -9700,11 +9714,12 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9700
9714
|
y: {
|
|
9701
9715
|
value: d.y.accumulative
|
|
9702
9716
|
}
|
|
9703
|
-
}, i, xAxis);
|
|
9704
|
-
var h = getBarWidth.call(this, d, i, xAxis);
|
|
9705
|
-
|
|
9717
|
+
}, i, yAxis, xAxis);
|
|
9718
|
+
var h = getBarWidth.call(this, d, i, yAxis, xAxis); // output = (this[`${yAxis}Axis`](0)) + ((accH + h) * (d.y.accumulative > 0 ? 0 : 1))
|
|
9719
|
+
|
|
9720
|
+
output = this["".concat(yAxis, "Axis")](0) + accH * (d.y.accumulative > 0 ? 1 : 0);
|
|
9706
9721
|
} else {
|
|
9707
|
-
var _h = getBarWidth.call(this, d, i, xAxis);
|
|
9722
|
+
var _h = getBarWidth.call(this, d, i, yAxis, xAxis);
|
|
9708
9723
|
|
|
9709
9724
|
output = this["".concat(yAxis, "Axis")](0) + _h * (d.y.value > 0 ? 0 : 1);
|
|
9710
9725
|
}
|
|
@@ -9805,11 +9820,11 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9805
9820
|
|
|
9806
9821
|
bars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
|
|
9807
9822
|
bars.attr('width', function (d, i) {
|
|
9808
|
-
return Math.abs(getBarWidth.call(_this53, d, i, xAxis));
|
|
9823
|
+
return Math.abs(getBarWidth.call(_this53, d, i, yAxis, xAxis));
|
|
9809
9824
|
}).attr('height', function (d, i) {
|
|
9810
9825
|
return getBarHeight.call(_this53, d, i, yAxis, xAxis);
|
|
9811
9826
|
}).attr('x', function (d, i) {
|
|
9812
|
-
return getBarX.call(_this53, d, i, xAxis);
|
|
9827
|
+
return getBarX.call(_this53, d, i, yAxis, xAxis);
|
|
9813
9828
|
}).attr('y', function (d, i) {
|
|
9814
9829
|
return getBarY.call(_this53, d, i, yAxis, xAxis);
|
|
9815
9830
|
}) // .transition(this.transition)
|
|
@@ -9817,11 +9832,11 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9817
9832
|
return d.y.color || d.color || series.color;
|
|
9818
9833
|
});
|
|
9819
9834
|
bars.enter().append('rect').attr('width', function (d, i) {
|
|
9820
|
-
return Math.abs(getBarWidth.call(_this53, d, i, xAxis));
|
|
9835
|
+
return Math.abs(getBarWidth.call(_this53, d, i, yAxis, xAxis));
|
|
9821
9836
|
}).attr('height', function (d, i) {
|
|
9822
9837
|
return getBarHeight.call(_this53, d, i, yAxis, xAxis);
|
|
9823
9838
|
}).attr('x', function (d, i) {
|
|
9824
|
-
return getBarX.call(_this53, d, i, xAxis);
|
|
9839
|
+
return getBarX.call(_this53, d, i, yAxis, xAxis);
|
|
9825
9840
|
}).attr('y', function (d, i) {
|
|
9826
9841
|
return getBarY.call(_this53, d, i, yAxis, xAxis);
|
|
9827
9842
|
}) // .transition(this.transition)
|
|
@@ -9835,11 +9850,11 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9835
9850
|
this.brushBarsInitialized[series.key] = true;
|
|
9836
9851
|
brushBars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
|
|
9837
9852
|
brushBars.attr('width', function (d, i) {
|
|
9838
|
-
return Math.abs(getBarWidth.call(_this53, d, i, "".concat(xAxis, "Brush")));
|
|
9853
|
+
return Math.abs(getBarWidth.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush")));
|
|
9839
9854
|
}).attr('height', function (d, i) {
|
|
9840
9855
|
return getBarHeight.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
|
|
9841
9856
|
}).attr('x', function (d, i) {
|
|
9842
|
-
return getBarX.call(_this53, d, i, "".concat(xAxis, "Brush"));
|
|
9857
|
+
return getBarX.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
|
|
9843
9858
|
}).attr('y', function (d, i) {
|
|
9844
9859
|
return getBarY.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
|
|
9845
9860
|
}) // .transition(this.transition)
|
|
@@ -9847,11 +9862,11 @@ var WebsyChart = /*#__PURE__*/function () {
|
|
|
9847
9862
|
return d.y.color || d.color || series.color;
|
|
9848
9863
|
});
|
|
9849
9864
|
brushBars.enter().append('rect').attr('width', function (d, i) {
|
|
9850
|
-
return Math.abs(getBarWidth.call(_this53, d, i, "".concat(xAxis, "Brush")));
|
|
9865
|
+
return Math.abs(getBarWidth.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush")));
|
|
9851
9866
|
}).attr('height', function (d, i) {
|
|
9852
9867
|
return getBarHeight.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
|
|
9853
9868
|
}).attr('x', function (d, i) {
|
|
9854
|
-
return getBarX.call(_this53, d, i, "".concat(xAxis, "Brush"));
|
|
9869
|
+
return getBarX.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
|
|
9855
9870
|
}).attr('y', function (d, i) {
|
|
9856
9871
|
return getBarY.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
|
|
9857
9872
|
}) // .transition(this.transition)
|