Skip to content

Commit

Permalink
fix(subchart): Fix handlebar position
Browse files Browse the repository at this point in the history
- Update handlebar path coordinate to ease control of the position
- Fix horizontal/vertical align based on the subchart height

Fix #3358
  • Loading branch information
netil authored Aug 22, 2023
1 parent 0b61783 commit b897cbb
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 21 deletions.
28 changes: 8 additions & 20 deletions src/ChartInternal/interactions/subchart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default {
const $$ = this;
const {config, scale, $el: {subchart}, state} = $$;
const isRotated = config.axis_rotated;
const height = config.subchart_size_height;
let lastDomain;
let lastSelection;
let timeout;
Expand All @@ -29,18 +30,6 @@ export default {
isRotated ? d3BrushY() : d3BrushX()
).handleSize(5);

const getBrushSize = () => {
const brush = $$.$el.svg.select(`.${CLASS.brush} .overlay`);
const brushSize = {width: 0, height: 0};

if (brush.size()) {
brushSize.width = +brush.attr("width");
brushSize.height = +brush.attr("height");
}

return brushSize[isRotated ? "width" : "height"];
};

// bind brush event
$$.brush.on("start brush end", event => {
const {selection, sourceEvent, target, type} = event;
Expand Down Expand Up @@ -75,10 +64,9 @@ export default {
} else {
$$.brush.handle.attr("display", null)
.attr("transform", (d, i) => {
const pos = isRotated ?
[33, selection[i] - (i === 0 ? 30 : 24)] : [selection[i], 3];
const pos = [selection[i], height / 2];

return `translate(${pos})`;
return `translate(${isRotated ? pos.reverse() : pos})`;
});
}
}
Expand Down Expand Up @@ -106,7 +94,7 @@ export default {

// set the brush extent
$$.brush.scale = function(scale) {
const h = config.subchart_size_height || getBrushSize();
const h = config.subchart_size_height;
let extent = $$.getExtent();

if (!extent && scale.range) {
Expand Down Expand Up @@ -211,11 +199,11 @@ export default {

// brush handle shape's path
const path = isRotated ? [
"M 5.2491724,29.749209 a 6,6 0 0 0 -5.50000003,-6.5 H -5.7508276 a 6,6 0 0 0 -6.0000004,6.5 z m -5.00000003,-2 H -6.7508276 m 6.99999997,-2 H -6.7508276Z",
"M 5.2491724,23.249172 a 6,-6 0 0 1 -5.50000003,6.5 H -5.7508276 a 6,-6 0 0 1 -6.0000004,-6.5 z m -5.00000003,2 H -6.7508276 m 6.99999997,2 H -6.7508276Z"
"M8.5 0 a6 6 0 0 0 -6 -6.5 H-2.5 a 6 6 0 0 0 -6 6.5 z m-5 -2 H-3.5 m7 -2 H-3.5z",
"M8.5 0 a6 -6 0 0 1 -6 6.5 H-2.5 a 6 -6 0 0 1 -6 -6.5z m-5 2 H-3.5 m7 2 H-3.5z"
] : [
"M 0 18 A 6 6 0 0 0 -6.5 23.5 V 29 A 6 6 0 0 0 0 35 Z M -2 23 V 30 M -4 23 V 30Z",
"M 0 18 A 6 6 0 0 1 6.5 23.5 V 29 A 6 6 0 0 1 0 35 Z M 2 23 V 30 M 4 23 V 30Z"
"M0 -8.5 A6 6 0 0 0 -6.5 -3.5 V2.5 A6 6 0 0 0 0 8.5 Z M-2 -3.5 V3.5 M-4 -3.5 V3.5z",
"M0 -8.5 A6 6 0 0 1 6.5 -3.5 V2.5 A6 6 0 0 1 0 8.5 Z M2 -3.5 V3.5 M4 -3.5 V3.5z"
];

$$.brush.handle = brush.selectAll(`.${customHandleClass}`)
Expand Down
38 changes: 38 additions & 0 deletions test/interactions/subchart-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ describe("SUBCHART", () => {
chart = util.generate(args);
});

afterEach(() => {
chart.destroy();
});

describe("generate subchart", () => {
before(() => {
args = {
Expand Down Expand Up @@ -641,6 +645,26 @@ describe("SUBCHART", () => {
expect(chart.internal.scale.x.domain()).to.be.not.deep.equal(currDomain);
});

it("set options: subchart.size.height", () => {
args.subchart.size = {
height: 100
};
});

it("handlebar should be positioned at the verrical center?", () => {
const handlebar = chart.internal.brush.getSelection()
.selectAll(".handle--custom");

// when
util.doDrag(handlebar.filter(":last-child").node(), undefined, {clientX: 400, clientY: 100}, chart);

handlebar.each(function(d, i) {
const y = +this.getAttribute("transform").replace(/[^,]*,(\d+)\)/g, "$1");

expect(y).to.be.equal(args.subchart.size.height / 2);
});
});

it("set options axis.rotated=true", () => {
args.axis = {
rotated: true
Expand All @@ -661,5 +685,19 @@ describe("SUBCHART", () => {

expect(chart.internal.scale.x.domain()).to.be.not.deep.equal(currDomain);
});

it("handlebar should be positioned at the horizontal center?", () => {
const handlebar = chart.internal.brush.getSelection()
.selectAll(".handle--custom");

// when
util.doDrag(handlebar.filter(":last-child").node(), undefined, {clientX: 100, clientY: 0}, chart);

handlebar.each(function(d, i) {
const y = +this.getAttribute("transform").replace(/[^()]*\((\d+).*/g, "$1");

expect(y).to.be.equal(args.subchart.size.height / 2);
});
});
});
});
4 changes: 3 additions & 1 deletion test/internals/data-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1129,9 +1129,11 @@ describe("DATA", () => {
afterEach(() => {
spyHidden.resetHistory();
spyShown.resetHistory();

chart.destroy();
});

it("check on continuous .hide()/.show() APIs.", done => {
it("check on continuous .hide()/.show() APIs.", function(done) {
new Promise((resolve, reject) => {
// hide
chart.hide();
Expand Down

0 comments on commit b897cbb

Please sign in to comment.