@chipmobilesdk/rn-chart 0.1.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +126 -74
  2. package/README.md +337 -314
  3. package/package.json +46 -49
  4. package/skills/sdk-rn-chart/SKILL.md +1 -2
  5. package/src/a11y/summary.ts +170 -177
  6. package/src/contract/datasource.ts +126 -134
  7. package/src/contract/errors.ts +129 -133
  8. package/src/contract/format.ts +162 -168
  9. package/src/contract/interaction.ts +70 -71
  10. package/src/contract/marker.ts +75 -75
  11. package/src/contract/props.ts +57 -60
  12. package/src/contract/state.ts +88 -94
  13. package/src/contract/theme.ts +169 -139
  14. package/src/contract/value.ts +121 -125
  15. package/src/geometry/bar.ts +271 -256
  16. package/src/geometry/distribution.ts +197 -200
  17. package/src/geometry/heatmap.ts +189 -195
  18. package/src/geometry/hitTest.ts +117 -120
  19. package/src/geometry/layout.ts +162 -121
  20. package/src/geometry/markers.ts +55 -0
  21. package/src/geometry/path.ts +193 -199
  22. package/src/geometry/progress.ts +223 -204
  23. package/src/geometry/scale.ts +140 -146
  24. package/src/geometry/ticks.ts +145 -153
  25. package/src/geometry/timeSeries.ts +168 -158
  26. package/src/geometry/types.ts +94 -88
  27. package/src/index.ts +158 -176
  28. package/src/react/ChartBoundary.tsx +96 -96
  29. package/src/react/ChartFrame.tsx +583 -620
  30. package/src/react/ChartLegend.tsx +211 -177
  31. package/src/react/ChartThemeProvider.tsx +44 -48
  32. package/src/react/charts.tsx +154 -161
  33. package/src/react/useChartLayout.ts +124 -124
  34. package/src/react/useChartSelection.ts +152 -170
  35. package/src/render/Axis.tsx +120 -122
  36. package/src/render/Marks.tsx +173 -205
  37. package/src/validation/budgets.ts +103 -110
  38. package/src/validation/validateDatasource.ts +174 -174
@@ -1,200 +1,197 @@
1
- /**
2
- * Distribution geometry: proportions between groups.
3
- *
4
- * Segments that do not sum to the whole are **not** rescaled to force a full
5
- * circle (FR-024). The arc stops short and the geometry reports `incomplete`,
6
- * so the chart can say the data is partial rather than quietly implying it is
7
- * complete.
8
- *
9
- * PURE. No React, no SVG.
10
- */
11
- import type { ChartDatasource } from '../contract/datasource';
12
- import { isKnown, isWithheld, sumKnown } from '../contract/value';
13
- import type { HitRegion } from './hitTest';
14
- import { arcPath, rectSubpath } from './path';
15
- import type {
16
- GeometryInput,
17
- GeometryLabel,
18
- MarkPath,
19
- ResolvedGeometry,
20
- } from './types';
21
-
22
- export type DistributionShape = 'donut' | 'pie' | 'segmentedBar';
23
-
24
- export interface DistributionOptions {
25
- readonly shape?: DistributionShape;
26
- /** Donut hole as a fraction of the outer radius. */
27
- readonly innerRadiusRatio?: number;
28
- }
29
-
30
- const TAU = Math.PI * 2;
31
-
32
- export function buildDistributionGeometry<M>(
33
- datasource: ChartDatasource<M>,
34
- input: GeometryInput,
35
- options: DistributionOptions = {},
36
- ): ResolvedGeometry {
37
- const { plot } = input;
38
- const shape = options.shape ?? 'donut';
39
-
40
- const segments = datasource.series.flatMap(series =>
41
- series.points.map(point => ({ series, point })),
42
- );
43
-
44
- if (segments.length === 0 || plot.width <= 0 || plot.height <= 0) {
45
- return {
46
- plot,
47
- paths: [],
48
- markers: [],
49
- labels: [],
50
- xTicks: [],
51
- yTicks: [],
52
- hitRegions: [],
53
- incomplete: false,
54
- };
55
- }
56
-
57
- const total = sumKnown(segments.map(s => s.point.value));
58
- // Nothing known: there is no distribution to draw, and drawing a full grey
59
- // circle would imply a shape the data does not support.
60
- if (total.countedPoints === 0 || total.total <= 0) {
61
- return {
62
- plot,
63
- paths: [],
64
- markers: [],
65
- labels: [],
66
- xTicks: [],
67
- yTicks: [],
68
- hitRegions: [],
69
- incomplete: true,
70
- };
71
- }
72
-
73
- // Proportions supplied directly (each in 0..1, summing to ~1) are honoured
74
- // as given; absolute values are normalised by their own total. Either way we
75
- // never stretch a short sum to fill the circle.
76
- const suppliedAsProportions = segments.every(
77
- s => !isKnown(s.point.value) || (s.point.value.value >= 0 && s.point.value.value <= 1),
78
- );
79
- const denominator = suppliedAsProportions ? 1 : total.total;
80
- const coverage = total.total / denominator;
81
- const incomplete = total.incomplete || coverage < 0.999;
82
-
83
- const paths: MarkPath[] = [];
84
- const labels: GeometryLabel[] = [];
85
- const hitRegions: HitRegion[] = [];
86
-
87
- if (shape === 'segmentedBar') {
88
- const barHeight = Math.min(plot.height, 28);
89
- const barY = plot.y + (plot.height - barHeight) / 2;
90
- let cursor = plot.x;
91
-
92
- for (const { series, point } of segments) {
93
- if (!isKnown(point.value)) {
94
- continue;
95
- }
96
- const fraction = point.value.value / denominator;
97
- const width = plot.width * fraction;
98
-
99
- paths.push({
100
- key: `seg-${series.id}-${point.id}`,
101
- seriesId: series.id,
102
- d: rectSubpath({ x: cursor, y: barY, width, height: barHeight }),
103
- color: input.seriesColors[point.id] ?? input.seriesColors[series.id],
104
- pattern: 'solid',
105
- filled: true,
106
- });
107
-
108
- hitRegions.push({
109
- seriesId: series.id,
110
- pointId: point.id,
111
- x: cursor + width / 2,
112
- y: barY + barHeight / 2,
113
- bounds: { x: cursor, y: barY, width, height: barHeight },
114
- selectable: !isWithheld(point.value),
115
- });
116
-
117
- cursor += width;
118
- }
119
-
120
- return {
121
- plot,
122
- paths,
123
- markers: [],
124
- labels,
125
- xTicks: [],
126
- yTicks: [],
127
- hitRegions,
128
- incomplete,
129
- };
130
- }
131
-
132
- const cx = plot.x + plot.width / 2;
133
- const cy = plot.y + plot.height / 2;
134
- const outerRadius = Math.min(plot.width, plot.height) / 2;
135
- const innerRadius =
136
- shape === 'pie' ? 0 : outerRadius * (options.innerRadiusRatio ?? 0.6);
137
-
138
- let angle = 0;
139
-
140
- for (const { series, point } of segments) {
141
- if (!isKnown(point.value)) {
142
- continue;
143
- }
144
-
145
- const fraction = point.value.value / denominator;
146
- const sweep = fraction * TAU;
147
- const start = angle;
148
- const end = angle + sweep;
149
- angle = end;
150
-
151
- paths.push({
152
- key: `arc-${series.id}-${point.id}`,
153
- seriesId: series.id,
154
- d: arcPath({
155
- cx,
156
- cy,
157
- outerRadius,
158
- innerRadius,
159
- startAngle: start,
160
- endAngle: end,
161
- }),
162
- color: input.seriesColors[point.id] ?? input.seriesColors[series.id],
163
- pattern: 'solid',
164
- filled: true,
165
- });
166
-
167
- // Label at the segment's midpoint, on the ring between the two radii.
168
- const mid = start + sweep / 2 - Math.PI / 2;
169
- const labelRadius = (outerRadius + innerRadius) / 2;
170
-
171
- labels.push({
172
- key: `arc-label-${series.id}-${point.id}`,
173
- text: `${Math.round(fraction * 100)}%`,
174
- x: cx + labelRadius * Math.cos(mid),
175
- y: cy + labelRadius * Math.sin(mid),
176
- anchor: 'middle',
177
- // Hide labels on slivers where the text would not fit anyway.
178
- muted: fraction < 0.05,
179
- });
180
-
181
- hitRegions.push({
182
- seriesId: series.id,
183
- pointId: point.id,
184
- x: cx + labelRadius * Math.cos(mid),
185
- y: cy + labelRadius * Math.sin(mid),
186
- selectable: !isWithheld(point.value),
187
- });
188
- }
189
-
190
- return {
191
- plot,
192
- paths,
193
- markers: [],
194
- labels,
195
- xTicks: [],
196
- yTicks: [],
197
- hitRegions,
198
- incomplete,
199
- };
200
- }
1
+ /**
2
+ * Distribution geometry: proportions between groups.
3
+ *
4
+ * Segments that do not sum to the whole are **not** rescaled to force a full
5
+ * circle (FR-024). The arc stops short and the geometry reports `incomplete`,
6
+ * so the chart can say the data is partial rather than quietly implying it is
7
+ * complete.
8
+ *
9
+ * PURE. No React, no SVG.
10
+ */
11
+ import type { ChartDatasource } from '../contract/datasource';
12
+ import { segmentKey } from '../contract/theme';
13
+ import { isKnown, isWithheld, sumKnown } from '../contract/value';
14
+ import type { HitRegion } from './hitTest';
15
+ import { arcPath, rectSubpath } from './path';
16
+ import type { GeometryInput, GeometryLabel, MarkPath, ResolvedGeometry } from './types';
17
+
18
+ export type DistributionShape = 'donut' | 'pie' | 'segmentedBar';
19
+
20
+ export interface DistributionOptions {
21
+ readonly shape?: DistributionShape;
22
+ /** Donut hole as a fraction of the outer radius. */
23
+ readonly innerRadiusRatio?: number;
24
+ }
25
+
26
+ const TAU = Math.PI * 2;
27
+
28
+ export function buildDistributionGeometry<M>(
29
+ datasource: ChartDatasource<M>,
30
+ input: GeometryInput,
31
+ options: DistributionOptions = {},
32
+ ): ResolvedGeometry {
33
+ const { plot } = input;
34
+ const shape = options.shape ?? 'donut';
35
+
36
+ const segments = datasource.series.flatMap(series =>
37
+ series.points.map(point => ({ series, point })),
38
+ );
39
+
40
+ if (segments.length === 0 || plot.width <= 0 || plot.height <= 0) {
41
+ return {
42
+ plot,
43
+ paths: [],
44
+ markers: [],
45
+ labels: [],
46
+ xTicks: [],
47
+ yTicks: [],
48
+ hitRegions: [],
49
+ incomplete: false,
50
+ };
51
+ }
52
+
53
+ const total = sumKnown(segments.map(s => s.point.value));
54
+ // Nothing known: there is no distribution to draw, and drawing a full grey
55
+ // circle would imply a shape the data does not support.
56
+ if (total.countedPoints === 0 || total.total <= 0) {
57
+ return {
58
+ plot,
59
+ paths: [],
60
+ markers: [],
61
+ labels: [],
62
+ xTicks: [],
63
+ yTicks: [],
64
+ hitRegions: [],
65
+ incomplete: true,
66
+ };
67
+ }
68
+
69
+ // Proportions supplied directly (each in 0..1, summing to ~1) are honoured
70
+ // as given; absolute values are normalised by their own total. Either way we
71
+ // never stretch a short sum to fill the circle.
72
+ const suppliedAsProportions = segments.every(
73
+ s => !isKnown(s.point.value) || (s.point.value.value >= 0 && s.point.value.value <= 1),
74
+ );
75
+ const denominator = suppliedAsProportions ? 1 : total.total;
76
+ const coverage = total.total / denominator;
77
+ const incomplete = total.incomplete || coverage < 0.999;
78
+
79
+ const paths: MarkPath[] = [];
80
+ const labels: GeometryLabel[] = [];
81
+ const hitRegions: HitRegion[] = [];
82
+ const colorOf = (seriesId: string, pointId: string) =>
83
+ input.segmentColors?.[segmentKey(seriesId, pointId)] ?? input.seriesColors[seriesId];
84
+
85
+ if (shape === 'segmentedBar') {
86
+ const barHeight = Math.min(plot.height, 28);
87
+ const barY = plot.y + (plot.height - barHeight) / 2;
88
+ let cursor = plot.x;
89
+
90
+ for (const { series, point } of segments) {
91
+ if (!isKnown(point.value)) {
92
+ continue;
93
+ }
94
+ const fraction = point.value.value / denominator;
95
+ const width = plot.width * fraction;
96
+
97
+ paths.push({
98
+ key: `seg-${series.id}-${point.id}`,
99
+ seriesId: series.id,
100
+ d: rectSubpath({ x: cursor, y: barY, width, height: barHeight }),
101
+ color: colorOf(series.id, point.id),
102
+ pattern: 'solid',
103
+ filled: true,
104
+ });
105
+
106
+ hitRegions.push({
107
+ seriesId: series.id,
108
+ pointId: point.id,
109
+ x: cursor + width / 2,
110
+ y: barY + barHeight / 2,
111
+ bounds: { x: cursor, y: barY, width, height: barHeight },
112
+ selectable: !isWithheld(point.value),
113
+ });
114
+
115
+ cursor += width;
116
+ }
117
+
118
+ return {
119
+ plot,
120
+ paths,
121
+ markers: [],
122
+ labels,
123
+ xTicks: [],
124
+ yTicks: [],
125
+ hitRegions,
126
+ incomplete,
127
+ };
128
+ }
129
+
130
+ const cx = plot.x + plot.width / 2;
131
+ const cy = plot.y + plot.height / 2;
132
+ const outerRadius = Math.min(plot.width, plot.height) / 2;
133
+ const innerRadius = shape === 'pie' ? 0 : outerRadius * (options.innerRadiusRatio ?? 0.6);
134
+
135
+ let angle = 0;
136
+
137
+ for (const { series, point } of segments) {
138
+ if (!isKnown(point.value)) {
139
+ continue;
140
+ }
141
+
142
+ const fraction = point.value.value / denominator;
143
+ const sweep = fraction * TAU;
144
+ const start = angle;
145
+ const end = angle + sweep;
146
+ angle = end;
147
+
148
+ paths.push({
149
+ key: `arc-${series.id}-${point.id}`,
150
+ seriesId: series.id,
151
+ d: arcPath({
152
+ cx,
153
+ cy,
154
+ outerRadius,
155
+ innerRadius,
156
+ startAngle: start,
157
+ endAngle: end,
158
+ }),
159
+ color: colorOf(series.id, point.id),
160
+ pattern: 'solid',
161
+ filled: true,
162
+ });
163
+
164
+ // Label at the segment's midpoint, on the ring between the two radii.
165
+ const mid = start + sweep / 2 - Math.PI / 2;
166
+ const labelRadius = (outerRadius + innerRadius) / 2;
167
+
168
+ labels.push({
169
+ key: `arc-label-${series.id}-${point.id}`,
170
+ text: `${Math.round(fraction * 100)}%`,
171
+ x: cx + labelRadius * Math.cos(mid),
172
+ y: cy + labelRadius * Math.sin(mid),
173
+ anchor: 'middle',
174
+ // Hide labels on slivers where the text would not fit anyway.
175
+ muted: fraction < 0.05,
176
+ });
177
+
178
+ hitRegions.push({
179
+ seriesId: series.id,
180
+ pointId: point.id,
181
+ x: cx + labelRadius * Math.cos(mid),
182
+ y: cy + labelRadius * Math.sin(mid),
183
+ selectable: !isWithheld(point.value),
184
+ });
185
+ }
186
+
187
+ return {
188
+ plot,
189
+ paths,
190
+ markers: [],
191
+ labels,
192
+ xTicks: [],
193
+ yTicks: [],
194
+ hitRegions,
195
+ incomplete,
196
+ };
197
+ }