@lotics/ui 47.13.0 → 47.14.0

package/src/line_chart.tsx

@@ -1,9 +1,11 @@
 import { View, StyleSheet, LayoutChangeEvent } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
-import { useMemo, useState, useCallback } from "react";
-import Svg, { Circle, Defs, Line, LinearGradient, Polygon, Polyline, Stop } from "react-native-svg";
+import { Fragment, useMemo, useState, useCallback, useId } from "react";
+import Svg, { Circle, Defs, G, Line, LinearGradient, Polygon, Polyline, Stop } from "react-native-svg";
+import { LegendItem } from "./legend_item";
 import { useLoticsLocale } from "./locale";
+import { SPACE } from "./spacing";
 import { axisLabelIndices } from "./axis_label_indices";
 
 export interface LineChartPoint {
@@ -11,35 +13,109 @@ export interface LineChartPoint {
   y: number;
 }
 
-export interface LineChartProps {
+export interface LineChartSeries {
+  key: string;
+  /** The series' name — its legend entry and the line's accessible name. */
+  label: string;
+  /** Omit to take the next colour off the chart's own order. */
+  color?: string;
   points: LineChartPoint[];
+}
+
+interface LineChartBaseProps {
   height?: number;
   formatNumber?: (n: number) => string;
   formatXLabel?: (x: string | number) => string;
   emptyLabel?: string;
-  lineColor?: string;
+  /**
+   * Render the series legend above the plot. Defaults to ON once there is more
+   * than one series — several lines with no key is a picture nobody can read —
+   * and OFF for a single one, which the card around it already names.
+   */
+  legend?: boolean;
 }
 
+/**
+ * ONE series or SEVERAL, never both: `points` is the single-line form (with its
+ * own `lineColor`), `series` the multi-line one (each entry carries its own
+ * colour). Expressed as a union so passing both, or neither, fails to compile
+ * rather than resolving to whichever the body happens to read first.
+ */
+export type LineChartProps = LineChartBaseProps &
+  (
+    | { points: LineChartPoint[]; series?: undefined; lineColor?: string }
+    | { series: LineChartSeries[]; points?: undefined; lineColor?: undefined }
+  );
+
+/**
+ * The order a series takes its colour in when it names none.
+ *
+ * Interleaved by hue for the reason `avatarTone`'s palette is: listed
+ * spectrally, four consecutive series come out four shades of one blue and the
+ * legend stops mapping anything. The first entry IS the single-line default, so
+ * one series drawn through `series` looks exactly like one drawn through
+ * `points`.
+ *
+ * Held here rather than shared with `PieChart`'s fallback because the two are
+ * different marks: a slice is a FILL and reads at 300, a line is a 2.5px STROKE
+ * and disappears at that shade.
+ */
+const SERIES_COLORS = [
+  colors.blue[500],
+  colors.orange[500],
+  colors.violet[500],
+  colors.emerald[600],
+  colors.fuchsia[600],
+  colors.teal[600],
+  colors.indigo[500],
+  colors.pink[600],
+];
+
 const defaultFormatNumber = (n: number): string =>
   new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(n);
 
 const defaultFormatXLabel = (x: string | number): string => String(x);
 
 /**
- * The canonical SVG line chart over `points: { x, y }[]` — `formatNumber`/`formatXLabel` for the
- * axes, `lineColor`, `height`. (No recharts.) For a tiny inline trend use `Sparkline`.
+ * The canonical SVG line chart — `points: { x, y }[]` for one line, `series` for
+ * several on ONE SHARED y-scale (this period against last, a measure per site).
+ * `formatNumber`/`formatXLabel` for the axes, `height` for the plot. (No
+ * recharts.) For a tiny inline trend use `Sparkline`.
  */
 export function LineChart(props: LineChartProps) {
   const locale = useLoticsLocale();
   const {
-    points: data,
+    points,
+    series: seriesProp,
+    lineColor,
+    legend,
     height: chartHeight = 160,
     formatNumber = defaultFormatNumber,
     formatXLabel = defaultFormatXLabel,
     emptyLabel = locale.chart.noData,
-    lineColor = colors.blue[500],
   } = props;
 
+  // A gradient id is document-global: a fixed one means the second chart on the
+  // page paints with the FIRST one's wash, which is invisible until two charts
+  // carry different colours and then reads as a rendering bug.
+  const areaId = `lineChartArea-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+
+  // One code path from here down: the single-line form is a one-entry series
+  // list with no label (its name is the card's, not the line's).
+  const series = useMemo<LineChartSeries[]>(
+    () =>
+      seriesProp ??
+      [{ key: "value", label: "", color: lineColor, points: points ?? [] }],
+    [seriesProp, points, lineColor],
+  );
+
+  const colored = useMemo(
+    () => series.map((s, i) => ({ ...s, color: s.color ?? SERIES_COLORS[i % SERIES_COLORS.length] })),
+    [series],
+  );
+
+  const showLegend = legend ?? colored.length > 1;
+
   const [chartWidth, setChartWidth] = useState(0);
 
   const handleLayout = useCallback((event: LayoutChangeEvent) => {
@@ -51,11 +127,19 @@ export function LineChart(props: LineChartProps) {
   const paddingLeft = 6;
   const paddingRight = 10;
 
+  /** The categorical axis is as long as the LONGEST series; a shorter one ends early. */
+  const positionCount = useMemo(
+    () => colored.reduce((n, s) => Math.max(n, s.points.length), 0),
+    [colored],
+  );
+
   // Nice domain AROUND the data — a 16–18% series must not be drawn against
   // a 0–20 axis (it flattens into a sliver at the top). The baseline snaps
-  // to 0 only when the data actually lives near 0.
+  // to 0 only when the data actually lives near 0. Taken across EVERY series:
+  // one scale is what makes several lines comparable, and per-series scales
+  // would draw two different quantities as the same height.
   const yAxisTicks = useMemo(() => {
-    const ys = data.map((d) => d.y);
+    const ys = colored.flatMap((s) => s.points.map((p) => p.y));
     const lo = Math.min(...ys, 0 === ys.length ? 0 : Infinity);
     const hi = Math.max(...ys, lo);
     const span = hi - lo || Math.abs(hi) || 1;
@@ -72,38 +156,42 @@ export function LineChart(props: LineChartProps) {
     const ticks: number[] = [];
     for (let t = min; t <= max + step / 1e6; t += step) ticks.push(Number(t.toFixed(10)));
     return { ticks, min, max };
-  }, [data]);
+  }, [colored]);
 
   const { min: minValue, max: maxValue } = yAxisTicks;
 
-  const drawnPoints = useMemo(() => {
-    if (data.length === 0 || chartWidth === 0) return [];
+  const plotted = useMemo(() => {
+    if (positionCount === 0 || chartWidth === 0) return [];
 
     const availableWidth = chartWidth - paddingLeft - paddingRight;
     const availableHeight = chartHeight - paddingTop - paddingBottom;
     const range = maxValue - minValue || 1;
 
-    return data.map((point, index) => {
-      const x =
-        paddingLeft +
-        (data.length > 1 ? (index / (data.length - 1)) * availableWidth : availableWidth / 2);
-      const y = paddingTop + availableHeight - ((point.y - minValue) / range) * availableHeight;
-      return { x, y, raw: point };
-    });
-  }, [data, chartWidth, minValue, maxValue, chartHeight]);
-
-  const polylinePoints = drawnPoints.map((p) => `${p.x},${p.y}`).join(" ");
+    return colored.map((s) => ({
+      ...s,
+      drawn: s.points.map((point, index) => ({
+        x:
+          paddingLeft +
+          (positionCount > 1
+            ? (index / (positionCount - 1)) * availableWidth
+            : availableWidth / 2),
+        y: paddingTop + availableHeight - ((point.y - minValue) / range) * availableHeight,
+      })),
+    }));
+  }, [colored, positionCount, chartWidth, minValue, maxValue, chartHeight]);
 
   const visibleLabels = useMemo(() => {
-    if (data.length === 0 || chartWidth === 0) return [];
+    if (positionCount === 0 || chartWidth === 0) return [];
 
-    return axisLabelIndices(data.length, chartWidth).map((index) => ({
-      index,
-      label: formatXLabel(data[index].x),
-    }));
-  }, [data, chartWidth, formatXLabel]);
+    return axisLabelIndices(positionCount, chartWidth).map((index) => {
+      // Whichever series reaches this position names it — the axis is shared,
+      // so the label is a fact about the position and not about one line.
+      const owner = colored.find((s) => s.points[index] !== undefined);
+      return { index, label: owner ? formatXLabel(owner.points[index].x) : "" };
+    });
+  }, [colored, positionCount, chartWidth, formatXLabel]);
 
-  if (data.length === 0) {
+  if (positionCount === 0) {
     return (
       <View style={styles.chartContainer}>
         <Text color="muted">{emptyLabel}</Text>
@@ -111,9 +199,21 @@ export function LineChart(props: LineChartProps) {
     );
   }
 
+  // The area wash is a SINGLE-line device. Stacked translucent washes muddy
+  // into a colour that belongs to no series, and the line a reader is tracking
+  // then crosses a field of it — so several lines are drawn bare.
+  const single = colored.length === 1;
+
   return (
     <View style={styles.chartContainer}>
       <View style={styles.chartWrapper}>
+        {showLegend ? (
+          <View style={styles.legend}>
+            {colored.map((s) => (
+              <LegendItem key={s.key} color={s.color} label={s.label} />
+            ))}
+          </View>
+        ) : null}
         <View style={styles.chartRow}>
           <View style={styles.yAxis}>
             {yAxisTicks.ticks
@@ -128,13 +228,15 @@ export function LineChart(props: LineChartProps) {
           <View style={[styles.svgContainer, { height: chartHeight }]} onLayout={handleLayout}>
             {chartWidth > 0 && (
               <Svg width={chartWidth} height={chartHeight}>
-                <Defs>
-                  {/* soft area wash under the line — depth without decoration */}
-                  <LinearGradient id="lineChartArea" x1="0" y1="0" x2="0" y2="1">
-                    <Stop offset="0" stopColor={lineColor} stopOpacity={0.16} />
-                    <Stop offset="1" stopColor={lineColor} stopOpacity={0.01} />
-                  </LinearGradient>
-                </Defs>
+                {single && (
+                  <Defs>
+                    {/* soft area wash under the line — depth without decoration */}
+                    <LinearGradient id={areaId} x1="0" y1="0" x2="0" y2="1">
+                      <Stop offset="0" stopColor={plotted[0].color} stopOpacity={0.16} />
+                      <Stop offset="1" stopColor={plotted[0].color} stopOpacity={0.01} />
+                    </LinearGradient>
+                  </Defs>
+                )}
                 {yAxisTicks.ticks.map((tick, i) => {
                   const availableHeight = chartHeight - paddingTop - paddingBottom;
                   const range = maxValue - minValue || 1;
@@ -151,30 +253,54 @@ export function LineChart(props: LineChartProps) {
                     />
                   );
                 })}
-                {drawnPoints.length > 1 && (
-                  <Polygon
-                    points={`${polylinePoints} ${drawnPoints[drawnPoints.length - 1].x},${chartHeight - paddingBottom} ${drawnPoints[0].x},${chartHeight - paddingBottom}`}
-                    fill="url(#lineChartArea)"
-                    stroke="none"
-                  />
-                )}
-                {drawnPoints.length > 1 && (
-                  <Polyline
-                    points={polylinePoints}
-                    fill="none"
-                    stroke={lineColor}
-                    strokeWidth={2.5}
-                    strokeLinejoin="round"
-                    strokeLinecap="round"
-                  />
-                )}
-                {drawnPoints.map((point, index) => {
-                  const isLast = index === drawnPoints.length - 1;
-                  return isLast ? (
-                    // the latest value is the story — emphasize its point
-                    <Circle key={index} cx={point.x} cy={point.y} r={4.5} fill={lineColor} stroke={colors.white} strokeWidth={2} />
+                {plotted.map((s) => {
+                  const polylinePoints = s.drawn.map((p) => `${p.x},${p.y}`).join(" ");
+                  const line = (
+                    <>
+                      {single && s.drawn.length > 1 && (
+                        <Polygon
+                          points={`${polylinePoints} ${s.drawn[s.drawn.length - 1].x},${chartHeight - paddingBottom} ${s.drawn[0].x},${chartHeight - paddingBottom}`}
+                          fill={`url(#${areaId})`}
+                          stroke="none"
+                        />
+                      )}
+                      {s.drawn.length > 1 && (
+                        <Polyline
+                          points={polylinePoints}
+                          fill="none"
+                          stroke={s.color}
+                          strokeWidth={2.5}
+                          strokeLinejoin="round"
+                          strokeLinecap="round"
+                        />
+                      )}
+                      {s.drawn.map((point, index) => {
+                        const isLast = index === s.drawn.length - 1;
+                        // the latest value is the story — emphasize its point
+                        if (isLast) {
+                          return (
+                            <Circle key={index} cx={point.x} cy={point.y} r={4.5} fill={s.color} stroke={colors.white} strokeWidth={2} />
+                          );
+                        }
+                        // Intermediate markers multiply by the series count: four
+                        // lines over twelve months is 48 discs, and the plot reads
+                        // as a field of dots rather than as lines. Several series
+                        // keep only the anchor the legend colour maps to.
+                        return single ? (
+                          <Circle key={index} cx={point.x} cy={point.y} r={3} fill={colors.white} stroke={s.color} strokeWidth={1.5} />
+                        ) : null;
+                      })}
+                    </>
+                  );
+                  // A named series announces itself; the single-line form has no
+                  // name of its own, so it leaves the naming to its container
+                  // rather than presenting an image called "".
+                  return s.label ? (
+                    <G key={s.key} accessibilityRole="image" accessibilityLabel={s.label}>
+                      {line}
+                    </G>
                   ) : (
-                    <Circle key={index} cx={point.x} cy={point.y} r={3} fill={colors.white} stroke={lineColor} strokeWidth={1.5} />
+                    <Fragment key={s.key}>{line}</Fragment>
                   );
                 })}
               </Svg>
@@ -183,7 +309,7 @@ export function LineChart(props: LineChartProps) {
         </View>
         <View style={styles.labelsContainer}>
           {visibleLabels.map((item, i) => {
-            const position = data.length > 1 ? item.index / (data.length - 1) : 0.5;
+            const position = positionCount > 1 ? item.index / (positionCount - 1) : 0.5;
             return (
               <Text
                 key={i}
@@ -218,6 +344,13 @@ const styles = StyleSheet.create({
   chartWrapper: {
     gap: 8,
   },
+  // Above the plot, the same anatomy and spacing `StackedBarChart` gives its
+  // legend — two charts in one card must not annotate themselves two ways.
+  legend: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.md,
+  },
   chartRow: {
     flexDirection: "row",
     gap: 4,

package/src/list_item.tsx

@@ -97,6 +97,7 @@ export function ListItem(props: ListItemProps) {
         ref={ref}
         testID={testID}
         containerStyle={containerStyle}
+        selected={selected}
         onPress={handlePress}
         disabled={disabled}
         right={right}
@@ -134,12 +135,14 @@ function PressRow(props: {
   ref?: Ref<View>;
   testID?: string;
   containerStyle: StyleProp<ViewStyle>;
+  /** Selection outranks hover, so the pointer never erases which row is open. */
+  selected?: boolean;
   onPress: () => void;
   disabled?: boolean;
   right?: React.ReactNode;
   children: React.ReactNode;
 }) {
-  const { ref, testID, containerStyle, onPress, disabled, right, children } = props;
+  const { ref, testID, containerStyle, selected, onPress, disabled, right, children } = props;
   const [hovered, setHovered] = useState(false);
   const [pressed, setPressed] = useState(false);
 
@@ -147,8 +150,11 @@ function PressRow(props: {
     <View
       style={[
         containerStyle,
+        // SELECTION OUTRANKS HOVER. A selected row keeps its own (deeper) ground
+        // under the pointer; only an unselected one takes the lighter wash, so
+        // reaching for a neighbour never hides which row is open.
         !disabled && pressed && styles.pressed,
-        !disabled && !pressed && hovered && styles.hovered,
+        !disabled && !pressed && hovered && !selected && styles.hovered,
       ]}
     >
       <FocusRingPressable
@@ -193,13 +199,26 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "flex-start",
   },
+  // SELECTION AND HOVER MUST NOT PAINT THE SAME GREY. They did — both
+  // `zinc-100` — so on a navigation pane, pointing at any row made it
+  // indistinguishable from the row currently open, and the persistent state was
+  // erased by the transient one exactly while the reader was choosing between
+  // them. Every other probe reads a RESTING screen, which is why it survived: at
+  // rest the selected row is the only grey one and looks perfect.
+  //
+  // The ladder is `PressableRow`'s, verbatim — ONE NEUTRAL STEP apart, hover
+  // LIGHTER than selection: zinc-50 hovered, zinc-100 selected, zinc-200
+  // pressed. The kit had already reached that answer for the register row and
+  // written down why an edge or a brand ground is wrong for a ROW; a second
+  // answer here would give one question two selection languages on surfaces the
+  // same reader crosses.
   selected: {
     backgroundColor: colors.zinc["100"],
   },
   // The wash `PressableHighlight` would have painted, moved to the wrapper so it
   // covers the row rather than stopping at the slot.
   hovered: {
-    backgroundColor: colors.zinc["100"],
+    backgroundColor: colors.zinc["50"],
   },
   pressed: {
     backgroundColor: colors.zinc["200"],

package/src/locale.tsx

@@ -6,6 +6,9 @@ import { type GanttLabels } from "./gantt/types";
 import { type SocialPostPreviewLabels } from "./social_post_rules";
 import { type PaginationLabels } from "./pagination";
 import { type SortHeaderLabels } from "./sort_header";
+import { type MonthStepperLabels } from "./month_stepper";
+import { type StateMatrixLabels } from "./state_matrix";
+import { type TimetableLabels } from "./timetable";
 import { type ConfidenceLabels } from "./confidence";
 import { type RemainderMeterLabels } from "./remainder_meter";
 import { type DateRangeFilterFieldLabels } from "./date_range_filter_field";
@@ -41,6 +44,12 @@ export interface LoticsLocale {
   pagination: Required<PaginationLabels>;
   /** `SortHeader` a11y prefix + asc/desc suffixes. */
   sortHeader: Required<SortHeaderLabels>;
+  /** `Timetable`'s three column headers. */
+  timetable: Required<TimetableLabels>;
+  /** `StateMatrix`'s pinned total header. */
+  stateMatrix: Required<StateMatrixLabels>;
+  /** `MonthStepper`'s two arrows. */
+  monthStepper: Required<MonthStepperLabels>;
   /** `ReferenceField`'s peek footer — the link verbs (change / clear), the draft
    *  verbs (edit / save / saving / cancel) and the go-to. `openLabel`
    *  stays a per-instance PROP because it names the DESTINATION ("Open
@@ -92,6 +101,10 @@ export interface LoticsLocale {
   chargeLines: { quantity: (label: string) => string; unitPrice: (label: string) => string; amount: (label: string) => string };
   /** `Ledger`: the screen-reader name of a peekable row. */
   ledger: { rowDetails: (label: string) => string };
+  /** `SectionNav`: the bar's fallback name when `activeKey` matches no item,
+   *  and what the attention dot ANNOUNCES — a bare mark names nothing, and it
+   *  is the only thing saying a section needs looking at. */
+  sectionNav: { sections: string; needsAttention: string; hasProblem: string };
   /** `RunningLedger`: the closing line's label ("Số dư hiện tại", "Tồn kho
    *  hiện tại") — the ledger's one derived, always-current figure. */
   runningLedger: { currentBalance: string };
@@ -337,6 +350,9 @@ export const en: LoticsLocale = {
     ascending: ", ascending",
     descending: ", descending",
   },
+  timetable: { time: "Time", subject: "Scheduled", status: "Status" },
+  stateMatrix: { total: "Total" },
+  monthStepper: { previous: "Previous month", next: "Next month" },
   referenceField: { open: "Open", change: "Change", clear: "Clear", edit: "Edit", save: "Save", saving: "Saving…", cancel: "Cancel" },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…", someSelected: "some selected" },
   picker: { emptyOption: "None" },
@@ -369,6 +385,7 @@ export const en: LoticsLocale = {
   clarify: { otherPlaceholder: "Or type your own answer…", back: "Back", next: "Next", cancel: "Cancel", submit: "Submit" },
   chargeLines: { quantity: (label) => `Quantity for ${label}`, unitPrice: (label) => `Unit price for ${label}`, amount: (label) => `Amount for ${label}` },
   ledger: { rowDetails: (label) => `${label} details` },
+  sectionNav: { sections: "Sections", needsAttention: "Needs attention", hasProblem: "Has a problem" },
   runningLedger: { currentBalance: "Current balance" },
   stepper: { complete: "Complete step", progress: "Progress" },
   stepProgress: {
@@ -415,6 +432,8 @@ export const en: LoticsLocale = {
     year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM",
     today: "Today", yesterday: "Yesterday", tomorrow: "Tomorrow",
     thisWeek: "This week", thisMonth: "This month", lastMonth: "Last month",
+    thisQuarter: "This quarter", lastQuarter: "Last quarter",
+    thisYear: "This year", lastYear: "Last year",
     from: "From", to: "To",
     selectDateRange: "Select date range", selectDate: "Select date",
     clear: "Clear", done: "Done", placeholder: "All time",
@@ -564,6 +583,9 @@ export const vi: LoticsLocale = {
     ascending: " (tăng dần)",
     descending: " (giảm dần)",
   },
+  timetable: { time: "Giờ", subject: "Phân công", status: "Tình trạng" },
+  stateMatrix: { total: "Tổng" },
+  monthStepper: { previous: "Tháng trước", next: "Tháng sau" },
   referenceField: { open: "Mở", change: "Đổi", clear: "Bỏ chọn", edit: "Sửa", save: "Lưu", saving: "Đang lưu…", cancel: "Hủy" },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…", someSelected: "một số đã chọn" },
   picker: { emptyOption: "Không có" },
@@ -596,6 +618,7 @@ export const vi: LoticsLocale = {
   clarify: { otherPlaceholder: "Hoặc nhập câu trả lời khác…", back: "Quay lại", next: "Tiếp", cancel: "Hủy", submit: "Gửi" },
   chargeLines: { quantity: (label) => `Số lượng ${label}`, unitPrice: (label) => `Đơn giá ${label}`, amount: (label) => `Số tiền ${label}` },
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
+  sectionNav: { sections: "Mục", needsAttention: "Cần xem lại", hasProblem: "Đang có lỗi" },
   runningLedger: { currentBalance: "Số dư hiện tại" },
   stepper: { complete: "Hoàn thành bước", progress: "Tiến trình" },
   stepProgress: {
@@ -642,6 +665,8 @@ export const vi: LoticsLocale = {
     year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH",
     today: "Hôm nay", yesterday: "Hôm qua", tomorrow: "Ngày mai",
     thisWeek: "Tuần này", thisMonth: "Tháng này", lastMonth: "Tháng trước",
+    thisQuarter: "Quý này", lastQuarter: "Quý trước",
+    thisYear: "Năm nay", lastYear: "Năm trước",
     from: "Từ", to: "Đến",
     selectDateRange: "Chọn khoảng ngày", selectDate: "Chọn ngày",
     clear: "Xóa", done: "Xong", placeholder: "Tất cả thời gian",