@apptane/react-ui-charts/dist/xy/XYChartOverlay.js

Chart components in Apptane React UI framework

import { resolveMappedColor } from "@apptane/react-ui-core";
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 StyleOverlay = (font, text) => /*#__PURE__*/css("text{", StyleTextBase(font), ";fill:", text, ";user-select:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyleOverlay;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy94eS9YWUNoYXJ0T3ZlcmxheS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUStEIiwiZmlsZSI6Ii4uLy4uL3NyYy94eS9YWUNoYXJ0T3ZlcmxheS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb2xvciwgcmVzb2x2ZU1hcHBlZENvbG9yIH0gZnJvbSBcIkBhcHB0YW5lL3JlYWN0LXVpLWNvcmVcIjtcbmltcG9ydCB7IEZvbnRQcm9wZXJ0aWVzLCByZXNvbHZlRm9udCB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS10aGVtZVwiO1xuaW1wb3J0IHsgU3R5bGVUZXh0QmFzZSB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS10eXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IERvbWFpblhWYWx1ZSB9IGZyb20gXCIuLi9jb21tb24vVHlwZXMuanNcIjtcbmltcG9ydCB7IFhZQ2hhcnRPdmVybGF5UHJvcHMgfSBmcm9tIFwiLi9YWUNoYXJ0T3ZlcmxheS50eXBlcy5qc1wiO1xuXG5jb25zdCBTdHlsZU92ZXJsYXkgPSAoZm9udDogRm9udFByb3BlcnRpZXMsIHRleHQ6IENvbG9yKSA9PiBjc3NgXG4gIHRleHQge1xuICAgICR7U3R5bGVUZXh0QmFzZShmb250KX07XG4gICAgZmlsbDogJHt0ZXh0fTtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgfVxuYDtcblxuZnVuY3Rpb24gZ2V0VGl0bGVQb3NpdGlvbjxYIGV4dGVuZHMgRG9tYWluWFZhbHVlPihcbiAgdGl0bGVBbGlnbm1lbnQ6IFhZQ2hhcnRPdmVybGF5UHJvcHM8WD5bXCJ0aXRsZUFsaWdubWVudFwiXSxcbiAgcGFkZGluZzogbnVtYmVyLFxuICB4MDogbnVtYmVyLFxuICB4MTogbnVtYmVyLFxuICBoZWlnaHQ6IG51bWJlclxuKSB7XG4gIHN3aXRjaCAodGl0bGVBbGlnbm1lbnQpIHtcbiAgICBjYXNlIFwiYm90dG9tLWxlZnRcIjpcbiAgICAgIHJldHVybiBgJHt4MCArIHBhZGRpbmd9LCR7aGVpZ2h0IC0gcGFkZGluZ31gO1xuICAgIGNhc2UgXCJ0b3AtbGVmdFwiOlxuICAgICAgcmV0dXJuIGAke3gwICsgcGFkZGluZ30sJHtwYWRkaW5nfWA7XG4gICAgY2FzZSBcImJvdHRvbS1yaWdodFwiOlxuICAgICAgcmV0dXJuIGAke3gxIC0gcGFkZGluZ30sJHtoZWlnaHQgLSBwYWRkaW5nfWA7XG4gICAgY2FzZSBcInRvcC1yaWdodFwiOlxuICAgICAgcmV0dXJuIGAke3gxIC0gcGFkZGluZ30sJHtwYWRkaW5nfWA7XG4gIH1cbn1cblxuZXhwb3J0IGZ1bmN0aW9uIFhZQ2hhcnRPdmVybGF5PFggZXh0ZW5kcyBEb21haW5YVmFsdWU+KHtcbiAgdGhlbWUsXG4gIGNvbG9yTW9kZSxcbiAgc2NhbGVYLFxuICB3aWR0aCxcbiAgaGVpZ2h0LFxuICB0aXRsZSxcbiAgdGl0bGVBbGlnbm1lbnQgPSBcImJvdHRvbS1sZWZ0XCIsXG4gIGNvbG9yLFxuICB4MCxcbiAgeDEsXG59OiBYWUNoYXJ0T3ZlcmxheVByb3BzPFg+KSB7XG4gIGNvbnN0IHBhbGV0dGUgPSB0aGVtZS5wYWxldHRlW2NvbG9yTW9kZV07XG4gIGNvbnN0IHZpc3VhbEFwcGVhcmFuY2UgPSB0aGVtZS5jaGFydHMueHkuYXBwZWFyYW5jZShwYWxldHRlLCBjb2xvck1vZGUsIHVuZGVmaW5lZCwgXCJub25lXCIpO1xuICBjb25zdCB2aXN1YWxTdHlsZSA9IHRoZW1lLmNoYXJ0cy54eS5zdHlsZTtcblxuICBjb25zdCBmaWxsID0gY29sb3IgIT0gbnVsbCA/IHJlc29sdmVNYXBwZWRDb2xvcihwYWxldHRlLCBjb2xvcikgOiB2aXN1YWxBcHBlYXJhbmNlLm92ZXJsYXkuZmlsbDtcbiAgY29uc3QgY3gwID0gTWF0aC5tYXgoeDAgIT0gbnVsbCA/IHNjYWxlWCh4MCkgPz8gMCA6IDAsIDApO1xuICBjb25zdCBjeDEgPSBNYXRoLm1pbih4MSAhPSBudWxsID8gc2NhbGVYKHgxKSA/PyB3aWR0aCA6IHdpZHRoLCB3aWR0aCk7XG5cbiAgY29uc3QgZm9udCA9IHVzZU1lbW8oXG4gICAgKCkgPT4gcmVzb2x2ZUZvbnQodGhlbWUudHlwb2dyYXBoeSwgdmlzdWFsU3R5bGUuZm9udC5vdmVybGF5KSxcbiAgICBbdGhlbWUudHlwb2dyYXBoeSwgdmlzdWFsU3R5bGUuZm9udC5vdmVybGF5XVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPGcgY3NzPXtTdHlsZU92ZXJsYXkoZm9udCwgdmlzdWFsQXBwZWFyYW5jZS5vdmVybGF5LnRleHQpfT5cbiAgICAgIDxyZWN0IHg9e2N4MH0geT17MH0gd2lkdGg9e2N4MSAtIGN4MH0gaGVpZ2h0PXtoZWlnaHR9IGZpbGw9e2ZpbGx9IG9wYWNpdHk9e3Zpc3VhbFN0eWxlLm92ZXJsYXkub3BhY2l0eX0gLz5cbiAgICAgIHt0aXRsZSAmJiAoXG4gICAgICAgIDx0ZXh0XG4gICAgICAgICAgdHJhbnNmb3JtPXtgdHJhbnNsYXRlKCR7Z2V0VGl0bGVQb3NpdGlvbih0aXRsZUFsaWdubWVudCwgdmlzdWFsU3R5bGUub3ZlcmxheS5wYWRkaW5nLCBjeDAsIGN4MSwgaGVpZ2h0KX0pYH1cbiAgICAgICAgICB0ZXh0QW5jaG9yPXt0aXRsZUFsaWdubWVudCA9PT0gXCJ0b3AtcmlnaHRcIiB8fCB0aXRsZUFsaWdubWVudCA9PT0gXCJib3R0b20tcmlnaHRcIiA/IFwiZW5kXCIgOiBcInN0YXJ0XCJ9XG4gICAgICAgICAgZG9taW5hbnRCYXNlbGluZT17XG4gICAgICAgICAgICB0aXRsZUFsaWdubWVudCA9PT0gXCJ0b3AtcmlnaHRcIiB8fCB0aXRsZUFsaWdubWVudCA9PT0gXCJ0b3AtbGVmdFwiID8gXCJ0ZXh0LWJlZm9yZS1lZGdlXCIgOiBcInRleHQtYWZ0ZXItZWRnZVwiXG4gICAgICAgICAgfT5cbiAgICAgICAgICB7dGl0bGV9XG4gICAgICAgIDwvdGV4dD5cbiAgICAgICl9XG4gICAgPC9nPlxuICApO1xufVxuIl19 */");

function getTitlePosition(titleAlignment, padding, x0, x1, height) {
  switch (titleAlignment) {
    case "bottom-left":
      return "".concat(x0 + padding, ",").concat(height - padding);

    case "top-left":
      return "".concat(x0 + padding, ",").concat(padding);

    case "bottom-right":
      return "".concat(x1 - padding, ",").concat(height - padding);

    case "top-right":
      return "".concat(x1 - padding, ",").concat(padding);
  }
}

export function XYChartOverlay(_ref) {
  var _scaleX, _scaleX2;

  let {
    theme,
    colorMode,
    scaleX,
    width,
    height,
    title,
    titleAlignment = "bottom-left",
    color,
    x0,
    x1
  } = _ref;
  const palette = theme.palette[colorMode];
  const visualAppearance = theme.charts.xy.appearance(palette, colorMode, undefined, "none");
  const visualStyle = theme.charts.xy.style;
  const fill = color != null ? resolveMappedColor(palette, color) : visualAppearance.overlay.fill;
  const cx0 = Math.max(x0 != null ? (_scaleX = scaleX(x0)) !== null && _scaleX !== void 0 ? _scaleX : 0 : 0, 0);
  const cx1 = Math.min(x1 != null ? (_scaleX2 = scaleX(x1)) !== null && _scaleX2 !== void 0 ? _scaleX2 : width : width, width);
  const font = useMemo(() => resolveFont(theme.typography, visualStyle.font.overlay), [theme.typography, visualStyle.font.overlay]);
  return _jsxs("g", {
    css: StyleOverlay(font, visualAppearance.overlay.text),
    children: [_jsx("rect", {
      x: cx0,
      y: 0,
      width: cx1 - cx0,
      height: height,
      fill: fill,
      opacity: visualStyle.overlay.opacity
    }), title && _jsx("text", {
      transform: "translate(".concat(getTitlePosition(titleAlignment, visualStyle.overlay.padding, cx0, cx1, height), ")"),
      textAnchor: titleAlignment === "top-right" || titleAlignment === "bottom-right" ? "end" : "start",
      dominantBaseline: titleAlignment === "top-right" || titleAlignment === "top-left" ? "text-before-edge" : "text-after-edge",
      children: title
    })]
  });
}
//# sourceMappingURL=XYChartOverlay.js.map