@lotics/ui 46.2.0 → 46.8.0

package/src/alert.tsx

@@ -4,6 +4,7 @@ import "./alert.css";
 import { Text } from "./text";
 import { Button, ButtonColor } from "./button";
 import { useOverlayScope } from "./overlay_scope";
+import { OVERLAY_Z_ABOVE } from "./overlay_layer";
 
 export type AlertButtonStyle = "default" | "cancel" | "destructive";
 
@@ -27,6 +28,13 @@ class Alert {
     if (!this.container) {
       this.container = document.createElement("div");
       this.container.id = "alert-container";
+      // The rung lives here rather than on the overlay's CSS class, because it
+      // is a fact about where an alert sits among the OTHER body-level layers —
+      // one table answers that (`overlay_layer.tsx`), and a stylesheet cannot
+      // read it. The box is zero-height, so making it a stacking context is
+      // free; the fixed overlay inside paints in it.
+      this.container.style.position = "relative";
+      this.container.style.zIndex = String(OVERLAY_Z_ABOVE);
       document.body.appendChild(this.container);
     }
     if (!this.root) {

package/src/axis_label_indices.ts

@@ -0,0 +1,84 @@
+/**
+ * Which of a CATEGORICAL AXIS's positions get a printed label.
+ *
+ * The rule belongs to the axis, not to one chart: a line's x labels and a bar
+ * chart's per-bar labels have the same failure — a label is roughly
+ * `minLabelWidth` wide, so only so many fit across the track, and past that the
+ * axis either overlaps or ellipsises its own labels. Neither is a typography
+ * problem to solve by shortening the data; the labels are what thin out.
+ *
+ * ONE model serves both geometries. How many labels fit is a function of the
+ * TRACK and the label width — `floor(track / minLabelWidth)` — and that is the
+ * same question whether the labels are points on the track (a line's, at
+ * `i/(count-1)`) or slot centres (a bar's, at `(i+0.5)·track/count`). The two
+ * geometries differ only in the distance from position 0 to the first kept
+ * index, and by less than one slot; the count and the step are shared.
+ *
+ * What the caller must NOT assume is that thinning alone widens a label. On a
+ * SLOT geometry the survivor still sits in its own slot, so the space the
+ * dropped neighbours freed has to be handed to it explicitly — see
+ * {@link axisLabelStep} and `BarChart`'s label box.
+ *
+ * The rule that matters is WHERE the thinning is anchored: stepping forwards
+ * from the first position and then forcing the last one in collides whenever the
+ * count minus one is not a multiple of the step — the newest label lands a few
+ * pixels from the one before it while every other pair is a full step apart.
+ * Anchoring on the LAST position makes the spacing uniform by construction, and
+ * the last position is the one a reader looks up first. The first position is
+ * then kept only when it clears the same distance.
+ */
+/**
+ * How many positions the axis skips between printed labels — 1 when every label
+ * fits, `count` when the track has room for only one. Exported because a SLOT
+ * geometry needs it twice: once to pick the labels, and once to give a survivor
+ * the width of the span its dropped neighbours vacated. Deriving it a second
+ * time at the call site is how the two drift.
+ *
+ * The floor is ONE label, not two. Forcing a second onto a track that fits one
+ * breaks this module's own rule — the two then land closer together than a label
+ * is wide, which is the overlap the thinning exists to prevent — and it is the
+ * narrow end that needs the rule most, because that is where a track can go to
+ * zero or below.
+ */
+export function axisLabelStep(count: number, chartWidth: number, minLabelWidth = 50): number {
+  if (count <= 1) return 1;
+  const maxLabels = Math.max(1, Math.floor(chartWidth / minLabelWidth));
+  return Math.max(1, Math.ceil(count / maxLabels));
+}
+
+/**
+ * The positions to print, thinned to what the track fits.
+ *
+ * THE CONTRACT: the result is empty ONLY when there is nothing to label
+ * (`count <= 0`). An axis that HAS positions always prints at least one of them
+ * — the last, the one a reader looks up — however little room it has, so a card
+ * too narrow to fit a second label shows one rather than none.
+ *
+ * Whether the track has been MEASURED yet is the caller's fact, not this
+ * function's: a host with no layout pass reports 0 exactly as a 0px track does,
+ * and only the caller knows which it is holding. It answers that itself (show
+ * every label until measured) before asking here. Returning `[]` for both a
+ * zero width and a zero count made one value mean two things, and the two call
+ * sites duly read it two ways — the line chart as "not measured", the bar chart
+ * as "kept nothing", which is how a narrow card came to erase its whole label
+ * row.
+ */
+export function axisLabelIndices(
+  count: number,
+  chartWidth: number,
+  minLabelWidth = 50,
+): number[] {
+  if (count <= 0) return [];
+  if (count === 1) return [0];
+
+  const last = count - 1;
+  const step = axisLabelStep(count, chartWidth, minLabelWidth);
+
+  const kept: number[] = [];
+  for (let i = last; i >= 0; i -= step) kept.unshift(i);
+
+  const firstKept = kept[0] ?? 0;
+  if (firstKept > 0 && (firstKept / last) * chartWidth >= minLabelWidth) kept.unshift(0);
+
+  return kept;
+}

package/src/bar_chart.tsx

@@ -1,11 +1,23 @@
-import { View, StyleSheet, type ViewStyle } from "react-native";
-import { useMemo } from "react";
+import { View, StyleSheet, type LayoutChangeEvent, type ViewStyle } from "react-native";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { axisLabelIndices } from "./axis_label_indices";
 import { useLoticsLocale } from "./locale";
 
 const DEFAULT_BAR_COLOR = colors.blue[500];
 
+/** The horizontal orientation's label column, in px, when the caller names none. */
+const DEFAULT_LABEL_WIDTH = 80;
+
+/** The value axis's own column — the gutter the vertical bars start after. */
+const AXIS_LABEL_WIDTH = 56;
+
+/** The gap between bar slots, and therefore between label slots. Named because
+ *  the label box's width is computed from the slot PITCH (slot + gap), and a
+ *  second literal there would silently stop matching the row it measures. */
+const LABEL_GAP = 8;
+
 const defaultFormatNumber = (n: number): string =>
   new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(n);
 
@@ -13,6 +25,17 @@ export interface BarChartItem {
   label: string;
   value: number;
   color?: string;
+  /**
+   * The entity's own mark, before its name — a `BrandMark`, an `Avatar`, a
+   * status dot. A bar is one entity, and a chart beside a table over the same
+   * entities has to draw them the same way; the bar's COLOUR belongs to the
+   * measure, so it cannot carry identity as a legend swatch does.
+   *
+   * Horizontal: in the label column, ahead of the name. Vertical: above it,
+   * where the axis label sits — and thinned out with that label when the axis
+   * cannot fit them all.
+   */
+  leading?: ReactNode;
 }
 
 export interface BarChartProps {
@@ -20,6 +43,13 @@ export interface BarChartProps {
   orientation?: "vertical" | "horizontal";
   formatNumber?: (n: number) => string;
   emptyLabel?: string;
+  /**
+   * The horizontal orientation's fixed label column, in px (default 80). It is
+   * fixed because every row's bar has to start on one left edge; it is a prop
+   * because 80 fits a date and not a company name, and how long an entity's
+   * name runs is the caller's fact, not the chart's.
+   */
+  labelWidth?: number;
 }
 
 function useAxisTicks(maxValue: number) {
@@ -62,9 +92,13 @@ function useAxisTicks(maxValue: number) {
 }
 
 /**
- * The canonical SVG bar chart over `data: { label, value, color? }[]` — `orientation`
- * vertical|horizontal, nice auto axis ticks, `formatNumber` for value labels. (No recharts.) For
- * one inline trend use `Sparkline`; for parts-of-a-whole, `PieChart` / `Breakdown`.
+ * The canonical SVG bar chart over `data: { label, value, color?, leading? }[]` —
+ * `orientation` vertical|horizontal, nice auto axis ticks, `formatNumber` for value labels,
+ * `labelWidth` for the horizontal label column. (No recharts.) For one inline trend use
+ * `Sparkline`; for parts-of-a-whole, `PieChart` / `Breakdown`.
+ *
+ * The vertical axis prints as many labels as it fits and thins the rest, so the number of
+ * bars is never decided by how wide a label happens to be.
  */
 export function BarChart(props: BarChartProps) {
   const locale = useLoticsLocale();
@@ -73,12 +107,73 @@ export function BarChart(props: BarChartProps) {
     orientation = "vertical",
     formatNumber = defaultFormatNumber,
     emptyLabel = locale.chart.noData,
+    labelWidth = DEFAULT_LABEL_WIDTH,
   } = props;
   const maxValue = Math.max(...data.map((d) => d.value), 1);
   const axisTicks = useAxisTicks(maxValue);
   const axisMax = axisTicks[axisTicks.length - 1] || maxValue;
   const barAreaHeight = 200;
 
+  // The vertical axis prints as many labels as the row fits and thins the rest —
+  // the same rule `LineChart` runs, because it is the axis's rule and not one
+  // chart's. Without it the label box IS the bar slot: 13 bars in a 1000px card
+  // give each label 38px, so a `dd/MM` ellipsises and the axis stops being
+  // readable at exactly the density that makes a bar chart worth drawing. The
+  // BARS never thin — dropping data to fit typography is the wrong trade.
+  const [labelsWidth, setLabelsWidth] = useState(0);
+  const handleLabelsLayout = useCallback((event: LayoutChangeEvent) => {
+    setLabelsWidth(event.nativeEvent.layout.width);
+  }, []);
+  // ONE derivation from the ONE measurement — which labels survive AND how wide
+  // the box each survivor gets. They are two answers about the same row, and a
+  // second pass over the same numbers is exactly how they came to disagree about
+  // it.
+  //
+  // THE SPACE THE THINNING FREED, HANDED TO THE LABEL THAT SURVIVED.
+  //
+  // Dropping a neighbour is only half the fix: the survivor still sits in its
+  // own bar slot, and a one-line `Text` is capped at that slot's width and
+  // ellipsises inside it — so the axis kept fewer labels and clipped them just
+  // the same, with a blank slot beside each one. The label box therefore spans
+  // the STEP: `step` slots and the gaps between them, centred on its bar, which
+  // is exactly the room the dropped labels vacated. The bar slots themselves
+  // never move, so an unlabelled bar stays a blank slot rather than a narrower
+  // one — the box overflows the slot instead of resizing it.
+  const axisLabels = useMemo(() => {
+    // Unmeasured (first paint, and any host with no layout pass) shows every
+    // label, which is where this started — thinning is what measurement BUYS,
+    // never a precondition for rendering an axis at all.
+    if (labelsWidth <= 0 || data.length === 0) return null;
+    // `labelsRow` holds the axis spacer AND one slot per bar, so its N slots
+    // carry N gaps rather than N-1: `track` is already `sum(slots) + N·gap`, and
+    // the slot PITCH is therefore `track / N` — the gaps net out exactly. The
+    // survivor's box spans `step` slots and the `step - 1` gaps between them,
+    // which is `step · pitch - gap`.
+    const track = labelsWidth - AXIS_LABEL_WIDTH;
+    const pitch = track / data.length;
+    const keptIndices = axisLabelIndices(data.length, track);
+    // The span comes from the KEPT SET, never from `axisLabelStep`. The two are
+    // allowed to disagree — `axisLabelIndices` re-adds index 0 when there is
+    // room for it, so a step of `count` can still yield two survivors — and
+    // sizing off the step then hands EACH of them a box spanning the whole
+    // track, so the two labels overlap. Reading one source of truth cannot
+    // drift, whatever the thinning rule becomes later.
+    const gaps = keptIndices.slice(1).map((v, i) => v - keptIndices[i]);
+    const span = gaps.length > 0 ? Math.min(...gaps) : data.length;
+    const boxWidth = span > 1 ? span * pitch - LABEL_GAP : 0;
+    return {
+      kept: new Set(keptIndices),
+      // Undefined when nothing was dropped (`step === 1`): the slot IS the box,
+      // and an explicit width there would only re-state it. Undefined too when
+      // the span is not a positive number of pixels — a card narrower than the
+      // value axis's own gutter leaves a track of zero or less, and a `width: 0`
+      // box would ERASE the label the thinning just chose to keep. Letting it
+      // overflow its slot is the same trade the row makes everywhere else: the
+      // axis thins labels, it never deletes them.
+      boxWidth: boxWidth > 0 ? boxWidth : undefined,
+    };
+  }, [data.length, labelsWidth]);
+
   if (data.length === 0) {
     return (
       <View style={styles.chartContainer}>
@@ -97,7 +192,8 @@ export function BarChart(props: BarChartProps) {
 
             return (
               <View key={index} style={styles.horizontalBarContainer}>
-                <View style={styles.horizontalBarLabel}>
+                <View style={[styles.horizontalBarLabel, { width: labelWidth }]}>
+                  {item.leading !== undefined ? item.leading : null}
                   <Text size="sm" numberOfLines={1}>
                     {item.label}
                   </Text>
@@ -122,7 +218,7 @@ export function BarChart(props: BarChartProps) {
             );
           })}
           <View style={styles.horizontalAxisContainer}>
-            <View style={styles.horizontalBarLabel} />
+            <View style={{ width: labelWidth }} />
             <View style={styles.horizontalAxisTrack}>
               {axisTicks.map((tick, index) => (
                 <View
@@ -186,14 +282,27 @@ export function BarChart(props: BarChartProps) {
             })}
           </View>
         </View>
-        <View style={styles.labelsRow}>
+        <View style={styles.labelsRow} onLayout={handleLabelsLayout}>
           <View style={styles.axisLabelSpacer} />
           {data.map((item, index) => (
+            // The slot stays whatever the axis prints, so the bars above it keep
+            // their positions — an unlabelled bar is a blank slot, never a
+            // narrower one.
             <View key={index} style={styles.labelContainer}>
-              <Text numberOfLines={1} weight="medium">
-                {item.label}
-              </Text>
-              <Text color="muted">{formatNumber(item.value)}</Text>
+              {axisLabels === null || axisLabels.kept.has(index) ? (
+                <View
+                  style={[
+                    styles.labelBox,
+                    axisLabels?.boxWidth !== undefined && { width: axisLabels.boxWidth },
+                  ]}
+                >
+                  {item.leading !== undefined ? item.leading : null}
+                  <Text numberOfLines={1} weight="medium">
+                    {item.label}
+                  </Text>
+                  <Text color="muted">{formatNumber(item.value)}</Text>
+                </View>
+              ) : null}
             </View>
           ))}
         </View>
@@ -215,7 +324,7 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   verticalAxis: {
-    width: 56,
+    width: AXIS_LABEL_WIDTH,
     position: "relative",
   },
   verticalAxisTick: {
@@ -243,15 +352,23 @@ const styles = StyleSheet.create({
   },
   labelsRow: {
     flexDirection: "row",
-    gap: 8,
+    gap: LABEL_GAP,
   },
   labelContainer: {
     flex: 1,
     alignItems: "center",
     gap: 2,
   },
+  // Wider than its slot when the axis thinned, and centred on the bar by the
+  // slot's own `alignItems` — a flex item wider than its cross-axis space
+  // overflows both edges equally, which is what puts the label over the blank
+  // slots beside it rather than clipping it inside its own.
+  labelBox: {
+    alignItems: "center",
+    gap: 2,
+  },
   axisLabelSpacer: {
-    width: 56,
+    width: AXIS_LABEL_WIDTH,
   },
   horizontalChart: {
     gap: 8,
@@ -264,8 +381,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 8,
   },
+  // The width is the instance's `labelWidth`; what lives here is the row shape —
+  // the entity's mark, then its name, on one line.
   horizontalBarLabel: {
-    width: 80,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
   },
   horizontalBarTrack: {
     flex: 1,