@cdc/chart 4.25.7 → 4.25.10

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 (95) hide show
  1. package/.claude/settings.local.json +9 -0
  2. package/dist/cdcchart.js +39551 -37016
  3. package/examples/feature/__data__/planet-example-data.json +0 -30
  4. package/examples/grouped-bar-test.json +400 -0
  5. package/examples/private/d.json +382 -0
  6. package/examples/private/example-2.json +49784 -0
  7. package/examples/private/f2.json +1 -0
  8. package/examples/private/f4.json +1577 -0
  9. package/examples/private/forecast.json +1180 -0
  10. package/examples/private/lollipop.json +468 -0
  11. package/examples/private/new.json +48756 -0
  12. package/examples/private/pie-chart-legend.json +904 -0
  13. package/examples/suppressed_tooltip.json +480 -0
  14. package/index.html +10 -22
  15. package/package.json +25 -7
  16. package/src/CdcChart.tsx +10 -4
  17. package/src/CdcChartComponent.tsx +188 -32
  18. package/src/_stories/Chart.Anchors.stories.tsx +2 -2
  19. package/src/_stories/Chart.BoxPlot.stories.tsx +1 -1
  20. package/src/_stories/Chart.CI.stories.tsx +1 -1
  21. package/src/_stories/Chart.CustomColors.stories.tsx +1 -1
  22. package/src/_stories/Chart.DynamicSeries.stories.tsx +2 -2
  23. package/src/_stories/Chart.Filters.stories.tsx +2 -2
  24. package/src/_stories/Chart.Legend.Gradient.stories.tsx +2 -2
  25. package/src/_stories/Chart.Patterns.stories.tsx +19 -0
  26. package/src/_stories/Chart.ScatterPlot.stories.tsx +1 -1
  27. package/src/_stories/Chart.stories.tsx +8 -5
  28. package/src/_stories/Chart.tooltip.stories.tsx +1 -1
  29. package/src/_stories/ChartAnnotation.stories.tsx +1 -1
  30. package/src/_stories/ChartAxisLabels.stories.tsx +2 -2
  31. package/src/_stories/ChartAxisTitles.stories.tsx +2 -2
  32. package/src/_stories/ChartEditor.stories.tsx +60 -60
  33. package/src/_stories/ChartLine.Suppression.stories.tsx +1 -1
  34. package/src/_stories/ChartLine.Symbols.stories.tsx +1 -1
  35. package/src/_stories/ChartPrefixSuffix.stories.tsx +2 -2
  36. package/src/_stories/_mock/stacked-pattern-test.json +520 -0
  37. package/src/components/Annotations/components/AnnotationDraggable.tsx +1 -0
  38. package/src/components/Annotations/components/AnnotationDropdown.tsx +1 -1
  39. package/src/components/BarChart/components/BarChart.Horizontal.tsx +170 -25
  40. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +139 -6
  41. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +215 -73
  42. package/src/components/BarChart/components/BarChart.Vertical.tsx +172 -23
  43. package/src/components/BarChart/helpers/index.ts +43 -4
  44. package/src/components/BarChart/helpers/lollipopColors.ts +27 -0
  45. package/src/components/BarChart/helpers/useBarChart.ts +25 -3
  46. package/src/components/BoxPlot/BoxPlot.Vertical.tsx +2 -1
  47. package/src/components/Brush/BrushChart.tsx +65 -10
  48. package/src/components/Brush/BrushController.tsx +37 -5
  49. package/src/components/Brush/types.tsx +8 -0
  50. package/src/components/DeviationBar.jsx +9 -6
  51. package/src/components/EditorPanel/EditorPanel.tsx +364 -39
  52. package/src/components/EditorPanel/EditorPanelContext.ts +3 -0
  53. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +2 -2
  54. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +414 -0
  55. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +30 -54
  56. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +115 -120
  57. package/src/components/EditorPanel/components/Panels/index.tsx +3 -1
  58. package/src/components/EditorPanel/components/Panels/panelVisual.styles.css +0 -8
  59. package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts +49 -48
  60. package/src/components/Forecasting/Forecasting.tsx +36 -6
  61. package/src/components/ForestPlot/ForestPlot.tsx +11 -7
  62. package/src/components/ForestPlot/ForestPlotProps.ts +1 -1
  63. package/src/components/Legend/Legend.Component.tsx +110 -2
  64. package/src/components/Legend/Legend.tsx +3 -1
  65. package/src/components/Legend/helpers/createFormatLabels.tsx +230 -171
  66. package/src/components/LegendWrapper.tsx +1 -1
  67. package/src/components/LineChart/components/LineChart.BumpCircle.tsx +27 -26
  68. package/src/components/LineChart/components/LineChart.Circle.tsx +2 -2
  69. package/src/components/LineChart/index.tsx +2 -2
  70. package/src/components/LinearChart.tsx +26 -9
  71. package/src/components/PairedBarChart.jsx +6 -4
  72. package/src/components/PieChart/PieChart.tsx +170 -54
  73. package/src/components/Sankey/components/Sankey.tsx +7 -1
  74. package/src/components/ScatterPlot/ScatterPlot.jsx +32 -4
  75. package/src/data/initial-state.js +315 -292
  76. package/src/helpers/buildForecastPaletteMappings.ts +112 -0
  77. package/src/helpers/buildForecastPaletteOptions.ts +109 -0
  78. package/src/helpers/getColorScale.ts +72 -8
  79. package/src/helpers/getNewRuntime.ts +1 -1
  80. package/src/helpers/getTransformedData.ts +1 -1
  81. package/src/hooks/useChartHoverAnalytics.tsx +44 -0
  82. package/src/hooks/useReduceData.ts +105 -70
  83. package/src/hooks/useTooltip.tsx +58 -16
  84. package/src/index.jsx +6 -3
  85. package/src/scss/main.scss +12 -0
  86. package/src/store/chart.reducer.ts +1 -1
  87. package/src/test/CdcChart.test.jsx +8 -3
  88. package/src/types/ChartConfig.ts +30 -6
  89. package/src/types/ChartContext.ts +1 -0
  90. package/vite.config.js +1 -1
  91. package/vitest.config.ts +16 -0
  92. package/src/coreStyles_chart.scss +0 -3
  93. package/src/helpers/configHelpers.ts +0 -28
  94. package/src/helpers/generateColorsArray.ts +0 -8
  95. package/src/hooks/useColorPalette.js +0 -76
@@ -0,0 +1,468 @@
1
+ {
2
+ "annotations": [],
3
+ "allowLineToBarGraph": "__​undefined__",
4
+ "type": "chart",
5
+ "debugSvg": false,
6
+ "chartMessage": {
7
+ "noData": "No Data Available"
8
+ },
9
+ "title": "Example Area Chart",
10
+ "showTitle": true,
11
+ "showDownloadMediaButton": false,
12
+ "theme": "theme-blue",
13
+ "animate": false,
14
+ "lineDatapointStyle": "hover",
15
+ "lineDatapointColor": "Same as Line",
16
+ "barHasBorder": "false",
17
+ "isLollipopChart": true,
18
+ "lollipopShape": "circle",
19
+ "lollipopColorStyle": "two-tone",
20
+ "visualizationSubType": "regular",
21
+ "barStyle": "lollipop",
22
+ "roundingStyle": "standard",
23
+ "tipRounding": "top",
24
+ "isResponsiveTicks": false,
25
+ "general": {
26
+ "annotationDropdownText": "Annotations",
27
+ "showMissingDataLabel": true,
28
+ "showSuppressedSymbol": true,
29
+ "showZeroValueData": true,
30
+ "hideNullValue": true,
31
+ "palette": {
32
+ "isReversed": true,
33
+ "version": "2.0",
34
+ "name": "sequential_bluereverse"
35
+ }
36
+ },
37
+ "padding": {
38
+ "left": 5,
39
+ "right": 5
40
+ },
41
+ "preliminaryData": [],
42
+ "yAxis": {
43
+ "hideAxis": false,
44
+ "displayNumbersOnBar": false,
45
+ "hideLabel": false,
46
+ "hideTicks": false,
47
+ "size": "150",
48
+ "gridLines": false,
49
+ "enablePadding": false,
50
+ "min": "",
51
+ "max": "",
52
+ "labelColor": "#1c1d1f",
53
+ "tickLabelColor": "#1c1d1f",
54
+ "tickColor": "#1c1d1f",
55
+ "rightHideAxis": true,
56
+ "rightAxisSize": 0,
57
+ "rightLabel": "",
58
+ "rightLabelOffsetSize": 0,
59
+ "rightAxisLabelColor": "#1c1d1f",
60
+ "rightAxisTickLabelColor": "#1c1d1f",
61
+ "rightAxisTickColor": "#1c1d1f",
62
+ "numTicks": "",
63
+ "axisPadding": 0,
64
+ "scalePadding": 10,
65
+ "tickRotation": 0,
66
+ "anchors": [],
67
+ "shoMissingDataLabel": true,
68
+ "showMissingDataLine": true,
69
+ "categories": [],
70
+ "isLegendValue": false,
71
+ "label": "Y Axis Example Label"
72
+ },
73
+ "boxplot": {
74
+ "plots": [],
75
+ "borders": "true",
76
+ "plotOutlierValues": false,
77
+ "plotNonOutlierValues": true,
78
+ "labels": {
79
+ "q1": "Lower Quartile",
80
+ "q2": "q2",
81
+ "q3": "Upper Quartile",
82
+ "q4": "q4",
83
+ "minimum": "Minimum",
84
+ "maximum": "Maximum",
85
+ "mean": "Mean",
86
+ "median": "Median",
87
+ "sd": "Standard Deviation",
88
+ "iqr": "Interquartile Range",
89
+ "total": "Total",
90
+ "outliers": "Outliers",
91
+ "values": "Values",
92
+ "lowerBounds": "Lower Bounds",
93
+ "upperBounds": "Upper Bounds"
94
+ },
95
+ "firstQuartilePercentage": 25,
96
+ "thirdQuartilePercentage": 75,
97
+ "boxWidthPercentage": 40,
98
+ "legend": {
99
+ "showHowToReadText": false,
100
+ "howToReadText": ""
101
+ }
102
+ },
103
+ "topAxis": {
104
+ "hasLine": false
105
+ },
106
+ "isLegendValue": false,
107
+ "barThickness": 0.35,
108
+ "barHeight": 25,
109
+ "barSpace": 20,
110
+ "heights": {
111
+ "vertical": 300,
112
+ "horizontal": 750
113
+ },
114
+ "xAxis": {
115
+ "sortDates": false,
116
+ "anchors": [],
117
+ "type": "categorical",
118
+ "showTargetLabel": true,
119
+ "targetLabel": "Target",
120
+ "hideAxis": false,
121
+ "hideLabel": false,
122
+ "hideTicks": false,
123
+ "size": "50",
124
+ "tickRotation": 0,
125
+ "min": "",
126
+ "max": "",
127
+ "labelColor": "#1c1d1f",
128
+ "tickLabelColor": "#1c1d1f",
129
+ "tickColor": "#1c1d1f",
130
+ "numTicks": "9",
131
+ "labelOffset": 0,
132
+ "axisPadding": 0,
133
+ "target": 0,
134
+ "maxTickRotation": 0,
135
+ "padding": 5,
136
+ "showYearsOnce": false,
137
+ "sortByRecentDate": false,
138
+ "brushActive": false,
139
+ "isLegendValue": false,
140
+ "dataKey": "name",
141
+ "label": "X Axis Example Label",
142
+ "dateParseFormat": "%m/%d/%Y",
143
+ "dateDisplayFormat": "%m/%d/%Y",
144
+ "axisBBox": 62.279998779296875,
145
+ "tickWidthMax": 62
146
+ },
147
+ "table": {
148
+ "label": "Data Type by Category Name",
149
+ "expanded": false,
150
+ "limitHeight": false,
151
+ "height": "",
152
+ "caption": "",
153
+ "showDownloadUrl": true,
154
+ "showDataTableLink": true,
155
+ "showDownloadLinkBelow": true,
156
+ "indexLabel": "",
157
+ "download": true,
158
+ "showVertical": false,
159
+ "dateDisplayFormat": "",
160
+ "showMissingDataLabel": true,
161
+ "showSuppressedSymbol": true,
162
+ "collapsible": true,
163
+ "show": true
164
+ },
165
+ "orientation": "vertical",
166
+ "columns": {},
167
+ "legend": {
168
+ "hide": false,
169
+ "behavior": "isolate",
170
+ "axisAlign": true,
171
+ "singleRow": false,
172
+ "colorCode": "",
173
+ "reverseLabelOrder": false,
174
+ "description": "",
175
+ "dynamicLegend": false,
176
+ "dynamicLegendDefaultText": "Show All",
177
+ "dynamicLegendItemLimit": 5,
178
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
179
+ "dynamicLegendChartMessage": "Select Options from the Legend",
180
+ "label": "Type of Data",
181
+ "lineMode": false,
182
+ "verticalSorted": false,
183
+ "highlightOnHover": false,
184
+ "hideSuppressedLabels": false,
185
+ "hideSuppressionLink": false,
186
+ "seriesHighlight": [],
187
+ "style": "circles",
188
+ "subStyle": "linear blocks",
189
+ "groupBy": "",
190
+ "shape": "circle",
191
+ "tickRotation": "",
192
+ "order": "dataColumn",
193
+ "hideBorder": {
194
+ "side": false,
195
+ "topBottom": true
196
+ },
197
+ "position": "right",
198
+ "orderedValues": [],
199
+ "patterns": {},
200
+ "patternField": "",
201
+ "unified": true
202
+ },
203
+ "exclusions": {
204
+ "active": true,
205
+ "keys": []
206
+ },
207
+ "twoColor": {
208
+ "palette": "monochrome-1",
209
+ "isPaletteReversed": false
210
+ },
211
+ "labels": false,
212
+ "dataFormat": {
213
+ "commas": true,
214
+ "prefix": "",
215
+ "suffix": " units",
216
+ "abbreviated": true,
217
+ "bottomSuffix": "",
218
+ "bottomPrefix": "",
219
+ "bottomAbbreviated": false,
220
+ "useFormat": true
221
+ },
222
+ "filters": [],
223
+ "confidenceKeys": {},
224
+ "visual": {
225
+ "border": true,
226
+ "accent": true,
227
+ "background": true,
228
+ "verticalHoverLine": false,
229
+ "horizontalHoverLine": false,
230
+ "lineDatapointSymbol": "none",
231
+ "maximumShapeAmount": 7
232
+ },
233
+ "useLogScale": false,
234
+ "filterBehavior": "dropdown",
235
+ "highlightedBarValues": [],
236
+ "series": [
237
+ {
238
+ "dataKey": "Radius",
239
+ "type": "Bar",
240
+ "tooltip": true,
241
+ "axis": "Left"
242
+ }
243
+ ],
244
+ "tooltips": {
245
+ "opacity": 90,
246
+ "singleSeries": false,
247
+ "dateDisplayFormat": ""
248
+ },
249
+ "forestPlot": {
250
+ "startAt": 0,
251
+ "colors": {
252
+ "line": "",
253
+ "shape": ""
254
+ },
255
+ "lineOfNoEffect": {
256
+ "show": true
257
+ },
258
+ "type": "",
259
+ "pooledResult": {
260
+ "diamondHeight": 5,
261
+ "column": ""
262
+ },
263
+ "estimateField": "",
264
+ "estimateRadius": "",
265
+ "shape": "square",
266
+ "rowHeight": 20,
267
+ "description": {
268
+ "show": true,
269
+ "text": "description",
270
+ "location": 0
271
+ },
272
+ "result": {
273
+ "show": true,
274
+ "text": "result",
275
+ "location": 100
276
+ },
277
+ "radius": {
278
+ "min": 2,
279
+ "max": 10,
280
+ "scalingColumn": ""
281
+ },
282
+ "regression": {
283
+ "lower": 0,
284
+ "upper": 0,
285
+ "estimateField": 0
286
+ },
287
+ "leftWidthOffset": 0,
288
+ "rightWidthOffset": 0,
289
+ "showZeroLine": false,
290
+ "leftLabel": "",
291
+ "rightLabel": ""
292
+ },
293
+ "area": {
294
+ "isStacked": false
295
+ },
296
+ "sankey": {
297
+ "title": {
298
+ "defaultColor": "black"
299
+ },
300
+ "iterations": 1,
301
+ "rxValue": 0.9,
302
+ "overallSize": {
303
+ "width": 900,
304
+ "height": 700
305
+ },
306
+ "margin": {
307
+ "margin_y": 25,
308
+ "margin_x": 0
309
+ },
310
+ "nodeSize": {
311
+ "nodeWidth": 26,
312
+ "nodeHeight": 40
313
+ },
314
+ "nodePadding": 55,
315
+ "nodeFontColor": "black",
316
+ "nodeColor": {
317
+ "default": "#ff8500",
318
+ "inactive": "#808080"
319
+ },
320
+ "linkColor": {
321
+ "default": "#ffc900",
322
+ "inactive": "#D3D3D3"
323
+ },
324
+ "opacity": {
325
+ "nodeOpacityDefault": 1,
326
+ "nodeOpacityInactive": 0.1,
327
+ "LinkOpacityDefault": 1,
328
+ "LinkOpacityInactive": 0.1
329
+ },
330
+ "storyNodeFontColor": "#006778",
331
+ "storyNodeText": [],
332
+ "nodeValueStyle": {
333
+ "textBefore": "(",
334
+ "textAfter": ")"
335
+ },
336
+ "data": []
337
+ },
338
+ "fontSize": "medium",
339
+ "isPaletteReversed": false,
340
+ "dataDescription": {
341
+ "horizontal": false,
342
+ "series": false
343
+ },
344
+ "dataFileName": "valid-area-chart.json",
345
+ "dataFileSourceType": "file",
346
+ "height": 300,
347
+ "dataUrl": "/examples/feature/__data__/planet-example-data-max-increase.json",
348
+ "visualizationType": "Bar",
349
+ "description": "This example shows a bar chart created in the visualization editor in WCMS",
350
+ "dataCutoff": "0",
351
+ "version": "4.25.9",
352
+ "migrations": {
353
+ "addColorMigration": true
354
+ },
355
+ "dynamicMarginTop": 0,
356
+ "data": [
357
+ {
358
+ "name": "Jupiter",
359
+ "Radius": "10.97",
360
+ "Diameter": "25.1",
361
+ "distance": "0"
362
+ },
363
+ {
364
+ "name": "Saturn",
365
+ "Radius": "9.14",
366
+ "Diameter": "18",
367
+ "distance": "0"
368
+ },
369
+ {
370
+ "name": "Uranus",
371
+ "Radius": "-4",
372
+ "Diameter": "-30",
373
+ "distance": "0"
374
+ },
375
+ {
376
+ "name": "Neptune",
377
+ "Radius": "3.86",
378
+ "Diameter": "7",
379
+ "distance": "0"
380
+ },
381
+ {
382
+ "name": "Earth",
383
+ "Radius": "1",
384
+ "Diameter": "2",
385
+ "distance": "0"
386
+ },
387
+ {
388
+ "name": "Venus",
389
+ "Radius": "0.950",
390
+ "Diameter": "2",
391
+ "distance": "0"
392
+ },
393
+ {
394
+ "name": "Mars",
395
+ "Radius": "0.532",
396
+ "Diameter": "1",
397
+ "distance": "0"
398
+ },
399
+ {
400
+ "name": "Mercury",
401
+ "Radius": "0.383",
402
+ "Diameter": "0.7",
403
+ "distance": "0"
404
+ },
405
+ {
406
+ "name": "Pluto",
407
+ "Radius": "0.181",
408
+ "Diameter": "0.3",
409
+ "distance": "0"
410
+ }
411
+ ],
412
+ "formattedData": [
413
+ {
414
+ "name": "Jupiter",
415
+ "Radius": "10.97",
416
+ "Diameter": "25.1",
417
+ "distance": "0"
418
+ },
419
+ {
420
+ "name": "Saturn",
421
+ "Radius": "9.14",
422
+ "Diameter": "18",
423
+ "distance": "0"
424
+ },
425
+ {
426
+ "name": "Uranus",
427
+ "Radius": "-4",
428
+ "Diameter": "-30",
429
+ "distance": "0"
430
+ },
431
+ {
432
+ "name": "Neptune",
433
+ "Radius": "3.86",
434
+ "Diameter": "7",
435
+ "distance": "0"
436
+ },
437
+ {
438
+ "name": "Earth",
439
+ "Radius": "1",
440
+ "Diameter": "2",
441
+ "distance": "0"
442
+ },
443
+ {
444
+ "name": "Venus",
445
+ "Radius": "0.950",
446
+ "Diameter": "2",
447
+ "distance": "0"
448
+ },
449
+ {
450
+ "name": "Mars",
451
+ "Radius": "0.532",
452
+ "Diameter": "1",
453
+ "distance": "0"
454
+ },
455
+ {
456
+ "name": "Mercury",
457
+ "Radius": "0.383",
458
+ "Diameter": "0.7",
459
+ "distance": "0"
460
+ },
461
+ {
462
+ "name": "Pluto",
463
+ "Radius": "0.181",
464
+ "Diameter": "0.3",
465
+ "distance": "0"
466
+ }
467
+ ]
468
+ }