@carbon/charts 1.9.0-rc.5 → 1.10.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 (256) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/LICENSE.md +201 -0
  3. package/README.md +9 -19
  4. package/dist/_baseEach-603421de.mjs.map +1 -1
  5. package/dist/_baseEach-cdac417f.js.map +1 -1
  6. package/dist/angle-utils-6f166b40.js.map +1 -1
  7. package/dist/angle-utils-8b6ce998.mjs.map +1 -1
  8. package/dist/axis-chart.d.ts +13 -13
  9. package/dist/chart.d.ts +18 -18
  10. package/dist/charts/alluvial.d.ts +10 -10
  11. package/dist/charts/area-stacked.d.ts +8 -8
  12. package/dist/charts/area.d.ts +8 -8
  13. package/dist/charts/bar-grouped.d.ts +8 -8
  14. package/dist/charts/bar-simple.d.ts +8 -8
  15. package/dist/charts/bar-stacked.d.ts +8 -8
  16. package/dist/charts/boxplot.d.ts +10 -10
  17. package/dist/charts/bubble.d.ts +8 -8
  18. package/dist/charts/bullet.d.ts +10 -10
  19. package/dist/charts/choropleth.d.ts +14 -14
  20. package/dist/charts/circle-pack.d.ts +10 -10
  21. package/dist/charts/combo.d.ts +9 -9
  22. package/dist/charts/donut.d.ts +8 -8
  23. package/dist/charts/gauge.d.ts +10 -10
  24. package/dist/charts/heatmap.d.ts +14 -14
  25. package/dist/charts/histogram.d.ts +10 -10
  26. package/dist/charts/index.d.ts +27 -27
  27. package/dist/charts/line.d.ts +8 -8
  28. package/dist/charts/lollipop.d.ts +8 -8
  29. package/dist/charts/meter.d.ts +10 -10
  30. package/dist/charts/pie.d.ts +10 -10
  31. package/dist/charts/radar.d.ts +10 -10
  32. package/dist/charts/scatter.d.ts +8 -8
  33. package/dist/charts/tree.d.ts +10 -10
  34. package/dist/charts/treemap.d.ts +10 -10
  35. package/dist/charts/wordcloud.d.ts +10 -10
  36. package/dist/choropleth-4ac6ac20.js.map +1 -1
  37. package/dist/choropleth-f473ea0d.mjs.map +1 -1
  38. package/dist/color-scale-utils-5eb3eeaa.mjs.map +1 -1
  39. package/dist/color-scale-utils-7d463811.js.map +1 -1
  40. package/dist/components/axes/axis.d.ts +24 -24
  41. package/dist/components/axes/chart-clip.d.ts +13 -13
  42. package/dist/components/axes/grid-brush.d.ts +10 -10
  43. package/dist/components/axes/grid.d.ts +22 -22
  44. package/dist/components/axes/hover-axis.d.ts +10 -10
  45. package/dist/components/axes/index.d.ts +12 -12
  46. package/dist/components/axes/ruler-binned.d.ts +10 -7
  47. package/dist/components/axes/ruler-stacked.d.ts +4 -4
  48. package/dist/components/axes/ruler.d.ts +30 -27
  49. package/dist/components/axes/toolbar.d.ts +40 -40
  50. package/dist/components/axes/two-dimensional-axes.d.ts +16 -16
  51. package/dist/components/axes/zero-line.d.ts +7 -7
  52. package/dist/components/axes/zoom-bar.d.ts +31 -28
  53. package/dist/components/component.d.ts +30 -30
  54. package/dist/components/diagrams/buildPaths.d.ts +40 -40
  55. package/dist/components/diagrams/index.d.ts +2 -2
  56. package/dist/components/diagrams/markerDefinitions.d.ts +37 -37
  57. package/dist/components/essentials/canvas-chart-clip.d.ts +6 -6
  58. package/dist/components/essentials/color-scale-legend.d.ts +20 -20
  59. package/dist/components/essentials/geo-projection.d.ts +16 -16
  60. package/dist/components/essentials/highlights.d.ts +13 -13
  61. package/dist/components/essentials/index.d.ts +11 -11
  62. package/dist/components/essentials/legend.d.ts +11 -11
  63. package/dist/components/essentials/modal.d.ts +14 -14
  64. package/dist/components/essentials/threshold.d.ts +20 -20
  65. package/dist/components/essentials/title-meter.d.ts +30 -30
  66. package/dist/components/essentials/title.d.ts +20 -20
  67. package/dist/components/essentials/tooltip-axis.d.ts +4 -4
  68. package/dist/components/essentials/tooltip.d.ts +22 -22
  69. package/dist/components/graphs/alluvial.d.ts +14 -14
  70. package/dist/components/graphs/area-stacked.d.ts +11 -11
  71. package/dist/components/graphs/area.d.ts +12 -12
  72. package/dist/components/graphs/bar-grouped.d.ts +22 -22
  73. package/dist/components/graphs/bar-simple.d.ts +12 -12
  74. package/dist/components/graphs/bar-stacked.d.ts +13 -13
  75. package/dist/components/graphs/bar.d.ts +5 -5
  76. package/dist/components/graphs/boxplot.d.ts +9 -9
  77. package/dist/components/graphs/bubble.d.ts +13 -13
  78. package/dist/components/graphs/bullet.d.ts +12 -12
  79. package/dist/components/graphs/choropleth.d.ts +6 -6
  80. package/dist/components/graphs/circle-pack.d.ts +19 -19
  81. package/dist/components/graphs/donut.d.ts +9 -9
  82. package/dist/components/graphs/gauge.d.ts +27 -27
  83. package/dist/components/graphs/heatmap.d.ts +25 -25
  84. package/dist/components/graphs/histogram.d.ts +12 -12
  85. package/dist/components/graphs/index.d.ts +28 -28
  86. package/dist/components/graphs/line.d.ts +11 -11
  87. package/dist/components/graphs/lollipop.d.ts +14 -14
  88. package/dist/components/graphs/meter.d.ts +10 -10
  89. package/dist/components/graphs/pie.d.ts +16 -16
  90. package/dist/components/graphs/radar.d.ts +25 -25
  91. package/dist/components/graphs/scatter-stacked.d.ts +8 -8
  92. package/dist/components/graphs/scatter.d.ts +21 -21
  93. package/dist/components/graphs/skeleton-lines.d.ts +12 -12
  94. package/dist/components/graphs/skeleton.d.ts +23 -23
  95. package/dist/components/graphs/tree.d.ts +9 -9
  96. package/dist/components/graphs/treemap.d.ts +11 -11
  97. package/dist/components/graphs/wordcloud.d.ts +12 -12
  98. package/dist/components/index.d.ts +6 -6
  99. package/dist/components/layout/index.d.ts +2 -2
  100. package/dist/components/layout/layout.d.ts +18 -18
  101. package/dist/components/layout/spacer.d.ts +5 -5
  102. package/dist/configuration-non-customizable.d.ts +263 -263
  103. package/dist/configuration.d.ts +48 -48
  104. package/dist/demo/charts/alluvial.d.ts +109 -109
  105. package/dist/demo/charts/area.d.ts +224 -224
  106. package/dist/demo/charts/bar.d.ts +681 -681
  107. package/dist/demo/charts/boxplot.d.ts +34 -34
  108. package/dist/demo/charts/bubble.d.ts +141 -141
  109. package/dist/demo/charts/bullet.d.ts +24 -24
  110. package/dist/demo/charts/chart-types.d.ts +128 -128
  111. package/dist/demo/charts/choropleth.d.ts +738 -738
  112. package/dist/demo/charts/circle-pack.d.ts +91 -91
  113. package/dist/demo/charts/combo.d.ts +482 -482
  114. package/dist/demo/charts/donut.d.ts +64 -64
  115. package/dist/demo/charts/gauge.d.ts +40 -40
  116. package/dist/demo/charts/heatmap.d.ts +125 -125
  117. package/dist/demo/charts/hightlight.d.ts +40 -40
  118. package/dist/demo/charts/histogram.d.ts +63 -63
  119. package/dist/demo/charts/index.d.ts +55 -62
  120. package/dist/demo/charts/line.d.ts +361 -361
  121. package/dist/demo/charts/lollipop.d.ts +39 -39
  122. package/dist/demo/charts/meter.d.ts +95 -95
  123. package/dist/demo/charts/pie.d.ts +46 -46
  124. package/dist/demo/charts/radar.d.ts +63 -63
  125. package/dist/demo/charts/scatter.d.ts +118 -118
  126. package/dist/demo/charts/step.d.ts +96 -96
  127. package/dist/demo/charts/time-series-axis.d.ts +293 -293
  128. package/dist/demo/charts/toolbar.d.ts +12 -12
  129. package/dist/demo/charts/topojson-110.d.ts +360 -360
  130. package/dist/demo/charts/tree.d.ts +30 -30
  131. package/dist/demo/charts/treemap.d.ts +15 -15
  132. package/dist/demo/charts/wordcloud.d.ts +14 -14
  133. package/dist/demo/charts/zoom-bar.d.ts +79 -79
  134. package/dist/demo/index.d.ts +4 -4
  135. package/dist/demo/index.js +153 -166
  136. package/dist/demo/index.js.map +1 -1
  137. package/dist/demo/index.mjs +1645 -1834
  138. package/dist/demo/index.mjs.map +1 -1
  139. package/dist/demo/styles.css +567 -262
  140. package/dist/demo/styles.css.map +1 -1
  141. package/dist/demo/utils/index.d.ts +2 -2
  142. package/dist/demo/utils/sandbox.d.ts +38 -39
  143. package/dist/demo/utils/story-widgets.d.ts +7 -7
  144. package/dist/index-a266373c.mjs.map +1 -1
  145. package/dist/index-becfb567.mjs.map +1 -1
  146. package/dist/index-d865d500.js.map +1 -1
  147. package/dist/index-f23685eb.js.map +1 -1
  148. package/dist/index.d.ts +13 -11
  149. package/dist/index.js.map +1 -1
  150. package/dist/index.mjs.map +1 -1
  151. package/dist/interfaces/a11y.d.ts +12 -12
  152. package/dist/interfaces/axis-scales.d.ts +201 -201
  153. package/dist/interfaces/charts.d.ts +520 -517
  154. package/dist/interfaces/components.d.ts +231 -231
  155. package/dist/interfaces/enums.d.ts +261 -261
  156. package/dist/interfaces/events.d.ts +239 -239
  157. package/dist/interfaces/index.d.ts +12 -11
  158. package/dist/interfaces/layout.d.ts +21 -21
  159. package/dist/interfaces/model.d.ts +35 -35
  160. package/dist/interfaces/services.d.ts +20 -20
  161. package/dist/interfaces/truncation.d.ts +17 -17
  162. package/dist/model/alluvial.d.ts +8 -8
  163. package/dist/model/binned-charts.d.ts +7 -7
  164. package/dist/model/boxplot.d.ts +14 -14
  165. package/dist/model/bullet.d.ts +14 -14
  166. package/dist/model/cartesian-charts.d.ts +24 -24
  167. package/dist/model/choropleth.d.ts +29 -29
  168. package/dist/model/circle-pack.d.ts +36 -36
  169. package/dist/model/gauge.d.ts +9 -9
  170. package/dist/model/heatmap.d.ts +57 -57
  171. package/dist/model/index.d.ts +16 -16
  172. package/dist/model/index.js.map +1 -1
  173. package/dist/model/index.mjs.map +1 -1
  174. package/dist/model/meter.d.ts +20 -20
  175. package/dist/model/model.d.ts +110 -110
  176. package/dist/model/pie.d.ts +9 -9
  177. package/dist/model/radar.d.ts +7 -7
  178. package/dist/model/tree.d.ts +14 -14
  179. package/dist/model/treemap.d.ts +8 -8
  180. package/dist/model/wordcloud.d.ts +7 -7
  181. package/dist/services/angle-utils.d.ts +15 -15
  182. package/dist/services/canvas-zoom.d.ts +11 -11
  183. package/dist/services/color-scale-utils.d.ts +2 -2
  184. package/dist/services/curves.d.ts +24 -24
  185. package/dist/services/essentials/dom-utils.d.ts +45 -45
  186. package/dist/services/essentials/events.d.ts +8 -8
  187. package/dist/services/essentials/files.d.ts +7 -7
  188. package/dist/services/essentials/gradient-utils.d.ts +6 -6
  189. package/dist/services/essentials/index.d.ts +5 -5
  190. package/dist/services/essentials/transitions.d.ts +13 -13
  191. package/dist/services/index.d.ts +9 -9
  192. package/dist/services/scales-cartesian.d.ts +89 -89
  193. package/dist/services/service.d.ts +11 -11
  194. package/dist/services/time-series.d.ts +13 -13
  195. package/dist/services/zoom.d.ts +21 -21
  196. package/dist/styles.css +0 -21919
  197. package/dist/styles.css.map +1 -1
  198. package/dist/styles.min.css +1 -1
  199. package/dist/styles.min.css.map +1 -1
  200. package/dist/tools.d.ts +150 -144
  201. package/package.json +48 -33
  202. package/{dist/styles/colors.scss → scss/_colors.scss} +1 -1
  203. package/{dist/styles/tokens.scss → scss/_tokens.scss} +6 -15
  204. package/scss/demos.scss +427 -0
  205. package/scss/index.scss +31 -0
  206. package/dist/styles/styles.scss +0 -40
  207. /package/{dist/styles → scss}/_chart-holder.scss +0 -0
  208. /package/{dist/styles/color-palatte.scss → scss/_color-palette.scss} +0 -0
  209. /package/{dist/styles → scss}/_type.scss +0 -0
  210. /package/{dist/styles → scss}/components/_axis.scss +0 -0
  211. /package/{dist/styles → scss}/components/_callouts.scss +0 -0
  212. /package/{dist/styles → scss}/components/_color-legend.scss +0 -0
  213. /package/{dist/styles → scss}/components/_edge.scss +0 -0
  214. /package/{dist/styles → scss}/components/_grid-brush.scss +0 -0
  215. /package/{dist/styles → scss}/components/_grid.scss +0 -0
  216. /package/{dist/styles → scss}/components/_highlights.scss +0 -0
  217. /package/{dist/styles → scss}/components/_layout.scss +0 -0
  218. /package/{dist/styles → scss}/components/_legend.scss +0 -0
  219. /package/{dist/styles → scss}/components/_marker.scss +0 -0
  220. /package/{dist/styles → scss}/components/_meter-title.scss +0 -0
  221. /package/{dist/styles → scss}/components/_modal.scss +0 -0
  222. /package/{dist/styles → scss}/components/_ruler.scss +0 -0
  223. /package/{dist/styles → scss}/components/_skeleton-lines.scss +0 -0
  224. /package/{dist/styles → scss}/components/_skeleton.scss +0 -0
  225. /package/{dist/styles → scss}/components/_threshold.scss +0 -0
  226. /package/{dist/styles → scss}/components/_title.scss +0 -0
  227. /package/{dist/styles → scss}/components/_toolbar.scss +0 -0
  228. /package/{dist/styles → scss}/components/_tooltip.scss +0 -0
  229. /package/{dist/styles → scss}/components/_zero-line.scss +0 -0
  230. /package/{dist/styles → scss}/components/_zoom-bar.scss +0 -0
  231. /package/{dist/styles → scss}/components/diagrams/_card-node.scss +0 -0
  232. /package/{dist/styles → scss}/components/diagrams/_edge.scss +0 -0
  233. /package/{dist/styles → scss}/components/diagrams/_marker.scss +0 -0
  234. /package/{dist/styles → scss}/components/diagrams/_shape-node.scss +0 -0
  235. /package/{dist/styles → scss}/components/diagrams/index.scss +0 -0
  236. /package/{dist/styles → scss}/components/index.scss +0 -0
  237. /package/{dist/styles → scss}/graphs/_alluvial.scss +0 -0
  238. /package/{dist/styles → scss}/graphs/_area.scss +0 -0
  239. /package/{dist/styles → scss}/graphs/_bubble.scss +0 -0
  240. /package/{dist/styles → scss}/graphs/_bullet.scss +0 -0
  241. /package/{dist/styles → scss}/graphs/_choropleth.scss +0 -0
  242. /package/{dist/styles → scss}/graphs/_circle-pack.scss +0 -0
  243. /package/{dist/styles → scss}/graphs/_donut.scss +0 -0
  244. /package/{dist/styles → scss}/graphs/_gauge.scss +0 -0
  245. /package/{dist/styles → scss}/graphs/_heatmap.scss +0 -0
  246. /package/{dist/styles → scss}/graphs/_line.scss +0 -0
  247. /package/{dist/styles → scss}/graphs/_lollipop.scss +0 -0
  248. /package/{dist/styles → scss}/graphs/_meter.scss +0 -0
  249. /package/{dist/styles → scss}/graphs/_pie.scss +0 -0
  250. /package/{dist/styles → scss}/graphs/_radar.scss +0 -0
  251. /package/{dist/styles → scss}/graphs/_scatter-stacked.scss +0 -0
  252. /package/{dist/styles → scss}/graphs/_scatter.scss +0 -0
  253. /package/{dist/styles → scss}/graphs/_tree.scss +0 -0
  254. /package/{dist/styles → scss}/graphs/_treemap.scss +0 -0
  255. /package/{dist/styles → scss}/graphs/_wordcloud.scss +0 -0
  256. /package/{dist/styles → scss}/graphs/index.scss +0 -0
@@ -1,517 +1,520 @@
1
- import type { Alignments, ArrowDirections, ChartTheme, ChartTypes, ColorLegendType, DividerStatus, GaugeTypes, Projection, Statuses, TreeTypes } from './enums';
2
- import type { BarOptions, GridOptions, LegendOptions, StackedBarOptions, ToolbarOptions, TooltipOptions, ZoomBarsOptions } from './components';
3
- import type { AxesOptions, AxisOptions, BinnedAxisOptions, ComboChartAxisOptions, TimeScaleOptions } from './axis-scales';
4
- /**
5
- * Base chart options common to any chart
6
- */
7
- export interface BaseChartOptions {
8
- /**
9
- * Optionally specify a title for the chart
10
- */
11
- title?: string;
12
- /**
13
- * boolean to disable animations (enabled by default)
14
- */
15
- animations?: boolean;
16
- /**
17
- * boolean to prevent the container from resizing
18
- */
19
- resizable?: boolean;
20
- /**
21
- * Optionally specify a width for the chart
22
- */
23
- width?: string;
24
- /**
25
- * Optionally specify a height for the chart
26
- */
27
- height?: string;
28
- /**
29
- * Optionally specify a theme for the chart
30
- */
31
- theme?: ChartTheme;
32
- /**
33
- * tooltip configuration
34
- */
35
- tooltip?: TooltipOptions;
36
- /**
37
- * legend configuration
38
- */
39
- legend?: LegendOptions;
40
- /**
41
- * toolbar configurations
42
- */
43
- toolbar?: ToolbarOptions;
44
- /**
45
- * Optional function to determine whether is filled based on datasetLabel, label, and/or data
46
- */
47
- getIsFilled?: (datasetLabel: string, label?: string, data?: any, defaultFilled?: boolean) => boolean;
48
- /**
49
- * Optional function to generate the fill color based on datasetLabel, label, and/or data
50
- */
51
- getFillColor?: (group: string, label?: string, data?: any, defaultFillColor?: string) => string;
52
- /**
53
- * Optional function to generate the stroke color based on datasetLabel, label, and/or data
54
- * (note) - not all chart types support the stroke color (e.g. wordcloud)
55
- */
56
- getStrokeColor?: (group: string, label?: string, data?: any, defaultStrokeColor?: string) => string;
57
- /**
58
- * stylesheet options
59
- */
60
- style?: {
61
- /**
62
- * optional prefixing string for css classes (defaults to 'cc')
63
- */
64
- prefix?: string;
65
- };
66
- /**
67
- * options related to charting data
68
- */
69
- data?: {
70
- /**
71
- * identifier for data groups
72
- */
73
- groupMapsTo?: string;
74
- /**
75
- * used to simulate data loading in skeleton way
76
- */
77
- loading?: boolean;
78
- /**
79
- * options related to pre-selected data groups
80
- * Remains empty if every legend item is active or dataset doesn't have the data groups.
81
- */
82
- selectedGroups?: string[];
83
- };
84
- /**
85
- * options related to color scales
86
- */
87
- color?: {
88
- /**
89
- @example
90
- { 'Dataset 1': 'blue' }
91
- */
92
- scale?: object;
93
- /**
94
- * use a carbon dataviz preset color palette
95
- * put the index (selection of which variant)
96
- */
97
- pairing?: {
98
- /**
99
- * the number of color variants in the palette (defaults to using the number of data groups in the given data)
100
- */
101
- numberOfVariants?: number;
102
- /**
103
- * the option number of the color paring
104
- */
105
- option?: number;
106
- };
107
- gradient?: {
108
- enabled?: boolean;
109
- /**
110
- * hex color array
111
- * e.g. ['#fff', '#000', ...]
112
- */
113
- colors?: Array<string>;
114
- };
115
- };
116
- /**
117
- * whether this type of chart is experimental
118
- */
119
- experimental?: boolean;
120
- }
121
- /**
122
- * Options common to any chart with an axis
123
- */
124
- export interface AxisChartOptions extends BaseChartOptions {
125
- axes?: AxesOptions<AxisOptions>;
126
- grid?: GridOptions;
127
- timeScale?: TimeScaleOptions;
128
- /**
129
- * zoombar configuration
130
- */
131
- zoomBar?: ZoomBarsOptions;
132
- }
133
- /**
134
- * Options common to binned charts with an axis
135
- */
136
- export interface BinnedAxisChartOptions extends AxisChartOptions {
137
- axes?: AxesOptions<BinnedAxisOptions>;
138
- grid?: GridOptions;
139
- timeScale?: TimeScaleOptions;
140
- /**
141
- * zoombar configuration
142
- */
143
- zoomBar?: ZoomBarsOptions;
144
- }
145
- /**
146
- * options specific to boxplot charts
147
- */
148
- export type BoxplotChartOptions = AxisChartOptions;
149
- /**
150
- * options specific to bar charts
151
- */
152
- export interface BarChartOptions extends AxisChartOptions {
153
- bars?: BarOptions;
154
- }
155
- /**
156
- * options specific to stacked bar charts
157
- */
158
- export interface StackedBarChartOptions extends BarChartOptions {
159
- bars?: StackedBarOptions;
160
- }
161
- /**
162
- * options specific to scatter charts
163
- */
164
- export interface ScatterChartOptions extends AxisChartOptions {
165
- /**
166
- * options for the points
167
- */
168
- points?: {
169
- /**
170
- * sets the radius of the point
171
- */
172
- radius: number;
173
- fillOpacity?: number;
174
- filled?: boolean;
175
- enabled?: boolean;
176
- };
177
- }
178
- /**
179
- * options specific to lollipop charts
180
- */
181
- export type LollipopChartOptions = ScatterChartOptions;
182
- /**
183
- * options specific to bubble charts
184
- */
185
- export interface BubbleChartOptions extends AxisChartOptions {
186
- /**
187
- * options for the individual bubbles
188
- */
189
- bubble?: {
190
- /**
191
- * the key to lookup in charting data for the bubble radius value
192
- */
193
- radiusMapsTo?: string;
194
- /**
195
- * options for what the bubble radius value maps to
196
- */
197
- radiusLabel?: string;
198
- /**
199
- * A function that would determine the range of the bubble radius to use
200
- * Returns an array with the 1st value being the min and the 2nd value being the max radius
201
- */
202
- radiusRange?: (min: number, max: number) => number[];
203
- /**
204
- * Opacity of the fills used within each circle
205
- */
206
- fillOpacity?: number;
207
- /**
208
- * enabled scatter dot or not
209
- */
210
- enabled?: boolean;
211
- };
212
- }
213
- /**
214
- * options specific to bullet charts
215
- */
216
- export interface BulletChartOptions extends AxisChartOptions {
217
- /**
218
- * options for the individual bullets
219
- */
220
- bullet?: {
221
- performanceAreaTitles?: string[];
222
- };
223
- }
224
- /**
225
- * options specific to histogram charts
226
- */
227
- export interface HistogramChartOptions extends AxisChartOptions {
228
- /**
229
- * options related to bins
230
- */
231
- bins?: {
232
- rangeLabel?: string;
233
- };
234
- }
235
- /**
236
- * options specific to line charts
237
- */
238
- export interface LineChartOptions extends ScatterChartOptions {
239
- /**
240
- * options for the curve of the line
241
- */
242
- curve?: string | {
243
- name: string;
244
- };
245
- }
246
- /**
247
- * options specific to area charts
248
- */
249
- export interface AreaChartOptions extends AxisChartOptions {
250
- /**
251
- * options for the curve of the line
252
- */
253
- curve?: string | {
254
- name: string;
255
- };
256
- /**
257
- * options to bound the area of the chart
258
- */
259
- bounds?: {
260
- upperBoundMapsTo?: string;
261
- lowerBoundMapsTo?: string;
262
- };
263
- }
264
- /**
265
- * options specific to area charts
266
- */
267
- export interface StackedAreaChartOptions extends ScatterChartOptions {
268
- /**
269
- * options for the curve of the line
270
- */
271
- curve?: string | {
272
- name: string;
273
- };
274
- }
275
- /**
276
- * options specific to world cloud charts
277
- */
278
- export interface WordCloudChartTooltipOptions extends TooltipOptions {
279
- /** the label that shows up by the highlighted word in the tooltip */
280
- wordLabel?: string;
281
- /** the label that shows up by the value of the highlighted word in the tooltip */
282
- valueLabel?: string;
283
- }
284
- export interface WorldCloudChartOptions extends BaseChartOptions {
285
- wordCloud?: {
286
- /** what key in your charting data will the font sizes map to? */
287
- fontSizeMapsTo?: string;
288
- /** a function that'll decide the range of font sizes, e.g. [10, 80]
289
- * @example
290
- * (chartSize, data) => {}
291
- * */
292
- fontSizeRange?: (chartSize: any, data: any) => object;
293
- /** what key in your charting data will the words map to? */
294
- wordMapsTo?: string;
295
- };
296
- /**
297
- * tooltip configuration
298
- */
299
- tooltip?: WordCloudChartTooltipOptions;
300
- }
301
- /**
302
- * options specific to pie charts
303
- */
304
- export interface PieChartOptions extends BaseChartOptions {
305
- pie?: {
306
- labels?: {
307
- formatter?: (data: any) => string;
308
- enabled?: boolean;
309
- };
310
- alignment?: Alignments;
311
- /**
312
- * identifier for value key in your charting data
313
- * defaults to value
314
- */
315
- valueMapsTo?: string;
316
- sortFunction?: (a: {
317
- group: string;
318
- value: number;
319
- }, b: {
320
- group: string;
321
- value: number;
322
- }) => number;
323
- };
324
- }
325
- /**
326
- * options specific to gauge charts
327
- */
328
- export interface GaugeChartOptions extends BaseChartOptions {
329
- gauge?: {
330
- arcWidth?: number;
331
- deltaArrow?: {
332
- direction?: ArrowDirections;
333
- size?: (value: number) => number | string;
334
- enabled: boolean;
335
- };
336
- showPercentageSymbol?: boolean;
337
- status?: Statuses;
338
- deltaFontSize?: (value: number) => number | string;
339
- numberSpacing?: number;
340
- numberFormatter?: (value: number) => string;
341
- valueFontSize?: (value: number) => number | string;
342
- type?: GaugeTypes;
343
- alignment?: Alignments;
344
- };
345
- }
346
- /**
347
- * options specific to donut charts
348
- */
349
- export interface DonutChartOptions extends PieChartOptions {
350
- donut?: {
351
- center?: {
352
- label?: string;
353
- number?: number;
354
- numberFontSize?: (value: number) => number | string;
355
- titleFontSize?: (value: number) => number | string;
356
- titleYPosition?: (value: number) => number;
357
- numberFormatter?: (value: number) => string;
358
- };
359
- alignment?: Alignments;
360
- };
361
- }
362
- export interface MeterChartOptions extends BaseChartOptions {
363
- meter?: {
364
- showLabels?: boolean;
365
- proportional?: {
366
- total?: number;
367
- unit?: string;
368
- };
369
- peak?: number;
370
- status?: {
371
- ranges: Array<{
372
- range: [number, number];
373
- status: Statuses;
374
- }>;
375
- };
376
- height?: number;
377
- title?: {
378
- percentageIndicator?: {
379
- /**
380
- * rendering of the percentage value relative to the dataset within title
381
- */
382
- enabled?: boolean;
383
- };
384
- };
385
- };
386
- }
387
- export interface ProportionalMeterChartOptions extends BaseChartOptions {
388
- meter?: {
389
- proportional?: {
390
- total?: number;
391
- unit?: string;
392
- };
393
- };
394
- }
395
- /**
396
- * options specific to radar charts
397
- */
398
- export interface RadarChartOptions extends BaseChartOptions {
399
- radar?: {
400
- axes: {
401
- angle: string;
402
- value: string;
403
- };
404
- alignment?: Alignments;
405
- };
406
- }
407
- /**
408
- * options specific to combo charts
409
- */
410
- export interface ComboChartOptions extends AxisChartOptions {
411
- axes?: AxesOptions<ComboChartAxisOptions>;
412
- comboChartTypes: Array<{
413
- type: ChartTypes | any;
414
- options?: object;
415
- correspondingDatasets: Array<string>;
416
- }>;
417
- }
418
- export type TreemapChartOptions = BaseChartOptions;
419
- export interface TreeChartOptions extends BaseChartOptions {
420
- tree?: {
421
- type?: TreeTypes;
422
- rootTitle?: string;
423
- };
424
- }
425
- export interface CirclePackChartOptions extends BaseChartOptions {
426
- circlePack?: {
427
- circles: {
428
- fillOpacity: number;
429
- };
430
- hierachyLevel: number;
431
- padding?: {
432
- outer?: number;
433
- inner?: number;
434
- };
435
- };
436
- }
437
- /**
438
- * options specific to Alluvial charts
439
- */
440
- export interface AlluvialChartOptions extends BaseChartOptions {
441
- alluvial: {
442
- units?: string;
443
- /**
444
- * List of nodes to draw
445
- */
446
- nodes: Array<{
447
- name: string;
448
- category?: string;
449
- }>;
450
- /**
451
- * Node alignment (Default is center)
452
- */
453
- nodeAlignment?: Alignments;
454
- /**
455
- * Set the node padding
456
- */
457
- nodePadding?: number;
458
- /**
459
- * Enable single color usage for lines
460
- */
461
- monochrome?: boolean;
462
- };
463
- }
464
- /**
465
- * options specific to Heatmap charts
466
- */
467
- export interface HeatmapChartOptions extends BaseChartOptions {
468
- heatmap: {
469
- /**
470
- * Divider width state - will default to auto
471
- * No cell divider for cell dimensions less than 16
472
- */
473
- divider?: {
474
- state?: DividerStatus;
475
- };
476
- /**
477
- * customize color legend
478
- * enabled by default on select charts
479
- */
480
- colorLegend?: {
481
- /**
482
- * Text to display beside or on top of the legend
483
- * Position is determined by text length
484
- */
485
- title?: string;
486
- type: ColorLegendType;
487
- };
488
- };
489
- }
490
- /**
491
- * Options common to any thematic chart
492
- */
493
- export interface ThematicChartOptions extends BaseChartOptions {
494
- thematic: {
495
- projection: Projection;
496
- };
497
- }
498
- /**
499
- * Options common to any thematic chart
500
- */
501
- export interface ChoroplethChartOptions extends ThematicChartOptions {
502
- choropleth: {
503
- /**
504
- * customize color legend
505
- * enabled by default on select charts
506
- */
507
- colorLegend?: {
508
- /**
509
- * Text to display beside or on top of the legend
510
- * Position is determined by text length
511
- */
512
- title?: string;
513
- type: ColorLegendType;
514
- };
515
- };
516
- }
517
- export type ChartOptions = AlluvialChartOptions | AreaChartOptions | BarChartOptions | BoxplotChartOptions | BubbleChartOptions | BulletChartOptions | CirclePackChartOptions | ComboChartOptions | DonutChartOptions | GaugeChartOptions | HeatmapChartOptions | HistogramChartOptions | LineChartOptions | LollipopChartOptions | MeterChartOptions | PieChartOptions | RadarChartOptions | ScatterChartOptions | StackedAreaChartOptions | StackedBarChartOptions | TreeChartOptions | TreemapChartOptions | WorldCloudChartOptions;
1
+ import { Alignments, ArrowDirections, ChartTheme, ChartTypes, ColorLegendType, DividerStatus, GaugeTypes, Projection, Statuses, TreeTypes } from './enums';
2
+ import { BarOptions, GridOptions, LegendOptions, StackedBarOptions, ToolbarOptions, TooltipOptions, ZoomBarsOptions } from './components';
3
+ import { AxesOptions, AxisOptions, BinnedAxisOptions, ComboChartAxisOptions, TimeScaleOptions } from './axis-scales';
4
+ /**
5
+ * Base chart options common to any chart
6
+ */
7
+ export interface BaseChartOptions {
8
+ /**
9
+ * Optionally specify a title for the chart
10
+ */
11
+ title?: string;
12
+ /**
13
+ * boolean to disable animations (enabled by default)
14
+ */
15
+ animations?: boolean;
16
+ /**
17
+ * boolean to prevent the container from resizing
18
+ */
19
+ resizable?: boolean;
20
+ /**
21
+ * Optionally specify a width for the chart
22
+ */
23
+ width?: string;
24
+ /**
25
+ * Optionally specify a height for the chart
26
+ */
27
+ height?: string;
28
+ /**
29
+ * Optionally specify a theme for the chart
30
+ */
31
+ theme?: ChartTheme;
32
+ /**
33
+ * tooltip configuration
34
+ */
35
+ tooltip?: TooltipOptions;
36
+ /**
37
+ * legend configuration
38
+ */
39
+ legend?: LegendOptions;
40
+ /**
41
+ * toolbar configurations
42
+ */
43
+ toolbar?: ToolbarOptions;
44
+ /**
45
+ * Optional function to determine whether is filled based on datasetLabel, label, and/or data
46
+ */
47
+ getIsFilled?: (datasetLabel: string, label?: string, data?: any, defaultFilled?: boolean) => boolean;
48
+ /**
49
+ * Optional function to generate the fill color based on datasetLabel, label, and/or data
50
+ */
51
+ getFillColor?: (group: string, label?: string, data?: any, defaultFillColor?: string) => string;
52
+ /**
53
+ * Optional function to generate the stroke color based on datasetLabel, label, and/or data
54
+ * (note) - not all chart types support the stroke color (e.g. wordcloud)
55
+ */
56
+ getStrokeColor?: (group: string, label?: string, data?: any, defaultStrokeColor?: string) => string;
57
+ /**
58
+ * stylesheet options
59
+ */
60
+ style?: {
61
+ /**
62
+ * optional prefixing string for css classes (defaults to 'cc')
63
+ */
64
+ prefix?: string;
65
+ };
66
+ /**
67
+ * options related to charting data
68
+ */
69
+ data?: {
70
+ /**
71
+ * identifier for data groups
72
+ */
73
+ groupMapsTo?: string;
74
+ /**
75
+ * used to simulate data loading in skeleton way
76
+ */
77
+ loading?: boolean;
78
+ /**
79
+ * options related to pre-selected data groups
80
+ * Remains empty if every legend item is active or dataset doesn't have the data groups.
81
+ */
82
+ selectedGroups?: string[];
83
+ };
84
+ /**
85
+ * options related to color scales
86
+ */
87
+ color?: {
88
+ /**
89
+ @example
90
+ { 'Dataset 1': 'blue' }
91
+ */
92
+ scale?: object;
93
+ /**
94
+ * use a carbon dataviz preset color palette
95
+ * put the index (selection of which variant)
96
+ */
97
+ pairing?: {
98
+ /**
99
+ * the number of color variants in the palette (defaults to using the number of data groups in the given data)
100
+ */
101
+ numberOfVariants?: number;
102
+ /**
103
+ * the option number of the color paring
104
+ */
105
+ option?: number;
106
+ };
107
+ gradient?: {
108
+ enabled?: boolean;
109
+ /**
110
+ * hex color array
111
+ * e.g. ['#fff', '#000', ...]
112
+ */
113
+ colors?: Array<string>;
114
+ };
115
+ };
116
+ /**
117
+ * whether this type of chart is experimental
118
+ */
119
+ experimental?: boolean;
120
+ }
121
+ /**
122
+ * Options common to any chart with an axis
123
+ */
124
+ export interface AxisChartOptions extends BaseChartOptions {
125
+ axes?: AxesOptions<AxisOptions>;
126
+ grid?: GridOptions;
127
+ timeScale?: TimeScaleOptions;
128
+ /**
129
+ * zoombar configuration
130
+ */
131
+ zoomBar?: ZoomBarsOptions;
132
+ }
133
+ /**
134
+ * Options common to binned charts with an axis
135
+ */
136
+ export interface BinnedAxisChartOptions extends AxisChartOptions {
137
+ axes?: AxesOptions<BinnedAxisOptions>;
138
+ grid?: GridOptions;
139
+ timeScale?: TimeScaleOptions;
140
+ /**
141
+ * zoombar configuration
142
+ */
143
+ zoomBar?: ZoomBarsOptions;
144
+ }
145
+ /**
146
+ * options specific to boxplot charts
147
+ */
148
+ export type BoxplotChartOptions = AxisChartOptions;
149
+ /**
150
+ * options specific to bar charts
151
+ */
152
+ export interface BarChartOptions extends AxisChartOptions {
153
+ bars?: BarOptions;
154
+ }
155
+ /**
156
+ * options specific to stacked bar charts
157
+ */
158
+ export interface StackedBarChartOptions extends BarChartOptions {
159
+ bars?: StackedBarOptions;
160
+ }
161
+ /**
162
+ * options specific to scatter charts
163
+ */
164
+ export interface ScatterChartOptions extends AxisChartOptions {
165
+ /**
166
+ * options for the points
167
+ */
168
+ points?: {
169
+ /**
170
+ * sets the radius of the point
171
+ */
172
+ radius: number;
173
+ fillOpacity?: number;
174
+ filled?: boolean;
175
+ enabled?: boolean;
176
+ };
177
+ }
178
+ /**
179
+ * options specific to lollipop charts
180
+ */
181
+ export type LollipopChartOptions = ScatterChartOptions;
182
+ /**
183
+ * options specific to bubble charts
184
+ */
185
+ export interface BubbleChartOptions extends AxisChartOptions {
186
+ /**
187
+ * options for the individual bubbles
188
+ */
189
+ bubble?: {
190
+ /**
191
+ * the key to lookup in charting data for the bubble radius value
192
+ */
193
+ radiusMapsTo?: string;
194
+ /**
195
+ * options for what the bubble radius value maps to
196
+ */
197
+ radiusLabel?: string;
198
+ /**
199
+ * A function that would determine the range of the bubble radius to use
200
+ * Returns an array with the 1st value being the min and the 2nd value being the max radius
201
+ */
202
+ radiusRange?: (min: number, max: number) => number[];
203
+ /**
204
+ * Opacity of the fills used within each circle
205
+ */
206
+ fillOpacity?: number;
207
+ /**
208
+ * enabled scatter dot or not
209
+ */
210
+ enabled?: boolean;
211
+ };
212
+ }
213
+ /**
214
+ * options specific to bullet charts
215
+ */
216
+ export interface BulletChartOptions extends AxisChartOptions {
217
+ /**
218
+ * options for the individual bullets
219
+ */
220
+ bullet?: {
221
+ performanceAreaTitles?: string[];
222
+ };
223
+ }
224
+ /**
225
+ * options specific to histogram charts
226
+ */
227
+ export interface HistogramChartOptions extends AxisChartOptions {
228
+ /**
229
+ * options related to bins
230
+ */
231
+ bins?: {
232
+ rangeLabel?: string;
233
+ };
234
+ }
235
+ /**
236
+ * options specific to line charts
237
+ */
238
+ export interface LineChartOptions extends ScatterChartOptions {
239
+ /**
240
+ * options for the curve of the line
241
+ */
242
+ curve?: string | {
243
+ name: string;
244
+ };
245
+ }
246
+ /**
247
+ * options specific to area charts
248
+ */
249
+ export interface AreaChartOptions extends AxisChartOptions {
250
+ /**
251
+ * options for the curve of the line
252
+ */
253
+ curve?: string | {
254
+ name: string;
255
+ };
256
+ /**
257
+ * options to bound the area of the chart
258
+ */
259
+ bounds?: {
260
+ upperBoundMapsTo?: string;
261
+ lowerBoundMapsTo?: string;
262
+ };
263
+ }
264
+ /**
265
+ * options specific to area charts
266
+ */
267
+ export interface StackedAreaChartOptions extends ScatterChartOptions {
268
+ /**
269
+ * options for the curve of the line
270
+ */
271
+ curve?: string | {
272
+ name: string;
273
+ };
274
+ }
275
+ /**
276
+ * options specific to world cloud charts
277
+ */
278
+ export interface WordCloudChartTooltipOptions extends TooltipOptions {
279
+ /** the label that shows up by the highlighted word in the tooltip */
280
+ wordLabel?: string;
281
+ /** the label that shows up by the value of the highlighted word in the tooltip */
282
+ valueLabel?: string;
283
+ }
284
+ export interface WorldCloudChartOptions extends BaseChartOptions {
285
+ wordCloud?: {
286
+ /** what key in your charting data will the font sizes map to? */
287
+ fontSizeMapsTo?: string;
288
+ /** a function that'll decide the range of font sizes, e.g. [10, 80]
289
+ * @example
290
+ * (chartSize, data) => {}
291
+ * */
292
+ fontSizeRange?: (chartSize: any, data: any) => object;
293
+ /** what key in your charting data will the words map to? */
294
+ wordMapsTo?: string;
295
+ };
296
+ /**
297
+ * tooltip configuration
298
+ */
299
+ tooltip?: WordCloudChartTooltipOptions;
300
+ }
301
+ /**
302
+ * options specific to pie charts
303
+ */
304
+ export interface PieChartOptions extends BaseChartOptions {
305
+ pie?: {
306
+ labels?: {
307
+ formatter?: (data: any) => string;
308
+ enabled?: boolean;
309
+ };
310
+ alignment?: Alignments;
311
+ /**
312
+ * identifier for value key in your charting data
313
+ * defaults to value
314
+ */
315
+ valueMapsTo?: string;
316
+ sortFunction?: (a: {
317
+ group: string;
318
+ value: number;
319
+ }, b: {
320
+ group: string;
321
+ value: number;
322
+ }) => number;
323
+ };
324
+ }
325
+ /**
326
+ * options specific to gauge charts
327
+ */
328
+ export interface GaugeChartOptions extends BaseChartOptions {
329
+ gauge?: {
330
+ arcWidth?: number;
331
+ deltaArrow?: {
332
+ direction?: ArrowDirections;
333
+ size?: (value: number) => number | string;
334
+ enabled: boolean;
335
+ };
336
+ showPercentageSymbol?: boolean;
337
+ status?: Statuses;
338
+ deltaFontSize?: (value: number) => number | string;
339
+ numberSpacing?: number;
340
+ numberFormatter?: (value: number) => string;
341
+ valueFontSize?: (value: number) => number | string;
342
+ type?: GaugeTypes;
343
+ alignment?: Alignments;
344
+ };
345
+ }
346
+ /**
347
+ * options specific to donut charts
348
+ */
349
+ export interface DonutChartOptions extends PieChartOptions {
350
+ donut?: {
351
+ center?: {
352
+ label?: string;
353
+ number?: number;
354
+ numberFontSize?: (value: number) => number | string;
355
+ titleFontSize?: (value: number) => number | string;
356
+ titleYPosition?: (value: number) => number;
357
+ numberFormatter?: (value: number) => string;
358
+ };
359
+ alignment?: Alignments;
360
+ };
361
+ }
362
+ export interface MeterChartOptions extends BaseChartOptions {
363
+ meter?: {
364
+ showLabels?: boolean;
365
+ proportional?: {
366
+ total?: number;
367
+ unit?: string;
368
+ };
369
+ peak?: number;
370
+ status?: {
371
+ ranges: Array<{
372
+ range: [
373
+ number,
374
+ number
375
+ ];
376
+ status: Statuses;
377
+ }>;
378
+ };
379
+ height?: number;
380
+ title?: {
381
+ percentageIndicator?: {
382
+ /**
383
+ * rendering of the percentage value relative to the dataset within title
384
+ */
385
+ enabled?: boolean;
386
+ };
387
+ };
388
+ };
389
+ }
390
+ export interface ProportionalMeterChartOptions extends BaseChartOptions {
391
+ meter?: {
392
+ proportional?: {
393
+ total?: number;
394
+ unit?: string;
395
+ };
396
+ };
397
+ }
398
+ /**
399
+ * options specific to radar charts
400
+ */
401
+ export interface RadarChartOptions extends BaseChartOptions {
402
+ radar?: {
403
+ axes: {
404
+ angle: string;
405
+ value: string;
406
+ };
407
+ alignment?: Alignments;
408
+ };
409
+ }
410
+ /**
411
+ * options specific to combo charts
412
+ */
413
+ export interface ComboChartOptions extends AxisChartOptions {
414
+ axes?: AxesOptions<ComboChartAxisOptions>;
415
+ comboChartTypes: Array<{
416
+ type: ChartTypes | any;
417
+ options?: object;
418
+ correspondingDatasets: Array<string>;
419
+ }>;
420
+ }
421
+ export type TreemapChartOptions = BaseChartOptions;
422
+ export interface TreeChartOptions extends BaseChartOptions {
423
+ tree?: {
424
+ type?: TreeTypes;
425
+ rootTitle?: string;
426
+ };
427
+ }
428
+ export interface CirclePackChartOptions extends BaseChartOptions {
429
+ circlePack?: {
430
+ circles: {
431
+ fillOpacity: number;
432
+ };
433
+ hierachyLevel: number;
434
+ padding?: {
435
+ outer?: number;
436
+ inner?: number;
437
+ };
438
+ };
439
+ }
440
+ /**
441
+ * options specific to Alluvial charts
442
+ */
443
+ export interface AlluvialChartOptions extends BaseChartOptions {
444
+ alluvial: {
445
+ units?: string;
446
+ /**
447
+ * List of nodes to draw
448
+ */
449
+ nodes: Array<{
450
+ name: string;
451
+ category?: string;
452
+ }>;
453
+ /**
454
+ * Node alignment (Default is center)
455
+ */
456
+ nodeAlignment?: Alignments;
457
+ /**
458
+ * Set the node padding
459
+ */
460
+ nodePadding?: number;
461
+ /**
462
+ * Enable single color usage for lines
463
+ */
464
+ monochrome?: boolean;
465
+ };
466
+ }
467
+ /**
468
+ * options specific to Heatmap charts
469
+ */
470
+ export interface HeatmapChartOptions extends BaseChartOptions {
471
+ heatmap: {
472
+ /**
473
+ * Divider width state - will default to auto
474
+ * No cell divider for cell dimensions less than 16
475
+ */
476
+ divider?: {
477
+ state?: DividerStatus;
478
+ };
479
+ /**
480
+ * customize color legend
481
+ * enabled by default on select charts
482
+ */
483
+ colorLegend?: {
484
+ /**
485
+ * Text to display beside or on top of the legend
486
+ * Position is determined by text length
487
+ */
488
+ title?: string;
489
+ type: ColorLegendType;
490
+ };
491
+ };
492
+ }
493
+ /**
494
+ * Options common to any thematic chart
495
+ */
496
+ export interface ThematicChartOptions extends BaseChartOptions {
497
+ thematic: {
498
+ projection: Projection;
499
+ };
500
+ }
501
+ /**
502
+ * Options common to any thematic chart
503
+ */
504
+ export interface ChoroplethChartOptions extends ThematicChartOptions {
505
+ choropleth: {
506
+ /**
507
+ * customize color legend
508
+ * enabled by default on select charts
509
+ */
510
+ colorLegend?: {
511
+ /**
512
+ * Text to display beside or on top of the legend
513
+ * Position is determined by text length
514
+ */
515
+ title?: string;
516
+ type: ColorLegendType;
517
+ };
518
+ };
519
+ }
520
+ export type ChartOptions = AlluvialChartOptions | AreaChartOptions | BarChartOptions | BoxplotChartOptions | BubbleChartOptions | BulletChartOptions | CirclePackChartOptions | ComboChartOptions | DonutChartOptions | GaugeChartOptions | HeatmapChartOptions | HistogramChartOptions | LineChartOptions | LollipopChartOptions | MeterChartOptions | PieChartOptions | RadarChartOptions | ScatterChartOptions | StackedAreaChartOptions | StackedBarChartOptions | TreeChartOptions | TreemapChartOptions | WorldCloudChartOptions;