@chakra-ui/charts 3.15.0

package/dist/cjs/chart/chart.cjs

@@ -0,0 +1,275 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@chakra-ui/react');
+var React = require('react');
+var recharts = require('recharts');
+var useChart = require('../use-chart.cjs');
+
+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({});
+const useChartContext = () => React__namespace.useContext(ChartContext);
+const baseCss = react.defineStyle({
+  width: "100%",
+  [`& :where(${[
+    ".recharts-cartesian-axis-tick-value",
+    ".recharts-polar-angle-axis-tick-value",
+    ".recharts-polar-radius-axis-tick-value",
+    ".recharts-pie-label-text"
+  ].join(", ")})`]: {
+    fill: "fg.muted"
+  },
+  "& .recharts-cartesian-axis .recharts-label": {
+    fill: "fg",
+    fontWeight: "medium"
+  },
+  "& *": {
+    outline: "none"
+  },
+  "& svg": {
+    overflow: "visible"
+  }
+});
+const ChartRoot = React__namespace.forwardRef(
+  function ChartRoot2(props, ref) {
+    const { children, css, chart, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: chart, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.Box,
+      {
+        ref,
+        aspectRatio: "landscape",
+        textStyle: "xs",
+        css: [baseCss, css],
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { children })
+      }
+    ) });
+  }
+);
+const ChartGradient = React__namespace.forwardRef(function ChartGradient2(props, ref) {
+  const chart = useChartContext();
+  const { id, fillOpacity, stops } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", ref, children: stops.map((stop, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "stop",
+    {
+      offset: stop.offset,
+      stopColor: chart.color(stop.color),
+      stopOpacity: stop.opacity ?? fillOpacity
+    },
+    index
+  )) });
+});
+const hAlignMap = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+function ChartLegend(props) {
+  const {
+    payload,
+    verticalAlign = "bottom",
+    align = "center",
+    title,
+    orientation,
+    nameKey,
+    spacing = "2.5"
+  } = props;
+  const chart = useChartContext();
+  const filteredPayload = payload?.filter(
+    (item) => item.color !== "none" || item.type !== "none"
+  );
+  if (!filteredPayload?.length) return null;
+  const spacingValue = typeof spacing === "number" ? `${spacing}px` : chart.spacing(spacing);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Stack,
+    {
+      gap: "1.5",
+      align: hAlignMap[align],
+      pt: verticalAlign === "bottom" ? "3" : void 0,
+      pb: verticalAlign === "top" ? "3" : void 0,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontWeight: "medium", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Flex,
+          {
+            "data-orientation": orientation,
+            gap: spacingValue,
+            direction: { _horizontal: "row", _vertical: "column" },
+            align: { _horizontal: "center", _vertical: "flex-start" },
+            flexWrap: "wrap",
+            children: filteredPayload.map((item, index) => {
+              const config = chart.getSeries(item);
+              const name = useChart.getProp(item.payload, nameKey);
+              return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1", _icon: { boxSize: "3" }, children: [
+                config?.icon || /* @__PURE__ */ jsxRuntime.jsx(
+                  react.ColorSwatch,
+                  {
+                    boxSize: "2.5",
+                    rounded: "full",
+                    value: chart.color(config?.color)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(react.Span, { color: "fg.muted", children: name || config?.label })
+              ] }, index);
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function ChartTooltip(props) {
+  const {
+    payload: payloadProp,
+    label,
+    labelFormatter,
+    hideLabel,
+    hideIndicator,
+    hideSeriesLabel,
+    showTotal,
+    fitContent,
+    nameKey,
+    render
+  } = props;
+  const chart = useChartContext();
+  const payload = payloadProp?.filter(
+    (item) => item.color !== "none" || item.type !== "none"
+  );
+  const total = React.useMemo(() => chart.getPayloadTotal(payload), [payload, chart]);
+  const tooltipLabel = React__namespace.useMemo(() => {
+    const item = payload?.[0];
+    const itemLabel = `${useChart.getProp(item?.payload, nameKey) || label || item?.dataKey || "value"}`;
+    return labelFormatter?.(itemLabel, payload ?? []) ?? itemLabel;
+  }, [payload, labelFormatter, label, nameKey]);
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Stack,
+    {
+      minW: fitContent ? void 0 : "8rem",
+      gap: "1",
+      rounded: "l2",
+      bg: "bg.panel",
+      px: "2.5",
+      py: "1",
+      textStyle: "xs",
+      shadow: "md",
+      children: [
+        !hideLabel && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontWeight: "medium", children: tooltipLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: payload.map((item, index) => {
+          const config = chart.getSeries(item);
+          if (render) return render(item.payload);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            react.Flex,
+            {
+              gap: "1.5",
+              wrap: "wrap",
+              align: "center",
+              _icon: { boxSize: "2.5" },
+              children: [
+                config?.icon,
+                config?.color && !config?.icon && !hideIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+                  react.ColorSwatch,
+                  {
+                    rounded: "full",
+                    boxSize: "2",
+                    value: chart.color(config.color)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", flex: "1", children: [
+                  !hideSeriesLabel && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { color: "fg.muted", children: `${config?.label || item.name}` }),
+                  item.value && /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Text,
+                    {
+                      fontFamily: "mono",
+                      fontWeight: "medium",
+                      fontVariantNumeric: "tabular-nums",
+                      children: item.value.toLocaleString()
+                    }
+                  )
+                ] })
+              ]
+            },
+            index
+          );
+        }) }),
+        showTotal && total != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Separator, { mt: "1" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1", justify: "space-between", pb: "1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Span, { color: "fg.muted", children: "Total" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Text,
+              {
+                fontFamily: "mono",
+                fontWeight: "medium",
+                fontVariantNumeric: "tabular-nums",
+                children: total.toLocaleString()
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const isPolarViewBox = (viewBox) => "cx" in viewBox && "cy" in viewBox;
+function ChartRadialText(props) {
+  const { viewBox, title, description, gap = 24 } = props;
+  const chart = useChartContext();
+  if (!viewBox || !isPolarViewBox(viewBox)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "text",
+    {
+      x: viewBox.cx,
+      y: viewBox.cy,
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      fill: chart.color("fg"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "tspan",
+          {
+            x: viewBox.cx,
+            y: viewBox.cy,
+            style: { fontSize: "2rem", fontWeight: 600 },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "tspan",
+          {
+            x: viewBox.cx,
+            y: (viewBox.cy || 0) + gap,
+            style: { fill: chart.color("fg.muted") },
+            children: description
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.ChartGradient = ChartGradient;
+exports.ChartLegend = ChartLegend;
+exports.ChartRadialText = ChartRadialText;
+exports.ChartRoot = ChartRoot;
+exports.ChartTooltip = ChartTooltip;

package/dist/cjs/chart/index.cjs

@@ -0,0 +1,14 @@
+"use strict";
+'use strict';
+
+var chart = require('./chart.cjs');
+var namespace = require('./namespace.cjs');
+
+
+
+exports.ChartGradient = chart.ChartGradient;
+exports.ChartLegend = chart.ChartLegend;
+exports.ChartRadialText = chart.ChartRadialText;
+exports.ChartRoot = chart.ChartRoot;
+exports.ChartTooltip = chart.ChartTooltip;
+exports.Chart = namespace;

package/dist/cjs/chart/namespace.cjs

@@ -0,0 +1,12 @@
+"use strict";
+'use strict';
+
+var chart = require('./chart.cjs');
+
+
+
+exports.Gradient = chart.ChartGradient;
+exports.Legend = chart.ChartLegend;
+exports.RadialText = chart.ChartRadialText;
+exports.Root = chart.ChartRoot;
+exports.Tooltip = chart.ChartTooltip;

package/dist/cjs/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+'use strict';
+
+var useChart = require('./use-chart.cjs');
+var chart = require('./chart/chart.cjs');
+var namespace = require('./chart/namespace.cjs');
+var barList = require('./bar-list/bar-list.cjs');
+var namespace$1 = require('./bar-list/namespace.cjs');
+var barSegment = require('./bar-segment/bar-segment.cjs');
+var namespace$2 = require('./bar-segment/namespace.cjs');
+
+
+
+exports.useChart = useChart.useChart;
+exports.ChartGradient = chart.ChartGradient;
+exports.ChartLegend = chart.ChartLegend;
+exports.ChartRadialText = chart.ChartRadialText;
+exports.ChartRoot = chart.ChartRoot;
+exports.ChartTooltip = chart.ChartTooltip;
+exports.Chart = namespace;
+exports.BarListBar = barList.BarListBar;
+exports.BarListContent = barList.BarListContent;
+exports.BarListLabel = barList.BarListLabel;
+exports.BarListRoot = barList.BarListRoot;
+exports.BarListTitle = barList.BarListTitle;
+exports.BarListTooltip = barList.BarListTooltip;
+exports.BarListValue = barList.BarListValue;
+exports.BarList = namespace$1;
+exports.BarSegmentBar = barSegment.BarSegmentBar;
+exports.BarSegmentContent = barSegment.BarSegmentContent;
+exports.BarSegmentLabel = barSegment.BarSegmentLabel;
+exports.BarSegmentLegend = barSegment.BarSegmentLegend;
+exports.BarSegmentReference = barSegment.BarSegmentReference;
+exports.BarSegmentRoot = barSegment.BarSegmentRoot;
+exports.BarSegmentValue = barSegment.BarSegmentValue;
+exports.BarSegment = namespace$2;

package/dist/cjs/use-chart.cjs

@@ -0,0 +1,130 @@
+"use strict";
+"use client";
+'use strict';
+
+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);
+
+function useChart(props) {
+  const { data, series = [], sort } = props;
+  const id = React__namespace.useId();
+  const [selectedSeries, setSelectedSeries] = React__namespace.useState(
+    null
+  );
+  const [highlightedSeries, setHighlightedSeries] = React__namespace.useState(null);
+  const env = react.useLocaleContext();
+  const sys = react.useChakraContext();
+  const color = (key2) => sys.token(`colors.${key2}`, key2);
+  const size = (key2) => sys.token(`sizes.${key2}`, key2);
+  const spacing = (key2) => sys.token(`spacing.${key2}`, key2);
+  const key = (prop) => prop ?? "value";
+  const formatNumber = React__namespace.useCallback(
+    (options) => {
+      const formatter = new Intl.NumberFormat(env.locale, options);
+      return (value) => formatter.format(value);
+    },
+    [env.locale]
+  );
+  const formatDate = React__namespace.useCallback(
+    (options) => {
+      return (value) => new Date(value).toLocaleDateString(env.locale, options);
+    },
+    [env.locale]
+  );
+  const getSeries = (item) => {
+    if (!isObject(item)) return;
+    const result = series.find((s) => {
+      return s.name === item.name || s.name === getProp(item.payload, "name") || s.name === item.dataKey || s.name === getProp(item.payload, "dataKey");
+    }) || { color: void 0 };
+    result.color || (result.color = getProp(item.payload, "color"));
+    result.label || (result.label = result.name?.toLocaleString() || getProp(item.payload, "name"));
+    return result;
+  };
+  const getTotal = (key2) => {
+    return data.reduce((acc, d) => acc + Number(d[key2]), 0);
+  };
+  function getPayloadTotal(payload) {
+    return payload?.reduce((acc, item) => {
+      if (!item.value) return acc;
+      const num = Number(item.value);
+      const value = Number.isNaN(num) ? 0 : num;
+      return acc + value;
+    }, 0);
+  }
+  function getMin(key2) {
+    return Math.min(...data.map((d) => Number(d[key2])));
+  }
+  function getMax(key2) {
+    return Math.max(...data.map((d) => Number(d[key2])));
+  }
+  function getValuePercent(key2, value, domain) {
+    const min = getMin(key2);
+    const max = getMax(key2);
+    if (domain) {
+      const d = typeof domain === "function" ? domain({ min, max }) : domain;
+      return (value - d[0]) / (d[1] - d[0]) * 100;
+    }
+    return value / getTotal(key2) * 100;
+  }
+  const sortedData = React__namespace.useMemo(() => {
+    if (!sort) return data;
+    return data.sort((a, b) => {
+      const aValue = Number(a[sort.by]);
+      const bValue = Number(b[sort.by]);
+      return sort.direction === "desc" ? bValue - aValue : aValue - bValue;
+    });
+  }, [data, sort]);
+  return {
+    id,
+    key,
+    // series
+    data: sortedData,
+    series,
+    getSeries,
+    // token functions
+    color,
+    size,
+    spacing,
+    // formatters
+    formatNumber,
+    formatDate,
+    // state
+    selectedSeries,
+    setSelectedSeries,
+    highlightedSeries,
+    setHighlightedSeries,
+    // value functions
+    getTotal,
+    getMin,
+    getMax,
+    getPayloadTotal,
+    getValuePercent
+  };
+}
+const isObject = (value) => typeof value === "object" && value !== null;
+function getProp(item, key) {
+  if (!key || !isObject(item)) return;
+  return Reflect.get(item, key);
+}
+
+exports.getProp = getProp;
+exports.useChart = useChart;

package/dist/esm/bar-list/bar-list.js

@@ -0,0 +1,135 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, HStack, Flex, AbsoluteCenter, Stack, Show, Text } 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" });
+  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, showTooltip, ...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 (!showTooltip) return;
+        if (chart.highlightedSeries === item.name) return;
+        chart.setHighlightedSeries(item.name);
+      },
+      onMouseLeave: () => {
+        if (!showTooltip) return;
+        chart.setHighlightedSeries(null);
+      },
+      children: /* @__PURE__ */ jsxs(Box, { pos: "relative", flex: "1", className: "group", children: [
+        showTooltip && chart.highlightedSeries === item.name && /* @__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 };

package/dist/esm/bar-list/index.js

@@ -0,0 +1,4 @@
+"use strict";
+export { BarListBar, BarListContent, BarListLabel, BarListRoot, BarListTitle, BarListTooltip, BarListValue } from './bar-list.js';
+import * as namespace from './namespace.js';
+export { namespace as BarList };

package/dist/esm/bar-list/namespace.js

@@ -0,0 +1,2 @@
+"use strict";
+export { BarListBar as Bar, BarListContent as Content, BarListLabel as Label, BarListRoot as Root, BarListTitle as Title, BarListTooltip as Tooltip, BarListValue as Value } from './bar-list.js';