Browse Source

fix double rescaling

merge-requests/11/head
vargburz 3 years ago
parent
commit
0274db9aea
  1. 2
      dist/index.js
  2. 2
      package-lock.json
  3. 12
      src/index.ts

2
dist/index.js vendored

File diff suppressed because one or more lines are too long

2
package-lock.json generated

@ -1,6 +1,6 @@
{ {
"name": "@chartwerk/core", "name": "@chartwerk/core",
"version": "0.3.3", "version": "0.3.4",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

12
src/index.ts

@ -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;

Loading…
Cancel
Save