panelui-native 0.54.0 → 0.57.0

package/lib/module/components/hex-chart/index.js

@@ -0,0 +1,765 @@
+"use strict";
+
+/**
+ * HexChart — a whole broken into parts, counted out in cells.
+ *
+ * ```tsx
+ * <HexChart data={attribution}>
+ *   <HexChart.Header title="Attributed revenue" value="$6,750" />
+ *   <HexChart.Cells />
+ *   <HexChart.Legend />
+ * </HexChart>
+ * ```
+ *
+ * ## What it is, against the pie beside it
+ *
+ * Both divide one total. The difference is what the reader has to do to read a
+ * share off it. A pie asks them to compare angles, which is the hardest
+ * quantity there is to judge by eye; this asks them to compare *counts*, and a
+ * count is something anyone can check by looking. A series holding a tenth of
+ * the cells looks like a tenth and can be confirmed as one, which is why this
+ * is the better shape for a split someone is going to quote.
+ *
+ * What it gives up is precision at the small end. Every cell is a whole unit,
+ * so a series worth half a cell either rounds up to a full one or vanishes. It
+ * is a chart for shares of a few percent and up, not for a long tail.
+ *
+ * ## The field
+ *
+ * The cells are pointy-top hexagons on an offset grid, so each row nests half a
+ * cell into the one above it. The unfilled cells are drawn too, in the muted
+ * token: the field is the denominator made visible, and a honeycomb floating on
+ * nothing gives the eye no total to read the coloured part against.
+ *
+ * `shape` decides how the filled cells are arranged. `grid` is reading order,
+ * which is the arrangement a reader can actually count off. `blob` grows the
+ * series out from the middle of the field instead — the smallest in the centre,
+ * each larger one wrapped around it — which counts for nothing but shows the
+ * shape of the split at a glance. The blob's edge is ragged by design, and
+ * ragged the *same way* every time: the nudge that roughens it is a hash of
+ * each cell's own coordinates rather than a random number, so a re-render is
+ * not an animation and the same data screenshots twice.
+ *
+ * Cell counts are apportioned by largest remainder, so they add up to the
+ * budget exactly. A honeycomb whose parts came to one less than the whole would
+ * have a cell in it that nothing in the data accounts for.
+ *
+ * ## Drawing and animating
+ *
+ * Two hundred cells is two hundred nodes if each one is drawn on its own, which
+ * is more than this needs to spend. Every cell belonging to a series is
+ * concatenated into a *single* path instead, so the whole chart is one node per
+ * series plus one for the unfilled field — six or seven, whatever the cell
+ * count.
+ *
+ * That is also why the reveal is a clip rather than a per-cell stagger: the
+ * cells are no longer separate things to stagger. An ellipse grows from the
+ * centre of the field, in the field's own proportions, so the honeycomb is
+ * uncovered in the order the blob grew in — which is the same effect a stagger
+ * would have given, for one animated value instead of two hundred. A `grid`
+ * wipes across instead, because that is the order its cells were filled in.
+ *
+ * Touch, not hover: a series is selected by pressing one of its cells, and
+ * pressing it again clears the selection. There is no equivalent of a pointer
+ * resting somewhere without committing, so a chart that only revealed its
+ * numbers on hover would never reveal them at all.
+ *
+ * Colours come from the `--color-chart-*` tokens, so a chart follows the active
+ * theme and is put on brand by overriding those five. Nothing here hardcodes a
+ * hex.
+ */
+import { Children, createContext, forwardRef, isValidElement, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { Easing, useAnimatedProps, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+import Svg, { ClipPath, Defs, Ellipse, G, Path, Rect } from 'react-native-svg';
+import { useCSSVariable } from 'uniwind';
+import { Text } from "../../primitives/text.js";
+import { compactNumber, hexAt, hexCenter, hexFillOrder, hexMetrics, hexPath, hexRadiusFor, hexRowsFor, shareCounts, useSeriesColor } from "../../utils/chart.js";
+import { cn } from "../../utils/cn.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+/** Where a child is drawn: inside the SVG, over it, above it, or under it. */
+
+/** Whether the chart is showing data or waiting for it. */
+
+/** One series. Its share is worked out from the others, so there is no maximum. */
+
+/** Everything the layout works out once, and every part then reads. */
+
+const EMPTY_PLAN = {
+  paths: [],
+  field: '',
+  counts: [],
+  labelAnchors: [],
+  owners: []
+};
+const HexChartContext = /*#__PURE__*/createContext(null);
+function useChart(component) {
+  const context = useContext(HexChartContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <HexChart>`);
+  }
+  return context;
+}
+
+/** The selected series and its share, for something rendered inside the chart. */
+export function useHexChart() {
+  const {
+    data,
+    plan,
+    total,
+    activeIndex
+  } = useChart('useHexChart');
+  const series = activeIndex >= 0 ? data[activeIndex] ?? null : null;
+  return {
+    activeIndex,
+    activeSeries: series,
+    /** Its share of the whole, 0 to 1. */
+    activeFraction: series && total > 0 ? Math.max(0, series.value) / total : 0,
+    /** How many cells it was given, which is what the reader can count. */
+    activeCells: activeIndex >= 0 ? plan.counts[activeIndex] ?? 0 : 0
+  };
+}
+
+/** Imperative handle: re-run the fill, for a "replay" control. */
+
+/**
+ * How far past the field the reveal has to reach to cover its corners.
+ *
+ * An ellipse with semi-axes `a`, `b` contains the box `2w × 2h` only when
+ * `(w/a)² + (h/b)² ≤ 1`; growing both axes in the box's own proportions makes
+ * that `2/k² ≤ 1`. Stopping at the edges instead would leave the four corner
+ * cells of a `grid` uncovered for good.
+ */
+const CORNER_REACH = Math.SQRT2;
+const HexChartRoot = /*#__PURE__*/forwardRef(function HexChartRoot({
+  className,
+  data,
+  columns = 21,
+  aspectRatio = 1.6,
+  density = 0.55,
+  shape = 'blob',
+  cellGap = 0.14,
+  animationDuration = 900,
+  status = 'ready',
+  activeIndex: activeIndexProp,
+  onActiveIndexChange,
+  children,
+  ...props
+}, ref) {
+  const [measured, setMeasured] = useState(0);
+  const [internalActive, setInternalActive] = useState(-1);
+  const reveal = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+  const clipId = useRef(`panelui-hex-${Math.random().toString(36).slice(2, 9)}`).current;
+  const controlled = activeIndexProp !== undefined;
+  const activeIndex = controlled ? activeIndexProp : internalActive;
+  const setActiveIndex = useMemo(() => index => {
+    if (!controlled) setInternalActive(index);
+    onActiveIndexChange?.(index);
+  }, [controlled, onActiveIndexChange]);
+  const width = measured;
+  const height = aspectRatio > 0 ? width / aspectRatio : 0;
+  const total = useMemo(() => data.reduce((sum, series) => sum + Math.max(0, series.value), 0), [data]);
+  const columnCount = Math.max(1, Math.round(columns));
+  const metrics = useMemo(() => hexMetrics(hexRadiusFor(width, columnCount)), [width, columnCount]);
+  const rows = useMemo(() => hexRowsFor(height, metrics), [height, metrics]);
+
+  // The field rarely comes out exactly the size of the box — the rows are a
+  // whole number and the height is not — so what is left over is split either
+  // side of it rather than left at the bottom.
+  const fieldWidth = metrics.stepX * (columnCount + 0.5);
+  const fieldHeight = (rows - 1) * metrics.stepY + metrics.height;
+  const left = (width - fieldWidth) / 2;
+  const top = (height - fieldHeight) / 2;
+  const loading = status === 'loading';
+  const plan = useMemo(() => {
+    if (metrics.radius <= 0 || rows <= 0 || !data.length) return EMPTY_PLAN;
+    const cells = hexFillOrder(columnCount, rows, shape);
+    const capacity = columnCount * rows;
+    // Loading has no split to show yet, so nothing is taken and the whole field
+    // is left for the skeleton to draw.
+    const budget = loading ? 0 : shape === 'grid' ? capacity : Math.max(0, Math.min(capacity, Math.round(capacity * density)));
+    const counts = shareCounts(data.map(series => series.value), budget);
+
+    /*
+     * Smallest first for a blob, so the series that is hardest to find gets the
+     * middle — where it is most findable — and each larger one wraps around it.
+     * Data order for a grid, where reading order is the entire point of the
+     * arrangement and reordering it would break the count.
+     */
+    const sequence = data.map((_, index) => index);
+    if (shape === 'blob') {
+      sequence.sort((a, b) => counts[a] - counts[b] || a - b);
+    }
+    const radius = metrics.radius * (1 - Math.max(0, Math.min(cellGap, 0.5)));
+    const owners = new Array(capacity).fill(-1);
+    const paths = data.map(() => '');
+    const sums = data.map(() => ({
+      x: 0,
+      highest: Infinity
+    }));
+    let cursor = 0;
+    for (const series of sequence) {
+      for (let n = 0; n < counts[series]; n += 1) {
+        const cell = cells[cursor];
+        cursor += 1;
+        if (!cell) break;
+        owners[cell.row * columnCount + cell.column] = series;
+        const centre = hexCenter(cell.column, cell.row, metrics, left, top);
+        paths[series] += hexPath(centre.x, centre.y, radius);
+        sums[series].x += centre.x;
+        sums[series].highest = Math.min(sums[series].highest, centre.y);
+      }
+    }
+    let field = '';
+    for (let row = 0; row < rows; row += 1) {
+      for (let column = 0; column < columnCount; column += 1) {
+        if (owners[row * columnCount + column] >= 0) continue;
+        const centre = hexCenter(column, row, metrics, left, top);
+        field += hexPath(centre.x, centre.y, radius);
+      }
+    }
+    const labelAnchors = sums.map((sum, index) => {
+      const count = counts[index] ?? 0;
+      if (count <= 0) return {
+        x: left + fieldWidth / 2,
+        y: top
+      };
+      // The top edge of the series' highest cell, not its centre — the anchor
+      // is what the label is hung *from*, and half a cell of overlap is still
+      // overlap.
+      return {
+        x: sum.x / count,
+        y: sum.highest - metrics.radius
+      };
+    });
+    return {
+      paths,
+      field,
+      counts,
+      labelAnchors,
+      owners
+    };
+  }, [data, metrics, rows, columnCount, shape, density, cellGap, left, top, fieldWidth, fieldHeight, loading]);
+  const playReveal = useMemo(() => () => {
+    if (reducedMotion) {
+      reveal.value = 1;
+      return;
+    }
+    reveal.value = 0;
+    reveal.value = withTiming(1, {
+      duration: animationDuration,
+      easing: Easing.bezier(0.85, 0, 0.15, 1)
+    });
+  }, [reducedMotion, animationDuration, reveal]);
+  const revealed = useRef(false);
+  useEffect(() => {
+    if (loading) {
+      revealed.current = false;
+      reveal.value = 0;
+      return;
+    }
+    if (revealed.current || width <= 0 || !data.length) return;
+    revealed.current = true;
+    playReveal();
+  }, [loading, width, data.length, playReveal, reveal]);
+  useImperativeHandle(ref, () => ({
+    replay: playReveal
+  }), [playReveal]);
+
+  // Resolved here rather than inside the cells, so the legend, the header and
+  // the tooltip can name a series' colour without drawing one.
+  const c1 = useSeriesColor(undefined, 1);
+  const c2 = useSeriesColor(undefined, 2);
+  const c3 = useSeriesColor(undefined, 3);
+  const c4 = useSeriesColor(undefined, 4);
+  const c5 = useSeriesColor(undefined, 5);
+  const palette = useMemo(() => [c1, c2, c3, c4, c5], [c1, c2, c3, c4, c5]);
+  const colors = useMemo(() => data.map((series, index) => series.color ?? palette[index % palette.length]), [data, palette]);
+  const onLayout = event => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    if (next !== measured) setMeasured(next);
+    props.onLayout?.(event);
+  };
+  const ellipseProps = useAnimatedProps(() => ({
+    rx: fieldWidth / 2 * CORNER_REACH * reveal.value,
+    ry: fieldHeight / 2 * CORNER_REACH * reveal.value
+  }));
+  const rectProps = useAnimatedProps(() => ({
+    width: width * reveal.value
+  }));
+  const context = useMemo(() => ({
+    data,
+    total,
+    width,
+    height,
+    metrics,
+    columns: columnCount,
+    rows,
+    left,
+    top,
+    plan,
+    colors,
+    status,
+    clipId,
+    activeIndex,
+    setActiveIndex
+  }), [data, total, width, height, metrics, columnCount, rows, left, top, plan, colors, status, clipId, activeIndex, setActiveIndex]);
+  const slots = {
+    svg: [],
+    overlay: [],
+    header: [],
+    footer: []
+  };
+  Children.forEach(children, (child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) return;
+    const slot = child.type.slot ?? 'overlay';
+    slots[slot in slots ? slot : 'overlay'].push(/*#__PURE__*/_jsx(ChildSlot, {
+      children: child
+    }, index));
+  });
+  return /*#__PURE__*/_jsx(HexChartContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsxs(View, {
+      ...props,
+      style: props.style,
+      className: cn('w-full', className),
+      children: [slots.header, /*#__PURE__*/_jsx(View, {
+        onLayout: onLayout,
+        style: {
+          aspectRatio
+        },
+        className: "w-full",
+        children: width > 0 && height > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Svg, {
+            width: width,
+            height: height,
+            children: [/*#__PURE__*/_jsx(Defs, {
+              children: /*#__PURE__*/_jsx(ClipPath, {
+                id: clipId,
+                children: shape === 'blob' ? /*#__PURE__*/_jsx(AnimatedEllipse, {
+                  cx: left + fieldWidth / 2,
+                  cy: top + fieldHeight / 2,
+                  animatedProps: ellipseProps
+                }) : /*#__PURE__*/_jsx(AnimatedRect, {
+                  x: 0,
+                  y: 0,
+                  height: height,
+                  animatedProps: rectProps
+                })
+              })
+            }), slots.svg]
+          }), /*#__PURE__*/_jsx(View, {
+            pointerEvents: "box-none",
+            style: {
+              position: 'absolute',
+              width,
+              height
+            },
+            children: slots.overlay
+          })]
+        }) : null
+      }), slots.footer]
+    })
+  });
+});
+HexChartRoot.displayName = 'HexChart';
+function ChildSlot({
+  children
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+}
+/**
+ * The honeycomb: the unfilled field, and one path per series over it.
+ *
+ * One part rather than one per series. Every cell shares a radius, a gap and a
+ * grid by definition — a chart where one series' cells could be given a size of
+ * their own would be a chart drawing a lie, since the whole claim of the shape
+ * is that one cell means the same thing wherever it appears.
+ *
+ * The field is drawn outside the reveal's clip and the series inside it, so the
+ * total is there from the first frame and what fills in against it is the
+ * split. Uncovering both together would animate the denominator, which is not
+ * something that changed.
+ */
+function HexChartCells({
+  emptyColor,
+  dimOpacity = 0.25
+}) {
+  const {
+    data,
+    plan,
+    total,
+    colors,
+    status,
+    clipId,
+    activeIndex
+  } = useChart('HexChart.Cells');
+  const token = useCSSVariable('--color-muted');
+  const empty = emptyColor ?? (typeof token === 'string' ? token : 'rgba(128,128,128,0.08)');
+  if (status === 'loading') return null;
+  return /*#__PURE__*/_jsxs(G, {
+    children: [plan.field ? /*#__PURE__*/_jsx(Path, {
+      d: plan.field,
+      fill: empty
+    }) : null, /*#__PURE__*/_jsx(G, {
+      clipPath: `url(#${clipId})`,
+      children: plan.paths.map((d, index) => {
+        const series = data[index];
+        if (!d || !series) return null;
+        const percent = total > 0 ? Math.round(Math.max(0, series.value) / total * 100) : 0;
+        return /*#__PURE__*/_jsx(Path, {
+          d: d,
+          fill: colors[index],
+          fillOpacity: activeIndex >= 0 && activeIndex !== index ? dimOpacity : 1
+          // An SVG node takes a label but not a role, so the series are
+          // named without being announced as buttons. `HexChart.Legend` is
+          // the properly wired way through the same selection, and the
+          // easier target of the two.
+          ,
+          accessibilityLabel: `${series.label}, ${percent} percent`
+        }, series.label);
+      })
+    })]
+  });
+}
+HexChartCells.displayName = 'HexChart.Cells';
+HexChartCells.slot = 'svg';
+/**
+ * The loading state: the field, with nothing divided up yet.
+ *
+ * Deliberately undivided. Placeholder shares would be a made-up split, and a
+ * reader has no way to tell an invented one from a real one until it changes
+ * under them — which is worse than showing nothing, because it is showing
+ * something wrong.
+ */
+function HexChartSkeleton({
+  color
+}) {
+  const {
+    plan,
+    status
+  } = useChart('HexChart.Skeleton');
+  const token = useCSSVariable('--color-skeleton');
+  const fill = color ?? (typeof token === 'string' ? token : 'rgba(128,128,128,0.2)');
+  if (status !== 'loading' || !plan.field) return null;
+  return /*#__PURE__*/_jsx(Path, {
+    d: plan.field,
+    fill: fill
+  });
+}
+HexChartSkeleton.displayName = 'HexChart.Skeleton';
+HexChartSkeleton.slot = 'svg';
+/** Clearance between the label and the cells it is naming. */
+const LABEL_GAP = 6;
+
+/**
+ * The press target over the honeycomb, and the label that names what was
+ * pressed.
+ *
+ * The label hangs *above* the selected series rather than on it: it is centred
+ * across that series' cells and sits clear of the highest one, so the cells
+ * being read are never underneath the thing reading them. Two other places it
+ * could go are both worse — under the finger is the one part of the chart
+ * nobody can see, and on the middle of the series covers the mass the reader
+ * just asked about.
+ *
+ * A series reaching the top of the field pushes the label back inside it, which
+ * is the one case it does overlap. That series is the largest one, and its
+ * topmost cells are the part of it a reader is least likely to be counting.
+ *
+ * A press on an unfilled cell clears the selection, the same as pressing the
+ * selected series again. Everything outside the honeycomb is "none of them",
+ * and making that gesture do nothing would leave a chart you can select in but
+ * not out of.
+ */
+function HexChartTooltip({
+  formatValue,
+  showCells = false,
+  className
+}) {
+  const {
+    data,
+    plan,
+    total,
+    colors,
+    metrics,
+    columns,
+    rows,
+    left,
+    top,
+    width,
+    height,
+    status,
+    activeIndex,
+    setActiveIndex
+  } = useChart('HexChart.Tooltip');
+  const series = activeIndex >= 0 ? data[activeIndex] ?? null : null;
+  const format = formatValue ?? (value => compactNumber(value));
+  const onPress = (x, y) => {
+    // The shared hit test, called straight from the press handler: it is marked
+    // as a worklet for the charts that scrub on the UI thread, and a worklet is
+    // an ordinary function everywhere else. A press is one event, and the whole
+    // point of resolving it is to hand an index back to React anyway.
+    const cell = hexAt(x, y, metrics, left, top, columns, rows);
+    const owner = cell ? plan.owners[cell.row * columns + cell.column] ?? -1 : -1;
+    setActiveIndex(owner === activeIndex ? -1 : owner);
+  };
+  if (status === 'loading' || width <= 0) return null;
+  const anchor = series ? plan.labelAnchors[activeIndex] : null;
+  const percent = series && total > 0 ? Math.round(Math.max(0, series.value) / total * 100) : 0;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      accessibilityLabel: "Select a series",
+      onPress: event => onPress(event.nativeEvent.locationX, event.nativeEvent.locationY),
+      style: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width,
+        height
+      }
+    }), series && anchor ?
+    /*#__PURE__*/
+    // Keyed on the selection so the label remounts, and measures itself
+    // again, whenever what it has to say changes length.
+    _jsx(HexChartLabel, {
+      anchor: anchor,
+      width: width,
+      height: height,
+      color: colors[activeIndex],
+      value: format(series.value, series),
+      detail: showCells ? `${percent}% · ${plan.counts[activeIndex] ?? 0} cells` : `${percent}%`,
+      className: className
+    }, activeIndex) : null]
+  });
+}
+HexChartTooltip.displayName = 'HexChart.Tooltip';
+HexChartTooltip.slot = 'overlay';
+
+/**
+ * The label itself, sized by its contents and placed once it knows its size.
+ *
+ * A fixed box would be simpler to place, and it is what a crosshair label on a
+ * time series gets away with — there the text is one formatted number and its
+ * width is known within a few points. Here it is a value, a percentage and
+ * sometimes a cell count, and a currency total in the millions is half again as
+ * wide as a compact one. A box that does not fit its text does not clip it in
+ * React Native, it lets it run out of the corner, so the width has to come from
+ * the text rather than the other way round.
+ *
+ * Which means one frame where the size is not known yet. That frame is spent at
+ * zero opacity rather than in the wrong place — the same trade the walkthrough
+ * card makes, and for the same reason: a label that arrives correct is better
+ * than one that arrives early and jumps.
+ */
+function HexChartLabel({
+  anchor,
+  width,
+  height,
+  color,
+  value,
+  detail,
+  className
+}) {
+  const [size, setSize] = useState(null);
+  const placed = size ? {
+    // Centred across the series and hung above it, then clamped inside the
+    // field so one whose cells sit against an edge does not get a label
+    // hanging off it.
+    left: Math.max(0, Math.min(width - size.width, anchor.x - size.width / 2)),
+    top: Math.max(0, Math.min(height - size.height, anchor.y - LABEL_GAP - size.height))
+  } : {
+    left: 0,
+    top: 0
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    pointerEvents: "none",
+    onLayout: event => {
+      const {
+        width: w,
+        height: h
+      } = event.nativeEvent.layout;
+      setSize(current => current && Math.abs(current.width - w) < 1 && Math.abs(current.height - h) < 1 ? current : {
+        width: w,
+        height: h
+      });
+    },
+    style: {
+      position: 'absolute',
+      ...placed,
+      opacity: size ? 1 : 0,
+      // Never wider than the field, so a very long value wraps or ellipsises
+      // inside the label instead of widening it off the edge.
+      maxWidth: width
+    },
+    className: cn('flex-row items-center gap-1.5 rounded-lg border border-border bg-overlay px-2 py-1 shadow-md', className),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      weight: "medium",
+      numberOfLines: 1,
+      className: "shrink",
+      children: value
+    }), /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      numberOfLines: 1,
+      className: "shrink",
+      children: detail
+    })]
+  });
+}
+/**
+ * A swatch, a name and a share per series, under the chart and across the width
+ * of it. Pressable in the same way the cells are — the legend is usually the
+ * easier target of the two, and a series worth a couple of percent is a handful
+ * of cells that may not be adjacent.
+ *
+ * It wraps rather than stacking, so five or six entries take two lines instead
+ * of six. A key is a lookup table, and a lookup table read down a column of one
+ * word each is a column the eye has to walk.
+ */
+function HexChartLegend({
+  className,
+  showValue = true,
+  ...props
+}) {
+  const {
+    data,
+    total,
+    colors,
+    activeIndex,
+    setActiveIndex
+  } = useChart('HexChart.Legend');
+  if (!data.length) return null;
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    className: cn('w-full flex-row flex-wrap items-center justify-center gap-x-3 gap-y-1.5 pt-3', className),
+    children: data.map((series, index) => {
+      const percent = total > 0 ? Math.round(Math.max(0, series.value) / total * 100) : 0;
+      const dimmed = activeIndex >= 0 && activeIndex !== index;
+      return /*#__PURE__*/_jsxs(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: `${series.label}, ${percent} percent`,
+        onPress: () => setActiveIndex(activeIndex === index ? -1 : index),
+        style: {
+          opacity: dimmed ? 0.4 : 1
+        },
+        className: "max-w-full flex-row items-center gap-1.5",
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: colors[index]
+          }
+        }), /*#__PURE__*/_jsx(Text, {
+          size: "xs",
+          muted: true,
+          numberOfLines: 1,
+          className: "shrink",
+          children: series.label
+        }), showValue ? /*#__PURE__*/_jsxs(Text, {
+          size: "xs",
+          weight: "medium",
+          children: [percent, "%"]
+        }) : null]
+      }, series.label);
+    })
+  });
+}
+HexChartLegend.displayName = 'HexChart.Legend';
+HexChartLegend.slot = 'footer';
+/**
+ * The strip above the honeycomb: what the chart is of, what it reads, and what
+ * the colours mean.
+ *
+ * It belongs to the chart rather than to the card around it because it is about
+ * the *series* — the number changes as one is selected, and the legend is the
+ * list the chart itself is holding. The card's header is a caption on the tray
+ * the chart sits in; this is the chart introducing itself.
+ *
+ * The value is not derived here even though there is a total to derive it from,
+ * because the formatting is not the chart's to guess: a total of 6750 is a
+ * count, a currency or a percentage depending on what was counted, and only the
+ * caller knows which.
+ */
+function HexChartHeader({
+  className,
+  title,
+  value,
+  caption,
+  labels,
+  legend = false,
+  children,
+  ...props
+}) {
+  const {
+    data,
+    colors
+  } = useChart('HexChart.Header');
+  const trailing = children ?? (legend && data.length ? /*#__PURE__*/_jsx(View, {
+    className: "flex-row flex-wrap items-center justify-end gap-x-3 gap-y-1",
+    children: data.map((series, index) => /*#__PURE__*/_jsxs(View, {
+      className: "flex-row items-center gap-1.5",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: colors[index]
+        }
+      }), /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        numberOfLines: 1,
+        children: labels?.[series.label] ?? series.label
+      })]
+    }, series.label))
+  }) : null);
+  return /*#__PURE__*/_jsxs(View, {
+    ...props,
+    className: cn('flex-row items-start justify-between gap-3 pb-3', className),
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: "flex-1 gap-0.5",
+      children: [title ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        children: title
+      }) : null, value ? /*#__PURE__*/_jsx(Text, {
+        size: "xl",
+        weight: "bold",
+        children: value
+      }) : null, caption ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        children: caption
+      }) : null]
+    }), trailing ? /*#__PURE__*/_jsx(View, {
+      className: "max-w-[55%] shrink pt-1",
+      children: trailing
+    }) : null]
+  });
+}
+HexChartHeader.displayName = 'HexChart.Header';
+HexChartHeader.slot = 'header';
+export const HexChart = Object.assign(HexChartRoot, {
+  Header: HexChartHeader,
+  Cells: HexChartCells,
+  Tooltip: HexChartTooltip,
+  Legend: HexChartLegend,
+  Skeleton: HexChartSkeleton
+});
+//# sourceMappingURL=index.js.map