panelui-native 0.99.0 → 0.100.0

package/src/index.ts

@@ -711,6 +711,25 @@ export {
   type BubbleChartPoint,
   type BubbleChartStatus,
 } from './components/bubble-chart';
+export {
+  BumpChart,
+  useBumpChart,
+  bumpRanks,
+  type BumpChartProps,
+  type BumpChartHandle,
+  type BumpChartHeaderProps,
+  type BumpChartGridProps,
+  type BumpChartLineProps,
+  type BumpChartSkeletonProps,
+  type BumpChartXAxisProps,
+  type BumpChartYAxisProps,
+  type BumpChartLabelsProps,
+  type BumpChartTooltipProps,
+  type BumpChartLegendProps,
+  type BumpChartStatus,
+  type BumpChartDatum,
+  type BumpRanks,
+} from './components/bump-chart';
 export {
   PyramidChart,
   usePyramidChart,
@@ -927,6 +946,24 @@ export {
   type MessageScrollerButtonProps,
   type MessageScrollerPosition,
 } from './components/message-scroller';
+export {
+  MirrorAreaChart,
+  useMirrorAreaChart,
+  type MirrorAreaChartProps,
+  type MirrorAreaChartHandle,
+  type MirrorAreaChartHeaderProps,
+  type MirrorAreaChartGridProps,
+  type MirrorAreaChartBaselineProps,
+  type MirrorAreaChartAreaProps,
+  type MirrorAreaChartSkeletonProps,
+  type MirrorAreaChartXAxisProps,
+  type MirrorAreaChartYAxisProps,
+  type MirrorAreaChartTooltipProps,
+  type MirrorAreaChartLegendProps,
+  type MirrorAreaChartStatus,
+  type MirrorAreaChartSide,
+  type MirrorAreaChartDatum,
+} from './components/mirror-area-chart';
 export {
   Message,
   type MessageProps,

package/src/utils/chart.ts

@@ -560,6 +560,76 @@ export function areaPath(
     .join(' ');
 }
 
+/**
+ * A colour as a gradient stop: the colour without its alpha, and the alpha as
+ * the stop's opacity. A `<Stop>` given `rgba(255,255,255,0.13)` as its colour
+ * draws it opaque on native, so a translucent token such as `--color-skeleton`
+ * comes out solid white in a dark theme.
+ */
+export function colorStop(color: string): { stopColor: string; stopOpacity: number } {
+  const value = color.trim();
+  const clamp = (alpha: number) => (Number.isFinite(alpha) ? Math.min(Math.max(alpha, 0), 1) : 1);
+
+  // #rgba and #rrggbbaa
+  if (/^#([0-9a-f]{4}|[0-9a-f]{8})$/i.test(value)) {
+    const body =
+      value.length === 5
+        ? value
+            .slice(1)
+            .split('')
+            .map((digit) => digit + digit)
+            .join('')
+        : value.slice(1);
+    return {
+      stopColor: `#${body.slice(0, 6)}`,
+      stopOpacity: clamp(parseInt(body.slice(6, 8), 16) / 255),
+    };
+  }
+
+  // rgba(r, g, b, a) and rgb(r g b / a)
+  const match = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*[,/]\s*([\d.]+%?)\s*\)$/i.exec(value);
+  if (match) {
+    const raw = match[4]!;
+    const alpha = raw.endsWith('%') ? Number(raw.slice(0, -1)) / 100 : Number(raw);
+    return { stopColor: `rgb(${match[1]}, ${match[2]}, ${match[3]})`, stopOpacity: clamp(alpha) };
+  }
+
+  return { stopColor: value, stopOpacity: 1 };
+}
+
+/**
+ * One unbroken run of points joined by S-curves, for a chart of positions.
+ *
+ * Each join leaves one point level and arrives at the next one level, with
+ * both control points at the midpoint between them. A line that holds its
+ * position stays flat, and a line that changes position crosses over in the
+ * middle of the gap. The monotone curve suits values, not places: it bends
+ * through every point, so a series holding its rank would still look like it
+ * was moving.
+ */
+export function bumpSegment(points: ChartPoint[]): string {
+  'worklet';
+  if (!points.length) return '';
+  let d = `M${points[0]!.x},${points[0]!.y}`;
+  for (let i = 1; i < points.length; i += 1) {
+    const from = points[i - 1]!;
+    const to = points[i]!;
+    const mid = (from.x + to.x) / 2;
+    d += ` C${mid},${from.y} ${mid},${to.y} ${to.x},${to.y}`;
+  }
+  return d;
+}
+
+/** A dot at every point, as one path, so a series' markers cost one node. */
+export function dotsPath(points: ChartPoint[], radius: number): string {
+  'worklet';
+  let d = '';
+  for (const point of points) {
+    d += `M${point.x - radius},${point.y} a${radius},${radius} 0 1,0 ${radius * 2},0 a${radius},${radius} 0 1,0 ${-radius * 2},0 `;
+  }
+  return d;
+}
+
 /**
  * A rounded rectangle, built as a path rather than drawn as a `Rect`.
  *