@cdc/chart 4.23.10 → 4.23.11

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 (56) hide show
  1. package/dist/cdcchart.js +30989 -29057
  2. package/examples/feature/bar/example-bar-chart.json +1 -46
  3. package/examples/feature/bar/lollipop.json +156 -0
  4. package/examples/feature/combo/planet-combo-example-config.json +99 -9
  5. package/examples/feature/dev-4261.json +399 -0
  6. package/examples/feature/forest-plot/{broken.json → linear.json} +55 -50
  7. package/examples/feature/forest-plot/logarithmic.json +306 -0
  8. package/examples/feature/line/line-points.json +340 -0
  9. package/examples/feature/regions/index.json +462 -0
  10. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +181 -48
  11. package/examples/sparkline-multilple.json +846 -0
  12. package/index.html +10 -6
  13. package/package.json +3 -3
  14. package/src/CdcChart.tsx +75 -63
  15. package/src/_stories/Chart.stories.tsx +188 -0
  16. package/src/_stories/Chart.tooltip.stories.tsx +305 -0
  17. package/src/_stories/ChartBrush.stories.tsx +19 -0
  18. package/src/_stories/ChartSuppress.stories.tsx +19 -0
  19. package/src/_stories/_mock/brush_mock.json +393 -0
  20. package/src/_stories/_mock/suppress_mock.json +911 -0
  21. package/src/components/AreaChart.Stacked.jsx +4 -5
  22. package/src/components/AreaChart.jsx +6 -35
  23. package/src/components/{BarChart.Horizontal.jsx → BarChart.Horizontal.tsx} +106 -29
  24. package/src/components/{BarChart.StackedHorizontal.jsx → BarChart.StackedHorizontal.tsx} +22 -17
  25. package/src/components/{BarChart.StackedVertical.jsx → BarChart.StackedVertical.tsx} +22 -26
  26. package/src/components/{BarChart.Vertical.jsx → BarChart.Vertical.tsx} +175 -31
  27. package/src/components/BarChart.jsx +1 -1
  28. package/src/components/DeviationBar.jsx +4 -3
  29. package/src/components/EditorPanel.jsx +176 -50
  30. package/src/components/ForestPlot/ForestPlotProps.ts +11 -0
  31. package/src/components/ForestPlot/Readme.md +0 -0
  32. package/src/components/ForestPlot/index.scss +1 -0
  33. package/src/components/{ForestPlot.jsx → ForestPlot/index.tsx} +51 -31
  34. package/src/components/ForestPlotSettings.jsx +162 -113
  35. package/src/components/Legend.jsx +36 -3
  36. package/src/components/{LineChart.Circle.tsx → LineChart/LineChart.Circle.tsx} +26 -29
  37. package/src/components/LineChart/LineChartProps.ts +17 -0
  38. package/src/components/LineChart/index.scss +1 -0
  39. package/src/components/{LineChart.tsx → LineChart/index.tsx} +64 -35
  40. package/src/components/LinearChart.jsx +120 -60
  41. package/src/components/PairedBarChart.jsx +2 -2
  42. package/src/components/Series.jsx +22 -3
  43. package/src/components/ZoomBrush.tsx +168 -0
  44. package/src/data/initial-state.js +27 -12
  45. package/src/hooks/useBarChart.js +71 -7
  46. package/src/hooks/useColorScale.ts +50 -0
  47. package/src/hooks/useEditorPermissions.js +22 -4
  48. package/src/hooks/{useMinMax.js → useMinMax.ts} +75 -23
  49. package/src/hooks/{useRightAxis.js → useRightAxis.ts} +10 -2
  50. package/src/hooks/{useScales.js → useScales.ts} +64 -17
  51. package/src/hooks/useTooltip.jsx +68 -41
  52. package/src/scss/main.scss +3 -35
  53. package/src/types/ChartConfig.ts +43 -0
  54. package/src/types/ChartContext.ts +38 -0
  55. package/src/types/ChartProps.ts +7 -0
  56. package/src/types/ForestPlot.ts +60 -0
@@ -0,0 +1,393 @@
1
+ {
2
+ "type": "chart",
3
+ "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
7
+ "title": "",
8
+ "showTitle": true,
9
+ "showDownloadMediaButton": false,
10
+ "theme": "theme-blue",
11
+ "animate": false,
12
+ "fontSize": "medium",
13
+ "lineDatapointStyle": "hover",
14
+ "barHasBorder": "false",
15
+ "isLollipopChart": false,
16
+ "lollipopShape": "circle",
17
+ "lollipopColorStyle": "two-tone",
18
+ "visualizationSubType": "regular",
19
+ "barStyle": "",
20
+ "roundingStyle": "standard",
21
+ "tipRounding": "top",
22
+ "isResponsiveTicks": false,
23
+ "general": {
24
+ "showDownloadButton": false
25
+ },
26
+ "padding": {
27
+ "left": 5,
28
+ "right": 5
29
+ },
30
+ "yAxis": {
31
+ "hideAxis": false,
32
+ "displayNumbersOnBar": false,
33
+ "hideLabel": false,
34
+ "hideTicks": false,
35
+ "size": 50,
36
+ "gridLines": false,
37
+ "enablePadding": false,
38
+ "min": "",
39
+ "max": "",
40
+ "labelColor": "#333",
41
+ "tickLabelColor": "#333",
42
+ "tickColor": "#333",
43
+ "rightHideAxis": true,
44
+ "rightAxisSize": 50,
45
+ "rightLabel": "",
46
+ "rightLabelOffsetSize": 0,
47
+ "rightAxisLabelColor": "#333",
48
+ "rightAxisTickLabelColor": "#333",
49
+ "rightAxisTickColor": "#333",
50
+ "numTicks": "",
51
+ "axisPadding": 0,
52
+ "tickRotation": 0,
53
+ "anchors": []
54
+ },
55
+ "boxplot": {
56
+ "plots": [],
57
+ "borders": "true",
58
+ "firstQuartilePercentage": 25,
59
+ "thirdQuartilePercentage": 75,
60
+ "boxWidthPercentage": 40,
61
+ "plotOutlierValues": false,
62
+ "plotNonOutlierValues": true,
63
+ "legend": {
64
+ "showHowToReadText": false,
65
+ "howToReadText": ""
66
+ },
67
+ "labels": {
68
+ "q1": "Lower Quartile",
69
+ "q2": "q2",
70
+ "q3": "Upper Quartile",
71
+ "q4": "q4",
72
+ "minimum": "Minimum",
73
+ "maximum": "Maximum",
74
+ "mean": "Mean",
75
+ "median": "Median",
76
+ "sd": "Standard Deviation",
77
+ "iqr": "Interquartile Range",
78
+ "total": "Total",
79
+ "outliers": "Outliers",
80
+ "values": "Values",
81
+ "lowerBounds": "Lower Bounds",
82
+ "upperBounds": "Upper Bounds"
83
+ }
84
+ },
85
+ "topAxis": {
86
+ "hasLine": false
87
+ },
88
+ "isLegendValue": false,
89
+ "barThickness": 0.35,
90
+ "barHeight": 25,
91
+ "barSpace": 15,
92
+ "heights": {
93
+ "vertical": 300,
94
+ "horizontal": 750
95
+ },
96
+ "xAxis": {
97
+ "sortDates": false,
98
+ "anchors": [],
99
+ "type": "date",
100
+ "showTargetLabel": true,
101
+ "targetLabel": "Target",
102
+ "hideAxis": false,
103
+ "hideLabel": false,
104
+ "hideTicks": false,
105
+ "size": 75,
106
+ "tickRotation": 0,
107
+ "min": "",
108
+ "max": "",
109
+ "labelColor": "#333",
110
+ "tickLabelColor": "#333",
111
+ "tickColor": "#333",
112
+ "numTicks": "",
113
+ "labelOffset": 65,
114
+ "axisPadding": 0,
115
+ "target": 0,
116
+ "maxTickRotation": 0,
117
+ "dataKey": "Date",
118
+ "dateParseFormat": "%m/%d/%Y",
119
+ "dateDisplayFormat": "%m/%d/%Y",
120
+ "tickWidthMax": 91
121
+ },
122
+ "table": {
123
+ "label": "Data Table",
124
+ "expanded": true,
125
+ "limitHeight": false,
126
+ "height": "",
127
+ "caption": "",
128
+ "showDownloadUrl": false,
129
+ "showDataTableLink": true,
130
+ "indexLabel": "",
131
+ "download": false,
132
+ "showVertical": true,
133
+ "show": true
134
+ },
135
+ "orientation": "vertical",
136
+ "color": "pinkpurple",
137
+ "columns": {},
138
+ "legend": {
139
+ "hide": false,
140
+ "behavior": "isolate",
141
+ "singleRow": false,
142
+ "colorCode": "",
143
+ "reverseLabelOrder": false,
144
+ "description": "",
145
+ "dynamicLegend": false,
146
+ "dynamicLegendDefaultText": "Show All",
147
+ "dynamicLegendItemLimit": 5,
148
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
149
+ "dynamicLegendChartMessage": "Select Options from the Legend",
150
+ "lineMode": false,
151
+ "verticalSorted": false
152
+ },
153
+ "brush": {
154
+ "height": 25,
155
+ "data": [
156
+ {
157
+ "Date": "1/15/2016",
158
+ "Data 1": "900",
159
+ "Data 2": "135",
160
+ "Data 3": "300",
161
+ "Data 4": "95",
162
+ "Data 5": "120",
163
+ "Data 6": "310"
164
+ },
165
+ {
166
+ "Date": "2/15/2016",
167
+ "Data 1": "4000",
168
+ "Data 2": "90",
169
+ "Data 3": "240",
170
+ "Data 4": "60",
171
+ "Data 5": "160",
172
+ "Data 6": "2000"
173
+ },
174
+ {
175
+ "Date": "3/15/2016",
176
+ "Data 1": "500",
177
+ "Data 2": "300",
178
+ "Data 3": "290",
179
+ "Data 4": "100",
180
+ "Data 5": "200",
181
+ "Data 6": "250"
182
+ },
183
+ {
184
+ "Date": "4/15/2016",
185
+ "Data 1": "1200",
186
+ "Data 2": "160",
187
+ "Data 3": "230",
188
+ "Data 4": "180",
189
+ "Data 5": "160",
190
+ "Data 6": "220"
191
+ },
192
+ {
193
+ "Date": "5/15/2016",
194
+ "Data 1": "8000",
195
+ "Data 2": "350",
196
+ "Data 3": "300",
197
+ "Data 4": "150",
198
+ "Data 5": "130",
199
+ "Data 6": "100"
200
+ },
201
+ {
202
+ "Date": "6/15/2016",
203
+ "Data 1": "9000",
204
+ "Data 2": "220",
205
+ "Data 3": "320",
206
+ "Data 4": "100",
207
+ "Data 5": "220",
208
+ "Data 6": "300"
209
+ }
210
+ ],
211
+ "active": true,
212
+ "pattern_id": "brush_pattern",
213
+ "accent_color": "#ddd"
214
+ },
215
+ "exclusions": {
216
+ "active": false,
217
+ "keys": []
218
+ },
219
+ "palette": "qualitative-bold",
220
+ "isPaletteReversed": false,
221
+ "twoColor": {
222
+ "palette": "monochrome-1",
223
+ "isPaletteReversed": false
224
+ },
225
+ "labels": false,
226
+ "dataFormat": {
227
+ "commas": false,
228
+ "prefix": "",
229
+ "suffix": "",
230
+ "abbreviated": false,
231
+ "bottomSuffix": "",
232
+ "bottomPrefix": "",
233
+ "bottomAbbreviated": false,
234
+ "useCommas": false,
235
+ "roundToPlace": ""
236
+ },
237
+ "confidenceKeys": {},
238
+ "visual": {
239
+ "border": true,
240
+ "accent": true,
241
+ "background": true,
242
+ "verticalHoverLine": false,
243
+ "horizontalHoverLine": false
244
+ },
245
+ "useLogScale": false,
246
+ "filterBehavior": "Filter Change",
247
+ "highlightedBarValues": [],
248
+ "series": [
249
+ {
250
+ "dataKey": "Data 1",
251
+ "type": "Area Chart",
252
+ "axis": "Left",
253
+ "name": "One",
254
+ "tooltip": true
255
+ },
256
+ {
257
+ "dataKey": "Data 2",
258
+ "type": "Area Chart",
259
+ "axis": "Left",
260
+ "name": "two",
261
+ "tooltip": true
262
+ },
263
+ {
264
+ "dataKey": "Data 3",
265
+ "type": "Area Chart",
266
+ "axis": "Left",
267
+ "name": "three",
268
+ "tooltip": true
269
+ },
270
+ {
271
+ "dataKey": "Data 4",
272
+ "type": "Area Chart",
273
+ "axis": "Left",
274
+ "name": "four",
275
+ "tooltip": true
276
+ }
277
+ ],
278
+ "tooltips": {
279
+ "opacity": 90
280
+ },
281
+ "forestPlot": {
282
+ "startAt": 0,
283
+ "width": "auto",
284
+ "colors": {
285
+ "line": "",
286
+ "shape": ""
287
+ },
288
+ "estimateField": "",
289
+ "estimateRadius": "",
290
+ "lowerCiField": "",
291
+ "upperCiField": "",
292
+ "shape": "",
293
+ "rowHeight": 20,
294
+ "showZeroLine": false,
295
+ "description": {
296
+ "show": true,
297
+ "text": "description",
298
+ "location": 0
299
+ },
300
+ "result": {
301
+ "show": true,
302
+ "text": "result",
303
+ "location": 100
304
+ },
305
+ "radius": {
306
+ "min": 1,
307
+ "max": 8,
308
+ "scalingColumn": ""
309
+ },
310
+ "regression": {
311
+ "lower": 0,
312
+ "upper": 0,
313
+ "estimateField": 0
314
+ },
315
+ "leftWidthOffset": 0,
316
+ "rightWidthOffset": 0
317
+ },
318
+ "area": {
319
+ "isStacked": false
320
+ },
321
+ "showChartBrush": false,
322
+ "customColors": [
323
+ "red",
324
+ "orange",
325
+ "yellow",
326
+ "teal"
327
+ ],
328
+ "visualizationType": "Area Chart",
329
+ "data": [
330
+ {
331
+ "Date": "1/15/2016",
332
+ "Data 1": "900",
333
+ "Data 2": "135",
334
+ "Data 3": "300",
335
+ "Data 4": "95",
336
+ "Data 5": "120",
337
+ "Data 6": "310"
338
+ },
339
+ {
340
+ "Date": "2/15/2016",
341
+ "Data 1": "4000",
342
+ "Data 2": "90",
343
+ "Data 3": "240",
344
+ "Data 4": "60",
345
+ "Data 5": "160",
346
+ "Data 6": "2000"
347
+ },
348
+ {
349
+ "Date": "3/15/2016",
350
+ "Data 1": "500",
351
+ "Data 2": "300",
352
+ "Data 3": "290",
353
+ "Data 4": "100",
354
+ "Data 5": "200",
355
+ "Data 6": "250"
356
+ },
357
+ {
358
+ "Date": "4/15/2016",
359
+ "Data 1": "1200",
360
+ "Data 2": "160",
361
+ "Data 3": "230",
362
+ "Data 4": "180",
363
+ "Data 5": "160",
364
+ "Data 6": "220"
365
+ },
366
+ {
367
+ "Date": "5/15/2016",
368
+ "Data 1": "8000",
369
+ "Data 2": "350",
370
+ "Data 3": "300",
371
+ "Data 4": "150",
372
+ "Data 5": "130",
373
+ "Data 6": "100"
374
+ },
375
+ {
376
+ "Date": "6/15/2016",
377
+ "Data 1": "9000",
378
+ "Data 2": "220",
379
+ "Data 3": "320",
380
+ "Data 4": "100",
381
+ "Data 5": "220",
382
+ "Data 6": "300"
383
+ }
384
+ ],
385
+ "dataFileName": "valid-area-chart.json",
386
+ "dataFileSourceType": "file",
387
+ "dataDescription": {
388
+ "horizontal": false,
389
+ "series": false
390
+ },
391
+ "validated": 4.23,
392
+ "dynamicMarginTop": 0
393
+ }