orn-ui 0.2.9 → 0.3.0

package/lib/module/organisms/Chart.js

@@ -1,10 +1,11 @@
 "use strict";
 
-import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import React, { createContext, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { contrast } from '../theme/colors';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useLabels, useTheme } from '../theme/UIProvider';
+import { useReduceMotion } from '../theme/useReduceMotion';
 import { SegmentedControl } from '../molecules/SegmentedControl';
 import { Bar, Dot, Polyline, Wedge } from './chart/marks';
 import { AxisLabels, CartesianGrid, Legend, RadarGrid, Tooltip } from './chart/frame';
@@ -12,26 +13,43 @@ import { seriesPalette } from './chart/palette';
 import { angleOf, arcAt, arcsFor, clamp, exactTicks, extent, fanStrips, formatNumber, growExtent, linearScale, lttbIndices, niceScale, polar, radarAngles, sampleY, smoothPoints, stackRow, toNumber } from './chart/math';
 
 /**
- * Un filtro de la barra superior. Chart no filtra nada por su cuenta: muestra
- * el control y avisa. Quien tiene los datos decide qué significa "últimos 7
- * días", y eso no se puede adivinar desde acá.
+ * A filter in the top bar. Chart doesn't filter anything on its own: it shows
+ * the control and reports. Whoever has the data decides what "last 7 days"
+ * means, and that can't be guessed from here.
  */
-
-// 'pie' y 'donut' van separados aunque compartan todo: con un solo miembro
-// cuyo `type` fuera `'pie' | 'donut'`, TypeScript no saca ese miembro de la
-// unión al descartarlo, y el resto del componente deja de estrecharse.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Background the marks paint "holes" with (donut center, point rings). */
+const ChartSurfaceContext = /*#__PURE__*/createContext(undefined);
+function useChartSurface() {
+  const theme = useTheme();
+  return useContext(ChartSurfaceContext) ?? theme.colors.surfaceRaised;
+}
+
+// 'pie' and 'donut' are kept separate even though they share everything: with
+// a single member whose `type` were `'pie' | 'donut'`, TypeScript doesn't drop
+// that member from the union when ruling it out, and the rest of the component
+// stops narrowing.
+
 const DEFAULT_HEIGHT = 220;
 const DEFAULT_TICKS = 4;
-/** Canal de las etiquetas de valor, a la izquierda. */
+/** Floor of the value-label gutter, on the left. */
 const VALUE_GUTTER = 38;
-/** Canal de las categorías cuando van a la izquierda (barras horizontales). */
+/**
+ * Estimated width of a label character. React Native doesn't measure text
+ * without rendering it, and measuring to decide the layout would make the
+ * chart show up shifted for a frame; at `fontSize.xs` a digit is around
+ * 0.6em, and too much is better than too little — extra room, no clipped number.
+ */
+const VALUE_CHAR = 6.5;
+/** Gutter cap: a wide axis can't eat the plot. */
+const VALUE_GUTTER_MAX = 0.3;
+/** Category gutter when they go on the left (horizontal bars). */
 const CATEGORY_GUTTER = 64;
-/** Canal de las etiquetas de abajo. */
+/** Gutter for the bottom labels. */
 const BOTTOM_GUTTER = 16;
-/** Fracción del ancho de banda que ocupan las barras; el resto es aire. */
+/** Fraction of the band width taken by the bars; the rest is room. */
 const BAND_FILL = 0.7;
-/** Aire alrededor del radar para que entren las etiquetas de los ejes. */
+/** Room around the radar so the axis labels fit. */
 const RADAR_INSET = 26;
 const DIM_OPACITY = 0.3;
 const useStyles = createStyles(theme => ({
@@ -73,7 +91,7 @@ const useStyles = createStyles(theme => ({
   }
 }));
 
-/** Estado controlado o propio, con el mismo contrato en los dos casos. */
+/** Controlled or own state, with the same contract in both cases. */
 function useControlled(controlled, fallback) {
   const [own, setOwn] = useState(fallback);
   const isControlled = controlled !== undefined;
@@ -81,10 +99,10 @@ function useControlled(controlled, fallback) {
 }
 
 /**
- * Resuelve el dominio del eje de valores a partir de lo que pidió el
- * consumidor. En 'sticky' la referencia vive en un ref: lo que importa no es
- * el dominio de este render sino el más ancho que se haya visto, y guardarlo
- * en estado dispararía un render de más por cada tick que ensancha el eje.
+ * Resolves the value axis domain from what the consumer asked for. In
+ * 'sticky' the reference lives in a ref: what matters isn't this render's
+ * domain but the widest one seen so far, and keeping it in state would fire
+ * an extra render for every tick that widens the axis.
  */
 function useDomain(measured, domain) {
   const widest = useRef(null);
@@ -98,19 +116,20 @@ function useDomain(measured, domain) {
 
 /**
  * Chart
- * Barras (verticales, horizontales, agrupadas, apiladas), línea, área, torta,
- * dona y radar en un solo componente, porque lo que cambia entre ellos es la
- * marca que se dibuja y no el resto: datos, escala, ejes, leyenda, tooltip,
- * selección y filtros son los mismos seis mecanismos en todos.
+ * Bars (vertical, horizontal, grouped, stacked), line, area, pie, donut and
+ * radar in a single component, because what changes between them is the mark
+ * being drawn and not the rest: data, scale, axes, legend, tooltip, selection
+ * and filters are the same six mechanisms in all of them.
  *
- * Se dibuja con `View`: React Native no trae lienzo vectorial y la librería no
- * puede agregar uno. Las tres primitivas están en `chart/marks.tsx` y la
- * geometría entera, sin React, en `chart/math.ts`.
+ * It is drawn with `View`: React Native ships no vector canvas and the library
+ * can't add one. The three primitives are in `chart/marks.tsx` and the whole
+ * geometry, without React, in `chart/math.ts`.
  *
- * Gestalt: destino común — al tocar una categoría, todo lo que no es ella baja
- * a {@link DIM_OPACITY} a la vez, así que lo resaltado se lee como un grupo y
- * no como una marca suelta. La leyenda usa similitud: el mismo color que la
- * serie, y por eso puede apagarla sin que haga falta explicar qué apaga.
+ * Gestalt: common fate — when you tap a category, everything that isn't it
+ * drops to {@link DIM_OPACITY} at once, so what is highlighted reads as a group
+ * and not as a loose mark. The legend uses similarity: the same color as the
+ * series, which is why it can turn it off without having to explain what it
+ * turns off.
  */
 export function Chart(props) {
   const {
@@ -129,10 +148,11 @@ export function Chart(props) {
     onSelect,
     tooltip = true,
     formatValue = formatNumber,
-    animate = true,
+    animate: animateProp = true,
     duration,
     emptyText,
     accessibilityLabel,
+    surfaceColor,
     style,
     testID
   } = props;
@@ -140,6 +160,9 @@ export function Chart(props) {
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
   const uiLabels = useLabels();
+  // Reduce Motion: the marks appear in their final shape instead of growing.
+  const reduceMotion = useReduceMotion();
+  const animate = animateProp && !reduceMotion;
   const [width, setWidth] = useState(0);
   const [hidden, setHidden, hiddenIsControlled] = useControlled(hiddenKeys, defaultHiddenKeys ?? []);
   const [pick, setPick, selectionIsControlled] = useControlled(selected, null);
@@ -148,15 +171,15 @@ export function Chart(props) {
   const decimate = polyline ? props.decimate : false;
 
   /**
-   * Lo que se dibuja: la ventana de `data`, y de ahí los puntos que caben.
-   * El diezmado corre sobre la fila entera, elegida con la primera serie
-   * visible: las series comparten eje x, así que quedarse con índices
-   * distintos por serie rompería la alineación, la capa de toque y el tooltip.
+   * What gets drawn: the window of `data`, and from that the points that fit.
+   * Decimation runs over the whole row, chosen with the first visible series:
+   * the series share the x axis, so keeping different indexes per series would
+   * break the alignment, the touch layer and the tooltip.
    */
   const rows = useMemo(() => {
     const windowed = windowSize && windowSize > 0 ? data.slice(-windowSize) : data;
     if (!polyline || decimate === false || width === 0) return windowed;
-    // Un punto cada dos píxeles: más no se ve y sí se paga.
+    // One point every two pixels: more can't be seen but still has to be paid for.
     const target = typeof decimate === 'number' ? decimate : Math.floor(width / 2);
     if (windowed.length <= target) return windowed;
     const lead = series.find(item => !hidden.includes(item.key))?.key ?? series[0]?.key;
@@ -167,10 +190,10 @@ export function Chart(props) {
   const ids = useMemo(() => rows.map((row, index) => selectBy ? selectBy(row, index) : String(index)), [rows, selectBy]);
 
   /**
-   * La selección se guarda por `id` y se resuelve contra las filas de ahora:
-   * si el dato se corrió, el resaltado lo sigue; si salió de la ventana,
-   * desaparece. Reusar el índice a ciegas señalaría el dato que quedó en ese
-   * lugar, que no es el que nadie eligió.
+   * The selection is stored by `id` and resolved against the current rows:
+   * if the datum shifted, the highlight follows it; if it left the window, it
+   * disappears. Blindly reusing the index would point at the datum that ended
+   * up in that spot, which isn't the one anyone picked.
    */
   const selection = useMemo(() => {
     if (!pick) return null;
@@ -186,8 +209,8 @@ export function Chart(props) {
     };
   }, [pick, ids, rows, labels]);
 
-  // En torta las categorías son las filas; en el resto, las columnas. De eso
-  // dependen el color, la leyenda y qué apaga un toque en ella.
+  // In a pie the categories are the rows; in the rest, the columns. The
+  // color, the legend and what a tap on it turns off depend on that.
   const palette = seriesPalette(theme, Math.max(1, isPie ? rows.length : series.length));
   const entries = useMemo(() => isPie ? labels.map((label, index) => ({
     key: label,
@@ -207,9 +230,9 @@ export function Chart(props) {
   }, [hidden, hiddenIsControlled, setHidden, onHiddenKeysChange]);
 
   /**
-   * Los plots avisan qué se tocó —fila y serie— y la selección entera se
-   * arma acá: es el único lugar que conoce `selectBy`, las etiquetas y las
-   * filas de verdad, y así los tres no repiten el armado.
+   * The plots report what was tapped —row and series— and the whole selection
+   * is built here: it is the only place that knows `selectBy`, the labels and
+   * the actual rows, so the three don't repeat the building.
    */
   const applySelection = useCallback(hit => {
     const row = hit ? rows[hit.index] : undefined;
@@ -221,9 +244,9 @@ export function Chart(props) {
       seriesKey: hit.seriesKey,
       value: toNumber(row[hit.seriesKey]) ?? 0
     } : null;
-    // Tocar lo ya elegido lo suelta: sin eso no habría forma de volver al
-    // chart entero sin tocar afuera, y "afuera" en una pantalla con scroll
-    // no siempre existe.
+    // Tapping what is already selected releases it: without that there would
+    // be no way back to the whole chart without tapping outside, and
+    // "outside" doesn't always exist on a scrolling screen.
     const same = next && selection && next.id === selection.id && next.seriesKey === selection.seriesKey;
     const value = same ? null : next;
     if (!selectionIsControlled) setPick(value);
@@ -248,77 +271,80 @@ export function Chart(props) {
     tooltip,
     testID
   };
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.root, style],
-    testID: testID,
-    accessible: false,
-    children: [filters && filters.length > 0 ? /*#__PURE__*/_jsx(View, {
-      style: styles.filters,
-      children: filters.map(filter => /*#__PURE__*/_jsx(SegmentedControl, {
-        options: filter.options,
-        value: filter.value,
-        onChange: filter.onChange,
-        testID: testID && `${testID}-filter-${filter.key}`
-      }, filter.key))
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: [styles.plot, {
-        height
-      }],
-      onLayout: onLayout,
-      accessible: true,
-      accessibilityRole: "image",
-      accessibilityLabel: accessibilityLabel,
-      testID: testID && `${testID}-plot`,
-      children: [width === 0 || empty ? null : props.type === 'pie' || props.type === 'donut' ? /*#__PURE__*/_jsx(PiePlot, {
-        ...shared,
-        donut: props.type === 'donut',
-        innerRadius: props.innerRadius,
-        sliceLabels: props.sliceLabels ?? 'percent',
-        valueKey: series[0]?.key ?? ''
-      }) : props.type === 'radar' ? /*#__PURE__*/_jsx(RadarPlot, {
-        ...shared,
-        domain: props.domain,
-        levels: props.levels ?? 4,
-        fill: props.fill ?? true,
-        thickness: props.thickness ?? 2,
-        dots: props.dots ?? true
-      }) : /*#__PURE__*/_jsx(CartesianPlot, {
-        ...shared,
-        type: props.type,
-        orientation: props.type === 'bar' ? props.orientation ?? 'vertical' : 'vertical',
-        stacked: props.type === 'bar' || props.type === 'area' ? props.stacked ?? false : false,
-        barRadius: props.type === 'bar' ? props.barRadius ?? theme.tokens.radius.xs : 0,
-        smooth: props.type !== 'bar' ? props.smooth ?? false : false,
-        thickness: props.type !== 'bar' ? props.thickness ?? 2 : 0,
-        dots: props.type === 'line' ? props.dots ?? true : props.type === 'area' ? props.dots ?? false : false,
-        fillOpacity: props.type === 'area' ? props.fillOpacity ?? 0.22 : 0,
-        domain: props.domain,
-        grid: props.grid ?? true,
-        ticks: props.ticks ?? DEFAULT_TICKS,
-        xAxis: props.xAxis ?? true,
-        yAxis: props.yAxis ?? true
-      }), empty ? /*#__PURE__*/_jsx(View, {
-        style: styles.empty,
-        testID: testID && `${testID}-empty`,
-        children: /*#__PURE__*/_jsx(Text, {
-          allowFontScaling: allowFontScaling,
-          style: styles.emptyText,
-          children: emptyText ?? uiLabels.noResultsTitle
-        })
+  return /*#__PURE__*/_jsx(ChartSurfaceContext.Provider, {
+    value: surfaceColor ?? theme.colors.surfaceRaised,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.root, style],
+      testID: testID,
+      accessible: false,
+      children: [filters && filters.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.filters,
+        children: filters.map(filter => /*#__PURE__*/_jsx(SegmentedControl, {
+          options: filter.options,
+          value: filter.value,
+          onChange: filter.onChange,
+          testID: testID && `${testID}-filter-${filter.key}`
+        }, filter.key))
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: [styles.plot, {
+          height
+        }],
+        onLayout: onLayout,
+        accessible: true,
+        accessibilityRole: "image",
+        accessibilityLabel: accessibilityLabel,
+        testID: testID && `${testID}-plot`,
+        children: [width === 0 || empty ? null : props.type === 'pie' || props.type === 'donut' ? /*#__PURE__*/_jsx(PiePlot, {
+          ...shared,
+          donut: props.type === 'donut',
+          innerRadius: props.innerRadius,
+          sliceLabels: props.sliceLabels ?? 'percent',
+          valueKey: series[0]?.key ?? ''
+        }) : props.type === 'radar' ? /*#__PURE__*/_jsx(RadarPlot, {
+          ...shared,
+          domain: props.domain,
+          levels: props.levels ?? 4,
+          fill: props.fill ?? true,
+          thickness: props.thickness ?? 2,
+          dots: props.dots ?? true
+        }) : /*#__PURE__*/_jsx(CartesianPlot, {
+          ...shared,
+          type: props.type,
+          orientation: props.type === 'bar' ? props.orientation ?? 'vertical' : 'vertical',
+          stacked: props.type === 'bar' || props.type === 'area' ? props.stacked ?? false : false,
+          barRadius: props.type === 'bar' ? props.barRadius ?? theme.tokens.radius.xs : 0,
+          smooth: props.type !== 'bar' ? props.smooth ?? false : false,
+          thickness: props.type !== 'bar' ? props.thickness ?? 2 : 0,
+          dots: props.type === 'line' ? props.dots ?? true : props.type === 'area' ? props.dots ?? false : false,
+          fillOpacity: props.type === 'area' ? props.fillOpacity ?? 0.22 : 0,
+          domain: props.domain,
+          grid: props.grid ?? true,
+          ticks: props.ticks ?? DEFAULT_TICKS,
+          xAxis: props.xAxis ?? true,
+          yAxis: props.yAxis ?? true
+        }), empty ? /*#__PURE__*/_jsx(View, {
+          style: styles.empty,
+          testID: testID && `${testID}-empty`,
+          children: /*#__PURE__*/_jsx(Text, {
+            allowFontScaling: allowFontScaling,
+            style: styles.emptyText,
+            children: emptyText ?? uiLabels.noResultsTitle
+          })
+        }) : null]
+      }), showLegend ? /*#__PURE__*/_jsx(Legend, {
+        items: entries,
+        hidden: hidden,
+        onToggle: toggleable ? applyHidden : undefined,
+        testID: testID && `${testID}-legend`
       }) : null]
-    }), showLegend ? /*#__PURE__*/_jsx(Legend, {
-      items: entries,
-      hidden: hidden,
-      onToggle: toggleable ? applyHidden : undefined,
-      testID: testID && `${testID}-legend`
-    }) : null]
+    })
   });
 }
 Chart.displayName = 'Chart';
 
-// ── lo que comparten los tres plots ────────────────────────────────────────
+// ── what the three plots share ─────────────────────────────────────────────
 
-/** Filas del tooltip para una categoría del eje x. */
+/** Tooltip rows for a category on the x axis. */
 function tooltipRowsAt(rows, index, visible, format) {
   const row = rows[index];
   if (!row) return [];
@@ -333,12 +359,12 @@ function tooltipRowsAt(rows, index, visible, format) {
   }).filter(item => item !== null);
 }
 
-// ── barras, línea y área ───────────────────────────────────────────────────
+// ── bars, line and area ────────────────────────────────────────────────────
 
-/** Ancho de una tira del relleno de área, en píxeles. Más fino = más vistas. */
+/** Width of one strip of the area fill, in pixels. Thinner = more views. */
 const STRIP_WIDTH = 4;
 const MAX_STRIPS = 140;
-/** Aire entre dos barras del mismo grupo. */
+/** Room between two bars of the same group. */
 const GROUP_GAP = 2;
 const CartesianPlot = /*#__PURE__*/memo(props => {
   const {
@@ -369,36 +395,49 @@ const CartesianPlot = /*#__PURE__*/memo(props => {
     yAxis
   } = props;
   const theme = useTheme();
+  const surface = useChartSurface();
   const horizontal = type === 'bar' && orientation === 'horizontal';
   const keys = useMemo(() => visible.map(entry => entry.key), [visible]);
-  const leftGutter = yAxis ? horizontal ? CATEGORY_GUTTER : VALUE_GUTTER : 0;
   const bottomGutter = xAxis ? BOTTOM_GUTTER : 0;
-  const plotW = Math.max(1, width - leftGutter);
-  const plotH = Math.max(1, height - bottomGutter);
 
-  // La línea puede no tocar el cero (una temperatura, un ranking); una barra
-  // sí tiene que hacerlo, porque su largo es el que dice el valor.
+  // The line may not touch zero (a temperature, a ranking); a bar does have
+  // to, because its length is what states the value.
   const measured = useMemo(() => extent(rows, keys, {
     stacked,
     includeZero: type !== 'line'
   }), [rows, keys, stacked, type]);
   const [low, high] = useDomain(measured, domain);
-  const scale = useMemo(() => {
-    // Un dominio a mano se respeta tal cual; uno medido (o 'sticky') se
-    // redondea, que es lo que hace legible el eje.
-    const nice = Array.isArray(domain) ? exactTicks(low, high, tickCount) : niceScale(low, high, tickCount);
-    const toPixel = horizontal ? linearScale([nice.min, nice.max], [0, plotW]) : linearScale([nice.min, nice.max], [plotH, 0]);
-    return {
-      nice,
-      toPixel
-    };
-  }, [domain, low, high, tickCount, horizontal, plotW, plotH]);
+
+  // A hand-set domain is respected as is; a measured one (or 'sticky') is
+  // rounded, which is what makes the axis legible.
+  const nice = useMemo(() => Array.isArray(domain) ? exactTicks(low, high, tickCount) : niceScale(low, high, tickCount), [domain, low, high, tickCount]);
+
+  /**
+   * The gutter comes from the longest label, not from a constant: with a
+   * custom `formatValue` ("$3000", "1.250 ms") a fixed width clips the number
+   * and the axis ends up saying "$30…". The ticks don't depend on the plot's
+   * width, so they can be measured before splitting it up.
+   */
+  const leftGutter = useMemo(() => {
+    if (!yAxis) return 0;
+    if (horizontal) return CATEGORY_GUTTER;
+    const longest = nice.values.reduce((widest, value) => Math.max(widest, formatValue(value).length), 0);
+    const wanted = Math.ceil(longest * VALUE_CHAR) + theme.tokens.spacing.sm;
+    return Math.max(VALUE_GUTTER, Math.min(wanted, Math.floor(width * VALUE_GUTTER_MAX)));
+  }, [yAxis, horizontal, nice, formatValue, width, theme.tokens.spacing.sm]);
+  const plotW = Math.max(1, width - leftGutter);
+  const plotH = Math.max(1, height - bottomGutter);
+  const toPixel = useMemo(() => horizontal ? linearScale([nice.min, nice.max], [0, plotW]) : linearScale([nice.min, nice.max], [plotH, 0]), [horizontal, nice, plotW, plotH]);
+  const scale = useMemo(() => ({
+    nice,
+    toPixel
+  }), [nice, toPixel]);
   const band = (horizontal ? plotH : plotW) / Math.max(1, rows.length);
   const centerOf = useCallback(index => (index + 0.5) * band, [band]);
   const baseline = scale.toPixel(clamp(0, scale.nice.min, scale.nice.max));
   const stacks = useMemo(() => stacked ? rows.map(row => stackRow(row, keys)) : null, [stacked, rows, keys]);
 
-  /** Puntos de una serie: `to` es el valor, `from` el piso desde donde se rellena. */
+  /** A series' points: `to` is the value, `from` the floor it is filled from. */
   const pointsFor = useCallback((key, edge) => {
     const out = [];
     rows.forEach((row, index) => {
@@ -421,8 +460,8 @@ const CartesianPlot = /*#__PURE__*/memo(props => {
     return out;
   }, [rows, stacks, centerOf, scale, baseline]);
   const pickAt = useCallback((index, event) => {
-    // Sobre qué serie cayó el dedo: la que tiene su marca más cerca del
-    // toque en el eje de valores. Con una sola serie es siempre esa.
+    // Which series the finger landed on: the one whose mark is closest to
+    // the touch on the value axis. With a single series it is always that one.
     const touch = (horizontal ? event?.nativeEvent?.locationX : event?.nativeEvent?.locationY) ?? 0;
     let bestKey = keys[0] ?? '';
     let bestDistance = Infinity;
@@ -530,10 +569,10 @@ const CartesianPlot = /*#__PURE__*/memo(props => {
           },
           children: [type === 'area' ?
           /*#__PURE__*/
-          // La opacidad va en el grupo, no en cada tira: el medio
-          // píxel de solape que tapa la costura del antialias se
-          // compone dos veces y deja una raya vertical cada cuatro
-          // píxeles. Atenuado el grupo entero, se pinta una sola vez.
+          // Opacity goes on the group, not on each strip: the half
+          // pixel of overlap that hides the antialias seam is
+          // composited twice and leaves a vertical stripe every four
+          // pixels. Dimming the whole group, it is painted only once.
           _jsx(View, {
             pointerEvents: "none",
             style: {
@@ -570,7 +609,7 @@ const CartesianPlot = /*#__PURE__*/memo(props => {
           }), dots ? raw.map((point, index) => /*#__PURE__*/_jsx(Dot, {
             point: point,
             color: entry.color,
-            ringColor: theme.colors.surface,
+            ringColor: surface,
             size: selection?.index === index ? 8 : 6,
             testID: testID && `${testID}-dot-${entry.key}-${index}`
           }, index)) : null]
@@ -650,15 +689,15 @@ const CartesianPlot = /*#__PURE__*/memo(props => {
 });
 CartesianPlot.displayName = 'CartesianPlot';
 
-// ── torta y dona ───────────────────────────────────────────────────────────
+// ── pie and donut ──────────────────────────────────────────────────────────
 
 const DONUT_RADIUS = 0.6;
-/** Cuánto sale la porción elegida, en píxeles. */
+/** How far the selected slice pops out, in pixels. */
 const EXPLODE = 8;
-/** Dónde cae la etiqueta, como fracción entre el agujero y el borde. */
+/** Where the label falls, as a fraction between the hole and the edge. */
 const LABEL_AT = 0.62;
 
-/** Blanco o negro, el que se lea encima del color. Un color raro no rompe: cae en `text`. */
+/** White or black, whichever reads over the color. An odd color doesn't break: it falls back to `text`. */
 function inkOn(background, theme) {
   try {
     return contrast(background, theme.colors.white) >= contrast(background, theme.colors.black) ? theme.colors.white : theme.colors.black;
@@ -685,6 +724,7 @@ const PiePlot = /*#__PURE__*/memo(props => {
     valueKey
   } = props;
   const theme = useTheme();
+  const surface = useChartSurface();
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
   const center = {
@@ -694,8 +734,8 @@ const PiePlot = /*#__PURE__*/memo(props => {
   const radius = Math.max(0, Math.min(width, height) / 2 - 2);
   const hole = clamp(innerRadius ?? (donut ? DONUT_RADIUS : 0), 0, 0.9) * radius;
   const arcs = useMemo(() => {
-    // Una categoría apagada vale 0: sale de la torta y el resto se reparte el
-    // 100%, que es lo que espera quien la apagó desde la leyenda.
+    // A turned-off category is worth 0: it leaves the pie and the rest share
+    // the 100%, which is what whoever turned it off from the legend expects.
     const values = rows.map((row, index) => visible.some(entry => entry.key === labels[index]) ? toNumber(row[valueKey]) ?? 0 : 0);
     return arcsFor(values);
   }, [rows, labels, visible, valueKey]);
@@ -705,8 +745,8 @@ const PiePlot = /*#__PURE__*/memo(props => {
       y: event?.nativeEvent?.locationY ?? 0
     };
     const distance = Math.hypot(point.x - center.x, point.y - center.y);
-    // El agujero de una dona no es parte de ninguna porción, y afuera del
-    // círculo tampoco: los dos sueltan la selección.
+    // A donut's hole isn't part of any slice, and neither is the area
+    // outside the circle: both release the selection.
     if (distance > radius || distance < hole) return onPick(null);
     const index = arcAt(arcs, angleOf(center, point));
     if (index === -1) return onPick(null);
@@ -738,11 +778,11 @@ const PiePlot = /*#__PURE__*/memo(props => {
         width: hole * 2,
         height: hole * 2,
         borderRadius: hole,
-        backgroundColor: theme.colors.surface
+        backgroundColor: surface
       }
     }) : null, sliceLabels === 'none' ? null : arcs.map(arc => {
-      // Una porción muy fina no tiene dónde escribir: la etiqueta se
-      // saldría encima de las vecinas y no se leería ninguna.
+      // A very thin slice has nowhere to write: the label would spill
+      // over its neighbors and none would be readable.
       if (arc.sweep < 18) return null;
       const at = polar(center, hole + (radius - hole) * LABEL_AT, arc.start + arc.sweep / 2);
       const color = entries[arc.index]?.color ?? theme.colors.primary;
@@ -787,7 +827,7 @@ PiePlot.displayName = 'PiePlot';
 
 // ── radar ──────────────────────────────────────────────────────────────────
 
-/** Tiras por lado del polígono cuando se rellena. Más = borde más limpio, más vistas. */
+/** Strips per side of the polygon when it is filled. More = cleaner edge, more views. */
 const RADAR_STEPS = 5;
 const RADAR_FILL_OPACITY = 0.18;
 const RADAR_LABEL_WIDTH = 56;
@@ -810,6 +850,7 @@ const RadarPlot = /*#__PURE__*/memo(props => {
     dots
   } = props;
   const theme = useTheme();
+  const surface = useChartSurface();
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
   const center = {
@@ -820,8 +861,8 @@ const RadarPlot = /*#__PURE__*/memo(props => {
   const angles = useMemo(() => radarAngles(rows.length), [rows.length]);
   const keys = useMemo(() => visible.map(entry => entry.key), [visible]);
 
-  // El radar mide desde el centro, y el centro es 0: un mínimo distinto de
-  // cero haría que dos valores parecidos se vean lejísimos.
+  // The radar measures from the center, and the center is 0: a minimum other
+  // than zero would make two similar values look miles apart.
   const measured = useMemo(() => [0, extent(rows, keys, {
     includeZero: true
   })[1]], [rows, keys]);
@@ -866,11 +907,11 @@ const RadarPlot = /*#__PURE__*/memo(props => {
         },
         children: [fill ?
         /*#__PURE__*/
-        // La opacidad va en el grupo, no en cada tira. Por tira, el
-        // solape de 0.4° que tapa la costura del antialias se compone
-        // dos veces y deja un radio más oscuro por corte: el relleno
-        // termina pareciendo una telaraña. Aplicada al grupo, las tiras
-        // se pintan opacas entre sí y el conjunto se atenúa una vez.
+        // Opacity goes on the group, not on each strip. Per strip, the
+        // 0.4° overlap that hides the antialias seam is composited
+        // twice and leaves a darker radius at each cut: the fill ends
+        // up looking like a spider web. Applied to the group, the strips
+        // paint opaque against each other and the whole is dimmed once.
         _jsx(View, {
           pointerEvents: "none",
           style: {
@@ -898,7 +939,7 @@ const RadarPlot = /*#__PURE__*/memo(props => {
         }), dots ? points.map((point, index) => /*#__PURE__*/_jsx(Dot, {
           point: point,
           color: entry.color,
-          ringColor: theme.colors.surface,
+          ringColor: surface,
           size: selection?.index === index ? 8 : 6
         }, index)) : null]
       }, entry.key);