@hexclave/dashboard-ui-components 1.0.3 → 1.0.5

package/src/components/analytics-chart/default-analytics-chart-tooltip.tsx

@@ -0,0 +1,265 @@
+import { cn } from "@hexclave/ui";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CursorClickIcon,
+  MinusIcon,
+  PushPinSimpleIcon,
+} from "@phosphor-icons/react";
+import type { CSSProperties } from "react";
+import type { AnalyticsChartStrings } from "./strings";
+import type { AnalyticsChartDelta, Point } from "./types";
+
+/** Trend pill — small rounded badge with an up/down/flat arrow, a signed
+ * percentage, and an optional trailing label. Shared between the default
+ * tooltip, the pie view, and the demo panels (which re-export it). */
+export function TrendPill({
+  delta,
+  label,
+  size = "sm",
+}: {
+  delta: AnalyticsChartDelta,
+  label?: string,
+  size?: "sm" | "md",
+}) {
+  const { pct, sign } = delta;
+  const tone =
+    sign === "up" ? "text-emerald-600 dark:text-emerald-400 bg-emerald-500/10"
+      : sign === "down" ? "text-rose-600 dark:text-rose-400 bg-rose-500/10"
+        : "text-muted-foreground bg-foreground/[0.06]";
+  const Icon = sign === "up" ? ArrowUpIcon : sign === "down" ? ArrowDownIcon : MinusIcon;
+  const text = pct == null ? "—" : `${pct > 0 ? "+" : ""}${pct}%`;
+  return (
+    <span className={cn(
+      "inline-flex items-center gap-1 rounded-full font-mono tabular-nums font-medium",
+      size === "md" ? "px-2 py-0.5 text-[11px]" : "px-1.5 py-[1px] text-[10px]",
+      tone,
+    )}>
+      <Icon weight="bold" className={size === "md" ? "size-3" : "size-2.5"} aria-hidden="true" />
+      {text}
+      {label && <span className="ml-0.5 text-muted-foreground font-normal">{label}</span>}
+    </span>
+  );
+}
+
+export type AnalyticsChartTooltipSegmentRow = {
+  key: string,
+  label: string,
+  value: number,
+  /** Light-theme color for the dot / swatch. */
+  color: string,
+  /** Dark-theme color for the dot / swatch. */
+  colorDark: string,
+};
+
+export type AnalyticsChartTooltipLayerView = {
+  /** Stable layer id (e.g. `"signups"`, `"previous"`). */
+  id: string,
+  /** Consumer-provided layer label. */
+  label: string,
+  /** Resolved layer color (light theme). */
+  color: string,
+  /** Resolved layer color (dark theme). */
+  colorDark: string,
+  /** Flat total for this layer at the hovered index. Populated regardless
+   * of segmentation so consumers can render the same number in either mode. */
+  total: number,
+  /** True iff this layer is rendered as a stacked breakdown. */
+  segmented: boolean,
+  /** Per-segment rows — empty when `segmented === false`. Order matches
+   * `segmentSeries`. */
+  segments: AnalyticsChartTooltipSegmentRow[],
+};
+
+export type AnalyticsChartTooltipContext = {
+  /** Index into the visible window. */
+  activeIndex: number,
+  /** Raw point at `activeIndex` — convenient for `.ts` access. */
+  point: Point,
+  /** True when the tooltip is pinned (via click) and stable under hover. */
+  isPinned: boolean,
+  /** Primary layer view or null when the primary layer is hidden. */
+  primary: AnalyticsChartTooltipLayerView | null,
+  /** Compare layer view or null when the compare layer is hidden. */
+  compare: AnalyticsChartTooltipLayerView | null,
+  /** Flat-mode delta between primary and compare totals. Null when either
+   * side is hidden. Consumers should feed this into their trend pill. */
+  delta: AnalyticsChartDelta | null,
+  /** Pre-bound value formatter for y-axis values. */
+  formatValue: (v: number) => string,
+  /** Pre-bound formatter for x-axis values. */
+  formatDate: (ts: number) => string,
+  /** Resolved strings — already merged with defaults. */
+  strings: AnalyticsChartStrings,
+};
+
+export type DefaultAnalyticsChartTooltipProps = {
+  ctx: AnalyticsChartTooltipContext,
+};
+
+/** The default tooltip body. The tooltip is rendered as an
+ * absolutely-positioned sibling of `<ChartContainer>`, which means it sits
+ * OUTSIDE the `[data-chart=…]` subtree that scopes shadcn's `--color-${key}`
+ * CSS variables. We therefore cannot reference those variables for segment
+ * swatches — instead, every swatch uses a single span with `--c-l`/`--c-d`
+ * custom properties + Tailwind arbitrary variants so one DOM element covers
+ * both themes. */
+export function DefaultAnalyticsChartTooltip({ ctx }: DefaultAnalyticsChartTooltipProps) {
+  const { point, isPinned, primary, compare, delta, formatValue: fv, formatDate: fd, strings } = ctx;
+  const anySegmented = (primary?.segmented ?? false) || (compare?.segmented ?? false);
+  return (
+    <div className="rounded-xl border border-foreground/10 bg-background/95 px-3 py-2.5 shadow-[0_10px_28px_rgba(15,23,42,0.18)] backdrop-blur-xl dark:shadow-[0_10px_28px_rgba(0,0,0,0.55)] min-w-[180px]">
+      <div className="flex items-center justify-between gap-3">
+        <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+          {fd(point.ts)}
+        </span>
+        {isPinned && (
+          <span className="inline-flex items-center gap-1 rounded-full bg-blue-500/10 px-1.5 py-[1px] text-[9px] font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-300">
+            <PushPinSimpleIcon weight="fill" className="size-2.5" aria-hidden="true" />
+            {strings.pinnedBadge}
+          </span>
+        )}
+      </div>
+      <div className="mt-2 flex flex-col gap-1.5">
+        <TooltipLayerRows view={primary} keyPrefix="p" fv={fv} muted={false} />
+        <TooltipLayerRows view={compare} keyPrefix="c" fv={fv} muted />
+      </div>
+      {anySegmented && (
+        <div className="mt-2 flex flex-col gap-1 border-t border-foreground/[0.07] pt-2">
+          {primary?.segmented && (
+            <LayerSummaryRow
+              label={`${primary.label}${strings.layerTotalSuffix}`}
+              value={fv(primary.total)}
+              muted={false}
+            />
+          )}
+          {compare?.segmented && (
+            <LayerSummaryRow
+              label={`${compare.label}${strings.layerTotalSuffix}`}
+              value={fv(compare.total)}
+              muted
+            />
+          )}
+          {primary?.segmented && compare?.segmented && delta && (
+            <div className="mt-1 flex items-center justify-between">
+              <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+                {strings.deltaVsPrev}
+              </span>
+              <TrendPill delta={delta} size="sm" />
+            </div>
+          )}
+        </div>
+      )}
+      {!anySegmented && delta && primary && compare && (
+        <div className="mt-2 flex items-center justify-between border-t border-foreground/[0.07] pt-2">
+          <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+            {strings.deltaVsPrev}
+          </span>
+          <TrendPill delta={delta} size="sm" />
+        </div>
+      )}
+      <div className="mt-2 flex items-center gap-1 text-[10px] text-muted-foreground">
+        <CursorClickIcon weight="bold" className="size-2.5" aria-hidden="true" />
+        <span>{isPinned ? strings.hintClickAnywhereUnpin : strings.hintClickToPin}</span>
+      </div>
+    </div>
+  );
+}
+
+/** Render either a single flat row or the per-segment breakdown rows for
+ * one tooltip layer view. Collapses what were formerly two parallel
+ * primary/compare branches into one component. */
+function TooltipLayerRows({
+  view,
+  keyPrefix,
+  fv,
+  muted,
+}: {
+  view: AnalyticsChartTooltipLayerView | null,
+  keyPrefix: string,
+  fv: (v: number) => string,
+  muted: boolean,
+}) {
+  if (!view) return null;
+  if (!view.segmented) {
+    return (
+      <LayerTotalRow
+        light={view.color}
+        dark={view.colorDark}
+        label={view.label}
+        value={fv(view.total)}
+        muted={muted}
+      />
+    );
+  }
+  return (
+    <>
+      {view.segments.map((s) => (
+        <LayerTotalRow
+          key={`${keyPrefix}-${s.key}`}
+          light={s.color}
+          dark={s.colorDark}
+          label={s.label}
+          value={fv(s.value)}
+          muted={muted}
+        />
+      ))}
+    </>
+  );
+}
+
+/** Single row: swatch + label + value. One DOM element for the swatch —
+ * dark-mode color is picked up via `--c-d`. */
+function LayerTotalRow({
+  light,
+  dark,
+  label,
+  value,
+  muted,
+}: {
+  light: string,
+  dark: string,
+  label: string,
+  value: string,
+  muted: boolean,
+}) {
+  return (
+    <div className="flex items-center gap-2.5">
+      <span
+        className="size-2 rounded-full bg-[var(--c-l)] dark:bg-[var(--c-d)]"
+        style={{ "--c-l": light, "--c-d": dark } as CSSProperties}
+      />
+      <span className="text-[11px] text-muted-foreground">{label}</span>
+      <span className={cn(
+        "ml-auto font-mono text-xs tabular-nums",
+        muted ? "text-muted-foreground" : "font-semibold text-foreground",
+      )}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function LayerSummaryRow({
+  label,
+  value,
+  muted,
+}: {
+  label: string,
+  value: string,
+  muted: boolean,
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+        {label}
+      </span>
+      <span className={cn(
+        "font-mono text-xs tabular-nums",
+        muted ? "text-muted-foreground" : "font-semibold text-foreground",
+      )}>
+        {value}
+      </span>
+    </div>
+  );
+}

package/src/components/analytics-chart/format.ts

@@ -0,0 +1,101 @@
+import type { FormatKind, FormatKindType, AnalyticsChartDelta } from "./types";
+
+export const FORMAT_KIND_TYPES: FormatKindType[] = [
+  "numeric",
+  "short",
+  "currency",
+  "duration",
+  "datetime",
+  "percent",
+];
+
+export const DEFAULT_FORMAT_KIND: { [K in FormatKindType]: Extract<FormatKind, { type: K }> } = {
+  numeric: { type: "numeric", locale: "en-US", decimals: 0 },
+  short: { type: "short", precision: 1, locale: "en-US" },
+  currency: { type: "currency", currency: "USD", divisor: 100, locale: "en-US" },
+  duration: { type: "duration", unit: "s", showZero: false },
+  datetime: { type: "datetime", style: "short", locale: "en-US" },
+  percent: { type: "percent", source: "fraction", decimals: 1 },
+};
+
+function formatRelative(value: number, locale: string): string {
+  const diff = value - Date.now();
+  const absSec = Math.abs(diff) / 1000;
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  if (absSec >= 86_400) return rtf.format(Math.round(diff / 86_400_000), "day");
+  if (absSec >= 3600) return rtf.format(Math.round(diff / 3_600_000), "hour");
+  if (absSec >= 60) return rtf.format(Math.round(diff / 60_000), "minute");
+  return "just now";
+}
+
+/** `short` uses compact notation (e.g. `1.2K`), not a custom `k` suffix. */
+export function formatValue(value: number, kind: FormatKind): string {
+  switch (kind.type) {
+    case "numeric": {
+      const decimals = kind.decimals ?? 0;
+      return value.toLocaleString(kind.locale ?? "en-US", {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      });
+    }
+    case "short": {
+      const precision = kind.precision ?? 1;
+      return new Intl.NumberFormat(kind.locale ?? "en-US", {
+        notation: "compact",
+        compactDisplay: "short",
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      }).format(value);
+    }
+    case "currency": {
+      const divisor = kind.divisor ?? 1;
+      return new Intl.NumberFormat(kind.locale ?? "en-US", {
+        style: "currency",
+        currency: kind.currency ?? "USD",
+      }).format(value / divisor);
+    }
+    case "duration": {
+      const unit = kind.unit ?? "s";
+      const seconds = unit === "ms" ? value / 1000
+        : unit === "m" ? value * 60
+          : unit === "h" ? value * 3600
+            : value;
+      const h = Math.floor(seconds / 3600);
+      const m = Math.floor((seconds % 3600) / 60);
+      const s = Math.floor(seconds % 60);
+      if (h > 0) return `${h}h ${m}m ${s}s`;
+      if (m > 0) return `${m}m ${s}s`;
+      if (unit === "ms" && seconds < 1) return `${Math.round(value)}ms`;
+      if (s > 0 || kind.showZero) return `${s}s`;
+      return "0s";
+    }
+    case "datetime": {
+      const d = new Date(value);
+      const style = kind.style ?? "short";
+      const locale = kind.locale ?? "en-US";
+      if (style === "iso") return d.toISOString();
+      if (style === "relative") return formatRelative(value, locale);
+      if (style === "long") return d.toLocaleString(locale, {
+        dateStyle: "medium",
+        timeStyle: "short",
+      });
+      return d.toLocaleDateString(locale, { month: "short", day: "numeric" });
+    }
+    case "percent": {
+      const source = kind.source ?? "fraction";
+      const decimals = kind.decimals ?? 1;
+      const pct = source === "basis" ? value / 100
+        : source === "whole" ? value
+          : value * 100;
+      return `${pct.toFixed(decimals)}%`;
+    }
+  }
+}
+
+export function formatDelta(current: number, previous: number): AnalyticsChartDelta {
+  if (!Number.isFinite(current) || !Number.isFinite(previous)) return { pct: null, sign: "na" };
+  if (previous === 0) return current === 0 ? { pct: 0, sign: "flat" } : { pct: null, sign: "na" };
+  const pct = Number((((current - previous) / previous) * 100).toFixed(1));
+  const sign = pct > 0 ? "up" : pct < 0 ? "down" : "flat";
+  return { pct, sign };
+}

package/src/components/analytics-chart/index.ts

@@ -0,0 +1,75 @@
+export { AnalyticsChart, type AnalyticsChartProps, type Margin } from "./analytics-chart";
+export {
+  DefaultAnalyticsChartTooltip,
+  TrendPill,
+  type AnalyticsChartTooltipContext,
+  type AnalyticsChartTooltipLayerView,
+  type AnalyticsChartTooltipSegmentRow,
+  type DefaultAnalyticsChartTooltipProps,
+} from "./default-analytics-chart-tooltip";
+export {
+  formatDelta,
+  formatValue,
+  DEFAULT_FORMAT_KIND,
+  FORMAT_KIND_TYPES,
+} from "./format";
+export {
+  ANALYTICS_CHART_DEFAULT_PALETTE,
+  buildRampColors,
+  buildSegmentThemeMap,
+  resolveAnalyticsChartPalette,
+} from "./palette";
+export {
+  ANALYTICS_CHART_DEFAULT_LAYERS,
+  ANALYTICS_CHART_DEFAULT_STATE,
+  computeLocalInProgressIdx,
+  EMPTY_MATRIX,
+  EMPTY_SERIES,
+  findAnnotationsLayer,
+  findCompareLayer,
+  findLayerById,
+  findPrimaryLayer,
+  isAnalyticsChartDataLayer,
+  isTimeseriesState,
+  patchLayerById,
+  resolveDataLayerStyle,
+  setLayerById,
+  STROKE_DASHARRAY,
+  type ResolvedDataLayerStyle,
+} from "./state";
+export {
+  ANALYTICS_CHART_DEFAULT_STRINGS,
+  resolveAnalyticsChartStrings,
+  type AnalyticsChartStrings,
+} from "./strings";
+export {
+  pointValue,
+  type AnalyticsChartAnnotationsLayer,
+  type AnalyticsChartAreaLayer,
+  type AnalyticsChartBarLayer,
+  type AnalyticsChartDataLayer,
+  type AnalyticsChartDelta,
+  type AnalyticsChartLayer,
+  type AnalyticsChartLayers,
+  type AnalyticsChartLayerType,
+  type AnalyticsChartLineLayer,
+  type AnalyticsChartPalette,
+  type AnalyticsChartPieProps,
+  type AnalyticsChartPieState,
+  type AnalyticsChartSegmentRamp,
+  type AnalyticsChartSeries,
+  type AnalyticsChartState,
+  type AnalyticsChartStrokeStyle,
+  type AnalyticsChartTimeseriesState,
+  type AnalyticsChartView,
+  type Annotation,
+  type FormatKind,
+  type FormatKindCurrency,
+  type FormatKindDatetime,
+  type FormatKindDuration,
+  type FormatKindNumeric,
+  type FormatKindPercent,
+  type FormatKindShort,
+  type FormatKindType,
+  type Point,
+} from "./types";

package/src/components/analytics-chart/palette.ts

@@ -0,0 +1,68 @@
+import type {
+  AnalyticsChartPalette,
+  AnalyticsChartSegmentRamp,
+  AnalyticsChartSeries,
+} from "./types";
+
+export const ANALYTICS_CHART_DEFAULT_PALETTE: AnalyticsChartPalette = {
+  primary: {
+    kind: "procedural",
+    hue: 220,
+    sat: 78,
+    shadeRangeLight: [28, 62],
+    shadeRangeDark: [52, 82],
+  },
+  compare: {
+    kind: "procedural",
+    hue: 38,
+    sat: 92,
+    shadeRangeLight: [28, 62],
+    shadeRangeDark: [52, 82],
+  },
+};
+
+export function resolveAnalyticsChartPalette(
+  override: Partial<AnalyticsChartPalette> | undefined,
+): AnalyticsChartPalette {
+  if (!override) return ANALYTICS_CHART_DEFAULT_PALETTE;
+  return {
+    primary: override.primary ?? ANALYTICS_CHART_DEFAULT_PALETTE.primary,
+    compare: override.compare ?? ANALYTICS_CHART_DEFAULT_PALETTE.compare,
+  };
+}
+
+/** Expand a ramp into N colors for a given theme. */
+export function buildRampColors(
+  ramp: AnalyticsChartSegmentRamp,
+  count: number,
+  theme: "light" | "dark",
+): string[] {
+  if (ramp.kind === "explicit") {
+    const list = theme === "light" ? ramp.light : ramp.dark;
+    if (list.length === 0) return Array.from({ length: count }, () => "#888");
+    return Array.from(
+      { length: count },
+      (_, i) => list[i < list.length ? i : list.length - 1]!,
+    );
+  }
+  const range = theme === "light" ? ramp.shadeRangeLight : ramp.shadeRangeDark;
+  return Array.from({ length: count }, (_, i) => {
+    const t = count <= 1 ? 0.5 : i / (count - 1);
+    const l = range[0] + t * (range[1] - range[0]);
+    return `hsl(${ramp.hue} ${ramp.sat}% ${l.toFixed(1)}%)`;
+  });
+}
+
+/** Per-segment light/dark colors for `ChartConfig.theme` (SVG only; siblings use inline vars). */
+export function buildSegmentThemeMap(
+  series: readonly AnalyticsChartSeries[],
+  ramp: AnalyticsChartSegmentRamp,
+): Record<string, { light: string, dark: string }> {
+  const light = buildRampColors(ramp, series.length, "light");
+  const dark = buildRampColors(ramp, series.length, "dark");
+  const out: Record<string, { light: string, dark: string }> = {};
+  series.forEach((s, i) => {
+    out[s.key] = { light: light[i]!, dark: dark[i]! };
+  });
+  return out;
+}

package/src/components/analytics-chart/render-data-series.tsx

@@ -0,0 +1,169 @@
+import type { ReactNode } from "react";
+import { Area, Bar, Line } from "recharts";
+import type {
+  AnalyticsChartDataLayer,
+  AnalyticsChartSeries,
+} from "./types";
+
+/** Area layers use fill-only `<Area>` plus `<Line>` for the top edge (not Recharts' closed-path stroke). */
+export type RenderDataSeriesArgs = {
+  layer: AnalyticsChartDataLayer,
+  segmented: boolean,
+  segmentSeries: readonly AnalyticsChartSeries[],
+  segKey: (segKey: string) => string,
+  stackId: string,
+  strokeDasharray: string | undefined,
+  segmentedStrokeDasharray: string | undefined,
+  fillOpacity: number,
+  segmentedFillOpacity: number,
+  baseOpacity?: number,
+  strokeWidth: number,
+  segmentedStrokeWidth: number,
+  inProgressKeys: { solid: string, dashed: string } | null,
+};
+
+/** Return value must be spread into `<ComposedChart>` as siblings — do not wrap in `<Fragment>`. */
+export function renderDataSeries(args: RenderDataSeriesArgs): ReactNode[] {
+  const {
+    layer,
+    segmented,
+    segmentSeries,
+    segKey,
+    stackId,
+    strokeDasharray,
+    segmentedStrokeDasharray,
+    fillOpacity,
+    segmentedFillOpacity,
+    baseOpacity = 1,
+    strokeWidth,
+    segmentedStrokeWidth,
+    inProgressKeys,
+  } = args;
+
+  const nodes: ReactNode[] = [];
+
+  if (segmented) {
+    segmentSeries.forEach((s, sIdx) => {
+      const key = segKey(s.key);
+      const nodeKey = `${layer.id}_seg_${s.key}`;
+      if (layer.type === "bar") {
+        const isTop = sIdx === segmentSeries.length - 1;
+        nodes.push(
+          <Bar
+            key={nodeKey}
+            dataKey={key}
+            stackId={stackId}
+            fill={`var(--color-${key})`}
+            radius={isTop ? [2, 2, 0, 0] : 0}
+            isAnimationActive={false}
+            opacity={baseOpacity}
+          />,
+        );
+      } else if (layer.type === "area") {
+        nodes.push(
+          <Area
+            key={nodeKey}
+            dataKey={key}
+            stackId={stackId}
+            type="linear"
+            fill={`var(--color-${key})`}
+            fillOpacity={segmentedFillOpacity}
+            stroke={`var(--color-${key})`}
+            strokeWidth={segmentedStrokeWidth}
+            strokeDasharray={segmentedStrokeDasharray}
+            isAnimationActive={false}
+            opacity={baseOpacity}
+          />,
+        );
+      } else {
+        nodes.push(
+          <Line
+            key={nodeKey}
+            dataKey={key}
+            type="linear"
+            stroke={`var(--color-${key})`}
+            strokeWidth={strokeWidth}
+            strokeDasharray={segmentedStrokeDasharray}
+            dot={false}
+            isAnimationActive={false}
+            opacity={baseOpacity}
+          />,
+        );
+      }
+    });
+    return nodes;
+  }
+
+  if (layer.type === "bar") {
+    nodes.push(
+      <Bar
+        key={`${layer.id}_main`}
+        dataKey={layer.id}
+        fill={`var(--color-${layer.id})`}
+        radius={2}
+        isAnimationActive={false}
+      />,
+    );
+    return nodes;
+  }
+
+  if (layer.type === "area") {
+    nodes.push(
+      <Area
+        key={`${layer.id}_area`}
+        dataKey={layer.id}
+        type="linear"
+        fill={`var(--color-${layer.id})`}
+        fillOpacity={fillOpacity}
+        stroke="none"
+        isAnimationActive={false}
+      />,
+    );
+  }
+
+  if (inProgressKeys) {
+    nodes.push(
+      <Line
+        key={`${layer.id}_solid`}
+        dataKey={inProgressKeys.solid}
+        type="linear"
+        stroke={`var(--color-${layer.id})`}
+        strokeWidth={strokeWidth}
+        strokeDasharray={strokeDasharray}
+        dot={false}
+        isAnimationActive={false}
+        connectNulls
+      />,
+    );
+    nodes.push(
+      <Line
+        key={`${layer.id}_dashed`}
+        dataKey={inProgressKeys.dashed}
+        type="linear"
+        stroke={`var(--color-${layer.id})`}
+        strokeWidth={strokeWidth}
+        strokeDasharray="4 4"
+        dot={false}
+        isAnimationActive={false}
+        connectNulls
+        opacity={0.85}
+      />,
+    );
+  } else {
+    nodes.push(
+      <Line
+        key={`${layer.id}_line`}
+        dataKey={layer.id}
+        type="linear"
+        stroke={`var(--color-${layer.id})`}
+        strokeWidth={strokeWidth}
+        strokeDasharray={strokeDasharray}
+        dot={false}
+        isAnimationActive={false}
+        opacity={baseOpacity}
+      />,
+    );
+  }
+
+  return nodes;
+}