minerva-design 1.2.0 → 1.4.0

package/dist/native/manifest.d.ts

@@ -13,10 +13,12 @@ export interface NativeComponent {
 }
 export declare const NATIVE_COMPONENTS: readonly NativeComponent[];
 /**
- * The chart components (@minerva/charts engine drawn with views). Not
- * component contracts: the charts have no counterpart in the web contract
- * matrix (minerva-design/charts is a separate entry), so they are listed
- * apart and stay out of the generated contracts / support matrix.
+ * The chart components (@minerva/charts engine drawn with views: no SVG,
+ * canvas or GPU module). Read by tools/generate-contracts.mjs: their
+ * contract (the web chart element of the same name) is `beta` on native.
+ * The DOM / GPU widgets of minerva-design/charts (TradingChart, DepthChart,
+ * OrderBook, OrderBookHeatmap, TimeAndSales and the 3D charts) have no
+ * native counterpart: render the web component in a WebView.
  */
 export declare const NATIVE_CHARTS: readonly string[];
 /** Native component of a contract (by contract name) */

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

@@ -25,6 +25,7 @@ import {
   type ViewStyle,
 } from "react-native";
 import {
+  chartAriaLabel,
   createChartController,
   type ChartController,
   type ChartDragEvent,
@@ -67,6 +68,8 @@ export const engineOptions = (
     | "padding"
     | "palette"
     | "ariaLabel"
+    | "locale"
+    | "labels"
   > &
     Pick<ChartOptions, "series">,
 ): ChartOptions => ({
@@ -81,6 +84,8 @@ export const engineOptions = (
   padding: props.padding,
   palette: props.palette,
   ariaLabel: props.ariaLabel,
+  locale: props.locale,
+  labels: props.labels,
 });
 
 type TooltipResult = Exclude<
@@ -508,7 +513,9 @@ export function ChartBase({
         style={StyleSheet.absoluteFill}
         accessible
         accessibilityRole="image"
-        accessibilityLabel={options.ariaLabel}
+        accessibilityLabel={
+          options.ariaLabel ?? (scene ? chartAriaLabel(scene.model) : undefined)
+        }
         onStartShouldSetResponder={() => true}
         onResponderTerminationRequest={() => !store.holdsGesture()}
         onResponderGrant={store.touchStart}

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

@@ -18,6 +18,7 @@ import type {
   BarChartProps,
   ChartCommonProps,
   ChartProps,
+  HorizontalBarChartProps,
   LineChartProps,
   QuadrantChartProps,
   ScatterChartProps,
@@ -27,9 +28,13 @@ import type {
 function useEngineOptions(
   props: Omit<
     ChartCommonProps,
-    "onPointClick" | "onPlotClick" | "renderTooltip"
-  >,
+    "onPointClick" | "onPlotClick" | "renderTooltip" | "labels"
+  > & {
+    /** Texts of the engine (a boolean is the `labels` of a bar chart) */
+    labels?: ChartCommonProps["labels"] | boolean;
+  },
   series: readonly ChartSeries[],
+  extra?: Pick<ChartOptions, "orientation" | "yAxis2">,
 ): ChartOptions {
   const {
     xAxis,
@@ -42,10 +47,15 @@ function useEngineOptions(
     padding,
     palette,
     ariaLabel,
+    locale,
+    labels: labelsProp,
   } = props;
+  const labels = typeof labelsProp === "object" ? labelsProp : undefined;
+  const orientation = extra?.orientation;
+  const yAxis2 = extra?.yAxis2;
   return useMemo(
-    () =>
-      engineOptions({
+    () => ({
+      ...engineOptions({
         series,
         xAxis,
         yAxis,
@@ -57,9 +67,16 @@ function useEngineOptions(
         padding,
         palette,
         ariaLabel,
+        locale,
+        labels,
       }),
+      ...(orientation ? { orientation } : null),
+      ...(yAxis2 ? { yAxis2 } : null),
+    }),
     [
       series,
+      orientation,
+      yAxis2,
       xAxis,
       yAxis,
       legend,
@@ -70,11 +87,13 @@ function useEngineOptions(
       padding,
       palette,
       ariaLabel,
+      locale,
+      labels,
     ],
   );
 }
 
-const frameProps = (props: ChartCommonProps) => ({
+const frameProps = (props: Omit<ChartCommonProps, "labels">) => ({
   height: props.height,
   width: props.width,
   style: props.style,
@@ -93,7 +112,8 @@ const frameProps = (props: ChartCommonProps) => ({
  * Themed by the closest `MinervaProvider` (light / dark).
  */
 export function Chart(props: ChartProps) {
-  const options = useEngineOptions(props, props.series);
+  const { series, orientation, yAxis2 } = props;
+  const options = useEngineOptions(props, series, { orientation, yAxis2 });
   return <ChartBase options={options} {...frameProps(props)} />;
 }
 
@@ -113,6 +133,22 @@ export function BarChart(props: BarChartProps) {
   return <ChartBase options={options} {...frameProps(props)} />;
 }
 
+/**
+ * Horizontal bar chart: categories down the left side (rankings, long
+ * names, surveys), grouped, stacked or with the values at the bar ends
+ */
+export function HorizontalBarChart(props: HorizontalBarChartProps) {
+  const { series: input, stacked = false, labels = false } = props;
+  const series = useMemo(
+    () => barSeries(input, stacked, labels),
+    [input, stacked, labels],
+  );
+  const options = useEngineOptions(props, series, {
+    orientation: "horizontal",
+  });
+  return <ChartBase options={options} {...frameProps(props)} />;
+}
+
 /** Scatter chart: zooms on both axes; large point sets are merged per cell */
 export function ScatterChart(props: ScatterChartProps) {
   const { series: input } = props;

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

@@ -1,6 +1,7 @@
 export {
   BarChart,
   Chart,
+  HorizontalBarChart,
   LineChart,
   QuadrantChart,
   ScatterChart,

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

@@ -14,6 +14,9 @@ import {
   type ViewStyle,
 } from "react-native";
 import {
+  annotationLine,
+  annotationRect,
+  annotationTextBox,
   scenePrimitives,
   toCss,
   type ChartPrimitive,
@@ -24,10 +27,6 @@ import { part } from "../../internal/parts";
 import { measureChartText } from "./measure";
 
 type Rgba = ChartScene["theme"]["text"];
-type Annotation = ChartScene["annotations"][number];
-type RectAnnotation = Extract<Annotation, { type: "rect" }>;
-type TextAnnotation = Extract<Annotation, { type: "text" }>;
-type Scales = ChartScene["layout"]["scales"];
 
 /** Upper bounds of the views drawn for the data of a chart */
 export const SHAPE_BUDGET = {
@@ -264,21 +263,37 @@ function thin(run: readonly number[], max: number): number[] {
   return out;
 }
 
-/** Vertical strips between the line and the baseline, one per column */
+/**
+ * Vertical strips between the line and the baseline (or the stack below),
+ * one per column; horizontal strips, one per row, for horizontal charts
+ */
 function areaStrips(
   key: string,
-  run: readonly number[],
+  points: readonly number[],
   baseline: number,
   color: string,
   opacity: number,
-  plot: ChartRect,
+  frame: ChartRect,
+  /** Y pixel (x pixel when `transposed`) of the bottom edge under every point */
+  bottom?: readonly number[],
+  /** Horizontal charts: the area grows from the left edge */
+  transposed = false,
 ): ReactElement[] {
+  // horizontal charts are filled like vertical ones with x and y swapped
+  const run = transposed
+    ? points.map((_, i) => points[i % 2 ? i - 1 : i + 1])
+    : points;
+  const plot = transposed
+    ? { x: frame.y, y: frame.x, width: frame.height, height: frame.width }
+    : frame;
   const n = run.length / 2;
   if (n < 2) return [];
   // left to right (reversed axes list their points right to left)
   const forward = run[0] <= run[n * 2 - 2];
-  const xs = (i: number) => run[(forward ? i : n - 1 - i) * 2];
-  const ys = (i: number) => run[(forward ? i : n - 1 - i) * 2 + 1];
+  const at = (i: number) => (forward ? i : n - 1 - i);
+  const xs = (i: number) => run[at(i) * 2];
+  const ys = (i: number) => run[at(i) * 2 + 1];
+  const bs = (i: number) => (bottom ? bottom[at(i)] : baseline);
   const from = Math.max(plot.x, xs(0));
   const to = Math.min(plot.x + plot.width, xs(n - 1));
   if (to <= from) return [];
@@ -293,20 +308,34 @@ function areaStrips(
     const x1 = xs(j + 1);
     const t = x1 === x0 ? 0 : Math.max(0, Math.min(1, (mid - x0) / (x1 - x0)));
     const y = ys(j) + (ys(j + 1) - ys(j)) * t;
-    if (Number.isFinite(y)) {
-      const top = Math.min(y, baseline);
+    const b = bs(j) + (bs(j + 1) - bs(j)) * t;
+    if (Number.isFinite(y) && Number.isFinite(b)) {
+      const top = Math.min(y, b);
+      const h = Math.abs(b - y);
       out.push(
-        box(
-          `${key}-${c}`,
-          left - plot.x,
-          top - plot.y,
-          right - left,
-          Math.abs(baseline - y),
-          color,
-          {
-            opacity,
-          },
-        ),
+        transposed
+          ? box(
+              `${key}-${c}`,
+              top - plot.y,
+              left - plot.x,
+              h,
+              right - left,
+              color,
+              {
+                opacity,
+              },
+            )
+          : box(
+              `${key}-${c}`,
+              left - plot.x,
+              top - plot.y,
+              right - left,
+              h,
+              color,
+              {
+                opacity,
+              },
+            ),
       );
     }
     left = right;
@@ -366,6 +395,8 @@ function drawData(scene: ChartScene): ReactElement[] {
             p.color,
             p.opacity,
             plot,
+            p.bottoms?.[r],
+            p.horizontal,
           ),
         ),
       );
@@ -416,8 +447,22 @@ function drawData(scene: ChartScene): ReactElement[] {
         count > barsLeft ? Math.ceil(count / Math.max(1, barsLeft)) : 1;
       for (let i = 0; i < count; i += stride) {
         const [x, y, w, h] = p.rects.slice(i * 4, i * 4 + 4);
+        const radius = Math.min(p.radius ?? 0, w / 2, h / 2);
         out.push(
-          box(`${key}-${i}`, x - ox, y - oy, Math.max(w, 0.5), h, p.color),
+          box(
+            `${key}-${i}`,
+            x - ox,
+            y - oy,
+            Math.max(w, 0.5),
+            h,
+            p.colors?.[i] ?? p.color,
+            radius > 0.5 || p.opacity !== undefined
+              ? {
+                  ...(radius > 0.5 ? { borderRadius: radius } : null),
+                  ...(p.opacity !== undefined ? { opacity: p.opacity } : null),
+                }
+              : undefined,
+          ),
         );
       }
       barsLeft = Math.max(0, barsLeft - Math.ceil(count / stride));
@@ -447,52 +492,25 @@ function drawData(scene: ChartScene): ReactElement[] {
 
 // ------------------------------------------------------------ background
 
-const rectOf = (a: RectAnnotation, s: Scales): ChartRect => {
-  const { plot } = s;
-  const xa = a.x0 === undefined ? -Infinity : s.xToPx(a.x0);
-  const xb = a.x1 === undefined ? Infinity : s.xToPx(a.x1);
-  const ya = a.y0 === undefined ? Infinity : s.yToPx(a.y0);
-  const yb = a.y1 === undefined ? -Infinity : s.yToPx(a.y1);
-  const left = Math.max(plot.x, Math.min(xa, xb));
-  const right = Math.min(plot.x + plot.width, Math.max(xa, xb));
-  const top = Math.max(plot.y, Math.min(ya, yb));
-  const bottom = Math.min(plot.y + plot.height, Math.max(ya, yb));
-  return { x: left, y: top, width: right - left, height: bottom - top };
-};
-
-/** Box of a text annotation, kept inside the plot (engine `textBox`) */
-const textBox = (
-  a: TextAnnotation,
-  s: Scales,
-  width: number,
-  height: number,
-): ChartRect => {
-  const { plot } = s;
-  const px = a.x === undefined ? plot.x + plot.width / 2 : s.xToPx(a.x);
-  const py = a.y === undefined ? plot.y + plot.height / 2 : s.yToPx(a.y);
-  const gap = 6;
-  let x = px - width / 2;
-  let y = py - height / 2;
-  if (a.anchor === "top") y = py + gap;
-  else if (a.anchor === "bottom") y = py - gap - height;
-  else if (a.anchor === "left") x = px + gap;
-  else if (a.anchor === "right") x = px - gap - width;
-  x = Math.max(plot.x + gap, Math.min(x, plot.x + plot.width - gap - width));
-  y = Math.max(plot.y + 2, Math.min(y, plot.y + plot.height - 2 - height));
-  return { x, y, width, height };
-};
-
 const css = (c: Rgba, alpha?: number) => toCss(c, alpha);
 
 function drawBackground(scene: ChartScene, family?: string): ReactElement[] {
   const { width, theme, model, layout, annotations } = scene;
-  const { plot, scales, xTicks, yTicks } = layout;
+  const { plot, scales, y2Ticks } = layout;
+  // horizontal charts: the value axis along the bottom, the x axis on the left
+  const horizontal = scales.horizontal;
+  const bottomAxis = horizontal ? model.y : model.x;
+  const leftAxis = horizontal ? model.x : model.y;
+  const bottomTicks = horizontal ? layout.yTicks : layout.xTicks;
+  const leftTicks = horizontal ? layout.xTicks : layout.yTicks;
+  const bottomPx = horizontal ? scales.yToPx : scales.xToPx;
+  const leftPx = horizontal ? scales.xToPx : scales.yToPx;
   const fs = theme.fontSize;
   const out: ReactElement[] = [];
 
   annotations.forEach((a, i) => {
     if (a.type !== "rect") return;
-    const r = rectOf(a, scales);
+    const r = annotationRect(a, scales);
     if (r.width <= 0 || r.height <= 0) return;
     out.push(
       box(`area-${i}`, r.x, r.y, r.width, r.height, css(a.color, a.opacity)),
@@ -500,16 +518,16 @@ function drawBackground(scene: ChartScene, family?: string): ReactElement[] {
   });
 
   const grid = css(theme.grid);
-  if (model.y.grid) {
-    yTicks.values.forEach((v, i) => {
-      const py = scales.yToPx(v);
+  if (leftAxis.grid) {
+    leftTicks.values.forEach((v, i) => {
+      const py = leftPx(v);
       if (py < plot.y - 1 || py > plot.y + plot.height + 1) return;
       out.push(box(`ygrid-${i}`, plot.x, crisp(py), plot.width, 1, grid));
     });
   }
-  if (model.x.grid) {
-    xTicks.values.forEach((v, i) => {
-      const px = scales.xToPx(v);
+  if (bottomAxis.grid) {
+    bottomTicks.values.forEach((v, i) => {
+      const px = bottomPx(v);
       if (px < plot.x - 1 || px > plot.x + plot.width + 1) return;
       out.push(box(`xgrid-${i}`, crisp(px), plot.y, 1, plot.height, grid));
     });
@@ -525,13 +543,13 @@ function drawBackground(scene: ChartScene, family?: string): ReactElement[] {
   };
   const bottom = plot.y + plot.height;
 
-  if (model.x.visible) {
+  if (bottomAxis.visible) {
     out.push(
       box("xaxis", plot.x, crisp(bottom), plot.width, 1, css(theme.axis)),
     );
     let lastRight = -Infinity;
-    xTicks.values
-      .map((v, i) => ({ px: scales.xToPx(v), text: xTicks.labels[i] ?? "" }))
+    bottomTicks.values
+      .map((v, i) => ({ px: bottomPx(v), text: bottomTicks.labels[i] ?? "" }))
       .sort((a, b) => a.px - b.px)
       .forEach(({ px, text }, i) => {
         if (!text || px < plot.x - 0.5 || px > plot.x + plot.width + 0.5)
@@ -553,11 +571,11 @@ function drawBackground(scene: ChartScene, family?: string): ReactElement[] {
           ),
         );
       });
-    if (model.x.title)
+    if (bottomAxis.title)
       out.push(
         label(
           "xtitle",
-          model.x.title,
+          bottomAxis.title,
           plot.x + plot.width / 2,
           bottom + line + 10,
           "center",
@@ -568,37 +586,83 @@ function drawBackground(scene: ChartScene, family?: string): ReactElement[] {
       );
   }
 
-  if (model.y.visible) {
-    yTicks.values.forEach((v, i) => {
+  if (leftAxis.visible) {
+    let lastBottom = -Infinity;
+    leftTicks.values
+      .map((v, i) => ({ py: leftPx(v), text: leftTicks.labels[i] ?? "" }))
+      .sort((a, b) => a.py - b.py)
+      .forEach(({ py, text }, i) => {
+        if (!text || py < plot.y - 0.5 || py > plot.y + plot.height + 0.5)
+          return;
+        // category rows of horizontal charts never overlap
+        if (horizontal) {
+          if (py - (fs + 2) / 2 < lastBottom) return;
+          lastBottom = py + (fs + 2) / 2;
+        }
+        out.push(
+          label(
+            `ytick-${i}`,
+            text,
+            plot.x - 8,
+            py,
+            "right",
+            "middle",
+            tick,
+            width,
+          ),
+        );
+      });
+    if (leftAxis.title)
+      out.push(
+        label(
+          "ytitle",
+          leftAxis.title,
+          line / 2 + 4,
+          plot.y + plot.height / 2,
+          "center",
+          "middle",
+          title,
+          width,
+          {
+            transform: [{ rotate: "-90deg" }],
+          },
+        ),
+      );
+  }
+
+  const y2 = horizontal ? null : model.y2;
+  if (y2 && y2Ticks && y2.visible) {
+    const right = plot.x + plot.width;
+    y2Ticks.values.forEach((v, i) => {
       const py = scales.yToPx(v);
-      const text = yTicks.labels[i];
+      const text = y2Ticks.labels[i];
       if (!text || py < plot.y - 0.5 || py > plot.y + plot.height + 0.5) return;
       out.push(
         label(
-          `ytick-${i}`,
+          `y2tick-${i}`,
           text,
-          plot.x - 8,
+          right + 8,
           py,
-          "right",
+          "left",
           "middle",
           tick,
           width,
         ),
       );
     });
-    if (model.y.title)
+    if (y2.title)
       out.push(
         label(
-          "ytitle",
-          model.y.title,
-          line / 2 + 4,
+          "y2title",
+          y2.title,
+          width - line / 2 - 4,
           plot.y + plot.height / 2,
           "center",
           "middle",
           title,
           width,
           {
-            transform: [{ rotate: "-90deg" }],
+            transform: [{ rotate: "90deg" }],
           },
         ),
       );
@@ -662,8 +726,9 @@ function drawForeground(scene: ChartScene, family?: string): ReactElement[] {
   annotations.forEach((a, i) => {
     if (a.type !== "line") return;
     const color = css(a.color);
-    if (a.axis === "y") {
-      const py = scales.yToPx(a.value);
+    const where = annotationLine(a, scales);
+    if (!where.vertical) {
+      const py = where.at;
       out.push(
         ...dashedLine(
           `line-${i}`,
@@ -690,7 +755,7 @@ function drawForeground(scene: ChartScene, family?: string): ReactElement[] {
           ),
         );
     } else {
-      const px = scales.xToPx(a.value);
+      const px = where.at;
       out.push(
         ...dashedLine(
           `line-${i}`,
@@ -721,7 +786,7 @@ function drawForeground(scene: ChartScene, family?: string): ReactElement[] {
 
   annotations.forEach((a, i) => {
     if (a.type !== "rect" || !a.label) return;
-    const r = rectOf(a, scales);
+    const r = annotationRect(a, scales);
     if (r.width <= 0 || r.height <= 0) return;
     const pad = 10;
     const pos = a.labelPosition;
@@ -758,7 +823,7 @@ function drawForeground(scene: ChartScene, family?: string): ReactElement[] {
   annotations.forEach((a, i) => {
     if (a.type !== "text" || !a.text) return;
     const w = measureChartText(a.text, `${a.weight} ${fs}px sans-serif`);
-    const b = textBox(a, scales, w, labelHeight);
+    const b = annotationTextBox(a, scales, w, labelHeight);
     out.push(
       label(
         `text-${i}`,
@@ -829,6 +894,26 @@ export function drawHover(
   const { plot } = layout;
   const background = css(theme.background);
   const out: ReactElement[] = [];
+  if (hover && hover.crosshairY !== null) {
+    out.push(
+      <View
+        key="crosshair-y"
+        style={StyleSheet.absoluteFill}
+        {...part(C, "crosshair")}
+      >
+        {dashedLine(
+          "dash",
+          "y",
+          Math.round(hover.crosshairY),
+          plot.x,
+          plot.width,
+          1,
+          css(theme.textMuted, 0.55),
+          [3, 3],
+        )}
+      </View>,
+    );
+  }
   if (hover && hover.crosshairX !== null) {
     out.push(
       <View
@@ -850,20 +935,39 @@ export function drawHover(
     );
   }
   hover?.marks.forEach((m, i) => {
+    if (m.kind === "band") {
+      out.push(
+        box(`mark-${i}`, m.x, m.y, m.width, m.height, css(theme.text, 0.05), {
+          borderRadius: 6,
+        }),
+      );
+      return;
+    }
+    if (m.kind === "cell") {
+      out.push(
+        box(
+          `mark-${i}`,
+          m.x - 1.5,
+          m.y - 1.5,
+          m.width + 3,
+          m.height + 3,
+          "transparent",
+          {
+            borderRadius: 4,
+            borderWidth: 1.5,
+            borderColor: css(theme.text, 0.55),
+          },
+        ),
+      );
+      return;
+    }
+    // soft halo, then the dot with a thin ring in the background color
     out.push(
-      m.kind === "bar"
-        ? box(
-            `mark-${i}`,
-            m.x - 2,
-            m.y - 2,
-            m.width + 4,
-            m.height + 2,
-            css(theme.text, 0.08),
-          )
-        : dot(`mark-${i}`, m.x, m.y, m.size + 2, m.color, {
-            borderWidth: 2,
-            borderColor: background,
-          }),
+      dot(`halo-${i}`, m.x, m.y, m.size + 8, m.halo),
+      dot(`mark-${i}`, m.x, m.y, m.size, m.color, {
+        borderWidth: 2,
+        borderColor: background,
+      }),
     );
   });
   if (dragging) {