@cdc/data-bite 1.1.4 → 4.22.11
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/README.md +4 -4
- package/dist/cdcdatabite.js +8 -8
- package/examples/example-config.json +24 -24
- package/examples/example-data.json +833 -833
- package/examples/gallery/calculated-average.json +3167 -0
- package/examples/gallery/calculated-with-pic.json +3173 -0
- package/examples/gallery/max-value.json +3167 -0
- package/examples/gallery/sum-of-data.json +3161 -0
- package/examples/private/WCMSRD-12345.json +1026 -1026
- package/examples/private/double.json +0 -0
- package/examples/private/totals.json +67 -0
- package/package.json +3 -3
- package/src/CdcDataBite.tsx +278 -329
- package/src/components/CircleCallout.js +8 -6
- package/src/components/EditorPanel.js +418 -300
- package/src/context.tsx +3 -3
- package/src/data/initial-state.js +37 -37
- package/src/index.html +22 -17
- package/src/index.tsx +9 -9
- package/src/scss/bite.scss +111 -44
- package/src/scss/editor-panel.scss +83 -71
- package/src/scss/main.scss +17 -9
- package/src/scss/variables.scss +1 -1
package/src/context.tsx
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
export default {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
2
|
+
type: 'data-bite',
|
|
3
|
+
data: [],
|
|
4
|
+
dataBite: '',
|
|
5
|
+
dataFunction: '',
|
|
6
|
+
dataColumn: '',
|
|
7
|
+
bitePosition: 'Left',
|
|
8
|
+
biteFontSize: 24,
|
|
9
|
+
fontSize: 'medium',
|
|
10
|
+
biteBody: '',
|
|
11
|
+
imageData: {
|
|
12
|
+
display: 'none',
|
|
13
|
+
url: '',
|
|
14
|
+
alt: '',
|
|
15
|
+
options: []
|
|
16
|
+
},
|
|
17
|
+
dataFormat: {
|
|
18
|
+
roundToPlace: 0,
|
|
19
|
+
commas: true,
|
|
20
|
+
prefix: '',
|
|
21
|
+
suffix: '%'
|
|
22
|
+
},
|
|
23
|
+
biteStyle: 'graphic',
|
|
24
|
+
filters: [],
|
|
25
|
+
subtext: '',
|
|
26
|
+
title: '',
|
|
27
|
+
theme: 'theme-blue',
|
|
28
|
+
shadow: false,
|
|
29
|
+
visual: {
|
|
30
|
+
border: false,
|
|
31
|
+
accent: false,
|
|
32
|
+
background: false,
|
|
33
|
+
hideBackgroundColor: false,
|
|
34
|
+
borderColorTheme: false
|
|
35
|
+
},
|
|
36
|
+
general: {
|
|
37
|
+
isCompactStyle: false
|
|
38
|
+
}
|
|
39
39
|
}
|
package/src/index.html
CHANGED
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
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
|
+
margin: 0;
|
|
9
|
+
}
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<!-- Original -->
|
|
14
|
+
<div class="react-container" data-config="/examples/example-config.json"></div>
|
|
15
|
+
|
|
16
|
+
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data_bites.html#examples -->
|
|
17
|
+
<!-- <div class="react-container" data-config="/examples/gallery/calculated-average.json"></div> -->
|
|
18
|
+
<!-- <div class="react-container" data-config="/examples/gallery/calculated-with-pic.json"></div> -->
|
|
19
|
+
<!-- <div class="react-container" data-config="/examples/gallery/max-value.json"></div> -->
|
|
20
|
+
<!-- <div class="react-container" data-config="/examples/gallery/sum-of-data.json"></div> -->
|
|
21
|
+
|
|
22
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|
package/src/index.tsx
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { render } from 'react-dom'
|
|
3
|
-
import CdcDataBite from './CdcDataBite'
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render } from 'react-dom'
|
|
3
|
+
import CdcDataBite from './CdcDataBite'
|
|
4
4
|
|
|
5
|
-
const domContainers = document.querySelectorAll('.react-container')
|
|
5
|
+
const domContainers = document.querySelectorAll('.react-container')
|
|
6
6
|
|
|
7
|
-
let isEditor = window.location.href.includes('editor=true')
|
|
7
|
+
let isEditor = window.location.href.includes('editor=true')
|
|
8
8
|
|
|
9
|
-
domContainers.forEach(
|
|
9
|
+
domContainers.forEach(domContainer => {
|
|
10
10
|
render(
|
|
11
11
|
<React.StrictMode>
|
|
12
12
|
<CdcDataBite configUrl={domContainer.attributes['data-config']?.value} isEditor={isEditor} />
|
|
13
13
|
</React.StrictMode>,
|
|
14
|
-
domContainer
|
|
15
|
-
)
|
|
16
|
-
})
|
|
14
|
+
domContainer
|
|
15
|
+
)
|
|
16
|
+
})
|
package/src/scss/bite.scss
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import '../../../core/styles/variables';
|
|
2
2
|
|
|
3
3
|
&.is-editor {
|
|
4
4
|
position: relative;
|
|
5
|
-
.
|
|
5
|
+
.cove-component__inner {
|
|
6
6
|
margin: 3em auto 0;
|
|
7
7
|
max-width: 35em;
|
|
8
8
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
color: $primary;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
15
|
+
.cove-component__header {
|
|
16
16
|
background-color: $primary;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
.bite-value {
|
|
22
22
|
color: $purple-primary;
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.cove-component__header {
|
|
25
25
|
background-color: $purple-primary;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
.bite-value {
|
|
31
31
|
color: $amber-primary;
|
|
32
32
|
}
|
|
33
|
-
.
|
|
33
|
+
.cove-component__header {
|
|
34
34
|
background-color: $amber-primary;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
.bite-value {
|
|
40
40
|
color: $orange-primary;
|
|
41
41
|
}
|
|
42
|
-
.
|
|
42
|
+
.cove-component__header {
|
|
43
43
|
background-color: $orange-primary;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
.bite-value {
|
|
49
49
|
color: $brown-primary;
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.cove-component__header {
|
|
52
52
|
background-color: $brown-primary;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
.bite-value {
|
|
58
58
|
color: $teal-primary;
|
|
59
59
|
}
|
|
60
|
-
.
|
|
60
|
+
.cove-component__header {
|
|
61
61
|
background-color: $teal-primary;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
.bite-value {
|
|
67
67
|
color: $pink-primary;
|
|
68
68
|
}
|
|
69
|
-
.
|
|
69
|
+
.cove-component__header {
|
|
70
70
|
background-color: $pink-primary;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
.bite-value {
|
|
76
76
|
color: $slate-primary;
|
|
77
77
|
}
|
|
78
|
-
.
|
|
78
|
+
.cove-component__header {
|
|
79
79
|
background-color: $slate-primary;
|
|
80
80
|
}
|
|
81
81
|
}
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
.bite-value {
|
|
85
85
|
color: $indigo-primary;
|
|
86
86
|
}
|
|
87
|
-
.
|
|
87
|
+
.cove-component__header {
|
|
88
88
|
background-color: $indigo-primary;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
.bite-value {
|
|
94
94
|
color: $cyan-primary;
|
|
95
95
|
}
|
|
96
|
-
.
|
|
96
|
+
.cove-component__header {
|
|
97
97
|
background-color: $cyan-primary;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
@@ -102,53 +102,106 @@
|
|
|
102
102
|
.bite-value {
|
|
103
103
|
color: $green-primary;
|
|
104
104
|
}
|
|
105
|
-
.
|
|
105
|
+
.cove-component__header {
|
|
106
106
|
background-color: $green-primary;
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
|
-
.
|
|
109
|
+
.cove-component__header {
|
|
110
110
|
padding: 0 1em;
|
|
111
111
|
left: 0;
|
|
112
112
|
top: 0;
|
|
113
113
|
padding: 0.6rem 0.8rem;
|
|
114
114
|
color: white;
|
|
115
|
-
font-size:1.1em;
|
|
115
|
+
font-size: 1.1em;
|
|
116
116
|
&:empty {
|
|
117
117
|
min-height: 5px;
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
+
// TODO after v2 refactor remove header reference colors
|
|
122
|
+
// Use .font-color/.bg-color, etc. in color definitions or something similar
|
|
123
|
+
// Remove box shadows if we're no longer using them
|
|
124
|
+
.cove-component__inner {
|
|
125
|
+
// Visual: Shadow
|
|
126
|
+
&.shadow {
|
|
127
|
+
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 10px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// General: Bite Style > Graphic
|
|
131
|
+
.bite__style--graphic {
|
|
132
|
+
.bite-content {
|
|
133
|
+
flex: 1;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// General: Bite Style > End
|
|
138
|
+
&.bite__style--end .bite-text {
|
|
139
|
+
margin-bottom: 0 !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
// General: Bite Style > Split
|
|
143
|
+
&.bite__style--split {
|
|
144
|
+
.bite-content {
|
|
145
|
+
flex-direction: row !important;
|
|
146
|
+
}
|
|
147
|
+
.bite-value {
|
|
148
|
+
flex-basis: 25%;
|
|
149
|
+
align-self: center;
|
|
150
|
+
text-align: center;
|
|
151
|
+
}
|
|
152
|
+
.bite-content__text-wrap {
|
|
153
|
+
flex: 75% !important;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// General: Compact View
|
|
158
|
+
&.bite--isCompactStyle .bite .cove-component__content .bite-content {
|
|
159
|
+
align-items: center;
|
|
160
|
+
p.bite-text {
|
|
161
|
+
margin-bottom: 0;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
121
164
|
|
|
165
|
+
&.bite--isCompactStyle .bite .cove-component__content {
|
|
166
|
+
align-items: center;
|
|
167
|
+
}
|
|
122
168
|
|
|
123
|
-
.
|
|
124
|
-
|
|
169
|
+
.cove-component__header + .bite {
|
|
170
|
+
border-top: 0;
|
|
171
|
+
}
|
|
125
172
|
.bite {
|
|
126
173
|
position: relative;
|
|
127
174
|
overflow: hidden;
|
|
128
175
|
border-top: none;
|
|
129
|
-
background: $lightestGray;
|
|
130
|
-
border: solid 1px $lightGray;
|
|
131
176
|
border-bottom-left-radius: 3px;
|
|
132
177
|
border-bottom-right-radius: 3px;
|
|
133
178
|
|
|
134
179
|
&-header {
|
|
135
|
-
|
|
136
|
-
|
|
180
|
+
border-top-left-radius: 3px;
|
|
181
|
+
border-top-right-radius: 3px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.bite-content-container.component--hideBackgroundColor {
|
|
185
|
+
background: transparent;
|
|
137
186
|
}
|
|
138
187
|
|
|
139
188
|
&.no-borders {
|
|
140
189
|
border: none;
|
|
141
190
|
}
|
|
142
191
|
|
|
143
|
-
|
|
144
|
-
|
|
192
|
+
&-content__text-wrap {
|
|
193
|
+
height: 100%;
|
|
194
|
+
display: flex;
|
|
195
|
+
flex-wrap: wrap;
|
|
196
|
+
width: 100%;
|
|
145
197
|
}
|
|
198
|
+
|
|
146
199
|
&.theme-blue {
|
|
147
200
|
.bite-value {
|
|
148
201
|
color: $primary;
|
|
149
202
|
}
|
|
150
203
|
|
|
151
|
-
.
|
|
204
|
+
.cove-component__header {
|
|
152
205
|
background-color: $primary;
|
|
153
206
|
}
|
|
154
207
|
}
|
|
@@ -157,7 +210,7 @@
|
|
|
157
210
|
.bite-value {
|
|
158
211
|
color: $purple-primary;
|
|
159
212
|
}
|
|
160
|
-
.
|
|
213
|
+
.cove-component__header {
|
|
161
214
|
background-color: $purple-primary;
|
|
162
215
|
}
|
|
163
216
|
}
|
|
@@ -166,7 +219,7 @@
|
|
|
166
219
|
.bite-value {
|
|
167
220
|
color: $amber-primary;
|
|
168
221
|
}
|
|
169
|
-
.
|
|
222
|
+
.cove-component__header {
|
|
170
223
|
background-color: $amber-primary;
|
|
171
224
|
}
|
|
172
225
|
}
|
|
@@ -175,7 +228,7 @@
|
|
|
175
228
|
.bite-value {
|
|
176
229
|
color: $orange-primary;
|
|
177
230
|
}
|
|
178
|
-
.
|
|
231
|
+
.cove-component__header {
|
|
179
232
|
background-color: $orange-primary;
|
|
180
233
|
}
|
|
181
234
|
}
|
|
@@ -184,7 +237,7 @@
|
|
|
184
237
|
.bite-value {
|
|
185
238
|
color: $brown-primary;
|
|
186
239
|
}
|
|
187
|
-
.
|
|
240
|
+
.cove-component__header {
|
|
188
241
|
background-color: $brown-primary;
|
|
189
242
|
}
|
|
190
243
|
}
|
|
@@ -193,7 +246,7 @@
|
|
|
193
246
|
.bite-value {
|
|
194
247
|
color: $teal-primary;
|
|
195
248
|
}
|
|
196
|
-
.
|
|
249
|
+
.cove-component__header {
|
|
197
250
|
background-color: $teal-primary;
|
|
198
251
|
}
|
|
199
252
|
}
|
|
@@ -202,7 +255,7 @@
|
|
|
202
255
|
.bite-value {
|
|
203
256
|
color: $pink-primary;
|
|
204
257
|
}
|
|
205
|
-
.
|
|
258
|
+
.cove-component__header {
|
|
206
259
|
background-color: $pink-primary;
|
|
207
260
|
}
|
|
208
261
|
}
|
|
@@ -211,7 +264,7 @@
|
|
|
211
264
|
.bite-value {
|
|
212
265
|
color: $slate-primary;
|
|
213
266
|
}
|
|
214
|
-
.
|
|
267
|
+
.cove-component__header {
|
|
215
268
|
background-color: $slate-primary;
|
|
216
269
|
}
|
|
217
270
|
}
|
|
@@ -220,7 +273,7 @@
|
|
|
220
273
|
.bite-value {
|
|
221
274
|
color: $indigo-primary;
|
|
222
275
|
}
|
|
223
|
-
.
|
|
276
|
+
.cove-component__header {
|
|
224
277
|
background-color: $indigo-primary;
|
|
225
278
|
}
|
|
226
279
|
}
|
|
@@ -229,7 +282,7 @@
|
|
|
229
282
|
.bite-value {
|
|
230
283
|
color: $cyan-primary;
|
|
231
284
|
}
|
|
232
|
-
.
|
|
285
|
+
.cove-component__header {
|
|
233
286
|
background-color: $cyan-primary;
|
|
234
287
|
}
|
|
235
288
|
}
|
|
@@ -238,7 +291,7 @@
|
|
|
238
291
|
.bite-value {
|
|
239
292
|
color: $green-primary;
|
|
240
293
|
}
|
|
241
|
-
.
|
|
294
|
+
.cove-component__header {
|
|
242
295
|
background-color: $green-primary;
|
|
243
296
|
}
|
|
244
297
|
}
|
|
@@ -252,12 +305,12 @@
|
|
|
252
305
|
width: 100%;
|
|
253
306
|
min-width: 100px;
|
|
254
307
|
align-self: center;
|
|
255
|
-
border-radius: .3em;
|
|
308
|
+
border-radius: 0.3em;
|
|
256
309
|
}
|
|
257
310
|
|
|
258
|
-
.
|
|
311
|
+
.cove-component__content {
|
|
259
312
|
display: flex;
|
|
260
|
-
padding: 1em
|
|
313
|
+
padding: 1em;
|
|
261
314
|
justify-content: space-between;
|
|
262
315
|
|
|
263
316
|
.bite-content {
|
|
@@ -278,12 +331,14 @@
|
|
|
278
331
|
.bite-text {
|
|
279
332
|
margin-bottom: 15px;
|
|
280
333
|
color: #222;
|
|
281
|
-
flex: 1 0 auto;
|
|
282
334
|
}
|
|
283
335
|
|
|
284
336
|
.bite-subtext {
|
|
285
|
-
font-size: .9em;
|
|
337
|
+
font-size: 0.9em;
|
|
286
338
|
font-style: italic;
|
|
339
|
+
flex-basis: 100%;
|
|
340
|
+
width: 100%;
|
|
341
|
+
align-self: flex-end;
|
|
287
342
|
}
|
|
288
343
|
}
|
|
289
344
|
}
|
|
@@ -302,13 +357,13 @@
|
|
|
302
357
|
width: 33%;
|
|
303
358
|
margin-left: 1.5em;
|
|
304
359
|
}
|
|
305
|
-
.
|
|
360
|
+
.cove-component__content {
|
|
306
361
|
flex-direction: row-reverse;
|
|
307
362
|
}
|
|
308
363
|
}
|
|
309
364
|
|
|
310
365
|
&.bite-top {
|
|
311
|
-
.
|
|
366
|
+
.cove-component__content {
|
|
312
367
|
flex-direction: column;
|
|
313
368
|
|
|
314
369
|
.bite-image {
|
|
@@ -327,7 +382,7 @@
|
|
|
327
382
|
}
|
|
328
383
|
|
|
329
384
|
&.bite-bottom {
|
|
330
|
-
.
|
|
385
|
+
.cove-component__content {
|
|
331
386
|
flex-direction: column;
|
|
332
387
|
|
|
333
388
|
.bite-image {
|
|
@@ -346,7 +401,7 @@
|
|
|
346
401
|
}
|
|
347
402
|
|
|
348
403
|
&.bite-back {
|
|
349
|
-
.
|
|
404
|
+
.cove-component__content {
|
|
350
405
|
.bite-image {
|
|
351
406
|
border-radius: 0 0 0.3em 0.3em;
|
|
352
407
|
position: absolute;
|
|
@@ -369,6 +424,18 @@
|
|
|
369
424
|
align-items: center;
|
|
370
425
|
}
|
|
371
426
|
|
|
372
|
-
.cove-component__header + .bite {
|
|
427
|
+
.cove-component__header + .bite {
|
|
428
|
+
border-top: 0;
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.cove-component__content {
|
|
434
|
+
background: $lightestGray;
|
|
435
|
+
|
|
436
|
+
&:not(.no-borders) {
|
|
437
|
+
border-color: $lightGray;
|
|
438
|
+
border-width: 1px;
|
|
439
|
+
border-style: solid;
|
|
373
440
|
}
|
|
374
441
|
}
|