@cdc/chart 4.23.1 → 4.23.3

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 (74) hide show
  1. package/dist/cdcchart.js +56289 -702
  2. package/examples/Barchart_with_negative.json +34 -0
  3. package/examples/area-chart.json +187 -0
  4. package/examples/big-small-test-bar.json +328 -0
  5. package/examples/big-small-test-line.json +328 -0
  6. package/examples/big-small-test-negative.json +328 -0
  7. package/examples/box-plot.json +1 -2
  8. package/examples/dynamic-legends.json +1 -1
  9. package/examples/example-bar-chart-nonnumeric.json +36 -0
  10. package/examples/example-bar-chart.json +36 -0
  11. package/examples/example-combo-bar-nonnumeric.json +105 -0
  12. package/examples/example-sparkline.json +76 -0
  13. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +31 -172
  14. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +1 -1
  15. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json +1 -0
  16. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +96 -14
  17. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +2 -2
  18. package/examples/gallery/line/line.json +1 -0
  19. package/examples/gallery/paired-bar/paired-bar-chart.json +65 -13
  20. package/examples/horizontal-chart-max-increase.json +38 -0
  21. package/examples/line-chart-max-increase.json +32 -0
  22. package/examples/line-chart-nonnumeric.json +32 -0
  23. package/examples/line-chart.json +21 -63
  24. package/examples/newdata.json +1 -1
  25. package/examples/planet-combo-example-config.json +143 -20
  26. package/examples/planet-deviation-config.json +168 -0
  27. package/examples/planet-deviation-data.json +38 -0
  28. package/examples/planet-example-config.json +139 -20
  29. package/examples/planet-example-data-max-increase.json +56 -0
  30. package/examples/planet-example-data-nonnumeric.json +56 -0
  31. package/examples/planet-example-data.json +9 -9
  32. package/examples/planet-pie-example-config-nonnumeric.json +30 -0
  33. package/examples/scatterplot-continuous.csv +17 -0
  34. package/examples/scatterplot.json +136 -0
  35. package/examples/sparkline-chart-nonnumeric.json +76 -0
  36. package/examples/stacked-vertical-bar-example-negative.json +154 -0
  37. package/examples/stacked-vertical-bar-example-nonnumerics.json +154 -0
  38. package/index.html +91 -0
  39. package/package.json +33 -24
  40. package/src/{CdcChart.tsx → CdcChart.jsx} +196 -124
  41. package/src/components/AreaChart.jsx +198 -0
  42. package/src/components/{BarChart.tsx → BarChart.jsx} +154 -122
  43. package/src/components/BoxPlot.jsx +101 -0
  44. package/src/components/{DataTable.tsx → DataTable.jsx} +109 -28
  45. package/src/components/DeviationBar.jsx +191 -0
  46. package/src/components/{EditorPanel.js → EditorPanel.jsx} +676 -157
  47. package/src/components/{Filters.js → Filters.jsx} +6 -11
  48. package/src/components/Legend.jsx +316 -0
  49. package/src/components/{LineChart.tsx → LineChart.jsx} +22 -26
  50. package/src/components/{LinearChart.tsx → LinearChart.jsx} +214 -91
  51. package/src/components/{PairedBarChart.tsx → PairedBarChart.jsx} +44 -78
  52. package/src/components/{PieChart.tsx → PieChart.jsx} +26 -44
  53. package/src/components/ScatterPlot.jsx +51 -0
  54. package/src/components/SparkLine.jsx +218 -0
  55. package/src/components/{useIntersectionObserver.tsx → useIntersectionObserver.jsx} +2 -2
  56. package/src/data/initial-state.js +51 -5
  57. package/src/hooks/useColorPalette.js +68 -0
  58. package/src/hooks/{useReduceData.ts → useReduceData.js} +26 -16
  59. package/src/hooks/useRightAxis.js +3 -1
  60. package/src/index.jsx +16 -0
  61. package/src/scss/DataTable.scss +22 -0
  62. package/src/scss/editor-panel.scss +5 -0
  63. package/src/scss/main.scss +30 -10
  64. package/src/test/CdcChart.test.jsx +6 -0
  65. package/vite.config.js +4 -0
  66. package/dist/495.js +0 -3
  67. package/dist/703.js +0 -1
  68. package/src/components/BoxPlot.js +0 -92
  69. package/src/components/Legend.js +0 -291
  70. package/src/components/SparkLine.js +0 -185
  71. package/src/hooks/useColorPalette.ts +0 -76
  72. package/src/index.html +0 -67
  73. package/src/index.tsx +0 -18
  74. /package/src/{context.tsx → ConfigContext.jsx} +0 -0
package/index.html ADDED
@@ -0,0 +1,91 @@
1
+ <!DOCTYPE html>
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
+ /* max-width: 1000px; */
10
+ margin: 0 auto !important;
11
+ display: flex;
12
+ flex-direction: column;
13
+ justify-content: center;
14
+ }
15
+
16
+ .react-container+.react-container {
17
+ margin-top: 3rem;
18
+ }
19
+ </style>
20
+ </head>
21
+
22
+ <body>
23
+ <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
24
+
25
+ <!-- <select id="cove_select">
26
+ <option value=""">Choose An Option</option>
27
+ <option value="Non-Hispanic White">Non-Hispanic White</option>
28
+ <option value="Hispanic or Latino">Test 2</option>
29
+ </select> -->
30
+
31
+ <!-- <div class="react-container" data-config="/examples/dynamic-legends.json"></div> -->
32
+ <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
33
+ <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
34
+ <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
35
+ <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
36
+ <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
37
+ <!-- <div class="react-container" data-config="/examples/example-sparkline.json"></div> -->
38
+ <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
39
+ <!-- <div class="react-container" data-config="/examples/case-rate-example-config.json"></div> -->
40
+ <!-- <div class="react-container" data-config="/examples/example-bar-chart.json"></div> -->
41
+ <!-- <div class="react-container" data-config="/examples/example-sparkline.json"></div> -->
42
+ <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html#examples -->
43
+
44
+ <div class="react-container" data-config="/examples/gallery/line/line.json"></div>
45
+ <!-- EDGE CASES -->
46
+ <!-- <div class="react-container" data-config="/examples/big-small-test-line.json"></div> -->
47
+ <!-- <div class="react-container" data-config="/examples/big-small-test-bar.json"></div> -->
48
+ <!-- <div class="react-container" data-config="/examples/big-small-test-negative.json"></div> -->
49
+ <!-- <div class="react-container" data-config="/examples/line-chart-max-increase.json"></div> -->
50
+ <!-- <div class="react-container" data-config="/examples/horizontal-chart-max-increase.json"></div> -->
51
+
52
+ <!-- NONNUMERIC TESTS -->
53
+ <!-- <div class="react-container" data-config="/examples/planet-pie-example-config-nonnumeric.json"></div> -->
54
+ <!-- <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div> -->
55
+ <!-- <div class="react-container" data-config="/examples/example-combo-bar-nonnumeric.json"></div> -->
56
+ <!-- <div class="react-container" data-config="/examples/example-bar-chart-nonnumeric.json"></div> -->
57
+ <!-- <div class="react-container" data-config="/examples/line-chart.json"></div> -->
58
+ <!-- <div class="react-container" data-config="/examples/sparkline-chart-nonnumeric.json"></div> -->
59
+ <!-- <div class="react-container" data-config="/examples/area-chart.json"></div> -->
60
+ <!-- <div class="react-container" data-config="/examples/scatterplot.json"></div> -->
61
+
62
+ <!-- HORIZONTAL BAR CHARTS -->
63
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
64
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
65
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
66
+
67
+ <!-- VERTICAL BAR CHARTS -->
68
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
69
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
70
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
71
+ <!-- <div class="react-container" data-config="/examples/stacked-vertical-bar-example-nonnumerics.json"></div> -->
72
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
73
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
74
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
75
+
76
+ <!-- <div class="react-container" data-config="/examples/area-chart.json"></div> -->
77
+ <!-- <div class="react-container" data-config="/examples/scatterplot.json"></div> -->
78
+ <!-- <div class="react-container" data-config="/examples/box-plot.json"></div> -->
79
+ <!-- Paired bar Chart -->
80
+ <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
81
+
82
+ <!-- Deviation Bar Chart -->
83
+ <!-- <div class="react-container" data-config="/examples/planet-deviation-config.json"></div> -->
84
+
85
+ <noscript>You need to enable JavaScript to run this app.</noscript>
86
+ </body>
87
+
88
+ <script type="module" src="./src/index.jsx"></script>
89
+ </body>
90
+
91
+ </html>
package/package.json CHANGED
@@ -1,12 +1,18 @@
1
1
  {
2
2
  "name": "@cdc/chart",
3
- "version": "4.23.1",
3
+ "version": "4.23.3",
4
4
  "description": "React component for visualizing tabular data in various types of charts",
5
+ "moduleName": "CdcChart",
5
6
  "main": "dist/cdcchart",
7
+ "type": "module",
6
8
  "scripts": {
7
- "start": "npx webpack serve --mode development -c ../../webpack.config.js",
8
- "build": "npx webpack --mode production --env packageName=CdcChart --env folderName=chart -c ../../webpack.config.js",
9
- "prepublishOnly": "lerna run --scope @cdc/chart build"
9
+ "start": "vite --open",
10
+ "build": "vite build",
11
+ "preview": "vite preview",
12
+ "graph": "nx graph",
13
+ "prepublishOnly": "lerna run --scope @cdc/chart build",
14
+ "test": "vitest watch --reporter verbose",
15
+ "test:ui": "vitest --ui"
10
16
  },
11
17
  "repository": {
12
18
  "type": "git",
@@ -19,37 +25,40 @@
19
25
  },
20
26
  "license": "Apache-2.0",
21
27
  "dependencies": {
22
- "@cdc/core": "^1.1.4",
23
- "@visx/axis": "^1.0.0",
24
- "@visx/curve": "^1.0.0",
25
- "@visx/gradient": "^1.0.0",
26
- "@visx/group": "^1.0.0",
27
- "@visx/legend": "^1.1.0",
28
- "@visx/marker": "^1.1.0",
29
- "@visx/mock-data": "^1.0.0",
30
- "@visx/scale": "^1.0.0",
31
- "@visx/shape": "^1.0.0",
32
- "@visx/stats": "^2.17.0",
33
- "@visx/tooltip": "^1.1.0",
28
+ "@hello-pangea/dnd": "^16.2.0",
29
+ "@visx/axis": "^3.0.0",
30
+ "@visx/curve": "^3.0.0",
31
+ "@visx/event": "^3.0.1",
32
+ "@visx/gradient": "^3.0.0",
33
+ "@visx/group": "^3.0.0",
34
+ "@visx/legend": "^3.0.0",
35
+ "@visx/marker": "^3.0.0",
36
+ "@visx/mock-data": "^3.0.0",
37
+ "@visx/scale": "^3.0.0",
38
+ "@visx/shape": "^3.0.0",
39
+ "@visx/stats": "^3.0.0",
40
+ "@visx/text": "^3.0.0",
41
+ "@visx/tooltip": "^3.0.0",
34
42
  "chroma-js": "^2.1.2",
35
43
  "d3-array": "^2.8.0",
44
+ "d3-format": "^3.1.0",
36
45
  "d3-time-format": "^3.0.0",
37
- "html-react-parser": "1.4.9",
46
+ "html-react-parser": "^3.0.8",
38
47
  "js-base64": "^2.5.2",
39
48
  "papaparse": "^5.3.0",
40
49
  "react-accessible-accordion": "^3.3.4",
41
50
  "react-spring": "^8.0.27",
42
51
  "react-table": "^7.5.0",
43
- "react-tooltip": "4.2.8",
52
+ "react-tooltip": "5.8.2-beta.3",
44
53
  "use-debounce": "^6.0.1",
45
54
  "whatwg-fetch": "^3.6.2"
46
55
  },
47
56
  "peerDependencies": {
48
- "react": ">=16.8",
49
- "react-dom": ">=16"
57
+ "react": "^18.2.0",
58
+ "react-dom": "^18.2.0"
50
59
  },
51
- "resolutions": {
52
- "@types/react": "17.x"
53
- },
54
- "gitHead": "58163844cc9ce2c379235413b19f49679eab4bef"
60
+ "gitHead": "6fa3b11db159d38538f18023fe70b67a29e7d327",
61
+ "devDependencies": {
62
+ "resize-observer-polyfill": "^1.5.1"
63
+ }
55
64
  }