react-native-livechart 3.12.0 → 4.0.0

package/src/components/LiveChartSeries.tsx

@@ -15,7 +15,11 @@ import {
   type SharedValue,
 } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
-import { DEFAULT_ACCENT_COLOR, MAX_MULTI_SERIES } from "../constants";
+import {
+  DEFAULT_ACCENT_COLOR,
+  HOLD_TO_SCRUB_MS,
+  MAX_MULTI_SERIES,
+} from "../constants";
 import {
   lineColorsSignatureFromArray,
   lineStyleSignatureFromArray,
@@ -29,12 +33,14 @@ import {
   resolveGridStyle,
   resolveLeftEdgeFade,
   resolveLegend,
+  resolveMarkerCluster,
   resolveMetrics,
   resolveMultiSeriesDot,
   resolveScrub,
   resolveSelectionDot,
   resolveXAxis,
   resolveYAxis,
+  resolveZoom,
 } from "../core/resolveConfig";
 import { useLiveChartSeriesEngine } from "../core/useLiveChartSeriesEngine";
 import { pulseRadialOutset } from "../draw/line";
@@ -46,7 +52,10 @@ import { useCrosshairSeries } from "../hooks/useCrosshairSeries";
 import { useMarkers } from "../hooks/useMarkers";
 import { useMultiSeriesDegen } from "../hooks/useMultiSeriesDegen";
 import { useMultiSeriesLinePaths } from "../hooks/useMultiSeriesLinePaths";
+import { usePanScroll } from "../hooks/usePanScroll";
+import { usePinchZoom } from "../hooks/usePinchZoom";
 import { useMultiSeriesReverseMorphInputs } from "../hooks/useReverseMorphEngineInputs";
+import { useVisibleRange } from "../hooks/useVisibleRange";
 import { useXAxis } from "../hooks/useXAxis";
 import { useYAxis } from "../hooks/useYAxis";
 import {
@@ -137,22 +146,28 @@ function useLiveChartSeriesController({
   metrics,
   scrub = true,
   selectionDot,
+  timeScroll = false,
+  zoom = false,
   onScrub,
   onGestureStart,
   onGestureEnd,
+  onVisibleRangeChange,
+  onReachStart,
   onSeriesToggle,
   dot: dotProp,
   legend: legendProp,
   degen,
   onDegenShake,
   markers,
-  onMarkerHover,
+  onMarkerPress,
   markerHitRadius = 16,
+  markerCluster,
   renderMarker,
   leftEdgeFade = true,
 }: LiveChartSeriesProps) {
   const emptyMarkers = useSharedValue<Marker[]>([]);
   const markersSV = markers ?? emptyMarkers;
+  const markerClusterCfg = resolveMarkerCluster(markerCluster);
   const markersActive = markers != null;
   const yAxisCfg = resolveYAxis(yAxis);
   const xAxisCfg = resolveXAxis(xAxis);
@@ -160,6 +175,27 @@ function useLiveChartSeriesController({
   const bottomLabelCfg = resolveAxisLabel(bottomLabel);
   const scrubCfg = resolveScrub(scrub);
   const scrubEnabled = scrubCfg !== null;
+
+  // Time-scroll + pinch-zoom (mirrors LiveChart). LiveChartSeries has no static
+  // mode, so these gate on the props alone. `holdToScrub` requires the scrub
+  // gesture to wait for a press-and-hold so a quick drag scrolls instead — the
+  // hold delay is threaded into `useCrosshairSeries` below.
+  const timeScrollEnabled = Boolean(timeScroll);
+  const zoomCfg = resolveZoom(zoom);
+  const zoomEnabled = zoomCfg !== null;
+  const scrollGestureMode =
+    typeof timeScroll === "object"
+      ? (timeScroll.gesture ?? "holdToScrub")
+      : "holdToScrub";
+  const timeScrollHoldMs =
+    typeof timeScroll === "object" ? timeScroll.scrubHoldMs : undefined;
+  // Precedence: explicit scrubHoldMs, then scrub.panGestureDelay, then default.
+  // `||` (not `??`) skips the resolved panGestureDelay's 0 default.
+  const scrubHoldMs =
+    timeScrollEnabled && scrollGestureMode === "holdToScrub"
+      ? (timeScrollHoldMs ?? (scrubCfg?.panGestureDelay || HOLD_TO_SCRUB_MS))
+      : (scrubCfg?.panGestureDelay ?? 0);
+
   const selectionDotCfg = resolveSelectionDot(selectionDot);
   const gridStyleCfg = resolveGridStyle(gridStyle);
   const dotCfg = resolveMultiSeriesDot(dotProp);
@@ -323,7 +359,7 @@ function useLiveChartSeriesController({
     effectivePadding,
     scrubEnabled,
     onScrub,
-    scrubCfg?.panGestureDelay ?? 0,
+    scrubHoldMs,
     onGestureStart,
     onGestureEnd,
   );
@@ -336,14 +372,77 @@ function useLiveChartSeriesController({
     markersSV,
     markersActive,
     markerHitRadius,
-    onMarkerHover,
+    onMarkerPress,
     series,
+    undefined, // lineData — multi-series anchors by seriesId
+    true, // autostart
+    false, // lineLinear — per-series curve handled in projection
+    markerClusterCfg,
   );
 
-  const rootGesture = markersActive
+  // Earliest retained time across all series — clamps how far the window pans
+  // back, and the `onReachStart` reference. Falls back to the live edge (no
+  // scrollable history) so panning is a no-op.
+  const scrollMinTime = useDerivedValue(() => {
+    const s = engine.series.get();
+    let min = Infinity;
+    for (let i = 0; i < s.length; i++) {
+      const d = s[i].data;
+      if (d.length > 0 && d[0].time < min) min = d[0].time;
+    }
+    return min === Infinity ? engine.liveEdge.get() : min;
+  });
+
+  const panScrollGesture = usePanScroll({
+    engine,
+    padding: effectivePadding,
+    minTime: scrollMinTime,
+    enabled: timeScrollEnabled,
+    mode: scrollGestureMode,
+    onScrollStart: () => {
+      "worklet";
+      crosshair.scrubActive.set(false);
+    },
+  });
+
+  const pinchZoomGesture = usePinchZoom({
+    engine,
+    padding: effectivePadding,
+    minTime: scrollMinTime,
+    timeWindow,
+    enabled: zoomEnabled,
+    minTimeWindow: zoomCfg?.minTimeWindow,
+    maxTimeWindow: zoomCfg?.maxTimeWindow,
+    onZoomStart: () => {
+      "worklet";
+      crosshair.scrubActive.set(false);
+    },
+  });
+
+  useVisibleRange({
+    engine,
+    minTime: scrollMinTime,
+    onVisibleRangeChange,
+    onReachStart,
+  });
+
+  let rootGesture = markersActive
     ? Gesture.Race(crosshair.gesture, markerTapGesture)
     : crosshair.gesture;
 
+  // holdToScrub races the scrub (quick drag scrolls; press-hold scrubs);
+  // axisDrag goes first via Exclusive (fails fast outside the bottom band).
+  if (timeScrollEnabled) {
+    rootGesture =
+      scrollGestureMode === "axisDrag"
+        ? Gesture.Exclusive(panScrollGesture, rootGesture)
+        : Gesture.Race(panScrollGesture, rootGesture);
+  }
+  // Pinch runs alongside (two-finger, disjoint from the one-finger gestures).
+  if (zoomEnabled) {
+    rootGesture = Gesture.Simultaneous(rootGesture, pinchZoomGesture);
+  }
+
   const backgroundColor = `rgb(${palette.bgRgb[0]}, ${palette.bgRgb[1]}, ${palette.bgRgb[2]})`;
 
   return {
@@ -392,6 +491,7 @@ function useLiveChartSeriesController({
     rootGesture,
     markersActive,
     markersSV,
+    markerClusterCfg,
     renderMarker,
     // selection dot: resolved config + fallback color (the leading series' color)
     selectionDot: selectionDotCfg,
@@ -436,6 +536,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     degenPackRevision,
     markersActive,
     markersSV,
+    markerClusterCfg,
     renderMarker,
     series,
     emptyText,
@@ -520,6 +621,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
             ringColor={palette.badgeOuterBg}
             color={dotCfg.color}
             pulse={dotCfg.pulse}
+            viewEnd={engine.viewEnd}
           />
         </Group>
       )}
@@ -553,6 +655,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
             font={skiaFont}
             series={series}
             renderMarker={renderMarker}
+            cluster={markerClusterCfg}
           />
         </Group>
       )}
@@ -665,6 +768,7 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
     bottomConnector,
     markersActive,
     markersSV,
+    markerClusterCfg,
     renderMarker,
   } = model;
 
@@ -772,6 +876,7 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
               engine={engine}
               padding={effectivePadding}
               series={series}
+              cluster={markerClusterCfg}
             />
           )}
         </View>

package/src/components/MarkerOverlay.tsx

@@ -17,8 +17,12 @@ import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
 import { usePathBuilder } from "../hooks/usePathBuilder";
 import {
+  BADGE_TEXT_SCALE,
   buildMarkerAtlas,
   defaultMarkerColor,
+  groupBgSig,
+  groupCountText,
+  groupGlyphSig,
   isConnectorMarker,
   markerAppearanceSig,
   type AtlasCell,
@@ -29,10 +33,15 @@ import {
   projectPoint,
   type ProjectedMarker,
 } from "../math/markers";
+import {
+  clusterMarkers,
+  type ResolvedMarkerCluster,
+} from "../math/markerCluster";
 import type {
   LiveChartPalette,
   LiveChartPoint,
   Marker,
+  MarkerRenderContext,
   SeriesConfig,
 } from "../types";
 
@@ -153,6 +162,7 @@ export function MarkerOverlay({
   lineData,
   lineLinear,
   renderMarker,
+  cluster,
 }: {
   markers: SharedValue<Marker[]>;
   engine: ChartEngineLayout;
@@ -170,7 +180,9 @@ export function MarkerOverlay({
    * `CustomMarkerOverlay` instead — so they're excluded from the atlas here to
    * avoid a (blurry) glyph drawn behind the custom element.
    */
-  renderMarker?: (marker: Marker) => unknown;
+  renderMarker?: (marker: Marker, ctx: MarkerRenderContext) => unknown;
+  /** Collision config; `"stacked"` fans/collapses co-located markers. */
+  cluster: ResolvedMarkerCluster;
 }) {
   // Seed from the current markers at mount; the reaction below keeps it in sync.
   const [snapshot, setSnapshot] = useState<Marker[]>(() => markers.get().slice());
@@ -198,7 +210,15 @@ export function MarkerOverlay({
     let k = "";
     for (let i = 0; i < snapshot.length; i++) {
       const m = snapshot[i];
-      if (renderMarker(m) != null) k += `${m.id}\x1f`;
+      // Detection ctx (an element-vs-null result must not depend on cluster
+      // state — see CustomMarkerOverlay); the live ctx is applied there.
+      const ctx: MarkerRenderContext = {
+        index: i,
+        isGrouped: false,
+        groupCount: 0,
+        side: m.side ?? "center",
+      };
+      if (renderMarker(m, ctx) != null) k += `${m.id}\x1f`;
     }
     return k;
   }, [snapshot, renderMarker]);
@@ -225,13 +245,22 @@ export function MarkerOverlay({
   // Rasterize at the screen's device-pixel ratio so sprites stay crisp on
   // retina canvases instead of being upscaled from a logical-sized texture.
   const dpr = PixelRatio.get();
+  const clusterStacked = cluster.mode === "stacked";
   const atlas = useMemo(
-    () => buildMarkerAtlas(snapshot.filter((m) => !customIds[m.id]), palette, font, dpr),
+    () =>
+      buildMarkerAtlas(
+        snapshot.filter((m) => !customIds[m.id]),
+        palette,
+        font,
+        dpr,
+        clusterStacked,
+      ),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- appearanceKey/paletteKey capture the inputs that change cell pixels
-    [appearanceKey, paletteKey, font, dpr],
+    [appearanceKey, paletteKey, font, dpr, clusterStacked],
   );
   const cells: Record<string, AtlasCell> = atlas.cells;
   const atlasImage = atlas.image;
+  const digitWidths = atlas.digitWidths;
   // Inverse of the texture's device-pixel scale; shrinks each hi-res cell back
   // to its logical on-canvas size in the per-frame blit.
   const invScale = 1 / atlas.scale;
@@ -271,15 +300,59 @@ export function MarkerOverlay({
         lineData: lineData?.get(),
         lineLinear,
       });
+      clusterMarkers(ms, buf, { config: cluster });
       const transforms = [];
       const sprites = [];
       for (let i = 0; i < ms.length; i++) {
         const pt = buf[i];
-        if (!pt.visible) continue;
+        // Collapsed-cluster members fold into their representative's badge.
+        if (!pt.visible || pt.hidden) continue;
         const m = ms[i];
         if (isConnectorMarker(m)) continue;
         // Custom-rendered markers are floated as RN views, not drawn here.
         if (customIds[m.id]) continue;
+        // Collapsed cluster: draw a count badge (bg stadium + composed digits)
+        // instead of the marker's own glyph, all within this one `drawAtlas`.
+        if (pt.isGrouped) {
+          const repColor = m.color ?? defaultMarkerColor(m.kind, palette);
+          const text = groupCountText(pt.groupCount);
+          const bg = cells[groupBgSig(repColor)];
+          if (bg) {
+            transforms.push(
+              Skia.RSXform(invScale, 0, pt.x - bg.w / 2, pt.y - bg.h / 2),
+            );
+            sprites.push(bg.rect);
+          }
+          // Lay the digits out proportionally (each by its own ink width), scaled
+          // down to fit the small round badge, and center the whole number. A
+          // negative kern (fraction of a digit) closes the font's side-bearing gap
+          // so "12" reads tight, not "1 2".
+          const S = BADGE_TEXT_SCALE;
+          let maxDW = 1;
+          for (let d = 0; d < 10; d++) {
+            const dw = digitWidths["" + d] ?? 0;
+            if (dw > maxDW) maxDW = dw;
+          }
+          const kern = -maxDW * S * 0.42;
+          let totalW = 0;
+          for (let c = 0; c < text.length; c++) {
+            totalW += (digitWidths[text[c]] ?? 0) * S + (c > 0 ? kern : 0);
+          }
+          let dx = pt.x - totalW / 2;
+          for (let c = 0; c < text.length; c++) {
+            const w = (digitWidths[text[c]] ?? 0) * S;
+            const gc = cells[groupGlyphSig(text[c])];
+            if (gc) {
+              const cx = dx + w / 2;
+              transforms.push(
+                Skia.RSXform(invScale * S, 0, cx - (gc.w * S) / 2, pt.y - (gc.h * S) / 2),
+              );
+              sprites.push(gc.rect);
+            }
+            dx += w + kern;
+          }
+          continue;
+        }
         const cell = cells[markerAppearanceSig(m)];
         if (!cell) continue;
         // Center the cell on the projected point. The cell's source rect is in
@@ -291,7 +364,20 @@ export function MarkerOverlay({
       }
       return { transforms, sprites };
     },
-    [cells, customIds, invScale, markers, engine, padding, series, lineData, lineLinear],
+    [
+      cells,
+      customIds,
+      invScale,
+      digitWidths,
+      markers,
+      engine,
+      padding,
+      palette,
+      series,
+      lineData,
+      lineLinear,
+      cluster,
+    ],
   );
   const transforms = useDerivedValue(() => atlasData.get().transforms, [atlasData]);
   const sprites = useDerivedValue(() => atlasData.get().sprites, [atlasData]);

package/src/components/MultiSeriesDots.tsx

@@ -1,6 +1,6 @@
 import { Circle, Group } from "@shopify/react-native-skia";
 
-import { useDerivedValue } from "react-native-reanimated";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type {
@@ -21,6 +21,7 @@ function SeriesDotAtIndex({
   ring,
   ringColor,
   pulse,
+  viewEnd,
 }: {
   index: number;
   engine: MultiEngineState;
@@ -32,6 +33,8 @@ function SeriesDotAtIndex({
   /** Fallback ring color when `ring.color` is unset (theme `badgeOuterBg`). */
   ringColor: string;
   pulse: ResolvedPulseConfig | null;
+  /** Pan/zoom right-edge override — pulse is frozen-out while scrolled back. */
+  viewEnd?: SharedValue<number | null>;
 }) {
   const dotX = useDerivedValue(() => {
     const w = engine.canvasWidth.value;
@@ -62,7 +65,9 @@ function SeriesDotAtIndex({
   });
 
   const pulseRadius = useDerivedValue(() => {
-    if (!pulse) return 0;
+    // A live heartbeat on a frozen historical point is wrong (and `timestamp` is
+    // frozen, so it wouldn't animate) — suppress the pulse while scrolled back.
+    if (!pulse || viewEnd?.value != null) return 0;
     const nowMs = engine.timestamp.value * 1000 + index * PULSE_STAGGER_MS;
     const t = (nowMs % pulse.interval) / pulse.duration;
     if (t >= 1) return 0;
@@ -70,7 +75,7 @@ function SeriesDotAtIndex({
   });
 
   const pulseOpacity = useDerivedValue(() => {
-    if (!pulse) return 0;
+    if (!pulse || viewEnd?.value != null) return 0;
     const nowMs = engine.timestamp.value * 1000 + index * PULSE_STAGGER_MS;
     const t = (nowMs % pulse.interval) / pulse.duration;
     if (t >= 1) return 0;
@@ -112,6 +117,7 @@ export function MultiSeriesDots({
   ringColor,
   color,
   pulse,
+  viewEnd,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
@@ -124,6 +130,8 @@ export function MultiSeriesDots({
   /** Fill color override; falls back to each series' line color. */
   color: string | undefined;
   pulse: ResolvedPulseConfig | null;
+  /** Pan/zoom right-edge override — pulse is frozen-out while scrolled back. */
+  viewEnd?: SharedValue<number | null>;
 }) {
   return (
     <Group>
@@ -138,6 +146,7 @@ export function MultiSeriesDots({
           ring={ring}
           ringColor={ringColor}
           pulse={pulse}
+          viewEnd={viewEnd}
         />
       ))}
     </Group>

package/src/components/ReferenceLineGroupOverlay.tsx

@@ -0,0 +1,207 @@
+import {
+  Group,
+  RoundedRect,
+  Text as SkiaText,
+  type SkFont,
+} from "@shopify/react-native-skia";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+
+import type { ChartPadding } from "../draw/line";
+import { measureFontTextWidth } from "../lib/measureFontTextWidth";
+import type { ReferenceGrouping } from "../math/referenceGroup";
+import type { ResolvedReferenceGroupBadge } from "../math/referenceLines";
+import type { LiveChartPalette } from "../types";
+
+/** Max simultaneous group handles (a fixed Skia slot pool — the per-frame group
+ *  count varies, so we draw a fixed set of slots and hide the unused ones). */
+const MAX_GROUP_PILLS = 12;
+/** Horizontal padding inside the count pill, in px. */
+const PILL_PAD_X = 6;
+/** Vertical padding inside the count pill, in px. */
+const PILL_PAD_Y = 3;
+/** Pill inset from the anchored plot edge, in px. */
+const EDGE_INSET = 2;
+
+interface PillLayout {
+  visible: boolean;
+  x: number;
+  top: number;
+  w: number;
+  text: string;
+  textX: number;
+  textY: number;
+}
+
+const HIDDEN_PILL: PillLayout = {
+  visible: false,
+  x: 0,
+  top: -1,
+  w: 0,
+  text: "",
+  textX: 0,
+  textY: -1,
+};
+
+/** One collapsed-group count pill (slot `index` of the fixed pool). Reads the
+ *  cluster at `grouping.groups[index]`; hidden when fewer groups exist this frame. */
+function GroupCountPill({
+  grouping,
+  index,
+  padding,
+  canvasWidth,
+  font,
+  position,
+  icon,
+  showText,
+  format,
+  baselineOffset,
+  pillH,
+  radius,
+  borderWidth,
+  color,
+  background,
+  textColor,
+}: {
+  grouping: SharedValue<ReferenceGrouping>;
+  index: number;
+  padding: ChartPadding;
+  canvasWidth: SharedValue<number>;
+  font: SkFont;
+  position: "left" | "center" | "right";
+  icon: string;
+  showText: boolean;
+  format?: (count: number) => string;
+  baselineOffset: number;
+  pillH: number;
+  radius: number;
+  borderWidth: number;
+  color: string;
+  background: string;
+  textColor: string;
+}) {
+  const layout = useDerivedValue<PillLayout>(() => {
+    const gs = grouping.get().groups;
+    if (index >= gs.length) return HIDDEN_PILL;
+    const g = gs[index];
+    const count = showText ? (format ? format(g.count) : String(g.count)) : "";
+    const text = icon ? (count ? `${icon} ${count}` : icon) : count;
+    const w = measureFontTextWidth(font, text) + PILL_PAD_X * 2;
+    // Anchor the pill horizontally to the chosen plot edge (or center).
+    const x1 = padding.left;
+    const x2 = canvasWidth.get() - padding.right;
+    let x: number;
+    if (position === "right") x = x2 - EDGE_INSET - w;
+    else if (position === "center") x = (x1 + x2) / 2 - w / 2;
+    else x = x1 + EDGE_INSET;
+    return {
+      visible: true,
+      x,
+      top: g.cy - pillH / 2,
+      w,
+      text,
+      textX: x + PILL_PAD_X,
+      textY: g.cy - baselineOffset,
+    };
+  });
+
+  const opacity = useDerivedValue(() => (layout.get().visible ? 1 : 0));
+  const x = useDerivedValue(() => layout.get().x);
+  const top = useDerivedValue(() => layout.get().top);
+  const w = useDerivedValue(() => layout.get().w);
+  const text = useDerivedValue(() => layout.get().text);
+  const textX = useDerivedValue(() => layout.get().textX);
+  const textY = useDerivedValue(() => layout.get().textY);
+
+  return (
+    <Group opacity={opacity}>
+      <RoundedRect
+        x={x}
+        y={top}
+        width={w}
+        height={pillH}
+        r={radius}
+        color={background}
+      />
+      <RoundedRect
+        x={x}
+        y={top}
+        width={w}
+        height={pillH}
+        r={radius}
+        color={color}
+        style="stroke"
+        strokeWidth={borderWidth}
+      />
+      <SkiaText x={textX} y={textY} text={text} font={font} color={textColor} />
+    </Group>
+  );
+}
+
+/**
+ * Draws the collapsed-group count handles (e.g. a "×3" pill) for reference-line
+ * grouping — one pill per multi-line cluster, pinned to the plot at the cluster
+ * centroid. The individual tags of clustered lines are suppressed upstream (via
+ * `groupHidden`), so a stack of nearby orders reads as one handle. The pill uses the
+ * same style/shape config as a per-line badge (`badge`): `position`, `icon`,
+ * `text` (showText), `background` / `borderColor` / `borderWidth`, `radius` (corner),
+ * `textColor`, per-badge `font`, and `offsetX` / `offsetY`; the `format` fn maps the
+ * count to the label. A fixed slot pool keeps the Skia tree stable while the
+ * per-frame group count varies.
+ */
+export function ReferenceLineGroupOverlay({
+  grouping,
+  padding,
+  canvasWidth,
+  palette,
+  font,
+  badge,
+  format,
+}: {
+  grouping: SharedValue<ReferenceGrouping>;
+  padding: ChartPadding;
+  canvasWidth: SharedValue<number>;
+  palette: LiveChartPalette;
+  font: SkFont;
+  badge: ResolvedReferenceGroupBadge;
+  format?: (count: number) => string;
+}) {
+  const fm = font.getMetrics();
+  const baselineOffset = (fm.ascent + fm.descent) / 2;
+  const pillH = fm.descent - fm.ascent + PILL_PAD_Y * 2;
+
+  // Theme defaults for the unset colors (mirrors the per-line badge resolution).
+  const background = badge.background ?? palette.tooltipBg;
+  const borderColor = badge.borderColor ?? palette.refLine;
+  const textColor = badge.textColor ?? palette.refLabel;
+
+  const transform =
+    badge.offsetX !== 0 || badge.offsetY !== 0
+      ? [{ translateX: badge.offsetX }, { translateY: badge.offsetY }]
+      : undefined;
+
+  const slots: React.ReactElement[] = [];
+  for (let i = 0; i < MAX_GROUP_PILLS; i++) {
+    slots.push(
+      <GroupCountPill
+        key={i}
+        grouping={grouping}
+        index={i}
+        padding={padding}
+        canvasWidth={canvasWidth}
+        font={font}
+        position={badge.position}
+        icon={badge.icon}
+        showText={badge.showText}
+        format={format}
+        baselineOffset={baselineOffset}
+        pillH={pillH}
+        radius={badge.radius}
+        borderWidth={badge.borderWidth}
+        color={borderColor}
+        background={background}
+        textColor={textColor}
+      />,
+    );
+  }
+  return <Group transform={transform}>{slots}</Group>;
+}