@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/AreaChart/AreaChart.js

@@ -0,0 +1,480 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  Area as RechartsArea,
+  AreaChart as RechartsAreaChart,
+  CartesianGrid,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis
+} from "recharts";
+import { useReducedMotion } from "motion/react";
+import { ChartContainer, percentTick } 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 {
+  ChartSonifyButton,
+  Sonify,
+  useChartSonifySeries
+} from "../lib/sonify-control.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,
+  AreaDottedFill,
+  AreaGradientFill,
+  AreaGradientReverseFill,
+  AreaHatchedFill,
+  AreaLinesFill,
+  AreaSolidFill,
+  RevealMask,
+  SeriesGradient,
+  UnselectedFill
+} from "../lib/paint.js";
+const STROKE_WIDTH = 0.8;
+const STACK_ID = "m22-area-stack";
+const CHART_MARGIN = { top: 8, right: 12, bottom: 0, left: 12 };
+const AreaChartContext = createContext(null);
+function useAreaChart() {
+  const context = useContext(AreaChartContext);
+  if (!context) throw new Error("An area chart part must be rendered inside <AreaChart>");
+  return context;
+}
+function AreaChart({
+  config,
+  data,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  curveType = "linear",
+  animationType = "forward",
+  stackType = "default",
+  defaultSelectedDataKey = null,
+  onSelectionChange,
+  isLoading = false,
+  loadingPoints,
+  xDataKey,
+  hideDataTable = false,
+  empty
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey);
+  const { rows: loadingData, onShimmerExit } = useLoadingRows(isLoading, loadingPoints);
+  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 columns = useMemo(
+    () => Object.entries(config).map(([key, series]) => ({ key, label: series.label })),
+    [config]
+  );
+  const isExpanded = stackType === "expanded";
+  const isStacked = stackType === "stacked" || isExpanded;
+  const showBrush = brushSlot.present && !isLoading;
+  const showToolbar = toolbarSlot !== null && !isLoading;
+  const isEmpty = !isLoading && empty !== false && data.length === 0;
+  const displayData = isLoading ? loadingData : showBrush || showToolbar ? zoom.visibleData : data;
+  const sonifySeries = useChartSonifySeries(
+    sonifySlot,
+    displayData,
+    config,
+    xDataKey
+  );
+  const selectDataKey = useCallback(
+    (next) => {
+      setSelectedDataKey(next);
+      onSelectionChange?.(next);
+    },
+    [onSelectionChange]
+  );
+  const context = useMemo(
+    () => ({
+      config,
+      rows: displayData,
+      curveType,
+      animationType,
+      isStacked,
+      isExpanded,
+      isLoading,
+      selectedDataKey,
+      selectDataKey
+    }),
+    [
+      animationType,
+      config,
+      curveType,
+      displayData,
+      isExpanded,
+      isLoading,
+      isStacked,
+      selectDataKey,
+      selectedDataKey
+    ]
+  );
+  return /* @__PURE__ */ jsx(AreaChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : { rows: data, rowKey: xDataKey, columns },
+      children: [
+        sonifySlot && /* @__PURE__ */ jsx(ChartSonifyButton, { ...sonifySlot, title, series: sonifySeries }),
+        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,
+                    stacked: isStacked,
+                    className: "mt-1",
+                    ...zoom.brushProps,
+                    onChange: (range) => {
+                      zoom.brushProps.onChange(range);
+                      brushSlot.onChange?.(range);
+                    }
+                  }
+                ),
+                children: /* @__PURE__ */ jsxs(
+                  RechartsAreaChart,
+                  {
+                    id: chartId,
+                    accessibilityLayer: true,
+                    margin: CHART_MARGIN,
+                    stackOffset: isExpanded ? "expand" : void 0,
+                    data: displayData,
+                    ...chartProps,
+                    children: [
+                      chartChildren,
+                      isLoading && /* @__PURE__ */ jsx(LoadingArea, { chartId, curveType, onShimmerExit })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+function Area({
+  dataKey,
+  variant = "gradient",
+  strokeVariant = "dashed",
+  strokeWidth = STROKE_WIDTH,
+  curveType,
+  animationType,
+  connectNulls = false,
+  isClickable = false,
+  children,
+  areaProps
+}) {
+  const {
+    config,
+    curveType: defaultCurve,
+    animationType: defaultAnimation,
+    isStacked,
+    isExpanded,
+    isLoading,
+    rows,
+    selectedDataKey,
+    selectDataKey
+  } = useAreaChart();
+  const id = useId().replace(/:/g, "");
+  const reduceMotion = useReducedMotion();
+  if (isLoading) return null;
+  const reveal = reduceMotion ? "none" : animationType ?? defaultAnimation;
+  const maskId = reveal === "none" ? void 0 : `${id}-reveal-mask`;
+  const isSelected = selectedDataKey === dataKey;
+  const hasSelection = selectedDataKey !== null;
+  const dimmed = hasSelection && !isSelected;
+  const opacity = dimmed ? { fill: 0.25, stroke: 0.3, dot: 0.3 } : { fill: 1, 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";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      RechartsArea,
+      {
+        type: curveType ?? defaultCurve,
+        dataKey,
+        connectNulls,
+        fillOpacity: opacity.fill,
+        strokeOpacity: opacity.stroke,
+        fill: `url(#${id}-${dimmed ? "unselected" : variant}-${dataKey})`,
+        stroke: `url(#${id}-colors-${dataKey})`,
+        stackId: isStacked ? STACK_ID : void 0,
+        dot,
+        activeDot,
+        strokeWidth,
+        strokeDasharray: isDashed ? "3 3" : void 0,
+        isAnimationActive: false,
+        style: {
+          ...maskId ? { mask: `url(#${maskId})` } : {},
+          ...isClickable ? { cursor: "pointer" } : {}
+        },
+        onClick: () => {
+          if (!isClickable) return;
+          selectDataKey(isSelected ? null : dataKey);
+        },
+        ...areaProps,
+        children: [
+          animateDash && /* @__PURE__ */ jsx(AnimatedDashedStroke, {}),
+          labels
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      reveal !== "none" && /* @__PURE__ */ jsx(RevealMask, { id, type: reveal }),
+      /* @__PURE__ */ jsx(
+        SeriesGradient,
+        {
+          id,
+          dataKey,
+          config,
+          gradientUnits: isExpanded ? "userSpaceOnUse" : "objectBoundingBox"
+        }
+      ),
+      variant === "gradient" && /* @__PURE__ */ jsx(AreaGradientFill, { id, dataKey }),
+      variant === "gradient-reverse" && /* @__PURE__ */ jsx(AreaGradientReverseFill, { id, dataKey }),
+      variant === "solid" && /* @__PURE__ */ jsx(AreaSolidFill, { id, dataKey }),
+      variant === "dotted" && /* @__PURE__ */ jsx(AreaDottedFill, { id, dataKey }),
+      variant === "lines" && /* @__PURE__ */ jsx(AreaLinesFill, { id, dataKey }),
+      variant === "hatched" && /* @__PURE__ */ jsx(AreaHatchedFill, { id, dataKey }),
+      dimmed && /* @__PURE__ */ jsx(UnselectedFill, { id, dataKey })
+    ] })
+  ] });
+}
+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 } = useAreaChart();
+  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,
+  label,
+  ...rest
+}) {
+  const { isLoading, isExpanded } = useAreaChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsYAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      width,
+      tickFormatter: isExpanded ? percentTick : tickFormatter ?? defaultTick,
+      ...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 } = useAreaChart();
+  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 } = useAreaChart();
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedDataKey,
+          onSelectChange: selectDataKey,
+          isClickable,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant }) {
+  const { isLoading } = useAreaChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+function LoadingArea({
+  chartId,
+  curveType,
+  onShimmerExit
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsArea,
+      {
+        type: curveType,
+        dataKey: LOADING_KEY,
+        fillOpacity: 0.05,
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeOpacity: 0.5,
+        isAnimationActive: false,
+        legendType: "none",
+        tooltipType: "none",
+        activeDot: false,
+        dot: false,
+        className: "text-(--ink)",
+        style: { mask: `url(#${chartId}-loading-mask)` }
+      }
+    ),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(LoadingShimmer, { id: chartId, onShimmerExit }) })
+  ] });
+}
+AreaChart.Area = Area;
+AreaChart.Dot = Dot;
+AreaChart.ActiveDot = ActiveDot;
+AreaChart.XAxis = XAxis;
+AreaChart.YAxis = YAxis;
+AreaChart.Grid = Grid;
+AreaChart.Tooltip = Tooltip;
+AreaChart.Legend = Legend;
+AreaChart.Background = Background;
+AreaChart.ReferenceLine = ReferenceLine;
+AreaChart.ReferenceBand = ReferenceBand;
+AreaChart.Annotation = Annotation;
+AreaChart.Values = Values;
+AreaChart.Brush = Brush;
+AreaChart.Toolbar = Toolbar;
+AreaChart.Sonify = Sonify;
+var AreaChart_default = AreaChart;
+export {
+  AreaChart,
+  AreaChart_default as default
+};
+//# sourceMappingURL=AreaChart.js.map

package/dist/charts/AreaChart/AreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/AreaChart/AreaChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport {\n  Area as RechartsArea,\n  AreaChart as RechartsAreaChart,\n  CartesianGrid,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n} from 'recharts'\nimport { useReducedMotion } from 'motion/react'\nimport { ChartContainer, percentTick, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartEmpty, type ChartEmptyProps } from '../lib/empty'\nimport { axisLabel } from '../lib/axis'\nimport { defaultTick } from '../lib/format'\nimport { Annotation, ReferenceBand, ReferenceLine } from '../lib/annotations'\nimport { Values, findSlot, resolveValues, type ValuesProps } from '../lib/values'\nimport {\n  ChartSonifyButton,\n  Sonify,\n  useChartSonifySeries,\n  type SonifyProps,\n} from '../lib/sonify-control'\n\n/**\n * The axis props, with `label` narrowed to a string.\n *\n * Recharts' own `label` accepts a render function and a config object, neither\n * of which a call site should be reaching for to name an axis — and both of\n * which would let a consumer opt out of the system's own axis type styling\n * without noticing.\n */\nexport type ChartXAxisProps = Omit<ComponentProps<typeof RechartsXAxis>, 'label'> & {\n  /** What this axis measures. Say the unit here or in the series label, once. */\n  label?: string\n}\n\nexport type ChartYAxisProps = Omit<ComponentProps<typeof RechartsYAxis>, 'label'> & {\n  /** What this axis measures. Say the unit here or in the series label, once. */\n  label?: string\n}\n\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartDot, type ChartDotVariant } from '../lib/dot'\nimport {\n  ChartLegend,\n  ChartLegendContent,\n  type ChartLegendAlign,\n  type ChartLegendVariant,\n} from '../lib/legend'\nimport {\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartTooltipRoundness,\n  type ChartTooltipVariant,\n} from '../lib/tooltip'\nimport { Brush, ChartBrush, type BrushProps, type ChartBrushRange } from '../lib/brush'\nimport { ChartControls, Toolbar, type ToolbarProps } from '../lib/toolbar'\nimport { useChartZoom } from '../lib/zoom'\nimport { LoadingIndicator, LoadingShimmer, LOADING_KEY, useLoadingRows } from '../lib/loading'\nimport {\n  AnimatedDashedStroke,\n  AreaDottedFill,\n  AreaGradientFill,\n  AreaGradientReverseFill,\n  AreaHatchedFill,\n  AreaLinesFill,\n  AreaSolidFill,\n  RevealMask,\n  SeriesGradient,\n  UnselectedFill,\n  type ChartRevealType,\n} from '../lib/paint'\n\n/** The series stroke, in pixels. Thin by default — law 1 is a thin mark. */\nconst STROKE_WIDTH = 0.8\n\n/** Every stacked area shares one id, which is what makes them stack. */\nconst STACK_ID = 'm22-area-stack'\n\n/**\n * Room around the plot, so the first and last tick labels are not sliced by the\n * container's edge. Recharts' own default is 5px on every side, which is not\n * enough for a label centred on the axis's first point.\n */\nconst CHART_MARGIN = { top: 8, right: 12, bottom: 0, left: 12 }\n\n/** How an area's curve is interpolated between points. */\nexport type ChartCurveType = ComponentProps<typeof RechartsArea>['type']\n\n/**\n * How an area meets the plot.\n *\n * In the monochrome default this is the PRIMARY way two series are told apart\n * — the ramp is the second encoding — so a chart with more than one area\n * should vary this before it varies anything else.\n */\nexport type AreaVariant = 'gradient' | 'gradient-reverse' | 'solid' | 'dotted' | 'lines' | 'hatched'\n\n/** How the line on top of an area is drawn. */\nexport type AreaStrokeVariant = 'solid' | 'dashed' | 'animated-dashed'\n\n/** How several areas combine: side by side, stacked, or normalised to 100%. */\nexport type AreaStackType = 'default' | 'stacked' | 'expanded'\n\ninterface AreaChartContextValue {\n  config: ChartConfig\n  /** The rows on screen, so a mark can label its own extremes. */\n  rows: Record<string, unknown>[]\n  curveType: ChartCurveType\n  animationType: ChartRevealType\n  isStacked: boolean\n  isExpanded: boolean\n  isLoading: boolean\n  selectedDataKey: string | null\n  selectDataKey: (dataKey: string | null) => void\n}\n\nconst AreaChartContext = createContext<AreaChartContextValue | null>(null)\n\nfunction useAreaChart(): AreaChartContextValue {\n  const context = useContext(AreaChartContext)\n  if (!context) throw new Error('An area chart part must be rendered inside <AreaChart>')\n  return context\n}\n\n/** Fails the build when a config names a series the rows do not have. */\ntype ValidateKeys<TData, TConfig> = {\n  [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never\n}\n\nexport interface AreaChartProps<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n> {\n  /** Series keys → their label and paint. Declaration order is ramp order. */\n  config: TConfig & ValidateKeys<TData, TConfig>\n  /** The rows the chart draws. One entry per point, bar or category. */\n  data: TData[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsAreaChart>\n  /** The curve every `<AreaChart.Area>` inherits. */\n  curveType?: ChartCurveType\n  /** The intro wipe every `<AreaChart.Area>` inherits. */\n  animationType?: ChartRevealType\n  /** How several marks combine: side by side, stacked, or normalised to 100%. */\n  stackType?: AreaStackType\n  /** The series lit on first render. Selection dims every other series. */\n  defaultSelectedDataKey?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selectedDataKey: string | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /** How many points the skeleton draws. */\n  loadingPoints?: number\n  /**\n   * The row field on the category axis. Needed by the brush and by the table\n   * view.\n   */\n  xDataKey?: keyof TData & string\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw.\n   *\n   * Rendered instead of the plot whenever `data` is empty and the chart is not\n   * loading — the state a real dashboard reaches within a week, and the one an\n   * empty pair of axes is indistinguishable from a failed load. `false` keeps\n   * the axes, for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * A filled series over a category axis — the shape for a magnitude that is\n * continuous, where the area under the line means something.\n *\n * Composed rather than configured: axes, grid, tooltip, legend and the areas\n * themselves are children, so a chart renders exactly the parts it asked for\n * and nothing is switched on by a prop nobody can see.\n *\n * Reach for `<LineChart>` instead when the reader is comparing several series\n * against each other rather than reading one total, and for `<BarChart>` when\n * the categories are discrete.\n *\n * @example\n * <AreaChart title=\"Visitors per month\" config={config} data={data} xDataKey=\"month\">\n *   <AreaChart.Grid />\n *   <AreaChart.XAxis dataKey=\"month\" />\n *   <AreaChart.Tooltip />\n *   <AreaChart.Area dataKey=\"desktop\" variant=\"gradient\" />\n * </AreaChart>\n */\nexport function AreaChart<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n>({\n  config,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  curveType = 'linear',\n  animationType = 'forward',\n  stackType = 'default',\n  defaultSelectedDataKey = null,\n  onSelectionChange,\n  isLoading = false,\n  loadingPoints,\n  xDataKey,\n  hideDataTable = false,\n  empty,\n}: AreaChartProps<TData, TConfig>) {\n  const chartId = useId().replace(/:/g, '')\n  const [selectedDataKey, setSelectedDataKey] = useState<string | null>(defaultSelectedDataKey)\n  const { rows: loadingData, onShimmerExit } = useLoadingRows(isLoading, loadingPoints)\n  // One window, two views of it: the brush strip below the plot and the\n  // toolbar above it both read and write this. See `useChartZoom` for why they\n  // are not two separate windows.\n  const zoom = useChartZoom({ data, xDataKey })\n\n  // The brush, the toolbar and the sonify control are declared as children but\n  // never rendered into the Recharts tree — they live in the figure, outside\n  // the SVG.\n  const { brushSlot, toolbarSlot, sonifySlot, chartChildren } = useMemo(() => {\n    const parts = Children.toArray(children)\n    const element = parts.find((child) => isValidElement(child) && child.type === Brush)\n    const props = (isValidElement(element) ? element.props : {}) as BrushProps\n    return {\n      brushSlot: { present: isValidElement(element), ...props },\n      toolbarSlot: findSlot<ToolbarProps>(parts, Toolbar),\n      sonifySlot: findSlot<SonifyProps>(parts, Sonify),\n      chartChildren: parts.filter(\n        (child) =>\n          !(\n            isValidElement(child) &&\n            (child.type === Brush || child.type === Toolbar || child.type === Sonify)\n          ),\n      ),\n    }\n  }, [children])\n\n  const columns = useMemo(\n    () => Object.entries(config).map(([key, series]) => ({ key, label: series.label })),\n    [config],\n  )\n\n  const isExpanded = stackType === 'expanded'\n  const isStacked = stackType === 'stacked' || isExpanded\n  const showBrush = brushSlot.present && !isLoading\n  const showToolbar = toolbarSlot !== null && !isLoading\n  // `empty === false` keeps the axes, for a chart whose emptiness is the\n  // reading — a monitoring panel that should show a flat, silent range rather\n  // than a message.\n  const isEmpty = !isLoading && empty !== false && data.length === 0\n  const displayData =\n    isLoading ? loadingData : showBrush || showToolbar ? zoom.visibleData : data\n\n  // The rows on screen, so a brushed range sounds like what it looks like. A\n  // skeleton or an empty chart yields no finite value, which is what leaves the\n  // control disabled rather than playing silence.\n  const sonifySeries = useChartSonifySeries(\n    sonifySlot,\n    displayData as Record<string, unknown>[],\n    config,\n    xDataKey,\n  )\n\n  const selectDataKey = useCallback(\n    (next: string | null) => {\n      setSelectedDataKey(next)\n      onSelectionChange?.(next)\n    },\n    [onSelectionChange],\n  )\n\n  const context = useMemo<AreaChartContextValue>(\n    () => ({\n      config,\n      rows: displayData as Record<string, unknown>[],\n      curveType,\n      animationType,\n      isStacked,\n      isExpanded,\n      isLoading,\n      selectedDataKey,\n      selectDataKey,\n    }),\n    [\n      animationType,\n      config,\n      curveType,\n      displayData,\n      isExpanded,\n      isLoading,\n      isStacked,\n      selectDataKey,\n      selectedDataKey,\n    ],\n  )\n\n  return (\n    <AreaChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : { rows: data, rowKey: xDataKey, columns }\n        }\n      >\n        {sonifySlot && (\n          <ChartSonifyButton {...sonifySlot} title={title} series={sonifySeries} />\n        )}\n        {isEmpty ? (\n          <ChartEmpty {...(empty || {})} />\n        ) : (\n        <ChartControls\n          toolbar={showToolbar ? toolbarSlot : null}\n          zoom={zoom}\n          title={title}\n          rows={data}\n          columns={columns}\n          rowKey={xDataKey}\n        >\n        <ChartContainer\n          config={config}\n          footer={\n            showBrush && (\n              <ChartBrush\n                data={data}\n                config={config}\n                xDataKey={xDataKey}\n                variant=\"area\"\n                curveType={curveType}\n                height={brushSlot.height}\n                formatLabel={brushSlot.formatLabel}\n                stacked={isStacked}\n                className=\"mt-1\"\n                {...zoom.brushProps}\n                onChange={(range: ChartBrushRange) => {\n                  zoom.brushProps.onChange(range)\n                  brushSlot.onChange?.(range)\n                }}\n              />\n            )\n          }\n        >\n          <RechartsAreaChart\n            id={chartId}\n            accessibilityLayer\n            margin={CHART_MARGIN}\n            stackOffset={isExpanded ? 'expand' : undefined}\n            data={displayData}\n            {...chartProps}\n          >\n            {chartChildren}\n            {isLoading && (\n              <LoadingArea chartId={chartId} curveType={curveType} onShimmerExit={onShimmerExit} />\n            )}\n          </RechartsAreaChart>\n        </ChartContainer>\n        </ChartControls>\n        )}\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </AreaChartContext.Provider>\n  )\n}\n\nexport interface AreaProps {\n  /** The series to draw. Must exist on both the rows and the config. */\n  dataKey: string\n  variant?: AreaVariant\n  strokeVariant?: AreaStrokeVariant\n  strokeWidth?: number\n  curveType?: ChartCurveType\n  animationType?: ChartRevealType\n  connectNulls?: boolean\n  /** Lets a click on this area select it, dimming the rest. */\n  isClickable?: boolean\n  /** `<AreaChart.Dot>`, `<AreaChart.ActiveDot>` and `<AreaChart.Values>`. */\n  children?: ReactNode\n  areaProps?: ComponentProps<typeof RechartsArea>\n}\n\n/**\n * One filled series.\n *\n * Every area scopes its own gradients and patterns under a unique id, so any\n * number of them — each with its own variant, stroke and clickability — can\n * share a chart without one overwriting another's definitions.\n */\nfunction Area({\n  dataKey,\n  variant = 'gradient',\n  strokeVariant = 'dashed',\n  strokeWidth = STROKE_WIDTH,\n  curveType,\n  animationType,\n  connectNulls = false,\n  isClickable = false,\n  children,\n  areaProps,\n}: AreaProps) {\n  const {\n    config,\n    curveType: defaultCurve,\n    animationType: defaultAnimation,\n    isStacked,\n    isExpanded,\n    isLoading,\n    rows,\n    selectedDataKey,\n    selectDataKey,\n  } = useAreaChart()\n  const id = useId().replace(/:/g, '')\n  const reduceMotion = useReducedMotion()\n\n  if (isLoading) return null\n\n  const reveal: ChartRevealType = reduceMotion ? 'none' : (animationType ?? defaultAnimation)\n  const maskId = reveal === 'none' ? undefined : `${id}-reveal-mask`\n\n  const isSelected = selectedDataKey === dataKey\n  const hasSelection = selectedDataKey !== null\n  const dimmed = hasSelection && !isSelected\n  // The variant's own mask carries the fill strength now (`--chart-fill`), so\n  // a base multiplier here would darken paper and erase ink a second time.\n  // What is left is the SELECTION dim, which is a multiplier by definition.\n  const opacity = dimmed\n    ? { fill: 0.25, stroke: 0.3, dot: 0.3 }\n    : { fill: 1, stroke: 1, dot: 1 }\n\n  const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot, maskId)\n  const labels = resolveValues(\n    findSlot<ValuesProps>(children, Values),\n    rows.map((row) => Number(row[dataKey])).filter(Number.isFinite),\n  )\n\n  // An animated dash is a SMIL loop, which `keyframes.css` cannot reach — so it\n  // is gated here rather than in CSS. It is also dropped while another series\n  // is selected: a crawling dash on a dimmed line reads as the live one.\n  const animateDash = strokeVariant === 'animated-dashed' && !hasSelection && !reduceMotion\n  const isDashed = strokeVariant !== 'solid'\n\n  return (\n    <>\n      <RechartsArea\n        type={curveType ?? defaultCurve}\n        dataKey={dataKey}\n        connectNulls={connectNulls}\n        fillOpacity={opacity.fill}\n        strokeOpacity={opacity.stroke}\n        fill={`url(#${id}-${dimmed ? 'unselected' : variant}-${dataKey})`}\n        stroke={`url(#${id}-colors-${dataKey})`}\n        stackId={isStacked ? STACK_ID : undefined}\n        dot={dot}\n        activeDot={activeDot}\n        strokeWidth={strokeWidth}\n        strokeDasharray={isDashed ? '3 3' : undefined}\n        // Recharts' own area animation draws the fill and the dots on separate\n        // clocks, so the markers arrive before the line reaches them. The mask\n        // below wipes fill, stroke and dots in together instead.\n        isAnimationActive={false}\n        style={{\n          ...(maskId ? { mask: `url(#${maskId})` } : {}),\n          ...(isClickable ? { cursor: 'pointer' } : {}),\n        }}\n        onClick={() => {\n          if (!isClickable) return\n          selectDataKey(isSelected ? null : dataKey)\n        }}\n        {...areaProps}\n      >\n        {animateDash && <AnimatedDashedStroke />}\n        {labels}\n      </RechartsArea>\n      <defs>\n        {reveal !== 'none' && <RevealMask id={id} type={reveal} />}\n        <SeriesGradient\n          id={id}\n          dataKey={dataKey}\n          config={config}\n          gradientUnits={isExpanded ? 'userSpaceOnUse' : 'objectBoundingBox'}\n        />\n        {variant === 'gradient' && <AreaGradientFill id={id} dataKey={dataKey} />}\n        {variant === 'gradient-reverse' && <AreaGradientReverseFill id={id} dataKey={dataKey} />}\n        {variant === 'solid' && <AreaSolidFill id={id} dataKey={dataKey} />}\n        {variant === 'dotted' && <AreaDottedFill id={id} dataKey={dataKey} />}\n        {variant === 'lines' && <AreaLinesFill id={id} dataKey={dataKey} />}\n        {variant === 'hatched' && <AreaHatchedFill id={id} dataKey={dataKey} />}\n        {dimmed && <UnselectedFill id={id} dataKey={dataKey} />}\n      </defs>\n    </>\n  )\n}\n\nexport interface DotProps {\n  variant?: ChartDotVariant\n}\n\n/**\n * The resting point marker for the area it is composed inside. A slot: it\n * renders nothing, and the parent reads its variant.\n */\nconst Dot: FC<DotProps> = () => null\n\n/** The marker under the pointer. Same slot shape as `<Dot>`. */\nconst ActiveDot: FC<DotProps> = () => null\n\n/** Lifts `<Dot>` and `<ActiveDot>` out of an area's children. */\nfunction resolveDots(\n  children: ReactNode,\n  id: string,\n  dataKey: string,\n  dotOpacity: number,\n  maskId: string | undefined,\n) {\n  let dot: ComponentProps<typeof RechartsArea>['dot'] = false\n  let activeDot: ComponentProps<typeof RechartsArea>['activeDot'] = false\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return\n    const { variant } = (child as ReactElement<DotProps>).props\n\n    if (child.type === Dot) {\n      // The resting dot shares the intro wipe so it appears with its own line.\n      dot = (\n        <ChartDot\n          variant={variant}\n          dataKey={dataKey}\n          chartId={id}\n          fillOpacity={dotOpacity}\n          maskId={maskId}\n        />\n      )\n    }\n    if (child.type === ActiveDot) {\n      // The active dot is never masked: it only exists on hover, long after\n      // the intro has finished, and a stale mask would hide it entirely.\n      activeDot = (\n        <ChartDot variant={variant} dataKey={dataKey} chartId={id} fillOpacity={dotOpacity} />\n      )\n    }\n  })\n\n  return { dot, activeDot }\n}\n\n/** The category axis. Flat by default; every Recharts prop passes through. */\nfunction XAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  label,\n  ...rest\n}: ChartXAxisProps) {\n  const { isLoading } = useAreaChart()\n  if (isLoading) return null\n  return (\n    <RechartsXAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      {...rest}\n    >\n      {axisLabel(label, 'x')}\n    </RechartsXAxis>\n  )\n}\n\n/** The value axis. Formats as a percentage on its own when the stack is expanded. */\nfunction YAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  width = 'auto',\n  tickFormatter,\n  label,\n  ...rest\n}: ChartYAxisProps) {\n  const { isLoading, isExpanded } = useAreaChart()\n  if (isLoading) return null\n  return (\n    <RechartsYAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      width={width}\n      tickFormatter={isExpanded ? percentTick : (tickFormatter ?? defaultTick)}\n      {...rest}\n    >\n      {axisLabel(label, 'y')}\n    </RechartsYAxis>\n  )\n}\n\n/** Horizontal dashed rules. Vertical ones are off — they rarely earn their ink. */\nfunction Grid({\n  vertical = false,\n  strokeDasharray = '3 3',\n  ...rest\n}: ComponentProps<typeof CartesianGrid>) {\n  return <CartesianGrid vertical={vertical} strokeDasharray={strokeDasharray} {...rest} />\n}\n\nexport interface ChartTooltipSlotProps {\n  variant?: ChartTooltipVariant\n  roundness?: ChartTooltipRoundness\n  /** Shows the tooltip at this row before anything is hovered. */\n  defaultIndex?: number\n  /** The crosshair that follows the pointer along the axis. */\n  cursor?: boolean\n}\n\n/** The hover panel. Dims with the plot when a series is selected. */\nfunction Tooltip({ variant, roundness, defaultIndex, cursor = true }: ChartTooltipSlotProps) {\n  const { isLoading, selectedDataKey } = useAreaChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      cursor={cursor ? { strokeDasharray: '3 3', strokeWidth: STROKE_WIDTH } : false}\n      content={\n        <ChartTooltipContent selected={selectedDataKey} roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\nexport interface ChartLegendSlotProps {\n  variant?: ChartLegendVariant\n  align?: ChartLegendAlign\n  verticalAlign?: 'top' | 'middle' | 'bottom'\n  /** Makes each entry a button that selects its series. */\n  isClickable?: boolean\n}\n\n/**\n * The key. Required above one series: with the monochrome ramp two areas differ\n * by a step of grey and a texture, and neither names itself.\n */\nfunction Legend({\n  variant,\n  align = 'right',\n  verticalAlign = 'top',\n  isClickable = false,\n}: ChartLegendSlotProps) {\n  const { selectedDataKey, selectDataKey } = useAreaChart()\n\n  return (\n    <ChartLegend\n      verticalAlign={verticalAlign}\n      align={align}\n      content={\n        <ChartLegendContent\n          selected={selectedDataKey}\n          onSelectChange={selectDataKey}\n          isClickable={isClickable}\n          variant={variant}\n        />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the plot. */\nfunction Background({ variant }: { variant: ChartBackgroundVariant }) {\n  const { isLoading } = useAreaChart()\n  if (isLoading) return null\n  return <ChartBackground variant={variant} />\n}\n\n/** The skeleton drawn in place of the real areas while data is in flight. */\nfunction LoadingArea({\n  chartId,\n  curveType,\n  onShimmerExit,\n}: {\n  chartId: string\n  curveType: ChartCurveType\n  onShimmerExit: () => void\n}) {\n  return (\n    <>\n      <RechartsArea\n        type={curveType}\n        dataKey={LOADING_KEY}\n        fillOpacity={0.05}\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeOpacity={0.5}\n        isAnimationActive={false}\n        legendType=\"none\"\n        tooltipType=\"none\"\n        activeDot={false}\n        dot={false}\n        className=\"text-(--ink)\"\n        style={{ mask: `url(#${chartId}-loading-mask)` }}\n      />\n      <defs>\n        <LoadingShimmer id={chartId} onShimmerExit={onShimmerExit} />\n      </defs>\n    </>\n  )\n}\n\n// Every part hangs off the root, so one import brings the whole vocabulary and\n// no two charts collide over a name like `Tooltip`.\nAreaChart.Area = Area\nAreaChart.Dot = Dot\nAreaChart.ActiveDot = ActiveDot\nAreaChart.XAxis = XAxis\nAreaChart.YAxis = YAxis\nAreaChart.Grid = Grid\nAreaChart.Tooltip = Tooltip\nAreaChart.Legend = Legend\nAreaChart.Background = Background\nAreaChart.ReferenceLine = ReferenceLine\nAreaChart.ReferenceBand = ReferenceBand\nAreaChart.Annotation = Annotation\nAreaChart.Values = Values\nAreaChart.Brush = Brush\nAreaChart.Toolbar = Toolbar\nAreaChart.Sonify = Sonify\n\nexport default AreaChart\n"],"mappings":"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","names":[]}