jfs-components 0.0.84 → 0.0.85

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

@@ -0,0 +1,370 @@
+"use strict";
+
+/**
+ * Dependency-free layout math for `BubbleChart`.
+ *
+ * Instead of a rigid ring, bubbles are arranged with a small **force
+ * simulation** — think of bubbles floating in a rectangular pool: each one
+ * repels the others (collision), a gentle pull keeps the cluster balanced
+ * (gravity), and the pool walls confine everything inside the container box so
+ * nothing overflows. Radii are first `sqrt`-scaled from the data magnitudes and
+ * down-scaled to fit the available area. Finally, for bubbles whose text must
+ * sit *outside* the circle, a direction chooser picks the side (top / bottom /
+ * left / right) with the most free space so labels avoid further collisions.
+ */
+
+// --- Radius scaling --------------------------------------------------------
+
+/**
+ * Map magnitudes to radii so a bubble's *area* scales with its value
+ * (`sqrt`-encoding), clamped into `[minRadius, maxRadius]`.
+ */
+export function scaleRadii(magnitudes, minRadius, maxRadius) {
+  if (magnitudes.length === 0) return [];
+  const safe = magnitudes.map(m => Number.isFinite(m) && m > 0 ? m : 0);
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const m of safe) {
+    if (m < lo) lo = m;
+    if (m > hi) hi = m;
+  }
+  if (!Number.isFinite(lo) || !Number.isFinite(hi) || hi <= 0 || hi === lo) {
+    return safe.map(() => maxRadius);
+  }
+  const sqrtLo = Math.sqrt(lo);
+  const sqrtHi = Math.sqrt(hi);
+  const span = sqrtHi - sqrtLo;
+  return safe.map(m => {
+    if (m <= 0) return minRadius;
+    const t = span > 0 ? (Math.sqrt(m) - sqrtLo) / span : 1;
+    return minRadius + t * (maxRadius - minRadius);
+  });
+}
+
+/**
+ * Uniformly shrink radii (preserving relative proportions) so the bubbles plus
+ * some breathing room and label allowance fit inside the `width × height` box.
+ * Returns the radii unchanged when they already fit.
+ */
+export function fitRadiiToBox(radii, width, height, options = {}) {
+  const {
+    density = 0.58,
+    labelArea = 0,
+    minRadius = 6
+  } = options;
+  if (radii.length === 0 || width <= 0 || height <= 0) return radii;
+  let circleArea = 0;
+  for (const r of radii) circleArea += Math.PI * r * r;
+  const required = circleArea / density + labelArea;
+  const available = width * height;
+  if (required <= available) return radii;
+
+  // Area scales with the square of the linear factor; ignore the (non-scaling)
+  // label term in the factor for simplicity — the sim's hard clamp covers the
+  // small remainder.
+  const factor = Math.sqrt(Math.max(0.05, (available - labelArea) / circleArea) * density);
+  return radii.map(r => Math.max(minRadius, r * Math.min(1, factor)));
+}
+
+// --- Force simulation ------------------------------------------------------
+
+/** Tiny deterministic PRNG so layouts are reproducible across renders. */
+function mulberry32(seed) {
+  let s = seed >>> 0;
+  return () => {
+    s = s + 0x6d2b79f5 >>> 0;
+    let t = s;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * Arrange circles inside a `width × height` box with a collision + gravity
+ * relaxation. Bubbles never overlap (separated by at least `gap`) and are hard-
+ * clamped within the walls so the cluster stays inside the container.
+ */
+export function simulateCluster(radii, options) {
+  const {
+    width,
+    height,
+    gap = 8,
+    iterations = 500,
+    gravity = 0.02,
+    insetX = 0,
+    insetY = 0,
+    perimeter
+  } = options;
+  const n = radii.length;
+  const nodes = radii.map(r => ({
+    x: 0,
+    y: 0,
+    r
+  }));
+  if (n === 0) return nodes;
+  const cx = width / 2;
+  const cy = height / 2;
+  const rand = mulberry32(0x9e3779b9 ^ n * 2654435761);
+
+  // Seed positions on a phyllotaxis spiral so the relaxation starts spread out.
+  const spread = Math.min(width - 2 * insetX, height - 2 * insetY) * 0.45;
+  for (let i = 0; i < n; i++) {
+    const nd = nodes[i];
+    const a = i * 2.399963229728653; // golden angle
+    const rad = Math.sqrt((i + 0.5) / n) * spread;
+    nd.x = cx + Math.cos(a) * rad + (rand() - 0.5) * 2;
+    nd.y = cy + Math.sin(a) * rad + (rand() - 0.5) * 2;
+  }
+  const margin = gap / 2;
+  let maxR = 0;
+  for (const r of radii) if (r > maxR) maxR = r;
+  maxR = maxR || 1;
+  const clamp = () => {
+    for (const nd of nodes) {
+      const minX = insetX + nd.r + margin;
+      const maxX = Math.max(minX, width - insetX - nd.r - margin);
+      const minY = insetY + nd.r + margin;
+      const maxY = Math.max(minY, height - insetY - nd.r - margin);
+      nd.x = Math.min(maxX, Math.max(minX, nd.x));
+      nd.y = Math.min(maxY, Math.max(minY, nd.y));
+    }
+  };
+  for (let it = 0; it < iterations; it++) {
+    // Big bubbles are pulled to the center; "perimeter" bubbles (the small,
+    // outside-labelled ones) are pulled toward the wall ring so their labels
+    // land in the open band — like small bubbles floating around a big one.
+    for (let i = 0; i < n; i++) {
+      const nd = nodes[i];
+      if (perimeter && perimeter[i]) {
+        const dx = nd.x - cx;
+        const dy = nd.y - cy;
+        const d = Math.sqrt(dx * dx + dy * dy) || 1;
+        const targetD = Math.max(0, Math.min(width / 2 - insetX - nd.r - margin, height / 2 - insetY - nd.r - margin));
+        const f = (targetD - d) / d * gravity * 2;
+        nd.x += dx * f;
+        nd.y += dy * f;
+      } else {
+        const ratio = nd.r / maxR;
+        const g = gravity * (0.4 + 0.6 * ratio);
+        nd.x += (cx - nd.x) * g;
+        nd.y += (cy - nd.y) * g;
+      }
+    }
+
+    // Collision: push overlapping pairs apart. Two passes per tick keeps it
+    // stable for dense clusters. Smaller bubbles move more than bigger ones.
+    for (let pass = 0; pass < 2; pass++) {
+      for (let i = 0; i < n; i++) {
+        for (let j = i + 1; j < n; j++) {
+          const a = nodes[i];
+          const b = nodes[j];
+          let dx = b.x - a.x;
+          let dy = b.y - a.y;
+          let dist = Math.sqrt(dx * dx + dy * dy);
+          const min = a.r + b.r + gap;
+          if (dist < min) {
+            if (dist < 1e-6) {
+              dx = rand() - 0.5 || 0.01;
+              dy = rand() - 0.5 || 0.01;
+              dist = Math.sqrt(dx * dx + dy * dy);
+            }
+            const overlap = min - dist;
+            const ux = dx / dist;
+            const uy = dy / dist;
+            const total = a.r + b.r;
+            const aShare = b.r / total;
+            const bShare = a.r / total;
+            a.x -= ux * overlap * aShare;
+            a.y -= uy * overlap * aShare;
+            b.x += ux * overlap * bShare;
+            b.y += uy * overlap * bShare;
+          }
+        }
+      }
+      clamp();
+    }
+  }
+  return nodes;
+}
+
+// --- Outside-label sizing + direction --------------------------------------
+
+/**
+ * Roughly estimate the rendered size of an outside label block (a bold value
+ * line stacked over a lighter caption line), used purely for layout scoring.
+ */
+export function estimateLabelBox(value, label, options = {}) {
+  const {
+    valueFontSize = 24,
+    labelFontSize = 14
+  } = options;
+  // Slightly over-estimate width so the direction chooser reserves enough
+  // room and never picks a side that would clip the (wider) rendered text.
+  const valueW = value.length * valueFontSize * 0.68;
+  const labelW = label.length * labelFontSize * 0.6;
+  const valueH = value ? valueFontSize * 1.18 : 0;
+  const labelH = label ? labelFontSize * 1.32 : 0;
+  const gapBetween = value && label ? 2 : 0;
+  return {
+    w: Math.max(valueW, labelW, 1),
+    h: Math.max(valueH + labelH + gapBetween, 1)
+  };
+}
+const DIRECTIONS = ['bottom', 'right', 'left', 'top'];
+function directionVector(dir) {
+  switch (dir) {
+    case 'top':
+      return {
+        x: 0,
+        y: -1
+      };
+    case 'bottom':
+      return {
+        x: 0,
+        y: 1
+      };
+    case 'left':
+      return {
+        x: -1,
+        y: 0
+      };
+    case 'right':
+      return {
+        x: 1,
+        y: 0
+      };
+  }
+}
+
+/** The rect an outside label occupies for a given direction (at `r + gap`). */
+function labelRect(node, box, dir, gap) {
+  const {
+    x: cx,
+    y: cy,
+    r
+  } = node;
+  switch (dir) {
+    case 'bottom':
+      return {
+        x: cx - box.w / 2,
+        y: cy + r + gap,
+        w: box.w,
+        h: box.h
+      };
+    case 'top':
+      return {
+        x: cx - box.w / 2,
+        y: cy - r - gap - box.h,
+        w: box.w,
+        h: box.h
+      };
+    case 'right':
+      return {
+        x: cx + r + gap,
+        y: cy - box.h / 2,
+        w: box.w,
+        h: box.h
+      };
+    case 'left':
+      return {
+        x: cx - r - gap - box.w,
+        y: cy - box.h / 2,
+        w: box.w,
+        h: box.h
+      };
+  }
+}
+function rectOverlapArea(a, b) {
+  const ox = Math.max(0, Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x));
+  const oy = Math.max(0, Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y));
+  return ox * oy;
+}
+
+/** Approximate a circle as its bounding square for cheap rect/circle overlap. */
+function rectCircleOverlap(rect, node) {
+  const circleRect = {
+    x: node.x - node.r,
+    y: node.y - node.r,
+    w: node.r * 2,
+    h: node.r * 2
+  };
+  return rectOverlapArea(rect, circleRect);
+}
+
+/**
+ * For each node that has an outside label (`labels[i]` non-null), pick the
+ * direction whose label rect best avoids the other circles, already-placed
+ * labels, and the container walls — biased to point *outward* (away from the
+ * cluster centroid, toward free space).
+ *
+ * Returns a direction per node, or `null` for nodes without an outside label.
+ */
+export function chooseLabelDirections(nodes, labels, options) {
+  const {
+    width,
+    height,
+    gap = 8
+  } = options;
+  const result = nodes.map(() => null);
+  if (nodes.length === 0) return result;
+  let gx = 0;
+  let gy = 0;
+  for (const nd of nodes) {
+    gx += nd.x;
+    gy += nd.y;
+  }
+  gx /= nodes.length;
+  gy /= nodes.length;
+
+  // Place outer bubbles first — they sit near free space and deserve the best slot.
+  const order = nodes.map((_, i) => i).filter(i => labels[i]).sort((a, b) => {
+    const na = nodes[a];
+    const nb = nodes[b];
+    const da = (na.x - gx) ** 2 + (na.y - gy) ** 2;
+    const db = (nb.x - gx) ** 2 + (nb.y - gy) ** 2;
+    return db - da;
+  });
+  const placed = [];
+  for (const i of order) {
+    const node = nodes[i];
+    const box = labels[i];
+    const ox = node.x - gx;
+    const oy = node.y - gy;
+    const outLen = Math.hypot(ox, oy) || 1;
+    let best = 'bottom';
+    let bestScore = Infinity;
+    for (const dir of DIRECTIONS) {
+      const rect = labelRect(node, box, dir, gap);
+      let score = 0;
+
+      // Out-of-bounds is forbidden whenever any in-bounds option exists:
+      // a clipped label is the worst possible outcome. A large fixed
+      // penalty plus a proportional term enforces this.
+      const outX = Math.max(0, -rect.x) + Math.max(0, rect.x + rect.w - width);
+      const outY = Math.max(0, -rect.y) + Math.max(0, rect.y + rect.h - height);
+      if (outX > 0 || outY > 0) score += 1_000_000 + (outX + outY) * 150;
+
+      // Overlap with other circles.
+      for (let k = 0; k < nodes.length; k++) {
+        if (k === i) continue;
+        score += rectCircleOverlap(rect, nodes[k]);
+      }
+
+      // Overlap with previously-placed labels (penalized extra to spread).
+      for (const p of placed) score += rectOverlapArea(rect, p) * 2;
+
+      // Mild preference for pointing outward (toward open space).
+      const dv = directionVector(dir);
+      const align = (dv.x * ox + dv.y * oy) / outLen; // -1..1
+      score += (1 - align) * 15;
+      if (score < bestScore) {
+        bestScore = score;
+        best = dir;
+      }
+    }
+    result[i] = best;
+    placed.push(labelRect(node, box, best, gap));
+  }
+  return result;
+}

package/lib/module/components/ClusterBubble/ClusterBubble.js

@@ -0,0 +1,267 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+
+/** Where the value/label text sits relative to the circle. */
+
+/** Which side of the circle an *outside* label is anchored to. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_FILL = '#5d00b5';
+
+/** Parse `#rgb`, `#rrggbb`, `rgb()` / `rgba()` into 0–255 channels. */
+function parseColor(input) {
+  if (typeof input !== 'string') return null;
+  const value = input.trim();
+  if (value[0] === '#') {
+    let hex = value.slice(1);
+    if (hex.length === 3) {
+      hex = hex.split('').map(ch => ch + ch).join('');
+    }
+    if (hex.length >= 6) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      if ([r, g, b].every(n => Number.isFinite(n))) return {
+        r,
+        g,
+        b
+      };
+    }
+    return null;
+  }
+  const match = value.match(/rgba?\(([^)]+)\)/i);
+  if (match) {
+    const parts = match[1].split(',').map(p => parseFloat(p));
+    if (parts.length >= 3 && parts.slice(0, 3).every(n => Number.isFinite(n))) {
+      return {
+        r: parts[0],
+        g: parts[1],
+        b: parts[2]
+      };
+    }
+  }
+  return null;
+}
+
+/** Pick a legible foreground (near-black or white) for a given background. */
+function readableTextColor(background) {
+  const rgb = parseColor(background);
+  if (!rgb) return '#ffffff';
+  // Perceived luminance (ITU-R BT.601).
+  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+  return luminance > 0.6 ? '#0f0d0a' : '#ffffff';
+}
+
+/**
+ * `ClusterBubble` is the atomic circle that composes a `BubbleChart`. It renders
+ * a single token-colored disc with a bold `value` and a secondary `label`. The
+ * text can sit inside the circle or anchor just outside its edge on any side
+ * (`labelDirection`) at a precise `labelGap` distance — so consumers (or the
+ * chart) can steer labels toward free space. The inside text color adapts to
+ * the fill for legibility. It is fully usable standalone.
+ *
+ * @component
+ */
+function ClusterBubble({
+  value,
+  label,
+  size = 120,
+  appearance = 'Primary',
+  color,
+  labelPlacement = 'auto',
+  labelDirection = 'bottom',
+  labelGap = 8,
+  autoInsideMinSize = 88,
+  insideTextColor,
+  onPress,
+  valueStyle,
+  labelStyle,
+  circleStyle,
+  style,
+  modes: propModes = EMPTY_MODES,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+
+  // Emphasis is read from the `Emphasis / DataViz` mode (defaulting to the
+  // token's own default) rather than a dedicated prop.
+  const fill = useMemo(() => {
+    if (color) return color;
+    return getVariableByName('dataViz/bg', {
+      ...modes,
+      'Appearance / DataViz': appearance
+    }) ?? DEFAULT_FILL;
+  }, [color, modes, appearance]);
+  const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType';
+  const outsideTextColor = getVariableByName('text/foreground', modes) ?? '#0f0d0a';
+  const placement = labelPlacement === 'auto' ? size >= autoInsideMinSize ? 'inside' : 'outside' : labelPlacement;
+
+  // Measure the outside label so it can be anchored precisely on any side
+  // without guessing its dimensions.
+  const [labelSize, setLabelSize] = useState(null);
+  const handleLabelLayout = e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setLabelSize(prev => prev && Math.abs(prev.w - width) < 0.5 && Math.abs(prev.h - height) < 0.5 ? prev : {
+      w: width,
+      h: height
+    });
+  };
+
+  // Default typography scales with the bubble when inside (so it fits the
+  // disc); fixed comfortable sizes when anchored outside.
+  const valueFontSize = placement === 'inside' ? Math.round(Math.min(48, Math.max(13, size * 0.17))) : 24;
+  const labelFontSize = placement === 'inside' ? Math.round(Math.min(18, Math.max(10, size * 0.085))) : 14;
+  const textColor = placement === 'inside' ? insideTextColor ?? readableTextColor(fill) : outsideTextColor;
+  const renderText = (node, baseStyle, override) => {
+    if (node === undefined || node === null || node === false) return null;
+    if (typeof node === 'string' || typeof node === 'number') {
+      return /*#__PURE__*/_jsx(Text, {
+        style: [baseStyle, override],
+        numberOfLines: 2,
+        children: node
+      });
+    }
+    return node;
+  };
+  const valueNode = renderText(value, {
+    color: textColor,
+    fontFamily,
+    fontSize: valueFontSize,
+    lineHeight: Math.round(valueFontSize * 1.15),
+    fontWeight: '700',
+    textAlign: 'center',
+    letterSpacing: -0.5
+  }, valueStyle);
+  const labelNode = renderText(label, {
+    color: textColor,
+    fontFamily,
+    fontSize: labelFontSize,
+    lineHeight: Math.round(labelFontSize * 1.3),
+    fontWeight: '400',
+    textAlign: 'center',
+    letterSpacing: -0.2
+  }, labelStyle);
+  const hasText = !!valueNode || !!labelNode;
+  const textBlock = hasText ? /*#__PURE__*/_jsxs(View, {
+    style: styles.textBlock,
+    children: [valueNode, labelNode]
+  }) : null;
+  const derivedA11y = [value, label].filter(v => typeof v === 'string' || typeof v === 'number').join(', ');
+  const a11yLabel = accessibilityLabel ?? (derivedA11y || undefined);
+  const circle = /*#__PURE__*/_jsx(View, {
+    style: [styles.circle, {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: fill
+    }, circleStyle],
+    children: placement === 'inside' ? textBlock : null
+  });
+  let content;
+  if (placement === 'inside' || !textBlock) {
+    content = /*#__PURE__*/_jsx(View, {
+      style: [styles.inlineContainer, style],
+      children: circle
+    });
+  } else {
+    // Anchor the label exactly `labelGap` beyond the radius on the chosen
+    // side. Hidden until measured to avoid a positioning flash.
+    const offset = labelOffset(labelDirection, size, labelGap, labelSize);
+    content = /*#__PURE__*/_jsxs(View, {
+      style: [{
+        width: size,
+        height: size
+      }, style],
+      children: [circle, /*#__PURE__*/_jsx(View, {
+        onLayout: handleLabelLayout,
+        style: [styles.outsideLabel, {
+          left: offset.left,
+          top: offset.top,
+          opacity: labelSize ? 1 : 0
+        }],
+        pointerEvents: "none",
+        children: textBlock
+      })]
+    });
+  }
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      style: ({
+        pressed
+      }) => pressed ? styles.pressed : undefined,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "image",
+    accessibilityLabel: a11yLabel,
+    children: content
+  });
+}
+
+/** Compute the absolute `left/top` of the outside label box for a direction. */
+function labelOffset(direction, size, gap, labelSize) {
+  const center = size / 2;
+  const w = labelSize?.w ?? 0;
+  const h = labelSize?.h ?? 0;
+  switch (direction) {
+    case 'top':
+      return {
+        left: center - w / 2,
+        top: -(gap + h)
+      };
+    case 'bottom':
+      return {
+        left: center - w / 2,
+        top: size + gap
+      };
+    case 'left':
+      return {
+        left: -(gap + w),
+        top: center - h / 2
+      };
+    case 'right':
+      return {
+        left: size + gap,
+        top: center - h / 2
+      };
+  }
+}
+const styles = StyleSheet.create({
+  inlineContainer: {
+    alignItems: 'center'
+  },
+  circle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  textBlock: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8
+  },
+  outsideLabel: {
+    position: 'absolute'
+  },
+  pressed: {
+    opacity: 0.85
+  }
+});
+export default ClusterBubble;

package/lib/module/components/MetricLegendItem/MetricLegendItem.js

@@ -17,6 +17,7 @@ function MetricLegendItem({
   label = 'Current (4 months)',
   value,
   indicatorColor,
+  indicatorShape = 'dot',
   modes = EMPTY_MODES,
   style,
   indicatorStyle,
@@ -49,7 +50,12 @@ function MetricLegendItem({
     }, style],
     accessibilityRole: "text",
     children: [/*#__PURE__*/_jsx(View, {
-      style: [{
+      style: [indicatorShape === 'line' ? {
+        width: indicatorSize * 2,
+        height: Math.max(2, Math.round(indicatorSize / 4)),
+        borderRadius: indicatorRadius,
+        backgroundColor: indicatorBg
+      } : {
         width: indicatorSize,
         height: indicatorSize,
         borderRadius: indicatorRadius,

package/lib/module/components/index.js

@@ -102,6 +102,9 @@ export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as RechargeCard } from './RechargeCard/RechargeCard';
 export { default as SavingsGoalSummary } from './SavingsGoalSummary/SavingsGoalSummary';
 export { default as DonutChart, DonutChartSegment } from './DonutChart/DonutChart';
+export { default as AreaLineChart, useChart } from './AreaLineChart/AreaLineChart';
+export { default as ClusterBubble } from './ClusterBubble/ClusterBubble';
+export { default as BubbleChart } from './BubbleChart/BubbleChart';
 export { default as DonutChartSummary } from './DonutChartSummary/DonutChartSummary';
 export { default as RangeTrack } from './RangeTrack/RangeTrack';
 export { default as SegmentedTrack, SegmentedTrackSegment } from './SegmentedTrack/SegmentedTrack';