@cdc/chart 4.25.10 → 4.25.11

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 (85) hide show
  1. package/dist/{cdcchart-1a1724a1.es.js → cdcchart-dgT_1dIT.es.js} +136 -151
  2. package/dist/cdcchart.js +36258 -34658
  3. package/examples/feature/__data__/planet-example-data.json +1 -1
  4. package/examples/feature/boxplot/valid-boxplot.csv +38 -17
  5. package/examples/private/DEV-11825.json +573 -0
  6. package/examples/private/na.json +913 -0
  7. package/examples/private/test-data.csv +28 -0
  8. package/index.html +2 -121
  9. package/package.json +4 -4
  10. package/src/CdcChart.tsx +8 -11
  11. package/src/CdcChartComponent.tsx +256 -87
  12. package/src/_stories/Chart.Combo.stories.tsx +18 -0
  13. package/src/_stories/Chart.Forecast.stories.tsx +36 -0
  14. package/src/_stories/Chart.HTMLInDataTable.stories.tsx +520 -0
  15. package/src/_stories/Chart.Patterns.stories.tsx +2 -1
  16. package/src/_stories/Chart.PreserveDecimals.stories.tsx +220 -0
  17. package/src/_stories/Chart.SmallMultiples.stories.tsx +47 -0
  18. package/src/_stories/ChartAnnotation.stories.tsx +6 -3
  19. package/src/_stories/ChartBar.Editor.stories.tsx +3580 -0
  20. package/src/_stories/ChartEditor.Editor.stories.tsx +658 -0
  21. package/src/_stories/ChartEditor.stories.tsx +1 -2
  22. package/src/_stories/_mock/combo.json +451 -0
  23. package/src/_stories/_mock/editor-test-configs.json +376 -0
  24. package/src/_stories/_mock/editor-test-datasets.json +477 -0
  25. package/src/_stories/_mock/editor-tests/bar-chart-editor-test.json +255 -0
  26. package/src/_stories/_mock/editor-tests/bar-chart-general-test.json +267 -0
  27. package/src/_stories/_mock/editor-tests/bar-chart-test.json +237 -0
  28. package/src/_stories/_mock/forecast_combo_with_gaps.json +913 -0
  29. package/src/_stories/_mock/pie_config.json +257 -62
  30. package/src/_stories/_mock/small_multiples/small_multiples_bars.json +1944 -0
  31. package/src/_stories/_mock/small_multiples/small_multiples_big_data_bars.json +1114 -0
  32. package/src/_stories/_mock/small_multiples/small_multiples_lines.json +2646 -0
  33. package/src/_stories/_mock/small_multiples/small_multiples_lines_colors.json +1305 -0
  34. package/src/_stories/_mock/small_multiples/small_multiples_stacked_bars.json +1936 -0
  35. package/src/components/Annotations/components/findNearestDatum.ts +6 -41
  36. package/src/components/AreaChart/components/AreaChart.Stacked.jsx +10 -6
  37. package/src/components/AreaChart/index.tsx +1 -2
  38. package/src/components/BarChart/components/BarChart.Horizontal.tsx +4 -4
  39. package/src/components/BarChart/components/BarChart.Vertical.tsx +3 -2
  40. package/src/components/BoxPlot/helpers/index.ts +3 -3
  41. package/src/components/Brush/BrushChart.tsx +1 -1
  42. package/src/components/EditorPanel/EditorPanel.tsx +199 -190
  43. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +96 -111
  44. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +19 -1
  45. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +102 -55
  46. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +54 -49
  47. package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx +422 -0
  48. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +75 -21
  49. package/src/components/EditorPanel/components/Panels/index.tsx +3 -1
  50. package/src/components/EditorPanel/editor-panel.scss +0 -20
  51. package/src/components/EditorPanel/useEditorPermissions.ts +7 -15
  52. package/src/components/Forecasting/Forecasting.tsx +139 -21
  53. package/src/components/Legend/Legend.Component.tsx +16 -9
  54. package/src/components/Legend/helpers/createFormatLabels.tsx +181 -181
  55. package/src/components/Legend/helpers/getLegendClasses.ts +0 -1
  56. package/src/components/LineChart/LineChartProps.ts +0 -3
  57. package/src/components/LineChart/helpers.ts +1 -1
  58. package/src/components/LineChart/index.tsx +36 -13
  59. package/src/components/LinearChart.tsx +75 -80
  60. package/src/components/Regions/components/Regions.tsx +3 -24
  61. package/src/components/Sankey/types/index.ts +1 -1
  62. package/src/components/SmallMultiples/SmallMultipleTile.tsx +198 -0
  63. package/src/components/SmallMultiples/SmallMultiples.css +32 -0
  64. package/src/components/SmallMultiples/SmallMultiples.tsx +271 -0
  65. package/src/components/SmallMultiples/index.ts +2 -0
  66. package/src/data/initial-state.js +13 -1
  67. package/src/helpers/buildForecastPaletteOptions.ts +0 -38
  68. package/src/helpers/getColorScale.ts +10 -0
  69. package/src/{hooks/useMinMax.ts → helpers/getMinMax.ts} +14 -7
  70. package/src/helpers/getYAxisAutoPadding.ts +53 -0
  71. package/src/helpers/smallMultiplesHelpers.ts +529 -0
  72. package/src/hooks/useProgrammaticTooltip.ts +96 -0
  73. package/src/hooks/useScales.ts +88 -34
  74. package/src/hooks/useSmallMultipleSynchronization.ts +59 -0
  75. package/src/hooks/useTooltip.tsx +60 -15
  76. package/src/scss/main.scss +1 -80
  77. package/src/store/chart.actions.ts +2 -0
  78. package/src/store/chart.reducer.ts +4 -0
  79. package/src/types/ChartConfig.ts +24 -6
  80. package/src/types/ChartContext.ts +3 -0
  81. package/src/_stories/_mock/pie_data.json +0 -218
  82. package/src/components/AreaChart/components/AreaChart.jsx +0 -109
  83. package/src/helpers/sort.ts +0 -7
  84. package/src/hooks/useActiveElement.js +0 -19
  85. package/src/hooks/useChartClasses.js +0 -41
package/examples/private/test-data.csv ADDED
@@ -0,0 +1,28 @@
1
+ Date,Cases,Deaths,Hospitalizations,Footnote
2
+ 2024-01-01,1250,45,320,"Data collected from <strong>primary sources</strong>
3
+ Preliminary data subject to change"
4
+ 2024-02-01,1450,52,385,"Includes <em>confirmed</em> and probable cases"
5
+ 2024-03-01,1680,58,425,"Note: Data updated on <a href='#'>March 15, 2024</a>
6
+ May include backlog of cases from previous month"
7
+ 2024-04-01,1320,48,350,"<sup>*</sup>Holiday weekend affected reporting
8
+ Data normalized for comparison"
9
+ 2024-05-01,980,35,275,"See methodology at <a href='https://example.com'>example.com</a>"
10
+ 2024-06-01,750,28,210,"<strong>Note:</strong> New testing protocols implemented
11
+ Results may not be directly comparable to prior months"
12
+ 2024-07-01,620,22,180,"Summer decline observed
13
+ Typical seasonal pattern per <em>historical data</em>"
14
+ 2024-08-01,890,31,245,"<sup>†</sup>Estimated values based on incomplete reporting"
15
+ 2024-09-01,1150,42,310,"Data source: <strong>State Health Departments</strong>
16
+ Reported as of September 30, 2024"
17
+ 2024-10-01,1425,50,370,"Includes revisions from <em>prior reporting periods</em>
18
+ See details below"
19
+ 2024-11-01,1680,55,415,"<strong>Important:</strong> Reporting delays due to system maintenance
20
+ Data may be updated"
21
+ 2024-12-01,1890,62,465,"Year-end summary includes <sup>1</sup>adjustments
22
+ <a href='#notes'>See detailed notes</a>"
23
+ 2025-01-01,2150,68,520,"<strong>New Year</strong> reporting period
24
+ Data collection ongoing"
25
+ 2025-02-01,1980,61,485,"Preliminary <em>February</em> data
26
+ Subject to revision"
27
+ 2025-03-01,1725,54,430,"Latest available data as of <strong>March 10, 2025</strong>
28
+ Updates posted weekly at <a href='https://example.com/updates'>Updates Page</a>"
package/index.html CHANGED
@@ -22,134 +22,15 @@
22
22
  </head>
23
23
 
24
24
  <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
25
 
48
26
  <!-- 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> -->
27
+ <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div>
136
28
 
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
29
 
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> -->
149
30
 
150
31
  <noscript>You need to enable JavaScript to run this app.</noscript>
151
32
 
152
33
  <script type="module" src="./src/index.jsx"></script>
153
34
  </body>
154
35
 
155
- </html>
36
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/chart",
3
- "version": "4.25.10",
3
+ "version": "4.25.11",
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.25.11",
30
30
  "@hello-pangea/dnd": "^16.2.0",
31
31
  "@react-spring/web": "^9.7.5",
32
32
  "@rollup/plugin-dsv": "^3.0.2",
@@ -64,7 +64,7 @@
64
64
  "react-tooltip": "5.8.2-beta.3",
65
65
  "resize-observer-polyfill": "^1.5.1",
66
66
  "use-debounce": "^6.0.1",
67
- "vite": "^4.4.11",
67
+ "vite": "^5.4.21",
68
68
  "vite-plugin-css-injected-by-js": "^2.4.0",
69
69
  "vite-plugin-svgr": "^2.4.0",
70
70
  "whatwg-fetch": "3.6.20"
@@ -73,7 +73,7 @@
73
73
  "react": "^18.2.0",
74
74
  "react-dom": "^18.2.0"
75
75
  },
76
- "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d",
76
+ "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd",
77
77
  "devDependencies": {
78
78
  "@types/d3-array": "^3.2.1",
79
79
  "@types/d3-format": "^3.0.4",
package/src/CdcChart.tsx CHANGED
@@ -3,7 +3,7 @@ import CdcChart from './CdcChartComponent'
3
3
  import { ChartConfig } from './types/ChartConfig'
4
4
  import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
5
5
  import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
6
- import Papa from 'papaparse'
6
+ import { parseCsvWithQuotes } from '@cdc/core/helpers/parseCsvWithQuotes'
7
7
  import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
8
8
  import Loading from '@cdc/core/components/Loading'
9
9
  import _ from 'lodash'
@@ -49,8 +49,9 @@ const CdcChartWrapper: React.FC<CdcChartProps> = ({
49
49
  let isUpdateNeeded = false
50
50
 
51
51
  config.filters?.forEach(filter => {
52
- if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(filter.active)) {
53
- qsParams[filter.queryParameter] = filter.active
52
+ const activeValue = Array.isArray(filter.active) ? filter.active.join(',') : filter.active
53
+ if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(activeValue)) {
54
+ qsParams[filter.queryParameter] = activeValue
54
55
  isUpdateNeeded = true
55
56
  }
56
57
  })
@@ -101,14 +102,10 @@ const CdcChartWrapper: React.FC<CdcChartProps> = ({
101
102
  export default CdcChartWrapper
102
103
 
103
104
  const parseCsv = (responseText: string, delimiter = '|') => {
104
- const sanitizedText = responseText.replace(/(".*?")|,/g, (...m) => m[1] || delimiter).replace(/["]+/g, '')
105
-
106
- return Papa.parse(sanitizedText, {
107
- header: true,
108
- dynamicTyping: true,
109
- skipEmptyLines: true,
110
- delimiter
111
- }).data
105
+ return parseCsvWithQuotes(responseText, {
106
+ delimiter,
107
+ dynamicTyping: true
108
+ })
112
109
  }
113
110
 
114
111
  const fetchAndParseData = async (url: string, ext: string) => {