Skip to content

Commit

Permalink
fix(tooltip): Fix error throw when tooltip.show=false is set
Browse files Browse the repository at this point in the history 
- Fix side effect casued from 49a7a63
- Add prevention when calling tooltip.daum()

Ref #3396
  • Loading branch information
netil committed Sep 4, 2023
1 parent c00e08c commit 4081a90
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 19 deletions.
6 changes: 3 additions & 3 deletions src/ChartInternal/internals/tooltip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ export default {
const $$ = this;
const {config, scale, state, $el: {eventRect, tooltip}} = $$;
const {bindto} = config.tooltip_contents;
const datum = tooltip.datum();
const datum = tooltip?.datum?.();

if (!bindto && datum) {
const [x, y] = getPointer(state.event, eventTarget ?? eventRect?.node()); // get mouse event position
Expand Down Expand Up @@ -377,7 +377,7 @@ export default {
return;
}

let datum = tooltip.datum();
let datum = tooltip?.datum?.();
const dataStr = JSON.stringify(selectedData);

if (!datum || datum.current !== dataStr) {
Expand Down Expand Up @@ -445,7 +445,7 @@ export default {
const {api, config, $el: {tooltip}} = $$;

if (tooltip && tooltip.style("display") !== "none" && (!config.tooltip_doNotHide || force)) {
const selectedData = JSON.parse(tooltip.datum().current);
const selectedData = JSON.parse(tooltip?.datum?.().current ?? {});

callFn(config.tooltip_onhide, api, selectedData);

Expand Down
31 changes: 31 additions & 0 deletions test/internals/tooltip-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1776,4 +1776,35 @@ describe("TOOLTIP", function() {
});
});
});

describe("tooltip: show", () => {
before(() => {
args = {
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 130, 100, 140, 200, 150, 50]
],
type: "bar"
},
bar: {
width: {
ratio: 0.5
}
},
tooltip: {
show: false
}
};
});

it("tooltip element should be null", () => {
util.hoverChart(chart, "mouseover", {
clientX: 360,
clientY: 300
});

expect(chart.$.tooltip).to.be.null;
});
});
});
35 changes: 19 additions & 16 deletions test/shape/arc-needle-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ import {$ARC} from "../../src/config/classes";
import util from "../assets/util";
import { $GAUGE } from "../../src/config/classes";

function getDegree(str) {
return +str.replace(/.*\((.+)deg\).*/, "$1");
}

describe("SHAPE ARC: NEEDLE option", () => {
let chart;
let args = {
Expand Down Expand Up @@ -68,7 +72,7 @@ describe("SHAPE ARC: NEEDLE option", () => {
const {$el: {arcs, needle}} = chart.internal;

expect(needle.attr("d")).to.be.equal("M-5 20 A0 0 0 0 0 5 20 L2.5 -168.67999999999998 A1 1 0 0 0 -2.5 -168.67999999999998 L-5 20 Z");
expect(util.parseNum(needle.style("transform"))).to.equal(118.8);
expect(getDegree(needle.style("transform"))).to.equal(118.8);
expect(needle.style("fill")).to.equal("red");

expect(+arcs.select(`.${$ARC.chartArcsTitle}`).text()).to.be.equal(args.arc.needle.value);
Expand All @@ -85,7 +89,7 @@ describe("SHAPE ARC: NEEDLE option", () => {
expect(+arcs.select(`.${$ARC.chartArcsTitle}`).text()).to.be.equal(70);

// needle has been updated?
expect(util.parseNum(needle.style("transform"))).to.be.equal(252);
expect(getDegree(needle.style("transform"))).to.be.equal(252);

resolve();
}, 500);
Expand All @@ -97,8 +101,7 @@ describe("SHAPE ARC: NEEDLE option", () => {
setTimeout(() => {
// title text value should be equal as the initial value
expect(+arcs.select(`.${$ARC.chartArcsTitle}`).text()).to.be.equal(args.arc.needle.value);

expect(util.parseNum(needle.style("transform"))).to.be.equal(158.4);
expect(getDegree(needle.style("transform"))).to.be.equal(158.4);

// show 'data1'
chart.toggle("data1");
Expand Down Expand Up @@ -176,13 +179,13 @@ describe("SHAPE ARC: NEEDLE option", () => {
it("check with startingAngle", done => {
const {$el: {needle}} = chart.internal;

expect(util.parseNum(needle.style("transform"))).to.be.equal(114.592);
expect(getDegree(needle.style("transform"))).to.be.equal(114.592);

// when
chart.$.needle.updateHelper(50);

setTimeout(() => {
expect(util.parseNum(needle.style("transform"))).to.be.equal(294.592);
expect(getDegree(needle.style("transform"))).to.be.equal(294.592);

done();
}, 500);
Expand Down Expand Up @@ -214,7 +217,7 @@ describe("SHAPE ARC: NEEDLE option", () => {

expect(arcs.select(`.${$GAUGE.gaugeValue}`).text()).to.be.equal("25.0%");
expect(needle.attr("d")).to.be.equal("M-7.5 0 A1 1 0 0 0 7.5 0 L0 -303 A0 0 0 0 0 -0 -303 L-7.5 0 Z");
expect(util.parseNum(needle.style("transform"))).to.be.equal(-45);
expect(getDegree(needle.style("transform"))).to.be.equal(-45);
});

it("set options", () => {
Expand All @@ -225,7 +228,7 @@ describe("SHAPE ARC: NEEDLE option", () => {
const {$el: {arcs, needle}} = chart.internal;

expect(arcs.select(`.${$GAUGE.gaugeValue}`).text()).to.be.equal("25.0%");
expect(util.parseNum(needle.style("transform"))).to.be.equal(0);
expect(getDegree(needle.style("transform"))).to.be.equal(0);
});

it("set options", () => {
Expand Down Expand Up @@ -312,13 +315,13 @@ describe("SHAPE ARC: NEEDLE option", () => {
it("check with startingAngle", done => {
const {$el: {needle}} = chart.internal;

expect(util.parseNum(needle.style("transform"))).to.be.equal(-29.7938);
expect(getDegree(needle.style("transform"))).to.be.equal(-29.7938);

// when
chart.$.needle.updateHelper(100);

setTimeout(() => {
expect(util.parseNum(needle.style("transform"))).to.be.equal(74.4845);
expect(getDegree(needle.style("transform"))).to.be.equal(74.4845);

done();
}, 500);
Expand Down Expand Up @@ -350,22 +353,22 @@ describe("SHAPE ARC: NEEDLE option", () => {
const {$el: {needle}} = chart.internal;
const path = needle.attr("d");

expect(util.parseNum(needle.style("transform"))).to.be.equal(51.5155);
expect(getDegree(needle.style("transform"))).to.be.equal(51.5155);

new Promise((resolve) => {
// when
chart.$.needle.updateHelper(0);

setTimeout(() => {
expect(util.parseNum(needle.style("transform"))).to.be.closeTo(-74.4845, 1);
expect(getDegree(needle.style("transform"))).to.be.closeTo(-74.4845, 1);
resolve();
}, 500);
}).then(() => {
// when
chart.$.needle.updateHelper(100);

setTimeout(() => {
expect(util.parseNum(needle.style("transform"))).to.be.equal(177.515);
expect(getDegree(needle.style("transform"))).to.be.equal(177.515);

done();
}, 500);
Expand Down Expand Up @@ -401,7 +404,7 @@ describe("SHAPE ARC: NEEDLE option", () => {
it("basic", () => {
const {$el: {needle}} = chart.internal;

expect(util.parseNum(needle.style("transform"))).to.be.equal(216);
expect(getDegree(needle.style("transform"))).to.be.equal(216);
});

it("toggle data", done => {
Expand All @@ -412,15 +415,15 @@ describe("SHAPE ARC: NEEDLE option", () => {
chart.toggle("data5");

setTimeout(() => {
expect(util.parseNum(needle.style("transform"))).to.be.equal(270);
expect(getDegree(needle.style("transform"))).to.be.equal(270);
resolve();
}, 500);
}).then(() => {
// when
chart.toggle("data4");

setTimeout(() => {
expect(util.parseNum(needle.style("transform"))).to.be.equal(360);
expect(getDegree(needle.style("transform"))).to.be.equal(360);

done();
}, 500);
Expand Down

0 comments on commit 4081a90

Please sign in to comment.