Skip to content

Commit

Permalink
refactor(bar): handle clip-path updates
Browse files Browse the repository at this point in the history
clip-path style should be updated according the data toggles

Ref naver#3903
  • Loading branch information
netil committed Oct 23, 2024
1 parent 91b5dca commit 6bff5e2
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/ChartInternal/shape/bar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,9 @@ export default {
}
}

d.clipPath = `inset(${clipPath})`;
if (clipPath) {
d.clipPath = `inset(${clipPath})`;
}
}

// path string data shouldn't be containing new line chars
Expand Down
49 changes: 49 additions & 0 deletions test/shape/bar-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {beforeEach, beforeAll, describe, expect, it} from "vitest";
import {select as d3Select} from "d3-selection";
import util from "../assets/util";
import {$AXIS, $BAR, $COMMON, $EVENT, $LINE, $SHAPE} from "../../src/config/classes";
import interaction from "../../src/ChartInternal/interactions/interaction";

describe("SHAPE BAR", () => {
let chart;
Expand Down Expand Up @@ -1149,6 +1150,54 @@ describe("SHAPE BAR", () => {
}
});
});

it("set options", () => {
args = {
data: {
columns: [
["data1", -80],
["data2", 80],
["data3", -120]
],
type: "bar",
groups: [
[
"data1",
"data2"
]
],
order: "desc"
},
bar: {
radius: {
ratio: 0.5
}
},
transition: {
duration: 0
}
};
});

it("clip-path style should be updated", () => {
// when
chart.hide("data3");

chart.$.bar.bars.each(function(d) {
if (d.id !== "data3") {
expect(this.style.clipPath.length > 0).to.be.true;
} else {
expect(this.style.clipPath).to.be.equal("");
}
});

// when
chart.show("data3");

chart.$.bar.bars.each(function(d) {
expect(this.style.clipPath).to.be.equal("");
});
})
});

describe("bar linear gradient", () => {
Expand Down

0 comments on commit 6bff5e2

Please sign in to comment.