@apptane/react-ui-charts
Version:
Chart components in Apptane React UI framework
67 lines (63 loc) • 9.36 kB
JavaScript
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
import { css } from "@emotion/react";
import { useMemo } from "react";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
const StyleGridLine = (stroke, width, dash) => /*#__PURE__*/css("line{stroke:", stroke, ";stroke-width:", width, ";stroke-dasharray:", dash, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyleGridLine;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wYXJ0cy9DaGFydEdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU15RSIsImZpbGUiOiIuLi8uLi9zcmMvcGFydHMvQ2hhcnRHcmlkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yIH0gZnJvbSBcIkBhcHB0YW5lL3JlYWN0LXVpLWNvcmVcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRG9tYWluVmFsdWUgfSBmcm9tIFwiLi4vY29tbW9uL1R5cGVzLmpzXCI7XG5pbXBvcnQgeyBDaGFydEdyaWRQcm9wcyB9IGZyb20gXCIuL0NoYXJ0R3JpZC50eXBlcy5qc1wiO1xuXG5jb25zdCBTdHlsZUdyaWRMaW5lID0gKHN0cm9rZTogQ29sb3IsIHdpZHRoOiBudW1iZXIsIGRhc2g6IHN0cmluZykgPT4gY3NzYFxuICBsaW5lIHtcbiAgICBzdHJva2U6ICR7c3Ryb2tlfTtcbiAgICBzdHJva2Utd2lkdGg6ICR7d2lkdGh9O1xuICAgIHN0cm9rZS1kYXNoYXJyYXk6ICR7ZGFzaH07XG4gICAgLy8gc2hhcGUtcmVuZGVyaW5nOiBjcmlzcGVkZ2VzO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZUdyaWRMaW5lQm90dG9tID0gY3NzYFxuICA+IGxpbmUge1xuICAgIHN0cm9rZS1kYXNoYXJyYXk6IG5vbmUgIWltcG9ydGFudDtcbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgQ2hhcnRHcmlkUHJvcHNFeDxUIGV4dGVuZHMgRG9tYWluVmFsdWU+ID0gQ2hhcnRHcmlkUHJvcHM8VD4gJiB7XG4gIHRpY2tzOiBUW107XG4gIHRpY2tQb3NpdGlvbjogKHZhbHVlOiBUKSA9PiBudW1iZXIgfCBudW1iZXJbXSB8IHVuZGVmaW5lZDtcbn07XG5cbmV4cG9ydCBmdW5jdGlvbiBDaGFydEdyaWQ8VCBleHRlbmRzIERvbWFpblZhbHVlPih7XG4gIHRoZW1lLFxuICBjb2xvck1vZGUsXG4gIG9yaWVudGF0aW9uLFxuICBsZWZ0ID0gMCxcbiAgdG9wID0gMCxcbiAgd2lkdGgsXG4gIGhlaWdodCxcbiAgdGlja1Bvc2l0aW9uLFxuICB0aWNrcyxcbn06IENoYXJ0R3JpZFByb3BzRXg8VD4pIHtcbiAgY29uc3QgaG9yaXpvbnRhbCA9IG9yaWVudGF0aW9uID09PSBcImhvcml6b250YWxcIjtcblxuICBjb25zdCB2aXN1YWxBcHBlYXJhbmNlID0gdGhlbWUuY2hhcnRzLnh5LmFwcGVhcmFuY2UodGhlbWUucGFsZXR0ZVtjb2xvck1vZGVdLCBjb2xvck1vZGUsIHVuZGVmaW5lZCwgXCJub25lXCIpO1xuICBjb25zdCB2aXN1YWxTdHlsZSA9IHRoZW1lLmNoYXJ0cy54eS5zdHlsZTtcbiAgY29uc3Qgc3Ryb2tlV2lkdGggPSBob3Jpem9udGFsID8gdmlzdWFsU3R5bGUueEF4aXMuZ3JpZFN0cm9rZSA6IHZpc3VhbFN0eWxlLnlBeGlzLmdyaWRTdHJva2U7XG4gIGNvbnN0IHN0cm9rZURhc2ggPSB2aXN1YWxTdHlsZS5kYXNoO1xuICBjb25zdCBleHRlbnQgPSBob3Jpem9udGFsID8gaGVpZ2h0IDogd2lkdGg7XG5cbiAgY29uc3QgcG9zaXRpb25zID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3Qgc2V0ID0gbmV3IFNldDxudW1iZXI+KCk7XG4gICAgdGlja3MuZm9yRWFjaCgodmFsdWUpID0+IHtcbiAgICAgIGNvbnN0IHAgPSB0aWNrUG9zaXRpb24odmFsdWUpO1xuICAgICAgaWYgKHAgIT0gbnVsbCkge1xuICAgICAgICBjb25zdCBwb3NpdGlvbnMgPSB0eXBlb2YgcCA9PT0gXCJudW1iZXJcIiA/IFtwXSA6IHA7XG4gICAgICAgIHBvc2l0aW9ucy5mb3JFYWNoKChwb3NpdGlvbikgPT4ge1xuICAgICAgICAgIGlmIChwb3NpdGlvbiA+PSAwICYmIHBvc2l0aW9uIDw9IGV4dGVudCkge1xuICAgICAgICAgICAgc2V0LmFkZChwb3NpdGlvbik7XG4gICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICAgIH1cbiAgICB9KTtcblxuICAgIHJldHVybiBBcnJheS5mcm9tKHNldC52YWx1ZXMoKSk7XG4gIH0sIFt0aWNrcywgdGlja1Bvc2l0aW9uLCBleHRlbnRdKTtcblxuICByZXR1cm4gKFxuICAgIDxnIHRyYW5zZm9ybT17YHRyYW5zbGF0ZSgke2xlZnR9LCR7dG9wfSlgfSBjc3M9e1N0eWxlR3JpZExpbmUodmlzdWFsQXBwZWFyYW5jZS5ncmlkLCBzdHJva2VXaWR0aCwgc3Ryb2tlRGFzaCl9PlxuICAgICAge3Bvc2l0aW9ucy5tYXAoKHBvc2l0aW9uLCBpbmRleCkgPT4gKFxuICAgICAgICA8Z1xuICAgICAgICAgIGtleT17YF8ke2luZGV4fWB9XG4gICAgICAgICAgdHJhbnNmb3JtPXtob3Jpem9udGFsID8gYHRyYW5zbGF0ZSgwLCR7cG9zaXRpb259KWAgOiBgdHJhbnNsYXRlKCR7cG9zaXRpb259LDApYH1cbiAgICAgICAgICBjc3M9e2hvcml6b250YWwgJiYgcG9zaXRpb24gPT09IGV4dGVudCA/IFN0eWxlR3JpZExpbmVCb3R0b20gOiB1bmRlZmluZWR9PlxuICAgICAgICAgIDxsaW5lIHgxPXswfSB5MT17MH0geDI9e2hvcml6b250YWwgPyB3aWR0aCA6IDB9IHkyPXtob3Jpem9udGFsID8gMCA6IGhlaWdodH0gLz5cbiAgICAgICAgPC9nPlxuICAgICAgKSl9XG4gICAgPC9nPlxuICApO1xufVxuIl19 */");
const StyleGridLineBottom = process.env.NODE_ENV === "production" ? {
name: "1wnol7p",
styles: ">line{stroke-dasharray:none!important;}"
} : {
name: "14doy80-StyleGridLineBottom",
styles: ">line{stroke-dasharray:none!important;};label:StyleGridLineBottom;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wYXJ0cy9DaGFydEdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWUrQiIsImZpbGUiOiIuLi8uLi9zcmMvcGFydHMvQ2hhcnRHcmlkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yIH0gZnJvbSBcIkBhcHB0YW5lL3JlYWN0LXVpLWNvcmVcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRG9tYWluVmFsdWUgfSBmcm9tIFwiLi4vY29tbW9uL1R5cGVzLmpzXCI7XG5pbXBvcnQgeyBDaGFydEdyaWRQcm9wcyB9IGZyb20gXCIuL0NoYXJ0R3JpZC50eXBlcy5qc1wiO1xuXG5jb25zdCBTdHlsZUdyaWRMaW5lID0gKHN0cm9rZTogQ29sb3IsIHdpZHRoOiBudW1iZXIsIGRhc2g6IHN0cmluZykgPT4gY3NzYFxuICBsaW5lIHtcbiAgICBzdHJva2U6ICR7c3Ryb2tlfTtcbiAgICBzdHJva2Utd2lkdGg6ICR7d2lkdGh9O1xuICAgIHN0cm9rZS1kYXNoYXJyYXk6ICR7ZGFzaH07XG4gICAgLy8gc2hhcGUtcmVuZGVyaW5nOiBjcmlzcGVkZ2VzO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZUdyaWRMaW5lQm90dG9tID0gY3NzYFxuICA+IGxpbmUge1xuICAgIHN0cm9rZS1kYXNoYXJyYXk6IG5vbmUgIWltcG9ydGFudDtcbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgQ2hhcnRHcmlkUHJvcHNFeDxUIGV4dGVuZHMgRG9tYWluVmFsdWU+ID0gQ2hhcnRHcmlkUHJvcHM8VD4gJiB7XG4gIHRpY2tzOiBUW107XG4gIHRpY2tQb3NpdGlvbjogKHZhbHVlOiBUKSA9PiBudW1iZXIgfCBudW1iZXJbXSB8IHVuZGVmaW5lZDtcbn07XG5cbmV4cG9ydCBmdW5jdGlvbiBDaGFydEdyaWQ8VCBleHRlbmRzIERvbWFpblZhbHVlPih7XG4gIHRoZW1lLFxuICBjb2xvck1vZGUsXG4gIG9yaWVudGF0aW9uLFxuICBsZWZ0ID0gMCxcbiAgdG9wID0gMCxcbiAgd2lkdGgsXG4gIGhlaWdodCxcbiAgdGlja1Bvc2l0aW9uLFxuICB0aWNrcyxcbn06IENoYXJ0R3JpZFByb3BzRXg8VD4pIHtcbiAgY29uc3QgaG9yaXpvbnRhbCA9IG9yaWVudGF0aW9uID09PSBcImhvcml6b250YWxcIjtcblxuICBjb25zdCB2aXN1YWxBcHBlYXJhbmNlID0gdGhlbWUuY2hhcnRzLnh5LmFwcGVhcmFuY2UodGhlbWUucGFsZXR0ZVtjb2xvck1vZGVdLCBjb2xvck1vZGUsIHVuZGVmaW5lZCwgXCJub25lXCIpO1xuICBjb25zdCB2aXN1YWxTdHlsZSA9IHRoZW1lLmNoYXJ0cy54eS5zdHlsZTtcbiAgY29uc3Qgc3Ryb2tlV2lkdGggPSBob3Jpem9udGFsID8gdmlzdWFsU3R5bGUueEF4aXMuZ3JpZFN0cm9rZSA6IHZpc3VhbFN0eWxlLnlBeGlzLmdyaWRTdHJva2U7XG4gIGNvbnN0IHN0cm9rZURhc2ggPSB2aXN1YWxTdHlsZS5kYXNoO1xuICBjb25zdCBleHRlbnQgPSBob3Jpem9udGFsID8gaGVpZ2h0IDogd2lkdGg7XG5cbiAgY29uc3QgcG9zaXRpb25zID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3Qgc2V0ID0gbmV3IFNldDxudW1iZXI+KCk7XG4gICAgdGlja3MuZm9yRWFjaCgodmFsdWUpID0+IHtcbiAgICAgIGNvbnN0IHAgPSB0aWNrUG9zaXRpb24odmFsdWUpO1xuICAgICAgaWYgKHAgIT0gbnVsbCkge1xuICAgICAgICBjb25zdCBwb3NpdGlvbnMgPSB0eXBlb2YgcCA9PT0gXCJudW1iZXJcIiA/IFtwXSA6IHA7XG4gICAgICAgIHBvc2l0aW9ucy5mb3JFYWNoKChwb3NpdGlvbikgPT4ge1xuICAgICAgICAgIGlmIChwb3NpdGlvbiA+PSAwICYmIHBvc2l0aW9uIDw9IGV4dGVudCkge1xuICAgICAgICAgICAgc2V0LmFkZChwb3NpdGlvbik7XG4gICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICAgIH1cbiAgICB9KTtcblxuICAgIHJldHVybiBBcnJheS5mcm9tKHNldC52YWx1ZXMoKSk7XG4gIH0sIFt0aWNrcywgdGlja1Bvc2l0aW9uLCBleHRlbnRdKTtcblxuICByZXR1cm4gKFxuICAgIDxnIHRyYW5zZm9ybT17YHRyYW5zbGF0ZSgke2xlZnR9LCR7dG9wfSlgfSBjc3M9e1N0eWxlR3JpZExpbmUodmlzdWFsQXBwZWFyYW5jZS5ncmlkLCBzdHJva2VXaWR0aCwgc3Ryb2tlRGFzaCl9PlxuICAgICAge3Bvc2l0aW9ucy5tYXAoKHBvc2l0aW9uLCBpbmRleCkgPT4gKFxuICAgICAgICA8Z1xuICAgICAgICAgIGtleT17YF8ke2luZGV4fWB9XG4gICAgICAgICAgdHJhbnNmb3JtPXtob3Jpem9udGFsID8gYHRyYW5zbGF0ZSgwLCR7cG9zaXRpb259KWAgOiBgdHJhbnNsYXRlKCR7cG9zaXRpb259LDApYH1cbiAgICAgICAgICBjc3M9e2hvcml6b250YWwgJiYgcG9zaXRpb24gPT09IGV4dGVudCA/IFN0eWxlR3JpZExpbmVCb3R0b20gOiB1bmRlZmluZWR9PlxuICAgICAgICAgIDxsaW5lIHgxPXswfSB5MT17MH0geDI9e2hvcml6b250YWwgPyB3aWR0aCA6IDB9IHkyPXtob3Jpem9udGFsID8gMCA6IGhlaWdodH0gLz5cbiAgICAgICAgPC9nPlxuICAgICAgKSl9XG4gICAgPC9nPlxuICApO1xufVxuIl19 */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export function ChartGrid(_ref) {
let {
theme,
colorMode,
orientation,
left = 0,
top = 0,
width,
height,
tickPosition,
ticks
} = _ref;
const horizontal = orientation === "horizontal";
const visualAppearance = theme.charts.xy.appearance(theme.palette[colorMode], colorMode, undefined, "none");
const visualStyle = theme.charts.xy.style;
const strokeWidth = horizontal ? visualStyle.xAxis.gridStroke : visualStyle.yAxis.gridStroke;
const strokeDash = visualStyle.dash;
const extent = horizontal ? height : width;
const positions = useMemo(() => {
const set = new Set();
ticks.forEach(value => {
const p = tickPosition(value);
if (p != null) {
const positions = typeof p === "number" ? [p] : p;
positions.forEach(position => {
if (position >= 0 && position <= extent) {
set.add(position);
}
});
}
});
return Array.from(set.values());
}, [ticks, tickPosition, extent]);
return _jsx("g", {
transform: "translate(".concat(left, ",").concat(top, ")"),
css: StyleGridLine(visualAppearance.grid, strokeWidth, strokeDash),
children: positions.map((position, index) => _jsx("g", {
transform: horizontal ? "translate(0,".concat(position, ")") : "translate(".concat(position, ",0)"),
css: horizontal && position === extent ? StyleGridLineBottom : undefined,
children: _jsx("line", {
x1: 0,
y1: 0,
x2: horizontal ? width : 0,
y2: horizontal ? 0 : height
})
}, "_".concat(index)))
});
}
//# sourceMappingURL=ChartGrid.js.map