minerva-design 1.5.0 → 1.6.0

package/dist/native/source/components/Chart/scene.tsx

@@ -242,6 +242,86 @@ const dashedLine = (
 
 const crisp = (v: number, width = 1) => Math.round(v) + 0.5 - width / 2;
 
+/**
+ * Views of an elbow arrow (relative to `ox`, `oy`): a thin box per leg (the
+ * legs are horizontal or vertical) and a triangle made of borders
+ */
+export const arrowViews = (
+  key: string,
+  arrow: ChartScene["arrows"][number],
+  ox: number,
+  oy: number,
+): ReactElement[] => {
+  const out: ReactElement[] = [];
+  const w = arrow.width;
+  const pts = arrow.points;
+  for (let k = 1; k < pts.length; k++) {
+    const p = pts[k - 1]!;
+    const q = pts[k]!;
+    const x0 = Math.min(p.x, q.x) - ox;
+    const y0 = Math.min(p.y, q.y) - oy;
+    // legs overlap by half a width so the corners are closed
+    out.push(
+      p.y === q.y
+        ? box(
+            `${key}-${k}`,
+            x0 - w / 2,
+            y0 - w / 2,
+            Math.abs(q.x - p.x) + w,
+            w,
+            arrow.color,
+          )
+        : box(
+            `${key}-${k}`,
+            x0 - w / 2,
+            y0 - w / 2,
+            w,
+            Math.abs(q.y - p.y) + w,
+            arrow.color,
+          ),
+    );
+  }
+  const [tip, b0, b1] = arrow.head;
+  const length = Math.hypot(
+    tip.x - (b0.x + b1.x) / 2,
+    tip.y - (b0.y + b1.y) / 2,
+  );
+  const half = Math.hypot(b1.x - b0.x, b1.y - b0.y) / 2;
+  const clear = "transparent";
+  const style: ViewStyle = { position: "absolute", width: 0, height: 0 };
+  const baseX = (b0.x + b1.x) / 2;
+  const baseY = (b0.y + b1.y) / 2;
+  if (Math.abs(tip.x - baseX) >= Math.abs(tip.y - baseY)) {
+    const right = tip.x > baseX;
+    Object.assign(style, {
+      left: (right ? baseX : tip.x) - ox,
+      top: tip.y - half - oy,
+      borderTopWidth: half,
+      borderBottomWidth: half,
+      borderTopColor: clear,
+      borderBottomColor: clear,
+      ...(right
+        ? { borderLeftWidth: length, borderLeftColor: arrow.color }
+        : { borderRightWidth: length, borderRightColor: arrow.color }),
+    });
+  } else {
+    const down = tip.y > baseY;
+    Object.assign(style, {
+      left: tip.x - half - ox,
+      top: (down ? baseY : tip.y) - oy,
+      borderLeftWidth: half,
+      borderRightWidth: half,
+      borderLeftColor: clear,
+      borderRightColor: clear,
+      ...(down
+        ? { borderTopWidth: length, borderTopColor: arrow.color }
+        : { borderBottomWidth: length, borderBottomColor: arrow.color }),
+    });
+  }
+  out.push(<View key={`${key}-head`} style={style} />);
+  return out;
+};
+
 // ------------------------------------------------------------------ data
 
 /** Thins a run of interleaved points to `max` points and drops sub-pixel steps */
@@ -810,6 +890,11 @@ function drawForeground(scene: ChartScene, family?: string): ReactElement[] {
     );
   });
 
+  // dependency arrows (Gantt charts): axis-aligned legs and a border triangle
+  scene.arrows.forEach((a, i) => {
+    out.push(...arrowViews(`arrow-${i}`, a, ox, oy));
+  });
+
   annotations.forEach((a, i) => {
     if (a.type !== "line") return;
     const color = css(a.color);

package/dist/native/source/components/Chart/types.ts

@@ -4,6 +4,7 @@ import type {
   ChartAnnotation,
   ChartAxisOptions,
   ChartController,
+  ChartDependency,
   ChartHoverEvent,
   ChartInteractionOptions,
   ChartLabels,
@@ -142,6 +143,12 @@ export interface ChartProps extends ChartCommonProps {
    * @default "vertical"
    */
   orientation?: ChartOrientation;
+  /**
+   * Arrows between categories, e.g. the dependencies of a Gantt chart
+   * (`ganttSeries(...).dependencies`): elbows from the end of a bar to the
+   * start of another
+   */
+  dependencies?: readonly ChartDependency[];
 }
 
 /** Props of LineChart */

package/dist/native/source/components/Charts/charts.tsx

@@ -441,6 +441,8 @@ export function GanttChart(props: GanttChartProps) {
     milestoneName,
     formatProgress,
     dependenciesName,
+    dependencyArrows,
+    dependencyColor,
     today = false,
     todayLabel,
     xAxis,
@@ -468,6 +470,8 @@ export function GanttChart(props: GanttChartProps) {
       milestoneName,
       formatProgress,
       dependenciesName,
+      dependencyArrows,
+      dependencyColor,
       locale: locale ?? base.locale,
     });
     const lines: ChartAnnotation[] =
@@ -487,6 +491,7 @@ export function GanttChart(props: GanttChartProps) {
       ...base,
       ...(locale ? { locale } : null),
       series: gantt.series,
+      dependencies: gantt.dependencies,
       orientation: "horizontal",
       xAxis: { type: "category", categories: gantt.categories, ...xAxis },
       yAxis: {
@@ -509,6 +514,8 @@ export function GanttChart(props: GanttChartProps) {
     milestoneName,
     formatProgress,
     dependenciesName,
+    dependencyArrows,
+    dependencyColor,
     now,
     todayLabel,
     xAxis,

package/dist/native/source/components/ShapeChart/ShapeChartBase.tsx

@@ -27,6 +27,7 @@ import {
 } from "react-native";
 import {
   createCanvasShapeChart,
+  describeShapeChart as describeShapeType,
   type CanvasShapeChartInstance,
   type ChartCanvas,
   type ChartThemeInput,
@@ -35,7 +36,7 @@ import {
   type ShapeHoverEvent,
   type ShapeToggleEvent,
 } from "../../../charts/src/canvas.js";
-import { useTheme } from "../../theme/MinervaProvider";
+import { useI18n, useTheme } from "../../theme/MinervaProvider";
 import { part } from "../../internal/parts";
 import { chartThemeInput } from "../Chart/theme";
 import { renderPrims } from "./draw";
@@ -71,39 +72,9 @@ interface TouchPoint {
   locationY?: number;
 }
 
-/** Default accessible name of a chart (like the web charts) */
-export const describeShapeChart = (o: ShapeChartOptions): string => {
-  switch (o.type) {
-    case "pie":
-      return o.rose
-        ? "Rose chart"
-        : (o.innerRadius ?? 0) > 0
-          ? "Donut chart"
-          : "Pie chart";
-    case "radar":
-      return "Radar chart";
-    case "gauge":
-      return o.label ? `Gauge: ${o.label}` : "Gauge";
-    case "funnel":
-      return "Funnel chart";
-    case "treemap":
-      return "Treemap";
-    case "sankey":
-      return "Sankey diagram";
-    case "sunburst":
-      return "Sunburst chart";
-    case "radialBar":
-      return "Radial bar chart";
-    case "calendarHeatmap":
-      return "Calendar heatmap";
-    case "bullet":
-      return "Bullet chart";
-    case "chord":
-      return "Chord diagram";
-    default:
-      return "Chart";
-  }
-};
+/** Default accessible name of a chart: its type, in its locale ("Pie chart", "弦图") */
+export const describeShapeChart = (o: ShapeChartOptions): string =>
+  o.ariaLabel ?? describeShapeType(o);
 
 interface ShapeStore {
   subscribe(listener: () => void): () => void;
@@ -383,11 +354,14 @@ export function ShapeChartBase({
   ...handlers
 }: ShapeChartBaseProps) {
   const { tokens, fonts, reducedMotion } = useTheme();
+  const { language } = useI18n();
   const family = fonts.sans;
   const theme = useMemo(() => chartThemeInput(tokens), [tokens]);
   const customTooltip = !!renderTooltip && options.tooltip !== false;
   const resolved = useMemo((): ShapeChartOptions => {
     let next = options;
+    // the provider's language when the chart has no locale (no `<html lang>` on devices)
+    if (!next.locale) next = { ...next, locale: language };
     if (reducedMotion && next.animation !== false)
       next = { ...next, animation: false };
     if (customTooltip) {
@@ -396,7 +370,7 @@ export function ShapeChartBase({
       next = { ...next, tooltip: { ...base, render: () => "" } };
     }
     return next;
-  }, [options, customTooltip, reducedMotion]);
+  }, [options, customTooltip, reducedMotion, language]);
 
   const [store] = useState(() =>
     createShapeStore(
@@ -468,7 +442,7 @@ export function ShapeChartBase({
         style={StyleSheet.absoluteFill}
         accessible
         accessibilityRole="image"
-        accessibilityLabel={options.ariaLabel ?? describeShapeChart(options)}
+        accessibilityLabel={describeShapeChart(resolved)}
         onStartShouldSetResponder={() => true}
         onResponderGrant={store.touchStart}
         onResponderMove={store.touchMove}

package/dist/native/source/components/ShapeChart/geometry.ts

@@ -560,14 +560,13 @@ function pieceViews(piece: Piece, base: Base, color: string): Prim[] {
     y1 = Math.min(y1, base.cy + base.r1);
   }
   if (!(x1 > x0 && y1 > y0)) return [];
-  // the centroid may lie outside the disc: distances from it, generously
-  return clipViews(
-    planes,
-    base,
-    color,
-    ref,
-    2 * Math.hypot(x1 - x0, y1 - y0) + SEAM,
-  );
+  // the centroid may lie outside the disc: distances from it, generously;
+  // the squares must also reach the guards (pieces cut in gradient bands are
+  // much smaller than the outline they keep)
+  let extent = 2 * Math.hypot(x1 - x0, y1 - y0) + SEAM;
+  for (const guard of piece.guards)
+    extent = Math.max(extent, side(guard, ref) + SEAM);
+  return clipViews(planes, base, color, ref, extent);
 }
 
 // ------------------------------------------------------------ recognition
@@ -1006,14 +1005,31 @@ export function regionViews(
     const box = asRoundRect(firstSub.items);
     if (box) return [roundBox(box, color, shadow)];
     const ring = asConcentric(firstSub.items);
-    if (ring)
-      return (
-        roundedWedge(firstSub.items, ring.base, color) ??
-        wedgeViews(firstSub.items, ring.base, color) ??
-        piecesViews(convexPieces(ring.outline), ring.base, color)
-      );
+    const views =
+      ring &&
+      (roundedWedge(firstSub.items, ring.base, color) ??
+        wedgeViews(firstSub.items, ring.base, color));
+    if (views) return views;
   }
 
+  const out: Prim[] = [];
+  for (const part of regionParts(subs))
+    out.push(...piecesViews(part.pieces, part.base, color));
+  return out;
+}
+
+interface Part {
+  pieces: Piece[];
+  base: Base;
+}
+
+/** Convex pieces of closed subpaths (nonzero rule), on their clipping base */
+function regionParts(subs: readonly { start: Pt; items: Item[] }[]): Part[] {
+  const firstSub = subs[0];
+  if (subs.length === 1 && firstSub) {
+    const ring = asConcentric(firstSub.items);
+    if (ring) return [{ pieces: convexPieces(ring.outline), base: ring.base }];
+  }
   const polys = subs.map((s) => flatten(s.items, s.start));
   // an outline and a hole wound the other way (radar rings)
   const [outer, hole] = polys;
@@ -1024,10 +1040,134 @@ export function regionViews(
     area(outer) * area(hole) < 0 &&
     contains(outer, hole)
   )
-    return piecesViews(bandPieces(outer, hole), { t: "plane" }, color);
+    return [{ pieces: bandPieces(outer, hole), base: { t: "plane" } }];
+  return polys.map((poly) => ({
+    pieces: convexPieces(poly),
+    base: { t: "plane" },
+  }));
+}
+
+/** Most bands of a gradient fill */
+const MAX_BANDS = 8;
+/** Most convex pieces of a gradient fill, all bands together */
+const MAX_BAND_PIECES = 240;
+
+/**
+ * Keeps the part of a convex piece where `t(p) = n·p` lies in [lo, hi]; the
+ * new edges are shared with the neighbor bands (they overlap by the seam)
+ */
+function clipPiece(piece: Piece, n: Pt, lo: number, hi: number): Piece | null {
+  let pts = piece.pts;
+  let internal = piece.internal;
+  const cut = (inside: (p: Pt) => number) => {
+    const P: Pt[] = [];
+    const I: boolean[] = [];
+    pts.forEach((a, i) => {
+      const b = pt(pts, (i + 1) % pts.length);
+      const sa = inside(a);
+      const sb = inside(b);
+      const flag = internal[i] ?? false;
+      const at = (): Pt => {
+        const k = sa / (sa - sb);
+        return [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k];
+      };
+      if (sa >= 0) {
+        P.push(a);
+        I.push(flag);
+        if (sb < 0) {
+          P.push(at());
+          I.push(true);
+        }
+      } else if (sb >= 0) {
+        P.push(at());
+        I.push(flag);
+      }
+    });
+    pts = P;
+    internal = I;
+  };
+  const t = (p: Pt) => n[0] * p[0] + n[1] * p[1];
+  if (Number.isFinite(lo)) cut((p) => t(p) - lo);
+  if (Number.isFinite(hi)) cut((p) => hi - t(p));
+  // repeated points: the kept one takes the flag of the edge leaving the run
+  const kept: Pt[] = [];
+  const flags: boolean[] = [];
+  pts.forEach((p, i) => {
+    const last = kept[kept.length - 1];
+    if (last && dist(last, p) <= 1e-3)
+      flags[flags.length - 1] = internal[i] ?? true;
+    else {
+      kept.push(p);
+      flags.push(internal[i] ?? true);
+    }
+  });
+  while (
+    kept.length > 1 &&
+    dist(pt(kept, 0), pt(kept, kept.length - 1)) <= 1e-3
+  ) {
+    kept.pop();
+    flags.pop();
+  }
+  if (kept.length < 3 || Math.abs(area(kept)) < 0.05) return null;
+  return { pts: kept, internal: flags, guards: piece.guards };
+}
+
+/**
+ * Views filling the subpaths with a linear gradient: bands across its axis,
+ * each of the color at its middle, overlapping their neighbors by the seam.
+ * `null` when one color is enough.
+ */
+function gradientViews(
+  paths: readonly Subpath[],
+  colorAt: (p: Pt) => string,
+  g: { x0: number; y0: number; x1: number; y1: number },
+  delta: number,
+): Prim[] | null {
+  const len = Math.hypot(g.x1 - g.x0, g.y1 - g.y0);
+  if (len < 2 || delta < 8) return null;
+  const n: Pt = [(g.x1 - g.x0) / len, (g.y1 - g.y0) / len];
+  const t0 = n[0] * g.x0 + n[1] * g.y0;
+  const subs = paths
+    .map((sub) => ({ start: [sub.x, sub.y] as Pt, items: itemsOf(sub, true) }))
+    .filter((s) => s.items.length > 0);
+  const parts = regionParts(subs);
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const part of parts)
+    for (const piece of part.pieces)
+      for (const p of piece.pts) {
+        const t = n[0] * p[0] + n[1] * p[1] - t0;
+        lo = Math.min(lo, t);
+        hi = Math.max(hi, t);
+      }
+  // the colors only change between the ends of the axis
+  const a = Math.min(Math.max(0, lo), hi);
+  const b = Math.min(Math.max(len, lo), hi);
+  const count = Math.min(
+    MAX_BANDS,
+    Math.ceil(delta / 20),
+    Math.floor((b - a) / 6),
+  );
+  if (count < 2) return null;
   const out: Prim[] = [];
-  for (const poly of polys)
-    out.push(...piecesViews(convexPieces(poly), { t: "plane" }, color));
+  let budget = MAX_BAND_PIECES;
+  for (let k = 0; k < count && budget > 0; k++) {
+    const from = k === 0 ? -Infinity : t0 + a + ((b - a) * k) / count;
+    const to =
+      k === count - 1 ? Infinity : t0 + a + ((b - a) * (k + 1)) / count;
+    const mid = t0 + a + ((b - a) * (k + 0.5)) / count;
+    const color = colorAt([n[0] * mid, n[1] * mid]);
+    for (const part of parts)
+      for (const piece of part.pieces) {
+        if (budget <= 0) break;
+        const ts = piece.pts.map((p) => n[0] * p[0] + n[1] * p[1]);
+        if (Math.max(...ts) <= from || Math.min(...ts) >= to) continue;
+        const band = clipPiece(piece, n, from, to);
+        if (!band) continue;
+        budget--;
+        out.push(...pieceViews(band, part.base, color));
+      }
+  }
   return out;
 }
 
@@ -1311,7 +1451,37 @@ const boundsCenter = (paths: readonly Subpath[]): Pt => {
 };
 
 function fillOp(op: FillOp): Prim[] {
-  const color: Color = paintAt(op.paint, ...boundsCenter(op.paths));
+  const { paint } = op;
+  const stops = paint.gradient?.stops ?? [];
+  if (paint.gradient && stops.length > 1) {
+    const alpha = Math.max(...stops.map((s) => s.color.a));
+    const opacity = alpha * op.alpha;
+    if (opacity <= 0.002) return [];
+    let delta = 0;
+    for (const s of stops) {
+      const c = stops[0]?.color ?? s.color;
+      delta = Math.max(
+        delta,
+        Math.abs(s.color.r - c.r),
+        Math.abs(s.color.g - c.g),
+        Math.abs(s.color.b - c.b),
+        Math.abs(s.color.a - c.a) * 255,
+      );
+    }
+    const views = gradientViews(
+      op.paths,
+      (p) => {
+        const c = paintAt(paint, p[0], p[1]);
+        return alpha > 0 && c.a < alpha - 1e-3
+          ? cssWithAlpha(c, 1 / alpha)
+          : opaqueCss(c);
+      },
+      paint.gradient,
+      delta,
+    );
+    if (views) return wrap(views, opacity);
+  }
+  const color: Color = paintAt(paint, ...boundsCenter(op.paths));
   const opacity = color.a * op.alpha;
   if (opacity <= 0.002) return [];
   return wrap(regionViews(op.paths, opaqueCss(color), op.shadow), opacity);

package/dist/native/source/components/ShapeChart/types.ts

@@ -128,7 +128,7 @@ export interface ShapeChartCommonProps extends ShapeChartFrameProps {
   padding?: ChartPadding;
   /**
    * Accessible name of the chart
-   * @default the chart type, e.g. "Donut chart"
+   * @default the chart type in its locale, e.g. "Donut chart" (a gauge: "Gauge: {label}")
    */
   ariaLabel?: string;
   /**
@@ -577,9 +577,11 @@ export interface ChordChartProps extends ShapeChartCommonProps {
   /** Flows as a list (by group name or index); takes precedence over `matrix` */
   links?: readonly ChordLink[];
   /**
-   * `false`: one ribbon per pair of groups, each end as wide as the flow
-   * leaving that end. `true`: one ribbon per direction, arcs sized by the
-   * outgoing plus the incoming flows (self flows ignored)
+   * `false`: one ribbon per pair of groups, as wide as the flows between
+   * them in both directions (a symmetric matrix counts each relation once),
+   * arcs sized by the ribbons of the group. `true`: one ribbon per
+   * direction (same width at both ends), arcs sized by the outgoing plus
+   * the incoming flows; flows from a group to itself are ignored.
    * @default false
    */
   directed?: boolean;

package/dist/taro/chart-a11y.d.ts

@@ -0,0 +1,7 @@
+import { ChartOptions, ShapeChartOptions } from '../charts/core.js';
+/** Language of the page or the system, when the runtime has one (H5) */
+export declare const systemLocale: () => string | undefined;
+/** Default accessible name of a cartesian chart: its series */
+export declare const describeCartesianChart: (o: ChartOptions) => string;
+/** Default accessible name of a shape chart: its type, in its locale ("Pie chart", "弦图") */
+export declare const describeShapeChart: (o: ShapeChartOptions) => string;

package/dist/taro/charts.d.ts

@@ -47,7 +47,10 @@ export interface ChartCommonProps {
     padding?: ChartPadding;
     /** Series colors (defaults to the `--chart-series-1..8` tokens, then the theme colors) */
     palette?: readonly string[];
-    /** Accessible name of the chart */
+    /**
+     * Accessible name of the chart
+     * @default the series names in the chart's locale, e.g. "Chart: Revenue, Costs"
+     */
     ariaLabel?: string;
     /**
      * Locale of the texts and numbers the chart writes (tooltip rows, compact