panelui-native 0.99.0 → 0.101.0

package/src/index.ts

@@ -504,6 +504,15 @@ export {
   type ComboboxSelection,
   type ComboboxPresentation,
 } from './components/combobox';
+export {
+  Compare,
+  type CompareProps,
+  type CompareBeforeProps,
+  type CompareAfterProps,
+  type CompareHandleProps,
+  type CompareLabelProps,
+  type CompareOrientation,
+} from './components/compare';
 export {
   ContextMenu,
   type ContextMenuProps,
@@ -711,6 +720,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 +955,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,
@@ -1065,6 +1111,22 @@ export {
   type RingChartLegendProps,
   type RingDatum,
 } from './components/ring-chart';
+export {
+  SankeyChart,
+  useSankeyChart,
+  type SankeyChartProps,
+  type SankeyChartHandle,
+  type SankeyChartHeaderProps,
+  type SankeyChartLinksProps,
+  type SankeyChartNodesProps,
+  type SankeyChartLabelsProps,
+  type SankeyChartTooltipProps,
+  type SankeyChartSkeletonProps,
+  type SankeyChartStatus,
+  type SankeyNode,
+  type SankeyLink,
+  type SankeyAlign,
+} from './components/sankey-chart';
 export {
   ScatterChart,
   useScatterChart,

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`.
  *
@@ -1087,3 +1157,49 @@ export function ribbonPath(
     `Z`
   );
 }
+
+/**
+ * One ribbon of a flow diagram: a band of constant thickness running from a
+ * centre at one end to a different centre at the other.
+ *
+ * Given by centres rather than edges because that is what the layout produces
+ * — a ribbon is stacked against its node's edge and then recorded by its
+ * middle, so that growing it in place thickens it about its own centre line
+ * instead of sliding it down the node.
+ *
+ * The ends stay vertical whatever the two centres are, so a ribbon meets the
+ * flat side of a node exactly rather than at the angle it happened to arrive.
+ * `curve` is how far the control points reach towards the middle, as a
+ * fraction of the horizontal run: `0.5` puts both on the halfway line, which
+ * is the S that reads as one continuous flow, and `0` gives a straight
+ * diagonal.
+ */
+export function flowPath(
+  x0: number,
+  cy0: number,
+  x1: number,
+  cy1: number,
+  thickness: number,
+  curve: number
+): string {
+  'worklet';
+  if (!(thickness > 0)) return '';
+
+  const half = thickness / 2;
+  const topStart = cy0 - half;
+  const topEnd = cy1 - half;
+  const bottomStart = cy0 + half;
+  const bottomEnd = cy1 + half;
+
+  const run = x1 - x0;
+  const near = x0 + run * curve;
+  const far = x1 - run * curve;
+
+  return (
+    `M${x0},${topStart}` +
+    `C${near},${topStart},${far},${topEnd},${x1},${topEnd}` +
+    `L${x1},${bottomEnd}` +
+    `C${far},${bottomEnd},${near},${bottomStart},${x0},${bottomStart}` +
+    `Z`
+  );
+}