@cdc/waffle-chart 4.26.1 → 4.26.2
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/dist/cdcwafflechart.js +10145 -9597
- 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 +100 -28
- package/src/_stories/WaffleChart.Editor.stories.tsx +237 -0
- package/src/_stories/WaffleChart.stories.tsx +49 -2
- package/src/components/EditorPanel.jsx +53 -61
- package/src/scss/waffle-chart.scss +134 -1
- package/src/store/chart.reducer.ts +1 -1
- package/src/types/Config.ts +1 -1
|
@@ -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.2",
|
|
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.2",
|
|
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": "be3413e8e1149abf94225108f86a7910f56e0616",
|
|
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
|
}
|
package/src/CdcWaffleChart.tsx
CHANGED
|
@@ -398,34 +398,107 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
|
|
|
398
398
|
)}
|
|
399
399
|
{config.newViz && showConfigConfirm && <Confirm updateConfig={updateConfig} config={config} />}
|
|
400
400
|
<div className='cove-component__content-wrap p-0'>
|
|
401
|
-
{config.visualizationType === 'Gauge' && (
|
|
401
|
+
{(config.visualizationType === 'Gauge' || config.visualizationType === 'TP5 Gauge') && (
|
|
402
402
|
<div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
|
|
403
403
|
<div className='cove-gauge-chart__chart'>
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
404
|
+
{config.visualizationType === 'TP5 Gauge' ? (
|
|
405
|
+
<>
|
|
406
|
+
<div
|
|
407
|
+
className={`cove-gauge-chart__body d-flex flex-row align-items-start flex-grow-1${
|
|
408
|
+
!content ? ' justify-content-center' : ''
|
|
409
|
+
}`}
|
|
410
|
+
>
|
|
411
|
+
<div className='cove-gauge-chart__value-section flex-shrink-0'>
|
|
412
|
+
<div className='cove-waffle-chart__data--primary' style={dataFontSize}>
|
|
413
|
+
{prefix ? prefix : ' '}
|
|
414
|
+
{config.showPercent ? dataPercentage : waffleNumerator}
|
|
415
|
+
{suffix ? suffix + ' ' : ' '} {config.valueDescription}{' '}
|
|
416
|
+
{config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
|
|
417
|
+
</div>
|
|
418
|
+
</div>
|
|
419
|
+
<div className='cove-gauge-chart__content flex-grow-1 d-flex flex-column min-w-0'>
|
|
420
|
+
{content ? (
|
|
421
|
+
<div className='cove-waffle-chart__data--text'>{parse(content)}</div>
|
|
422
|
+
) : (
|
|
423
|
+
<div className='cove-waffle-chart__data--text' aria-hidden='true'>
|
|
424
|
+
|
|
425
|
+
</div>
|
|
426
|
+
)}
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
<svg
|
|
430
|
+
height={config.gauge.height + 2}
|
|
431
|
+
width={'100%'}
|
|
432
|
+
className='mt-2'
|
|
433
|
+
style={{ overflow: 'visible', padding: '1px' }}
|
|
434
|
+
>
|
|
435
|
+
<Group>
|
|
436
|
+
<Bar
|
|
437
|
+
x={0}
|
|
438
|
+
y={0}
|
|
439
|
+
width={config.gauge.width}
|
|
440
|
+
height={config.gauge.height}
|
|
441
|
+
fill='#dff2f6'
|
|
442
|
+
stroke='#007A99'
|
|
443
|
+
strokeWidth={1}
|
|
444
|
+
rx={10}
|
|
445
|
+
ry={10}
|
|
446
|
+
/>
|
|
447
|
+
<Bar
|
|
448
|
+
x={0}
|
|
449
|
+
y={0}
|
|
450
|
+
width={xScale(waffleNumerator)}
|
|
451
|
+
height={config.gauge.height}
|
|
452
|
+
fill='#007A99'
|
|
453
|
+
rx={10}
|
|
454
|
+
ry={10}
|
|
455
|
+
/>
|
|
456
|
+
</Group>
|
|
457
|
+
</svg>
|
|
458
|
+
{subtext && (
|
|
459
|
+
<div className='cove-waffle-chart__subtext subtext fst-italic mt-2'>{parse(subtext)}</div>
|
|
460
|
+
)}
|
|
461
|
+
</>
|
|
462
|
+
) : (
|
|
463
|
+
<>
|
|
464
|
+
<div className='cove-waffle-chart__data--primary' style={dataFontSize}>
|
|
465
|
+
{prefix ? prefix : ' '}
|
|
466
|
+
{config.showPercent ? dataPercentage : waffleNumerator}
|
|
467
|
+
{suffix ? suffix + ' ' : ' '} {config.valueDescription}{' '}
|
|
468
|
+
{config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
|
|
469
|
+
</div>
|
|
470
|
+
<div className='cove-waffle-chart__data--text'>{parse(content)}</div>
|
|
471
|
+
<svg height={config.gauge.height} width={'100%'}>
|
|
472
|
+
<Group>
|
|
473
|
+
<Bar
|
|
474
|
+
x={0}
|
|
475
|
+
y={0}
|
|
476
|
+
width={config.gauge.width}
|
|
477
|
+
height={config.gauge.height}
|
|
478
|
+
fill='#e0e0e0'
|
|
479
|
+
stroke='#999'
|
|
480
|
+
strokeWidth={1}
|
|
481
|
+
rx={4}
|
|
482
|
+
ry={4}
|
|
483
|
+
/>
|
|
484
|
+
<Bar
|
|
485
|
+
x={0}
|
|
486
|
+
y={0}
|
|
487
|
+
width={xScale(waffleNumerator)}
|
|
488
|
+
height={config.gauge.height}
|
|
489
|
+
fill={gaugeColor}
|
|
490
|
+
rx={4}
|
|
491
|
+
ry={4}
|
|
492
|
+
/>
|
|
493
|
+
</Group>
|
|
494
|
+
</svg>
|
|
495
|
+
<div className={'cove-waffle-chart__subtext subtext'}>{parse(subtext)}</div>
|
|
496
|
+
</>
|
|
497
|
+
)}
|
|
425
498
|
</div>
|
|
426
499
|
</div>
|
|
427
500
|
)}
|
|
428
|
-
{config.visualizationType !== 'Gauge' && (
|
|
501
|
+
{config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Gauge' && (
|
|
429
502
|
<div
|
|
430
503
|
className={`cove-waffle-chart${orientation === 'vertical' ? ' cove-waffle-chart--verical' : ''}${
|
|
431
504
|
config.overallFontSize ? ' font-' + config.overallFontSize : ''
|
|
@@ -447,7 +520,7 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
|
|
|
447
520
|
{suffix ? suffix : null}
|
|
448
521
|
</div>
|
|
449
522
|
)}
|
|
450
|
-
<div className='cove-waffle-chart__data--text'>{parse(content)}</div>
|
|
523
|
+
{content && <div className='cove-waffle-chart__data--text'>{parse(content)}</div>}
|
|
451
524
|
|
|
452
525
|
{subtext && <div className='cove-waffle-chart__subtext subtext fst-italic'>{parse(subtext)}</div>}
|
|
453
526
|
</div>
|
|
@@ -459,14 +532,14 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
|
|
|
459
532
|
)
|
|
460
533
|
|
|
461
534
|
// TP5 Style: render with callout wrapper inside cove-component__content
|
|
462
|
-
if (config.visualizationType === 'TP5 Waffle') {
|
|
535
|
+
if (config.visualizationType === 'TP5 Waffle' || config.visualizationType === 'TP5 Gauge') {
|
|
463
536
|
const calloutClasses = ['cdc-callout', 'd-flex', 'flex-column']
|
|
464
537
|
if (!config.visual?.whiteBackground) {
|
|
465
538
|
calloutClasses.push('dfe-block', 'cdc-callout--data')
|
|
466
539
|
}
|
|
467
540
|
|
|
468
541
|
return (
|
|
469
|
-
<div className='cove-component__content
|
|
542
|
+
<div className='cove-component__content border-0'>
|
|
470
543
|
<div className={calloutClasses.join(' ')}>
|
|
471
544
|
{!config.visual?.whiteBackground && (
|
|
472
545
|
<img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />
|
|
@@ -564,8 +637,7 @@ const CdcWaffleChart = ({
|
|
|
564
637
|
|
|
565
638
|
//Load initial config
|
|
566
639
|
useEffect(() => {
|
|
567
|
-
|
|
568
|
-
loadConfig().catch(err => console.log(err))
|
|
640
|
+
loadConfig().catch(err => console.warn(err))
|
|
569
641
|
}, [])
|
|
570
642
|
|
|
571
643
|
useEffect(() => {
|