@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/ComposedChart/ComposedChart.js

@@ -0,0 +1,667 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  Bar as RechartsBar,
+  CartesianGrid,
+  ComposedChart as RechartsComposedChart,
+  Line as RechartsLine,
+  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 { ChartEmpty } 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 { ChartBackground } from "../lib/background.js";
+import { ChartDot } from "../lib/dot.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 {
+  AnimatedDashedStroke,
+  BarDuotoneFill,
+  BarGradientFill,
+  BarHatchedFill,
+  BarStrippedFill,
+  GlowFilter,
+  REVEAL_EASE,
+  RevealMask,
+  SeriesGradient
+} from "../lib/paint.js";
+const STROKE_WIDTH = 2;
+const BAR_RADIUS = 4;
+const GROW_DURATION = 0.5;
+const GROW_STAGGER = 0.05;
+const CHART_MARGIN = { top: 8, right: 12, bottom: 0, left: 12 };
+const ComposedChartContext = createContext(null);
+function useComposedChart() {
+  const context = useContext(ComposedChartContext);
+  if (!context) throw new Error("A composed chart part must be rendered inside <ComposedChart>");
+  return context;
+}
+function ComposedChart({
+  config,
+  data,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  curveType = "linear",
+  animationType = "forward",
+  barGap,
+  barCategoryGap,
+  defaultSelectedDataKey = null,
+  onSelectionChange,
+  isLoading = false,
+  loadingBars,
+  xDataKey,
+  hideDataTable = false,
+  empty
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [introStartedAt] = useState(() => Date.now());
+  const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey);
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const { rows: loadingData, onShimmerExit } = useLoadingRows(isLoading, loadingBars ?? 12);
+  const zoom = useChartZoom({ data, xDataKey });
+  const { brushSlot, toolbarSlot, 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),
+      chartChildren: parts.filter(
+        (child) => !(isValidElement(child) && (child.type === Brush || child.type === Toolbar))
+      )
+    };
+  }, [children]);
+  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 selectDataKey = useCallback(
+    (next) => {
+      setSelectedDataKey(next);
+      onSelectionChange?.(next);
+    },
+    [onSelectionChange]
+  );
+  const context = useMemo(
+    () => ({
+      config,
+      rows: displayData,
+      curveType,
+      animationType,
+      introStartedAt,
+      dataLength: displayData.length,
+      isLoading,
+      hoveredIndex,
+      selectedDataKey,
+      selectDataKey
+    }),
+    [
+      animationType,
+      config,
+      curveType,
+      displayData,
+      hoveredIndex,
+      introStartedAt,
+      isLoading,
+      selectDataKey,
+      selectedDataKey
+    ]
+  );
+  return /* @__PURE__ */ jsx(ComposedChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : { rows: data, rowKey: xDataKey, columns },
+      children: [
+        isEmpty ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : /* @__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: "area",
+                    curveType,
+                    height: brushSlot.height,
+                    formatLabel: brushSlot.formatLabel,
+                    className: "mt-1",
+                    ...zoom.brushProps,
+                    onChange: (range) => {
+                      zoom.brushProps.onChange(range);
+                      brushSlot.onChange?.(range);
+                    }
+                  }
+                ),
+                children: /* @__PURE__ */ jsxs(
+                  RechartsComposedChart,
+                  {
+                    id: chartId,
+                    accessibilityLayer: true,
+                    margin: CHART_MARGIN,
+                    data: isLoading ? loadingData : displayData,
+                    barGap,
+                    barCategoryGap,
+                    onMouseMove: (state) => {
+                      const index = state?.activeTooltipIndex;
+                      setHoveredIndex(typeof index === "number" ? index : null);
+                    },
+                    onMouseLeave: () => setHoveredIndex(null),
+                    ...chartProps,
+                    children: [
+                      chartChildren,
+                      isLoading && /* @__PURE__ */ jsx(LoadingBar, { chartId, onShimmerExit })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+function Bar({
+  dataKey,
+  variant = "default",
+  radius = BAR_RADIUS,
+  glowing = false,
+  animationType,
+  isClickable = false,
+  enableHoverHighlight = false,
+  children,
+  barProps
+}) {
+  const {
+    config,
+    animationType: defaultAnimation,
+    introStartedAt,
+    dataLength,
+    isLoading,
+    rows,
+    hoveredIndex,
+    selectedDataKey,
+    selectDataKey
+  } = useComposedChart();
+  const id = useId().replace(/:/g, "");
+  const reduceMotion = useReducedMotion();
+  if (isLoading) return null;
+  const isSelected = selectedDataKey === null || selectedDataKey === dataKey;
+  const reveal = reduceMotion ? "none" : animationType ?? defaultAnimation;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsBar,
+      {
+        dataKey,
+        fill: `url(#${id}-colors-${dataKey})`,
+        radius,
+        isAnimationActive: false,
+        style: isClickable || enableHoverHighlight ? { cursor: "pointer" } : void 0,
+        shape: (props) => {
+          const geometry = props;
+          const index = typeof geometry.index === "number" ? geometry.index : -1;
+          return /* @__PURE__ */ jsx(
+            ComposedBarShape,
+            {
+              ...geometry,
+              id,
+              dataKey,
+              variant,
+              barRadius: radius,
+              filter: glowing ? `url(#${id}-glow-${dataKey})` : void 0,
+              fillOpacity: barOpacity({
+                isClickable,
+                isSelected,
+                selectedDataKey,
+                enableHoverHighlight,
+                hoveredIndex,
+                index
+              }),
+              isClickable,
+              enableHoverHighlight,
+              animationType: reveal,
+              dataLength,
+              introStartedAt,
+              onSelect: () => {
+                if (!isClickable) return;
+                selectDataKey(selectedDataKey === dataKey ? null : dataKey);
+              }
+            }
+          );
+        },
+        ...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 }),
+      glowing && /* @__PURE__ */ jsx(GlowFilter, { id, dataKey })
+    ] })
+  ] });
+}
+function ComposedBarShape({
+  x = 0,
+  y = 0,
+  width = 0,
+  height = 0,
+  background,
+  index = -1,
+  id,
+  dataKey,
+  variant,
+  barRadius,
+  filter,
+  fillOpacity,
+  isClickable,
+  enableHoverHighlight,
+  animationType,
+  dataLength,
+  introStartedAt,
+  onSelect
+}) {
+  const cursor = isClickable || enableHoverHighlight ? { cursor: "pointer" } : void 0;
+  const grow = growAnimation(animationType, index, dataLength, introStartedAt) ?? {};
+  const fill = variant === "default" ? `url(#${id}-colors-${dataKey})` : `url(#${id}-${variant}-${dataKey})`;
+  const hitArea = /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: background?.x ?? x,
+      y: background?.y ?? y,
+      width: background?.width ?? width,
+      height: background?.height ?? height,
+      fill: "transparent"
+    }
+  );
+  if (variant === "stripped") {
+    return /* @__PURE__ */ jsxs("g", { style: cursor, onClick: onSelect, children: [
+      /* @__PURE__ */ jsxs(
+        motion.g,
+        {
+          ...grow,
+          filter,
+          opacity: fillOpacity,
+          className: "transition-opacity duration-(--duration-base)",
+          children: [
+            /* @__PURE__ */ jsx("rect", { x, y, width, height, fill }),
+            /* @__PURE__ */ jsx("rect", { x, y, width, height: 2, fill: `url(#${id}-colors-${dataKey})` })
+          ]
+        }
+      ),
+      hitArea
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("g", { style: cursor, onClick: onSelect, children: [
+    /* @__PURE__ */ jsx(motion.g, { ...grow, children: /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: barRadius,
+        ry: barRadius,
+        fill,
+        opacity: fillOpacity,
+        filter,
+        className: "transition-opacity duration-(--duration-base)"
+      }
+    ) }),
+    hitArea
+  ] });
+}
+function growAnimation(animationType, index, dataLength, 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);
+  return {
+    initial: { scaleY: from },
+    animate: { scaleY: 1 },
+    transition: {
+      duration: (endMs - Math.max(elapsed, startMs)) / 1e3,
+      ease: REVEAL_EASE,
+      delay: Math.max(0, startMs - elapsed) / 1e3
+    },
+    style: { originY: 1 }
+  };
+}
+function barOpacity({
+  isClickable,
+  isSelected,
+  selectedDataKey,
+  enableHoverHighlight,
+  hoveredIndex,
+  index
+}) {
+  const selectionOpacity = isClickable && selectedDataKey !== null ? isSelected ? 1 : 0.15 : 1;
+  if (enableHoverHighlight && hoveredIndex !== null) {
+    return hoveredIndex === index ? selectionOpacity : selectionOpacity * 0.3;
+  }
+  return selectionOpacity;
+}
+function Line({
+  dataKey,
+  strokeVariant = "solid",
+  curveType,
+  animationType,
+  connectNulls = false,
+  glowing = false,
+  isClickable = false,
+  children,
+  lineProps
+}) {
+  const {
+    config,
+    curveType: defaultCurve,
+    animationType: defaultAnimation,
+    isLoading,
+    rows,
+    selectedDataKey,
+    selectDataKey
+  } = useComposedChart();
+  const id = useId().replace(/:/g, "");
+  const reduceMotion = useReducedMotion();
+  if (isLoading) return null;
+  const resolvedCurve = curveType ?? defaultCurve;
+  const reveal = reduceMotion ? "none" : animationType ?? defaultAnimation;
+  const maskId = reveal === "none" ? void 0 : `${id}-reveal-mask`;
+  const hasSelection = selectedDataKey !== null;
+  const dimmed = hasSelection && selectedDataKey !== dataKey;
+  const opacity = dimmed ? { stroke: 0.3, dot: 0.3 } : { stroke: 1, dot: 1 };
+  const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot, maskId);
+  const labels = resolveValues(
+    findSlot(children, Values),
+    rows.map((row) => Number(row[dataKey])).filter(Number.isFinite)
+  );
+  const animateDash = strokeVariant === "animated-dashed" && !hasSelection && !reduceMotion;
+  const isDashed = strokeVariant !== "solid";
+  const select = () => {
+    if (!isClickable) return;
+    selectDataKey(selectedDataKey === dataKey ? null : dataKey);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isClickable && // A 20px transparent line under the visible one, giving a 2px stroke a
+    // pointer target a finger can hit.
+    /* @__PURE__ */ jsx(
+      RechartsLine,
+      {
+        type: resolvedCurve,
+        dataKey,
+        connectNulls,
+        stroke: "transparent",
+        strokeWidth: 20,
+        dot: false,
+        activeDot: false,
+        isAnimationActive: false,
+        legendType: "none",
+        tooltipType: "none",
+        style: { cursor: "pointer" },
+        onClick: select
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RechartsLine,
+      {
+        type: resolvedCurve,
+        dataKey,
+        connectNulls,
+        strokeOpacity: opacity.stroke,
+        stroke: `url(#${id}-colors-${dataKey})`,
+        filter: glowing ? `url(#${id}-glow-${dataKey})` : void 0,
+        dot,
+        activeDot,
+        strokeWidth: STROKE_WIDTH,
+        strokeDasharray: isDashed ? "5 5" : void 0,
+        isAnimationActive: false,
+        style: {
+          ...maskId ? { mask: `url(#${maskId})` } : {},
+          // The hit line underneath owns the pointer; without this the visible
+          // line swallows the click it is sitting on top of.
+          ...isClickable ? { cursor: "pointer", pointerEvents: "none" } : {}
+        },
+        ...lineProps,
+        children: [
+          animateDash && /* @__PURE__ */ jsx(AnimatedDashedStroke, { dash: 5 }),
+          labels
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      reveal !== "none" && /* @__PURE__ */ jsx(RevealMask, { id, type: reveal }),
+      /* @__PURE__ */ jsx(SeriesGradient, { id, dataKey, config }),
+      glowing && /* @__PURE__ */ jsx(GlowFilter, { id, dataKey, spread: 10, intensity: 2 })
+    ] })
+  ] });
+}
+const Dot = () => null;
+const ActiveDot = () => null;
+function resolveDots(children, id, dataKey, dotOpacity, maskId) {
+  let dot = false;
+  let activeDot = false;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const { variant } = child.props;
+    if (child.type === Dot) {
+      dot = /* @__PURE__ */ jsx(
+        ChartDot,
+        {
+          variant,
+          dataKey,
+          chartId: id,
+          fillOpacity: dotOpacity,
+          maskId
+        }
+      );
+    }
+    if (child.type === ActiveDot) {
+      activeDot = /* @__PURE__ */ jsx(ChartDot, { variant, dataKey, chartId: id, fillOpacity: dotOpacity });
+    }
+  });
+  return { dot, activeDot };
+}
+function XAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  label,
+  ...rest
+}) {
+  const { isLoading } = useComposedChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsXAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      ...rest,
+      children: axisLabel(label, "x")
+    }
+  );
+}
+function YAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  width = "auto",
+  tickFormatter = defaultTick,
+  label,
+  ...rest
+}) {
+  const { isLoading } = useComposedChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsYAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      width,
+      tickFormatter,
+      ...rest,
+      children: axisLabel(label, "y")
+    }
+  );
+}
+function Grid({
+  vertical = false,
+  strokeDasharray = "3 3",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { vertical, strokeDasharray, ...rest });
+}
+function Tooltip({ variant, roundness, defaultIndex, cursor = true }) {
+  const { isLoading, selectedDataKey } = useComposedChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      defaultIndex,
+      cursor: cursor ? { strokeDasharray: "3 3", strokeWidth: STROKE_WIDTH } : false,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { selected: selectedDataKey, roundness, variant })
+    }
+  );
+}
+function Legend({
+  variant,
+  align = "right",
+  verticalAlign = "top",
+  isClickable = false
+}) {
+  const { selectedDataKey, selectDataKey } = useComposedChart();
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedDataKey,
+          onSelectChange: selectDataKey,
+          isClickable,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant }) {
+  const { isLoading } = useComposedChart();
+  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 }) })
+  ] });
+}
+ComposedChart.Bar = Bar;
+ComposedChart.Line = Line;
+ComposedChart.Dot = Dot;
+ComposedChart.ActiveDot = ActiveDot;
+ComposedChart.XAxis = XAxis;
+ComposedChart.YAxis = YAxis;
+ComposedChart.Grid = Grid;
+ComposedChart.Tooltip = Tooltip;
+ComposedChart.Legend = Legend;
+ComposedChart.Background = Background;
+ComposedChart.ReferenceLine = ReferenceLine;
+ComposedChart.ReferenceBand = ReferenceBand;
+ComposedChart.Annotation = Annotation;
+ComposedChart.Values = Values;
+ComposedChart.Brush = Brush;
+ComposedChart.Toolbar = Toolbar;
+var ComposedChart_default = ComposedChart;
+export {
+  ComposedChart,
+  ComposedChart_default as default
+};
+//# sourceMappingURL=ComposedChart.js.map