@lotics/ui 45.8.1 → 45.10.0

package/src/line_chart.tsx

@@ -4,6 +4,7 @@ import { colors } from "./colors";
 import { useMemo, useState, useCallback } from "react";
 import Svg, { Circle, Defs, Line, LinearGradient, Polygon, Polyline, Stop } from "react-native-svg";
 import { useLoticsLocale } from "./locale";
+import { lineChartLabelIndices } from "./line_chart_labels";
 
 export interface LineChartPoint {
   x: string | number;
@@ -96,20 +97,10 @@ export function LineChart(props: LineChartProps) {
   const visibleLabels = useMemo(() => {
     if (data.length === 0 || chartWidth === 0) return [];
 
-    const minLabelWidth = 50;
-    const maxLabels = Math.max(2, Math.floor(chartWidth / minLabelWidth));
-    const step = Math.max(1, Math.ceil(data.length / maxLabels));
-
-    const labels: { index: number; label: string }[] = [];
-    for (let i = 0; i < data.length; i++) {
-      const isFirst = i === 0;
-      const isLast = i === data.length - 1;
-      const isStep = i % step === 0;
-      if (isFirst || isLast || isStep) {
-        labels.push({ index: i, label: formatXLabel(data[i].x) });
-      }
-    }
-    return labels;
+    return lineChartLabelIndices(data.length, chartWidth).map((index) => ({
+      index,
+      label: formatXLabel(data[index].x),
+    }));
   }, [data, chartWidth, formatXLabel]);
 
   if (data.length === 0) {

package/src/line_chart_labels.ts

@@ -0,0 +1,32 @@
+/**
+ * Which of a line chart's x positions get a printed label.
+ *
+ * A label is roughly `minLabelWidth` wide, so only so many fit across the
+ * track; the rest are thinned out. The rule that matters is WHERE the thinning
+ * is anchored: stepping forwards from the first point and then forcing the last
+ * one in collides whenever the series length 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 point makes the spacing
+ * uniform by construction, and the last point is the one a reader looks up
+ * first. The first point is then kept only when it clears the same distance.
+ */
+export function lineChartLabelIndices(
+  count: number,
+  chartWidth: number,
+  minLabelWidth = 50,
+): number[] {
+  if (count <= 0 || chartWidth <= 0) return [];
+  if (count === 1) return [0];
+
+  const last = count - 1;
+  const maxLabels = Math.max(2, Math.floor(chartWidth / minLabelWidth));
+  const step = Math.max(1, Math.ceil(count / maxLabels));
+
+  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/page_header.tsx

@@ -48,12 +48,20 @@ export function PageHeader(props: PageHeaderProps) {
   // then floors the item at its MIN-CONTENT width — the longest word — so
   // `minWidth: 0` is what lets it actually wrap. `DetailRow`'s spread value is
   // the same pair for the same reason.
+  // `flexWrap` is the floor under the shrink rule below, not a competing one. A
+  // title shrinks only as far as its longest WORD; past that, min-content title
+  // plus a full-width CTA can still exceed the row, and a row that cannot wrap
+  // has nowhere to put the excess but off the edge — measured at 393px of
+  // content in a 360px frame, clipped, scrolling sideways, which `composition.md`
+  // bans outright. Wrapping drops the actions to their own line and keeps the
+  // stated bargain intact: the CTA stays reachable, the header is merely taller.
   const titleRow = (
     <View
       style={{
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
+        flexWrap: "wrap",
         gap: 12,
       }}
     >
@@ -73,7 +81,11 @@ export function PageHeader(props: PageHeaderProps) {
             below its own icon is not a smaller control, it is a broken one. */}
         {trailing !== undefined && <View style={{ flexShrink: 0 }}>{trailing}</View>}
       </View>
-      {actions}
+      {/* Wrapped so which side gives way is STATED rather than left to whatever
+          the caller happened to pass. A bare `{actions}` inherited its own
+          shrink behaviour, so the row's bargain held or broke depending on the
+          CTA — and a bargain that depends on the other party is not one. */}
+      {actions !== undefined && <View style={{ flexShrink: 0 }}>{actions}</View>}
     </View>
   );
 

package/src/stacked_bar_chart.tsx

@@ -0,0 +1,197 @@
+import { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { LegendItem } from "./legend_item";
+import { useLoticsLocale } from "./locale";
+import { SPACE } from "./spacing";
+import { Text } from "./text";
+import type { TextColor } from "./text_utils";
+
+export interface StackedBarSeries {
+  key: string;
+  label: string;
+  color: string;
+}
+
+export interface StackedBarRow {
+  key: string;
+  /** The entity this row is about — a campaign, a depot, a month. */
+  label: string;
+  /** A neutral qualifier beside the label ("Đang chạy", "12 đơn"). */
+  meta?: string;
+  /** Per-series magnitudes, keyed by `StackedBarSeries.key`. Negatives are dropped. */
+  values: Record<string, number>;
+  /** The row's headline figure, right of the label. Already formatted by the caller. */
+  value?: string;
+  valueTone?: TextColor;
+  /** One full sentence under the bar, saying what the segments amount to. */
+  caption?: string;
+}
+
+export interface StackedBarChartProps {
+  series: StackedBarSeries[];
+  rows: StackedBarRow[];
+  /**
+   * The shared scale every row is measured on. Defaults to the largest row
+   * total, which is what makes this a chart: leave it alone unless a second
+   * chart beside this one must be read against the same ruler.
+   */
+  max?: number;
+  /** Bar thickness in px. Default 12. */
+  height?: number;
+  /** Render the series legend above the rows. Default true. */
+  legend?: boolean;
+  emptyLabel?: string;
+}
+
+/**
+ * Rows of stacked bars on ONE SHARED SCALE — spend against return per campaign,
+ * cost make-up per product line, hours per crew. Each row's bar is as long as
+ * that row's total is against the largest row, and the segments inside it split
+ * that length; so bar LENGTH answers "how big is this one" and the segment run
+ * answers "what is it made of", in one pass.
+ *
+ * That shared scale is the whole difference from `StackedProgressBar`, and the
+ * reason this is a separate component rather than a prop on it. That one draws
+ * ONE whole split across segments and fills its track whatever the total — put
+ * it on ten rows and ten unequal totals draw ten equal bars, which reads as a
+ * chart and states nothing. `Breakdown` is the other neighbour: one whole, one
+ * bar, ranked share rows beneath it. Reach here the moment there are SEVERAL
+ * wholes to compare.
+ *
+ * Segments carry meaning by colour, so the legend is on by default and the
+ * colours are the caller's — one `ColorName` family per dimension, per the
+ * kit's colour discipline. A row's `caption` is the second channel: colour
+ * alone never has to carry the point.
+ */
+export function StackedBarChart(props: StackedBarChartProps) {
+  const locale = useLoticsLocale();
+  const {
+    series,
+    rows,
+    max: maxProp,
+    height = 12,
+    legend = true,
+    emptyLabel = locale.chart.noData,
+  } = props;
+
+  const totals = useMemo(
+    () =>
+      rows.map((r) => series.reduce((t, s) => t + Math.max(0, r.values[s.key] ?? 0), 0)),
+    [rows, series],
+  );
+  const max = maxProp ?? Math.max(...totals, 0);
+
+  if (rows.length === 0) {
+    return (
+      <View style={styles.empty}>
+        <Text color="muted">{emptyLabel}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {legend ? (
+        <View style={styles.legend}>
+          {series.map((s) => (
+            <LegendItem key={s.key} color={s.color} label={s.label} />
+          ))}
+        </View>
+      ) : null}
+      <View style={styles.rows}>
+        {rows.map((row, i) => {
+          const total = totals[i];
+          const share = max > 0 ? total / max : 0;
+          return (
+            <View key={row.key} style={styles.row}>
+              {/* The name over its qualifier, the figure alongside — not three
+                  things on one line. A row's name is its identity, and a line
+                  that also has to fit a status and a figure spends a narrow
+                  container's width truncating exactly that. */}
+              <View style={styles.head}>
+                <View style={styles.headText}>
+                  <Text size="sm" weight="medium" numberOfLines={2} leading="tight">
+                    {row.label}
+                  </Text>
+                  {row.meta ? (
+                    <Text size="xs" color="muted" numberOfLines={1} leading="tight">
+                      {row.meta}
+                    </Text>
+                  ) : null}
+                </View>
+                {row.value ? (
+                  <Text size="sm" weight="medium" tabular align="right" color={row.valueTone}>
+                    {row.value}
+                  </Text>
+                ) : null}
+              </View>
+              <View style={[styles.track, { height }]}>
+                <View style={[styles.fill, { width: `${share * 100}%` }]}>
+                  {series
+                    .filter((s) => (row.values[s.key] ?? 0) > 0)
+                    .map((s) => (
+                      <View
+                        key={s.key}
+                        style={{ flex: row.values[s.key], backgroundColor: s.color }}
+                      />
+                    ))}
+                </View>
+              </View>
+              {row.caption ? (
+                <Text size="xs" color="muted">
+                  {row.caption}
+                </Text>
+              ) : null}
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  empty: {
+    justifyContent: "center",
+  },
+  container: {
+    gap: SPACE.md,
+  },
+  legend: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.md,
+  },
+  // Between two rows, more than between a row's own name, bar and sentence:
+  // the three belong to one campaign and have to read as one object.
+  rows: {
+    gap: SPACE.lg,
+  },
+  row: {
+    gap: 6,
+  },
+  head: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: SPACE.md,
+  },
+  headText: {
+    flex: 1,
+    minWidth: 0,
+    gap: 1,
+  },
+  // The track is the SHARED ruler; the fill is this row's share of it, and the
+  // segments split the fill. Three boxes, because collapsing the middle one is
+  // exactly how a stacked bar loses its scale.
+  track: {
+    borderRadius: 999,
+    overflow: "hidden",
+    backgroundColor: colors.zinc[100],
+  },
+  fill: {
+    flexDirection: "row",
+    height: "100%",
+    minWidth: 2,
+  },
+});

package/src/switch_button.tsx

@@ -1,26 +1,25 @@
+import type { ReactNode } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { Switch, type SwitchProps } from "./switch";
 import { PressableHighlight } from "./pressable_highlight";
 import { Icon, type IconName } from "./icon";
-import { BrandMark, type BrandName } from "./brand_mark";
 import { CONTROL_RADIUS } from "./control_surface";
 
 export interface SwitchButtonProps extends SwitchProps {
   icon?: IconName;
   /**
-   * A third-party channel's own mark, for a row that names an OUTSIDE service.
-   * Separate from `icon` because the two draw from different sets on purpose —
-   * `Icon` is the app's own glyph language, `BrandMark` a narrow allowlist of
-   * other companies' logos. `icon` wins if both are passed.
+   * Anything to draw in the leading slot instead of an `Icon` — a product logo
+   * a row names, which the caller owns because the kit does not ship other
+   * companies' artwork. `icon` wins if both are passed.
    */
-  brand?: BrandName;
+  leading?: ReactNode;
   title: string;
   tooltip?: string;
 }
 
 export function SwitchButton(props: SwitchButtonProps) {
-  const { title, icon, brand, value, tooltip, onChange } = props;
+  const { title, icon, leading, value, tooltip, onChange } = props;
 
   return (
     <PressableHighlight
@@ -41,7 +40,7 @@ export function SwitchButton(props: SwitchButtonProps) {
       aria-checked={!!value}
     >
       <View style={{ flexDirection: "row", gap: 8, alignItems: "center", flex: 1 }}>
-        {icon ? <Icon name={icon} size={20} /> : brand ? <BrandMark name={brand} size={20} /> : null}
+        {icon ? <Icon name={icon} size={20} /> : (leading ?? null)}
         {!!title && (
           <Text weight="medium" userSelect="none">
             {title}