@misoto22/folio 0.0.0 → 0.17.0

package/dist/charts/BarChart/BarChart.js

@@ -0,0 +1,599 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  Bar as RechartsBar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  Rectangle,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis
+} from "recharts";
+import { motion, useReducedMotion } from "motion/react";
+import { ChartContainer } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { useChartSelection } from "../lib/selection.js";
+import {} from "../lib/empty.js";
+import { axisLabel } from "../lib/axis.js";
+import { defaultTick } from "../lib/format.js";
+import { Annotation, ReferenceBand, ReferenceLine } from "../lib/annotations.js";
+import { Values, findSlot, resolveValues } from "../lib/values.js";
+import {
+  ChartSonifyButton,
+  Sonify,
+  useChartSonifySeries
+} from "../lib/sonify-control.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
+import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
+import { Brush, ChartBrush } from "../lib/brush.js";
+import { ChartControls, Toolbar } from "../lib/toolbar.js";
+import { useChartZoom } from "../lib/zoom.js";
+import { LoadingIndicator, LoadingShimmer, LOADING_KEY, useLoadingRows } from "../lib/loading.js";
+import {
+  BarBufferFill,
+  BarDuotoneFill,
+  BarGradientFill,
+  BarHatchedFill,
+  BarStrippedFill,
+  GlowFilter,
+  REVEAL_EASE,
+  SeriesGradient
+} from "../lib/paint.js";
+const BAR_RADIUS = 2;
+const GROW_DURATION = 0.5;
+const GROW_STAGGER = 0.05;
+const STACK_ID = "folio-bar-stack";
+const CHART_MARGIN = { top: 8, right: 12, bottom: 0, left: 12 };
+const FOOT_GAP = 3;
+const MIN_BAR_LENGTH = 1;
+const BarChartContext = createContext(null);
+function useBarChart() {
+  const context = useContext(BarChartContext);
+  if (!context) throw new Error("A bar chart part must be rendered inside <BarChart>");
+  return context;
+}
+function BarChart({
+  config,
+  data,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  stackType = "default",
+  orientation = "vertical",
+  barRadius = BAR_RADIUS,
+  animationType = "forward",
+  barGap,
+  barCategoryGap,
+  defaultSelectedDataKey = null,
+  selectedDataKey: controlledDataKey,
+  onSelectionChange,
+  isLoading = false,
+  loadingBars,
+  xDataKey,
+  hideDataTable = false,
+  empty
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [introStartedAt] = useState(() => Date.now());
+  const [isPointerInChart, setIsPointerInChart] = useState(false);
+  const { rows: loadingData, onShimmerExit } = useLoadingRows(isLoading, loadingBars ?? 12);
+  const zoom = useChartZoom({ data, xDataKey });
+  const { brushSlot, toolbarSlot, sonifySlot, chartChildren } = useMemo(() => {
+    const parts = Children.toArray(children);
+    const element = parts.find((child) => isValidElement(child) && child.type === Brush);
+    const props = isValidElement(element) ? element.props : {};
+    return {
+      brushSlot: { present: isValidElement(element), ...props },
+      toolbarSlot: findSlot(parts, Toolbar),
+      sonifySlot: findSlot(parts, Sonify),
+      chartChildren: parts.filter(
+        (child) => !(isValidElement(child) && (child.type === Brush || child.type === Toolbar || child.type === Sonify))
+      )
+    };
+  }, [children]);
+  const isStacked = stackType === "stacked" || stackType === "percent";
+  const isHorizontal = orientation === "horizontal";
+  const columns = useMemo(
+    () => Object.entries(config).map(([key, series]) => ({ key, label: series.label })),
+    [config]
+  );
+  const showBrush = brushSlot.present && !isLoading;
+  const showToolbar = toolbarSlot !== null && !isLoading;
+  const isEmpty = !isLoading && empty !== false && data.length === 0;
+  const displayData = showBrush || showToolbar ? zoom.visibleData : data;
+  const bufferIndex = data.length > 0 && displayData[displayData.length - 1] === data[data.length - 1] ? displayData.length - 1 : -1;
+  const sonifySeries = useChartSonifySeries(
+    sonifySlot,
+    isLoading ? loadingData : displayData,
+    config,
+    xDataKey
+  );
+  const [selectedDataKey, selectDataKey] = useChartSelection(
+    controlledDataKey,
+    defaultSelectedDataKey,
+    onSelectionChange
+  );
+  const context = useMemo(
+    () => ({
+      config,
+      rows: displayData,
+      isStacked,
+      isHorizontal,
+      isLoading,
+      barRadius,
+      animationType,
+      introStartedAt,
+      dataLength: displayData.length,
+      bufferIndex,
+      selectedDataKey,
+      selectDataKey,
+      isPointerInChart
+    }),
+    [
+      animationType,
+      barRadius,
+      bufferIndex,
+      config,
+      displayData,
+      introStartedAt,
+      isHorizontal,
+      isLoading,
+      isPointerInChart,
+      isStacked,
+      selectDataKey,
+      selectedDataKey
+    ]
+  );
+  return /* @__PURE__ */ jsx(BarChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : { rows: data, rowKey: xDataKey, columns },
+      isEmpty,
+      empty,
+      children: [
+        sonifySlot && /* @__PURE__ */ jsx(ChartSonifyButton, { ...sonifySlot, title, series: sonifySeries }),
+        /* @__PURE__ */ jsx(
+          ChartControls,
+          {
+            toolbar: showToolbar ? toolbarSlot : null,
+            zoom,
+            title,
+            rows: data,
+            columns,
+            rowKey: xDataKey,
+            children: /* @__PURE__ */ jsx(
+              ChartContainer,
+              {
+                config,
+                footer: showBrush && /* @__PURE__ */ jsx(
+                  ChartBrush,
+                  {
+                    data,
+                    config,
+                    xDataKey,
+                    variant: "bar",
+                    barRadius,
+                    height: brushSlot.height,
+                    formatLabel: brushSlot.formatLabel,
+                    stacked: isStacked,
+                    className: "mt-1",
+                    ...zoom.brushProps,
+                    onChange: (range) => {
+                      zoom.brushProps.onChange(range);
+                      brushSlot.onChange?.(range);
+                    }
+                  }
+                ),
+                children: /* @__PURE__ */ jsxs(
+                  RechartsBarChart,
+                  {
+                    id: chartId,
+                    accessibilityLayer: true,
+                    margin: CHART_MARGIN,
+                    layout: isHorizontal ? "vertical" : "horizontal",
+                    data: isLoading ? loadingData : displayData,
+                    barGap,
+                    barCategoryGap,
+                    stackOffset: stackType === "percent" ? "expand" : void 0,
+                    onMouseEnter: () => setIsPointerInChart(true),
+                    onMouseLeave: () => setIsPointerInChart(false),
+                    ...chartProps,
+                    children: [
+                      chartChildren,
+                      isLoading && /* @__PURE__ */ jsx(LoadingBar, { chartId, onShimmerExit })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+function Bar({
+  dataKey,
+  variant = "default",
+  radius,
+  animationType,
+  isClickable = false,
+  enableHoverHighlight = false,
+  glowing = false,
+  buffer = false,
+  children,
+  barProps
+}) {
+  const {
+    config,
+    isStacked,
+    isHorizontal,
+    isLoading,
+    rows,
+    barRadius: defaultRadius,
+    animationType: defaultAnimation,
+    introStartedAt,
+    dataLength,
+    bufferIndex,
+    selectedDataKey,
+    selectDataKey,
+    isPointerInChart
+  } = useBarChart();
+  const id = useId().replace(/:/g, "");
+  const reduceMotion = useReducedMotion();
+  if (isLoading) return null;
+  const resolvedRadius = radius ?? defaultRadius;
+  const isSelected = selectedDataKey === dataKey;
+  const reveal = reduceMotion ? "none" : animationType ?? defaultAnimation;
+  const shared = {
+    id,
+    dataKey,
+    variant,
+    barRadius: resolvedRadius,
+    glowing,
+    buffer,
+    isClickable,
+    enableHoverHighlight,
+    isPointerInChart,
+    isHorizontal,
+    introStartedAt,
+    selectedDataKey,
+    dataLength,
+    bufferIndex,
+    onSelect: () => {
+      if (!isClickable) return;
+      selectDataKey(isSelected ? null : dataKey);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsBar,
+      {
+        dataKey,
+        stackId: isStacked ? STACK_ID : void 0,
+        fill: `url(#${id}-colors-${dataKey})`,
+        radius: resolvedRadius,
+        isAnimationActive: false,
+        style: isClickable || enableHoverHighlight ? { cursor: "pointer" } : void 0,
+        shape: (props) => /* @__PURE__ */ jsx(BarShape, { ...props, ...shared, animationType: reveal }),
+        activeBar: (props) => /* @__PURE__ */ jsx(BarShape, { ...props, ...shared, animationType: "none" }),
+        ...barProps,
+        children: resolveValues(
+          findSlot(children, Values),
+          rows.map((row) => Number(row[dataKey])).filter(Number.isFinite)
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx(SeriesGradient, { id, dataKey, config, direction: "vertical" }),
+      variant === "hatched" && /* @__PURE__ */ jsx(BarHatchedFill, { id, dataKey }),
+      variant === "duotone" && /* @__PURE__ */ jsx(BarDuotoneFill, { id, dataKey, config }),
+      variant === "duotone-reverse" && /* @__PURE__ */ jsx(BarDuotoneFill, { id, dataKey, config, reverse: true }),
+      variant === "gradient" && /* @__PURE__ */ jsx(BarGradientFill, { id, dataKey }),
+      variant === "stripped" && /* @__PURE__ */ jsx(BarStrippedFill, { id, dataKey }),
+      buffer && /* @__PURE__ */ jsx(BarBufferFill, { id, dataKey }),
+      glowing && /* @__PURE__ */ jsx(GlowFilter, { id, dataKey })
+    ] })
+  ] });
+}
+function BarShape(props) {
+  const {
+    x = 0,
+    y = 0,
+    width = 0,
+    height = 0,
+    id,
+    dataKey,
+    variant,
+    barRadius,
+    glowing,
+    buffer,
+    isClickable,
+    enableHoverHighlight,
+    isPointerInChart,
+    isHorizontal,
+    animationType,
+    introStartedAt,
+    selectedDataKey,
+    isActive,
+    dataLength,
+    bufferIndex,
+    onSelect
+  } = props;
+  const index = typeof props.index === "number" ? props.index : -1;
+  const isBufferBar = buffer && index >= 0 && index === bufferIndex;
+  const isStripped = variant === "stripped";
+  const grow = growAnimation(animationType, index, dataLength, isHorizontal, introStartedAt);
+  const fill = isBufferBar ? `url(#${id}-buffer-${dataKey})` : variantFill(variant, id, dataKey);
+  const opacity = barOpacity({
+    isClickable,
+    selectedDataKey,
+    dataKey,
+    enableHoverHighlight,
+    isPointerInChart,
+    isActive
+  });
+  const radius = isStripped ? [barRadius, barRadius, 0, 0] : barRadius;
+  const painted = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        x,
+        y,
+        width,
+        height: height <= 0 ? 0 : Math.max(MIN_BAR_LENGTH, height - FOOT_GAP),
+        opacity,
+        radius,
+        fill,
+        filter: glowing ? `url(#${id}-glow-${dataKey})` : void 0,
+        stroke: isBufferBar ? `url(#${id}-colors-${dataKey})` : void 0,
+        strokeWidth: isBufferBar ? 1 : void 0
+      }
+    ),
+    isStripped && /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        x,
+        y: y - 4,
+        width,
+        height: 2,
+        radius: 1,
+        fill: `url(#${id}-colors-${dataKey})`
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      style: isClickable || enableHoverHighlight ? { cursor: "pointer" } : void 0,
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsx(Rectangle, { ...props, fill: "transparent" }),
+        grow ? /* @__PURE__ */ jsx(
+          motion.g,
+          {
+            initial: grow.initial,
+            animate: grow.animate,
+            transition: grow.transition,
+            style: grow.style,
+            children: painted
+          }
+        ) : painted
+      ]
+    }
+  );
+}
+function growAnimation(animationType, index, dataLength, isHorizontal, introStartedAt) {
+  if (animationType === "none" || index < 0 || dataLength <= 0) return null;
+  const lastIndex = dataLength - 1;
+  const centre = lastIndex / 2;
+  let step;
+  switch (animationType) {
+    case "reverse":
+      step = lastIndex - index;
+      break;
+    case "center-out":
+      step = Math.abs(index - centre);
+      break;
+    case "edges-in":
+      step = centre - Math.abs(index - centre);
+      break;
+    default:
+      step = index;
+  }
+  const startMs = step * GROW_STAGGER * 1e3;
+  const endMs = startMs + GROW_DURATION * 1e3;
+  const elapsed = Date.now() - introStartedAt;
+  if (elapsed >= endMs) return null;
+  const from = elapsed <= startMs ? 0 : (elapsed - startMs) / (GROW_DURATION * 1e3);
+  const transition = {
+    duration: (endMs - Math.max(elapsed, startMs)) / 1e3,
+    ease: REVEAL_EASE,
+    delay: Math.max(0, startMs - elapsed) / 1e3
+  };
+  return isHorizontal ? { initial: { scaleX: from }, animate: { scaleX: 1 }, transition, style: { originX: 0 } } : { initial: { scaleY: from }, animate: { scaleY: 1 }, transition, style: { originY: 1 } };
+}
+function variantFill(variant, id, dataKey) {
+  if (variant === "default") return `url(#${id}-colors-${dataKey})`;
+  return `url(#${id}-${variant}-${dataKey})`;
+}
+function barOpacity({
+  isClickable,
+  selectedDataKey,
+  dataKey,
+  enableHoverHighlight,
+  isPointerInChart,
+  isActive
+}) {
+  const inSelection = selectedDataKey === null || selectedDataKey === dataKey;
+  const selectionOpacity = isClickable && selectedDataKey !== null ? inSelection ? 1 : 0.15 : 1;
+  if (enableHoverHighlight && isPointerInChart) {
+    return isActive ? selectionOpacity : selectionOpacity * 0.3;
+  }
+  return selectionOpacity;
+}
+function XAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  type,
+  label,
+  ...rest
+}) {
+  const { isLoading, isHorizontal } = useBarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsXAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      type: type ?? (isHorizontal ? "number" : "category"),
+      ...rest,
+      children: axisLabel(label, "x")
+    }
+  );
+}
+function YAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  width = "auto",
+  type,
+  label,
+  tickFormatter,
+  ...rest
+}) {
+  const { isLoading, isHorizontal } = useBarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsYAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      width,
+      type: type ?? (isHorizontal ? "category" : "number"),
+      tickFormatter: tickFormatter ?? defaultTick,
+      ...rest,
+      children: axisLabel(label, "y")
+    }
+  );
+}
+function Grid({
+  strokeDasharray = "3 3",
+  vertical,
+  horizontal,
+  ...rest
+}) {
+  const { isHorizontal } = useBarChart();
+  return /* @__PURE__ */ jsx(
+    CartesianGrid,
+    {
+      strokeDasharray,
+      vertical: vertical ?? isHorizontal,
+      horizontal: horizontal ?? !isHorizontal,
+      ...rest
+    }
+  );
+}
+function Tooltip({ variant, roundness, defaultIndex, cursor = false }) {
+  const { isLoading, selectedDataKey } = useBarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      cursor,
+      defaultIndex,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { selected: selectedDataKey, roundness, variant })
+    }
+  );
+}
+function Legend({
+  variant,
+  align = "right",
+  verticalAlign = "top",
+  isClickable = false
+}) {
+  const { selectedDataKey, selectDataKey } = useBarChart();
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedDataKey,
+          onSelectChange: selectDataKey,
+          isClickable,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant }) {
+  const { isLoading } = useBarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+function LoadingBar({ chartId, onShimmerExit }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsBar,
+      {
+        dataKey: LOADING_KEY,
+        fill: "currentColor",
+        fillOpacity: 0.15,
+        radius: BAR_RADIUS,
+        isAnimationActive: false,
+        legendType: "none",
+        className: "text-(--ink)",
+        style: { mask: `url(#${chartId}-loading-mask)` }
+      }
+    ),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(LoadingShimmer, { id: chartId, onShimmerExit }) })
+  ] });
+}
+BarChart.Bar = Bar;
+BarChart.XAxis = XAxis;
+BarChart.YAxis = YAxis;
+BarChart.Grid = Grid;
+BarChart.Tooltip = Tooltip;
+BarChart.Legend = Legend;
+BarChart.Background = Background;
+BarChart.ReferenceLine = ReferenceLine;
+BarChart.ReferenceBand = ReferenceBand;
+BarChart.Annotation = Annotation;
+BarChart.Values = Values;
+BarChart.Brush = Brush;
+BarChart.Toolbar = Toolbar;
+BarChart.Sonify = Sonify;
+var BarChart_default = BarChart;
+export {
+  BarChart,
+  BarChart_default as default
+};
+//# sourceMappingURL=BarChart.js.map