@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
105 lines (104 loc) • 3.58 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as p from "react";
import { classNames as d } from "@progress/kendo-react-common";
import { InstanceObserver as m } from "@progress/kendo-charts";
import { TooltipPoint as c } from "./Point.mjs";
import { SharedTooltipContent as f } from "./SharedTooltipContent.mjs";
import { TooltipPopup as S } from "./Popup.mjs";
import { ChartContext as y } from "../ChartContext.mjs";
const T = "k-chart-shared-tooltip", x = "k-chart-tooltip-inverse", a = class a extends p.Component {
constructor() {
super(...arguments), this.context = null, this.state = {
popupShown: !1
}, this.chartObserver = null;
}
componentDidMount() {
this.chartObserver = new m(this, {
showTooltip: "onShowTooltip",
hideTooltip: "onHideTooltip"
}), this.context.observersStore.dispatch({
type: "add",
payload: this.chartObserver
});
}
render() {
const { popupContext: t, shared: o, className: n, ...r } = this.state, i = this.state.popupShown ? () => {
const e = this.findRenderFunction();
if (o)
return e !== null ? e(t) : /* @__PURE__ */ p.createElement(f, { ...t });
const u = t.point, l = this.findRenderFunctionByIndex(u.series.index);
return l !== null ? l(t) : e !== null ? e(t) : /* @__PURE__ */ p.createElement(
"span",
{
dangerouslySetInnerHTML: {
__html: t.point.formattedValue
}
}
);
} : Function.prototype, s = d({
[T]: o,
[x]: !!n
});
return /* @__PURE__ */ p.createElement(S, { ...r, popupContent: i, className: s });
}
componentWillUnmount() {
this.context.observersStore.dispatch({
type: "remove",
payload: this.chartObserver
});
}
onShowTooltip(t) {
const { anchor: o, style: n, shared: r, className: i, crosshair: s } = t;
let e;
s || (r ? e = this.createSharedTooltipContext(t) : e = this.createTooltipContext(t), this.setState({
popupShown: !0,
popupAlign: o.align,
popupOffset: o.point,
popupContext: e,
popupStyles: n,
className: i,
shared: r
}));
}
onHideTooltip() {
this.setState({
popupShown: !1,
popupStyles: {},
className: void 0
});
}
createSharedTooltipContext(t) {
const { points: o, categoryText: n } = t, r = o.filter((e) => typeof e.series.name != "undefined").length > 0, i = t.series.length > 1;
let s = 1;
return r && s++, i && s++, {
categoryText: n,
colorMarker: i,
colspan: s,
nameColumn: r,
points: t.points.map((e) => new c(e, t.format))
};
}
createTooltipContext(t) {
const { point: o, format: n } = t;
return { point: new c(o, n) };
}
findRenderFunctionByIndex(t) {
const o = this.context.optionsStore.getState().series;
return o !== void 0 && Array.isArray(o) && o[t] !== void 0 && o[t].hasOwnProperty("tooltip") && o[t].tooltip.hasOwnProperty("render") ? o[t].tooltip.render : null;
}
findRenderFunction() {
const t = this.context.optionsStore.getState().tooltip;
return t !== void 0 && t.hasOwnProperty("render") ? t.render : null;
}
};
a.contextType = y;
let h = a;
export {
h as SeriesTooltip
};