react-native-livechart 3.3.0 → 3.5.0

package/src/components/ReferenceLineOverlay.tsx

@@ -12,23 +12,21 @@ import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
 import { usePathBuilder } from "../hooks/usePathBuilder";
 import { useReferenceLine } from "../hooks/useReferenceLine";
-import { measureFontTextWidth } from "../lib/measureFontTextWidth";
-import { referenceLineForm } from "../math/referenceLines";
+import { referenceLineForm, resolveReferenceBadge } from "../math/referenceLines";
 import type { LiveChartPalette, ReferenceLine } from "../types";
 
 /** Translucent fill alpha for value / time bands. */
 const BAND_FILL_OPACITY = 0.16;
 
-/** Padding inside the off-axis badge pill, in px. */
-const OFF_AXIS_PILL_PAD_X = 6;
-const OFF_AXIS_PILL_PAD_Y = 3;
-const OFF_AXIS_PILL_RADIUS = 5;
+/** Vertical padding inside the badge pill, in px (kept in sync with the layout). */
+const BADGE_PILL_PAD_Y = 3;
+const BADGE_PILL_RADIUS = 5;
 
 /**
  * Renders one reference line or band into the chart canvas. Handles all three
  * `ReferenceLine` forms (horizontal line, horizontal value band, vertical time
- * band) plus the off-axis badge for an off-screen Form-A value. Self-contained
- * so callers can `.map()` over a variable-length `referenceLines` array.
+ * band) plus the Form-A pill badge (in-range tag + off-screen chevron pin).
+ * Self-contained so callers can `.map()` over a variable-length array.
  */
 export function ReferenceLineOverlay({
   engine,
@@ -37,6 +35,7 @@ export function ReferenceLineOverlay({
   palette,
   formatValue,
   font,
+  badgeLayer = false,
 }: {
   engine: ChartEngineLayout;
   padding: ChartPadding;
@@ -44,6 +43,13 @@ export function ReferenceLineOverlay({
   palette: LiveChartPalette;
   formatValue: (v: number) => string;
   font: SkFont;
+  /**
+   * Render only the badge + label (`true`) or only the lines / bands (`false`,
+   * default). The caller draws the base pass behind the chart content and the
+   * badge pass **above** the left-edge fade, so badges/labels stay crisp instead
+   * of being erased by the fade's `dstOut` blend.
+   */
+  badgeLayer?: boolean;
 }) {
   const form = referenceLineForm(line);
   const isBand = form === "value-band" || form === "time-band";
@@ -58,21 +64,24 @@ export function ReferenceLineOverlay({
   const bandFillOpacity = line.fillOpacity ?? BAND_FILL_OPACITY;
   const hasBandBorder = isBand && line.strokeWidth !== undefined;
 
-  // Off-axis target pill styling.
-  const badgeBackground = line.badgeBackground ?? palette.tooltipBg;
-  const badgeBorderColor = line.badgeBorderColor ?? color;
-  const badgeRadius = line.badgeRadius ?? OFF_AXIS_PILL_RADIUS;
+  // Resolved badge appearance (badge config → fallback flat fields → theme).
+  const badge = resolveReferenceBadge(line);
+  const badgeBackground = badge?.background ?? palette.tooltipBg;
+  const badgeBorderColor = badge?.borderColor ?? color;
+  const badgeRadius = badge?.radius ?? BADGE_PILL_RADIUS;
 
   const lineBuilder = usePathBuilder();
   const bandBuilder = usePathBuilder();
   const borderBuilder = usePathBuilder();
-  const offBuilder = usePathBuilder();
+  const connBuilder = usePathBuilder();
   const chevBuilder = usePathBuilder();
 
   const linePath = useDerivedValue(() => {
     const b = lineBuilder.value;
     const l = layout.get();
-    if (l.visible && !l.offAxis && !isBand) {
+    // A plain full-width line. A badge instead draws a pill + a connector to the
+    // opposite edge, below.
+    if (l.visible && !l.badge && !isBand) {
       b.moveTo(l.x1, l.y);
       b.lineTo(l.x2, l.y);
     }
@@ -113,19 +122,13 @@ export function ReferenceLineOverlay({
     return b.detach();
   });
 
-  const offLinePath = useDerivedValue(() => {
-    const b = offBuilder.value;
+  // Badge connector — the dashed line from the pill out to the opposite edge.
+  const connPath = useDerivedValue(() => {
+    const b = connBuilder.value;
     const l = layout.get();
-    if (l.visible && l.offAxis) {
-      // Start the connector just past the badge pill's right edge so the dashed
-      // line runs out to the chart edge rather than behind the badge.
-      const pillRight =
-        l.labelX + measureFontTextWidth(font, l.label) + OFF_AXIS_PILL_PAD_X;
-      const start = pillRight + 4;
-      if (start < l.x2) {
-        b.moveTo(start, l.y);
-        b.lineTo(l.x2, l.y);
-      }
+    if (l.visible && l.badge && l.connStart >= 0) {
+      b.moveTo(l.connStart, l.y);
+      b.lineTo(l.connEnd, l.y);
     }
     return b.detach();
   });
@@ -133,8 +136,8 @@ export function ReferenceLineOverlay({
   const chevronPath = useDerivedValue(() => {
     const b = chevBuilder.value;
     const l = layout.get();
-    if (l.visible && l.offAxis) {
-      const cx = l.x1 + 6;
+    if (l.visible && l.offAxis && l.chevronCx >= 0) {
+      const cx = l.chevronCx;
       const cy = l.y;
       const s = 4;
       if (l.chevronUp) {
@@ -150,55 +153,64 @@ export function ReferenceLineOverlay({
     return b.detach();
   });
 
-  const lineOpacity = useDerivedValue(() =>
-    layout.get().visible && !layout.get().offAxis && !isBand ? 1 : 0,
-  );
+  const lineOpacity = useDerivedValue(() => {
+    const l = layout.get();
+    return l.visible && !l.badge && !isBand ? 1 : 0;
+  });
   const bandOpacity = useDerivedValue(() =>
     layout.get().visible && isBand ? bandFillOpacity : 0,
   );
   const bandBorderOpacity = useDerivedValue(() =>
     layout.get().visible && hasBandBorder ? 1 : 0,
   );
-  const offOpacity = useDerivedValue(() =>
-    layout.get().visible && layout.get().offAxis ? 1 : 0,
-  );
-  const labelOpacity = useDerivedValue(() => (layout.get().visible ? 1 : 0));
+  const badgeOpacity = useDerivedValue(() => {
+    const l = layout.get();
+    return l.visible && l.badge ? 1 : 0;
+  });
+  // Text + icon ride in the badge pass too, so they stay crisp above the fade.
+  const labelOpacity = useDerivedValue(() => {
+    const l = layout.get();
+    return l.visible && l.label.length > 0 ? 1 : 0;
+  });
+  const iconOpacity = useDerivedValue(() => {
+    const l = layout.get();
+    return l.visible && l.icon.length > 0 ? 1 : 0;
+  });
 
   const labelX = useDerivedValue(() => layout.get().labelX);
   const labelY = useDerivedValue(() => layout.get().labelY);
   const labelText = useDerivedValue(() => layout.get().label);
+  const iconX = useDerivedValue(() => layout.get().iconX);
+  const iconText = useDerivedValue(() => layout.get().icon);
 
   // Font metrics depend only on the (stable) font, so read them once instead of
-  // on every frame inside the pill worklets (`getMetrics` allocates + crosses
-  // JSI). The off-axis pill's ascent offset and height are then plain constants.
+  // on every frame inside the pill worklet (`getMetrics` allocates + crosses JSI).
   const { ascent: fontAscent, height: pillH } = (() => {
     const fm = font.getMetrics();
     return {
       ascent: fm.ascent,
-      height: fm.descent - fm.ascent + OFF_AXIS_PILL_PAD_Y * 2,
+      height: fm.descent - fm.ascent + BADGE_PILL_PAD_Y * 2,
     };
   })();
 
-  // Off-axis badge pill — a rounded background behind the chevron + label.
-  const pillX = useDerivedValue(() => layout.get().x1 + 2);
+  // Pill rect — position/size from the layout; vertically centered on the line.
+  const pillX = useDerivedValue(() => layout.get().pillX);
+  const pillW = useDerivedValue(() => layout.get().pillW);
   const pillY = useDerivedValue(
-    () => layout.get().labelY + fontAscent - OFF_AXIS_PILL_PAD_Y,
+    () => layout.get().labelY + fontAscent - BADGE_PILL_PAD_Y,
   );
-  const pillW = useDerivedValue(() => {
-    const l = layout.get();
-    const textW = measureFontTextWidth(font, l.label);
-    return l.labelX + textW + OFF_AXIS_PILL_PAD_X - (l.x1 + 2);
-  });
 
   return (
     <Group>
-      {isBand && (
+      {/* Base pass — bands + lines, drawn behind the chart content (and faded at
+          the left edge like the rest of the content). */}
+      {!badgeLayer && isBand && (
         <Group opacity={bandOpacity}>
           <Path path={bandPath} style="fill" color={color} />
         </Group>
       )}
 
-      {hasBandBorder && (
+      {!badgeLayer && hasBandBorder && (
         <Group opacity={bandBorderOpacity}>
           <Path
             path={bandBorderPath}
@@ -211,7 +223,7 @@ export function ReferenceLineOverlay({
         </Group>
       )}
 
-      {!isBand && (
+      {!badgeLayer && !isBand && (
         <Group opacity={lineOpacity}>
           <Path
             path={linePath}
@@ -224,52 +236,67 @@ export function ReferenceLineOverlay({
         </Group>
       )}
 
-      <Group opacity={offOpacity}>
-        <Path
-          path={offLinePath}
-          style="stroke"
-          strokeWidth={strokeWidth}
-          color={color}
-        >
-          <DashPathEffect intervals={intervals} />
-        </Path>
-        <RoundedRect
-          x={pillX}
-          y={pillY}
-          width={pillW}
-          height={pillH}
-          r={badgeRadius}
-          color={badgeBackground}
-        />
-        <RoundedRect
-          x={pillX}
-          y={pillY}
-          width={pillW}
-          height={pillH}
-          r={badgeRadius}
-          color={badgeBorderColor}
-          style="stroke"
-          strokeWidth={1}
-        />
-        <Path
-          path={chevronPath}
-          style="stroke"
-          strokeWidth={1.5}
-          color={color}
-          strokeCap="round"
-          strokeJoin="round"
-        />
-      </Group>
+      {/* Badge pass — connector + pill + chevron + icon, above the left-edge fade. */}
+      {badgeLayer && (
+        <Group opacity={badgeOpacity}>
+          <Path
+            path={connPath}
+            style="stroke"
+            strokeWidth={strokeWidth}
+            color={color}
+          >
+            <DashPathEffect intervals={intervals} />
+          </Path>
+          <RoundedRect
+            x={pillX}
+            y={pillY}
+            width={pillW}
+            height={pillH}
+            r={badgeRadius}
+            color={badgeBackground}
+          />
+          <RoundedRect
+            x={pillX}
+            y={pillY}
+            width={pillW}
+            height={pillH}
+            r={badgeRadius}
+            color={badgeBorderColor}
+            style="stroke"
+            strokeWidth={1}
+          />
+          <Path
+            path={chevronPath}
+            style="stroke"
+            strokeWidth={1.5}
+            color={color}
+            strokeCap="round"
+            strokeJoin="round"
+          />
+          <Group opacity={iconOpacity}>
+            <SkiaText
+              x={iconX}
+              y={labelY}
+              text={iconText}
+              font={font}
+              color={labelColor}
+            />
+          </Group>
+        </Group>
+      )}
 
-      <Group opacity={labelOpacity}>
-        <SkiaText
-          x={labelX}
-          y={labelY}
-          text={labelText}
-          font={font}
-          color={labelColor}
-        />
-      </Group>
+      {/* Labels ride in the badge pass too, so they stay crisp above the fade. */}
+      {badgeLayer && (
+        <Group opacity={labelOpacity}>
+          <SkiaText
+            x={labelX}
+            y={labelY}
+            text={labelText}
+            font={font}
+            color={labelColor}
+          />
+        </Group>
+      )}
     </Group>
   );
 }

package/src/components/ScrubActionOverlay.tsx

@@ -0,0 +1,187 @@
+import {
+  Circle,
+  DashPathEffect,
+  Group,
+  Line,
+  RoundedRect,
+  Text as SkiaText,
+  type SkFont,
+} from "@shopify/react-native-skia";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import type {
+  ActionBadgeLayout,
+  TimeBadgeLayout,
+} from "../hooks/crosshairShared";
+import type { LiveChartPalette } from "../types";
+
+/**
+ * Scrub-action ("order ticket") overlay: the locked reticle (a horizontal price
+ * level line + a faint vertical line crossing at the reticle) and the right-gutter
+ * action badge — a circular icon button + a separate price pill. All keyed off the
+ * lock SharedValues, so it tracks the reticle on the UI thread without re-renders.
+ *
+ * Mounted by `LiveChart` **outside** the degen-shake group so the rendered badge
+ * stays aligned with the (untransformed) tap hit-test in {@link useCrosshair}.
+ * Visibility rides on a 0/1 opacity driven by `lockActive` (no React remount).
+ */
+export function ScrubActionOverlay({
+  lockActive,
+  lockX,
+  lockY,
+  actionBadge,
+  timeBadge,
+  engine,
+  padding,
+  palette,
+  font,
+  icon,
+  lineColor,
+  background,
+  iconColor,
+}: {
+  lockActive: SharedValue<boolean>;
+  lockX: SharedValue<number>;
+  lockY: SharedValue<number>;
+  actionBadge: SharedValue<ActionBadgeLayout>;
+  timeBadge?: SharedValue<TimeBadgeLayout>;
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  palette: LiveChartPalette;
+  font: SkFont;
+  icon: string;
+  lineColor?: string;
+  background?: string;
+  iconColor?: string;
+}) {
+  const opacity = useDerivedValue(() => (lockActive.value ? 1 : 0), [lockActive]);
+
+  // Horizontal level line (the chosen price), full plot width.
+  const hLeft = useDerivedValue(
+    () => ({ x: padding.left, y: lockY.value }),
+    [padding.left, lockY],
+  );
+  const hRight = useDerivedValue(
+    () => ({ x: engine.canvasWidth.value - padding.right, y: lockY.value }),
+    [engine.canvasWidth, padding.right, lockY],
+  );
+
+  // Faint vertical line at the reticle X, full plot height.
+  const vTop = useDerivedValue(
+    () => ({ x: lockX.value, y: padding.top }),
+    [lockX, padding.top],
+  );
+  const vBottom = useDerivedValue(
+    () => ({ x: lockX.value, y: engine.canvasHeight.value - padding.bottom }),
+    [lockX, engine.canvasHeight, padding.bottom],
+  );
+
+  // Action badge — a circular icon button + a separate price pill (2px gap).
+  // Center the icon by its *visual* bounds (not advance box) so a symbol like
+  // "+" sits dead-center in the circle. The glyph bounds are constant, so measure
+  // once and offset the per-frame circle center.
+  const iconBounds = icon ? font.measureText(icon) : null;
+  const iconOffX = iconBounds ? -iconBounds.x - iconBounds.width / 2 : 0;
+  const iconOffY = iconBounds ? -iconBounds.y - iconBounds.height / 2 : 0;
+
+  const iconOpacity = useDerivedValue(() =>
+    actionBadge.value.hasIcon ? 1 : 0,
+  );
+  const iconCx = useDerivedValue(() => actionBadge.value.iconCx);
+  const iconCy = useDerivedValue(() => actionBadge.value.iconCy);
+  const iconR = useDerivedValue(() => actionBadge.value.iconR);
+  const iconGlyphX = useDerivedValue(() => actionBadge.value.iconCx + iconOffX);
+  const iconGlyphY = useDerivedValue(() => actionBadge.value.iconCy + iconOffY);
+
+  const priceOpacity = useDerivedValue(() =>
+    actionBadge.value.hasPrice ? 1 : 0,
+  );
+  const priceX = useDerivedValue(() => actionBadge.value.priceX);
+  const priceY = useDerivedValue(() => actionBadge.value.priceY);
+  const priceW = useDerivedValue(() => actionBadge.value.priceW);
+  const priceH = useDerivedValue(() => actionBadge.value.priceH);
+  const priceR = useDerivedValue(() => actionBadge.value.priceH / 2);
+  const priceTextX = useDerivedValue(() => actionBadge.value.priceTextX);
+  const priceText = useDerivedValue(() => actionBadge.value.priceText);
+
+  const textY = useDerivedValue(() => actionBadge.value.textY);
+
+  // X-axis time pill (opt-in). `timeBadge` may be omitted; default to hidden.
+  const tb = timeBadge;
+  const timeOpacity = useDerivedValue(() => (tb?.value.visible ? 1 : 0), [tb]);
+  const timeX = useDerivedValue(() => tb?.value.x ?? -400, [tb]);
+  const timeY = useDerivedValue(() => tb?.value.y ?? 0, [tb]);
+  const timeW = useDerivedValue(() => tb?.value.w ?? 0, [tb]);
+  const timeH = useDerivedValue(() => tb?.value.h ?? 0, [tb]);
+  const timeR = useDerivedValue(() => (tb?.value.h ?? 0) / 2, [tb]);
+  const timeTextX = useDerivedValue(() => tb?.value.textX ?? -400, [tb]);
+  const timeTextY = useDerivedValue(() => tb?.value.textY ?? 0, [tb]);
+  const timeText = useDerivedValue(() => tb?.value.timeText ?? "", [tb]);
+
+  const levelColor = lineColor ?? palette.crosshairLine;
+  const pillColor = background ?? palette.badgeBg;
+  const labelColor = iconColor ?? palette.badgeText;
+
+  return (
+    <Group opacity={opacity}>
+      <Line p1={hLeft} p2={hRight} color={levelColor} strokeWidth={1}>
+        <DashPathEffect intervals={[4, 4]} />
+      </Line>
+      <Line p1={vTop} p2={vBottom} color={levelColor} strokeWidth={1}>
+        <DashPathEffect intervals={[2, 4]} />
+      </Line>
+
+      {/* Circular icon button (the action). */}
+      <Group opacity={iconOpacity}>
+        <Circle cx={iconCx} cy={iconCy} r={iconR} color={pillColor} />
+        <SkiaText
+          x={iconGlyphX}
+          y={iconGlyphY}
+          text={icon}
+          font={font}
+          color={labelColor}
+        />
+      </Group>
+
+      {/* Price pill (capsule). */}
+      <Group opacity={priceOpacity}>
+        <RoundedRect
+          x={priceX}
+          y={priceY}
+          width={priceW}
+          height={priceH}
+          r={priceR}
+          color={pillColor}
+        />
+        <SkiaText
+          x={priceTextX}
+          y={textY}
+          text={priceText}
+          font={font}
+          color={labelColor}
+        />
+      </Group>
+
+      {/* X-axis time pill (capsule) where the vertical line meets the axis. */}
+      <Group opacity={timeOpacity}>
+        <RoundedRect
+          x={timeX}
+          y={timeY}
+          width={timeW}
+          height={timeH}
+          r={timeR}
+          color={pillColor}
+        />
+        <SkiaText
+          x={timeTextX}
+          y={timeTextY}
+          text={timeText}
+          font={font}
+          color={labelColor}
+        />
+      </Group>
+    </Group>
+  );
+}

package/src/components/ThresholdLineOverlay.tsx

@@ -0,0 +1,172 @@
+import {
+  DashPathEffect,
+  Group,
+  Path,
+  RoundedRect,
+  Text as SkiaText,
+  type SkFont,
+} from "@shopify/react-native-skia";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+
+import type { ResolvedThresholdLineConfig } from "../core/resolveConfig";
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import { usePathBuilder } from "../hooks/usePathBuilder";
+import { measureFontTextWidth } from "../lib/measureFontTextWidth";
+import type { LiveChartPalette } from "../types";
+
+/** Padding inside the marker badge pill, in px (mirrors `ReferenceLineOverlay`). */
+const BADGE_PAD_X = 6;
+const BADGE_PAD_Y = 3;
+const BADGE_RADIUS = 5;
+/** Inset from the canvas edge — small so the badge sits as flush to the edge as possible. */
+const BADGE_EDGE_INSET = 2;
+
+interface ThresholdMarkerProps {
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  lineY: SharedValue<number>;
+  visible: SharedValue<boolean>;
+  value: SharedValue<number>;
+  cfg: ResolvedThresholdLineConfig;
+  palette: LiveChartPalette;
+  font: SkFont;
+  formatValue: (v: number) => string;
+}
+
+/**
+ * The dashed horizontal marker line at a live threshold value, tracking a
+ * `SharedValue` pixel-Y on the UI thread. Drawn **behind** the chart line so the
+ * data line stays the focus; the label badge ({@link ThresholdBadgeOverlay}) is
+ * a separate layer drawn on top. Hidden when the threshold is off-screen.
+ */
+export function ThresholdLineOverlay({
+  engine,
+  padding,
+  lineY,
+  visible,
+  cfg,
+  palette,
+}: ThresholdMarkerProps) {
+  const lineColor = cfg.color ?? palette.refLine;
+  const { strokeWidth, intervals } = cfg;
+
+  const builder = usePathBuilder();
+
+  const linePath = useDerivedValue(() => {
+    const b = builder.value;
+    if (visible.get()) {
+      const y = lineY.get();
+      b.moveTo(padding.left, y);
+      b.lineTo(engine.canvasWidth.get() - padding.right, y);
+    }
+    return b.detach();
+  });
+
+  const opacity = useDerivedValue(() => (visible.get() ? 1 : 0));
+
+  return (
+    <Group opacity={opacity}>
+      <Path
+        path={linePath}
+        style="stroke"
+        strokeWidth={strokeWidth}
+        color={lineColor}
+      >
+        <DashPathEffect intervals={intervals} />
+      </Path>
+    </Group>
+  );
+}
+
+/**
+ * The threshold's label as an opaque badge pill (rounded background + colored
+ * border, like `ReferenceLineOverlay`'s off-axis badge). Drawn **on top** of the
+ * chart line so the label is never painted over, and anchored hard to the plot's
+ * left edge by default (clear of the y-axis labels + live badge) or the right
+ * gutter. Renders nothing when there is no label and no `showValue`.
+ */
+export function ThresholdBadgeOverlay({
+  engine,
+  padding,
+  lineY,
+  visible,
+  value,
+  cfg,
+  palette,
+  font,
+  formatValue,
+}: ThresholdMarkerProps) {
+  const { label, labelPosition, showValue } = cfg;
+  const badgeBackground = palette.tooltipBg;
+  const badgeBorderColor = cfg.color ?? palette.refLine;
+  const labelColor = cfg.color ?? palette.refLabel;
+
+  // Font metrics are stable → read once (getMetrics allocates + crosses JSI).
+  const { fontAscent, baselineOffset, pillH } = (() => {
+    const fm = font.getMetrics();
+    return {
+      fontAscent: fm.ascent,
+      baselineOffset: (fm.ascent + fm.descent) / 2,
+      pillH: fm.descent - fm.ascent + BADGE_PAD_Y * 2,
+    };
+  })();
+
+  const opacity = useDerivedValue(() => (visible.get() ? 1 : 0));
+
+  const labelText = useDerivedValue(() => {
+    if (showValue) {
+      const v = formatValue(value.get());
+      return label ? `${label} ${v}` : v;
+    }
+    return label ?? "";
+  });
+
+  const pillW = useDerivedValue(
+    () => measureFontTextWidth(font, labelText.get()) + BADGE_PAD_X * 2,
+  );
+  // Left: flush to the canvas edge. Right: flush to the right plot edge.
+  const pillX = useDerivedValue(() =>
+    labelPosition === "right"
+      ? engine.canvasWidth.get() - padding.right - BADGE_EDGE_INSET - pillW.get()
+      : BADGE_EDGE_INSET,
+  );
+  const pillY = useDerivedValue(
+    () => lineY.get() - baselineOffset + fontAscent - BADGE_PAD_Y,
+  );
+  const labelX = useDerivedValue(() => pillX.get() + BADGE_PAD_X);
+  const labelY = useDerivedValue(() => lineY.get() - baselineOffset);
+
+  // No label and no value → nothing to draw (hooks above still run, in order).
+  if (label === undefined && !showValue) return null;
+
+  return (
+    <Group opacity={opacity}>
+      <RoundedRect
+        x={pillX}
+        y={pillY}
+        width={pillW}
+        height={pillH}
+        r={BADGE_RADIUS}
+        color={badgeBackground}
+      />
+      <RoundedRect
+        x={pillX}
+        y={pillY}
+        width={pillW}
+        height={pillH}
+        r={BADGE_RADIUS}
+        color={badgeBorderColor}
+        style="stroke"
+        strokeWidth={1}
+      />
+      <SkiaText
+        x={labelX}
+        y={labelY}
+        text={labelText}
+        font={font}
+        color={labelColor}
+      />
+    </Group>
+  );
+}