@chakra-ui/charts/dist/cjs/bar-segment/bar-segment.cjs

Data visualization components for Chakra UI

"use strict";
"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('@chakra-ui/react');
var React = require('react');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);

const ChartContext = React__namespace.createContext({});
function BarSegmentRoot(props) {
  const { chart, barSize = "10", children, ...rest } = props;
  return /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { gap: "4", ...rest, css: { "--bar-size": chart.size(barSize) }, children: /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: chart, children }) });
}
const BarSegmentContent = React__namespace.forwardRef(
  function BarSegmentContent2(props, ref) {
    const chart = React__namespace.useContext(ChartContext);
    return /* @__PURE__ */ jsxRuntime.jsx(
      react.Stack,
      {
        w: "full",
        gap: "1",
        ref,
        onMouseLeave: () => chart.setHighlightedSeries(null),
        ...props
      }
    );
  }
);
function BarSegmentLabel(props) {
  const chart = React__namespace.useContext(ChartContext);
  const getPercent = (value) => chart.getValuePercent("value", value);
  return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { ...props, children: chart.data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
    react.HStack,
    {
      flexShrink: "0",
      textStyle: "sm",
      fontWeight: "medium",
      lineClamp: 1,
      style: {
        ["--bar-percent"]: `${getPercent(item.value)}%`
      },
      flex: "var(--bar-percent)",
      children: item.name
    },
    item.name
  )) });
}
function BarSegmentBar(props) {
  const { tooltip, children, ...rest } = props;
  const chart = React__namespace.useContext(ChartContext);
  const getPercent = (value) => chart.getValuePercent("value", value);
  return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { pos: "relative", gap: "1", ...rest, children: [
    chart.data.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
      react.Box,
      {
        pos: "relative",
        flexShrink: "0",
        flex: "var(--bar-percent)",
        height: "var(--bar-size)",
        bg: item.color,
        rounded: "l1",
        onMouseMove: () => {
          if (!tooltip) return;
          chart.setHighlightedSeries(item.name);
        },
        style: {
          ["--bar-percent"]: `${getPercent(item.value)}%`
        },
        children: [
          typeof tooltip === "function" ? tooltip({ payload: item }) : null,
          typeof tooltip === "boolean" && tooltip && /* @__PURE__ */ jsxRuntime.jsx(BarSegmentTooltip, { payload: item })
        ]
      },
      item.name
    )),
    children
  ] });
}
function BarSegmentReference(props) {
  const { value, label, ...rest } = props;
  const chart = React__namespace.useContext(ChartContext);
  const getPercent = (value2) => chart.getValuePercent("value", value2);
  return /* @__PURE__ */ jsxRuntime.jsx(
    react.Box,
    {
      h: label ? "150%" : "100%",
      pos: "absolute",
      insetStart: `var(--bar-percent)`,
      bottom: "0",
      style: { ["--bar-percent"]: `${getPercent(value)}%` },
      ...rest,
      children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { gap: "2", h: "full", children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          react.Span,
          {
            w: "2px",
            h: "100%",
            bg: "bg.inverted",
            outline: "2px solid {colors.bg}"
          }
        ),
        label && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { fontWeight: "medium", textStyle: "xs", pos: "relative", top: "-4px", children: label })
      ] })
    }
  );
}
function BarSegmentValue(props) {
  const chart = React__namespace.useContext(ChartContext);
  const getPercent = (value) => chart.getValuePercent("value", value);
  return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { ...props, children: chart.data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
    react.HStack,
    {
      textStyle: "sm",
      fontWeight: "medium",
      flexShrink: "0",
      style: {
        ["--bar-percent"]: `${getPercent(item.value)}%`
      },
      flex: "var(--bar-percent)",
      children: /* @__PURE__ */ jsxRuntime.jsx(
        react.FormatNumber,
        {
          value: item.value,
          notation: "compact",
          maximumFractionDigits: 2
        }
      )
    },
    item.name
  )) });
}
function BarSegmentLegend(props) {
  const { showPercent, showValue, valueFormatter, ...rest } = props;
  const chart = React__namespace.useContext(ChartContext);
  const formatter = valueFormatter || chart.formatNumber({ maximumFractionDigits: 2 });
  return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { wrap: "wrap", gap: "4", textStyle: "sm", ...rest, children: chart.data.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      react.ColorSwatch,
      {
        value: chart.color(item.color),
        boxSize: "0.82em",
        rounded: "full"
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1.5", children: [
      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: item.name }),
      showValue && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { fontWeight: "medium", children: formatter(item.value) }),
      showPercent && /* @__PURE__ */ jsxRuntime.jsxs(react.Span, { color: "fg.muted", children: [
        chart.getValuePercent("value", item.value).toFixed(0),
        "%"
      ] })
    ] })
  ] }, item.name)) });
}
function BarSegmentTooltip(props) {
  const { payload, ...rest } = props;
  const chart = React__namespace.useContext(ChartContext);
  if (!payload || chart.highlightedSeries !== payload.name) return null;
  const formatter = chart.formatNumber({ maximumFractionDigits: 2 });
  return /* @__PURE__ */ jsxRuntime.jsxs(
    react.HStack,
    {
      pos: "absolute",
      top: "-4",
      right: "4",
      bg: "bg.panel",
      textStyle: "xs",
      zIndex: "1",
      px: "2.5",
      py: "1",
      gap: "1.5",
      rounded: "l2",
      shadow: "md",
      ...rest,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          react.ColorSwatch,
          {
            value: chart.color(payload.color),
            boxSize: "0.82em",
            rounded: "full"
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: payload.name }),
        /* @__PURE__ */ jsxRuntime.jsx(react.Span, { fontFamily: "mono", fontWeight: "medium", children: formatter(payload.value) })
      ]
    }
  );
}

exports.BarSegmentBar = BarSegmentBar;
exports.BarSegmentContent = BarSegmentContent;
exports.BarSegmentLabel = BarSegmentLabel;
exports.BarSegmentLegend = BarSegmentLegend;
exports.BarSegmentReference = BarSegmentReference;
exports.BarSegmentRoot = BarSegmentRoot;
exports.BarSegmentTooltip = BarSegmentTooltip;
exports.BarSegmentValue = BarSegmentValue;