@cdc/chart 4.25.10 → 4.26.1

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 (135) hide show
  1. package/dist/{cdcchart-1a1724a1.es.js → cdcchart-dgT_1dIT.es.js} +136 -151
  2. package/dist/cdcchart.js +44003 -43518
  3. package/examples/feature/__data__/planet-example-data.json +1 -1
  4. package/examples/feature/boxplot/valid-boxplot.csv +38 -17
  5. package/examples/feature/pie/planet-pie-example-config.json +48 -2
  6. package/examples/private/DEV-11825.json +573 -0
  7. package/examples/private/DEV-12100.json +1303 -0
  8. package/examples/private/cat-y.json +1235 -0
  9. package/examples/private/data-points.json +228 -0
  10. package/examples/private/height.json +3915 -0
  11. package/examples/private/links.json +569 -0
  12. package/examples/private/na.json +913 -0
  13. package/examples/private/quadrant.txt +30 -0
  14. package/examples/private/test-data.csv +28 -0
  15. package/examples/private/test-forecast.json +5510 -0
  16. package/examples/private/warming-stripe-test.json +2578 -0
  17. package/examples/private/warming-stripes.json +4763 -0
  18. package/examples/tech-adoption-with-links.json +560 -0
  19. package/index.html +16 -140
  20. package/package.json +6 -5
  21. package/preview.html +1616 -0
  22. package/src/CdcChart.tsx +8 -11
  23. package/src/CdcChartComponent.tsx +329 -124
  24. package/src/_stories/Chart.Combo.stories.tsx +18 -0
  25. package/src/_stories/Chart.Forecast.stories.tsx +36 -0
  26. package/src/_stories/Chart.HTMLInDataTable.stories.tsx +520 -0
  27. package/src/_stories/Chart.Patterns.stories.tsx +2 -1
  28. package/src/_stories/Chart.PreserveDecimals.stories.tsx +220 -0
  29. package/src/_stories/Chart.Regions.Categorical.stories.tsx +148 -0
  30. package/src/_stories/Chart.Regions.DateScale.stories.tsx +197 -0
  31. package/src/_stories/Chart.Regions.DateTimeScale.stories.tsx +297 -0
  32. package/src/_stories/Chart.SmallMultiples.stories.tsx +47 -0
  33. package/src/_stories/Chart.stories.tsx +8 -0
  34. package/src/_stories/ChartAnnotation.stories.tsx +6 -3
  35. package/src/_stories/ChartBar.Editor.stories.tsx +3585 -0
  36. package/src/_stories/ChartBrush.Editor.stories.tsx +295 -0
  37. package/src/_stories/ChartBrush.stories.tsx +50 -0
  38. package/src/_stories/ChartEditor.Editor.stories.tsx +656 -0
  39. package/src/_stories/ChartEditor.stories.tsx +1 -2
  40. package/src/_stories/TechAdoptionWithLinks.stories.tsx +27 -0
  41. package/src/_stories/_mock/brush_enabled.json +326 -0
  42. package/src/_stories/_mock/brush_mock.json +2 -69
  43. package/src/_stories/_mock/combo.json +451 -0
  44. package/src/_stories/_mock/editor-test-configs.json +376 -0
  45. package/src/_stories/_mock/editor-test-datasets.json +477 -0
  46. package/src/_stories/_mock/editor-tests/bar-chart-editor-test.json +255 -0
  47. package/src/_stories/_mock/editor-tests/bar-chart-general-test.json +267 -0
  48. package/src/_stories/_mock/editor-tests/bar-chart-test.json +237 -0
  49. package/src/_stories/_mock/forecast_combo_with_gaps.json +913 -0
  50. package/src/_stories/_mock/horizontal-bars-dynamic-y-axis.json +413 -0
  51. package/src/_stories/_mock/pie_config.json +257 -62
  52. package/src/_stories/_mock/small_multiples/small_multiples_bars.json +1944 -0
  53. package/src/_stories/_mock/small_multiples/small_multiples_big_data_bars.json +1114 -0
  54. package/src/_stories/_mock/small_multiples/small_multiples_lines.json +2646 -0
  55. package/src/_stories/_mock/small_multiples/small_multiples_lines_colors.json +1305 -0
  56. package/src/_stories/_mock/small_multiples/small_multiples_stacked_bars.json +1936 -0
  57. package/src/components/Annotations/components/findNearestDatum.ts +6 -41
  58. package/src/components/AreaChart/components/AreaChart.Stacked.jsx +10 -7
  59. package/src/components/AreaChart/index.tsx +1 -2
  60. package/src/components/Axis/Categorical.Axis.tsx +6 -7
  61. package/src/components/BarChart/components/BarChart.Horizontal.tsx +181 -27
  62. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +3 -1
  63. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +1 -0
  64. package/src/components/BarChart/components/BarChart.Vertical.tsx +8 -9
  65. package/src/components/BarChart/components/context.tsx +1 -0
  66. package/src/components/BarChart/helpers/useBarChart.ts +14 -2
  67. package/src/components/BoxPlot/helpers/index.ts +3 -3
  68. package/src/components/Brush/BrushSelector.tsx +1258 -0
  69. package/src/components/Brush/MiniChartPreview.tsx +283 -0
  70. package/src/components/DeviationBar.jsx +9 -7
  71. package/src/components/EditorPanel/EditorPanel.tsx +2720 -2586
  72. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +96 -111
  73. package/src/components/EditorPanel/components/Panels/Panel.ForestPlotSettings.tsx +56 -34
  74. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +76 -31
  75. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +104 -55
  76. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +54 -49
  77. package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx +427 -0
  78. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +96 -48
  79. package/src/components/EditorPanel/components/Panels/index.tsx +3 -1
  80. package/src/components/EditorPanel/editor-panel.scss +0 -20
  81. package/src/components/EditorPanel/useEditorPermissions.ts +36 -31
  82. package/src/components/Forecasting/Forecasting.tsx +139 -21
  83. package/src/components/Legend/Legend.Component.tsx +16 -9
  84. package/src/components/Legend/Legend.tsx +3 -2
  85. package/src/components/Legend/helpers/createFormatLabels.tsx +325 -176
  86. package/src/components/Legend/helpers/getLegendClasses.ts +0 -1
  87. package/src/components/Legend/helpers/index.ts +10 -6
  88. package/src/components/LineChart/LineChartProps.ts +0 -3
  89. package/src/components/LineChart/helpers.ts +1 -1
  90. package/src/components/LineChart/index.tsx +36 -13
  91. package/src/components/LinearChart.tsx +559 -499
  92. package/src/components/PairedBarChart.jsx +20 -3
  93. package/src/components/Regions/components/Regions.tsx +366 -144
  94. package/src/components/Sankey/types/index.ts +1 -1
  95. package/src/components/ScatterPlot/ScatterPlot.jsx +2 -2
  96. package/src/components/SmallMultiples/SmallMultipleTile.tsx +202 -0
  97. package/src/components/SmallMultiples/SmallMultiples.css +32 -0
  98. package/src/components/SmallMultiples/SmallMultiples.tsx +271 -0
  99. package/src/components/SmallMultiples/index.ts +2 -0
  100. package/src/components/WarmingStripes/WarmingStripes.tsx +160 -0
  101. package/src/components/WarmingStripes/WarmingStripesGradientLegend.css +35 -0
  102. package/src/components/WarmingStripes/WarmingStripesGradientLegend.tsx +104 -0
  103. package/src/components/WarmingStripes/index.tsx +3 -0
  104. package/src/data/initial-state.js +16 -2
  105. package/src/helpers/buildForecastPaletteOptions.ts +0 -38
  106. package/src/helpers/calculateHorizontalBarCategoryLabelWidth.ts +57 -0
  107. package/src/helpers/getColorScale.ts +10 -0
  108. package/src/{hooks/useMinMax.ts → helpers/getMinMax.ts} +26 -14
  109. package/src/helpers/getYAxisAutoPadding.ts +53 -0
  110. package/src/helpers/sizeHelpers.ts +0 -20
  111. package/src/helpers/smallMultiplesHelpers.ts +529 -0
  112. package/src/hooks/useChartHoverAnalytics.tsx +10 -9
  113. package/src/hooks/useProgrammaticTooltip.ts +96 -0
  114. package/src/hooks/useScales.ts +98 -34
  115. package/src/hooks/useSmallMultipleSynchronization.ts +59 -0
  116. package/src/hooks/useTooltip.tsx +91 -25
  117. package/src/scss/DataTable.scss +0 -4
  118. package/src/scss/main.scss +18 -83
  119. package/src/store/chart.actions.ts +2 -0
  120. package/src/store/chart.reducer.ts +4 -0
  121. package/src/test/CdcChart.test.jsx +1 -1
  122. package/src/types/ChartConfig.ts +27 -6
  123. package/src/types/ChartContext.ts +3 -0
  124. package/src/types/Label.ts +1 -0
  125. package/src/utils/analyticsTracking.ts +19 -0
  126. package/LICENSE +0 -201
  127. package/src/_stories/_mock/pie_data.json +0 -218
  128. package/src/components/AreaChart/components/AreaChart.jsx +0 -109
  129. package/src/components/Brush/BrushChart.tsx +0 -128
  130. package/src/components/Brush/BrushController.tsx +0 -71
  131. package/src/components/Brush/types.tsx +0 -8
  132. package/src/components/BrushChart.tsx +0 -223
  133. package/src/helpers/sort.ts +0 -7
  134. package/src/hooks/useActiveElement.js +0 -19
  135. package/src/hooks/useChartClasses.js +0 -41
package/index.html CHANGED
@@ -1,155 +1,31 @@
1
- <!DOCTYPE html>
1
+ <!DOCTYPE html>
2
2
  <html lang="en">
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
- }
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
+ /* Force scrollbar so page stays consistent width */
11
+ min-height: calc(100vh + 1px);
12
+ }
12
13
 
13
14
  .cdc-map-outer-container {
14
15
  min-height: 100vh;
15
16
  }
16
17
 
17
- /* .react-container + .react-container {
18
- margin-top: 3rem;
19
- } */
20
- </style>
21
- <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
22
- </head>
18
+ <body>
19
+ <!-- GENERIC CHART TYPES -->
20
+ <div class="react-container" data-config="/examples/private/height.json"></div>
23
21
 
24
22
  <body>
25
- <!-- SANKEY EXAMPLE -->
26
- <!-- <div class="container d-flex flex-wrap body-wrapper bg-white" style="width: 750px">
27
- <main class="col-lg-9 order-lg-2" role="main" aria-label="Main Content Area">
28
- <div class="row">
29
- <div class="col-md-12"> -->
30
- <!-- <div class="react-container" data-config="/examples/feature/sankey/sankey-example-data.json"></div> -->
31
- <!-- </div>
32
- </div>
33
- </main>
34
- </div> -->
35
-
36
- <!--
37
- EXAMPLES:
38
- chart/examples/features: different chart types and tests
39
- chart/examples/private: an ignored git folder used for addl. troubleshooting.
40
- chart/examples/gallery: examples pulled from the cdc data visualization gallery
41
- chart/examples/__data__: a folder for storing re-usable fictional datasets
42
-
43
- GALLERY EXAMPLES ARE FOUND HERE:
44
- https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-cities-states.html
45
-
46
- -->
47
-
48
23
  <!-- 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/private/f3.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/private/pie-chart-legend.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/pie/planet-pie-example-config.json"></div> -->
58
- <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
59
- <!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
60
- <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
61
- <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
62
- <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
63
- <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
64
- <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
65
- <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
66
- <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
67
- <!-- <div class="react-container" data-config="/examples/scatterplot-image-download.json"></div> -->
68
- <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
69
- <!-- <div class="react-container" data-config="/examples/private/test.json"></div> -->
70
- <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
71
- <!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
72
- <!-- <div class="react-container" data-config="/examples/dev-9822.json"></div> -->
73
-
74
- <!-- BAR -->
75
- <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
76
- <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
77
- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div>
78
- <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
79
-
80
- <!-- TESTS DATA TABLE SORTING -->
81
- <!-- Bar Chart with Confidence Intervals (bottom of page) -->
82
- <!-- <div class="react-container" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Example_Bar_CI.json"></div> -->
83
- <!-- TPOXX Patient Data -->
84
- <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/tpoxx_weekly_race_eth.json"></div> -->
85
- <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-tpoxx-age-gender.json"></div> -->
86
- <!-- Non-Variola Orthopoxvirus (NVO) Laboratory Testing by Demographics -->
87
- <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data.json"></div> -->
88
- <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data-age.json"></div> -->
89
- <!-- PROBLEM WITH THEIR PAGE CONFIG or CONFLICT with -->
90
- <!-- CORS ERROR pulling data on Covid Flu RSV page at https://wwwdev-cdc.msappproxy.net/respiratory-viruses/index.html-->
91
- <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/respiratory-viruses/modules/emergency-dept-visits_live.json"></div> -->
92
- <!-- MPOX -->
93
- <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpox-demographics-monthly.json"></div> -->
94
- <!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
95
-
96
- <!-- TESTS DATE EXCLUSIONS -->
97
- <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
98
- <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
99
-
100
- <!-- TESTS BIG SMALL-->
101
- <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
102
- <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div> -->
103
- <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
104
- <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
105
-
106
- <!-- TESTS NONNUMERICS -->
107
- <!-- <div class="react-container"
108
- data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
109
- <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div> -->
110
- <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
111
- <!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
112
- <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
113
- <!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
114
- <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
115
-
116
- <!-- TESTS CUTOFF -->
117
- <!-- <div class="react-container" data-config="/examples/feature/tests-cutoff/cutoff-example-config.json"></div> -->
118
-
119
- <!-- TESTS COVID -->
120
- <!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-confidence-example-config.json"></div> -->
121
- <!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-example-config.json"></div> -->
122
-
123
- <!-- TESTS TOOLTIPS -->
124
- <!-- <div class="react-container" data-config="/examples/suppressed_tooltip.json"></div> -->
125
-
126
- <!--
127
- GALLERY EXAMPLES BELOW THIS LINE...
128
- https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-cities-states.html
129
-
130
- -->
131
-
132
- <!-- GENERIC CHART TYPES -->
133
- <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
134
- <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
135
- <!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
136
-
137
- <!-- HORIZONTAL BAR CHARTS -->
138
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
139
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
140
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
141
-
142
- <!-- VERTICAL BAR CHARTS -->
143
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
144
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
145
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
146
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
147
- <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
148
- <!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->
24
+ <div class="react-container" data-config="/examples/private/height.json"></div>
149
25
 
150
26
  <noscript>You need to enable JavaScript to run this app.</noscript>
151
27
 
152
28
  <script type="module" src="./src/index.jsx"></script>
153
29
  </body>
154
30
 
155
- </html>
31
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/chart",
3
- "version": "4.25.10",
3
+ "version": "4.26.1",
4
4
  "description": "React component for visualizing tabular data in various types of charts",
5
5
  "moduleName": "CdcChart",
6
6
  "main": "dist/cdcchart",
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "license": "Apache-2.0",
28
28
  "dependencies": {
29
- "@cdc/core": "^4.25.10",
29
+ "@cdc/core": "^4.26.1",
30
30
  "@hello-pangea/dnd": "^16.2.0",
31
31
  "@react-spring/web": "^9.7.5",
32
32
  "@rollup/plugin-dsv": "^3.0.2",
@@ -63,17 +63,18 @@
63
63
  "react-icons": "5.5.0",
64
64
  "react-tooltip": "5.8.2-beta.3",
65
65
  "resize-observer-polyfill": "^1.5.1",
66
+ "sass": "^1.89.2",
66
67
  "use-debounce": "^6.0.1",
67
- "vite": "^4.4.11",
68
+ "vite": "^5.4.21",
68
69
  "vite-plugin-css-injected-by-js": "^2.4.0",
69
- "vite-plugin-svgr": "^2.4.0",
70
+ "vite-plugin-svgr": "^4.2.0",
70
71
  "whatwg-fetch": "3.6.20"
71
72
  },
72
73
  "peerDependencies": {
73
74
  "react": "^18.2.0",
74
75
  "react-dom": "^18.2.0"
75
76
  },
76
- "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d",
77
+ "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16",
77
78
  "devDependencies": {
78
79
  "@types/d3-array": "^3.2.1",
79
80
  "@types/d3-format": "^3.0.4",