|
|
@ -629,12 +629,9 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> { |
|
|
|
// TODO: check clear state for necessity
|
|
|
|
// TODO: check clear state for necessity
|
|
|
|
this.renderYAxis(); |
|
|
|
this.renderYAxis(); |
|
|
|
this.renderXAxis(); |
|
|
|
this.renderXAxis(); |
|
|
|
// metrics-rect wrapper is required for panning
|
|
|
|
// metrics-rect wrapper is required for panning and any rescaling
|
|
|
|
this.chartContainer.select('.metrics-rect') |
|
|
|
this.chartContainer.select('.metrics-rect') |
|
|
|
.attr('transform', `translate(${this.state.transform.x},${this.state.transform.y}), scale(${this.state.transform.k})`); |
|
|
|
.attr('transform', `translate(${this.state.transform.x},${this.state.transform.y}), scale(${this.state.transform.k})`); |
|
|
|
// TODO: use one standard for all metrics in Pods
|
|
|
|
|
|
|
|
this.chartContainer.selectAll('.metric-el') |
|
|
|
|
|
|
|
.attr('transform', `translate(${this.state.transform.x},${this.state.transform.y}), scale(${this.state.transform.k})`); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void { |
|
|
|
protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void { |
|
|
@ -726,21 +723,20 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> { |
|
|
|
this.state.transform = { x: translateX }; |
|
|
|
this.state.transform = { x: translateX }; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case ScrollPanOrientation.VERTICAL: |
|
|
|
case ScrollPanOrientation.VERTICAL: |
|
|
|
const deltaY = Math.min(Math.abs(event.sourceEvent.deltaY), this.height * 0.1); |
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
// @ts-ignore
|
|
|
|
let signY = Math.sign(event.transform.y); |
|
|
|
let signY = Math.sign(event.transform.y); |
|
|
|
if(this.options.axis.y.invert === true) { |
|
|
|
if(this.options.axis.y.invert === true) { |
|
|
|
signY = -signY; |
|
|
|
signY = -signY; |
|
|
|
} |
|
|
|
} |
|
|
|
let rangeY = this.state.yValueRange; |
|
|
|
let rangeY = this.state.yValueRange; |
|
|
|
const transformY = this.absYScale.invert(deltaY); |
|
|
|
const transformY = this.absYScale.invert(transformStep); |
|
|
|
this.deltaYTransform = this.deltaYTransform + deltaY; |
|
|
|
this.deltaYTransform = this.deltaYTransform + transformStep; |
|
|
|
// TODO: not hardcoded bounds
|
|
|
|
// TODO: not hardcoded bounds
|
|
|
|
if(this.deltaYTransform > this.height * 0.9) { |
|
|
|
if(this.deltaYTransform > this.height * 0.9) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
this.state.yValueRange = [rangeY[0] - signY * transformY, rangeY[1] - signY * transformY]; |
|
|
|
this.state.yValueRange = [rangeY[0] - signY * transformY, rangeY[1] - signY * transformY]; |
|
|
|
const translateY = this.state.transform.y + signY * deltaY; |
|
|
|
const translateY = this.state.transform.y + signY * transformStep; |
|
|
|
this.state.transform = { y: translateY }; |
|
|
|
this.state.transform = { y: translateY }; |
|
|
|
// TODO: add y1 rescale
|
|
|
|
// TODO: add y1 rescale
|
|
|
|
break; |
|
|
|
break; |
|
|
|