jfs-components 0.0.85 → 0.0.95

package/src/components/AllocationComparisonChart/AllocationComparisonChart.tsx

@@ -0,0 +1,450 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import Svg, { Line } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+
+/**
+ * One vertical pill in the {@link AllocationComparisonChartProps.data} array.
+ *
+ * Each segment renders a single bar whose **height encodes `value`** (the
+ * "current" reading) and, when supplied, a **`baseline`** overlay drawn from
+ * the bottom up with a dashed marker line (the "recommended" reading). Both
+ * are measured against the same shared scale so bars and baselines are
+ * directly comparable across segments.
+ */
+export type AllocationSegment = {
+    /** Stable React key (falls back to the array index). */
+    key?: React.Key
+    /** Caption rendered under the bar — e.g. `"Small & Mid"`. */
+    label: React.ReactNode
+    /**
+     * Primary value driving the bar's height (the "current" reading). Scaled
+     * against {@link AllocationComparisonChartProps.max}.
+     */
+    value: number
+    /**
+     * Optional comparison value (the "recommended" reading). When provided, a
+     * filled overlay is drawn from the bottom of the bar up to this level.
+     * Omit to render a plain bar.
+     */
+    baseline?: number
+    /**
+     * Whether to draw the dashed reference line + value label at the top of the
+     * `baseline` overlay. Defaults to `true` **only for the first segment that
+     * has a `baseline`** and `false` for the rest, so the marker stays a
+     * focused callout rather than repeating on every bar. Set explicitly to
+     * force it on/off per segment. Has no effect without a `baseline`.
+     */
+    showMarker?: boolean
+    /**
+     * Text shown above the bar. Defaults to `formatValue(value)`. Pass `null`
+     * to hide it.
+     */
+    valueLabel?: React.ReactNode
+    /**
+     * Text shown beside the dashed baseline marker. Defaults to
+     * `formatValue(baseline)`. Pass `null` to hide just the marker label while
+     * keeping the dashed line.
+     */
+    baselineLabel?: React.ReactNode
+    /** Hard-override the bar (current) fill color. */
+    color?: string
+    /** Hard-override the baseline (recommended) overlay color. */
+    baselineColor?: string
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string
+}
+
+export type AllocationComparisonChartProps = {
+    /**
+     * The segments to plot, left → right. Each carries its `value`, optional
+     * `baseline` and its `label`, so a bar can never drift from its caption.
+     */
+    data?: AllocationSegment[]
+    /**
+     * Maximum value used to scale every bar **and** baseline. Defaults to the
+     * largest `value`/`baseline` across `data`. Pass an explicit `max` (e.g.
+     * `100` for percentages) for a fixed scale.
+     */
+    max?: number
+    /**
+     * Height in px of the bar area — i.e. the height of a bar whose value
+     * equals `max`. Excludes the value/caption label rows. Default: `154`.
+     */
+    height?: number
+    /** Width of each pill bar in px. Default: the `segmentIndicator/track/width` token (`28`). */
+    barWidth?: number
+    /** Show the legend row above the chart. Default: `true`. */
+    showLegend?: boolean
+    /** Legend label for the bar (current) series. Default: `"Current"`. */
+    valueLegendLabel?: React.ReactNode
+    /**
+     * Legend label for the baseline (recommended) series. Default:
+     * `"Recommended"`. The baseline legend item only appears when at least one
+     * segment defines a `baseline`.
+     */
+    baselineLegendLabel?: React.ReactNode
+    /**
+     * Formats numeric `value`/`baseline` into the default labels. Default:
+     * `(v) => \`${v}%\``.
+     */
+    formatValue?: (value: number) => string
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /** Style applied to the bars row. */
+    chartStyle?: StyleProp<ViewStyle>
+    /** Style applied to the legend row. */
+    legendStyle?: StyleProp<ViewStyle>
+    /** Accessibility label for the whole chart. */
+    accessibilityLabel?: string
+}
+
+const DEFAULT_DATA: AllocationSegment[] = [
+    { label: 'Small & Mid', value: 65, baseline: 35 },
+    { label: 'Large', value: 25 },
+    { label: 'Others', value: 10 },
+]
+
+const toNumber = (value: unknown, fallback: number): number => {
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : fallback
+    }
+    if (typeof value === 'string') {
+        const parsed = Number(value)
+        return Number.isFinite(parsed) ? parsed : fallback
+    }
+    return fallback
+}
+
+const toFontWeight = (
+    value: unknown,
+    fallback: TextStyle['fontWeight']
+): TextStyle['fontWeight'] => {
+    if (typeof value === 'number') {
+        return String(value) as TextStyle['fontWeight']
+    }
+    if (typeof value === 'string') {
+        return value as TextStyle['fontWeight']
+    }
+    return fallback
+}
+
+const isShown = (node: React.ReactNode): boolean =>
+    node !== undefined && node !== null && node !== false
+
+type SegmentTheme = {
+    barWidth: number
+    pillRadius: number
+    gap: number
+    currentColor: string
+    baselineColor: string
+    lineColor: string
+    lineSize: number
+    labelStyle: TextStyle
+}
+
+type SegmentBarProps = {
+    segment: AllocationSegment
+    barHeightPx: number
+    baselineHeightPx: number | null
+    baselineLabel: React.ReactNode
+    showMarker: boolean
+    theme: SegmentTheme
+}
+
+/**
+ * Internal: one vertical pill column (the Figma "Segment Indicator"). Not
+ * exported — the ergonomic public unit is the chart driven by `data`. The
+ * `segmentIndicator/*` token names are mirrored here so design ↔ code token
+ * alignment is preserved.
+ */
+function SegmentBar({
+    segment,
+    barHeightPx,
+    baselineHeightPx,
+    baselineLabel,
+    showMarker,
+    theme,
+}: SegmentBarProps) {
+    const { barWidth, pillRadius, gap, currentColor, baselineColor, lineColor, lineSize, labelStyle } =
+        theme
+
+    const fillColor = segment.color ?? currentColor
+    const overlayColor = segment.baselineColor ?? baselineColor
+    const showValueLabel = isShown(segment.valueLabel)
+
+    const hasBaseline = baselineHeightPx !== null && baselineHeightPx > 0
+    const overlayHeight = hasBaseline ? Math.min(baselineHeightPx as number, barHeightPx) : 0
+    const overlayRadius = Math.min(pillRadius, barWidth / 2, overlayHeight / 2)
+
+    return (
+        <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'flex-end', gap }}
+            accessibilityLabel={segment.accessibilityLabel}
+        >
+            {showValueLabel ? (
+                <Text numberOfLines={1} style={labelStyle}>
+                    {segment.valueLabel}
+                </Text>
+            ) : null}
+
+            <View
+                style={{
+                    width: barWidth,
+                    height: Math.max(barHeightPx, 1),
+                    borderRadius: pillRadius,
+                    backgroundColor: fillColor,
+                    position: 'relative',
+                }}
+            >
+                {hasBaseline ? (
+                    <>
+                        <View
+                            style={{
+                                position: 'absolute',
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                height: overlayHeight,
+                                backgroundColor: overlayColor,
+                                borderBottomLeftRadius: overlayRadius,
+                                borderBottomRightRadius: overlayRadius,
+                            }}
+                        />
+                        {showMarker ? (
+                            <View
+                                style={{
+                                    position: 'absolute',
+                                    left: 0,
+                                    bottom: overlayHeight,
+                                    height: 0,
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                }}
+                                pointerEvents="none"
+                            >
+                                <Svg width={barWidth} height={Math.max(lineSize, 1)}>
+                                    <Line
+                                        x1={0}
+                                        y1={Math.max(lineSize, 1) / 2}
+                                        x2={barWidth}
+                                        y2={Math.max(lineSize, 1) / 2}
+                                        stroke={lineColor}
+                                        strokeWidth={lineSize}
+                                        strokeDasharray="2 2"
+                                    />
+                                </Svg>
+                                {isShown(baselineLabel) ? (
+                                    <Text numberOfLines={1} style={[labelStyle, { marginLeft: 6 }]}>
+                                        {baselineLabel}
+                                    </Text>
+                                ) : null}
+                            </View>
+                        ) : null}
+                    </>
+                ) : null}
+            </View>
+
+            <Text numberOfLines={1} style={labelStyle}>
+                {segment.label}
+            </Text>
+        </View>
+    )
+}
+
+/**
+ * `AllocationComparisonChart` plots a row of vertical pill bars that compare a
+ * **current** reading (each bar's height) against an optional **recommended**
+ * baseline (a filled overlay drawn from the bottom up, marked with a dashed
+ * line). Every bar and baseline shares a single scale, so heights are directly
+ * comparable across segments — no axes required.
+ *
+ * The chart is driven entirely by the `data` array: each entry pairs a
+ * `value`, an optional `baseline` and its `label`, so a bar can never drift
+ * out of sync with its caption or its baseline marker.
+ *
+ * Colors, fonts, spacing and the pill radius resolve from the Figma
+ * `segmentIndicator/*`, `metricLegendItem/*` and `allocationComparisonChart/*`
+ * tokens via the `modes` prop.
+ *
+ * @component
+ */
+function AllocationComparisonChart({
+    data = DEFAULT_DATA,
+    max,
+    height = 154,
+    barWidth,
+    showLegend = true,
+    valueLegendLabel = 'Current',
+    baselineLegendLabel = 'Recommended',
+    formatValue = (value: number) => `${value}%`,
+    modes: propModes = EMPTY_MODES,
+    style,
+    chartStyle,
+    legendStyle,
+    accessibilityLabel,
+}: AllocationComparisonChartProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = React.useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes]
+    )
+
+    const trackWidth = toNumber(getVariableByName('segmentIndicator/track/width', modes), 28)
+    const resolvedBarWidth = barWidth ?? trackWidth
+    const radiusToken = toNumber(getVariableByName('segmentIndicator/indicator/radius', modes), 99999)
+    const pillRadius = Math.min(radiusToken, resolvedBarWidth / 2)
+    const gap = toNumber(getVariableByName('segmentIndicator/gap', modes), 4)
+    const chartGap = toNumber(getVariableByName('allocationComparisonChart/gap', modes), 8)
+
+    const currentColor =
+        (getVariableByName('segmentIndicator/indicator/background', modes) as string | null) ??
+        '#5d00b5'
+    const baselineColor =
+        (getVariableByName('segmentIndicator/indicator/foreground', modes) as string | null) ??
+        '#b84fbd'
+    const lineColor =
+        (getVariableByName('segmentIndicator/indicator/line/color', modes) as string | null) ??
+        '#ffffff'
+    const lineSize = toNumber(getVariableByName('segmentIndicator/indicator/line/size', modes), 1)
+
+    const foreground =
+        (getVariableByName('segmentIndicator/foreground', modes) as string | null) ?? '#0c0d10'
+    const fontFamily =
+        (getVariableByName('segmentIndicator/fontFamily', modes) as string | null) ?? 'JioType Var'
+    const fontSize = toNumber(getVariableByName('segmentIndicator/fontSize', modes), 12)
+    const lineHeight = toNumber(getVariableByName('segmentIndicator/lineHeight', modes), 12)
+    const fontWeight = toFontWeight(getVariableByName('segmentIndicator/fontWeight', modes), '400')
+
+    const labelStyle: TextStyle = {
+        color: foreground,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        textAlign: 'center',
+    }
+
+    const computedMax =
+        max ??
+        data.reduce(
+            (acc, seg) => Math.max(acc, seg.value, seg.baseline ?? 0),
+            0
+        )
+    const safeMax = computedMax > 0 ? computedMax : 1
+
+    const firstBaselineIndex = data.findIndex(
+        (seg) => typeof seg.baseline === 'number'
+    )
+    const hasAnyBaseline = firstBaselineIndex !== -1
+
+    const theme: SegmentTheme = {
+        barWidth: resolvedBarWidth,
+        pillRadius,
+        gap,
+        currentColor,
+        baselineColor,
+        lineColor,
+        lineSize,
+        labelStyle,
+    }
+
+    const defaultAccessibilityLabel =
+        accessibilityLabel ??
+        `Allocation comparison of ${data.length} segment${data.length === 1 ? '' : 's'}: ` +
+            data
+                .map((seg) => {
+                    const label = typeof seg.label === 'string' ? seg.label : 'segment'
+                    const base =
+                        typeof seg.baseline === 'number'
+                            ? `, recommended ${seg.baseline}`
+                            : ''
+                    return `${label} ${seg.value}${base}`
+                })
+                .join('; ')
+
+    return (
+        <View style={[{ width: '100%' }, style]} accessibilityLabel={defaultAccessibilityLabel}>
+            {showLegend ? (
+                <View
+                    style={[
+                        { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: chartGap },
+                        legendStyle,
+                    ]}
+                >
+                    <MetricLegendItem
+                        label={valueLegendLabel}
+                        indicatorColor={currentColor}
+                        modes={modes}
+                        style={{ flexGrow: 0, flexShrink: 1 }}
+                    />
+                    {hasAnyBaseline ? (
+                        <MetricLegendItem
+                            label={baselineLegendLabel}
+                            indicatorColor={baselineColor}
+                            modes={modes}
+                            style={{ flexGrow: 0, flexShrink: 1 }}
+                        />
+                    ) : null}
+                </View>
+            ) : null}
+
+            <View
+                accessibilityRole="image"
+                style={[
+                    { flexDirection: 'row', alignItems: 'flex-end', gap: 8, width: '100%' },
+                    chartStyle,
+                ]}
+            >
+                {data.map((segment, index) => {
+                    const ratio = Math.max(0, Math.min(1, segment.value / safeMax))
+                    const barHeightPx = Math.max(0, height * ratio)
+                    const baselineHeightPx =
+                        typeof segment.baseline === 'number'
+                            ? Math.max(0, Math.min(1, segment.baseline / safeMax)) * height
+                            : null
+                    const baselineLabel =
+                        segment.baselineLabel === undefined
+                            ? typeof segment.baseline === 'number'
+                                ? formatValue(segment.baseline)
+                                : undefined
+                            : segment.baselineLabel
+                    const resolvedSegment: AllocationSegment = {
+                        ...segment,
+                        valueLabel:
+                            segment.valueLabel === undefined
+                                ? formatValue(segment.value)
+                                : segment.valueLabel,
+                    }
+                    const showMarker =
+                        segment.showMarker ?? index === firstBaselineIndex
+
+                    return (
+                        <SegmentBar
+                            key={segment.key ?? `segment-${index}`}
+                            segment={resolvedSegment}
+                            barHeightPx={barHeightPx}
+                            baselineHeightPx={baselineHeightPx}
+                            baselineLabel={baselineLabel}
+                            showMarker={showMarker}
+                            theme={theme}
+                        />
+                    )
+                })}
+            </View>
+        </View>
+    )
+}
+
+export default AllocationComparisonChart