@cdc/chart 4.22.10 → 4.23.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 (80) hide show
  1. package/README.md +5 -5
  2. package/dist/495.js +3 -0
  3. package/dist/703.js +1 -0
  4. package/dist/cdcchart.js +723 -6
  5. package/examples/age-adjusted-rates.json +1486 -1218
  6. package/examples/box-plot-data.json +71 -0
  7. package/examples/box-plot.csv +5 -0
  8. package/examples/{private/yaxis-test.json → box-plot.json} +46 -54
  9. package/examples/case-rate-example-config.json +1 -1
  10. package/examples/covid-confidence-example-config.json +33 -33
  11. package/examples/covid-example-config.json +34 -34
  12. package/examples/covid-example-data-confidence.json +30 -30
  13. package/examples/covid-example-data.json +20 -20
  14. package/examples/cutoff-example-config.json +36 -36
  15. package/examples/cutoff-example-data.json +36 -36
  16. package/examples/date-exclusions-config.json +1 -1
  17. package/examples/dynamic-legends.json +124 -124
  18. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +191 -197
  19. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +230 -240
  20. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +239 -247
  21. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +138 -136
  22. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +79 -79
  23. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +80 -80
  24. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +67 -67
  25. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +179 -110
  26. package/examples/gallery/lollipop/lollipop-style-horizontal.json +215 -219
  27. package/examples/gallery/paired-bar/paired-bar-chart.json +195 -195
  28. package/examples/horizontal-chart.json +35 -35
  29. package/examples/horizontal-stacked-bar-chart.json +34 -34
  30. package/examples/line-chart.json +75 -75
  31. package/examples/new-data.csv +17 -0
  32. package/examples/newdata.json +90 -0
  33. package/examples/paired-bar-data.json +16 -14
  34. package/examples/paired-bar-example.json +48 -48
  35. package/examples/paired-bar-formatted.json +36 -36
  36. package/examples/planet-chart-horizontal-example-config.json +33 -33
  37. package/examples/planet-combo-example-config.json +34 -31
  38. package/examples/planet-example-config.json +35 -33
  39. package/examples/planet-example-data.json +56 -56
  40. package/examples/planet-pie-example-config.json +28 -28
  41. package/examples/stacked-vertical-bar-example.json +1 -1
  42. package/examples/temp-example-config.json +61 -54
  43. package/examples/temp-example-data.json +1 -1
  44. package/package.json +3 -2
  45. package/src/CdcChart.tsx +449 -434
  46. package/src/components/BarChart.tsx +383 -497
  47. package/src/components/BoxPlot.js +92 -0
  48. package/src/components/DataTable.tsx +182 -197
  49. package/src/components/EditorPanel.js +1068 -722
  50. package/src/components/Filters.js +131 -0
  51. package/src/components/Legend.js +286 -329
  52. package/src/components/LineChart.tsx +143 -81
  53. package/src/components/LinearChart.tsx +432 -451
  54. package/src/components/PairedBarChart.tsx +197 -213
  55. package/src/components/PieChart.tsx +105 -151
  56. package/src/components/SparkLine.js +179 -201
  57. package/src/components/useIntersectionObserver.tsx +19 -20
  58. package/src/context.tsx +3 -3
  59. package/src/data/initial-state.js +44 -17
  60. package/src/hooks/useActiveElement.js +13 -13
  61. package/src/hooks/useChartClasses.js +34 -28
  62. package/src/hooks/useColorPalette.ts +56 -63
  63. package/src/hooks/useLegendClasses.js +18 -10
  64. package/src/hooks/useReduceData.ts +64 -77
  65. package/src/hooks/useRightAxis.js +25 -0
  66. package/src/hooks/useTopAxis.js +6 -0
  67. package/src/index.html +19 -19
  68. package/src/index.tsx +13 -16
  69. package/src/scss/DataTable.scss +6 -5
  70. package/src/scss/editor-panel.scss +71 -69
  71. package/src/scss/main.scss +188 -114
  72. package/src/scss/variables.scss +1 -1
  73. package/examples/private/line-test-data.json +0 -22
  74. package/examples/private/line-test-two.json +0 -216
  75. package/examples/private/line-test.json +0 -102
  76. package/examples/private/newtest.csv +0 -101
  77. package/examples/private/shawn.json +0 -1296
  78. package/examples/private/test.json +0 -10124
  79. package/examples/private/yaxis-testing.csv +0 -27
  80. package/examples/private/yaxis.json +0 -28
@@ -1,35 +1,37 @@
1
1
  {
2
- "title": "Planet Radius (Bar Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
- "visualizationType": "Bar",
5
- "visualizationSubType": "regular",
6
- "series": [{"dataKey": "Radius"}],
7
- "fontSize": "medium",
8
- "dataCutoff": "0.5",
9
- "orientation": "horizontal",
10
- "dataFormat": {
11
- "roundTo": 1,
12
- "commas": false,
13
- "prefix": "",
14
- "suffix": "km"
15
- },
16
- "padding": {
17
- "left": 5,
18
- "right": 5
19
- },
20
- "yAxis": {
21
- "label": "Measurement (1000km)"
22
- },
23
- "xAxis": {
24
- "label": "Planet",
25
- "dataKey": "name",
26
- "tickRotation": 30
27
- },
28
- "legend": {
29
- "hide": false
30
- },
31
- "table": {
32
- "label": "Data Table",
33
- "expanded": false
34
- }
2
+ "title": "Planet Radius (Bar Example)",
3
+ "dataUrl": "/examples/planet-example-data.json",
4
+ "visualizationType": "Bar",
5
+ "visualizationSubType": "regular",
6
+ "series": [{ "dataKey": "Radius" }],
7
+ "fontSize": "medium",
8
+ "dataCutoff": "0.5",
9
+ "orientation": "vertical",
10
+ "dataFormat": {
11
+ "roundTo": 1,
12
+ "commas": false,
13
+ "prefix": "",
14
+ "suffix": "km"
15
+ },
16
+ "padding": {
17
+ "left": 5,
18
+ "right": 5
19
+ },
20
+ "yAxis": {
21
+ "label": "Measurement (1000km)",
22
+ "rightSeries": "Diameter",
23
+ "rightLabel": "testing"
24
+ },
25
+ "xAxis": {
26
+ "label": "Planet",
27
+ "dataKey": "name",
28
+ "tickRotation": 30
29
+ },
30
+ "legend": {
31
+ "hide": false
32
+ },
33
+ "table": {
34
+ "label": "Data Table",
35
+ "expanded": false
36
+ }
35
37
  }
@@ -1,56 +1,56 @@
1
- [
2
- {
3
- "name": "Jupiter",
4
- "Radius": "10.97",
5
- "Diameter": "22",
6
- "distance": "0"
7
- },
8
- {
9
- "name": "Saturn",
10
- "Radius": "9.14",
11
- "Diameter": "18",
12
- "distance": "0"
13
- },
14
- {
15
- "name": "Uranus",
16
- "Radius": "",
17
- "Diameter": "8",
18
- "distance": "0"
19
- },
20
- {
21
- "name": "Neptune",
22
- "Radius": "3.86",
23
- "Diameter": "7",
24
- "distance": "0"
25
- },
26
- {
27
- "name": "Earth",
28
- "Radius": "1",
29
- "Diameter": "2",
30
- "distance": "0"
31
- },
32
- {
33
- "name": "Venus",
34
- "Radius": "0.950",
35
- "Diameter": "2",
36
- "distance": "0"
37
- },
38
- {
39
- "name": "Mars",
40
- "Radius": "0.532",
41
- "Diameter": "1",
42
- "distance": "0"
43
- },
44
- {
45
- "name": "Mercury",
46
- "Radius": "0.383",
47
- "Diameter": "0.7",
48
- "distance": "0"
49
- },
50
- {
51
- "name": "Pluto",
52
- "Radius": "0.181",
53
- "Diameter": "0.3",
54
- "distance": "0"
55
- }
56
- ]
1
+ [
2
+ {
3
+ "name": "Jupiter",
4
+ "Radius": "10.97",
5
+ "Diameter": "22",
6
+ "distance": "0"
7
+ },
8
+ {
9
+ "name": "Saturn",
10
+ "Radius": "9.14",
11
+ "Diameter": "18",
12
+ "distance": "0"
13
+ },
14
+ {
15
+ "name": "Uranus",
16
+ "Radius": "0",
17
+ "Diameter": "8",
18
+ "distance": "0"
19
+ },
20
+ {
21
+ "name": "Neptune",
22
+ "Radius": "3.86",
23
+ "Diameter": "7",
24
+ "distance": "0"
25
+ },
26
+ {
27
+ "name": "Earth",
28
+ "Radius": "1",
29
+ "Diameter": "2",
30
+ "distance": "0"
31
+ },
32
+ {
33
+ "name": "Venus",
34
+ "Radius": "0.950",
35
+ "Diameter": "2",
36
+ "distance": "0"
37
+ },
38
+ {
39
+ "name": "Mars",
40
+ "Radius": "0.532",
41
+ "Diameter": "1",
42
+ "distance": "0"
43
+ },
44
+ {
45
+ "name": "Mercury",
46
+ "Radius": "0.383",
47
+ "Diameter": "0.7",
48
+ "distance": "0"
49
+ },
50
+ {
51
+ "name": "Pluto",
52
+ "Radius": "0.181",
53
+ "Diameter": "0.3",
54
+ "distance": "0"
55
+ }
56
+ ]
@@ -1,30 +1,30 @@
1
1
  {
2
- "title": "Planet Radius (Pie Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
- "animate": true,
5
- "animateReplay": true,
6
- "visualizationType": "Pie",
7
- "palette": "qualitative-soft",
8
- "aspectRatio": 1,
9
- "dataFormat": {
10
- "roundTo": 1,
11
- "commas": false,
12
- "prefix": "",
13
- "suffix": "km"
14
- },
15
- "yAxis": {
16
- "label": "Radius",
17
- "dataKey": "Radius"
18
- },
19
- "xAxis": {
20
- "label": "Planet",
21
- "dataKey": "name"
22
- },
23
- "legend": {
24
- "hide": false
25
- },
26
- "table": {
27
- "label": "Data Table",
28
- "expanded": false
29
- }
2
+ "title": "Planet Radius (Pie Example)",
3
+ "dataUrl": "/examples/planet-example-data.json",
4
+ "animate": true,
5
+ "animateReplay": true,
6
+ "visualizationType": "Pie",
7
+ "palette": "qualitative-soft",
8
+ "aspectRatio": 1,
9
+ "dataFormat": {
10
+ "roundTo": 1,
11
+ "commas": false,
12
+ "prefix": "",
13
+ "suffix": "km"
14
+ },
15
+ "yAxis": {
16
+ "label": "Radius",
17
+ "dataKey": "Radius"
18
+ },
19
+ "xAxis": {
20
+ "label": "Planet",
21
+ "dataKey": "name"
22
+ },
23
+ "legend": {
24
+ "hide": false
25
+ },
26
+ "table": {
27
+ "label": "Data Table",
28
+ "expanded": false
29
+ }
30
30
  }
@@ -225,4 +225,4 @@
225
225
  "Data 12": "200"
226
226
  }
227
227
  ]
228
- }
228
+ }
@@ -1,57 +1,64 @@
1
1
  {
2
- "title": "Average Temperature By City (Line Example)",
3
- "description": "<p>Average temperature from October 1st through August 29th in:</p><ul><li>New York</li><li>San Francisco</li><li>Austin</li></ul>",
4
- "dataUrl": "/examples/temp-example-data.json",
5
- "visualizationType": "Line",
6
- "series": [{"dataKey": "New York", "label": "NY"}, {"dataKey": "San Francisco", "label": "SF"}, {"dataKey":"Austin", "label": "AU"}],
7
- "filters":[{
8
- "label": "Wind",
9
- "columnName": "wind"
10
- },{
11
- "label": "Humidity",
12
- "columnName": "humidity"
13
- }],
14
- "seriesLabel": "City",
15
- "fontSize": "large",
16
- "dataFormat": {
17
- "commas": false,
18
- "prefix": "",
19
- "suffix": "°"
2
+ "title": "Average Temperature By City (Line Example)",
3
+ "description": "<p>Average temperature from October 1st through August 29th in:</p><ul><li>New York</li><li>San Francisco</li><li>Austin</li></ul>",
4
+ "dataUrl": "/examples/temp-example-data.json",
5
+ "visualizationType": "Line",
6
+ "series": [
7
+ { "dataKey": "New York", "label": "NY" },
8
+ { "dataKey": "San Francisco", "label": "SF" },
9
+ { "dataKey": "Austin", "label": "AU" }
10
+ ],
11
+ "filters": [
12
+ {
13
+ "label": "Wind",
14
+ "columnName": "wind"
20
15
  },
21
- "padding": {
22
- "left": 15,
23
- "right": 15
24
- },
25
- "yAxis": {
26
- "label": "Temperature",
27
- "paddingPercent": 0.15
28
- },
29
- "xAxis": {
30
- "label": "Date",
31
- "dataKey": "date",
32
- "type": "date",
33
- "dateParseFormat": "%Y-%m-%d",
34
- "dateDisplayFormat": "%b %d",
35
- "numTicks": 8,
36
- "tickRotation": 50
37
- },
38
- "legend": {
39
- "label": "Legend",
40
- "above": true,
41
- "left": true
42
- },
43
- "table": {
44
- "label": "Data Table",
45
- "expanded": false,
46
- "download": true
47
- },
48
- "regions": [
49
- {
50
- "label": "Region",
51
- "color": "black",
52
- "background": "green",
53
- "from": "2011-10-02",
54
- "to": "2011-10-03"
55
- }
56
- ]
16
+ {
17
+ "label": "Humidity",
18
+ "columnName": "humidity"
19
+ }
20
+ ],
21
+ "seriesLabel": "City",
22
+ "fontSize": "large",
23
+ "dataFormat": {
24
+ "commas": false,
25
+ "prefix": "",
26
+ "suffix": "°"
27
+ },
28
+ "padding": {
29
+ "left": 15,
30
+ "right": 15
31
+ },
32
+ "yAxis": {
33
+ "label": "Temperature",
34
+ "paddingPercent": 0.15
35
+ },
36
+ "xAxis": {
37
+ "label": "Date",
38
+ "dataKey": "date",
39
+ "type": "date",
40
+ "dateParseFormat": "%Y-%m-%d",
41
+ "dateDisplayFormat": "%b %d",
42
+ "numTicks": 8,
43
+ "tickRotation": 50
44
+ },
45
+ "legend": {
46
+ "label": "Legend",
47
+ "above": true,
48
+ "left": true
49
+ },
50
+ "table": {
51
+ "label": "Data Table",
52
+ "expanded": false,
53
+ "download": true
54
+ },
55
+ "regions": [
56
+ {
57
+ "label": "Region",
58
+ "color": "black",
59
+ "background": "green",
60
+ "from": "2011-10-02",
61
+ "to": "2011-10-03"
62
+ }
63
+ ]
57
64
  }
@@ -127,4 +127,4 @@
127
127
  "wind": "Don't Include Wind",
128
128
  "humidity": "Don't Include Humidiy"
129
129
  }
130
- ]
130
+ ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/chart",
3
- "version": "4.22.10",
3
+ "version": "4.23.1",
4
4
  "description": "React component for visualizing tabular data in various types of charts",
5
5
  "main": "dist/cdcchart",
6
6
  "scripts": {
@@ -29,6 +29,7 @@
29
29
  "@visx/mock-data": "^1.0.0",
30
30
  "@visx/scale": "^1.0.0",
31
31
  "@visx/shape": "^1.0.0",
32
+ "@visx/stats": "^2.17.0",
32
33
  "@visx/tooltip": "^1.1.0",
33
34
  "chroma-js": "^2.1.2",
34
35
  "d3-array": "^2.8.0",
@@ -50,5 +51,5 @@
50
51
  "resolutions": {
51
52
  "@types/react": "17.x"
52
53
  },
53
- "gitHead": "a7eb551a98c7363d3be58cb81dfc8bbc00522804"
54
+ "gitHead": "58163844cc9ce2c379235413b19f49679eab4bef"
54
55
  }