@chakra-ui/charts/dist/esm/bar-list/bar-list.js

Data visualization components for Chakra UI

"use strict";
"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { Stack, HStack, Box, Show, Flex, Text, AbsoluteCenter } from '@chakra-ui/react';
import * as React from 'react';

const ChartContext = React.createContext({});
function BarListRoot(props) {
  const { chart, barSize = "10", children, ...rest } = props;
  return /* @__PURE__ */ jsx(Box, { ...rest, css: { "--bar-size": chart.size(barSize) }, children: /* @__PURE__ */ jsx(ChartContext.Provider, { value: chart, children }) });
}
const BarListTitle = (props) => {
  return /* @__PURE__ */ jsx(HStack, { textStyle: "md", mb: "4", fontWeight: "medium", ...props });
};
const BarListContent = (props) => {
  return /* @__PURE__ */ jsx(Flex, { flexWrap: "nowrap", align: "flex-end", gap: "4", ...props });
};
function BarListTooltip(props) {
  const { payload, labelFormatter, ...rest } = props;
  const chart = React.useContext(ChartContext);
  const formatter = labelFormatter || chart.formatNumber({ style: "decimal" });
  if (!payload || chart.highlightedSeries !== payload.name) return null;
  return /* @__PURE__ */ jsx(
    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.useContext(ChartContext);
  const getPercent = (value) => chart.getValuePercent("value", value, (e) => [0, e.max]);
  const series = chart.getSeries({ name: "name" });
  return /* @__PURE__ */ jsx(Stack, { flex: "1", ...rest, children: chart.data.map((item, index) => /* @__PURE__ */ jsx(
    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__ */ jsxs(Box, { pos: "relative", flex: "1", className: "group", children: [
        typeof tooltip === "function" ? tooltip({ payload: item }) : null,
        typeof tooltip === "boolean" && tooltip && /* @__PURE__ */ jsx(BarListTooltip, { payload: item }),
        /* @__PURE__ */ jsx(
          Box,
          {
            pos: "absolute",
            insetStart: "0",
            h: "full",
            bg: series?.color,
            rounded: "l2",
            width: "var(--bar-width)",
            style: {
              ["--bar-width"]: `${getPercent(item.value)}%`
            }
          }
        ),
        /* @__PURE__ */ jsx(
          HStack,
          {
            flex: "1",
            justify: "flex-start",
            textStyle: "sm",
            pos: "relative",
            wordBreak: "break-all",
            w: "full",
            minH: "var(--bar-size)",
            px: "2.5",
            children: /* @__PURE__ */ jsx(Show, { when: label, fallback: item.name, children: label?.({ payload: item, index }) })
          }
        )
      ] })
    },
    item.name
  )) });
}
function BarListValue(props) {
  const { valueFormatter, ...rest } = props;
  const chart = React.useContext(ChartContext);
  const formatter = valueFormatter || chart.formatNumber({
    notation: "compact",
    maximumFractionDigits: 2
  });
  return /* @__PURE__ */ jsx(Stack, { ...rest, children: chart.data.map((item) => /* @__PURE__ */ jsx(
    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__ */ jsxs(Stack, { ...rest, children: [
    /* @__PURE__ */ jsx(
      Text,
      {
        textStyle: "xs",
        fontWeight: "medium",
        color: "fg.muted",
        textAlign: titleAlignment,
        children: title
      }
    ),
    children
  ] });
}

export { BarListBar, BarListContent, BarListLabel, BarListRoot, BarListTitle, BarListTooltip, BarListValue };