@chakra-ui/charts/dist/cjs/bar-list/bar-list.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 BarListRoot(props) {
  const { chart, barSize = "10", children, ...rest } = props;
  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ...rest, css: { "--bar-size": chart.size(barSize) }, children: /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: chart, children }) });
}
const BarListTitle = (props) => {
  return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { textStyle: "md", mb: "4", fontWeight: "medium", ...props });
};
const BarListContent = (props) => {
  return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { flexWrap: "nowrap", align: "flex-end", gap: "4", ...props });
};
function BarListTooltip(props) {
  const { payload, labelFormatter, ...rest } = props;
  const chart = React__namespace.useContext(ChartContext);
  const formatter = labelFormatter || chart.formatNumber({ style: "decimal" });
  if (!payload || chart.highlightedSeries !== payload.name) return null;
  return /* @__PURE__ */ jsxRuntime.jsx(
    react.AbsoluteCenter,
    {
      display: { base: "none", _groupHover: "block" },
      axis: "vertical",
      right: "2",
      zIndex: "1",
      textStyle: "xs",
      fontWeight: "medium",
      bg: "bg.panel",
      px: "1.5",
      py: "1",
      rounded: "l2",
      shadow: "xs",
      pointerEvents: "none",
      ...rest,
      children: formatter(payload.value)
    }
  );
}
function BarListBar(props) {
  const { label, tooltip, ...rest } = props;
  const chart = React__namespace.useContext(ChartContext);
  const getPercent = (value) => chart.getValuePercent("value", value, (e) => [0, e.max]);
  const series = chart.getSeries({ name: "name" });
  return /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { flex: "1", ...rest, children: chart.data.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
    react.HStack,
    {
      flex: 1,
      minH: "var(--bar-size)",
      w: "full",
      gap: "8",
      _hover: { bg: "bg.subtle" },
      onMouseMove: () => {
        if (!tooltip) return;
        if (chart.highlightedSeries === item.name) return;
        chart.setHighlightedSeries(item.name);
      },
      onMouseLeave: () => {
        if (!tooltip) return;
        chart.setHighlightedSeries(null);
      },
      children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { pos: "relative", flex: "1", className: "group", children: [
        typeof tooltip === "function" ? tooltip({ payload: item }) : null,
        typeof tooltip === "boolean" && tooltip && /* @__PURE__ */ jsxRuntime.jsx(BarListTooltip, { payload: item }),
        /* @__PURE__ */ jsxRuntime.jsx(
          react.Box,
          {
            pos: "absolute",
            insetStart: "0",
            h: "full",
            bg: series?.color,
            rounded: "l2",
            width: "var(--bar-width)",
            style: {
              ["--bar-width"]: `${getPercent(item.value)}%`
            }
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          react.HStack,
          {
            flex: "1",
            justify: "flex-start",
            textStyle: "sm",
            pos: "relative",
            wordBreak: "break-all",
            w: "full",
            minH: "var(--bar-size)",
            px: "2.5",
            children: /* @__PURE__ */ jsxRuntime.jsx(react.Show, { when: label, fallback: item.name, children: label?.({ payload: item, index }) })
          }
        )
      ] })
    },
    item.name
  )) });
}
function BarListValue(props) {
  const { valueFormatter, ...rest } = props;
  const chart = React__namespace.useContext(ChartContext);
  const formatter = valueFormatter || chart.formatNumber({
    notation: "compact",
    maximumFractionDigits: 2
  });
  return /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { ...rest, children: chart.data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
    react.HStack,
    {
      minH: "var(--bar-size)",
      justify: "flex-end",
      textStyle: "sm",
      fontWeight: "medium",
      children: formatter(item.value)
    },
    item.name
  )) });
}
function BarListLabel(props) {
  const { title, titleAlignment, children, ...rest } = props;
  return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { ...rest, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      react.Text,
      {
        textStyle: "xs",
        fontWeight: "medium",
        color: "fg.muted",
        textAlign: titleAlignment,
        children: title
      }
    ),
    children
  ] });
}

exports.BarListBar = BarListBar;
exports.BarListContent = BarListContent;
exports.BarListLabel = BarListLabel;
exports.BarListRoot = BarListRoot;
exports.BarListTitle = BarListTitle;
exports.BarListTooltip = BarListTooltip;
exports.BarListValue = BarListValue;