@cdc/chart 4.25.1 → 4.25.3-6

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 (32) hide show
  1. package/dist/cdcchart.js +40346 -40084
  2. package/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json +396 -230
  3. package/examples/private/line-issue.json +497 -0
  4. package/index.html +6 -3
  5. package/package.json +2 -2
  6. package/src/CdcChartComponent.tsx +113 -105
  7. package/src/ConfigContext.tsx +6 -1
  8. package/src/_stories/Chart.DynamicSeries.stories.tsx +16 -1
  9. package/src/_stories/Chart.Filters.stories.tsx +19 -0
  10. package/src/components/Axis/Categorical.Axis.tsx +1 -1
  11. package/src/components/BarChart/components/BarChart.Vertical.tsx +3 -5
  12. package/src/components/BarChart/components/BarChart.jsx +24 -4
  13. package/src/components/BarChart/components/context.tsx +1 -0
  14. package/src/components/BrushChart.tsx +44 -24
  15. package/src/components/DeviationBar.jsx +2 -2
  16. package/src/components/EditorPanel/EditorPanel.tsx +2 -2
  17. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +3 -1
  18. package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts +6 -1
  19. package/src/components/Legend/helpers/index.ts +10 -4
  20. package/src/components/LineChart/components/LineChart.Circle.tsx +17 -9
  21. package/src/components/LineChart/index.tsx +2 -2
  22. package/src/components/LinearChart.tsx +12 -12
  23. package/src/components/ZoomBrush.tsx +1 -1
  24. package/src/helpers/getColorScale.ts +5 -9
  25. package/src/helpers/isConvertLineToBarGraph.ts +10 -3
  26. package/src/hooks/useBarChart.ts +12 -4
  27. package/src/hooks/useMinMax.ts +7 -8
  28. package/src/hooks/useScales.ts +10 -0
  29. package/src/hooks/useTooltip.tsx +12 -1
  30. package/src/scss/main.scss +1 -1
  31. package/src/store/chart.actions.ts +40 -0
  32. package/src/store/chart.reducer.ts +83 -0
@@ -0,0 +1,497 @@
1
+ {
2
+ "annotations": [],
3
+ "type": "chart",
4
+ "debugSvg": false,
5
+ "chartMessage": {
6
+ "noData": "No Data Available"
7
+ },
8
+ "title": "",
9
+ "showTitle": false,
10
+ "showDownloadMediaButton": false,
11
+ "theme": "theme-blue",
12
+ "animate": false,
13
+ "fontSize": "medium",
14
+ "lineDatapointStyle": "hover",
15
+ "lineDatapointColor": "Same as Line",
16
+ "barHasBorder": "false",
17
+ "isLollipopChart": false,
18
+ "lollipopShape": "circle",
19
+ "lollipopColorStyle": "two-tone",
20
+ "visualizationSubType": "regular",
21
+ "barStyle": "flat",
22
+ "roundingStyle": "standard",
23
+ "tipRounding": "top",
24
+ "isResponsiveTicks": true,
25
+ "general": {
26
+ "annotationDropdownText": "Annotations",
27
+ "showDownloadButton": false,
28
+ "showMissingDataLabel": false,
29
+ "showSuppressedSymbol": true,
30
+ "showZeroValueData": false,
31
+ "hideNullValue": true
32
+ },
33
+ "padding": {
34
+ "left": 5,
35
+ "right": 5
36
+ },
37
+ "preliminaryData": [],
38
+ "yAxis": {
39
+ "hideAxis": false,
40
+ "displayNumbersOnBar": false,
41
+ "hideLabel": false,
42
+ "hideTicks": false,
43
+ "size": "75",
44
+ "gridLines": false,
45
+ "enablePadding": false,
46
+ "min": "0.1",
47
+ "max": "3",
48
+ "labelColor": "#333",
49
+ "tickLabelColor": "#333",
50
+ "tickColor": "#333",
51
+ "rightHideAxis": true,
52
+ "rightAxisSize": 0,
53
+ "rightLabel": "",
54
+ "rightLabelOffsetSize": 0,
55
+ "rightAxisLabelColor": "#333",
56
+ "rightAxisTickLabelColor": "#333",
57
+ "rightAxisTickColor": "#333",
58
+ "numTicks": "6",
59
+ "axisPadding": 0,
60
+ "scalePadding": 10,
61
+ "tickRotation": 0,
62
+ "anchors": [],
63
+ "shoMissingDataLabel": true,
64
+ "showMissingDataLine": true,
65
+ "categories": [],
66
+ "label": "Reported cases per 100,000 Population",
67
+ "type": "linear"
68
+ },
69
+ "boxplot": {
70
+ "plots": [],
71
+ "borders": "true",
72
+ "plotOutlierValues": false,
73
+ "plotNonOutlierValues": true,
74
+ "labels": {
75
+ "q1": "Lower Quartile",
76
+ "q2": "q2",
77
+ "q3": "Upper Quartile",
78
+ "q4": "q4",
79
+ "minimum": "Minimum",
80
+ "maximum": "Maximum",
81
+ "mean": "Mean",
82
+ "median": "Median",
83
+ "sd": "Standard Deviation",
84
+ "iqr": "Interquartile Range",
85
+ "count": "Count",
86
+ "outliers": "Outliers",
87
+ "values": "Values",
88
+ "lowerBounds": "Lower Bounds",
89
+ "upperBounds": "Upper Bounds"
90
+ }
91
+ },
92
+ "topAxis": {
93
+ "hasLine": false
94
+ },
95
+ "isLegendValue": false,
96
+ "barThickness": 0.35,
97
+ "barHeight": 25,
98
+ "barSpace": 15,
99
+ "heights": {
100
+ "vertical": 300,
101
+ "horizontal": 750
102
+ },
103
+ "xAxis": {
104
+ "sortDates": false,
105
+ "anchors": [],
106
+ "type": "categorical",
107
+ "showTargetLabel": true,
108
+ "targetLabel": "Target",
109
+ "hideAxis": false,
110
+ "hideLabel": false,
111
+ "hideTicks": false,
112
+ "size": 75,
113
+ "tickRotation": 0,
114
+ "min": "",
115
+ "max": "",
116
+ "labelColor": "#333",
117
+ "tickLabelColor": "#333",
118
+ "tickColor": "#333",
119
+ "numTicks": "",
120
+ "labelOffset": 0,
121
+ "axisPadding": 200,
122
+ "target": 0,
123
+ "maxTickRotation": 0,
124
+ "padding": 5,
125
+ "showYearsOnce": false,
126
+ "sortByRecentDate": false,
127
+ "dataKey": "Year",
128
+ "label": "Year",
129
+ "manual": true,
130
+ "axisBBox": 52.939998626708984,
131
+ "tickWidthMax": 41
132
+ },
133
+ "table": {
134
+ "label": "Data Table",
135
+ "expanded": true,
136
+ "limitHeight": false,
137
+ "height": "",
138
+ "caption": "",
139
+ "showDownloadUrl": false,
140
+ "showDataTableLink": true,
141
+ "showDownloadLinkBelow": true,
142
+ "indexLabel": "",
143
+ "download": true,
144
+ "showVertical": false,
145
+ "dateDisplayFormat": "",
146
+ "showMissingDataLabel": true,
147
+ "showSuppressedSymbol": true,
148
+ "show": true
149
+ },
150
+ "orientation": "vertical",
151
+ "color": "pinkpurple",
152
+ "columns": {},
153
+ "legend": {
154
+ "hide": false,
155
+ "behavior": "isolate",
156
+ "axisAlign": true,
157
+ "singleRow": true,
158
+ "colorCode": "",
159
+ "reverseLabelOrder": false,
160
+ "description": "",
161
+ "dynamicLegend": false,
162
+ "dynamicLegendDefaultText": "Show All",
163
+ "dynamicLegendItemLimit": 5,
164
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
165
+ "dynamicLegendChartMessage": "Select Options from the Legend",
166
+ "label": "",
167
+ "lineMode": false,
168
+ "verticalSorted": false,
169
+ "highlightOnHover": false,
170
+ "hideSuppressedLabels": false,
171
+ "hideSuppressionLink": false,
172
+ "seriesHighlight": [],
173
+ "style": "boxes",
174
+ "subStyle": "linear blocks",
175
+ "tickRotation": "",
176
+ "hideBorder": {
177
+ "side": false,
178
+ "topBottom": true
179
+ },
180
+ "position": "top"
181
+ },
182
+ "brush": {
183
+ "height": 25,
184
+ "active": false
185
+ },
186
+ "exclusions": {
187
+ "active": false,
188
+ "keys": []
189
+ },
190
+ "palette": "qualitative-bold",
191
+ "isPaletteReversed": false,
192
+ "twoColor": {
193
+ "palette": "monochrome-1",
194
+ "isPaletteReversed": false
195
+ },
196
+ "labels": false,
197
+ "dataFormat": {
198
+ "commas": false,
199
+ "prefix": "",
200
+ "suffix": "",
201
+ "abbreviated": false,
202
+ "bottomSuffix": "",
203
+ "bottomPrefix": "",
204
+ "bottomAbbreviated": false,
205
+ "roundTo": "1"
206
+ },
207
+ "confidenceKeys": {},
208
+ "visual": {
209
+ "border": true,
210
+ "accent": true,
211
+ "background": true,
212
+ "verticalHoverLine": false,
213
+ "horizontalHoverLine": false
214
+ },
215
+ "useLogScale": false,
216
+ "filterBehavior": "Filter Change",
217
+ "highlightedBarValues": [],
218
+ "series": [
219
+ {
220
+ "dataKey": "American Indian/Alaska Native",
221
+ "type": "Line",
222
+ "axis": "Left",
223
+ "tooltip": true
224
+ },
225
+ {
226
+ "dataKey": "Asian/Pacific Islander",
227
+ "type": "Line",
228
+ "axis": "Left",
229
+ "tooltip": true
230
+ },
231
+ {
232
+ "dataKey": "Black, non-Hispanic",
233
+ "type": "Line",
234
+ "axis": "Left",
235
+ "tooltip": true
236
+ },
237
+ {
238
+ "dataKey": "White, non-Hispanic",
239
+ "type": "Line",
240
+ "axis": "Left",
241
+ "tooltip": true
242
+ },
243
+ {
244
+ "dataKey": "Hispanic",
245
+ "type": "Line",
246
+ "axis": "Left",
247
+ "tooltip": true
248
+ }
249
+ ],
250
+ "tooltips": {
251
+ "opacity": 90,
252
+ "singleSeries": false,
253
+ "dateDisplayFormat": ""
254
+ },
255
+ "forestPlot": {
256
+ "startAt": 0,
257
+ "colors": {
258
+ "line": "",
259
+ "shape": ""
260
+ },
261
+ "lineOfNoEffect": {
262
+ "show": true
263
+ },
264
+ "type": "",
265
+ "pooledResult": {
266
+ "diamondHeight": 5,
267
+ "column": ""
268
+ },
269
+ "estimateField": "",
270
+ "estimateRadius": "",
271
+ "shape": "square",
272
+ "rowHeight": 20,
273
+ "description": {
274
+ "show": true,
275
+ "text": "description",
276
+ "location": 0
277
+ },
278
+ "result": {
279
+ "show": true,
280
+ "text": "result",
281
+ "location": 100
282
+ },
283
+ "radius": {
284
+ "min": 2,
285
+ "max": 10,
286
+ "scalingColumn": ""
287
+ },
288
+ "regression": {
289
+ "lower": 0,
290
+ "upper": 0,
291
+ "estimateField": 0
292
+ },
293
+ "leftWidthOffset": 0,
294
+ "rightWidthOffset": 0,
295
+ "showZeroLine": false,
296
+ "leftLabel": "",
297
+ "rightLabel": ""
298
+ },
299
+ "area": {
300
+ "isStacked": false
301
+ },
302
+ "sankey": {
303
+ "title": {
304
+ "defaultColor": "black"
305
+ },
306
+ "iterations": 1,
307
+ "rxValue": 0.9,
308
+ "overallSize": {
309
+ "width": 900,
310
+ "height": 700
311
+ },
312
+ "margin": {
313
+ "margin_y": 25,
314
+ "margin_x": 0
315
+ },
316
+ "nodeSize": {
317
+ "nodeWidth": 26,
318
+ "nodeHeight": 40
319
+ },
320
+ "nodePadding": 55,
321
+ "nodeFontColor": "black",
322
+ "nodeColor": {
323
+ "default": "#ff8500",
324
+ "inactive": "#808080"
325
+ },
326
+ "linkColor": {
327
+ "default": "#ffc900",
328
+ "inactive": "#D3D3D3"
329
+ },
330
+ "opacity": {
331
+ "nodeOpacityDefault": 1,
332
+ "nodeOpacityInactive": 0.1,
333
+ "LinkOpacityDefault": 1,
334
+ "LinkOpacityInactive": 0.1
335
+ },
336
+ "storyNodeFontColor": "#006778",
337
+ "storyNodeText": [],
338
+ "nodeValueStyle": {
339
+ "textBefore": "(",
340
+ "textAfter": ")"
341
+ },
342
+ "data": []
343
+ },
344
+ "errors": [],
345
+ "currentViewport": "lg",
346
+ "id": 4,
347
+ "category": "Charts",
348
+ "label": "Line",
349
+ "subType": "Line",
350
+ "icon": {
351
+ "key": null,
352
+ "ref": null,
353
+ "props": {},
354
+ "_owner": null
355
+ },
356
+ "content": "Present one or more data trends over time.",
357
+ "visualizationType": "Line",
358
+ "datasets": {},
359
+ "activeVizButtonID": 4,
360
+ "data": [
361
+ {
362
+ "Year": "2007",
363
+ "American Indian/Alaska Native": "1.4",
364
+ "Asian/Pacific Islander": "0.9",
365
+ "Black, non-Hispanic": "2.3",
366
+ "White, non-Hispanic": "1",
367
+ "Hispanic": "1"
368
+ },
369
+ {
370
+ "Year": "2008",
371
+ "American Indian/Alaska Native": "1.8",
372
+ "Asian/Pacific Islander": "0.8",
373
+ "Black, non-Hispanic": "2.2",
374
+ "White, non-Hispanic": "0.9",
375
+ "Hispanic": "0.8"
376
+ },
377
+ {
378
+ "Year": "2009",
379
+ "American Indian/Alaska Native": "1",
380
+ "Asian/Pacific Islander": "0.7",
381
+ "Black, non-Hispanic": "1.7",
382
+ "White, non-Hispanic": "0.8",
383
+ "Hispanic": "0.7"
384
+ },
385
+ {
386
+ "Year": "2010",
387
+ "American Indian/Alaska Native": "1.1",
388
+ "Asian/Pacific Islander": "0.6",
389
+ "Black, non-Hispanic": "1.7",
390
+ "White, non-Hispanic": "0.8",
391
+ "Hispanic": "0.6"
392
+ },
393
+ {
394
+ "Year": "2011",
395
+ "American Indian/Alaska Native": "0.5",
396
+ "Asian/Pacific Islander": "0.4",
397
+ "Black, non-Hispanic": "1.4",
398
+ "White, non-Hispanic": "0.8",
399
+ "Hispanic": "0.4"
400
+ },
401
+ {
402
+ "Year": "2012",
403
+ "American Indian/Alaska Native": "0.7",
404
+ "Asian/Pacific Islander": "0.4",
405
+ "Black, non-Hispanic": "1.1",
406
+ "White, non-Hispanic": "0.8",
407
+ "Hispanic": "0.4"
408
+ },
409
+ {
410
+ "Year": "2013",
411
+ "American Indian/Alaska Native": "0.7",
412
+ "Asian/Pacific Islander": "0.3",
413
+ "Black, non-Hispanic": "0.9",
414
+ "White, non-Hispanic": "0.9",
415
+ "Hispanic": "0.4"
416
+ },
417
+ {
418
+ "Year": "2014",
419
+ "American Indian/Alaska Native": "0.8",
420
+ "Asian/Pacific Islander": "0.3",
421
+ "Black, non-Hispanic": "0.8",
422
+ "White, non-Hispanic": "0.9",
423
+ "Hispanic": "0.3"
424
+ },
425
+ {
426
+ "Year": "2015",
427
+ "American Indian/Alaska Native": "0.7",
428
+ "Asian/Pacific Islander": "0.4",
429
+ "Black, non-Hispanic": "1",
430
+ "White, non-Hispanic": "1.1",
431
+ "Hispanic": "0.3"
432
+ },
433
+ {
434
+ "Year": "2016",
435
+ "American Indian/Alaska Native": "0.5",
436
+ "Asian/Pacific Islander": "0.3",
437
+ "Black, non-Hispanic": "0.9",
438
+ "White, non-Hispanic": "1",
439
+ "Hispanic": "0.3"
440
+ },
441
+ {
442
+ "Year": "2017",
443
+ "American Indian/Alaska Native": "0.7",
444
+ "Asian/Pacific Islander": "0.3",
445
+ "Black, non-Hispanic": "1",
446
+ "White, non-Hispanic": "1.1",
447
+ "Hispanic": "0.3"
448
+ },
449
+ {
450
+ "Year": "2018",
451
+ "American Indian/Alaska Native": "0.9",
452
+ "Asian/Pacific Islander": "0.3",
453
+ "Black, non-Hispanic": "1",
454
+ "White, non-Hispanic": "1",
455
+ "Hispanic": "0.4"
456
+ },
457
+ {
458
+ "Year": "2019",
459
+ "American Indian/Alaska Native": "0.6",
460
+ "Asian/Pacific Islander": "0.3",
461
+ "Black, non-Hispanic": "0.9",
462
+ "White, non-Hispanic": "1",
463
+ "Hispanic": "0.4"
464
+ },
465
+ {
466
+ "Year": "2020",
467
+ "American Indian/Alaska Native": "0.4",
468
+ "Asian/Pacific Islander": "0.2",
469
+ "Black, non-Hispanic": "0.7",
470
+ "White, non-Hispanic": "0.7",
471
+ "Hispanic": "0.3"
472
+ },
473
+ {
474
+ "Year": "2021",
475
+ "American Indian/Alaska Native": "0.4",
476
+ "Asian/Pacific Islander": "0.2",
477
+ "Black, non-Hispanic": "0.9",
478
+ "White, non-Hispanic": "0.6",
479
+ "Hispanic": "0.4"
480
+ },
481
+ {
482
+ "Year": "2022",
483
+ "American Indian/Alaska Native": "0.4",
484
+ "Asian/Pacific Islander": "0.3",
485
+ "Black, non-Hispanic": "1",
486
+ "White, non-Hispanic": "0.6",
487
+ "Hispanic": "0.4"
488
+ }
489
+ ],
490
+ "dataFileName": "chart_data 2-6.csv",
491
+ "dataFileSourceType": "file",
492
+ "dataDescription": {
493
+ "horizontal": true
494
+ },
495
+ "version": "4.24.10",
496
+ "dynamicMarginTop": 0
497
+ }
package/index.html CHANGED
@@ -45,7 +45,7 @@
45
45
  -->
46
46
 
47
47
  <!-- GENERIC CHART TYPES -->
48
- <!-- <div class="react-container" data-config="/examples/private/demographic_standard.json"></div>-->
48
+ <!-- <div class="react-container" data-config="/examples/private/Viral-Respiratory-Deaths-Age.json"></div> -->
49
49
  <!-- <div class="react-container" data-config="/examples/cases-year.json"></div>-->
50
50
  <!-- <div class="react-container" data-config="/examples/test.json"></div> -->
51
51
  <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
@@ -101,7 +101,7 @@
101
101
  <!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
102
102
 
103
103
  <!-- TESTS DATE EXCLUSIONS -->
104
- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div>
104
+ <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
105
105
  <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
106
106
 
107
107
  <!-- TESTS BIG SMALL-->
@@ -111,7 +111,10 @@
111
111
  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
112
112
 
113
113
  <!-- TESTS NONNUMERICS -->
114
- <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
114
+ <!-- <div
115
+ class="react-container"
116
+ data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"
117
+ ></div> -->
115
118
  <div
116
119
  class="react-container"
117
120
  data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/chart",
3
- "version": "4.25.1",
3
+ "version": "4.25.3-6",
4
4
  "description": "React component for visualizing tabular data in various types of charts",
5
5
  "moduleName": "CdcChart",
6
6
  "main": "dist/cdcchart",
@@ -61,7 +61,7 @@
61
61
  "react": "^18.2.0",
62
62
  "react-dom": "^18.2.0"
63
63
  },
64
- "gitHead": "c32d727f516fe3525178e3a6480abbe70b2a20d6",
64
+ "gitHead": "d83d8555c1500ff0cad9d2c5c3486324afa15ec6",
65
65
  "devDependencies": {
66
66
  "@types/d3-sankey": "^0.12.4",
67
67
  "resize-observer-polyfill": "^1.5.1"