` | | |
## Accessibility
- Reduced motion: Bars appear at their length and the menu opens without zooming.
- Screen readers: The chart reads as one summary ("Housing 6.2K, Utilities 1.4K, Food 2.1K"); the period button reports whether its menu is open; options are menu items.
- Touch target: The period button and menu options are at least 44 pt.
## Performance
Each bar grows once per change with a UI-thread spring; the grid and labels are static views.
- Measured: Pixel 9 emulator, API 35, release build · interaction median 1.00× the system Settings app on the same emulator (indicative only) · no frames drawn at rest · 154 MB app memory
- Real-device measurement pending.
## Source
`components/kinetik/expense-card.tsx`
```tsx
import { useEffect, useState, type ReactNode } from 'react';
import {
Pressable,
StyleSheet,
Text,
View,
type LayoutChangeEvent,
type StyleProp,
type ViewStyle,
} from 'react-native';
import Animated, {
FadeIn,
FadeOut,
useAnimatedStyle,
useSharedValue,
withDelay,
withSpring,
ZoomIn,
} from 'react-native-reanimated';
import { useReduceMotion } from '../../lib/kinetik/hooks/use-reduce-motion';
import { durations, easings, spring } from '../../lib/kinetik/motion/motion';
import { useKinetikTheme } from '../../lib/kinetik/tokens/theme';
import { minTouchTarget, withAlpha } from '../../lib/kinetik/tokens/tokens';
export type ExpenseRow = { label: string; value: number };
export type ExpenseCardProps = {
title?: string;
/** Icon before the title. */
icon?: ReactNode;
/** The rows for the current period. Values of 0 show an empty marker. */
rows: readonly ExpenseRow[];
/** Periods offered in the menu, e.g. ["Weekly", "Monthly", "Yearly"]. */
periods?: readonly P[];
period?: P;
onPeriodChange?: (period: P) => void;
/** Top of the scale. Defaults to the largest value rounded up to a tidy number. */
max?: number;
/** Formats axis labels and values. Defaults to 2K, 10K style. */
formatValue?: (value: number) => string;
/** Bar colour. Defaults to the theme azure. */
color?: string;
style?: StyleProp;
};
const LABEL = 76;
const BAR = 20;
const STEPS = 5;
const compact = (n: number) =>
n >= 1000 ? `${Math.round((n / 1000) * 10) / 10}K`.replace('.0K', 'K') : String(Math.round(n));
/** The smallest of 1, 2, 2.5 or 5 times a power of ten that is at least `n`. */
export function niceMax(n: number): number {
if (n <= 0) return 10;
const p = 10 ** Math.floor(Math.log10(n));
for (const m of [1, 2, 2.5, 5, 10]) if (m * p >= n) return m * p;
return 10 * p;
}
/**
* A spending card: a period menu in the header and horizontal bars on a
* dashed grid. Bars grow in one after another, regrow when the period
* changes, and an empty category shows a quiet placeholder square.
*/
export function ExpenseCard({
title = 'Major Expenses',
icon,
rows,
periods,
period,
onPeriodChange,
max,
formatValue = compact,
color,
style,
}: ExpenseCardProps
) {
const { colors, radius, space, font, shadow } = useKinetikTheme();
const reduced = useReduceMotion();
const [plot, setPlot] = useState(0);
const [open, setOpen] = useState(false);
const top = max ?? niceMax(Math.max(0, ...rows.map((r) => r.value)));
const fill = color ?? colors.azure;
return (
{icon}
{title}
{periods && period ? (
setOpen((o) => !o)}
style={[
styles.select,
{ borderColor: colors.borderStrong, borderRadius: radius.md, gap: 6 },
]}
>
{period}
) : null}
`${r.label} ${formatValue(r.value)}`).join(', ')}
style={{ padding: space[5], paddingTop: space[4] }}
>
{rows.map((r) => (
{r.label}
))}
setPlot(e.nativeEvent.layout.width)}
>
{/* Dashed grid lines at each step of the scale. */}
{Array.from({ length: STEPS + 1 }, (_, i) => (
))}
{rows.map((r, i) => (
))}
{Array.from({ length: STEPS + 1 }, (_, i) => (
{formatValue((top / STEPS) * i)}
))}
{open && periods && onPeriodChange ? (
{periods.map((p) => (
{
setOpen(false);
if (p !== period) onPeriodChange(p);
}}
style={({ pressed }) => [
styles.option,
{
backgroundColor: pressed || p === period ? colors.surfaceSunken : 'transparent',
borderRadius: radius.sm,
},
]}
>
{p}
))}
) : null}
);
}
/** A vertical dashed line drawn as short segments, which renders the same everywhere. */
function Dashes({ color }: { color: string }) {
return (
{Array.from({ length: 14 }, (_, i) => (
))}
);
}
function Bar({
index,
value,
max,
width,
color,
empty,
}: {
index: number;
value: number;
max: number;
width: number;
color: string;
empty: string;
}) {
const reduced = useReduceMotion();
const grow = useSharedValue(reduced ? 1 : 0);
const target = width * Math.min(1, Math.max(0, value / max));
useEffect(() => {
if (width <= 0) return;
grow.set(reduced ? 1 : withDelay(index * 90, withSpring(1, spring('smooth'))));
}, [width, index, reduced, grow]);
const style = useAnimatedStyle(() => ({ width: Math.max(0, target * grow.get()) }));
if (value <= 0) {
return ;
}
return (
);
}
const styles = StyleSheet.create({
card: { borderWidth: StyleSheet.hairlineWidth },
head: { flexDirection: 'row', alignItems: 'center' },
grow: { flex: 1 },
select: {
flexDirection: 'row',
alignItems: 'center',
minHeight: minTouchTarget,
paddingHorizontal: 14,
borderWidth: 1,
},
caret: { width: 7, height: 7, borderRightWidth: 1.75, borderBottomWidth: 1.75, marginTop: -3 },
rule: { height: StyleSheet.hairlineWidth },
chart: { flexDirection: 'row' },
label: { height: BAR, lineHeight: BAR },
grid: { flexDirection: 'row', justifyContent: 'space-between', marginRight: -1 },
dashes: { width: 1, justifyContent: 'space-between', paddingVertical: 2 },
dash: { width: 1, height: 3 },
barSlot: { height: BAR, justifyContent: 'center' },
bar: { height: BAR, borderRadius: 5 },
placeholder: { width: BAR, height: BAR, borderRadius: 5 },
axis: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 10, marginRight: -6 },
menu: {
position: 'absolute',
minWidth: 140,
padding: 4,
borderWidth: StyleSheet.hairlineWidth,
},
option: { minHeight: minTouchTarget, justifyContent: 'center', paddingHorizontal: 12 },
});
```