jfs-components 0.0.84 → 0.0.86

package/lib/module/components/AreaLineChart/chartMath.js

@@ -0,0 +1,242 @@
+"use strict";
+
+/**
+ * Pure, framework-agnostic math helpers for `AreaLineChart`.
+ *
+ * Everything here is intentionally dependency-free (no d3, no react-native)
+ * so the chart can stay lightweight and be unit-reasoned in isolation. The
+ * functions cover the four primitives a line/area chart needs:
+ *   1. linear scales (data domain -> pixel range)
+ *   2. "nice" tick generation for the value axis
+ *   3. SVG path generation for lines and filled areas (straight + smooth)
+ *   4. interaction lookup (which data index is nearest a touch x)
+ */
+
+/** A resolved point in data space. `x` is the categorical/linear index. */
+
+/** A point already projected into pixel space. */
+
+/** Linear interpolation scale: maps a value from `domain` into `range`. */
+
+/**
+ * Create a linear scale mapping `domain` -> `range`. Mirrors the subset of
+ * `d3-scale.scaleLinear` we rely on, without the dependency. A zero-width
+ * domain collapses to the midpoint of the range so we never divide by zero.
+ */
+export function createLinearScale(domain, range) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const domainSpan = d1 - d0;
+  const scale = value => {
+    if (domainSpan === 0) {
+      return (r0 + r1) / 2;
+    }
+    const t = (value - d0) / domainSpan;
+    return r0 + t * (r1 - r0);
+  };
+  scale.domain = domain;
+  scale.range = range;
+  return scale;
+}
+
+/**
+ * Generate up to ~`count` "nice" evenly-spaced tick values spanning
+ * `[min, max]`, snapping the step to a 1/2/5 * 10^n progression so labels
+ * read cleanly (e.g. 0, 30K, 60K, 90K). Returns ascending values that
+ * always include the rounded-down min and rounded-up max bounds.
+ */
+export function niceTicks(min, max, count = 5) {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    return [];
+  }
+  if (min === max) {
+    return [min];
+  }
+  const safeCount = Math.max(1, Math.floor(count));
+  const span = max - min;
+  const rawStep = span / safeCount;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
+  const normalized = rawStep / magnitude;
+  let niceNormalized;
+  if (normalized <= 1) niceNormalized = 1;else if (normalized <= 2) niceNormalized = 2;else if (normalized <= 5) niceNormalized = 5;else niceNormalized = 10;
+  const step = niceNormalized * magnitude;
+  const niceMin = Math.floor(min / step) * step;
+  const niceMax = Math.ceil(max / step) * step;
+  const ticks = [];
+  // Guard against floating point drift by rounding to the step's precision.
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  for (let v = niceMin; v <= niceMax + step / 2; v += step) {
+    ticks.push(Number(v.toFixed(decimals)));
+  }
+  return ticks;
+}
+
+/**
+ * Compute the [min, max] extent of an array of resolved points along the
+ * requested axis. Returns `[0, 0]` for an empty list.
+ */
+export function extent(points, axis) {
+  if (points.length === 0) {
+    return [0, 0];
+  }
+  let min = Infinity;
+  let max = -Infinity;
+  for (const p of points) {
+    const v = p[axis];
+    if (v < min) min = v;
+    if (v > max) max = v;
+  }
+  return [min, max];
+}
+
+/**
+ * Normalize the loose `number[] | ChartPoint[]` series data into a uniform
+ * `ResolvedPoint[]`. Bare numbers use their array index as the x value.
+ */
+export function resolvePoints(data) {
+  return data.map((entry, index) => {
+    if (typeof entry === 'number') {
+      return {
+        x: index,
+        y: entry,
+        projected: false
+      };
+    }
+    const x = typeof entry.x === 'number' ? entry.x : index;
+    return {
+      x,
+      y: entry.y,
+      projected: entry.projected === true
+    };
+  });
+}
+
+/**
+ * Catmull-Rom -> cubic Bézier control point helper. Produces a smooth,
+ * monotone-ish curve through the points without overshooting wildly. Used
+ * for the `curve="monotone"` mode. `tension` of 0 yields a standard
+ * Catmull-Rom spline.
+ */
+function controlPoints(p0, p1, p2, p3) {
+  const t = 1 / 6;
+  return {
+    cp1x: p1.x + (p2.x - p0.x) * t,
+    cp1y: p1.y + (p2.y - p0.y) * t,
+    cp2x: p2.x - (p3.x - p1.x) * t,
+    cp2y: p2.y - (p3.y - p1.y) * t
+  };
+}
+
+/**
+ * One drawable line segment. `dashed` mirrors the `projected` flag of the
+ * point the segment ends at, letting the renderer split the polyline into
+ * solid and dashed `Path`s.
+ */
+
+/**
+ * Build the SVG path(s) for a polyline through `points`, split into runs of
+ * solid vs dashed segments. Each individual segment ("move to A, line/curve
+ * to B") is emitted as its own sub-path so that a single projected point can
+ * dash exactly one segment while leaving its neighbours solid.
+ */
+export function buildLineSegments(points, curve) {
+  if (points.length < 2) {
+    return [];
+  }
+  const segments = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    const start = points[i];
+    const end = points[i + 1];
+    const dashed = end.projected;
+    let d;
+    if (curve === 'monotone') {
+      const p0 = points[i - 1] ?? start;
+      const p3 = points[i + 2] ?? end;
+      const {
+        cp1x,
+        cp1y,
+        cp2x,
+        cp2y
+      } = controlPoints(p0, start, end, p3);
+      d = `M ${start.x} ${start.y} C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${end.x} ${end.y}`;
+    } else {
+      d = `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+    }
+    segments.push({
+      d,
+      dashed
+    });
+  }
+
+  // Merge adjacent segments that share the same dashed-ness into one path
+  // string to minimize the number of rendered <Path> nodes.
+  const merged = [];
+  for (const seg of segments) {
+    const last = merged[merged.length - 1];
+    if (last && last.dashed === seg.dashed) {
+      // Drop the redundant leading "M x y" of the appended segment.
+      const continuation = seg.d.replace(/^M [^A-Za-z]+/, '');
+      last.d += ' ' + continuation;
+    } else {
+      merged.push({
+        ...seg
+      });
+    }
+  }
+  return merged;
+}
+
+/**
+ * Build a single closed area path (the line, then down to `baselineY` and
+ * back) for a filled area fill. Curve smoothing matches `buildLineSegments`.
+ */
+export function buildAreaPath(points, baselineY, curve) {
+  if (points.length === 0) {
+    return '';
+  }
+  if (points.length === 1) {
+    const p = points[0];
+    return `M ${p.x} ${baselineY} L ${p.x} ${p.y} Z`;
+  }
+  let d = `M ${points[0].x} ${baselineY} L ${points[0].x} ${points[0].y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const start = points[i];
+    const end = points[i + 1];
+    if (curve === 'monotone') {
+      const p0 = points[i - 1] ?? start;
+      const p3 = points[i + 2] ?? end;
+      const {
+        cp1x,
+        cp1y,
+        cp2x,
+        cp2y
+      } = controlPoints(p0, start, end, p3);
+      d += ` C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${end.x} ${end.y}`;
+    } else {
+      d += ` L ${end.x} ${end.y}`;
+    }
+  }
+  const lastX = points[points.length - 1].x;
+  d += ` L ${lastX} ${baselineY} Z`;
+  return d;
+}
+
+/**
+ * Find the index of the point whose pixel-x is nearest to `targetX`. Used to
+ * snap the crosshair / tooltip to the closest data point during hover/drag.
+ */
+export function nearestIndex(pixelXs, targetX) {
+  if (pixelXs.length === 0) {
+    return -1;
+  }
+  let best = 0;
+  let bestDist = Infinity;
+  for (let i = 0; i < pixelXs.length; i++) {
+    const dist = Math.abs(pixelXs[i] - targetX);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = i;
+    }
+  }
+  return best;
+}

package/lib/module/components/Attached/Attached.js

@@ -3,6 +3,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { View } from 'react-native';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
 
 /**
@@ -113,6 +114,29 @@ function Attached({
       overflow: 'hidden'
     };
   }, [badgeSize, badgeRadius]);
+
+  // Forced slot ring. Like the corner radius, the border color/width are driven
+  // by design tokens (`attached/slot/border`, `attached/slot/borderWidth`) and
+  // applied to the slot regardless of the node passed. Rendered as an *outside*
+  // border: the ring lives on a wrapper that is pulled out by `-borderWidth` on
+  // every side (negative margin) so it grows outward instead of eating into the
+  // content, and its layout footprint stays equal to the slot box (keeping the
+  // anchor centering intact).
+  const slotBorderStyle = useMemo(() => {
+    const borderColor = getVariableByName('attached/slot/border', modes);
+    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes) || '0');
+    if (!borderColor || !(borderWidth > 0)) return null;
+
+    // Match the inner clip radius so the ring stays concentric. The outer edge
+    // sits `borderWidth` further out, hence `innerRadius + borderWidth`.
+    const innerRadius = badgeBoxStyle != null ? badgeBoxStyle.borderRadius : badgeRadius ?? 9999;
+    return {
+      borderWidth,
+      borderColor,
+      borderRadius: (typeof innerRadius === 'number' ? innerRadius : 9999) + borderWidth,
+      margin: -borderWidth
+    };
+  }, [modes, badgeBoxStyle, badgeRadius]);
   const badgePlacement = useMemo(() => {
     const {
       fx,
@@ -154,10 +178,16 @@ function Attached({
       style: badgePlacement,
       onLayout: onBadgeLayout,
       pointerEvents: "box-none",
-      children: badgeBoxStyle != null ? /*#__PURE__*/_jsx(View, {
-        style: badgeBoxStyle,
-        children: forceBadgeFill(badgeChildren)
-      }) : badgeChildren
+      children: (() => {
+        const slot = badgeBoxStyle != null ? /*#__PURE__*/_jsx(View, {
+          style: badgeBoxStyle,
+          children: forceBadgeFill(badgeChildren)
+        }) : badgeChildren;
+        return slotBorderStyle != null ? /*#__PURE__*/_jsx(View, {
+          style: slotBorderStyle,
+          children: slot
+        }) : slot;
+      })()
     })]
   });
 }

package/lib/module/components/BubbleChart/BubbleChart.js

@@ -0,0 +1,185 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import ClusterBubble from '../ClusterBubble/ClusterBubble';
+import { chooseLabelDirections, estimateLabelBox, fitRadiiToBox, scaleRadii, simulateCluster } from './bubblePacking';
+
+/** One bubble in the chart. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_APPEARANCE_CYCLE = ['Primary', 'Secondary', 'Tertiary', 'Quaternary', 'Quinary', 'Senary', 'Neutral'];
+const toText = (node, fallback = '') => typeof node === 'string' || typeof node === 'number' ? String(node) : fallback;
+/**
+ * `BubbleChart` arranges a set of `ClusterBubble`s with a lightweight **force
+ * simulation** — bubbles repel one another (collision), a gentle gravity keeps
+ * the cluster balanced, and the container box acts as the walls of a pool, so
+ * nothing ever overflows. Each datum's `value` drives its area (`sqrt`-scaled),
+ * colors resolve from the `dataViz/bg` token via a cycling `appearance`, and the
+ * emphasis comes from the `Emphasis / DataViz` mode. When a bubble is too small
+ * to hold its text, the label is anchored just outside the circle on whichever
+ * side has the most free space.
+ *
+ * @component
+ */
+function BubbleChart({
+  data,
+  minBubbleSize = 48,
+  maxBubbleSize = 170,
+  gap = 8,
+  labelGap,
+  height,
+  labelPlacement = 'auto',
+  autoInsideMinSize = 88,
+  appearanceCycle = DEFAULT_APPEARANCE_CYCLE,
+  iterations = 500,
+  onBubblePress,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const modes = propModes;
+  const resolvedLabelGap = labelGap ?? gap;
+  const [width, setWidth] = useState(0);
+  const handleLayout = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    setWidth(prev => Math.abs(prev - w) > 0.5 ? w : prev);
+  }, []);
+  const layout = useMemo(() => {
+    if (data.length === 0 || width <= 0) {
+      return {
+        bubbles: [],
+        poolHeight: height ?? 0
+      };
+    }
+    const minR = Math.max(1, minBubbleSize / 2);
+    const maxR = Math.max(minR, maxBubbleSize / 2);
+    const baseRadii = scaleRadii(data.map(d => d.value), minR, maxR);
+
+    // Estimate label sizes up front (independent of radius) so we can
+    // reserve a margin band around the bubbles for any outside labels.
+    const labelEstimates = data.map(d => estimateLabelBox(toText(d.display, String(d.value)), toText(d.label)));
+    const mayHaveOutside = labelPlacement !== 'inside' && (minBubbleSize < autoInsideMinSize || data.some(d => d.labelPlacement === 'outside'));
+    let insetX = gap;
+    let insetY = gap;
+    if (mayHaveOutside) {
+      let maxHalfW = 0;
+      let maxH = 0;
+      for (const e of labelEstimates) {
+        if (e.w / 2 > maxHalfW) maxHalfW = e.w / 2;
+        if (e.h > maxH) maxH = e.h;
+      }
+      insetX = Math.max(gap, maxHalfW + resolvedLabelGap);
+      insetY = Math.max(gap, maxH + resolvedLabelGap);
+    }
+
+    // Derive a pool height from the bubble area when none is supplied, then
+    // shrink radii (if needed) so everything fits inside the inner box.
+    let circleArea = 0;
+    for (const r of baseRadii) circleArea += Math.PI * r * r;
+    const derivedHeight = Math.min(width * 1.35, Math.max(width * 0.6, circleArea / 0.42 / width + 2 * insetY));
+    const poolHeight = Math.max(1, height ?? derivedHeight);
+    const innerW = Math.max(1, width - 2 * insetX);
+    const innerH = Math.max(1, poolHeight - 2 * insetY);
+    const radii = fitRadiiToBox(baseRadii, innerW, innerH, {
+      density: 0.5,
+      labelArea: 0,
+      minRadius: 6
+    });
+
+    // Resolve placement per bubble (outside-labelled bubbles want the
+    // perimeter so their labels reach the open band along the walls).
+    const placements = data.map((d, i) => {
+      const pref = d.labelPlacement ?? labelPlacement;
+      const diameter = (radii[i] ?? 0) * 2;
+      if (pref === 'auto') return diameter >= autoInsideMinSize ? 'inside' : 'outside';
+      return pref;
+    });
+    const perimeter = placements.map(p => p === 'outside');
+    const nodes = simulateCluster(radii, {
+      width,
+      height: poolHeight,
+      gap,
+      iterations,
+      insetX,
+      insetY,
+      perimeter
+    });
+    const labelBoxes = data.map((d, i) => {
+      if (placements[i] !== 'outside') return null;
+      const v = toText(d.display, String(d.value));
+      const l = toText(d.label);
+      if (!v && !l) return null;
+      return labelEstimates[i] ?? estimateLabelBox(v, l);
+    });
+    const directions = chooseLabelDirections(nodes, labelBoxes, {
+      width,
+      height: poolHeight,
+      gap: resolvedLabelGap
+    });
+    const bubbles = data.map((datum, index) => {
+      const node = nodes[index];
+      const r = radii[index] ?? 0;
+      return {
+        datum,
+        index,
+        appearance: datum.appearance ?? appearanceCycle[index % appearanceCycle.length] ?? 'Primary',
+        placement: placements[index] ?? 'inside',
+        direction: directions[index] ?? 'bottom',
+        left: node.x - r,
+        top: node.y - r,
+        size: r * 2
+      };
+    });
+    return {
+      bubbles,
+      poolHeight
+    };
+  }, [data, width, height, minBubbleSize, maxBubbleSize, gap, resolvedLabelGap, labelPlacement, autoInsideMinSize, appearanceCycle, iterations]);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, {
+      height: layout.poolHeight
+    }, style],
+    onLayout: handleLayout,
+    accessibilityRole: "image",
+    accessibilityLabel: accessibilityLabel,
+    children: layout.bubbles.map(b => /*#__PURE__*/_jsx(View, {
+      style: [styles.bubble, {
+        left: b.left,
+        top: b.top
+      }],
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(ClusterBubble, {
+        size: b.size,
+        value: b.datum.display ?? String(b.datum.value),
+        label: b.datum.label,
+        appearance: b.appearance,
+        labelPlacement: b.placement,
+        labelDirection: b.direction,
+        labelGap: resolvedLabelGap,
+        autoInsideMinSize: autoInsideMinSize,
+        modes: modes,
+        ...(b.datum.color ? {
+          color: b.datum.color
+        } : null),
+        ...(b.datum.accessibilityLabel ? {
+          accessibilityLabel: b.datum.accessibilityLabel
+        } : null),
+        ...(onBubblePress ? {
+          onPress: () => onBubblePress(b.datum, b.index)
+        } : null)
+      })
+    }, b.datum.id ?? b.index))
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  bubble: {
+    position: 'absolute'
+  }
+});
+export default BubbleChart;