@apptane/react-ui-charts
Version:
Chart components in Apptane React UI framework
71 lines (61 loc) • 6.2 kB
JavaScript
import { css } from "@emotion/react";
import { useContext } from "react";
import { ChartSliceContext } from "../parts/ChartSliceContext.js";
import { findValue } from "./common.js";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
const StyleTooltipAnimation = (animation, stroke, width) => /*#__PURE__*/css("&,>line,>circle{transition-delay:", animation.delay, "ms;transition-duration:", animation.duration, "ms;transition-timing-function:", animation.function, ";}>line{stroke:", stroke, ";stroke-width:", width, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyleTooltipAnimation;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy94eS9YWVRvb2x0aXBMYXllci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUzhGIiwiZmlsZSI6Ii4uLy4uL3NyYy94eS9YWVRvb2x0aXBMYXllci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmltYXRpb25TdHlsZSwgQ29sb3IsIENvbG9yTW9kZSB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS1jb3JlXCI7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS10aGVtZVwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyB1c2VDb250ZXh0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBEb21haW4sIERvbWFpblhWYWx1ZSB9IGZyb20gXCIuLi9jb21tb24vVHlwZXMuanNcIjtcbmltcG9ydCB7IENoYXJ0U2xpY2VDb250ZXh0IH0gZnJvbSBcIi4uL3BhcnRzL0NoYXJ0U2xpY2VDb250ZXh0LmpzXCI7XG5pbXBvcnQgeyBmaW5kVmFsdWUgfSBmcm9tIFwiLi9jb21tb24uanNcIjtcbmltcG9ydCB7IFhZQ29tcHV0ZWRWYWx1ZSwgWFlEYXR1bUV4IH0gZnJvbSBcIi4vY29tbW9uWFkuanNcIjtcblxuY29uc3QgU3R5bGVUb29sdGlwQW5pbWF0aW9uID0gKGFuaW1hdGlvbjogQW5pbWF0aW9uU3R5bGUsIHN0cm9rZTogQ29sb3IsIHdpZHRoOiBudW1iZXIpID0+IGNzc2BcbiAgJixcbiAgPiBsaW5lLFxuICA+IGNpcmNsZSB7XG4gICAgdHJhbnNpdGlvbi1kZWxheTogJHthbmltYXRpb24uZGVsYXl9bXM7XG4gICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogJHthbmltYXRpb24uZHVyYXRpb259bXM7XG4gICAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246ICR7YW5pbWF0aW9uLmZ1bmN0aW9ufTtcbiAgfVxuXG4gID4gbGluZSB7XG4gICAgc3Ryb2tlOiAke3N0cm9rZX07XG4gICAgc3Ryb2tlLXdpZHRoOiAke3dpZHRofTtcbiAgICAvLyBzaGFwZS1yZW5kZXJpbmc6IGNyaXNwZWRnZXM7XG4gIH1cbmA7XG5cbmV4cG9ydCB0eXBlIFhZVG9vbHRpcExheWVyUHJvcHM8WCBleHRlbmRzIERvbWFpblhWYWx1ZSwgRGF0YSA9IHZvaWQ+ID0ge1xuICB0aGVtZTogVGhlbWU7XG4gIGNvbG9yTW9kZTogQ29sb3JNb2RlO1xuICBvZmZzZXQ6IG51bWJlcjtcbiAgZGF0YTogWFlEYXR1bUV4PFgsIERhdGE+W107XG4gIGRvbWFpblg6IERvbWFpbjxYPjtcbiAgYmFzZWxpbmU6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBYWVRvb2x0aXBMYXllciA9IDxYIGV4dGVuZHMgRG9tYWluWFZhbHVlLCBEYXRhID0gdm9pZD4oe1xuICB0aGVtZSxcbiAgY29sb3JNb2RlLFxuICBvZmZzZXQsXG4gIGRhdGEsXG4gIGRvbWFpblgsXG4gIGJhc2VsaW5lLFxufTogWFlUb29sdGlwTGF5ZXJQcm9wczxYLCBEYXRhPikgPT4ge1xuICBjb25zdCBzbGljZSA9IHVzZUNvbnRleHQoQ2hhcnRTbGljZUNvbnRleHQpO1xuICBpZiAoc2xpY2UgPT0gbnVsbCB8fCBzbGljZS54ID09IG51bGwpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIGNvbnN0IHBhbGV0dGUgPSB0aGVtZS5wYWxldHRlW2NvbG9yTW9kZV07XG4gIGNvbnN0IHZpc3VhbEFwcGVhcmFuY2UgPSB0aGVtZS5jaGFydHMueHkuYXBwZWFyYW5jZShwYWxldHRlLCBjb2xvck1vZGUsIHVuZGVmaW5lZCwgXCJub25lXCIpO1xuICBjb25zdCB2aXN1YWxTdHlsZSA9IHRoZW1lLmNoYXJ0cy54eS5zdHlsZTtcblxuICBsZXQgbWluWSA9IEluZmluaXR5O1xuICBjb25zdCBtYXJrZXJzOiBKU1guRWxlbWVudFtdID0gW107XG4gIGlmIChkYXRhICE9IG51bGwgJiYgZG9tYWluWCAhPSBudWxsICYmIHNsaWNlLmRvbWFpblhJbmRleCAhPSBudWxsKSB7XG4gICAgLy8gdXNlIGRvbWFpbiBpbmRleCB0byBsb2NhdGUgdGhlIGNvcnJlc3BvbmRpbmcgdmFsdWVcbiAgICBjb25zdCBkeCA9IGRvbWFpblgudmFsdWVzW3NsaWNlLmRvbWFpblhJbmRleF07XG4gICAgaWYgKGR4ICE9IG51bGwpIHtcbiAgICAgIGRhdGEuZm9yRWFjaCgoZCwgaW5kZXgpID0+IHtcbiAgICAgICAgY29uc3QgcCA9IGZpbmRWYWx1ZShkLCAocCkgPT4gZG9tYWluWC5pc0VxdWFsKHAueCwgZHgpKTtcbiAgICAgICAgaWYgKHAgIT0gbnVsbCkge1xuICAgICAgICAgIGNvbnN0IF9wID0gcCBhcyB1bmtub3duIGFzIFhZQ29tcHV0ZWRWYWx1ZTtcbiAgICAgICAgICBpZiAoX3AuYyAhPSBudWxsICYmIHR5cGVvZiBwLnkgPT09IFwibnVtYmVyXCIgJiYgaXNGaW5pdGUocC55KSkge1xuICAgICAgICAgICAgbWFya2Vycy5wdXNoKDxjaXJjbGUga2V5PXtgXyR7aW5kZXh9YH0gY3g9ezB9IGN5PXtfcC5jLnl9IHI9ezQuNX0gc3Ryb2tlPXtwYWxldHRlLndoaXRlfSBmaWxsPXtkLmNvbG9yfSAvPik7XG4gICAgICAgICAgICBpZiAoX3AuYy55IDwgbWluWSkge1xuICAgICAgICAgICAgICBtaW5ZID0gX3AuYy55O1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgcmV0dXJuIG1hcmtlcnMubGVuZ3RoID4gMCA/IChcbiAgICA8Z1xuICAgICAgdHJhbnNmb3JtPXtgdHJhbnNsYXRlKCR7b2Zmc2V0ICsgc2xpY2UueH0sMClgfVxuICAgICAgY3NzPXtTdHlsZVRvb2x0aXBBbmltYXRpb24oXG4gICAgICAgIHRoZW1lLmNoYXJ0cy54eS5hbmltYXRpb24sXG4gICAgICAgIHZpc3VhbEFwcGVhcmFuY2UudG9vbHRpcC5saW5lLFxuICAgICAgICB2aXN1YWxTdHlsZS50b29sdGlwLmxpbmVTdHJva2VcbiAgICAgICl9PlxuICAgICAgPGxpbmUgeDE9ezB9IHgyPXswfSB5MT17bWluWX0geTI9e2Jhc2VsaW5lfSAvPlxuICAgICAge21hcmtlcnN9XG4gICAgPC9nPlxuICApIDogbnVsbDtcbn07XG4iXX0= */");
export const XYTooltipLayer = _ref => {
let {
theme,
colorMode,
offset,
data,
domainX,
baseline
} = _ref;
const slice = useContext(ChartSliceContext);
if (slice == null || slice.x == null) {
return null;
}
const palette = theme.palette[colorMode];
const visualAppearance = theme.charts.xy.appearance(palette, colorMode, undefined, "none");
const visualStyle = theme.charts.xy.style;
let minY = Infinity;
const markers = [];
if (data != null && domainX != null && slice.domainXIndex != null) {
// use domain index to locate the corresponding value
const dx = domainX.values[slice.domainXIndex];
if (dx != null) {
data.forEach((d, index) => {
const p = findValue(d, p => domainX.isEqual(p.x, dx));
if (p != null) {
const _p = p;
if (_p.c != null && typeof p.y === "number" && isFinite(p.y)) {
markers.push(_jsx("circle", {
cx: 0,
cy: _p.c.y,
r: 4.5,
stroke: palette.white,
fill: d.color
}, "_".concat(index)));
if (_p.c.y < minY) {
minY = _p.c.y;
}
}
}
});
}
}
return markers.length > 0 ? _jsxs("g", {
transform: "translate(".concat(offset + slice.x, ",0)"),
css: StyleTooltipAnimation(theme.charts.xy.animation, visualAppearance.tooltip.line, visualStyle.tooltip.lineStroke),
children: [_jsx("line", {
x1: 0,
x2: 0,
y1: minY,
y2: baseline
}), markers]
}) : null;
};
//# sourceMappingURL=XYTooltipLayer.js.map