@cdc/waffle-chart 4.26.1 → 4.26.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.
- package/LICENSE +201 -0
- package/dist/cdcwafflechart.js +10982 -9773
- package/examples/default.json +10 -0
- package/examples/tp5-gauge-white.json +158 -0
- package/examples/tp5-gauge.json +158 -0
- package/index.html +1 -33
- package/package.json +30 -33
- package/src/CdcWaffleChart.tsx +222 -92
- package/src/_stories/WaffleChart.Editor.stories.tsx +245 -7
- package/src/_stories/WaffleChart.stories.tsx +49 -2
- package/src/components/EditorPanel.jsx +89 -63
- package/src/data/initial-state.js +3 -1
- package/src/scss/main.scss +3 -10
- package/src/scss/waffle-chart.scss +195 -21
- package/src/store/chart.reducer.ts +1 -1
- package/src/test/CdcWaffleChart.test.jsx +2 -2
- package/src/types/Config.ts +5 -1
- package/src/images/callout-flag.svg +0 -7
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "TP5 Gauge Chart - White Background",
|
|
3
|
+
"visualizationType": "TP5 Gauge",
|
|
4
|
+
"visualizationSubType": "linear",
|
|
5
|
+
"showPercent": true,
|
|
6
|
+
"showDenominator": true,
|
|
7
|
+
"valueDescription": "out of",
|
|
8
|
+
"content": "of cases occurred in the home",
|
|
9
|
+
"subtext": "Chart subtext or citation",
|
|
10
|
+
"orientation": "horizontal",
|
|
11
|
+
"data": [
|
|
12
|
+
{
|
|
13
|
+
"Insured Rate": "43",
|
|
14
|
+
"Coverage Status": "Insured",
|
|
15
|
+
"state": "Alabama",
|
|
16
|
+
"Year (Good filter option)": "2010",
|
|
17
|
+
"link": "",
|
|
18
|
+
"Verified": true
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"Insured Rate": "0",
|
|
22
|
+
"Coverage Status": "Uninsured",
|
|
23
|
+
"state": "Alaska",
|
|
24
|
+
"Year (Good filter option)": "2006",
|
|
25
|
+
"link": "",
|
|
26
|
+
"Verified": false
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"Insured Rate": "72.7",
|
|
30
|
+
"Coverage Status": "Insured",
|
|
31
|
+
"state": "Arizona",
|
|
32
|
+
"Year (Good filter option)": "2008",
|
|
33
|
+
"link": "#lorem",
|
|
34
|
+
"Verified": true
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"Insured Rate": "78.7",
|
|
38
|
+
"Coverage Status": "Insured",
|
|
39
|
+
"state": "Arkansas",
|
|
40
|
+
"Year (Good filter option)": "2010",
|
|
41
|
+
"link": "",
|
|
42
|
+
"Verified": true
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"Insured Rate": "37.2",
|
|
46
|
+
"Coverage Status": "Insured",
|
|
47
|
+
"state": "California",
|
|
48
|
+
"Year (Good filter option)": "2018",
|
|
49
|
+
"link": "https://search.cdc.gov/search/?query=California&utf8=%E2%9C%93&affiliate=cdc-main",
|
|
50
|
+
"Verified": true
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"Insured Rate": "50.6",
|
|
54
|
+
"Coverage Status": "Insured",
|
|
55
|
+
"state": "Colorado",
|
|
56
|
+
"Year (Good filter option)": "2014",
|
|
57
|
+
"link": "",
|
|
58
|
+
"Verified": false
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"Insured Rate": "83.2",
|
|
62
|
+
"Coverage Status": "Insured",
|
|
63
|
+
"state": "Connecticut",
|
|
64
|
+
"Year (Good filter option)": "2019",
|
|
65
|
+
"link": "",
|
|
66
|
+
"Verified": true
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"Insured Rate": "90",
|
|
70
|
+
"Coverage Status": "Insured",
|
|
71
|
+
"state": "Delaware",
|
|
72
|
+
"Year (Good filter option)": "2020",
|
|
73
|
+
"link": "",
|
|
74
|
+
"Verified": true
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"Insured Rate": "77.1",
|
|
78
|
+
"Coverage Status": "Insured",
|
|
79
|
+
"state": "District of Columbia",
|
|
80
|
+
"Year (Good filter option)": "2019",
|
|
81
|
+
"link": "https://search.cdc.gov/search/index.html?query=Washington+D.C.&sitelimit=&utf8=%E2%9C%93&affiliate=cdc-main",
|
|
82
|
+
"Verified": false
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"Insured Rate": "83",
|
|
86
|
+
"Coverage Status": "Insured",
|
|
87
|
+
"state": "Florida",
|
|
88
|
+
"Year (Good filter option)": "2016",
|
|
89
|
+
"link": "",
|
|
90
|
+
"Verified": true
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"Insured Rate": "67.4",
|
|
94
|
+
"Coverage Status": "Insured",
|
|
95
|
+
"state": "Georgia",
|
|
96
|
+
"Year (Good filter option)": "2013",
|
|
97
|
+
"link": "",
|
|
98
|
+
"Verified": false
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
"filters": [
|
|
102
|
+
{
|
|
103
|
+
"columnName": "Year (Good filter option)",
|
|
104
|
+
"label": "Year",
|
|
105
|
+
"showDropdown": true,
|
|
106
|
+
"order": "desc",
|
|
107
|
+
"active": true,
|
|
108
|
+
"values": [],
|
|
109
|
+
"type": "multi-select"
|
|
110
|
+
}
|
|
111
|
+
],
|
|
112
|
+
"fontSize": "",
|
|
113
|
+
"overallFontSize": "medium",
|
|
114
|
+
"dataColumn": "Insured Rate",
|
|
115
|
+
"dataFunction": "Mean (Average)",
|
|
116
|
+
"dataConditionalColumn": "",
|
|
117
|
+
"dataConditionalOperator": "",
|
|
118
|
+
"dataConditionalComparate": "",
|
|
119
|
+
"invalidComparate": false,
|
|
120
|
+
"customDenom": false,
|
|
121
|
+
"dataDenom": "100",
|
|
122
|
+
"dataDenomColumn": "",
|
|
123
|
+
"dataDenomFunction": "",
|
|
124
|
+
"prefix": "",
|
|
125
|
+
"suffix": "%",
|
|
126
|
+
"roundToPlace": "0",
|
|
127
|
+
"shape": "circle",
|
|
128
|
+
"nodeWidth": "10",
|
|
129
|
+
"nodeSpacer": "2",
|
|
130
|
+
"theme": "theme-blue",
|
|
131
|
+
"type": "waffle-chart",
|
|
132
|
+
"gauge": {
|
|
133
|
+
"height": 35,
|
|
134
|
+
"width": "100%"
|
|
135
|
+
},
|
|
136
|
+
"visual": {
|
|
137
|
+
"border": false,
|
|
138
|
+
"accent": false,
|
|
139
|
+
"background": false,
|
|
140
|
+
"hideBackgroundColor": false,
|
|
141
|
+
"borderColorTheme": false,
|
|
142
|
+
"whiteBackground": true,
|
|
143
|
+
"colors": {
|
|
144
|
+
"theme-blue": "#005eaa",
|
|
145
|
+
"theme-purple": "#712177",
|
|
146
|
+
"theme-brown": "#705043",
|
|
147
|
+
"theme-teal": "#00695c",
|
|
148
|
+
"theme-pink": "#af4448",
|
|
149
|
+
"theme-orange": "#bb4d00",
|
|
150
|
+
"theme-slate": "#29434e",
|
|
151
|
+
"theme-indigo": "#26418f",
|
|
152
|
+
"theme-cyan": "#006778",
|
|
153
|
+
"theme-green": "#4b830d",
|
|
154
|
+
"theme-amber": "#fbab18"
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
"showTitle": true
|
|
158
|
+
}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "TP5 Gauge Chart",
|
|
3
|
+
"visualizationType": "TP5 Gauge",
|
|
4
|
+
"visualizationSubType": "linear",
|
|
5
|
+
"showPercent": true,
|
|
6
|
+
"showDenominator": true,
|
|
7
|
+
"valueDescription": "out of",
|
|
8
|
+
"content": "of cases occurred in the home",
|
|
9
|
+
"subtext": "Chart subtext or citation",
|
|
10
|
+
"orientation": "horizontal",
|
|
11
|
+
"data": [
|
|
12
|
+
{
|
|
13
|
+
"Insured Rate": "43",
|
|
14
|
+
"Coverage Status": "Insured",
|
|
15
|
+
"state": "Alabama",
|
|
16
|
+
"Year (Good filter option)": "2010",
|
|
17
|
+
"link": "",
|
|
18
|
+
"Verified": true
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"Insured Rate": "0",
|
|
22
|
+
"Coverage Status": "Uninsured",
|
|
23
|
+
"state": "Alaska",
|
|
24
|
+
"Year (Good filter option)": "2006",
|
|
25
|
+
"link": "",
|
|
26
|
+
"Verified": false
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"Insured Rate": "72.7",
|
|
30
|
+
"Coverage Status": "Insured",
|
|
31
|
+
"state": "Arizona",
|
|
32
|
+
"Year (Good filter option)": "2008",
|
|
33
|
+
"link": "#lorem",
|
|
34
|
+
"Verified": true
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"Insured Rate": "78.7",
|
|
38
|
+
"Coverage Status": "Insured",
|
|
39
|
+
"state": "Arkansas",
|
|
40
|
+
"Year (Good filter option)": "2010",
|
|
41
|
+
"link": "",
|
|
42
|
+
"Verified": true
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"Insured Rate": "37.2",
|
|
46
|
+
"Coverage Status": "Insured",
|
|
47
|
+
"state": "California",
|
|
48
|
+
"Year (Good filter option)": "2018",
|
|
49
|
+
"link": "https://search.cdc.gov/search/?query=California&utf8=%E2%9C%93&affiliate=cdc-main",
|
|
50
|
+
"Verified": true
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"Insured Rate": "50.6",
|
|
54
|
+
"Coverage Status": "Insured",
|
|
55
|
+
"state": "Colorado",
|
|
56
|
+
"Year (Good filter option)": "2014",
|
|
57
|
+
"link": "",
|
|
58
|
+
"Verified": false
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"Insured Rate": "83.2",
|
|
62
|
+
"Coverage Status": "Insured",
|
|
63
|
+
"state": "Connecticut",
|
|
64
|
+
"Year (Good filter option)": "2019",
|
|
65
|
+
"link": "",
|
|
66
|
+
"Verified": true
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"Insured Rate": "90",
|
|
70
|
+
"Coverage Status": "Insured",
|
|
71
|
+
"state": "Delaware",
|
|
72
|
+
"Year (Good filter option)": "2020",
|
|
73
|
+
"link": "",
|
|
74
|
+
"Verified": true
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"Insured Rate": "77.1",
|
|
78
|
+
"Coverage Status": "Insured",
|
|
79
|
+
"state": "District of Columbia",
|
|
80
|
+
"Year (Good filter option)": "2019",
|
|
81
|
+
"link": "https://search.cdc.gov/search/index.html?query=Washington+D.C.&sitelimit=&utf8=%E2%9C%93&affiliate=cdc-main",
|
|
82
|
+
"Verified": false
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"Insured Rate": "83",
|
|
86
|
+
"Coverage Status": "Insured",
|
|
87
|
+
"state": "Florida",
|
|
88
|
+
"Year (Good filter option)": "2016",
|
|
89
|
+
"link": "",
|
|
90
|
+
"Verified": true
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"Insured Rate": "67.4",
|
|
94
|
+
"Coverage Status": "Insured",
|
|
95
|
+
"state": "Georgia",
|
|
96
|
+
"Year (Good filter option)": "2013",
|
|
97
|
+
"link": "",
|
|
98
|
+
"Verified": false
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
"filters": [
|
|
102
|
+
{
|
|
103
|
+
"columnName": "Year (Good filter option)",
|
|
104
|
+
"label": "Year",
|
|
105
|
+
"showDropdown": true,
|
|
106
|
+
"order": "desc",
|
|
107
|
+
"active": true,
|
|
108
|
+
"values": [],
|
|
109
|
+
"type": "multi-select"
|
|
110
|
+
}
|
|
111
|
+
],
|
|
112
|
+
"fontSize": "",
|
|
113
|
+
"overallFontSize": "medium",
|
|
114
|
+
"dataColumn": "Insured Rate",
|
|
115
|
+
"dataFunction": "Mean (Average)",
|
|
116
|
+
"dataConditionalColumn": "",
|
|
117
|
+
"dataConditionalOperator": "",
|
|
118
|
+
"dataConditionalComparate": "",
|
|
119
|
+
"invalidComparate": false,
|
|
120
|
+
"customDenom": false,
|
|
121
|
+
"dataDenom": "100",
|
|
122
|
+
"dataDenomColumn": "",
|
|
123
|
+
"dataDenomFunction": "",
|
|
124
|
+
"prefix": "",
|
|
125
|
+
"suffix": "%",
|
|
126
|
+
"roundToPlace": "0",
|
|
127
|
+
"shape": "circle",
|
|
128
|
+
"nodeWidth": "10",
|
|
129
|
+
"nodeSpacer": "2",
|
|
130
|
+
"theme": "theme-blue",
|
|
131
|
+
"type": "waffle-chart",
|
|
132
|
+
"gauge": {
|
|
133
|
+
"height": 35,
|
|
134
|
+
"width": "100%"
|
|
135
|
+
},
|
|
136
|
+
"visual": {
|
|
137
|
+
"border": true,
|
|
138
|
+
"accent": false,
|
|
139
|
+
"background": false,
|
|
140
|
+
"hideBackgroundColor": false,
|
|
141
|
+
"borderColorTheme": false,
|
|
142
|
+
"whiteBackground": false,
|
|
143
|
+
"colors": {
|
|
144
|
+
"theme-blue": "#005eaa",
|
|
145
|
+
"theme-purple": "#712177",
|
|
146
|
+
"theme-brown": "#705043",
|
|
147
|
+
"theme-teal": "#00695c",
|
|
148
|
+
"theme-pink": "#af4448",
|
|
149
|
+
"theme-orange": "#bb4d00",
|
|
150
|
+
"theme-slate": "#29434e",
|
|
151
|
+
"theme-indigo": "#26418f",
|
|
152
|
+
"theme-cyan": "#006778",
|
|
153
|
+
"theme-green": "#4b830d",
|
|
154
|
+
"theme-amber": "#fbab18"
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
"showTitle": true
|
|
158
|
+
}
|
package/index.html
CHANGED
|
@@ -1,33 +1 @@
|
|
|
1
|
-
|
|
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
|
-
/* max-width: 1000px; */
|
|
9
|
-
margin: 0 auto !important;
|
|
10
|
-
display: flex;
|
|
11
|
-
flex-direction: column;
|
|
12
|
-
justify-content: center;
|
|
13
|
-
border-top: none !important;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/* Add 1rem padding to mimic DFE when editor is not visible */
|
|
17
|
-
.cdc-open-viz-module:not(.isEditor) {
|
|
18
|
-
padding: 1rem;
|
|
19
|
-
}
|
|
20
|
-
</style>
|
|
21
|
-
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
<!-- Original -->
|
|
25
|
-
<div class="react-container" data-config="/examples/example-config.json"></div>
|
|
26
|
-
|
|
27
|
-
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/waffle-chart.html#examples -->
|
|
28
|
-
<!-- <div class="react-container" data-config="/examples/gallery/avg-to-max.json"></div> -->
|
|
29
|
-
<!-- <div class="react-container" data-config="/examples/gallery/count.json"></div> -->
|
|
30
|
-
|
|
31
|
-
<script type="module" src="./src/index.jsx"></script>
|
|
32
|
-
</body>
|
|
33
|
-
</html>
|
|
1
|
+
<!-- index.html is generated by @cdc/core/generateViteConfig.js using the files in @cdc/core/devTemplate/ -->
|
package/package.json
CHANGED
|
@@ -1,50 +1,47 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/waffle-chart",
|
|
3
|
-
"version": "4.26.
|
|
3
|
+
"version": "4.26.3",
|
|
4
4
|
"description": "React component for displaying a single piece of data in a card module",
|
|
5
|
-
"moduleName": "CdcWaffleChart",
|
|
6
|
-
"main": "dist/cdcwafflechart",
|
|
7
|
-
"type": "module",
|
|
8
|
-
"scripts": {
|
|
9
|
-
"start": "vite --open",
|
|
10
|
-
"build": "vite build",
|
|
11
|
-
"preview": "vite preview",
|
|
12
|
-
"graph": "nx graph",
|
|
13
|
-
"prepublishOnly": "lerna run --scope @cdc/waffle-chart build",
|
|
14
|
-
"test": "vitest run --reporter verbose",
|
|
15
|
-
"test-watch": "vitest watch --reporter verbose",
|
|
16
|
-
"test-watch:ui": "vitest --ui"
|
|
17
|
-
},
|
|
18
|
-
"repository": {
|
|
19
|
-
"type": "git",
|
|
20
|
-
"url": "git+https://github.com/CDCgov/cdc-open-viz",
|
|
21
|
-
"directory": "packages/waffle-chart"
|
|
22
|
-
},
|
|
23
|
-
"author": "rshelnutt <qyu6@cdc.gov>",
|
|
24
|
-
"bugs": {
|
|
25
|
-
"url": "https://github.com/CDCgov/cdc-open-viz/issues"
|
|
26
|
-
},
|
|
27
5
|
"license": "Apache-2.0",
|
|
28
|
-
"
|
|
6
|
+
"author": "rshelnutt <qyu6@cdc.gov>",
|
|
7
|
+
"bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
|
|
29
8
|
"dependencies": {
|
|
30
|
-
"@cdc/core": "^4.26.
|
|
9
|
+
"@cdc/core": "^4.26.3",
|
|
31
10
|
"@visx/shape": "^3.12.0",
|
|
32
11
|
"@visx/text": "^3.12.0",
|
|
33
|
-
"
|
|
34
|
-
"html-react-parser": "5.2.3",
|
|
12
|
+
"html-react-parser": "^5.2.3",
|
|
35
13
|
"react-accessible-accordion": "^5.0.1",
|
|
36
14
|
"resize-observer-polyfill": "^1.5.1"
|
|
37
15
|
},
|
|
38
|
-
"peerDependencies": {
|
|
39
|
-
"react": "^18.2.0",
|
|
40
|
-
"react-dom": "^18.2.0"
|
|
41
|
-
},
|
|
42
16
|
"devDependencies": {
|
|
43
17
|
"@rollup/plugin-dsv": "^3.0.2",
|
|
44
|
-
"@vitejs/plugin-react": "^
|
|
18
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
45
19
|
"sass": "^1.89.2",
|
|
46
20
|
"vite-plugin-css-injected-by-js": "^2.4.0",
|
|
47
21
|
"vite-plugin-svgr": "^4.2.0"
|
|
48
22
|
},
|
|
49
|
-
"gitHead": "
|
|
23
|
+
"gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
|
|
24
|
+
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
25
|
+
"main": "dist/cdcwafflechart",
|
|
26
|
+
"moduleName": "CdcWaffleChart",
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"react": "^18.2.0",
|
|
29
|
+
"react-dom": "^18.2.0"
|
|
30
|
+
},
|
|
31
|
+
"repository": {
|
|
32
|
+
"type": "git",
|
|
33
|
+
"url": "git+https://github.com/CDCgov/cdc-open-viz",
|
|
34
|
+
"directory": "packages/waffle-chart"
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "vite build",
|
|
38
|
+
"graph": "nx graph",
|
|
39
|
+
"prepublishOnly": "lerna run --scope @cdc/waffle-chart build",
|
|
40
|
+
"preview": "vite preview",
|
|
41
|
+
"start": "vite --open",
|
|
42
|
+
"test": "vitest run --reporter verbose",
|
|
43
|
+
"test-watch": "vitest watch --reporter verbose",
|
|
44
|
+
"test-watch:ui": "vitest --ui"
|
|
45
|
+
},
|
|
46
|
+
"type": "module"
|
|
50
47
|
}
|