minerva-design 1.1.0 → 1.2.0

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

@@ -0,0 +1,291 @@
+import { useMemo } from "react";
+import { View } from "react-native";
+import {
+  barSeries,
+  lineSeries,
+  quadrantChartOptions,
+  quadrantOf,
+  scatterSeries,
+  type ChartHoverEvent,
+  type ChartOptions,
+  type ChartRect,
+  type ChartSeries,
+  type QuadrantCorner,
+} from "../../../charts/src/canvas.js";
+import { part } from "../../internal/parts";
+import { ChartBase, engineOptions } from "./ChartBase";
+import type {
+  BarChartProps,
+  ChartCommonProps,
+  ChartProps,
+  LineChartProps,
+  QuadrantChartProps,
+  ScatterChartProps,
+} from "./types";
+
+/** Engine options of the common props, kept while the props are the same */
+function useEngineOptions(
+  props: Omit<
+    ChartCommonProps,
+    "onPointClick" | "onPlotClick" | "renderTooltip"
+  >,
+  series: readonly ChartSeries[],
+): ChartOptions {
+  const {
+    xAxis,
+    yAxis,
+    legend,
+    tooltip,
+    crosshair,
+    annotations,
+    interaction,
+    padding,
+    palette,
+    ariaLabel,
+  } = props;
+  return useMemo(
+    () =>
+      engineOptions({
+        series,
+        xAxis,
+        yAxis,
+        legend,
+        tooltip,
+        crosshair,
+        annotations,
+        interaction,
+        padding,
+        palette,
+        ariaLabel,
+      }),
+    [
+      series,
+      xAxis,
+      yAxis,
+      legend,
+      tooltip,
+      crosshair,
+      annotations,
+      interaction,
+      padding,
+      palette,
+      ariaLabel,
+    ],
+  );
+}
+
+const frameProps = (props: ChartCommonProps) => ({
+  height: props.height,
+  width: props.width,
+  style: props.style,
+  testID: props.testID,
+  handleRef: props.ref,
+  onHover: props.onHover,
+  onPointClick: props.onPointClick,
+  onPlotClick: props.onPlotClick,
+  onZoom: props.onZoom,
+  renderTooltip: props.renderTooltip,
+});
+
+/**
+ * Chart mixing line, area, bar and scatter series, drawn with views:
+ * tap for the tooltip, pinch to zoom, drag to pan, double tap to reset.
+ * Themed by the closest `MinervaProvider` (light / dark).
+ */
+export function Chart(props: ChartProps) {
+  const options = useEngineOptions(props, props.series);
+  return <ChartBase options={options} {...frameProps(props)} />;
+}
+
+/** Line (or area) chart; large series are decimated to the pixel columns */
+export function LineChart(props: LineChartProps) {
+  const { series: input, area = false } = props;
+  const series = useMemo(() => lineSeries(input, area), [input, area]);
+  const options = useEngineOptions(props, series);
+  return <ChartBase options={options} {...frameProps(props)} />;
+}
+
+/** Bar chart: grouped side by side, or stacked */
+export function BarChart(props: BarChartProps) {
+  const { series: input, stacked = false } = props;
+  const series = useMemo(() => barSeries(input, stacked), [input, stacked]);
+  const options = useEngineOptions(props, series);
+  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;
+  const series = useMemo(() => scatterSeries(input), [input]);
+  const options = useEngineOptions(props, series);
+  return <ChartBase options={options} {...frameProps(props)} />;
+}
+
+const CORNERS: QuadrantCorner[] = [
+  "topLeft",
+  "topRight",
+  "bottomLeft",
+  "bottomRight",
+];
+
+const NO_SERIES: readonly ChartSeries[] = [];
+
+/**
+ * Four-quadrant matrix (priority matrix, Eisenhower, BCG, ...): tinted
+ * quadrants with titles, dividers, and labelled dots placed without
+ * overlapping labels. Dots can be dragged to another quadrant.
+ */
+export function QuadrantChart(props: QuadrantChartProps) {
+  const {
+    points,
+    xDomain,
+    yDomain,
+    xSplit,
+    ySplit,
+    quadrants,
+    xLabel,
+    yLabel,
+    axisLabels,
+    showTicks,
+    reverseX,
+    showLabels,
+    pointSize,
+    name,
+    draggable,
+    onPointClick,
+    onPointDrop,
+    onQuadrantClick,
+    renderTooltip,
+    quadrantContent,
+  } = props;
+  const base = useEngineOptions(props, NO_SERIES);
+  const dragPoints = draggable ?? !!onPointDrop;
+  const options = useMemo(
+    () =>
+      quadrantChartOptions(
+        {
+          points,
+          xDomain,
+          yDomain,
+          xSplit,
+          ySplit,
+          quadrants,
+          xLabel,
+          yLabel,
+          axisLabels,
+          showTicks,
+          reverseX,
+          showLabels,
+          pointSize,
+          name,
+          draggable: dragPoints,
+        },
+        base,
+      ),
+    [
+      points,
+      xDomain,
+      yDomain,
+      xSplit,
+      ySplit,
+      quadrants,
+      xLabel,
+      yLabel,
+      axisLabels,
+      showTicks,
+      reverseX,
+      showLabels,
+      pointSize,
+      name,
+      dragPoints,
+      base,
+    ],
+  );
+  const geometry = { xDomain, yDomain, xSplit, ySplit, reverseX };
+
+  const overlay = quadrantContent
+    ? (plot: ChartRect) => {
+        const [x0, x1] = xDomain ?? [0, 10];
+        const [y0, y1] = yDomain ?? [0, 10];
+        const xs = xSplit ?? (x0 + x1) / 2;
+        const ys = ySplit ?? (y0 + y1) / 2;
+        const fx = (xs - x0) / (x1 - x0 || 1);
+        const fy = (ys - y0) / (y1 - y0 || 1);
+        // split point relative to the plot area
+        const sx = plot.width * (reverseX ? 1 - fx : fx);
+        const sy = plot.height * (1 - fy);
+        return CORNERS.map((corner) => {
+          const content = quadrantContent[corner];
+          if (content === undefined || content === null || content === false)
+            return null;
+          const left = corner.endsWith("Left");
+          const top = corner.startsWith("top");
+          return (
+            <View
+              key={corner}
+              pointerEvents="box-none"
+              style={{
+                position: "absolute",
+                left: left ? 0 : sx,
+                top: top ? 0 : sy,
+                width: left ? sx : plot.width - sx,
+                height: top ? sy : plot.height - sy,
+              }}
+              {...part("chart", "quadrant", { corner })}
+            >
+              {content}
+            </View>
+          );
+        });
+      }
+    : undefined;
+
+  return (
+    <ChartBase
+      options={options}
+      {...frameProps({
+        ...props,
+        onPointClick: undefined,
+        renderTooltip: undefined,
+      })}
+      overlay={overlay}
+      onPointClick={
+        onPointClick
+          ? (event: ChartHoverEvent) => {
+              const index = event.items[0]?.index;
+              if (index !== undefined && points[index])
+                onPointClick(points[index], index);
+            }
+          : undefined
+      }
+      onPlotClick={
+        onQuadrantClick
+          ? (at) => onQuadrantClick(quadrantOf(geometry, at.x, at.y), at)
+          : undefined
+      }
+      onDrop={
+        onPointDrop
+          ? (event) => {
+              const index = event.item.index;
+              if (!points[index]) return;
+              onPointDrop(points[index], index, {
+                x: event.x,
+                y: event.y,
+                quadrant: quadrantOf(geometry, event.x, event.y),
+              });
+            }
+          : undefined
+      }
+      renderTooltip={
+        renderTooltip
+          ? (event) => {
+              const index = event.items[0]?.index;
+              return index !== undefined && points[index]
+                ? renderTooltip(points[index], index)
+                : null;
+            }
+          : undefined
+      }
+    />
+  );
+}

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

@@ -0,0 +1,8 @@
+export {
+  BarChart,
+  Chart,
+  LineChart,
+  QuadrantChart,
+  ScatterChart,
+} from "./charts";
+export type * from "./types";

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

@@ -0,0 +1,50 @@
+// React Native has no synchronous text measurement: the chart engine lays
+// its labels out (legend, ticks, tooltip, label collisions) with an estimate
+// of the advance of each character in the platform sans fonts (San
+// Francisco, Roboto, PingFang / Noto CJK).
+
+const FONT = /^\s*(?:(\d{3}|bold|normal)\s+)?([\d.]+)px/;
+
+/** Wide characters: CJK, Hangul, kana, fullwidth forms, emoji */
+const isWide = (code: number) =>
+  (code >= 0x1100 && code <= 0x115f) ||
+  (code >= 0x2e80 && code <= 0xa4cf) ||
+  (code >= 0xac00 && code <= 0xd7a3) ||
+  (code >= 0xf900 && code <= 0xfaff) ||
+  (code >= 0xfe30 && code <= 0xfe4f) ||
+  (code >= 0xff00 && code <= 0xff60) ||
+  (code >= 0xffe0 && code <= 0xffe6) ||
+  code >= 0x1f000;
+
+const NARROW = new Set(" il.,:;'|!Ijtfr()[]`");
+const WIDE_LATIN = new Set("MWmw@%");
+
+/** Advance of a character, in multiples of the font size */
+const advance = (ch: string): number => {
+  const code = ch.codePointAt(0) ?? 0;
+  if (isWide(code)) return 1;
+  if (NARROW.has(ch)) return 0.3;
+  if (WIDE_LATIN.has(ch)) return 0.82;
+  if (ch >= "0" && ch <= "9") return 0.56;
+  if (ch >= "A" && ch <= "Z") return 0.66;
+  return 0.55;
+};
+
+/**
+ * Estimated width in pixels of `text` drawn with a CSS `font`
+ * (`"600 12px system-ui"`): the `measureText` of the chart controller
+ */
+export function measureChartText(text: string, font: string): number {
+  const match = FONT.exec(font);
+  const weightText = match?.[1];
+  const weight =
+    weightText === "bold"
+      ? 700
+      : weightText && weightText !== "normal"
+        ? +weightText
+        : 400;
+  const size = match ? Number(match[2]) : 11;
+  let units = 0;
+  for (const ch of text) units += advance(ch);
+  return units * size * (weight >= 600 ? 1.07 : weight >= 500 ? 1.03 : 1);
+}