@cdc/chart 4.24.12 → 4.25.2-25

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 (84) hide show
  1. package/dist/cdcchart.js +79900 -78999
  2. package/examples/feature/boxplot/boxplot.json +2 -157
  3. package/examples/feature/boxplot/testing.csv +23 -38
  4. package/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json +579 -49
  5. package/examples/private/ehdi.json +29939 -0
  6. package/examples/private/line-issue.json +497 -0
  7. package/examples/private/not-loading.json +360 -0
  8. package/index.html +11 -15
  9. package/package.json +2 -2
  10. package/src/CdcChart.tsx +92 -1512
  11. package/src/CdcChartComponent.tsx +1113 -0
  12. package/src/ConfigContext.tsx +6 -1
  13. package/src/_stories/Chart.Anchors.stories.tsx +1 -1
  14. package/src/_stories/Chart.CustomColors.stories.tsx +1 -1
  15. package/src/_stories/Chart.DynamicSeries.stories.tsx +17 -2
  16. package/src/_stories/Chart.Filters.stories.tsx +19 -0
  17. package/src/_stories/Chart.Legend.Gradient.stories.tsx +2 -2
  18. package/src/_stories/Chart.ScatterPlot.stories.tsx +19 -0
  19. package/src/_stories/Chart.tooltip.stories.tsx +1 -2
  20. package/src/_stories/ChartAnnotation.stories.tsx +1 -1
  21. package/src/_stories/ChartAxisLabels.stories.tsx +1 -1
  22. package/src/_stories/ChartAxisTitles.stories.tsx +1 -1
  23. package/src/_stories/ChartEditor.stories.tsx +1 -1
  24. package/src/_stories/ChartLine.Suppression.stories.tsx +1 -1
  25. package/src/_stories/ChartLine.Symbols.stories.tsx +18 -0
  26. package/src/_stories/ChartPrefixSuffix.stories.tsx +1 -1
  27. package/src/_stories/_mock/line_chart_symbols.json +437 -0
  28. package/src/_stories/_mock/scatterplot-image-download.json +1244 -0
  29. package/src/components/Annotations/components/AnnotationDraggable.tsx +3 -11
  30. package/src/components/Annotations/components/AnnotationDropdown.tsx +3 -3
  31. package/src/components/Axis/Categorical.Axis.tsx +3 -4
  32. package/src/components/BarChart/components/BarChart.Horizontal.tsx +14 -5
  33. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +10 -4
  34. package/src/components/BarChart/components/BarChart.Vertical.tsx +5 -7
  35. package/src/components/BarChart/components/BarChart.jsx +24 -4
  36. package/src/components/BarChart/components/context.tsx +1 -0
  37. package/src/components/BoxPlot/BoxPlot.tsx +34 -32
  38. package/src/components/BoxPlot/helpers/index.ts +108 -18
  39. package/src/components/BrushChart.tsx +44 -24
  40. package/src/components/DeviationBar.jsx +2 -6
  41. package/src/components/EditorPanel/EditorPanel.tsx +64 -8
  42. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +4 -0
  43. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +3 -1
  44. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +44 -7
  45. package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts +6 -1
  46. package/src/components/ForestPlot/ForestPlot.tsx +176 -26
  47. package/src/components/Legend/Legend.Component.tsx +29 -38
  48. package/src/components/Legend/Legend.Suppression.tsx +3 -5
  49. package/src/components/Legend/Legend.tsx +2 -2
  50. package/src/components/Legend/LegendLine.Shape.tsx +51 -0
  51. package/src/components/Legend/helpers/createFormatLabels.tsx +29 -26
  52. package/src/components/Legend/helpers/getLegendClasses.ts +20 -38
  53. package/src/components/Legend/helpers/index.ts +22 -9
  54. package/src/components/Legend/tests/getLegendClasses.test.ts +3 -20
  55. package/src/components/LineChart/components/LineChart.Circle.tsx +104 -94
  56. package/src/components/LineChart/index.tsx +6 -2
  57. package/src/components/LinearChart.tsx +77 -43
  58. package/src/components/PairedBarChart.jsx +2 -9
  59. package/src/components/ZoomBrush.tsx +5 -7
  60. package/src/data/initial-state.js +6 -3
  61. package/src/helpers/getBoxPlotConfig.ts +68 -0
  62. package/src/helpers/getColorScale.ts +24 -0
  63. package/src/helpers/getComboChartConfig.ts +42 -0
  64. package/src/helpers/getExcludedData.ts +37 -0
  65. package/src/helpers/getTopAxis.ts +7 -0
  66. package/src/helpers/isConvertLineToBarGraph.ts +10 -3
  67. package/src/hooks/useBarChart.ts +40 -13
  68. package/src/hooks/{useHighlightedBars.js → useHighlightedBars.ts} +2 -1
  69. package/src/hooks/useIntersectionObserver.ts +37 -0
  70. package/src/hooks/useMinMax.ts +11 -8
  71. package/src/hooks/useReduceData.ts +1 -1
  72. package/src/hooks/useScales.ts +10 -0
  73. package/src/hooks/useTooltip.tsx +21 -2
  74. package/src/index.jsx +1 -0
  75. package/src/scss/DataTable.scss +0 -5
  76. package/src/scss/main.scss +31 -116
  77. package/src/store/chart.actions.ts +40 -0
  78. package/src/store/chart.reducer.ts +83 -0
  79. package/src/types/ChartConfig.ts +6 -3
  80. package/src/types/ChartContext.ts +1 -3
  81. package/src/helpers/getQuartiles.ts +0 -27
  82. package/src/hooks/useColorScale.ts +0 -50
  83. package/src/hooks/useIntersectionObserver.jsx +0 -29
  84. package/src/hooks/useTopAxis.js +0 -6
@@ -0,0 +1,360 @@
1
+ {
2
+ "errors": [],
3
+ "currentViewport": "lg",
4
+ "id": 1,
5
+ "category": "Charts",
6
+ "label": "Bar",
7
+ "type": "chart",
8
+ "subType": "Bar",
9
+ "orientation": "vertical",
10
+ "barThickness": "0.37",
11
+ "visualizationSubType": "regular",
12
+ "xAxis": {
13
+ "sortDates": false,
14
+ "anchors": [],
15
+ "type": "categorical",
16
+ "showTargetLabel": true,
17
+ "targetLabel": "Target",
18
+ "hideAxis": false,
19
+ "hideLabel": false,
20
+ "hideTicks": false,
21
+ "size": 75,
22
+ "tickRotation": 0,
23
+ "min": "",
24
+ "max": "",
25
+ "labelColor": "#333",
26
+ "tickLabelColor": "#333",
27
+ "tickColor": "#333",
28
+ "numTicks": "",
29
+ "labelOffset": 0,
30
+ "axisPadding": 200,
31
+ "target": 0,
32
+ "maxTickRotation": 45,
33
+ "padding": 5,
34
+ "showYearsOnce": false,
35
+ "sortByRecentDate": false,
36
+ "dataKey": "date",
37
+ "tickWidthMax": 86
38
+ },
39
+ "icon": {
40
+ "key": null,
41
+ "ref": null,
42
+ "props": {},
43
+ "_owner": null,
44
+ "_store": {}
45
+ },
46
+ "content": "Use bars to show comparisons between data categories.",
47
+ "visualizationType": "Bar",
48
+ "datasets": {},
49
+ "activeVizButtonID": 1,
50
+ "dataFileName": "http://localhost:8080/example/data-vertical.json",
51
+ "dataFileSourceType": "url",
52
+ "formattedData": [
53
+ {
54
+ "date": "01/01/2020",
55
+ "value": 90
56
+ },
57
+ {
58
+ "date": "02/01/2020",
59
+ "value": 120
60
+ },
61
+ {
62
+ "date": "03/01/2020",
63
+ "value": 150
64
+ }
65
+ ],
66
+ "dataUrl": "http://localhost:8080/examples/data-vertical.json",
67
+ "dataDescription": {
68
+ "horizontal": false,
69
+ "series": false
70
+ },
71
+ "annotations": [],
72
+ "debugSvg": false,
73
+ "chartMessage": {
74
+ "noData": "No Data Available"
75
+ },
76
+ "title": "Chart Title",
77
+ "showTitle": true,
78
+ "showDownloadMediaButton": false,
79
+ "theme": "theme-blue",
80
+ "animate": false,
81
+ "lineDatapointStyle": "hover",
82
+ "lineDatapointColor": "Same as Line",
83
+ "barHasBorder": "true",
84
+ "isLollipopChart": false,
85
+ "lollipopShape": "circle",
86
+ "lollipopColorStyle": "two-tone",
87
+ "barStyle": "",
88
+ "roundingStyle": "standard",
89
+ "tipRounding": "top",
90
+ "isResponsiveTicks": false,
91
+ "general": {
92
+ "annotationDropdownText": "Annotations",
93
+ "showDownloadButton": false,
94
+ "showMissingDataLabel": true,
95
+ "showSuppressedSymbol": true,
96
+ "showZeroValueData": true,
97
+ "hideNullValue": true
98
+ },
99
+ "padding": {
100
+ "left": 5,
101
+ "right": 5
102
+ },
103
+ "preliminaryData": [],
104
+ "yAxis": {
105
+ "hideAxis": false,
106
+ "displayNumbersOnBar": false,
107
+ "hideLabel": false,
108
+ "hideTicks": false,
109
+ "size": 50,
110
+ "gridLines": false,
111
+ "enablePadding": false,
112
+ "min": "",
113
+ "max": "",
114
+ "labelColor": "#333",
115
+ "tickLabelColor": "#333",
116
+ "tickColor": "#333",
117
+ "rightHideAxis": false,
118
+ "rightAxisSize": 0,
119
+ "rightLabel": "",
120
+ "rightLabelOffsetSize": 0,
121
+ "rightAxisLabelColor": "#333",
122
+ "rightAxisTickLabelColor": "#333",
123
+ "rightAxisTickColor": "#333",
124
+ "numTicks": "",
125
+ "axisPadding": 0,
126
+ "scalePadding": 10,
127
+ "tickRotation": 0,
128
+ "anchors": [],
129
+ "shoMissingDataLabel": true,
130
+ "showMissingDataLine": true,
131
+ "categories": []
132
+ },
133
+ "boxplot": {
134
+ "plots": [],
135
+ "borders": "true",
136
+ "plotOutlierValues": false,
137
+ "plotNonOutlierValues": true,
138
+ "labels": {
139
+ "q1": "Lower Quartile",
140
+ "q2": "q2",
141
+ "q3": "Upper Quartile",
142
+ "q4": "q4",
143
+ "minimum": "Minimum",
144
+ "maximum": "Maximum",
145
+ "mean": "Mean",
146
+ "median": "Median",
147
+ "sd": "Standard Deviation",
148
+ "iqr": "Interquartile Range",
149
+ "count": "Count",
150
+ "outliers": "Outliers",
151
+ "values": "Values",
152
+ "lowerBounds": "Lower Bounds",
153
+ "upperBounds": "Upper Bounds"
154
+ }
155
+ },
156
+ "topAxis": {
157
+ "hasLine": false
158
+ },
159
+ "isLegendValue": false,
160
+ "barHeight": 25,
161
+ "barSpace": 15,
162
+ "heights": {
163
+ "vertical": 300,
164
+ "horizontal": 750
165
+ },
166
+ "table": {
167
+ "label": "Data Table",
168
+ "expanded": true,
169
+ "limitHeight": false,
170
+ "height": "",
171
+ "caption": "",
172
+ "showDownloadUrl": false,
173
+ "showDataTableLink": true,
174
+ "showDownloadLinkBelow": true,
175
+ "indexLabel": "",
176
+ "download": true,
177
+ "showVertical": true,
178
+ "dateDisplayFormat": "",
179
+ "showMissingDataLabel": true,
180
+ "showSuppressedSymbol": true,
181
+ "show": true
182
+ },
183
+ "color": "pinkpurple",
184
+ "columns": {},
185
+ "legend": {
186
+ "hide": false,
187
+ "behavior": "isolate",
188
+ "axisAlign": true,
189
+ "singleRow": true,
190
+ "colorCode": "",
191
+ "reverseLabelOrder": false,
192
+ "description": "",
193
+ "dynamicLegend": false,
194
+ "dynamicLegendDefaultText": "Show All",
195
+ "dynamicLegendItemLimit": 5,
196
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
197
+ "dynamicLegendChartMessage": "Select Options from the Legend",
198
+ "label": "",
199
+ "lineMode": false,
200
+ "verticalSorted": false,
201
+ "highlightOnHover": false,
202
+ "hideSuppressedLabels": false,
203
+ "hideSuppressionLink": false,
204
+ "seriesHighlight": [],
205
+ "style": "circles",
206
+ "subStyle": "linear blocks",
207
+ "shape": "circle",
208
+ "tickRotation": "",
209
+ "hideBorder": {
210
+ "side": false,
211
+ "topBottom": true
212
+ },
213
+ "position": "right"
214
+ },
215
+ "brush": {
216
+ "height": 45,
217
+ "active": false
218
+ },
219
+ "exclusions": {
220
+ "active": false,
221
+ "keys": []
222
+ },
223
+ "palette": "qualitative-bold",
224
+ "isPaletteReversed": false,
225
+ "twoColor": {
226
+ "palette": "monochrome-1",
227
+ "isPaletteReversed": false
228
+ },
229
+ "labels": true,
230
+ "dataFormat": {
231
+ "commas": false,
232
+ "prefix": "",
233
+ "suffix": "",
234
+ "abbreviated": false,
235
+ "bottomSuffix": "",
236
+ "bottomPrefix": "",
237
+ "bottomAbbreviated": false
238
+ },
239
+ "filters": [],
240
+ "confidenceKeys": {},
241
+ "visual": {
242
+ "border": true,
243
+ "accent": true,
244
+ "background": true,
245
+ "verticalHoverLine": false,
246
+ "horizontalHoverLine": false,
247
+ "lineDatapointSymbol": "none",
248
+ "maximumShapeAmount": 7
249
+ },
250
+ "useLogScale": false,
251
+ "filterBehavior": "Filter Change",
252
+ "highlightedBarValues": [],
253
+ "series": [
254
+ {
255
+ "dataKey": "value",
256
+ "type": "Bar",
257
+ "axis": "Left",
258
+ "tooltip": true
259
+ }
260
+ ],
261
+ "tooltips": {
262
+ "opacity": 90,
263
+ "singleSeries": false,
264
+ "dateDisplayFormat": ""
265
+ },
266
+ "forestPlot": {
267
+ "startAt": 0,
268
+ "colors": {
269
+ "line": "",
270
+ "shape": ""
271
+ },
272
+ "lineOfNoEffect": {
273
+ "show": true
274
+ },
275
+ "type": "",
276
+ "pooledResult": {
277
+ "diamondHeight": 5,
278
+ "column": ""
279
+ },
280
+ "estimateField": "",
281
+ "estimateRadius": "",
282
+ "shape": "square",
283
+ "rowHeight": 20,
284
+ "description": {
285
+ "show": true,
286
+ "text": "description",
287
+ "location": 0
288
+ },
289
+ "result": {
290
+ "show": true,
291
+ "text": "result",
292
+ "location": 100
293
+ },
294
+ "radius": {
295
+ "min": 2,
296
+ "max": 10,
297
+ "scalingColumn": ""
298
+ },
299
+ "regression": {
300
+ "lower": 0,
301
+ "upper": 0,
302
+ "estimateField": 0
303
+ },
304
+ "leftWidthOffset": 0,
305
+ "rightWidthOffset": 0,
306
+ "showZeroLine": false,
307
+ "leftLabel": "",
308
+ "rightLabel": ""
309
+ },
310
+ "area": {
311
+ "isStacked": false
312
+ },
313
+ "sankey": {
314
+ "title": {
315
+ "defaultColor": "black"
316
+ },
317
+ "iterations": 1,
318
+ "rxValue": 0.9,
319
+ "overallSize": {
320
+ "width": 900,
321
+ "height": 700
322
+ },
323
+ "margin": {
324
+ "margin_y": 25,
325
+ "margin_x": 0
326
+ },
327
+ "nodeSize": {
328
+ "nodeWidth": 26,
329
+ "nodeHeight": 40
330
+ },
331
+ "nodePadding": 55,
332
+ "nodeFontColor": "black",
333
+ "nodeColor": {
334
+ "default": "#ff8500",
335
+ "inactive": "#808080"
336
+ },
337
+ "linkColor": {
338
+ "default": "#ffc900",
339
+ "inactive": "#D3D3D3"
340
+ },
341
+ "opacity": {
342
+ "nodeOpacityDefault": 1,
343
+ "nodeOpacityInactive": 0.1,
344
+ "LinkOpacityDefault": 1,
345
+ "LinkOpacityInactive": 0.1
346
+ },
347
+ "storyNodeFontColor": "#006778",
348
+ "storyNodeText": [],
349
+ "nodeValueStyle": {
350
+ "textBefore": "(",
351
+ "textAfter": ")"
352
+ },
353
+ "data": []
354
+ },
355
+ "version": "4.25.1",
356
+ "migrations": {
357
+ "addColorMigration": true
358
+ },
359
+ "dynamicMarginTop": 0
360
+ }
package/index.html CHANGED
@@ -17,11 +17,7 @@
17
17
  margin-top: 3rem;
18
18
  } */
19
19
  </style>
20
- <link
21
- rel="stylesheet prefetch"
22
- href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423"
23
- />
24
- <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
20
+ <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
25
21
  </head>
26
22
 
27
23
  <body>
@@ -49,8 +45,8 @@
49
45
  -->
50
46
 
51
47
  <!-- GENERIC CHART TYPES -->
52
- <div class="react-container" data-config="/examples/private/demographic_standard.json"></div>
53
- <div class="react-container" data-config="/examples/cases-year.json"></div>
48
+ <!-- <div class="react-container" data-config="/examples/private/Viral-Respiratory-Deaths-Age.json"></div> -->
49
+ <!-- <div class="react-container" data-config="/examples/cases-year.json"></div>-->
54
50
  <!-- <div class="react-container" data-config="/examples/test.json"></div> -->
55
51
  <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
56
52
  <!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
@@ -72,12 +68,12 @@
72
68
  <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
73
69
  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
74
70
  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
75
- <!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
71
+ <!-- <div class="react-container" data-config="/examples/scatterplot-image-download.json"></div> -->
76
72
  <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
77
- <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
73
+ <!-- <div class="react-container" data-config="/examples/private/test.json"></div> -->
78
74
  <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
79
75
  <!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
80
- <div class="react-container" data-config="/examples/dev-9822.json"></div>
76
+ <!-- <div class="react-container" data-config="/examples/dev-9822.json"></div> -->
81
77
 
82
78
  <!-- BAR -->
83
79
  <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
@@ -105,10 +101,7 @@
105
101
  <!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
106
102
 
107
103
  <!-- TESTS DATE EXCLUSIONS -->
108
- <div
109
- class="react-container"
110
- data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"
111
- ></div>
104
+ <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
112
105
  <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
113
106
 
114
107
  <!-- TESTS BIG SMALL-->
@@ -118,7 +111,10 @@
118
111
  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
119
112
 
120
113
  <!-- TESTS NONNUMERICS -->
121
- <!-- <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> -->
122
118
  <div
123
119
  class="react-container"
124
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.24.12",
3
+ "version": "4.25.2-25",
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": "347414f1da4b0e9bf2f22a7b59335deccf0b2d9c",
64
+ "gitHead": "f00bd8a0fc746def7cc23b91ef49a03a3ceac65e",
65
65
  "devDependencies": {
66
66
  "@types/d3-sankey": "^0.12.4",
67
67
  "resize-observer-polyfill": "^1.5.1"