Skip to content

Commit

Permalink
fix(grid): Correct grid scale on zoom
Browse files Browse the repository at this point in the history 
Make grid to be scale on zoom when zoomScale exist.

Fix #799
  • Loading branch information
@netil
netil committed Jun 10, 2019
1 parent 169f640 commit 2904d41
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 123 deletions.
262 changes: 142 additions & 120 deletions spec/interactions/zoom-spec.js
View file
Expand Up @@ -89,8 +89,8 @@ describe("ZOOM", function() {
},
zoom: {
enabled: {
type: "wheel"
},
type: "wheel"
},
onzoomstart: spyOnZoomStart,
onzoom: spyOnZoom,
onzoomend: spyOnZoomEnd
Expand Down Expand Up @@ -240,6 +240,11 @@ describe("ZOOM", function() {
["data2", 50, 20, 10, 40, 15, 6025]
]
},
grid: {
x: {
show: true
}
},
zoom: {
rescale: true,
enabled: true
Expand Down Expand Up @@ -288,141 +293,158 @@ describe("ZOOM", function() {
).to.be.true;
});
});

it("grid also should scale", done => {
const getX = selector => chart.$.main.select(selector).node().getBoundingClientRect().x;

// when zoom in
chart.zoom([1,3]);

setTimeout(() => {
expect(
getX(`.${CLASS.xgrids} line:nth-child(2)`)
).to.be.equal(
getX(`.${CLASS.axisX} g.tick:nth-child(4) line`)
);

done();
}, 300);
})
});

describe("zoom type drag", () => {
let clickedData;
describe("zoom type drag", () => {
let clickedData;

before(() => {
args = {
size: {
width: 300,
height: 250
},
data: {
columns: [
["data1", 30, 200, 100, 400, 3150, 250],
["data2", 50, 20, 10, 40, 15, 6025]
],
onclick: d => {
clickedData = d;
}
},
zoom: {
enabled: {
type: "drag"
}
before(() => {
args = {
size: {
width: 300,
height: 250
},
data: {
columns: [
["data1", 30, 200, 100, 400, 3150, 250],
["data2", 50, 20, 10, 40, 15, 6025]
],
onclick: d => {
clickedData = d;
}
};
});
},
zoom: {
enabled: {
type: "drag"
}
}
};
});

it("check for data zoom", () => {
const main = chart.$.main;
const xValue = +main.select(`.${CLASS.eventRect}-2`).attr("x");
it("check for data zoom", () => {
const main = chart.$.main;
const xValue = +main.select(`.${CLASS.eventRect}-2`).attr("x");

// when
chart.zoom([0, 3]); // zoom in
// when
chart.zoom([0, 3]); // zoom in

expect(+main.select(`.${CLASS.eventRect}-2`).attr("x")).to.be.above(xValue);
});
expect(+main.select(`.${CLASS.eventRect}-2`).attr("x")).to.be.above(xValue);
});

it("check for x axis resize after zoom", () => {
const main = chart.$.main;
const rx = /H(\d+)/;
it("check for x axis resize after zoom", () => {
const main = chart.$.main;
const rx = /H(\d+)/;

const domain = main.select(`.${CLASS.axisX} > .domain`);
const pathValue = +domain.attr("d").match(rx)[1];
const domain = main.select(`.${CLASS.axisX} > .domain`);
const pathValue = +domain.attr("d").match(rx)[1];

chart.zoom([0, 4]);
chart.resize({width: 400});
chart.zoom([0, 4]);
chart.resize({width: 400});

expect(+domain.attr("d").match(rx)[1]).to.be.above(pathValue);
});
expect(+domain.attr("d").match(rx)[1]).to.be.above(pathValue);
});

it("check for x axis resize after zoom in/out", () => {
const main = chart.$.main;
const rx = /H(\d+)/;
it("check for x axis resize after zoom in/out", () => {
const main = chart.$.main;
const rx = /H(\d+)/;

const domain = main.select(`.${CLASS.axisX} > .domain`);
const pathValue = +domain.attr("d").match(rx)[1];
const domain = main.select(`.${CLASS.axisX} > .domain`);
const pathValue = +domain.attr("d").match(rx)[1];

chart.zoom([0, 4]); // zoom in
chart.zoom([0, 6]); // zoom out
chart.zoom([0, 4]); // zoom in
chart.zoom([0, 6]); // zoom out

expect(+domain.attr("d").match(rx)[1]).to.be.equal(pathValue);
expect(+domain.attr("d").match(rx)[1]).to.be.equal(pathValue);

// resize
chart.resize({width: 400});
// resize
chart.resize({width: 400});

// check if chart react on resize
expect(+domain.attr("d").match(rx)[1]).to.be.above(pathValue);
});
// check if chart react on resize
expect(+domain.attr("d").match(rx)[1]).to.be.above(pathValue);
});

it("check for the reset zoom button", () => {
// when
chart.zoom([0, 4]);
it("check for the reset zoom button", () => {
// when
chart.zoom([0, 4]);

const resetBtn = chart.$.chart.select(`.${CLASS.buttonZoomReset}`);
const resetBtn = chart.$.chart.select(`.${CLASS.buttonZoomReset}`);

expect(resetBtn.empty()).to.be.false;
expect(resetBtn.empty()).to.be.false;

// when button is clicked
resetBtn.node().click();
// when button is clicked
resetBtn.node().click();

expect(resetBtn.style("display")).to.be.equal("none");
});
expect(resetBtn.style("display")).to.be.equal("none");
});

it("set options zoom.resetButton.text='test'", () => {
args.zoom.resetButton = {
text: "test"
};
});
it("set options zoom.resetButton.text='test'", () => {
args.zoom.resetButton = {
text: "test"
};
});

it("check for the custom reset zoom button text", () => {
// when
chart.zoom([0, 4]);
it("check for the custom reset zoom button text", () => {
// when
chart.zoom([0, 4]);

const resetBtn = chart.$.chart.select(`.${CLASS.buttonZoomReset}`);
const resetBtn = chart.$.chart.select(`.${CLASS.buttonZoomReset}`);

expect(resetBtn.empty()).to.be.false;
expect(resetBtn.text()).to.be.equal("test");
});
expect(resetBtn.empty()).to.be.false;
expect(resetBtn.text()).to.be.equal("test");
});

it("set options zoom.rescale=true", () => {
args.zoom.rescale = true;
});
it("set options zoom.rescale=true", () => {
args.zoom.rescale = true;
});

it("check for the y axis rescale", () => {
const axisY = chart.$.main.select(`.${CLASS.axisY}`);
it("check for the y axis rescale", () => {
const axisY = chart.$.main.select(`.${CLASS.axisY}`);

// when
chart.zoom([0, 2]);
// when
chart.zoom([0, 2]);

let tick = axisY.selectAll(".tick").nodes().pop();
let tick = axisY.selectAll(".tick").nodes().pop();

expect(+tick.textContent).to.be.equal(200);
expect(+tick.textContent).to.be.equal(200);

// when
chart.zoom([2, 4]);
// when
chart.zoom([2, 4]);

tick = axisY.selectAll(".tick").nodes().pop();
tick = axisY.selectAll(".tick").nodes().pop();

expect(+tick.textContent).to.be.equal(3000);
});
expect(+tick.textContent).to.be.equal(3000);
});

it("check for data.onclick", () => {
const main = chart.$.main;
const rect = main.select(`.${CLASS.eventRect}.${CLASS.eventRect}-0`).node();
const circle = chart.$.line.circles.node().getBBox();
it("check for data.onclick", () => {
const main = chart.$.main;
const rect = main.select(`.${CLASS.eventRect}.${CLASS.eventRect}-0`).node();
const circle = chart.$.line.circles.node().getBBox();

util.fireEvent(rect, "click", {
clientX: circle.x,
clientY: circle.y
}, chart);
util.fireEvent(rect, "click", {
clientX: circle.x,
clientY: circle.y
}, chart);

expect(clickedData).to.not.be.undefined;
});
expect(clickedData).to.not.be.undefined;
});
});

describe("zoom on regions", () => {
before(() => {
Expand Down Expand Up @@ -612,29 +634,29 @@ describe("ZOOM", function() {
});
});

describe("zoom for rotated axis", () => {
before(() => {
args = {
size: {
width: 300,
height: 250
},
data: {
columns: [
["data1", 30, 200, 100, 400, 3150, 250],
["data2", 6025, 20, 10, 40, 15, 25]
]
},
axis: {
rotated: true
describe("zoom for rotated axis", () => {
before(() => {
args = {
size: {
width: 300,
height: 250
},
zoom: {
rescale: true,
enabled: {
type: "drag"
}
data: {
columns: [
["data1", 30, 200, 100, 400, 3150, 250],
["data2", 6025, 20, 10, 40, 15, 25]
]
},
axis: {
rotated: true
},
zoom: {
rescale: true,
enabled: {
type: "drag"
}
};
}
};
});

it("check on drag zooming", done => {
Expand Down
4 changes: 2 additions & 2 deletions src/config/Options.js
View file
Expand Up @@ -2670,15 +2670,15 @@ export default class Options {
* show: true,
* lines: [
* {value: 2, text: "Label on 2"},
* {value: 5, text: "Label on 5", class: "label-5"}
* {value: 5, text: "Label on 5", class: "label-5"},
* {value: 6, text: "Label on 6", position: "start"}
* ]
* },
* y: {
* show: true,
* lines: [
* {value: 100, text: "Label on 100"},
* {value: 200, text: "Label on 200", class: "label-200"}
* {value: 200, text: "Label on 200", class: "label-200"},
* {value: 300, text: "Label on 300", position: 'middle'}
* ],
* ticks: 5
Expand Down
2 changes: 1 addition & 1 deletion src/internals/grid.js
View file
Expand Up @@ -57,7 +57,7 @@ extend(ChartInternal.prototype, {
const isRotated = config.axis_rotated;
const xgridData = $$.generateGridData(config.grid_x_type, $$.x);
const tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0;
const pos = d => ($$.x(d) + tickOffset) * (isRotated ? -1 : 1);
const pos = d => (($$.zoomScale || $$.x)(d) + tickOffset) * (isRotated ? -1 : 1);

$$.xgridAttr = isRotated ? {
"x1": 0,
Expand Down

0 comments on commit 2904d41

Please sign in to comment.