@apptane/react-ui-charts
Version:
Chart components in Apptane React UI framework
72 lines (70 loc) • 7.65 kB
JavaScript
import { resolveFont } from "@apptane/react-ui-theme";
import { StyleTextBase } from "@apptane/react-ui-typography";
import { css } from "@emotion/react";
import { useMemo } from "react";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
const StyleAxisLine = (font, text, stroke, width) => /*#__PURE__*/css("text{", StyleTextBase(font), ";fill:", text, ";user-select:none;}line{stroke:", stroke, ";stroke-width:", width, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyleAxisLine;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wYXJ0cy9DaGFydEF4aXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVE4RiIsImZpbGUiOiIuLi8uLi9zcmMvcGFydHMvQ2hhcnRBeGlzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yIH0gZnJvbSBcIkBhcHB0YW5lL3JlYWN0LXVpLWNvcmVcIjtcbmltcG9ydCB7IEZvbnRQcm9wZXJ0aWVzLCByZXNvbHZlRm9udCB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS10aGVtZVwiO1xuaW1wb3J0IHsgU3R5bGVUZXh0QmFzZSB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS10eXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IERvbWFpblZhbHVlIH0gZnJvbSBcIi4uL2NvbW1vbi9UeXBlcy5qc1wiO1xuaW1wb3J0IHsgQ2hhcnRBeGlzUHJvcHMgfSBmcm9tIFwiLi9DaGFydEF4aXMudHlwZXMuanNcIjtcblxuY29uc3QgU3R5bGVBeGlzTGluZSA9IChmb250OiBGb250UHJvcGVydGllcywgdGV4dDogQ29sb3IsIHN0cm9rZTogQ29sb3IsIHdpZHRoOiBudW1iZXIpID0+IGNzc2BcbiAgdGV4dCB7XG4gICAgJHtTdHlsZVRleHRCYXNlKGZvbnQpfTtcbiAgICBmaWxsOiAke3RleHR9O1xuICAgIHVzZXItc2VsZWN0OiBub25lO1xuICB9XG5cbiAgbGluZSB7XG4gICAgc3Ryb2tlOiAke3N0cm9rZX07XG4gICAgc3Ryb2tlLXdpZHRoOiAke3dpZHRofTtcbiAgICAvLyBzaGFwZS1yZW5kZXJpbmc6IGNyaXNwZWRnZXM7XG4gIH1cbmA7XG5cbmV4cG9ydCB0eXBlIENoYXJ0QXhpc1Byb3BzRXg8VCBleHRlbmRzIERvbWFpblZhbHVlPiA9IENoYXJ0QXhpc1Byb3BzPFQ+ICYge1xuICBleHRlbnQ6IG51bWJlcjtcbiAgZm9ybWF0OiAodmFsdWU6IFQpID0+IHN0cmluZztcbiAgdGlja3M6IFRbXTtcbiAgdGlja1Bvc2l0aW9uOiAodmFsdWU6IFQpID0+IG51bWJlciB8IHVuZGVmaW5lZDtcbn07XG5cbmV4cG9ydCBmdW5jdGlvbiBDaGFydEF4aXM8VCBleHRlbmRzIERvbWFpblZhbHVlPih7XG4gIGNvbXBvbmVudElkLFxuICB0aGVtZSxcbiAgY29sb3JNb2RlLFxuICBvcmllbnRhdGlvbixcbiAgb2Zmc2V0ID0gMCxcbiAgc3BhbixcbiAgZXh0ZW50LFxuICB0ZXh0T2Zmc2V0ID0gMCxcbiAgYXhpc1Zpc2libGUgPSB0cnVlLFxuICB0aWNrU2l6ZSxcbiAgdGlja1Zpc2libGUgPSB0cnVlLFxuICB0aWNrUG9zaXRpb24sXG4gIGZvcm1hdCxcbiAgdGlja3MsXG4gIHRpdGxlLFxufTogQ2hhcnRBeGlzUHJvcHNFeDxUPikge1xuICBjb25zdCBob3Jpem9udGFsID0gb3JpZW50YXRpb24gPT09IFwieFwiO1xuXG4gIGNvbnN0IHZpc3VhbEFwcGVhcmFuY2UgPSB0aGVtZS5jaGFydHMueHkuYXBwZWFyYW5jZSh0aGVtZS5wYWxldHRlW2NvbG9yTW9kZV0sIGNvbG9yTW9kZSwgdW5kZWZpbmVkLCBcIm5vbmVcIik7XG4gIGNvbnN0IHZpc3VhbFN0eWxlID0gdGhlbWUuY2hhcnRzLnh5LnN0eWxlO1xuICBjb25zdCBheGlzU3R5bGUgPSBob3Jpem9udGFsID8gdmlzdWFsU3R5bGUueEF4aXMgOiB2aXN1YWxTdHlsZS55QXhpcztcblxuICBjb25zdCBmb250ID0gdXNlTWVtbyhcbiAgICAoKSA9PiByZXNvbHZlRm9udCh0aGVtZS50eXBvZ3JhcGh5LCB2aXN1YWxTdHlsZS5mb250LmF4aXMpLFxuICAgIFt0aGVtZS50eXBvZ3JhcGh5LCB2aXN1YWxTdHlsZS5mb250LmF4aXNdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Z1xuICAgICAgdHJhbnNmb3JtPXtob3Jpem9udGFsID8gYHRyYW5zbGF0ZSgke29mZnNldH0sMClgIDogYHRyYW5zbGF0ZSgwLCR7b2Zmc2V0fSlgfVxuICAgICAgY3NzPXtTdHlsZUF4aXNMaW5lKGZvbnQsIHZpc3VhbEFwcGVhcmFuY2UuYXhpcy50ZXh0LCB2aXN1YWxBcHBlYXJhbmNlLmF4aXMubGluZSwgYXhpc1N0eWxlLmF4aXNTdHJva2UpfT5cbiAgICAgIHtheGlzVmlzaWJsZSAmJlxuICAgICAgICAoaG9yaXpvbnRhbCA/IDxsaW5lIHgxPXswfSB4Mj17ZXh0ZW50fSB5MT17MH0geTI9ezB9IC8+IDogPGxpbmUgeDE9e3NwYW59IHgyPXtzcGFufSB5MT17MH0geTI9e2V4dGVudH0gLz4pfVxuICAgICAge3RpY2tzLm1hcCgodmFsdWUsIGluZGV4KSA9PiB7XG4gICAgICAgIGNvbnN0IHBvc2l0aW9uID0gdGlja1Bvc2l0aW9uKHZhbHVlKTtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICBwb3NpdGlvbiAhPSBudWxsICYmXG4gICAgICAgICAgcG9zaXRpb24gPj0gMCAmJlxuICAgICAgICAgIHBvc2l0aW9uIDw9IGV4dGVudCAmJiAoXG4gICAgICAgICAgICA8ZyBrZXk9e2BfJHtpbmRleH1gfSB0cmFuc2Zvcm09e2hvcml6b250YWwgPyBgdHJhbnNsYXRlKCR7cG9zaXRpb259LDApYCA6IGB0cmFuc2xhdGUoMCwke3Bvc2l0aW9ufSlgfT5cbiAgICAgICAgICAgICAge3RpY2tWaXNpYmxlICYmIDxsaW5lIHkxPXswfSB4MT17MH0geTI9e2hvcml6b250YWwgPyB0aWNrU2l6ZSA6IDB9IHgyPXtob3Jpem9udGFsID8gMCA6IHRpY2tTaXplfSAvPn1cbiAgICAgICAgICAgICAgPHRleHRcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm09e2hvcml6b250YWwgPyBgdHJhbnNsYXRlKDAsJHt0ZXh0T2Zmc2V0fSlgIDogYHRyYW5zbGF0ZSgke3RleHRPZmZzZXR9LDApYH1cbiAgICAgICAgICAgICAgICBmaWx0ZXI9e2hvcml6b250YWwgPyB1bmRlZmluZWQgOiBgdXJsKCMke2NvbXBvbmVudElkID8/IFwiLS1hcHB0YW5lLWNoYXJ0XCJ9LWF4aXMtbGFiZWwtYmFjaylgfVxuICAgICAgICAgICAgICAgIHRleHRBbmNob3I9e2hvcml6b250YWwgPyBcIm1pZGRsZVwiIDogXCJzdGFydFwifVxuICAgICAgICAgICAgICAgIGRvbWluYW50QmFzZWxpbmU9e2hvcml6b250YWwgPyBcInRleHQtYmVmb3JlLWVkZ2VcIiA6IFwibWlkZGxlXCJ9PlxuICAgICAgICAgICAgICAgIHtmb3JtYXQodmFsdWUpfVxuICAgICAgICAgICAgICA8L3RleHQ+XG4gICAgICAgICAgICA8L2c+XG4gICAgICAgICAgKVxuICAgICAgICApO1xuICAgICAgfSl9XG4gICAgICB7aG9yaXpvbnRhbCAmJiB0aXRsZSAmJiAoXG4gICAgICAgIDx0ZXh0XG4gICAgICAgICAgdHJhbnNmb3JtPXtgdHJhbnNsYXRlKCR7ZXh0ZW50IC0gMn0sJHt0ZXh0T2Zmc2V0fSlgfVxuICAgICAgICAgIGZpbHRlcj17YHVybCgjJHtjb21wb25lbnRJZCA/PyBcIi0tYXBwdGFuZS1jaGFydFwifS1heGlzLXRpdGxlLWJhY2spYH1cbiAgICAgICAgICB0ZXh0QW5jaG9yPVwiZW5kXCJcbiAgICAgICAgICBkb21pbmFudEJhc2VsaW5lPVwidGV4dC1iZWZvcmUtZWRnZVwiPlxuICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgPC90ZXh0PlxuICAgICAgKX1cbiAgICA8L2c+XG4gICk7XG59XG4iXX0= */");
export function ChartAxis(_ref) {
let {
componentId,
theme,
colorMode,
orientation,
offset = 0,
span,
extent,
textOffset = 0,
axisVisible = true,
tickSize,
tickVisible = true,
tickPosition,
format,
ticks,
title
} = _ref;
const horizontal = orientation === "x";
const visualAppearance = theme.charts.xy.appearance(theme.palette[colorMode], colorMode, undefined, "none");
const visualStyle = theme.charts.xy.style;
const axisStyle = horizontal ? visualStyle.xAxis : visualStyle.yAxis;
const font = useMemo(() => resolveFont(theme.typography, visualStyle.font.axis), [theme.typography, visualStyle.font.axis]);
return _jsxs("g", {
transform: horizontal ? "translate(".concat(offset, ",0)") : "translate(0,".concat(offset, ")"),
css: StyleAxisLine(font, visualAppearance.axis.text, visualAppearance.axis.line, axisStyle.axisStroke),
children: [axisVisible && (horizontal ? _jsx("line", {
x1: 0,
x2: extent,
y1: 0,
y2: 0
}) : _jsx("line", {
x1: span,
x2: span,
y1: 0,
y2: extent
})), ticks.map((value, index) => {
const position = tickPosition(value);
return position != null && position >= 0 && position <= extent && _jsxs("g", {
transform: horizontal ? "translate(".concat(position, ",0)") : "translate(0,".concat(position, ")"),
children: [tickVisible && _jsx("line", {
y1: 0,
x1: 0,
y2: horizontal ? tickSize : 0,
x2: horizontal ? 0 : tickSize
}), _jsx("text", {
transform: horizontal ? "translate(0,".concat(textOffset, ")") : "translate(".concat(textOffset, ",0)"),
filter: horizontal ? undefined : "url(#".concat(componentId !== null && componentId !== void 0 ? componentId : "--apptane-chart", "-axis-label-back)"),
textAnchor: horizontal ? "middle" : "start",
dominantBaseline: horizontal ? "text-before-edge" : "middle",
children: format(value)
})]
}, "_".concat(index));
}), horizontal && title && _jsx("text", {
transform: "translate(".concat(extent - 2, ",").concat(textOffset, ")"),
filter: "url(#".concat(componentId !== null && componentId !== void 0 ? componentId : "--apptane-chart", "-axis-title-back)"),
textAnchor: "end",
dominantBaseline: "text-before-edge",
children: title
})]
});
}
//# sourceMappingURL=ChartAxis.js.map