@cdc/chart 4.25.5-1 → 4.25.6-2

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 (63) hide show
  1. package/LICENSE +201 -0
  2. package/dist/cdcchart.js +31118 -27459
  3. package/examples/private/0527.json +1 -0
  4. package/examples/private/DEV-8850-2.json +493 -0
  5. package/examples/private/DEV-9822.json +574 -0
  6. package/examples/private/DEV-9840.json +553 -0
  7. package/examples/private/DEV-9850-3.json +461 -0
  8. package/examples/private/chart.json +1084 -0
  9. package/examples/private/ci_formatted.json +202 -0
  10. package/examples/private/ci_issue.json +3016 -0
  11. package/examples/private/completed.json +634 -0
  12. package/examples/private/dem-data-long.csv +20 -0
  13. package/examples/private/dem-data-long.json +36 -0
  14. package/examples/private/demographic_data.csv +157 -0
  15. package/examples/private/demographic_data.json +2654 -0
  16. package/examples/private/demographic_dynamic.json +443 -0
  17. package/examples/private/demographic_standard.json +560 -0
  18. package/examples/private/ehdi.json +29939 -0
  19. package/examples/private/line-issue.json +497 -0
  20. package/examples/private/not-loading.json +360 -0
  21. package/examples/private/test.json +493 -0
  22. package/examples/private/testing-pie.json +436 -0
  23. package/index.html +130 -130
  24. package/package.json +2 -2
  25. package/src/CdcChartComponent.tsx +66 -26
  26. package/src/_stories/Chart.stories.tsx +99 -93
  27. package/src/_stories/ChartPrefixSuffix.stories.tsx +29 -32
  28. package/src/_stories/_mock/pie_calculated_area.json +417 -0
  29. package/src/components/BarChart/components/BarChart.Horizontal.tsx +4 -13
  30. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +3 -14
  31. package/src/components/BarChart/components/BarChart.Vertical.tsx +2 -8
  32. package/src/components/Brush/BrushChart.tsx +73 -0
  33. package/src/components/Brush/BrushController..tsx +39 -0
  34. package/src/components/DeviationBar.jsx +0 -1
  35. package/src/components/EditorPanel/EditorPanel.tsx +246 -156
  36. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +2 -2
  37. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +3 -2
  38. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +2 -1
  39. package/src/components/EditorPanel/components/Panels/panelVisual.styles.css +8 -0
  40. package/src/components/EditorPanel/useEditorPermissions.ts +7 -4
  41. package/src/components/HoverLine/HoverLine.tsx +74 -0
  42. package/src/components/Legend/Legend.Suppression.tsx +47 -3
  43. package/src/components/Legend/helpers/index.ts +1 -1
  44. package/src/components/LineChart/helpers.ts +7 -7
  45. package/src/components/LineChart/index.tsx +3 -6
  46. package/src/components/LinearChart.tsx +108 -72
  47. package/src/components/PieChart/PieChart.tsx +58 -13
  48. package/src/data/initial-state.js +8 -5
  49. package/src/helpers/countNumOfTicks.ts +4 -19
  50. package/src/helpers/getNewRuntime.ts +35 -0
  51. package/src/helpers/getPiePercent.ts +22 -0
  52. package/src/helpers/getTransformedData.ts +22 -0
  53. package/src/helpers/tests/getNewRuntime.test.ts +82 -0
  54. package/src/helpers/tests/getPiePercent.test.ts +38 -0
  55. package/src/hooks/useRightAxis.ts +1 -1
  56. package/src/hooks/useScales.ts +8 -3
  57. package/src/hooks/useTooltip.tsx +24 -10
  58. package/src/scss/main.scss +8 -4
  59. package/src/store/chart.actions.ts +2 -6
  60. package/src/store/chart.reducer.ts +23 -23
  61. package/src/types/ChartConfig.ts +7 -4
  62. package/src/types/ChartContext.ts +0 -2
  63. package/src/components/ZoomBrush.tsx +0 -251
package/index.html CHANGED
@@ -1,38 +1,39 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
- <style>
7
- body {
8
- margin: 0;
9
- border-top: none !important;
10
- }
11
-
12
- .cdc-map-outer-container {
13
- min-height: 100vh;
14
- }
15
-
16
- /* .react-container + .react-container {
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ border-top: none !important;
11
+ }
12
+
13
+ .cdc-map-outer-container {
14
+ min-height: 100vh;
15
+ }
16
+
17
+ /* .react-container + .react-container {
17
18
  margin-top: 3rem;
18
19
  } */
19
- </style>
20
- <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
21
- </head>
20
+ </style>
21
+ <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
22
+ </head>
22
23
 
23
- <body>
24
- <!-- SANKEY EXAMPLE -->
25
- <!-- <div class="container d-flex flex-wrap body-wrapper bg-white" style="width: 750px">
24
+ <body>
25
+ <!-- SANKEY EXAMPLE -->
26
+ <!-- <div class="container d-flex flex-wrap body-wrapper bg-white" style="width: 750px">
26
27
  <main class="col-lg-9 order-lg-2" role="main" aria-label="Main Content Area">
27
28
  <div class="row">
28
29
  <div class="col-md-12"> -->
29
- <!-- <div class="react-container" data-config="/examples/feature/sankey/sankey-example-data.json"></div> -->
30
- <!-- </div>
30
+ <!-- <div class="react-container" data-config="/examples/feature/sankey/sankey-example-data.json"></div> -->
31
+ <!-- </div>
31
32
  </div>
32
33
  </main>
33
34
  </div> -->
34
35
 
35
- <!--
36
+ <!--
36
37
  EXAMPLES:
37
38
  chart/examples/features: different chart types and tests
38
39
  chart/examples/private: an ignored git folder used for addl. troubleshooting.
@@ -44,124 +45,123 @@
44
45
 
45
46
  -->
46
47
 
47
- <!-- GENERIC CHART TYPES -->
48
- <!-- <div class="react-container" data-config="/examples/private/ari-other-conditions-1.json"></div> -->
49
- <!-- <div class="react-container" data-config="/examples/private/Viral-Respiratory-Deaths-Age.json"></div> -->
50
- <!-- <div class="react-container" data-config="/examples/cases-year.json"></div>-->
51
- <!-- <div class="react-container" data-config="/examples/test.json"></div> -->
52
- <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
53
- <!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
54
- <!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
55
- <!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
56
- <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
57
- <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
58
- <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
59
- <!-- <div class="react-container" data-config="/examples/feature/forest-plot/linear.json"></div> -->
60
- <!-- <div class="react-container" data-config="/examples/feature/forest-plot/logarithmic.json"></div> -->
61
- <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
62
- <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
63
- <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
64
- <!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
65
- <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
66
- <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
67
- <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
68
- <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
69
- <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
70
- <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
71
- <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
72
- <!-- <div class="react-container" data-config="/examples/scatterplot-image-download.json"></div> -->
73
- <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
74
- <!-- <div class="react-container" data-config="/examples/private/test.json"></div> -->
75
- <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
76
- <!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
77
- <!-- <div class="react-container" data-config="/examples/dev-9822.json"></div> -->
78
-
79
- <!-- BAR -->
80
- <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
81
- <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
82
- <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
83
- <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
84
- <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
85
- <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
86
- <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
87
-
88
- <!-- TESTS DATA TABLE SORTING -->
89
- <!-- Bar Chart with Confidence Intervals (bottom of page) -->
90
- <!-- <div class="react-container" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Example_Bar_CI.json"></div> -->
91
- <!-- TPOXX Patient Data -->
92
- <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/tpoxx_weekly_race_eth.json"></div> -->
93
- <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-tpoxx-age-gender.json"></div> -->
94
- <!-- Non-Variola Orthopoxvirus (NVO) Laboratory Testing by Demographics -->
95
- <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data.json"></div> -->
96
- <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data-age.json"></div> -->
97
- <!-- PROBLEM WITH THEIR PAGE CONFIG or CONFLICT with -->
98
- <!-- CORS ERROR pulling data on Covid Flu RSV page at https://wwwdev-cdc.msappproxy.net/respiratory-viruses/index.html-->
99
- <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/respiratory-viruses/modules/emergency-dept-visits_live.json"></div> -->
100
- <!-- MPOX -->
101
- <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpox-demographics-monthly.json"></div> -->
102
- <!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
103
-
104
- <!-- TESTS DATE EXCLUSIONS -->
105
- <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
106
- <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
107
-
108
- <!-- TESTS BIG SMALL-->
109
- <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
110
- <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div> -->
111
- <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
112
- <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
113
-
114
- <!-- TESTS NONNUMERICS -->
115
- <!-- <div
48
+ <!-- GENERIC CHART TYPES -->
49
+ <!-- <div class="react-container" data-config="/examples/private/ari-other-conditions-1.json"></div> -->
50
+ <!-- <div class="react-container" data-config="/examples/private/Viral-Respiratory-Deaths-Age.json"></div> -->
51
+ <!-- <div class="react-container" data-config="/examples/cases-year.json"></div>-->
52
+ <!-- <div class="react-container" data-config="/examples/test.json"></div> -->
53
+ <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
54
+ <!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
55
+ <!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
56
+ <!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
57
+ <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
58
+ <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
59
+ <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
60
+ <!-- <div class="react-container" data-config="/examples/feature/forest-plot/linear.json"></div> -->
61
+ <!-- <div class="react-container" data-config="/examples/feature/forest-plot/logarithmic.json"></div> -->
62
+ <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
63
+ <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
64
+ <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
65
+ <!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
66
+ <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
67
+ <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
68
+ <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
69
+ <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
70
+ <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
71
+ <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
72
+ <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
73
+ <!-- <div class="react-container" data-config="/examples/scatterplot-image-download.json"></div> -->
74
+ <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
75
+ <!-- <div class="react-container" data-config="/examples/private/test.json"></div> -->
76
+ <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
77
+ <!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
78
+ <!-- <div class="react-container" data-config="/examples/dev-9822.json"></div> -->
79
+
80
+ <!-- BAR -->
81
+ <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
82
+ <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
83
+ <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
84
+ <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
85
+ <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
86
+ <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
87
+ <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
88
+
89
+ <!-- TESTS DATA TABLE SORTING -->
90
+ <!-- Bar Chart with Confidence Intervals (bottom of page) -->
91
+ <!-- <div class="react-container" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Example_Bar_CI.json"></div> -->
92
+ <!-- TPOXX Patient Data -->
93
+ <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/tpoxx_weekly_race_eth.json"></div> -->
94
+ <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-tpoxx-age-gender.json"></div> -->
95
+ <!-- Non-Variola Orthopoxvirus (NVO) Laboratory Testing by Demographics -->
96
+ <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data.json"></div> -->
97
+ <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data-age.json"></div> -->
98
+ <!-- PROBLEM WITH THEIR PAGE CONFIG or CONFLICT with -->
99
+ <!-- CORS ERROR pulling data on Covid Flu RSV page at https://wwwdev-cdc.msappproxy.net/respiratory-viruses/index.html-->
100
+ <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/respiratory-viruses/modules/emergency-dept-visits_live.json"></div> -->
101
+ <!-- MPOX -->
102
+ <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpox-demographics-monthly.json"></div> -->
103
+ <!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
104
+
105
+ <!-- TESTS DATE EXCLUSIONS -->
106
+ <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
107
+ <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
108
+
109
+ <!-- TESTS BIG SMALL-->
110
+ <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
111
+ <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div> -->
112
+ <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
113
+ <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
114
+
115
+ <!-- TESTS NONNUMERICS -->
116
+ <!-- <div
116
117
  class="react-container"
117
118
  data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"
118
119
  ></div> -->
119
- <div
120
- class="react-container"
121
- data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"
122
- ></div>
123
- <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
124
- <!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
125
- <!-- <div
120
+ <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json">
121
+ </div>
122
+ <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
123
+ <!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
124
+ <!-- <div
126
125
  class="react-container"
127
126
  data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"
128
127
  ></div> -->
129
- <!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
130
- <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
128
+ <!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
129
+ <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
131
130
 
132
- <!-- TESTS CUTOFF -->
133
- <!-- <div class="react-container" data-config="/examples/feature/tests-cutoff/cutoff-example-config.json"></div> -->
131
+ <!-- TESTS CUTOFF -->
132
+ <!-- <div class="react-container" data-config="/examples/feature/tests-cutoff/cutoff-example-config.json"></div> -->
134
133
 
135
- <!-- TESTS COVID -->
136
- <!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-confidence-example-config.json"></div> -->
137
- <!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-example-config.json"></div> -->
134
+ <!-- TESTS COVID -->
135
+ <!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-confidence-example-config.json"></div> -->
136
+ <!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-example-config.json"></div> -->
138
137
 
139
- <!--
138
+ <!--
140
139
  GALLERY EXAMPLES BELOW THIS LINE...
141
140
  https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-cities-states.html
142
141
 
143
142
  -->
144
143
 
145
- <!-- GENERIC CHART TYPES -->
146
- <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
147
- <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
148
- <!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
149
-
150
- <!-- HORIZONTAL BAR CHARTS -->
151
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
152
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
153
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
154
-
155
- <!-- VERTICAL BAR CHARTS -->
156
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
157
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
158
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
159
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
160
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
161
- <!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->
162
-
163
- <noscript>You need to enable JavaScript to run this app.</noscript>
164
-
165
- <script type="module" src="./src/index.jsx"></script>
166
- </body>
167
- </html>
144
+ <!-- GENERIC CHART TYPES -->
145
+ <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
146
+ <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
147
+ <!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
148
+
149
+ <!-- HORIZONTAL BAR CHARTS -->
150
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
151
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
152
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
153
+
154
+ <!-- VERTICAL BAR CHARTS -->
155
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
156
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
157
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
158
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
159
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
160
+ <!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->
161
+
162
+ <noscript>You need to enable JavaScript to run this app.</noscript>
163
+
164
+ <script type="module" src="./src/index.jsx"></script>
165
+ </body>
166
+
167
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/chart",
3
- "version": "4.25.5-1",
3
+ "version": "4.25.6-2",
4
4
  "description": "React component for visualizing tabular data in various types of charts",
5
5
  "moduleName": "CdcChart",
6
6
  "main": "dist/cdcchart",
@@ -53,7 +53,7 @@
53
53
  "react": "^18.2.0",
54
54
  "react-dom": "^18.2.0"
55
55
  },
56
- "gitHead": "1d0a6e716bc113e6bea3636fcae90ebf2d19bb5c",
56
+ "gitHead": "8183dee16aa930575befad47833cf0ce2bcb4edb",
57
57
  "devDependencies": {
58
58
  "@types/d3-array": "^3.2.1",
59
59
  "@types/d3-format": "^3.0.4",
package/src/CdcChartComponent.tsx CHANGED
@@ -71,9 +71,16 @@ import { getBoxPlotConfig } from './helpers/getBoxPlotConfig'
71
71
  import { getComboChartConfig } from './helpers/getComboChartConfig'
72
72
  import { getExcludedData } from './helpers/getExcludedData'
73
73
  import { getColorScale } from './helpers/getColorScale'
74
+ import { getTransformedData } from './helpers/getTransformedData'
75
+ import { getPiePercent } from './helpers/getPiePercent'
76
+
74
77
  // styles
75
78
  import './scss/main.scss'
76
79
  import { getInitialState, reducer } from './store/chart.reducer'
80
+ import { VizFilter } from '@cdc/core/types/VizFilter'
81
+ import { getNewRuntime } from './helpers/getNewRuntime'
82
+ import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
83
+ import { Datasets } from '@cdc/core/types/DataSet'
77
84
 
78
85
  interface CdcChartProps {
79
86
  config?: ChartConfig
@@ -87,6 +94,7 @@ interface CdcChartProps {
87
94
  setSharedFilter?: (filter: any) => void
88
95
  setSharedFilterValue?: (value: any) => void
89
96
  dashboardConfig?: DashboardConfig
97
+ datasets?: Datasets
90
98
  }
91
99
  const CdcChart: React.FC<CdcChartProps> = ({
92
100
  config: configObj,
@@ -98,7 +106,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
98
106
  link,
99
107
  setSharedFilter,
100
108
  setSharedFilterValue,
101
- dashboardConfig
109
+ dashboardConfig,
110
+ datasets
102
111
  }) => {
103
112
  const transform = new DataTransform()
104
113
  const initialState = getInitialState(configObj)
@@ -130,10 +139,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
130
139
  }
131
140
  }
132
141
 
133
- const setFiltersData = (filteredData: object[]): void => {
134
- dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
135
- }
136
-
137
142
  const legendRef = useRef(null)
138
143
  const parentRef = useRef(null)
139
144
 
@@ -160,7 +165,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
160
165
 
161
166
  const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
162
167
 
163
- const prepareConfig = async (loadedConfig: ChartConfig) => {
168
+ const prepareConfig = (loadedConfig: ChartConfig) => {
164
169
  let newConfig = _.defaultsDeep(loadedConfig, defaults)
165
170
  _.defaultsDeep(newConfig, {
166
171
  table: { showVertical: false }
@@ -340,6 +345,30 @@ const CdcChart: React.FC<CdcChartProps> = ({
340
345
  }
341
346
  }
342
347
 
348
+ const setFilters = (newFilters: VizFilter[]) => {
349
+ if (!config.dynamicSeries) {
350
+ const _newFilters = addValuesToFilters(newFilters, excludedData)
351
+ setConfig({
352
+ ...config,
353
+ filters: _newFilters
354
+ })
355
+ }
356
+
357
+ if (config.filterBehavior === 'Filter Change' || config.filterBehavior === 'Apply Button') {
358
+ const newFilteredData = filterVizData(newFilters, excludedData)
359
+
360
+ dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
361
+ if (config.dynamicSeries) {
362
+ const runtime = getNewRuntime(config, newFilteredData)
363
+ setConfig({
364
+ ...config,
365
+ filters: newFilters,
366
+ runtime
367
+ })
368
+ }
369
+ }
370
+ }
371
+
343
372
  // Observes changes to outermost container and changes viewport size in state
344
373
  const resizeObserver = new ResizeObserver(entries => {
345
374
  for (let entry of entries) {
@@ -378,7 +407,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
378
407
  if (newConfig.dataUrl && !urlFilters) {
379
408
  // handle urls with spaces in the name.
380
409
  if (newConfig.dataUrl) newConfig.dataUrl = `${newConfig.dataUrl}`
381
- let newData = await fetchRemoteData(newConfig.dataUrl, 'Chart')
410
+ let newData = await fetchRemoteData(newConfig.dataUrl)
382
411
 
383
412
  if (newData && newConfig.dataDescription) {
384
413
  newData = transform.autoStandardize(newData)
@@ -399,12 +428,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
399
428
  }
400
429
  return newConfig
401
430
  }
431
+
402
432
  useEffect(() => {
403
433
  const load = async () => {
404
434
  try {
405
435
  if (configObj) {
406
436
  const preparedConfig = await prepareConfig(configObj)
407
437
  const preppedData = await prepareData(preparedConfig)
438
+
439
+ if (preparedConfig?.formattedData?.length) {
440
+ preppedData.data = preparedConfig.formattedData
441
+ }
442
+
408
443
  dispatch({ type: 'SET_STATE_DATA', payload: preppedData.data })
409
444
  dispatch({ type: 'SET_EXCLUDED_DATA', payload: preppedData.data })
410
445
  updateConfig(preparedConfig, preppedData.data)
@@ -491,7 +526,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
491
526
 
492
527
  // Called on legend click, highlights/unhighlights the data series with the given label
493
528
  const highlight = (label: Label): void => {
494
- if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && config.visualizationType !== 'Forecasting') {
529
+ if (
530
+ seriesHighlight.length + 1 === config.runtime.seriesKeys.length &&
531
+ config.visualizationType !== 'Forecasting' &&
532
+ !seriesHighlight.includes(label.datum)
533
+ ) {
495
534
  return handleShowAll()
496
535
  }
497
536
 
@@ -589,8 +628,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
589
628
  rightSuffix,
590
629
  bottomPrefix,
591
630
  bottomSuffix,
592
- bottomAbbreviated,
593
- onlyShowTopPrefixSuffix
631
+ bottomAbbreviated
594
632
  }
595
633
  } = config
596
634
 
@@ -683,9 +721,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
683
721
  if (addColPrefix && axis === 'left') {
684
722
  result = addColPrefix + result
685
723
  } else {
686
- // if onlyShowTopPrefixSuffix only show top prefix
687
- const suppressAllButLast = onlyShowTopPrefixSuffix && length - 1 !== index
688
- if (prefix && axis === 'left' && !suppressAllButLast) {
724
+ if (prefix && axis === 'left') {
689
725
  result += prefix
690
726
  }
691
727
  }
@@ -704,7 +740,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
704
740
  if (addColSuffix && axis === 'left') {
705
741
  result += addColSuffix
706
742
  } else {
707
- if (suffix && axis === 'left' && !onlyShowTopPrefixSuffix) {
743
+ if (suffix && axis === 'left') {
708
744
  result += suffix
709
745
  }
710
746
  }
@@ -759,6 +795,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
759
795
  const getTableRuntimeData = () => {
760
796
  if (visualizationType === 'Sankey') return config?.data?.[0]?.tableData
761
797
  const data = filteredData || excludedData
798
+ if (config.visualizationType === 'Pie' && !config.dataFormat?.showPiePercent) {
799
+ return getPiePercent(data, config?.yAxis?.dataKey)
800
+ }
801
+
762
802
  const dynamicSeries = config.series.find(series => !!series.dynamicCategory)
763
803
  if (!dynamicSeries) return data
764
804
  const usedColumns = Object.values(config.columns)
@@ -825,7 +865,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
825
865
 
826
866
  body = (
827
867
  <>
828
- {isEditor && <EditorPanel />}
868
+ {isEditor && <EditorPanel datasets={datasets} />}
829
869
  <Layout.Responsive isEditor={isEditor}>
830
870
  {config.newViz && <Confirm updateConfig={updateConfig} config={config} />}
831
871
  {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && (
@@ -859,11 +899,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
859
899
  {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
860
900
  <Filters
861
901
  config={config}
862
- setConfig={setConfig}
863
- setFilteredData={setFiltersData}
864
- filteredData={filteredData}
902
+ setFilters={setFilters}
865
903
  excludedData={excludedData}
866
- filterData={filterVizData}
867
904
  dimensions={dimensions}
868
905
  />
869
906
  )}
@@ -940,11 +977,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
940
977
  <>
941
978
  <Filters
942
979
  config={config}
943
- setConfig={setConfig}
944
- setFilteredData={setFiltersData}
945
- filteredData={filteredData}
980
+ setFilters={setFilters}
946
981
  excludedData={excludedData}
947
- filterData={filterVizData}
948
982
  dimensions={dimensions}
949
983
  />
950
984
  {config?.introText && (
@@ -1015,7 +1049,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
1015
1049
  (config.visualizationType === 'Sankey' && config.table.show)) && (
1016
1050
  <DataTable
1017
1051
  /* changing the "key" will force the table to re-render
1018
- when the default sort changes while editing */
1052
+ when the default sort changes while editing */
1019
1053
  key={dataTableDefaultSortBy}
1020
1054
  config={pivotDynamicSeries(config)}
1021
1055
  rawData={
@@ -1041,8 +1075,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
1041
1075
  )}
1042
1076
  {config?.annotations?.length > 0 && <Annotation.Dropdown />}
1043
1077
  {/* show pdf or image button */}
1044
- {config?.footnotes && <section className='footnotes pt-2 mt-4'>{parse(config.footnotes)}</section>}
1078
+ {config?.legacyFootnotes && (
1079
+ <section className='footnotes pt-2 mt-4'>{parse(config.legacyFootnotes)}</section>
1080
+ )}
1045
1081
  </div>
1082
+ <FootnotesStandAlone
1083
+ config={configObj.footnotes}
1084
+ filters={config.filters?.filter(f => f.filterFootnotes)}
1085
+ />
1046
1086
  </div>
1047
1087
  )}
1048
1088
  </Layout.Responsive>
@@ -1100,7 +1140,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
1100
1140
  setSharedFilterValue,
1101
1141
  svgRef,
1102
1142
  tableData: filteredData || excludedData,
1103
- transformedData: clean(filteredData || excludedData),
1143
+ transformedData: getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
1104
1144
  twoColorPalette,
1105
1145
  unfilteredData: _.cloneDeep(stateData),
1106
1146
  updateConfig