@chipmobilesdk/rn-chart 0.1.1 → 0.2.1

package/src/react/ChartLegend.tsx

@@ -1,177 +1,211 @@
-/**
- * Legend (FR-066).
- *
- * On by default for multi-series and multi-segment charts, disableable, and its
- * model is exported so an app can render its own layout instead. Every entry
- * carries a dash pattern as well as a colour, so series stay distinguishable
- * without colour perception.
- */
-import React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-
-import type { ChartDatasource } from '../contract/datasource';
-import { resolveSeriesColor, type ChartTheme, type LegendEntry } from '../contract/theme';
-
-/** Minimum tap target, per platform accessibility guidance (UX-003). */
-const MIN_TAP_TARGET = 44;
-
-export function buildLegendEntries<M>(
-	datasource: ChartDatasource<M>,
-	theme: ChartTheme,
-	hidden: ReadonlySet<string>,
-	toggleable: boolean,
-): LegendEntry[] {
-	return datasource.series.map((series, index) => ({
-		seriesId: series.id,
-		label: series.label,
-		color: resolveSeriesColor(theme, index, series.color),
-		pattern: series.pattern ?? 'solid',
-		visible: !hidden.has(series.id),
-		toggleable,
-	}));
-}
-
-function segmentCountFor(pattern: LegendEntry['pattern']): number {
-	switch (pattern) {
-		case 'dotted':
-			return 4;
-		case 'dashed':
-		case 'dashDot':
-			return 2;
-		default:
-			return 1;
-	}
-}
-
-function PatternSwatch({
-	entry,
-	theme,
-}: {
-	readonly entry: LegendEntry;
-	readonly theme: ChartTheme;
-}) {
-	// Dashes are drawn as gapped segments so the pattern reads at swatch size —
-	// this is what gives a series an identity beyond its colour (FR-064).
-	const segments = segmentCountFor(entry.pattern);
-	const gap = segments > 1 ? 1 : 0;
-
-	return (
-		<View style={styles.swatchRow}>
-			{Array.from({ length: segments }, (_, i) => (
-				<View
-					key={i}
-					style={[
-						styles.swatchSegment,
-						entry.visible ? styles.swatchVisible : styles.swatchHidden,
-						{
-							width: 12 / segments - gap,
-							marginRight: gap,
-							backgroundColor: entry.visible ? entry.color : theme.muted,
-						},
-					]}
-				/>
-			))}
-		</View>
-	);
-}
-
-export function ChartLegend({
-	entries,
-	theme,
-	onToggle,
-}: {
-	readonly entries: readonly LegendEntry[];
-	readonly theme: ChartTheme;
-	readonly onToggle?: (seriesId: string) => void;
-}) {
-	if (entries.length === 0) {
-		return null;
-	}
-
-	return (
-		<View style={styles.container} accessibilityRole="list">
-			{entries.map(entry => {
-				const content = (
-					<>
-						<PatternSwatch entry={entry} theme={theme} />
-						<Text
-							style={[
-								styles.label,
-								{
-									color: entry.visible
-										? theme.typography.legendLabel.color
-										: theme.muted,
-									fontSize: theme.typography.legendLabel.fontSize,
-								},
-							]}
-							numberOfLines={1}
-						>
-							{entry.label}
-						</Text>
-					</>
-				);
-
-				if (!entry.toggleable || !onToggle) {
-					return (
-						<View key={entry.seriesId} style={styles.entry} accessibilityRole="text">
-							{content}
-						</View>
-					);
-				}
-
-				return (
-					<Pressable
-						key={entry.seriesId}
-						onPress={() => onToggle(entry.seriesId)}
-						accessibilityRole="switch"
-						accessibilityState={{ checked: entry.visible }}
-						accessibilityLabel={entry.label}
-						accessibilityHint={
-							entry.visible ? 'Hides this series' : 'Shows this series'
-						}
-						style={[styles.entry, styles.tappable]}
-					>
-						{content}
-					</Pressable>
-				);
-			})}
-		</View>
-	);
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flexDirection: 'row',
-		flexWrap: 'wrap',
-		alignItems: 'center',
-	},
-	entry: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		marginRight: 12,
-		marginTop: 4,
-	},
-	tappable: {
-		minHeight: MIN_TAP_TARGET,
-		paddingVertical: 4,
-	},
-	swatchRow: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		width: 12,
-		marginRight: 6,
-	},
-	swatchSegment: {
-		height: 3,
-		borderRadius: 2,
-	},
-	swatchVisible: {
-		opacity: 1,
-	},
-	swatchHidden: {
-		opacity: 0.4,
-	},
-	label: {
-		flexShrink: 1,
-	},
-});
+/**
+ * Legend (FR-066).
+ *
+ * On by default for multi-series and multi-segment charts, disableable, and its
+ * model is exported so an app can render its own layout instead. Every entry
+ * carries a dash pattern as well as a colour, so series stay distinguishable
+ * without colour perception.
+ */
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { ChartDatasource, ChartFamily } from '../contract/datasource';
+import {
+	resolveSegmentColors,
+	resolveSeriesColor,
+	segmentKey,
+	type ChartTheme,
+	type LegendEntry,
+} from '../contract/theme';
+
+/** Minimum tap target, per platform accessibility guidance (UX-003). */
+const MIN_TAP_TARGET = 44;
+
+/**
+ * Legend model. A distribution chart gets one entry per segment, in the colour
+ * its arc is drawn in; it used to get one per series, so a one-series donut of
+ * four segments showed a single entry (CHT-02).
+ */
+export function buildLegendEntries<M>(
+	datasource: ChartDatasource<M>,
+	theme: ChartTheme,
+	hidden: ReadonlySet<string>,
+	toggleable: boolean,
+	family?: ChartFamily,
+): LegendEntry[] {
+	if (family === 'distribution') {
+		const colors = resolveSegmentColors(datasource, theme);
+		return datasource.series.flatMap(series =>
+			series.points.map(point => {
+				const single = series.points.length === 1;
+				let label = series.label;
+				if (!single) {
+					label = point.position.kind === 'category' ? point.position.category : point.id;
+				}
+				return {
+					seriesId: series.id,
+					pointId: point.id,
+					label,
+					color: colors[segmentKey(series.id, point.id)],
+					pattern: 'solid' as const,
+					visible: !hidden.has(series.id),
+					// Visibility is per series, so only a one-segment series toggles.
+					toggleable: toggleable && single,
+				};
+			}),
+		);
+	}
+	return datasource.series.map((series, index) => ({
+		seriesId: series.id,
+		label: series.label,
+		color: resolveSeriesColor(theme, index, series.color),
+		pattern: series.pattern ?? 'solid',
+		visible: !hidden.has(series.id),
+		toggleable,
+	}));
+}
+
+function keyOf(entry: LegendEntry): string {
+	return entry.pointId === undefined ? entry.seriesId : segmentKey(entry.seriesId, entry.pointId);
+}
+
+function segmentCountFor(pattern: LegendEntry['pattern']): number {
+	switch (pattern) {
+		case 'dotted':
+			return 4;
+		case 'dashed':
+		case 'dashDot':
+			return 2;
+		default:
+			return 1;
+	}
+}
+
+function PatternSwatch({
+	entry,
+	theme,
+}: {
+	readonly entry: LegendEntry;
+	readonly theme: ChartTheme;
+}) {
+	// Dashes are drawn as gapped segments so the pattern reads at swatch size —
+	// this is what gives a series an identity beyond its colour (FR-064).
+	const segments = segmentCountFor(entry.pattern);
+	const gap = segments > 1 ? 1 : 0;
+
+	return (
+		<View style={styles.swatchRow}>
+			{Array.from({ length: segments }, (_, i) => (
+				<View
+					key={i}
+					style={[
+						styles.swatchSegment,
+						entry.visible ? styles.swatchVisible : styles.swatchHidden,
+						{
+							width: 12 / segments - gap,
+							marginRight: gap,
+							backgroundColor: entry.visible ? entry.color : theme.muted,
+						},
+					]}
+				/>
+			))}
+		</View>
+	);
+}
+
+export function ChartLegend({
+	entries,
+	theme,
+	onToggle,
+}: {
+	readonly entries: readonly LegendEntry[];
+	readonly theme: ChartTheme;
+	readonly onToggle?: (seriesId: string) => void;
+}) {
+	if (entries.length === 0) {
+		return null;
+	}
+
+	return (
+		<View style={styles.container} accessibilityRole="list">
+			{entries.map(entry => {
+				const content = (
+					<>
+						<PatternSwatch entry={entry} theme={theme} />
+						<Text
+							style={[
+								styles.label,
+								{
+									color: entry.visible ? theme.typography.legendLabel.color : theme.muted,
+									fontSize: theme.typography.legendLabel.fontSize,
+								},
+							]}
+							numberOfLines={1}
+						>
+							{entry.label}
+						</Text>
+					</>
+				);
+
+				if (!entry.toggleable || !onToggle) {
+					return (
+						<View key={keyOf(entry)} style={styles.entry} accessibilityRole="text">
+							{content}
+						</View>
+					);
+				}
+
+				return (
+					<Pressable
+						key={keyOf(entry)}
+						onPress={() => onToggle(entry.seriesId)}
+						accessibilityRole="switch"
+						accessibilityState={{ checked: entry.visible }}
+						accessibilityLabel={entry.label}
+						accessibilityHint={entry.visible ? 'Hides this series' : 'Shows this series'}
+						style={[styles.entry, styles.tappable]}
+					>
+						{content}
+					</Pressable>
+				);
+			})}
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		alignItems: 'center',
+	},
+	entry: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginRight: 12,
+		marginTop: 4,
+	},
+	tappable: {
+		minHeight: MIN_TAP_TARGET,
+		paddingVertical: 4,
+	},
+	swatchRow: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		width: 12,
+		marginRight: 6,
+	},
+	swatchSegment: {
+		height: 3,
+		borderRadius: 2,
+	},
+	swatchVisible: {
+		opacity: 1,
+	},
+	swatchHidden: {
+		opacity: 0.4,
+	},
+	label: {
+		flexShrink: 1,
+	},
+});

package/src/react/ChartThemeProvider.tsx

@@ -1,48 +1,44 @@
-/**
- * Theme resolution: prop -> context -> built-in default keyed on the OS scheme.
- *
- * The dependency is inverted on purpose. The package declares a `ChartTheme`
- * value type and any design system can satisfy it, which is what keeps
- * `@chipmobilesdk/rn-theme` and `react-native-unistyles` out of this package
- * entirely (FR-065, LIB-004).
- */
-import React, { createContext, useContext, useMemo } from 'react';
-import { useColorScheme } from 'react-native';
-
-import { defaultChartTheme, type ChartTheme } from '../contract/theme';
-
-const ChartThemeContext = createContext<ChartTheme | undefined>(undefined);
-
-export function ChartThemeProvider({
-	theme,
-	children,
-}: {
-	readonly theme: ChartTheme;
-	readonly children: React.ReactNode;
-}) {
-	return (
-		<ChartThemeContext.Provider value={theme}>
-			{children}
-		</ChartThemeContext.Provider>
-	);
-}
-
-/**
- * An explicit prop wins, then context, then the built-in default for the
- * current OS colour scheme — so a chart renders correctly with no theme
- * configuration at all.
- */
-export function useChartTheme(explicit?: ChartTheme): ChartTheme {
-	const fromContext = useContext(ChartThemeContext);
-	const scheme = useColorScheme();
-
-	return useMemo(() => {
-		if (explicit) {
-			return explicit;
-		}
-		if (fromContext) {
-			return fromContext;
-		}
-		return defaultChartTheme(scheme === 'dark' ? 'dark' : 'light');
-	}, [explicit, fromContext, scheme]);
-}
+/**
+ * Theme resolution: prop -> context -> built-in default keyed on the OS scheme.
+ *
+ * The dependency is inverted on purpose. The package declares a `ChartTheme`
+ * value type and any design system can satisfy it, which is what keeps
+ * `@chipmobilesdk/rn-theme` and `react-native-unistyles` out of this package
+ * entirely (FR-065, LIB-004).
+ */
+import React, { createContext, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+
+import { defaultChartTheme, type ChartTheme } from '../contract/theme';
+
+const ChartThemeContext = createContext<ChartTheme | undefined>(undefined);
+
+export function ChartThemeProvider({
+	theme,
+	children,
+}: {
+	readonly theme: ChartTheme;
+	readonly children: React.ReactNode;
+}) {
+	return <ChartThemeContext.Provider value={theme}>{children}</ChartThemeContext.Provider>;
+}
+
+/**
+ * An explicit prop wins, then context, then the built-in default for the
+ * current OS colour scheme — so a chart renders correctly with no theme
+ * configuration at all.
+ */
+export function useChartTheme(explicit?: ChartTheme): ChartTheme {
+	const fromContext = useContext(ChartThemeContext);
+	const scheme = useColorScheme();
+
+	return useMemo(() => {
+		if (explicit) {
+			return explicit;
+		}
+		if (fromContext) {
+			return fromContext;
+		}
+		return defaultChartTheme(scheme === 'dark' ? 'dark' : 'light');
+	}, [explicit, fromContext, scheme]);
+}