@apptane/react-ui-charts
Version:
Chart components in Apptane React UI framework
84 lines (77 loc) • 12.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["datum", "onMouseEnter", "onMouseLeave", "onClick"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 { Text } from "@apptane/react-ui-typography";
import { css } from "@emotion/react";
import { useCallback } from "react";
import { ChartMarker } from "./ChartMarker.js";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
const StyleBase = process.env.NODE_ENV === "production" ? {
name: "s5xdrg",
styles: "display:flex;align-items:center"
} : {
name: "1kwb58c-StyleBase",
styles: "display:flex;align-items:center;label:StyleBase;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wYXJ0cy9DaGFydExlZ2VuZEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9xQiIsImZpbGUiOiIuLi8uLi9zcmMvcGFydHMvQ2hhcnRMZWdlbmRJdGVtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRleHQgfSBmcm9tIFwiQGFwcHRhbmUvcmVhY3QtdWktdHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyB1c2VDYWxsYmFjayB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRGF0dW0gfSBmcm9tIFwiLi4vY29tbW9uL1R5cGVzLmpzXCI7XG5pbXBvcnQgeyBDaGFydExlZ2VuZEl0ZW1Qcm9wcyB9IGZyb20gXCIuL0NoYXJ0TGVnZW5kSXRlbS50eXBlcy5qc1wiO1xuaW1wb3J0IHsgQ2hhcnRNYXJrZXIgfSBmcm9tIFwiLi9DaGFydE1hcmtlci5qc1wiO1xuXG5jb25zdCBTdHlsZUJhc2UgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5jb25zdCBTdHlsZUludGVyYWN0aXZlID0gY3NzYFxuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG4vKipcbiAqIENoYXJ0IGxlZ2VuZCBpdGVtIGNvbXBvbmVudC5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIENoYXJ0TGVnZW5kSXRlbTxUIGV4dGVuZHMgRGF0dW08RGF0YT4sIERhdGEgPSB2b2lkPih7XG4gIGRhdHVtLFxuICBvbk1vdXNlRW50ZXIsXG4gIG9uTW91c2VMZWF2ZSxcbiAgb25DbGljayxcbiAgLi4ub3RoZXJcbn06IENoYXJ0TGVnZW5kSXRlbVByb3BzPFQsIERhdGE+KSB7XG4gIGNvbnN0IGhhbmRsZU1vdXNlRW50ZXIgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICh0eXBlb2Ygb25Nb3VzZUVudGVyID09PSBcImZ1bmN0aW9uXCIpIHtcbiAgICAgICAgb25Nb3VzZUVudGVyKGRhdHVtLCBldmVudCk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbZGF0dW0sIG9uTW91c2VFbnRlcl1cbiAgKTtcblxuICBjb25zdCBoYW5kbGVNb3VzZUxlYXZlID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB7XG4gICAgICBpZiAodHlwZW9mIG9uTW91c2VMZWF2ZSA9PT0gXCJmdW5jdGlvblwiKSB7XG4gICAgICAgIG9uTW91c2VMZWF2ZShkYXR1bSwgZXZlbnQpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2RhdHVtLCBvbk1vdXNlTGVhdmVdXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICh0eXBlb2Ygb25DbGljayA9PT0gXCJmdW5jdGlvblwiKSB7XG4gICAgICAgIG9uQ2xpY2soZGF0dW0sIGV2ZW50KTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtkYXR1bSwgb25DbGlja11cbiAgKTtcblxuICBjb25zdCBwYWxldHRlID0gb3RoZXIudGhlbWUucGFsZXR0ZVtvdGhlci5jb2xvck1vZGVdO1xuICBjb25zdCBpbnRlcmFjdGl2ZSA9IG9uQ2xpY2sgfHwgb25Nb3VzZUVudGVyO1xuICBjb25zdCB2aXN1YWxTdHlsZSA9IG90aGVyLnRoZW1lLmNoYXJ0cy54eS5zdHlsZTtcbiAgY29uc3QgdmlzdWFsQXBwZWFyYW5jZSA9IG90aGVyLnRoZW1lLmNoYXJ0cy54eS5hcHBlYXJhbmNlKHBhbGV0dGUsIG90aGVyLmNvbG9yTW9kZSwgdW5kZWZpbmVkLCBcIm5vbmVcIik7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e1tTdHlsZUJhc2UsIGludGVyYWN0aXZlICYmIFN0eWxlSW50ZXJhY3RpdmVdfVxuICAgICAgb25Nb3VzZUVudGVyPXtoYW5kbGVNb3VzZUVudGVyfVxuICAgICAgb25Nb3VzZUxlYXZlPXtoYW5kbGVNb3VzZUxlYXZlfVxuICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgPENoYXJ0TWFya2VyIHsuLi5vdGhlcn0gY29sb3I9e2RhdHVtLmNvbG9yID8/IHBhbGV0dGUuZ3JheVs1MDBdfSAvPlxuICAgICAgPFRleHQgY29sb3I9e3Zpc3VhbEFwcGVhcmFuY2UubGVnZW5kfSB7Li4udmlzdWFsU3R5bGUuZm9udC5sZWdlbmR9IG1hcmdpbkxlZnQ9e3Zpc3VhbFN0eWxlLmxlZ2VuZC5tYXJrZXJTcGFjaW5nfT5cbiAgICAgICAge2RhdHVtLmxhYmVsfVxuICAgICAgPC9UZXh0PlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19 */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const StyleInteractive = process.env.NODE_ENV === "production" ? {
name: "e0dnmk",
styles: "cursor:pointer"
} : {
name: "xag3c0-StyleInteractive",
styles: "cursor:pointer;label:StyleInteractive;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wYXJ0cy9DaGFydExlZ2VuZEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVk0QiIsImZpbGUiOiIuLi8uLi9zcmMvcGFydHMvQ2hhcnRMZWdlbmRJdGVtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRleHQgfSBmcm9tIFwiQGFwcHRhbmUvcmVhY3QtdWktdHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyB1c2VDYWxsYmFjayB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRGF0dW0gfSBmcm9tIFwiLi4vY29tbW9uL1R5cGVzLmpzXCI7XG5pbXBvcnQgeyBDaGFydExlZ2VuZEl0ZW1Qcm9wcyB9IGZyb20gXCIuL0NoYXJ0TGVnZW5kSXRlbS50eXBlcy5qc1wiO1xuaW1wb3J0IHsgQ2hhcnRNYXJrZXIgfSBmcm9tIFwiLi9DaGFydE1hcmtlci5qc1wiO1xuXG5jb25zdCBTdHlsZUJhc2UgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5jb25zdCBTdHlsZUludGVyYWN0aXZlID0gY3NzYFxuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG4vKipcbiAqIENoYXJ0IGxlZ2VuZCBpdGVtIGNvbXBvbmVudC5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIENoYXJ0TGVnZW5kSXRlbTxUIGV4dGVuZHMgRGF0dW08RGF0YT4sIERhdGEgPSB2b2lkPih7XG4gIGRhdHVtLFxuICBvbk1vdXNlRW50ZXIsXG4gIG9uTW91c2VMZWF2ZSxcbiAgb25DbGljayxcbiAgLi4ub3RoZXJcbn06IENoYXJ0TGVnZW5kSXRlbVByb3BzPFQsIERhdGE+KSB7XG4gIGNvbnN0IGhhbmRsZU1vdXNlRW50ZXIgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICh0eXBlb2Ygb25Nb3VzZUVudGVyID09PSBcImZ1bmN0aW9uXCIpIHtcbiAgICAgICAgb25Nb3VzZUVudGVyKGRhdHVtLCBldmVudCk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbZGF0dW0sIG9uTW91c2VFbnRlcl1cbiAgKTtcblxuICBjb25zdCBoYW5kbGVNb3VzZUxlYXZlID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB7XG4gICAgICBpZiAodHlwZW9mIG9uTW91c2VMZWF2ZSA9PT0gXCJmdW5jdGlvblwiKSB7XG4gICAgICAgIG9uTW91c2VMZWF2ZShkYXR1bSwgZXZlbnQpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2RhdHVtLCBvbk1vdXNlTGVhdmVdXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICh0eXBlb2Ygb25DbGljayA9PT0gXCJmdW5jdGlvblwiKSB7XG4gICAgICAgIG9uQ2xpY2soZGF0dW0sIGV2ZW50KTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtkYXR1bSwgb25DbGlja11cbiAgKTtcblxuICBjb25zdCBwYWxldHRlID0gb3RoZXIudGhlbWUucGFsZXR0ZVtvdGhlci5jb2xvck1vZGVdO1xuICBjb25zdCBpbnRlcmFjdGl2ZSA9IG9uQ2xpY2sgfHwgb25Nb3VzZUVudGVyO1xuICBjb25zdCB2aXN1YWxTdHlsZSA9IG90aGVyLnRoZW1lLmNoYXJ0cy54eS5zdHlsZTtcbiAgY29uc3QgdmlzdWFsQXBwZWFyYW5jZSA9IG90aGVyLnRoZW1lLmNoYXJ0cy54eS5hcHBlYXJhbmNlKHBhbGV0dGUsIG90aGVyLmNvbG9yTW9kZSwgdW5kZWZpbmVkLCBcIm5vbmVcIik7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e1tTdHlsZUJhc2UsIGludGVyYWN0aXZlICYmIFN0eWxlSW50ZXJhY3RpdmVdfVxuICAgICAgb25Nb3VzZUVudGVyPXtoYW5kbGVNb3VzZUVudGVyfVxuICAgICAgb25Nb3VzZUxlYXZlPXtoYW5kbGVNb3VzZUxlYXZlfVxuICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgPENoYXJ0TWFya2VyIHsuLi5vdGhlcn0gY29sb3I9e2RhdHVtLmNvbG9yID8/IHBhbGV0dGUuZ3JheVs1MDBdfSAvPlxuICAgICAgPFRleHQgY29sb3I9e3Zpc3VhbEFwcGVhcmFuY2UubGVnZW5kfSB7Li4udmlzdWFsU3R5bGUuZm9udC5sZWdlbmR9IG1hcmdpbkxlZnQ9e3Zpc3VhbFN0eWxlLmxlZ2VuZC5tYXJrZXJTcGFjaW5nfT5cbiAgICAgICAge2RhdHVtLmxhYmVsfVxuICAgICAgPC9UZXh0PlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19 */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
/**
* Chart legend item component.
*/
export function ChartLegendItem(_ref) {
var _datum$color;
let {
datum,
onMouseEnter,
onMouseLeave,
onClick
} = _ref,
other = _objectWithoutProperties(_ref, _excluded);
const handleMouseEnter = useCallback(event => {
if (typeof onMouseEnter === "function") {
onMouseEnter(datum, event);
}
}, [datum, onMouseEnter]);
const handleMouseLeave = useCallback(event => {
if (typeof onMouseLeave === "function") {
onMouseLeave(datum, event);
}
}, [datum, onMouseLeave]);
const handleClick = useCallback(event => {
if (typeof onClick === "function") {
onClick(datum, event);
}
}, [datum, onClick]);
const palette = other.theme.palette[other.colorMode];
const interactive = onClick || onMouseEnter;
const visualStyle = other.theme.charts.xy.style;
const visualAppearance = other.theme.charts.xy.appearance(palette, other.colorMode, undefined, "none");
return _jsxs("div", {
css: [StyleBase, interactive && StyleInteractive, process.env.NODE_ENV === "production" ? "" : ";label:ChartLegendItem;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wYXJ0cy9DaGFydExlZ2VuZEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRETSIsImZpbGUiOiIuLi8uLi9zcmMvcGFydHMvQ2hhcnRMZWdlbmRJdGVtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRleHQgfSBmcm9tIFwiQGFwcHRhbmUvcmVhY3QtdWktdHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyB1c2VDYWxsYmFjayB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRGF0dW0gfSBmcm9tIFwiLi4vY29tbW9uL1R5cGVzLmpzXCI7XG5pbXBvcnQgeyBDaGFydExlZ2VuZEl0ZW1Qcm9wcyB9IGZyb20gXCIuL0NoYXJ0TGVnZW5kSXRlbS50eXBlcy5qc1wiO1xuaW1wb3J0IHsgQ2hhcnRNYXJrZXIgfSBmcm9tIFwiLi9DaGFydE1hcmtlci5qc1wiO1xuXG5jb25zdCBTdHlsZUJhc2UgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5jb25zdCBTdHlsZUludGVyYWN0aXZlID0gY3NzYFxuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG4vKipcbiAqIENoYXJ0IGxlZ2VuZCBpdGVtIGNvbXBvbmVudC5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIENoYXJ0TGVnZW5kSXRlbTxUIGV4dGVuZHMgRGF0dW08RGF0YT4sIERhdGEgPSB2b2lkPih7XG4gIGRhdHVtLFxuICBvbk1vdXNlRW50ZXIsXG4gIG9uTW91c2VMZWF2ZSxcbiAgb25DbGljayxcbiAgLi4ub3RoZXJcbn06IENoYXJ0TGVnZW5kSXRlbVByb3BzPFQsIERhdGE+KSB7XG4gIGNvbnN0IGhhbmRsZU1vdXNlRW50ZXIgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICh0eXBlb2Ygb25Nb3VzZUVudGVyID09PSBcImZ1bmN0aW9uXCIpIHtcbiAgICAgICAgb25Nb3VzZUVudGVyKGRhdHVtLCBldmVudCk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbZGF0dW0sIG9uTW91c2VFbnRlcl1cbiAgKTtcblxuICBjb25zdCBoYW5kbGVNb3VzZUxlYXZlID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB7XG4gICAgICBpZiAodHlwZW9mIG9uTW91c2VMZWF2ZSA9PT0gXCJmdW5jdGlvblwiKSB7XG4gICAgICAgIG9uTW91c2VMZWF2ZShkYXR1bSwgZXZlbnQpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2RhdHVtLCBvbk1vdXNlTGVhdmVdXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICh0eXBlb2Ygb25DbGljayA9PT0gXCJmdW5jdGlvblwiKSB7XG4gICAgICAgIG9uQ2xpY2soZGF0dW0sIGV2ZW50KTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtkYXR1bSwgb25DbGlja11cbiAgKTtcblxuICBjb25zdCBwYWxldHRlID0gb3RoZXIudGhlbWUucGFsZXR0ZVtvdGhlci5jb2xvck1vZGVdO1xuICBjb25zdCBpbnRlcmFjdGl2ZSA9IG9uQ2xpY2sgfHwgb25Nb3VzZUVudGVyO1xuICBjb25zdCB2aXN1YWxTdHlsZSA9IG90aGVyLnRoZW1lLmNoYXJ0cy54eS5zdHlsZTtcbiAgY29uc3QgdmlzdWFsQXBwZWFyYW5jZSA9IG90aGVyLnRoZW1lLmNoYXJ0cy54eS5hcHBlYXJhbmNlKHBhbGV0dGUsIG90aGVyLmNvbG9yTW9kZSwgdW5kZWZpbmVkLCBcIm5vbmVcIik7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e1tTdHlsZUJhc2UsIGludGVyYWN0aXZlICYmIFN0eWxlSW50ZXJhY3RpdmVdfVxuICAgICAgb25Nb3VzZUVudGVyPXtoYW5kbGVNb3VzZUVudGVyfVxuICAgICAgb25Nb3VzZUxlYXZlPXtoYW5kbGVNb3VzZUxlYXZlfVxuICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgPENoYXJ0TWFya2VyIHsuLi5vdGhlcn0gY29sb3I9e2RhdHVtLmNvbG9yID8/IHBhbGV0dGUuZ3JheVs1MDBdfSAvPlxuICAgICAgPFRleHQgY29sb3I9e3Zpc3VhbEFwcGVhcmFuY2UubGVnZW5kfSB7Li4udmlzdWFsU3R5bGUuZm9udC5sZWdlbmR9IG1hcmdpbkxlZnQ9e3Zpc3VhbFN0eWxlLmxlZ2VuZC5tYXJrZXJTcGFjaW5nfT5cbiAgICAgICAge2RhdHVtLmxhYmVsfVxuICAgICAgPC9UZXh0PlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19 */"],
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onClick: handleClick,
children: [_jsx(ChartMarker, _objectSpread(_objectSpread({}, other), {}, {
color: (_datum$color = datum.color) !== null && _datum$color !== void 0 ? _datum$color : palette.gray[500]
})), _jsx(Text, _objectSpread(_objectSpread({
color: visualAppearance.legend
}, visualStyle.font.legend), {}, {
marginLeft: visualStyle.legend.markerSpacing,
children: datum.label
}))]
});
}
//# sourceMappingURL=ChartLegendItem.js.map