@krizaka/charts 0.0.0-stage → 0.1.0

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 (273) hide show
  1. package/LICENSE +202 -0
  2. package/README.md +47 -2
  3. package/dist/bar.d.ts +17 -0
  4. package/dist/bar.js +16 -0
  5. package/dist/bar.js.map +1 -0
  6. package/dist/candlestick-IG626XL4.js +13 -0
  7. package/dist/candlestick-IG626XL4.js.map +1 -0
  8. package/dist/candlestick.d.ts +42 -0
  9. package/dist/candlestick.js +13 -0
  10. package/dist/candlestick.js.map +1 -0
  11. package/dist/canvas-4MSYDVFO.js +14 -0
  12. package/dist/canvas-4MSYDVFO.js.map +1 -0
  13. package/dist/cartesian-BRhNQ3ib.d.ts +34 -0
  14. package/dist/chart.d.ts +58 -0
  15. package/dist/chart.js +11 -0
  16. package/dist/chart.js.map +1 -0
  17. package/dist/chunk-3CJHBJXA.js +186 -0
  18. package/dist/chunk-3CJHBJXA.js.map +1 -0
  19. package/dist/chunk-6FINSUOS.js +49 -0
  20. package/dist/chunk-6FINSUOS.js.map +1 -0
  21. package/dist/chunk-7CSAGFBW.js +166 -0
  22. package/dist/chunk-7CSAGFBW.js.map +1 -0
  23. package/dist/chunk-7TIFCK5E.js +103 -0
  24. package/dist/chunk-7TIFCK5E.js.map +1 -0
  25. package/dist/chunk-AHQXJSAQ.js +38 -0
  26. package/dist/chunk-AHQXJSAQ.js.map +1 -0
  27. package/dist/chunk-ANUCSRUN.js +43 -0
  28. package/dist/chunk-ANUCSRUN.js.map +1 -0
  29. package/dist/chunk-BISL7DYW.js +66 -0
  30. package/dist/chunk-BISL7DYW.js.map +1 -0
  31. package/dist/chunk-BZ5CQFPH.js +19 -0
  32. package/dist/chunk-BZ5CQFPH.js.map +1 -0
  33. package/dist/chunk-DWJPPEMC.js +455 -0
  34. package/dist/chunk-DWJPPEMC.js.map +1 -0
  35. package/dist/chunk-DZB6HEVO.js +73 -0
  36. package/dist/chunk-DZB6HEVO.js.map +1 -0
  37. package/dist/chunk-EK3Z647J.js +133 -0
  38. package/dist/chunk-EK3Z647J.js.map +1 -0
  39. package/dist/chunk-I5QUZVU2.js +234 -0
  40. package/dist/chunk-I5QUZVU2.js.map +1 -0
  41. package/dist/chunk-OB5EFDDH.js +118 -0
  42. package/dist/chunk-OB5EFDDH.js.map +1 -0
  43. package/dist/chunk-OER6ETT4.js +155 -0
  44. package/dist/chunk-OER6ETT4.js.map +1 -0
  45. package/dist/chunk-PTSB3H5Q.js +205 -0
  46. package/dist/chunk-PTSB3H5Q.js.map +1 -0
  47. package/dist/chunk-TPJDOB7R.js +15 -0
  48. package/dist/chunk-TPJDOB7R.js.map +1 -0
  49. package/dist/chunk-UNK4MJVG.js +378 -0
  50. package/dist/chunk-UNK4MJVG.js.map +1 -0
  51. package/dist/chunk-VKO2OYYM.js +88 -0
  52. package/dist/chunk-VKO2OYYM.js.map +1 -0
  53. package/dist/chunk-VKTZD7UT.js +107 -0
  54. package/dist/chunk-VKTZD7UT.js.map +1 -0
  55. package/dist/chunk-W5FX4TU3.js +102 -0
  56. package/dist/chunk-W5FX4TU3.js.map +1 -0
  57. package/dist/chunk-WBH2QU77.js +178 -0
  58. package/dist/chunk-WBH2QU77.js.map +1 -0
  59. package/dist/chunk-WIRCIOLH.js +145 -0
  60. package/dist/chunk-WIRCIOLH.js.map +1 -0
  61. package/dist/chunk-XAJ3KCC4.js +116 -0
  62. package/dist/chunk-XAJ3KCC4.js.map +1 -0
  63. package/dist/chunk-XC6BQ3RN.js +92 -0
  64. package/dist/chunk-XC6BQ3RN.js.map +1 -0
  65. package/dist/chunk-XLLYNNC6.js +89 -0
  66. package/dist/chunk-XLLYNNC6.js.map +1 -0
  67. package/dist/chunk-XR4ZJDOV.js +15 -0
  68. package/dist/chunk-XR4ZJDOV.js.map +1 -0
  69. package/dist/context-BgYUymEO.d.ts +163 -0
  70. package/dist/frame-I7_xYGy5.d.ts +45 -0
  71. package/dist/full-S2MBPEEP.js +11 -0
  72. package/dist/full-S2MBPEEP.js.map +1 -0
  73. package/dist/funnel-QU5ZPC52.js +13 -0
  74. package/dist/funnel-QU5ZPC52.js.map +1 -0
  75. package/dist/funnel.d.ts +26 -0
  76. package/dist/funnel.js +13 -0
  77. package/dist/funnel.js.map +1 -0
  78. package/dist/gauge.d.ts +38 -0
  79. package/dist/gauge.js +12 -0
  80. package/dist/gauge.js.map +1 -0
  81. package/dist/geo.d.ts +37 -0
  82. package/dist/geo.js +13 -0
  83. package/dist/geo.js.map +1 -0
  84. package/dist/globe.d.ts +36 -0
  85. package/dist/globe.js +12 -0
  86. package/dist/globe.js.map +1 -0
  87. package/dist/heatmap-JWQOKUGM.js +13 -0
  88. package/dist/heatmap-JWQOKUGM.js.map +1 -0
  89. package/dist/heatmap.d.ts +47 -0
  90. package/dist/heatmap.js +15 -0
  91. package/dist/heatmap.js.map +1 -0
  92. package/dist/host-_F8RgiIz.d.ts +15 -0
  93. package/dist/index.d.ts +22 -0
  94. package/dist/index.js +101 -0
  95. package/dist/index.js.map +1 -0
  96. package/dist/line.d.ts +25 -0
  97. package/dist/line.js +18 -0
  98. package/dist/line.js.map +1 -0
  99. package/dist/native.d.ts +300 -0
  100. package/dist/native.js +875 -0
  101. package/dist/native.js.map +1 -0
  102. package/dist/pie.d.ts +37 -0
  103. package/dist/pie.js +16 -0
  104. package/dist/pie.js.map +1 -0
  105. package/dist/provider.d.ts +73 -0
  106. package/dist/provider.js +24 -0
  107. package/dist/provider.js.map +1 -0
  108. package/dist/radar-75GRJ2IK.js +13 -0
  109. package/dist/radar-75GRJ2IK.js.map +1 -0
  110. package/dist/radar.d.ts +22 -0
  111. package/dist/radar.js +13 -0
  112. package/dist/radar.js.map +1 -0
  113. package/dist/sankey-XQTX2EG6.js +13 -0
  114. package/dist/sankey-XQTX2EG6.js.map +1 -0
  115. package/dist/sankey.d.ts +28 -0
  116. package/dist/sankey.js +13 -0
  117. package/dist/sankey.js.map +1 -0
  118. package/dist/scatter-XSNG4OKD.js +13 -0
  119. package/dist/scatter-XSNG4OKD.js.map +1 -0
  120. package/dist/scatter.d.ts +41 -0
  121. package/dist/scatter.js +15 -0
  122. package/dist/scatter.js.map +1 -0
  123. package/dist/sparkline.d.ts +26 -0
  124. package/dist/sparkline.js +15 -0
  125. package/dist/sparkline.js.map +1 -0
  126. package/dist/svg-BJUHYX3B.js +14 -0
  127. package/dist/svg-BJUHYX3B.js.map +1 -0
  128. package/dist/treemap-OMGGGB5U.js +13 -0
  129. package/dist/treemap-OMGGGB5U.js.map +1 -0
  130. package/dist/treemap.d.ts +24 -0
  131. package/dist/treemap.js +14 -0
  132. package/dist/treemap.js.map +1 -0
  133. package/dist/world-110m-DVFWXS42.js +18 -0
  134. package/dist/world-110m-DVFWXS42.js.map +1 -0
  135. package/package.json +518 -3
  136. package/registry/area-chart.json +784 -0
  137. package/registry/bar-chart.json +783 -0
  138. package/registry/calendar-heatmap.json +459 -0
  139. package/registry/candlestick.json +552 -0
  140. package/registry/chart.json +440 -0
  141. package/registry/charts-provider.json +190 -0
  142. package/registry/examples/area-chart/credits-usage.d.ts +4 -0
  143. package/registry/examples/area-chart/credits-usage.js +38 -0
  144. package/registry/examples/area-chart/credits-usage.tsx +32 -0
  145. package/registry/examples/area-chart/native/credits-usage.d.ts +4 -0
  146. package/registry/examples/area-chart/native/credits-usage.dark.png +0 -0
  147. package/registry/examples/area-chart/native/credits-usage.js +33 -0
  148. package/registry/examples/area-chart/native/credits-usage.light.png +0 -0
  149. package/registry/examples/area-chart/native/credits-usage.tsx +27 -0
  150. package/registry/examples/area-chart/storage.d.ts +4 -0
  151. package/registry/examples/area-chart/storage.js +27 -0
  152. package/registry/examples/area-chart/storage.tsx +21 -0
  153. package/registry/examples/bar-chart/jobs-by-status.d.ts +4 -0
  154. package/registry/examples/bar-chart/jobs-by-status.js +37 -0
  155. package/registry/examples/bar-chart/jobs-by-status.tsx +31 -0
  156. package/registry/examples/bar-chart/native/jobs-by-status.d.ts +4 -0
  157. package/registry/examples/bar-chart/native/jobs-by-status.dark.png +0 -0
  158. package/registry/examples/bar-chart/native/jobs-by-status.js +32 -0
  159. package/registry/examples/bar-chart/native/jobs-by-status.light.png +0 -0
  160. package/registry/examples/bar-chart/native/jobs-by-status.tsx +26 -0
  161. package/registry/examples/bar-chart/plans-by-quarter.d.ts +4 -0
  162. package/registry/examples/bar-chart/plans-by-quarter.js +31 -0
  163. package/registry/examples/bar-chart/plans-by-quarter.tsx +26 -0
  164. package/registry/examples/bar-chart/top-supporters.d.ts +4 -0
  165. package/registry/examples/bar-chart/top-supporters.js +32 -0
  166. package/registry/examples/bar-chart/top-supporters.tsx +27 -0
  167. package/registry/examples/calendar-heatmap/publishing.d.ts +4 -0
  168. package/registry/examples/calendar-heatmap/publishing.js +28 -0
  169. package/registry/examples/calendar-heatmap/publishing.tsx +23 -0
  170. package/registry/examples/candlestick/auction-bids.d.ts +4 -0
  171. package/registry/examples/candlestick/auction-bids.js +37 -0
  172. package/registry/examples/candlestick/auction-bids.tsx +32 -0
  173. package/registry/examples/chart/polar-uploads.d.ts +4 -0
  174. package/registry/examples/chart/polar-uploads.js +34 -0
  175. package/registry/examples/chart/polar-uploads.tsx +30 -0
  176. package/registry/examples/charts-provider/french-orazaka.d.ts +4 -0
  177. package/registry/examples/charts-provider/french-orazaka.js +26 -0
  178. package/registry/examples/charts-provider/french-orazaka.tsx +22 -0
  179. package/registry/examples/charts-provider/native/french-orazaka.d.ts +4 -0
  180. package/registry/examples/charts-provider/native/french-orazaka.dark.png +0 -0
  181. package/registry/examples/charts-provider/native/french-orazaka.js +17 -0
  182. package/registry/examples/charts-provider/native/french-orazaka.light.png +0 -0
  183. package/registry/examples/charts-provider/native/french-orazaka.tsx +17 -0
  184. package/registry/examples/funnel/signup.d.ts +4 -0
  185. package/registry/examples/funnel/signup.js +30 -0
  186. package/registry/examples/funnel/signup.tsx +24 -0
  187. package/registry/examples/gauge/challenge-goal.d.ts +4 -0
  188. package/registry/examples/gauge/challenge-goal.js +24 -0
  189. package/registry/examples/gauge/challenge-goal.tsx +18 -0
  190. package/registry/examples/gauge/credits-quota.d.ts +4 -0
  191. package/registry/examples/gauge/credits-quota.js +26 -0
  192. package/registry/examples/gauge/credits-quota.tsx +19 -0
  193. package/registry/examples/gauge/native/credits-quota.d.ts +4 -0
  194. package/registry/examples/gauge/native/credits-quota.dark.png +0 -0
  195. package/registry/examples/gauge/native/credits-quota.js +25 -0
  196. package/registry/examples/gauge/native/credits-quota.light.png +0 -0
  197. package/registry/examples/gauge/native/credits-quota.tsx +18 -0
  198. package/registry/examples/geo-map/viewers.d.ts +4 -0
  199. package/registry/examples/geo-map/viewers.js +43 -0
  200. package/registry/examples/geo-map/viewers.tsx +29 -0
  201. package/registry/examples/globe/deployment-regions.d.ts +4 -0
  202. package/registry/examples/globe/deployment-regions.js +36 -0
  203. package/registry/examples/globe/deployment-regions.tsx +30 -0
  204. package/registry/examples/heatmap/upload-activity.d.ts +4 -0
  205. package/registry/examples/heatmap/upload-activity.js +30 -0
  206. package/registry/examples/heatmap/upload-activity.tsx +25 -0
  207. package/registry/examples/line-chart/creator-earnings.d.ts +4 -0
  208. package/registry/examples/line-chart/creator-earnings.js +35 -0
  209. package/registry/examples/line-chart/creator-earnings.tsx +30 -0
  210. package/registry/examples/line-chart/forecast.d.ts +4 -0
  211. package/registry/examples/line-chart/forecast.js +36 -0
  212. package/registry/examples/line-chart/forecast.tsx +30 -0
  213. package/registry/examples/line-chart/live-jobs.d.ts +4 -0
  214. package/registry/examples/line-chart/live-jobs.js +21 -0
  215. package/registry/examples/line-chart/live-jobs.tsx +23 -0
  216. package/registry/examples/line-chart/native/creator-earnings.d.ts +4 -0
  217. package/registry/examples/line-chart/native/creator-earnings.dark.png +0 -0
  218. package/registry/examples/line-chart/native/creator-earnings.js +32 -0
  219. package/registry/examples/line-chart/native/creator-earnings.light.png +0 -0
  220. package/registry/examples/line-chart/native/creator-earnings.tsx +26 -0
  221. package/registry/examples/line-chart/states.d.ts +4 -0
  222. package/registry/examples/line-chart/states.js +16 -0
  223. package/registry/examples/line-chart/states.tsx +13 -0
  224. package/registry/examples/pie-chart/credit-spend.d.ts +4 -0
  225. package/registry/examples/pie-chart/credit-spend.js +30 -0
  226. package/registry/examples/pie-chart/credit-spend.tsx +24 -0
  227. package/registry/examples/pie-chart/native/credit-spend.d.ts +4 -0
  228. package/registry/examples/pie-chart/native/credit-spend.dark.png +0 -0
  229. package/registry/examples/pie-chart/native/credit-spend.js +17 -0
  230. package/registry/examples/pie-chart/native/credit-spend.light.png +0 -0
  231. package/registry/examples/pie-chart/native/credit-spend.tsx +12 -0
  232. package/registry/examples/pie-chart/storage-by-kind.d.ts +4 -0
  233. package/registry/examples/pie-chart/storage-by-kind.js +31 -0
  234. package/registry/examples/pie-chart/storage-by-kind.tsx +26 -0
  235. package/registry/examples/radar-chart/model-comparison.d.ts +4 -0
  236. package/registry/examples/radar-chart/model-comparison.js +33 -0
  237. package/registry/examples/radar-chart/model-comparison.tsx +28 -0
  238. package/registry/examples/sankey/credit-flow.d.ts +4 -0
  239. package/registry/examples/sankey/credit-flow.js +37 -0
  240. package/registry/examples/sankey/credit-flow.tsx +32 -0
  241. package/registry/examples/scatter-chart/watch-time.d.ts +4 -0
  242. package/registry/examples/scatter-chart/watch-time.js +36 -0
  243. package/registry/examples/scatter-chart/watch-time.tsx +31 -0
  244. package/registry/examples/sparkline/bars.d.ts +4 -0
  245. package/registry/examples/sparkline/bars.js +12 -0
  246. package/registry/examples/sparkline/bars.tsx +7 -0
  247. package/registry/examples/sparkline/native/stat-trend.d.ts +4 -0
  248. package/registry/examples/sparkline/native/stat-trend.dark.png +0 -0
  249. package/registry/examples/sparkline/native/stat-trend.js +12 -0
  250. package/registry/examples/sparkline/native/stat-trend.light.png +0 -0
  251. package/registry/examples/sparkline/native/stat-trend.tsx +7 -0
  252. package/registry/examples/sparkline/stat-trend.d.ts +4 -0
  253. package/registry/examples/sparkline/stat-trend.js +18 -0
  254. package/registry/examples/sparkline/stat-trend.tsx +15 -0
  255. package/registry/examples/sparkline/table-rows.d.ts +4 -0
  256. package/registry/examples/sparkline/table-rows.js +23 -0
  257. package/registry/examples/sparkline/table-rows.tsx +26 -0
  258. package/registry/examples/treemap/storage.d.ts +4 -0
  259. package/registry/examples/treemap/storage.js +17 -0
  260. package/registry/examples/treemap/storage.tsx +13 -0
  261. package/registry/funnel.json +486 -0
  262. package/registry/gauge.json +599 -0
  263. package/registry/geo-map.json +483 -0
  264. package/registry/globe.json +468 -0
  265. package/registry/heatmap.json +530 -0
  266. package/registry/index.json +420 -0
  267. package/registry/line-chart.json +792 -0
  268. package/registry/pie-chart.json +1287 -0
  269. package/registry/radar-chart.json +458 -0
  270. package/registry/sankey.json +502 -0
  271. package/registry/scatter-chart.json +558 -0
  272. package/registry/sparkline.json +562 -0
  273. package/registry/treemap.json +431 -0
@@ -0,0 +1,784 @@
1
+ {
2
+ "name": "area-chart",
3
+ "package": "@krizaka/charts",
4
+ "type": "chart",
5
+ "title": "Area chart",
6
+ "summary": "A volume over time: a line over a soft wash, or stacked areas whose parts add up to a total.",
7
+ "description": "A volume over time: a line over a soft wash, or stacked areas whose parts add up to a total.",
8
+ "status": "beta",
9
+ "category": "charts",
10
+ "platforms": "both",
11
+ "engine": "svg",
12
+ "whenToUse": [
13
+ "A volume whose size matters, not only its direction: credits consumed, storage used.",
14
+ "The parts of a total over time, stacked: credits by model, views by source."
15
+ ],
16
+ "whenNotToUse": [
17
+ {
18
+ "when": "Several series whose lines cross: the washes would hide each other.",
19
+ "use": "line-chart"
20
+ },
21
+ {
22
+ "when": "Parts of a total at one moment.",
23
+ "use": "pie-chart"
24
+ }
25
+ ],
26
+ "bestPractices": [
27
+ "Stack only parts of one total, in a stable order: the series keep their palette slot whatever is filtered.",
28
+ "The tooltip of a stacked chart adds the total: do not add a series for it.",
29
+ "Start at zero (the default): an area's height is read as an amount."
30
+ ],
31
+ "accessibility": {
32
+ "keyboard": [
33
+ {
34
+ "keys": "Tab",
35
+ "action": "Moves the focus to the plot (one tab stop), then to the data and export buttons."
36
+ },
37
+ {
38
+ "keys": "Arrow keys",
39
+ "action": "Walk the points one by one: each is announced and its tooltip shown."
40
+ },
41
+ {
42
+ "keys": "Home / End",
43
+ "action": "Jump to the first or the last point."
44
+ },
45
+ {
46
+ "keys": "Esc",
47
+ "action": "Hides the tooltip and clears the active point."
48
+ }
49
+ ],
50
+ "notes": [
51
+ "The plot is a group named by the title and described by a summary written from the data (extremes, trend), read before anything else.",
52
+ "The data table is always in the page for assistive technology; “Show data” reveals it for everyone.",
53
+ "Colour never carries a meaning alone: a legend from two series, direct labels, the table.",
54
+ "The entrance plays once, when the chart comes on screen, and never under reduced motion."
55
+ ]
56
+ },
57
+ "related": [
58
+ "line-chart",
59
+ "bar-chart",
60
+ "pie-chart"
61
+ ],
62
+ "source": "packages/charts/src/meta/area-chart.ts",
63
+ "install": {
64
+ "web": "npm install @krizaka/charts",
65
+ "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
66
+ },
67
+ "web": {
68
+ "entry": "@krizaka/charts/line",
69
+ "import": "import { AreaChart } from \"@krizaka/charts/line\";",
70
+ "props": [
71
+ {
72
+ "component": "AreaChart",
73
+ "description": "A volume over time: a line over a soft wash (stacked: the parts of a total).",
74
+ "props": [
75
+ {
76
+ "name": "data",
77
+ "type": "readonly T[]",
78
+ "default": null,
79
+ "description": "The rows, in the order of the x axis.",
80
+ "required": true
81
+ },
82
+ {
83
+ "name": "title",
84
+ "type": "string",
85
+ "default": null,
86
+ "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
87
+ "required": true
88
+ },
89
+ {
90
+ "name": "brand",
91
+ "type": "BrandId",
92
+ "default": null,
93
+ "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
94
+ "required": false
95
+ },
96
+ {
97
+ "name": "className",
98
+ "type": "string",
99
+ "default": null,
100
+ "description": "A class on the figure (layout: margins, grid placement).",
101
+ "required": false
102
+ },
103
+ {
104
+ "name": "curve",
105
+ "type": "Curve",
106
+ "default": null,
107
+ "description": "The shape between points: `monotone` (default, never overshoots), `linear`, `step` (a value that holds).",
108
+ "required": false
109
+ },
110
+ {
111
+ "name": "dataTable",
112
+ "type": "boolean",
113
+ "default": null,
114
+ "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
115
+ "required": false
116
+ },
117
+ {
118
+ "name": "description",
119
+ "type": "ReactNode",
120
+ "default": null,
121
+ "description": "A sentence under the title: the period, the unit, the source.",
122
+ "required": false
123
+ },
124
+ {
125
+ "name": "dots",
126
+ "type": "boolean",
127
+ "default": null,
128
+ "description": "A dot on every point (short series). Default false: the end of each line carries one.",
129
+ "required": false
130
+ },
131
+ {
132
+ "name": "empty",
133
+ "type": "ReactNode",
134
+ "default": null,
135
+ "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
136
+ "required": false
137
+ },
138
+ {
139
+ "name": "endLabels",
140
+ "type": "boolean",
141
+ "default": "true",
142
+ "description": "Write the last value at the end of each line (up to three series). Default true.",
143
+ "required": false
144
+ },
145
+ {
146
+ "name": "error",
147
+ "type": "ReactNode",
148
+ "default": null,
149
+ "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
150
+ "required": false
151
+ },
152
+ {
153
+ "name": "exportable",
154
+ "type": "boolean | readonly ExportFormat[]",
155
+ "default": null,
156
+ "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
157
+ "required": false
158
+ },
159
+ {
160
+ "name": "format",
161
+ "type": "ValueFormat",
162
+ "default": null,
163
+ "description": "How the values are written (axis, tooltip, table, summary). Default `\"number\"`.",
164
+ "required": false
165
+ },
166
+ {
167
+ "name": "height",
168
+ "type": "number",
169
+ "default": null,
170
+ "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
171
+ "required": false
172
+ },
173
+ {
174
+ "name": "hideTitle",
175
+ "type": "boolean",
176
+ "default": null,
177
+ "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
178
+ "required": false
179
+ },
180
+ {
181
+ "name": "id",
182
+ "type": "string",
183
+ "default": null,
184
+ "description": "The id of the figure.",
185
+ "required": false
186
+ },
187
+ {
188
+ "name": "labels",
189
+ "type": "ChartLabelsInput",
190
+ "default": null,
191
+ "description": "The words, translated: the buttons, the states, the written summary.",
192
+ "required": false
193
+ },
194
+ {
195
+ "name": "legend",
196
+ "type": "boolean",
197
+ "default": null,
198
+ "description": "Show the legend (from two series). Default true.",
199
+ "required": false
200
+ },
201
+ {
202
+ "name": "live",
203
+ "type": "boolean",
204
+ "default": null,
205
+ "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
206
+ "required": false
207
+ },
208
+ {
209
+ "name": "loading",
210
+ "type": "boolean",
211
+ "default": null,
212
+ "description": "The data is on its way: a skeleton of the chart, announced once.",
213
+ "required": false
214
+ },
215
+ {
216
+ "name": "locale",
217
+ "type": "Locale",
218
+ "default": null,
219
+ "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
220
+ "required": false
221
+ },
222
+ {
223
+ "name": "markers",
224
+ "type": "readonly Marker[]",
225
+ "default": null,
226
+ "description": "Vertical markers at a category: a launch, an incident.",
227
+ "required": false
228
+ },
229
+ {
230
+ "name": "onSelect",
231
+ "type": "((datum: T, index: number) => void)",
232
+ "default": null,
233
+ "description": "Called with the row when a point or a bar is clicked (or Enter is pressed on it).",
234
+ "required": false
235
+ },
236
+ {
237
+ "name": "series",
238
+ "type": "readonly SeriesSpec<T>[]",
239
+ "default": null,
240
+ "description": "The series to draw, each with its field and its name; the palette follows their order.",
241
+ "required": false
242
+ },
243
+ {
244
+ "name": "stacked",
245
+ "type": "boolean",
246
+ "default": null,
247
+ "description": "Stack the series: a total and its parts over time.",
248
+ "required": false
249
+ },
250
+ {
251
+ "name": "style",
252
+ "type": "CSSProperties",
253
+ "default": null,
254
+ "description": "Inline style on the figure (layout only: colours come from the tokens).",
255
+ "required": false
256
+ },
257
+ {
258
+ "name": "summary",
259
+ "type": "\"hidden\" | \"visible\"",
260
+ "default": null,
261
+ "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
262
+ "required": false
263
+ },
264
+ {
265
+ "name": "summaryText",
266
+ "type": "string",
267
+ "default": null,
268
+ "description": "Your own summary instead of the generated one (still read first by screen readers).",
269
+ "required": false
270
+ },
271
+ {
272
+ "name": "thresholds",
273
+ "type": "readonly Threshold[]",
274
+ "default": null,
275
+ "description": "Horizontal lines at a value: a goal, a payout threshold.",
276
+ "required": false
277
+ },
278
+ {
279
+ "name": "x",
280
+ "type": "string | ((datum: T, index: number) => unknown)",
281
+ "default": null,
282
+ "description": "The field (or function) of the category: a month (`\"2026-04\"`), a day, a label. Default: the row's position.",
283
+ "required": false
284
+ },
285
+ {
286
+ "name": "xFormat",
287
+ "type": "CategoryFormat",
288
+ "default": null,
289
+ "description": "How the categories are written. Default: dates by their precision (`2026-04` → `Apr 2026`), text as is.",
290
+ "required": false
291
+ },
292
+ {
293
+ "name": "xLabel",
294
+ "type": "string",
295
+ "default": null,
296
+ "description": "The header of the categories in the data table (`Month`).",
297
+ "required": false
298
+ },
299
+ {
300
+ "name": "y",
301
+ "type": "string | ((datum: T, index: number) => number | null)",
302
+ "default": null,
303
+ "description": "A single series: its field. Use `series` for several.",
304
+ "required": false
305
+ },
306
+ {
307
+ "name": "yLabel",
308
+ "type": "string",
309
+ "default": null,
310
+ "description": "The name of the single `y` series (legend, tooltip, table). Default: the field's name.",
311
+ "required": false
312
+ },
313
+ {
314
+ "name": "zero",
315
+ "type": "boolean",
316
+ "default": null,
317
+ "description": "Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero.",
318
+ "required": false
319
+ }
320
+ ]
321
+ }
322
+ ],
323
+ "examples": [
324
+ {
325
+ "name": "credits-usage",
326
+ "title": "Credits by model",
327
+ "description": "Eight weeks of Orazaka credits, stacked by model, the plan's weekly allowance as a threshold.",
328
+ "path": "examples/area-chart/credits-usage.tsx",
329
+ "module": "@krizaka/charts/registry/examples/area-chart/credits-usage",
330
+ "code": "import { AreaChart } from \"@krizaka/charts/line\";\n\nconst weeks = [\n { week: \"2026-08-03\", chat: 9_400, image: 4_100, video: 1_200 },\n { week: \"2026-08-10\", chat: 10_200, image: 4_600, video: 1_900 },\n { week: \"2026-08-17\", chat: 9_800, image: 5_300, video: 2_400 },\n { week: \"2026-08-24\", chat: 11_600, image: 5_100, video: 3_100 },\n { week: \"2026-08-31\", chat: 12_300, image: 6_200, video: 3_600 },\n { week: \"2026-09-07\", chat: 12_900, image: 6_000, video: 4_800 },\n { week: \"2026-09-14\", chat: 13_400, image: 6_900, video: 5_200 },\n { week: \"2026-09-21\", chat: 14_100, image: 7_400, video: 6_100 },\n];\n\nexport default function CreditsUsage() {\n return (\n <AreaChart\n title=\"Credits used per week, by model\"\n description=\"Workspace “Atelier Nord”, Pro plan\"\n data={weeks}\n x=\"week\"\n xFormat=\"day\"\n series={[\n { key: \"chat\", label: \"Chat\" },\n { key: \"image\", label: \"Image\" },\n { key: \"video\", label: \"Video\" },\n ]}\n format=\"integer\"\n stacked\n thresholds={[{ value: 25_000, label: \"Weekly allowance\", tone: \"warning\" }]}\n />\n );\n}\n"
331
+ },
332
+ {
333
+ "name": "storage",
334
+ "title": "Single area",
335
+ "description": "One volume over time: storage used by a workspace.",
336
+ "path": "examples/area-chart/storage.tsx",
337
+ "module": "@krizaka/charts/registry/examples/area-chart/storage",
338
+ "code": "import { AreaChart } from \"@krizaka/charts/line\";\n\nconst days = [12.4, 12.9, 13.1, 13.8, 14.6, 14.9, 15.7, 16.2, 16.4, 17.3, 18.1, 18.6, 19.4, 20.2].map((gb, i) => ({\n day: `2026-09-${String(i + 1).padStart(2, \"0\")}`,\n gb,\n}));\n\nexport default function Storage() {\n return (\n <AreaChart\n title=\"Storage used\"\n data={days}\n x=\"day\"\n xFormat=\"day\"\n y=\"gb\"\n yLabel=\"Storage\"\n format={{ style: \"unit\", unit: \"gigabyte\" }}\n height={220}\n />\n );\n}\n"
339
+ }
340
+ ]
341
+ },
342
+ "native": {
343
+ "entry": "@krizaka/charts/native",
344
+ "import": "import { AreaChart } from \"@krizaka/charts/native\";",
345
+ "differences": [
346
+ "No data table or export: the summary is the accessible label, swipe up and down to hear each week.",
347
+ "A tap selects the nearest point; no hover."
348
+ ],
349
+ "props": [
350
+ {
351
+ "component": "AreaChart",
352
+ "description": "A volume over time (React Native): a line over a wash; `stacked` for the parts of a total.",
353
+ "props": [
354
+ {
355
+ "name": "data",
356
+ "type": "readonly T[]",
357
+ "default": null,
358
+ "description": "The rows, in the order of the x axis.",
359
+ "required": true
360
+ },
361
+ {
362
+ "name": "title",
363
+ "type": "string",
364
+ "default": null,
365
+ "description": "What the chart shows: its heading and accessible name.",
366
+ "required": true
367
+ },
368
+ {
369
+ "name": "brand",
370
+ "type": "BrandId",
371
+ "default": null,
372
+ "description": "The brand whose palette leads. Default Krizaka.",
373
+ "required": false
374
+ },
375
+ {
376
+ "name": "curve",
377
+ "type": "Curve",
378
+ "default": "monotone",
379
+ "description": "`monotone` (default), `linear` or `step`.",
380
+ "required": false
381
+ },
382
+ {
383
+ "name": "empty",
384
+ "type": "ReactNode",
385
+ "default": null,
386
+ "description": "Shown instead of the plot when there is nothing to draw. Default: the `empty` label.",
387
+ "required": false
388
+ },
389
+ {
390
+ "name": "format",
391
+ "type": "ValueFormat",
392
+ "default": null,
393
+ "description": "How the values are written.",
394
+ "required": false
395
+ },
396
+ {
397
+ "name": "height",
398
+ "type": "number",
399
+ "default": null,
400
+ "description": "The plot's height.",
401
+ "required": false
402
+ },
403
+ {
404
+ "name": "hideTitle",
405
+ "type": "boolean",
406
+ "default": null,
407
+ "description": "Hide the heading (it stays the accessible name).",
408
+ "required": false
409
+ },
410
+ {
411
+ "name": "labels",
412
+ "type": "ChartLabelsInput",
413
+ "default": null,
414
+ "description": "The words: the readout, the summary.",
415
+ "required": false
416
+ },
417
+ {
418
+ "name": "loading",
419
+ "type": "boolean",
420
+ "default": null,
421
+ "description": "The data is on its way.",
422
+ "required": false
423
+ },
424
+ {
425
+ "name": "locale",
426
+ "type": "Locale",
427
+ "default": null,
428
+ "description": "The locale of every figure and date. Default `\"en-US\"`.",
429
+ "required": false
430
+ },
431
+ {
432
+ "name": "scheme",
433
+ "type": "Mode",
434
+ "default": null,
435
+ "description": "Dark or light. Default: the device's (pass `useTheme().scheme` of\n@krizaka /ui/native to follow the app).",
436
+ "required": false
437
+ },
438
+ {
439
+ "name": "series",
440
+ "type": "readonly SeriesSpec<T>[]",
441
+ "default": null,
442
+ "description": "The series, each with its field and name.",
443
+ "required": false
444
+ },
445
+ {
446
+ "name": "stacked",
447
+ "type": "boolean",
448
+ "default": null,
449
+ "description": "Stack the series: the parts of a total over time.",
450
+ "required": false
451
+ },
452
+ {
453
+ "name": "style",
454
+ "type": "ViewStyle",
455
+ "default": null,
456
+ "description": "The style of the chart's container (layout only: colours come from the theme).",
457
+ "required": false
458
+ },
459
+ {
460
+ "name": "theme",
461
+ "type": "Partial<ChartTheme>",
462
+ "default": null,
463
+ "description": "The app's colour roles (`useTheme().theme` of\n@krizaka /ui/native): a product's brand overrides apply.",
464
+ "required": false
465
+ },
466
+ {
467
+ "name": "thresholds",
468
+ "type": "readonly Threshold[]",
469
+ "default": null,
470
+ "description": "Horizontal lines at a value.",
471
+ "required": false
472
+ },
473
+ {
474
+ "name": "x",
475
+ "type": "string | ((datum: T, index: number) => unknown)",
476
+ "default": null,
477
+ "description": "The field (or function) of the category.",
478
+ "required": false
479
+ },
480
+ {
481
+ "name": "xFormat",
482
+ "type": "CategoryFormat",
483
+ "default": null,
484
+ "description": "How the categories are written.",
485
+ "required": false
486
+ },
487
+ {
488
+ "name": "y",
489
+ "type": "string | ((datum: T, index: number) => number | null)",
490
+ "default": null,
491
+ "description": "A single series: its field.",
492
+ "required": false
493
+ },
494
+ {
495
+ "name": "yLabel",
496
+ "type": "string",
497
+ "default": null,
498
+ "description": "The name of the single `y` series.",
499
+ "required": false
500
+ }
501
+ ]
502
+ }
503
+ ],
504
+ "examples": [
505
+ {
506
+ "name": "credits-usage",
507
+ "title": "Credits by model",
508
+ "description": "Credits stacked by model.",
509
+ "path": "examples/area-chart/native/credits-usage.tsx",
510
+ "module": "@krizaka/charts/registry/examples/area-chart/native/credits-usage",
511
+ "code": "import { AreaChart } from \"@krizaka/charts/native\";\n\nconst weeks = [\n { week: \"2026-08-03\", chat: 9_400, image: 4_100 },\n { week: \"2026-08-10\", chat: 10_200, image: 4_600 },\n { week: \"2026-08-17\", chat: 9_800, image: 5_300 },\n { week: \"2026-08-24\", chat: 11_600, image: 5_100 },\n { week: \"2026-08-31\", chat: 12_300, image: 6_200 },\n { week: \"2026-09-07\", chat: 12_900, image: 6_000 },\n];\n\nexport default function CreditsUsage() {\n return (\n <AreaChart\n title=\"Credits used per week\"\n data={weeks}\n x=\"week\"\n xFormat=\"day\"\n series={[\n { key: \"chat\", label: \"Chat\" },\n { key: \"image\", label: \"Image\" },\n ]}\n format=\"compact\"\n stacked\n />\n );\n}\n",
512
+ "screenshots": {
513
+ "dark": "examples/area-chart/native/credits-usage.dark.png",
514
+ "light": "examples/area-chart/native/credits-usage.light.png"
515
+ }
516
+ }
517
+ ]
518
+ },
519
+ "files": [],
520
+ "dependencies": [
521
+ "@krizaka/intl@workspace:^",
522
+ "d3-geo@^3.1.1",
523
+ "echarts@^6.1.0",
524
+ "topojson-client@^3.1.0"
525
+ ],
526
+ "registryDependencies": [],
527
+ "demo": {
528
+ "path": "examples/area-chart/credits-usage.tsx",
529
+ "content": "import { AreaChart } from \"@krizaka/charts/line\";\n\nconst weeks = [\n { week: \"2026-08-03\", chat: 9_400, image: 4_100, video: 1_200 },\n { week: \"2026-08-10\", chat: 10_200, image: 4_600, video: 1_900 },\n { week: \"2026-08-17\", chat: 9_800, image: 5_300, video: 2_400 },\n { week: \"2026-08-24\", chat: 11_600, image: 5_100, video: 3_100 },\n { week: \"2026-08-31\", chat: 12_300, image: 6_200, video: 3_600 },\n { week: \"2026-09-07\", chat: 12_900, image: 6_000, video: 4_800 },\n { week: \"2026-09-14\", chat: 13_400, image: 6_900, video: 5_200 },\n { week: \"2026-09-21\", chat: 14_100, image: 7_400, video: 6_100 },\n];\n\nexport default function CreditsUsage() {\n return (\n <AreaChart\n title=\"Credits used per week, by model\"\n description=\"Workspace “Atelier Nord”, Pro plan\"\n data={weeks}\n x=\"week\"\n xFormat=\"day\"\n series={[\n { key: \"chat\", label: \"Chat\" },\n { key: \"image\", label: \"Image\" },\n { key: \"video\", label: \"Video\" },\n ]}\n format=\"integer\"\n stacked\n thresholds={[{ value: 25_000, label: \"Weekly allowance\", tone: \"warning\" }]}\n />\n );\n}\n"
530
+ },
531
+ "props": [
532
+ {
533
+ "component": "AreaChart",
534
+ "description": "A volume over time: a line over a soft wash (stacked: the parts of a total).",
535
+ "props": [
536
+ {
537
+ "name": "data",
538
+ "type": "readonly T[]",
539
+ "default": null,
540
+ "description": "The rows, in the order of the x axis.",
541
+ "required": true
542
+ },
543
+ {
544
+ "name": "title",
545
+ "type": "string",
546
+ "default": null,
547
+ "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
548
+ "required": true
549
+ },
550
+ {
551
+ "name": "brand",
552
+ "type": "BrandId",
553
+ "default": null,
554
+ "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
555
+ "required": false
556
+ },
557
+ {
558
+ "name": "className",
559
+ "type": "string",
560
+ "default": null,
561
+ "description": "A class on the figure (layout: margins, grid placement).",
562
+ "required": false
563
+ },
564
+ {
565
+ "name": "curve",
566
+ "type": "Curve",
567
+ "default": null,
568
+ "description": "The shape between points: `monotone` (default, never overshoots), `linear`, `step` (a value that holds).",
569
+ "required": false
570
+ },
571
+ {
572
+ "name": "dataTable",
573
+ "type": "boolean",
574
+ "default": null,
575
+ "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
576
+ "required": false
577
+ },
578
+ {
579
+ "name": "description",
580
+ "type": "ReactNode",
581
+ "default": null,
582
+ "description": "A sentence under the title: the period, the unit, the source.",
583
+ "required": false
584
+ },
585
+ {
586
+ "name": "dots",
587
+ "type": "boolean",
588
+ "default": null,
589
+ "description": "A dot on every point (short series). Default false: the end of each line carries one.",
590
+ "required": false
591
+ },
592
+ {
593
+ "name": "empty",
594
+ "type": "ReactNode",
595
+ "default": null,
596
+ "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
597
+ "required": false
598
+ },
599
+ {
600
+ "name": "endLabels",
601
+ "type": "boolean",
602
+ "default": "true",
603
+ "description": "Write the last value at the end of each line (up to three series). Default true.",
604
+ "required": false
605
+ },
606
+ {
607
+ "name": "error",
608
+ "type": "ReactNode",
609
+ "default": null,
610
+ "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
611
+ "required": false
612
+ },
613
+ {
614
+ "name": "exportable",
615
+ "type": "boolean | readonly ExportFormat[]",
616
+ "default": null,
617
+ "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
618
+ "required": false
619
+ },
620
+ {
621
+ "name": "format",
622
+ "type": "ValueFormat",
623
+ "default": null,
624
+ "description": "How the values are written (axis, tooltip, table, summary). Default `\"number\"`.",
625
+ "required": false
626
+ },
627
+ {
628
+ "name": "height",
629
+ "type": "number",
630
+ "default": null,
631
+ "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
632
+ "required": false
633
+ },
634
+ {
635
+ "name": "hideTitle",
636
+ "type": "boolean",
637
+ "default": null,
638
+ "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
639
+ "required": false
640
+ },
641
+ {
642
+ "name": "id",
643
+ "type": "string",
644
+ "default": null,
645
+ "description": "The id of the figure.",
646
+ "required": false
647
+ },
648
+ {
649
+ "name": "labels",
650
+ "type": "ChartLabelsInput",
651
+ "default": null,
652
+ "description": "The words, translated: the buttons, the states, the written summary.",
653
+ "required": false
654
+ },
655
+ {
656
+ "name": "legend",
657
+ "type": "boolean",
658
+ "default": null,
659
+ "description": "Show the legend (from two series). Default true.",
660
+ "required": false
661
+ },
662
+ {
663
+ "name": "live",
664
+ "type": "boolean",
665
+ "default": null,
666
+ "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
667
+ "required": false
668
+ },
669
+ {
670
+ "name": "loading",
671
+ "type": "boolean",
672
+ "default": null,
673
+ "description": "The data is on its way: a skeleton of the chart, announced once.",
674
+ "required": false
675
+ },
676
+ {
677
+ "name": "locale",
678
+ "type": "Locale",
679
+ "default": null,
680
+ "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
681
+ "required": false
682
+ },
683
+ {
684
+ "name": "markers",
685
+ "type": "readonly Marker[]",
686
+ "default": null,
687
+ "description": "Vertical markers at a category: a launch, an incident.",
688
+ "required": false
689
+ },
690
+ {
691
+ "name": "onSelect",
692
+ "type": "((datum: T, index: number) => void)",
693
+ "default": null,
694
+ "description": "Called with the row when a point or a bar is clicked (or Enter is pressed on it).",
695
+ "required": false
696
+ },
697
+ {
698
+ "name": "series",
699
+ "type": "readonly SeriesSpec<T>[]",
700
+ "default": null,
701
+ "description": "The series to draw, each with its field and its name; the palette follows their order.",
702
+ "required": false
703
+ },
704
+ {
705
+ "name": "stacked",
706
+ "type": "boolean",
707
+ "default": null,
708
+ "description": "Stack the series: a total and its parts over time.",
709
+ "required": false
710
+ },
711
+ {
712
+ "name": "style",
713
+ "type": "CSSProperties",
714
+ "default": null,
715
+ "description": "Inline style on the figure (layout only: colours come from the tokens).",
716
+ "required": false
717
+ },
718
+ {
719
+ "name": "summary",
720
+ "type": "\"hidden\" | \"visible\"",
721
+ "default": null,
722
+ "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
723
+ "required": false
724
+ },
725
+ {
726
+ "name": "summaryText",
727
+ "type": "string",
728
+ "default": null,
729
+ "description": "Your own summary instead of the generated one (still read first by screen readers).",
730
+ "required": false
731
+ },
732
+ {
733
+ "name": "thresholds",
734
+ "type": "readonly Threshold[]",
735
+ "default": null,
736
+ "description": "Horizontal lines at a value: a goal, a payout threshold.",
737
+ "required": false
738
+ },
739
+ {
740
+ "name": "x",
741
+ "type": "string | ((datum: T, index: number) => unknown)",
742
+ "default": null,
743
+ "description": "The field (or function) of the category: a month (`\"2026-04\"`), a day, a label. Default: the row's position.",
744
+ "required": false
745
+ },
746
+ {
747
+ "name": "xFormat",
748
+ "type": "CategoryFormat",
749
+ "default": null,
750
+ "description": "How the categories are written. Default: dates by their precision (`2026-04` → `Apr 2026`), text as is.",
751
+ "required": false
752
+ },
753
+ {
754
+ "name": "xLabel",
755
+ "type": "string",
756
+ "default": null,
757
+ "description": "The header of the categories in the data table (`Month`).",
758
+ "required": false
759
+ },
760
+ {
761
+ "name": "y",
762
+ "type": "string | ((datum: T, index: number) => number | null)",
763
+ "default": null,
764
+ "description": "A single series: its field. Use `series` for several.",
765
+ "required": false
766
+ },
767
+ {
768
+ "name": "yLabel",
769
+ "type": "string",
770
+ "default": null,
771
+ "description": "The name of the single `y` series (legend, tooltip, table). Default: the field's name.",
772
+ "required": false
773
+ },
774
+ {
775
+ "name": "zero",
776
+ "type": "boolean",
777
+ "default": null,
778
+ "description": "Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero.",
779
+ "required": false
780
+ }
781
+ ]
782
+ }
783
+ ]
784
+ }