@cdc/waffle-chart 4.25.10 → 4.26.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.
- package/dist/cdcwafflechart.js +9025 -8034
- package/examples/tp5-style-white.json +72 -0
- package/examples/tp5-style.json +72 -0
- package/examples/tp5-waffle.json +123 -0
- package/index.html +3 -6
- package/package.json +5 -5
- package/src/CdcWaffleChart.tsx +165 -119
- package/src/_stories/WaffleChart.Editor.stories.tsx +45 -54
- package/src/_stories/WaffleChart.stories.tsx +46 -1
- package/src/components/EditorPanel.jsx +179 -356
- package/src/images/callout-flag.svg +7 -0
- package/src/scss/main.scss +2 -12
- package/src/scss/waffle-chart.scss +91 -23
- package/src/store/chart.reducer.ts +1 -1
- package/src/test/CdcWaffleChart.test.jsx +1 -1
- package/src/types/Config.ts +4 -2
- package/LICENSE +0 -201
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "waffle-chart",
|
|
3
|
+
"shape": "person",
|
|
4
|
+
"title": "Overdose Mortality Rate",
|
|
5
|
+
"content": "of overdoses resulted in death.",
|
|
6
|
+
"subtext": "This data is an example and does not reflect actual averages",
|
|
7
|
+
"orientation": "horizontal",
|
|
8
|
+
"visualizationType": "TP5 Waffle",
|
|
9
|
+
"data": [
|
|
10
|
+
{
|
|
11
|
+
"Resulted in Death": 250,
|
|
12
|
+
"Number of Overdoses": 600,
|
|
13
|
+
"state": "Alabama",
|
|
14
|
+
"Year": "2010"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Resulted in Death": 16,
|
|
18
|
+
"Number of Overdoses": 80,
|
|
19
|
+
"state": "Alaska",
|
|
20
|
+
"Year": "2008"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"Resulted in Death": 19,
|
|
24
|
+
"Number of Overdoses": 100,
|
|
25
|
+
"state": "Alaska",
|
|
26
|
+
"Year": "2010"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"Resulted in Death": 93,
|
|
30
|
+
"Number of Overdoses": 400,
|
|
31
|
+
"state": "Alaska",
|
|
32
|
+
"Year": "2012"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"Resulted in Death": 82,
|
|
36
|
+
"Number of Overdoses": 400,
|
|
37
|
+
"state": "Arizona",
|
|
38
|
+
"Year": "2010"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"filters": [],
|
|
42
|
+
"fontSize": null,
|
|
43
|
+
"overallFontSize": "medium",
|
|
44
|
+
"dataColumn": "Resulted in Death",
|
|
45
|
+
"dataFunction": "Sum",
|
|
46
|
+
"dataConditionalColumn": "",
|
|
47
|
+
"dataConditionalOperator": null,
|
|
48
|
+
"dataConditionalComparate": "",
|
|
49
|
+
"customDenom": true,
|
|
50
|
+
"dataDenom": null,
|
|
51
|
+
"dataDenomColumn": "Number of Overdoses",
|
|
52
|
+
"dataDenomFunction": "Sum",
|
|
53
|
+
"prefix": "",
|
|
54
|
+
"suffix": "%",
|
|
55
|
+
"roundToPlace": 0,
|
|
56
|
+
"nodeWidth": 10,
|
|
57
|
+
"nodeSpacer": 2,
|
|
58
|
+
"theme": "theme-blue",
|
|
59
|
+
"visualizationSubType": "",
|
|
60
|
+
"invalidComparate": false,
|
|
61
|
+
"showDenominator": false,
|
|
62
|
+
"showPercent": true,
|
|
63
|
+
"valueDescription": "Overdose mortality percentage",
|
|
64
|
+
"visual": {
|
|
65
|
+
"border": false,
|
|
66
|
+
"accent": false,
|
|
67
|
+
"background": false,
|
|
68
|
+
"hideBackgroundColor": false,
|
|
69
|
+
"borderColorTheme": false,
|
|
70
|
+
"whiteBackground": true
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "waffle-chart",
|
|
3
|
+
"shape": "person",
|
|
4
|
+
"title": "Overdose Mortality Rate",
|
|
5
|
+
"content": "of overdoses resulted in death.",
|
|
6
|
+
"subtext": "This data is an example and does not reflect actual averages",
|
|
7
|
+
"orientation": "horizontal",
|
|
8
|
+
"visualizationType": "TP5 Waffle",
|
|
9
|
+
"data": [
|
|
10
|
+
{
|
|
11
|
+
"Resulted in Death": 250,
|
|
12
|
+
"Number of Overdoses": 600,
|
|
13
|
+
"state": "Alabama",
|
|
14
|
+
"Year": "2010"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Resulted in Death": 16,
|
|
18
|
+
"Number of Overdoses": 80,
|
|
19
|
+
"state": "Alaska",
|
|
20
|
+
"Year": "2008"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"Resulted in Death": 19,
|
|
24
|
+
"Number of Overdoses": 100,
|
|
25
|
+
"state": "Alaska",
|
|
26
|
+
"Year": "2010"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"Resulted in Death": 93,
|
|
30
|
+
"Number of Overdoses": 400,
|
|
31
|
+
"state": "Alaska",
|
|
32
|
+
"Year": "2012"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"Resulted in Death": 82,
|
|
36
|
+
"Number of Overdoses": 400,
|
|
37
|
+
"state": "Arizona",
|
|
38
|
+
"Year": "2010"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"filters": [],
|
|
42
|
+
"fontSize": null,
|
|
43
|
+
"overallFontSize": "medium",
|
|
44
|
+
"dataColumn": "Resulted in Death",
|
|
45
|
+
"dataFunction": "Sum",
|
|
46
|
+
"dataConditionalColumn": "",
|
|
47
|
+
"dataConditionalOperator": null,
|
|
48
|
+
"dataConditionalComparate": "",
|
|
49
|
+
"customDenom": true,
|
|
50
|
+
"dataDenom": null,
|
|
51
|
+
"dataDenomColumn": "Number of Overdoses",
|
|
52
|
+
"dataDenomFunction": "Sum",
|
|
53
|
+
"prefix": "",
|
|
54
|
+
"suffix": "%",
|
|
55
|
+
"roundToPlace": 0,
|
|
56
|
+
"nodeWidth": 10,
|
|
57
|
+
"nodeSpacer": 2,
|
|
58
|
+
"theme": "theme-blue",
|
|
59
|
+
"visualizationSubType": "",
|
|
60
|
+
"invalidComparate": false,
|
|
61
|
+
"showDenominator": false,
|
|
62
|
+
"showPercent": true,
|
|
63
|
+
"valueDescription": "Overdose mortality percentage",
|
|
64
|
+
"visual": {
|
|
65
|
+
"border": false,
|
|
66
|
+
"accent": false,
|
|
67
|
+
"background": false,
|
|
68
|
+
"hideBackgroundColor": false,
|
|
69
|
+
"borderColorTheme": false,
|
|
70
|
+
"whiteBackground": false
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "A Waffle Chart - Person",
|
|
3
|
+
"titleStyle": "small",
|
|
4
|
+
"showTitle": true,
|
|
5
|
+
"visualizationSubType": "linear",
|
|
6
|
+
"showPercent": true,
|
|
7
|
+
"showDenominator": true,
|
|
8
|
+
"valueDescription": "out of",
|
|
9
|
+
"content": "Highlight a piece of data in relationship to a data set.",
|
|
10
|
+
"subtext": "",
|
|
11
|
+
"orientation": null,
|
|
12
|
+
"filters": [],
|
|
13
|
+
"fontSize": "",
|
|
14
|
+
"overallFontSize": "medium",
|
|
15
|
+
"dataColumn": "Age-adjusted rate",
|
|
16
|
+
"dataFunction": "Count",
|
|
17
|
+
"dataConditionalColumn": "",
|
|
18
|
+
"dataConditionalOperator": "",
|
|
19
|
+
"dataConditionalComparate": "",
|
|
20
|
+
"invalidComparate": false,
|
|
21
|
+
"customDenom": false,
|
|
22
|
+
"dataDenom": "100",
|
|
23
|
+
"dataDenomColumn": "",
|
|
24
|
+
"dataDenomFunction": "",
|
|
25
|
+
"suffix": "%",
|
|
26
|
+
"roundToPlace": "0",
|
|
27
|
+
"shape": "person",
|
|
28
|
+
"nodeWidth": "10",
|
|
29
|
+
"nodeSpacer": "2",
|
|
30
|
+
"theme": "theme-blue",
|
|
31
|
+
"type": "waffle-chart",
|
|
32
|
+
"visualizationType": "TP5 Waffle",
|
|
33
|
+
"gauge": {
|
|
34
|
+
"height": 35,
|
|
35
|
+
"width": "100%"
|
|
36
|
+
},
|
|
37
|
+
"visual": {
|
|
38
|
+
"border": true,
|
|
39
|
+
"accent": false,
|
|
40
|
+
"background": false,
|
|
41
|
+
"hideBackgroundColor": false,
|
|
42
|
+
"borderColorTheme": false,
|
|
43
|
+
"colors": {
|
|
44
|
+
"theme-blue": "#005eaa",
|
|
45
|
+
"theme-purple": "#712177",
|
|
46
|
+
"theme-brown": "#705043",
|
|
47
|
+
"theme-teal": "#00695c",
|
|
48
|
+
"theme-pink": "#af4448",
|
|
49
|
+
"theme-orange": "#bb4d00",
|
|
50
|
+
"theme-slate": "#29434e",
|
|
51
|
+
"theme-indigo": "#26418f",
|
|
52
|
+
"theme-cyan": "#006778",
|
|
53
|
+
"theme-green": "#4b830d",
|
|
54
|
+
"theme-amber": "#fbab18"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
"errors": [],
|
|
58
|
+
"currentViewport": "lg",
|
|
59
|
+
"id": 17,
|
|
60
|
+
"category": "General",
|
|
61
|
+
"label": "Waffle Chart",
|
|
62
|
+
"subType": "Waffle",
|
|
63
|
+
"icon": {
|
|
64
|
+
"type": {},
|
|
65
|
+
"key": null,
|
|
66
|
+
"ref": null,
|
|
67
|
+
"props": {},
|
|
68
|
+
"_owner": null,
|
|
69
|
+
"_store": {}
|
|
70
|
+
},
|
|
71
|
+
"activeVizButtonID": 17,
|
|
72
|
+
"dataFileName": "valid-data-chart.csv",
|
|
73
|
+
"dataFileSourceType": "file",
|
|
74
|
+
"dataDescription": {
|
|
75
|
+
"horizontal": false,
|
|
76
|
+
"series": false
|
|
77
|
+
},
|
|
78
|
+
"data": [
|
|
79
|
+
{
|
|
80
|
+
"Race": "Hispanic or Latino",
|
|
81
|
+
"Age-adjusted rate": "644.2"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"Race": "Non-Hispanic American Indian",
|
|
85
|
+
"Age-adjusted rate": "636.1"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"Race": "Non-Hispanic Black",
|
|
89
|
+
"Age-adjusted rate": "563.7"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
93
|
+
"Age-adjusted rate": "202.5"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"Race": "Non-Hispanic White",
|
|
97
|
+
"Age-adjusted rate": "183.6"
|
|
98
|
+
}
|
|
99
|
+
],
|
|
100
|
+
"formattedData": [
|
|
101
|
+
{
|
|
102
|
+
"Race": "Hispanic or Latino",
|
|
103
|
+
"Age-adjusted rate": "644.2"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"Race": "Non-Hispanic American Indian",
|
|
107
|
+
"Age-adjusted rate": "636.1"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"Race": "Non-Hispanic Black",
|
|
111
|
+
"Age-adjusted rate": "563.7"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
115
|
+
"Age-adjusted rate": "202.5"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"Race": "Non-Hispanic White",
|
|
119
|
+
"Age-adjusted rate": "183.6"
|
|
120
|
+
}
|
|
121
|
+
],
|
|
122
|
+
"datasets": {}
|
|
123
|
+
}
|
package/index.html
CHANGED
|
@@ -4,10 +4,6 @@
|
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
6
6
|
<style>
|
|
7
|
-
.type-waffle-chart {
|
|
8
|
-
min-height: 100vh;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
7
|
body {
|
|
12
8
|
/* max-width: 1000px; */
|
|
13
9
|
margin: 0 auto !important;
|
|
@@ -17,8 +13,9 @@
|
|
|
17
13
|
border-top: none !important;
|
|
18
14
|
}
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
/* Add 1rem padding to mimic DFE when editor is not visible */
|
|
17
|
+
.cdc-open-viz-module:not(.isEditor) {
|
|
18
|
+
padding: 1rem;
|
|
22
19
|
}
|
|
23
20
|
</style>
|
|
24
21
|
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/waffle-chart",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.26.1",
|
|
4
4
|
"description": "React component for displaying a single piece of data in a card module",
|
|
5
5
|
"moduleName": "CdcWaffleChart",
|
|
6
6
|
"main": "dist/cdcwafflechart",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@cdc/core": "^4.
|
|
30
|
+
"@cdc/core": "^4.26.1",
|
|
31
31
|
"@visx/shape": "^3.12.0",
|
|
32
32
|
"@visx/text": "^3.12.0",
|
|
33
33
|
"chroma": "0.0.1",
|
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@rollup/plugin-dsv": "^3.0.2",
|
|
44
44
|
"@vitejs/plugin-react": "^4.3.4",
|
|
45
|
-
"
|
|
45
|
+
"sass": "^1.89.2",
|
|
46
46
|
"vite-plugin-css-injected-by-js": "^2.4.0",
|
|
47
|
-
"vite-plugin-svgr": "^2.
|
|
47
|
+
"vite-plugin-svgr": "^4.2.0"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
|
|
50
50
|
}
|