@cdc/data-bite 4.22.10 → 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/README.md +4 -4
- package/dist/cdcdatabite.js +2 -2
- package/examples/example-config.json +24 -24
- package/examples/example-data.json +833 -833
- package/examples/gallery/calculated-average.json +3166 -3166
- package/examples/gallery/calculated-with-pic.json +3172 -3172
- package/examples/gallery/max-value.json +3166 -3166
- package/examples/gallery/sum-of-data.json +3160 -3160
- package/examples/private/WCMSRD-12345.json +1026 -1026
- package/examples/private/totals.json +67 -1
- package/package.json +3 -3
- package/src/CdcDataBite.tsx +266 -272
- package/src/components/CircleCallout.js +8 -6
- package/src/components/EditorPanel.js +378 -636
- package/src/context.tsx +3 -3
- package/src/data/initial-state.js +37 -37
- package/src/index.html +19 -23
- package/src/index.tsx +9 -9
- package/src/scss/bite.scss +23 -18
- package/src/scss/editor-panel.scss +83 -70
- package/src/scss/main.scss +8 -8
- 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,28 +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
|
-
<body>
|
|
16
|
-
<!-- Original -->
|
|
17
|
-
<div class="react-container" data-config="/examples/example-config.json"></div>
|
|
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>
|
|
18
15
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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> -->
|
|
24
21
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
</body>
|
|
22
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
23
|
+
</body>
|
|
28
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,4 +1,4 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import '../../../core/styles/variables';
|
|
2
2
|
|
|
3
3
|
&.is-editor {
|
|
4
4
|
position: relative;
|
|
@@ -112,7 +112,7 @@
|
|
|
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
|
}
|
|
@@ -122,7 +122,6 @@
|
|
|
122
122
|
// Use .font-color/.bg-color, etc. in color definitions or something similar
|
|
123
123
|
// Remove box shadows if we're no longer using them
|
|
124
124
|
.cove-component__inner {
|
|
125
|
-
|
|
126
125
|
// Visual: Shadow
|
|
127
126
|
&.shadow {
|
|
128
127
|
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 10px;
|
|
@@ -130,18 +129,22 @@
|
|
|
130
129
|
|
|
131
130
|
// General: Bite Style > Graphic
|
|
132
131
|
.bite__style--graphic {
|
|
133
|
-
.bite-content {
|
|
132
|
+
.bite-content {
|
|
133
|
+
flex: 1;
|
|
134
|
+
}
|
|
134
135
|
}
|
|
135
|
-
|
|
136
|
+
|
|
136
137
|
// General: Bite Style > End
|
|
137
|
-
&.bite__style--end .bite-text {
|
|
138
|
-
|
|
138
|
+
&.bite__style--end .bite-text {
|
|
139
|
+
margin-bottom: 0 !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
139
142
|
// General: Bite Style > Split
|
|
140
143
|
&.bite__style--split {
|
|
141
144
|
.bite-content {
|
|
142
145
|
flex-direction: row !important;
|
|
143
146
|
}
|
|
144
|
-
.bite-value {
|
|
147
|
+
.bite-value {
|
|
145
148
|
flex-basis: 25%;
|
|
146
149
|
align-self: center;
|
|
147
150
|
text-align: center;
|
|
@@ -163,7 +166,9 @@
|
|
|
163
166
|
align-items: center;
|
|
164
167
|
}
|
|
165
168
|
|
|
166
|
-
.cove-component__header + .bite {
|
|
169
|
+
.cove-component__header + .bite {
|
|
170
|
+
border-top: 0;
|
|
171
|
+
}
|
|
167
172
|
.bite {
|
|
168
173
|
position: relative;
|
|
169
174
|
overflow: hidden;
|
|
@@ -172,11 +177,11 @@
|
|
|
172
177
|
border-bottom-right-radius: 3px;
|
|
173
178
|
|
|
174
179
|
&-header {
|
|
175
|
-
|
|
176
|
-
|
|
180
|
+
border-top-left-radius: 3px;
|
|
181
|
+
border-top-right-radius: 3px;
|
|
177
182
|
}
|
|
178
183
|
|
|
179
|
-
.bite-content-container.component--hideBackgroundColor
|
|
184
|
+
.bite-content-container.component--hideBackgroundColor {
|
|
180
185
|
background: transparent;
|
|
181
186
|
}
|
|
182
187
|
|
|
@@ -184,8 +189,7 @@
|
|
|
184
189
|
border: none;
|
|
185
190
|
}
|
|
186
191
|
|
|
187
|
-
|
|
188
|
-
&-content__text-wrap {
|
|
192
|
+
&-content__text-wrap {
|
|
189
193
|
height: 100%;
|
|
190
194
|
display: flex;
|
|
191
195
|
flex-wrap: wrap;
|
|
@@ -301,7 +305,7 @@
|
|
|
301
305
|
width: 100%;
|
|
302
306
|
min-width: 100px;
|
|
303
307
|
align-self: center;
|
|
304
|
-
border-radius: .3em;
|
|
308
|
+
border-radius: 0.3em;
|
|
305
309
|
}
|
|
306
310
|
|
|
307
311
|
.cove-component__content {
|
|
@@ -330,7 +334,7 @@
|
|
|
330
334
|
}
|
|
331
335
|
|
|
332
336
|
.bite-subtext {
|
|
333
|
-
font-size: .9em;
|
|
337
|
+
font-size: 0.9em;
|
|
334
338
|
font-style: italic;
|
|
335
339
|
flex-basis: 100%;
|
|
336
340
|
width: 100%;
|
|
@@ -420,11 +424,12 @@
|
|
|
420
424
|
align-items: center;
|
|
421
425
|
}
|
|
422
426
|
|
|
423
|
-
.cove-component__header + .bite {
|
|
427
|
+
.cove-component__header + .bite {
|
|
428
|
+
border-top: 0;
|
|
429
|
+
}
|
|
424
430
|
}
|
|
425
431
|
}
|
|
426
432
|
|
|
427
|
-
|
|
428
433
|
.cove-component__content {
|
|
429
434
|
background: $lightestGray;
|
|
430
435
|
|