orn-ui 0.2.7 → 0.2.9

package/lib/module/organisms/chart/frame.js

@@ -0,0 +1,367 @@
+"use strict";
+
+/**
+ * El marco de Chart: todo lo que rodea a las marcas — grilla, ejes, leyenda y
+ * tooltip. Nada de acá conoce el tipo de chart; recibe números y textos ya
+ * resueltos.
+ *
+ * Gestalt: la grilla usa `border`, dos escalones por debajo del color de las
+ * series, para que el dato quede como figura y la referencia como fondo. La
+ * leyenda repite el color exacto de cada serie (similitud) y por eso puede
+ * hacer de control de filtro sin explicar qué apaga: se apaga lo que tiene ese
+ * color.
+ */
+import React, { memo } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { createStyles } from '../../theme/createStyles';
+import { useAllowFontScaling, useColors } from '../../theme/UIProvider';
+import { polar } from './math';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const useStyles = createStyles(theme => ({
+  gridLine: {
+    position: 'absolute',
+    backgroundColor: theme.colors.border
+  },
+  axisLabel: {
+    position: 'absolute',
+    fontSize: theme.tokens.fontSize.xs,
+    color: theme.colors.textLight
+  },
+  legend: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: theme.tokens.spacing.sm,
+    marginTop: theme.tokens.spacing.sm
+  },
+  legendItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.tokens.spacing.xs,
+    paddingVertical: theme.tokens.spacing.xxs,
+    paddingHorizontal: theme.tokens.spacing.sm,
+    borderRadius: theme.tokens.radius.full,
+    backgroundColor: theme.colors.inputBackground
+  },
+  legendItemOff: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: theme.colors.border
+  },
+  swatch: {
+    width: 10,
+    height: 10,
+    borderRadius: theme.tokens.radius.xs
+  },
+  legendLabel: {
+    fontSize: theme.tokens.fontSize.xs,
+    color: theme.colors.text
+  },
+  legendLabelOff: {
+    color: theme.colors.textLight
+  },
+  tooltip: {
+    position: 'absolute',
+    paddingVertical: theme.tokens.spacing.sm,
+    paddingHorizontal: theme.tokens.spacing.md,
+    borderRadius: theme.tokens.radius.md,
+    backgroundColor: theme.colors.surface,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    gap: theme.tokens.spacing.xxs,
+    ...theme.tokens.shadow.md
+  },
+  tooltipTitle: {
+    fontSize: theme.tokens.fontSize.xs,
+    fontWeight: theme.tokens.fontWeight.semibold,
+    color: theme.colors.text
+  },
+  tooltipRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.tokens.spacing.xs
+  },
+  tooltipLabel: {
+    fontSize: theme.tokens.fontSize.xs,
+    color: theme.colors.textLight
+  },
+  tooltipValue: {
+    fontSize: theme.tokens.fontSize.xs,
+    fontWeight: theme.tokens.fontWeight.semibold,
+    color: theme.colors.text,
+    marginLeft: 'auto'
+  }
+}));
+
+// ── grilla y ejes cartesianos ──────────────────────────────────────────────
+
+export const CartesianGrid = /*#__PURE__*/memo(({
+  width,
+  height,
+  lines,
+  orientation,
+  zeroIndex,
+  testID
+}) => {
+  const styles = useStyles();
+  const colors = useColors();
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width,
+      height
+    },
+    children: lines.map((position, index) => {
+      const isZero = index === zeroIndex;
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.gridLine, orientation === 'horizontal' ? {
+          left: 0,
+          width,
+          top: position,
+          height: 1
+        } : {
+          top: 0,
+          height,
+          left: position,
+          width: 1
+        },
+        // La línea del cero es una referencia distinta de las demás: no
+        // divide el espacio, separa lo que suma de lo que resta.
+        isZero && {
+          backgroundColor: colors.textLight
+        }]
+      }, index);
+    })
+  });
+});
+CartesianGrid.displayName = 'CartesianGrid';
+const LABEL_HEIGHT = 14;
+export const AxisLabels = /*#__PURE__*/memo(({
+  labels,
+  axis,
+  gutter,
+  span,
+  testID
+}) => {
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+  // Una etiqueta de x se centra bajo su categoría y puede pisar a la vecina;
+  // se le da como ancho el reparto parejo del plot y se trunca a una línea.
+  const slot = axis === 'x' ? Math.max(24, span / Math.max(1, labels.length)) : gutter;
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0
+    },
+    children: labels.map((label, index) => /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      allowFontScaling: allowFontScaling,
+      style: [styles.axisLabel, axis === 'x' ? {
+        left: label.position - slot / 2,
+        width: slot,
+        top: 0,
+        textAlign: 'center'
+      } : {
+        left: 0,
+        width: gutter,
+        top: label.position - LABEL_HEIGHT / 2,
+        height: LABEL_HEIGHT,
+        textAlign: 'right'
+      }],
+      children: label.text
+    }, `${label.text}-${index}`))
+  });
+});
+AxisLabels.displayName = 'AxisLabels';
+
+// ── grilla del radar ───────────────────────────────────────────────────────
+
+/**
+ * Anillos y radios del radar. Los anillos son polígonos, no círculos: un
+ * círculo sugiere que entre eje y eje hay valores, y no los hay — sólo hay
+ * los ejes que se pasaron.
+ */
+export const RadarGrid = /*#__PURE__*/memo(({
+  center,
+  radius,
+  angles,
+  levels,
+  testID
+}) => {
+  const colors = useColors();
+  if (angles.length < 3 || radius <= 0) return null;
+  const rings = Array.from({
+    length: levels
+  }, (_, index) => radius * (index + 1) / levels);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0
+    },
+    children: [rings.map((ringRadius, ringIndex) => {
+      const points = angles.map(angle => polar(center, ringRadius, angle));
+      return points.map((point, index) => {
+        const next = points[(index + 1) % points.length];
+        const dx = next.x - point.x;
+        const dy = next.y - point.y;
+        const length = Math.hypot(dx, dy);
+        return /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            left: (point.x + next.x) / 2 - length / 2,
+            top: (point.y + next.y) / 2 - 0.5,
+            width: length,
+            height: 1,
+            backgroundColor: colors.border,
+            transform: [{
+              rotate: `${Math.atan2(dy, dx) * 180 / Math.PI}deg`
+            }]
+          }
+        }, `ring-${ringIndex}-${index}`);
+      });
+    }), angles.map((angle, index) => {
+      const tip = polar(center, radius, angle);
+      const dx = tip.x - center.x;
+      const dy = tip.y - center.y;
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          left: (center.x + tip.x) / 2 - radius / 2,
+          top: (center.y + tip.y) / 2 - 0.5,
+          width: radius,
+          height: 1,
+          backgroundColor: colors.border,
+          transform: [{
+            rotate: `${Math.atan2(dy, dx) * 180 / Math.PI}deg`
+          }]
+        }
+      }, `spoke-${index}`);
+    })]
+  });
+});
+RadarGrid.displayName = 'RadarGrid';
+
+// ── leyenda ────────────────────────────────────────────────────────────────
+
+export const Legend = /*#__PURE__*/memo(({
+  items,
+  hidden,
+  onToggle,
+  testID
+}) => {
+  const styles = useStyles();
+  const colors = useColors();
+  const allowFontScaling = useAllowFontScaling();
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.legend,
+    testID: testID,
+    children: items.map(item => {
+      const off = hidden.includes(item.key);
+      const content = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.swatch, {
+            backgroundColor: off ? colors.border : item.color
+          }]
+        }), /*#__PURE__*/_jsx(Text, {
+          allowFontScaling: allowFontScaling,
+          style: [styles.legendLabel, off && styles.legendLabelOff],
+          children: item.label
+        })]
+      });
+      if (!onToggle) {
+        return /*#__PURE__*/_jsx(View, {
+          style: styles.legendItem,
+          testID: testID && `${testID}-${item.key}`,
+          children: content
+        }, item.key);
+      }
+      return /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.legendItem, off && styles.legendItemOff],
+        onPress: () => onToggle(item.key),
+        accessibilityRole: "switch",
+        accessibilityState: {
+          checked: !off
+        },
+        accessibilityLabel: item.label,
+        testID: testID && `${testID}-${item.key}`,
+        children: content
+      }, item.key);
+    })
+  });
+});
+Legend.displayName = 'Legend';
+
+// ── tooltip ────────────────────────────────────────────────────────────────
+
+const TOOLTIP_WIDTH = 148;
+const TOOLTIP_GAP = 10;
+/** Alto estimado del globo: el real no se sabe hasta después de medirlo, y
+ *  medirlo para decidir dónde ponerlo lo haría aparecer corrido un frame. */
+const TOOLTIP_TITLE = 22;
+const TOOLTIP_ROW = 17;
+export const Tooltip = /*#__PURE__*/memo(({
+  title,
+  rows,
+  anchor,
+  containerWidth,
+  style,
+  testID
+}) => {
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+  // Clamp en vez de flip: moverlo al otro lado del dedo hace que salte de lado
+  // mientras se arrastra, y el salto se lee como un error.
+  const left = Math.max(0, Math.min(containerWidth - TOOLTIP_WIDTH, anchor.x - TOOLTIP_WIDTH / 2));
+  // Va arriba del punto, salvo que no haya lugar: ahí baja, porque taparse
+  // contra el borde superior lo deja ilegible.
+  const estimated = TOOLTIP_TITLE + rows.length * TOOLTIP_ROW;
+  const above = anchor.y - TOOLTIP_GAP - estimated;
+  const top = above >= 0 ? above : anchor.y + TOOLTIP_GAP;
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    pointerEvents: "none",
+    accessibilityRole: "alert",
+    style: [styles.tooltip, {
+      left,
+      width: TOOLTIP_WIDTH,
+      top
+    }, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      allowFontScaling: allowFontScaling,
+      style: styles.tooltipTitle,
+      children: title
+    }), rows.map(row => /*#__PURE__*/_jsxs(View, {
+      style: styles.tooltipRow,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.swatch, {
+          backgroundColor: row.color
+        }]
+      }), /*#__PURE__*/_jsx(Text, {
+        allowFontScaling: allowFontScaling,
+        numberOfLines: 1,
+        style: styles.tooltipLabel,
+        children: row.label
+      }), /*#__PURE__*/_jsx(Text, {
+        allowFontScaling: allowFontScaling,
+        style: styles.tooltipValue,
+        children: row.value
+      })]
+    }, row.key))]
+  });
+});
+Tooltip.displayName = 'Tooltip';
+//# sourceMappingURL=frame.js.map

package/lib/module/organisms/chart/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","Text","TouchableOpacity","View","createStyles","useAllowFontScaling","useColors","polar","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useStyles","theme","gridLine","position","backgroundColor","colors","border","axisLabel","fontSize","tokens","xs","color","textLight","legend","flexDirection","flexWrap","justifyContent","gap","spacing","sm","marginTop","legendItem","alignItems","paddingVertical","xxs","paddingHorizontal","borderRadius","radius","full","inputBackground","legendItemOff","borderWidth","borderColor","swatch","width","height","legendLabel","text","legendLabelOff","tooltip","md","surface","shadow","tooltipTitle","fontWeight","semibold","tooltipRow","tooltipLabel","tooltipValue","marginLeft","CartesianGrid","lines","orientation","zeroIndex","testID","styles","pointerEvents","style","left","top","children","map","index","isZero","displayName","LABEL_HEIGHT","AxisLabels","labels","axis","gutter","span","allowFontScaling","slot","Math","max","length","right","bottom","label","numberOfLines","textAlign","RadarGrid","center","angles","levels","rings","Array","from","_","ringRadius","ringIndex","points","angle","point","next","dx","x","dy","y","hypot","transform","rotate","atan2","PI","tip","Legend","items","hidden","onToggle","item","off","includes","key","content","onPress","accessibilityRole","accessibilityState","checked","accessibilityLabel","TOOLTIP_WIDTH","TOOLTIP_GAP","TOOLTIP_TITLE","TOOLTIP_ROW","Tooltip","title","rows","anchor","containerWidth","min","estimated","above","row","value"],"sourceRoot":"../../../../src","sources":["organisms/chart/frame.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/chart/marks.js

@@ -0,0 +1,310 @@
+"use strict";
+
+/**
+ * Las marcas de Chart: lo único que sabe dibujar el componente.
+ *
+ * React Native no trae un lienzo vectorial y la librería no puede agregar uno
+ * (cero dependencias), así que las tres primitivas de acá se componen con
+ * `View` y bastan para los seis tipos de chart:
+ *
+ * | primitiva  | la usan                                             |
+ * |------------|-----------------------------------------------------|
+ * | `Bar`      | barras verticales y horizontales, agrupadas o apiladas |
+ * | `Polyline` | línea, contorno del radar, grilla del radar, ejes    |
+ * | `Wedge`    | torta, dona y el relleno del radar                   |
+ *
+ * Son puras: no escuchan toques ni conocen la escala. Quien toca es la capa de
+ * hit-test de Chart.tsx, que cubre columnas enteras en vez de la marca —
+ * una línea de 2px no es un blanco táctil.
+ */
+import React, { memo, useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import { segmentBox } from './math';
+
+/**
+ * Valor que persigue a `target` en vez de saltar. Un filtro que cambia los
+ * datos mueve la barra desde donde estaba, y ese movimiento es lo que dice
+ * "es la misma barra con otro número" en lugar de "es otro chart".
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function useAnimatedNumber(target, animate, duration) {
+  const value = useRef(new Animated.Value(animate ? 0 : target)).current;
+  useEffect(() => {
+    if (!animate) {
+      value.setValue(target);
+      return;
+    }
+    const animation = Animated.timing(value, {
+      toValue: target,
+      duration,
+      easing: Easing.out(Easing.cubic),
+      // Geometría, no transform: `height`/`top` son props de layout y el
+      // driver nativo no las toca. Es el precio de que la barra pueda crecer
+      // desde su base con valores negativos sin recalcular el origen.
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [target, animate, duration, value]);
+  return value;
+}
+
+// ── barra ──────────────────────────────────────────────────────────────────
+
+const DIM_OPACITY = 0.32;
+export const Bar = /*#__PURE__*/memo(({
+  x,
+  y,
+  width,
+  height,
+  color,
+  from,
+  radius = 0,
+  dim = false,
+  animate = true,
+  duration = 400,
+  testID
+}) => {
+  const vertical = from === 'bottom' || from === 'top';
+  const grown = useAnimatedNumber(vertical ? height : width, animate, duration);
+
+  // El extremo que se mueve es el opuesto a la base: una barra que nace
+  // abajo mantiene fijo su borde inferior y sube el superior.
+  const box = vertical ? {
+    left: x,
+    width,
+    height: grown,
+    ...(from === 'bottom' ? {
+      bottom: y
+    } : {
+      top: y
+    })
+  } : {
+    top: y,
+    height,
+    width: grown,
+    ...(from === 'left' ? {
+      left: x
+    } : {
+      right: x
+    })
+  };
+  const corners = radius <= 0 ? {} : from === 'bottom' ? {
+    borderTopLeftRadius: radius,
+    borderTopRightRadius: radius
+  } : from === 'top' ? {
+    borderBottomLeftRadius: radius,
+    borderBottomRightRadius: radius
+  } : from === 'left' ? {
+    borderTopRightRadius: radius,
+    borderBottomRightRadius: radius
+  } : {
+    borderTopLeftRadius: radius,
+    borderBottomLeftRadius: radius
+  };
+  return /*#__PURE__*/_jsx(Animated.View, {
+    testID: testID,
+    pointerEvents: "none",
+    style: [{
+      position: 'absolute',
+      backgroundColor: color,
+      opacity: dim ? DIM_OPACITY : 1
+    }, corners, box]
+  });
+});
+Bar.displayName = 'Bar';
+
+// ── polilínea ──────────────────────────────────────────────────────────────
+
+/**
+ * Una línea es un rectángulo fino rotado sobre su centro, uno por tramo. Con
+ * `smoothPoints` los tramos son tantos que la poligonal se lee como curva.
+ *
+ * Los extremos quedan a tope, no redondeados: un `borderRadius` por tramo
+ * multiplicaría las vistas y a 2px de grosor nadie ve la diferencia.
+ */
+export const Polyline = /*#__PURE__*/memo(({
+  points,
+  color,
+  thickness = 2,
+  closed = false,
+  opacity = 1,
+  testID
+}) => {
+  if (points.length < 2) return null;
+  const path = closed ? [...points, points[0]] : points;
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      opacity
+    },
+    children: path.slice(0, -1).map((point, index) => {
+      const box = segmentBox(point, path[index + 1], thickness);
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          left: box.left,
+          top: box.top,
+          width: box.width,
+          height: box.height,
+          backgroundColor: color,
+          transform: [{
+            rotate: `${box.rotate}deg`
+          }]
+        }
+      }, index);
+    })
+  });
+});
+Polyline.displayName = 'Polyline';
+export const Dot = /*#__PURE__*/memo(({
+  point,
+  color,
+  size = 7,
+  ringColor,
+  ringWidth = 2,
+  testID
+}) => {
+  const outer = size + (ringColor ? ringWidth * 2 : 0);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      left: point.x - outer / 2,
+      top: point.y - outer / 2,
+      width: outer,
+      height: outer,
+      borderRadius: outer / 2,
+      backgroundColor: color,
+      borderWidth: ringColor ? ringWidth : 0,
+      borderColor: ringColor
+    }
+  });
+});
+Dot.displayName = 'Dot';
+
+// ── porción ────────────────────────────────────────────────────────────────
+
+/**
+ * Sector de hasta 180°, sin curvas ni máscaras. Tres cajas:
+ *
+ * 1. un recorte fijo a la mitad derecha (`overflow: 'hidden'`), que es el
+ *    sector 0°–180°;
+ * 2. adentro, un cuadrado `size` × `size` centrado en el centro del círculo,
+ *    que es lo que gira — al rotar sobre su propio centro, rota sobre el
+ *    centro del círculo sin necesidad de `transformOrigin`;
+ * 3. adentro del cuadrado, **medio disco**, no un disco entero: un rectángulo
+ *    de media caja con las dos esquinas de afuera redondeadas al radio.
+ *
+ * El medio disco es lo que hace que la rotación signifique algo. Con un disco
+ * completo el recorte deja siempre la misma media luna —rotar un círculo
+ * sólido no lo cambia—, y toda porción, sea de 5° o de 180°, sale igual de
+ * ancha: 180°.
+ *
+ * Girado `sweep - 180`, el medio disco cubre de `sweep - 180` a `sweep`, y lo
+ * que sobrevive al recorte es exactamente 0°–`sweep`.
+ */
+const Half = ({
+  size,
+  sweep,
+  color
+}) => /*#__PURE__*/_jsx(View, {
+  style: {
+    position: 'absolute',
+    left: size / 2,
+    top: 0,
+    width: size / 2,
+    height: size,
+    overflow: 'hidden'
+  },
+  children: /*#__PURE__*/_jsx(View, {
+    style: {
+      position: 'absolute',
+      left: -size / 2,
+      top: 0,
+      width: size,
+      height: size,
+      transform: [{
+        rotate: `${sweep - 180}deg`
+      }]
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size / 2,
+        top: 0,
+        width: size / 2,
+        height: size,
+        backgroundColor: color,
+        borderTopRightRadius: size / 2,
+        borderBottomRightRadius: size / 2
+      }
+    })
+  })
+});
+const FULL_CIRCLE = 359.9;
+export const Wedge = /*#__PURE__*/memo(({
+  size,
+  start,
+  sweep,
+  color,
+  opacity = 1,
+  explode = 0,
+  center,
+  testID
+}) => {
+  if (sweep <= 0 || size <= 0) return null;
+  // 360° exactos dejan las dos mitades a 180°, y la de arriba tapa a la de
+  // abajo por una rendija de antialias. Un pelo menos no se ve y no pasa.
+  const total = Math.min(sweep, FULL_CIRCLE);
+  const first = Math.min(total, 180);
+  const second = total - first;
+  const bisector = (start + total / 2) * (Math.PI / 180);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      left: (center?.x ?? size / 2) - size / 2,
+      top: (center?.y ?? size / 2) - size / 2,
+      width: size,
+      height: size,
+      opacity,
+      transform: [{
+        translateX: explode * Math.sin(bisector)
+      }, {
+        translateY: -explode * Math.cos(bisector)
+      }, {
+        rotate: `${start}deg`
+      }]
+    },
+    children: [/*#__PURE__*/_jsx(Half, {
+      size: size,
+      sweep: first,
+      color: color
+    }), second > 0 ? /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: size,
+        height: size,
+        transform: [{
+          rotate: '180deg'
+        }]
+      },
+      children: /*#__PURE__*/_jsx(Half, {
+        size: size,
+        sweep: second,
+        color: color
+      })
+    }) : null]
+  });
+});
+Wedge.displayName = 'Wedge';
+//# sourceMappingURL=marks.js.map