@cdc/data-bite 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/cdcdatabite.js +10507 -10042
- package/examples/default.json +59 -0
- package/index.html +1 -34
- package/package.json +32 -34
- package/src/_stories/DataBite.stories.tsx +22 -0
- package/src/store/db.reducer.ts +1 -1
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "data-bite",
|
|
3
|
+
"data": [
|
|
4
|
+
{
|
|
5
|
+
"Category": "Total",
|
|
6
|
+
"Value": 1234
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"Category": "Group A",
|
|
10
|
+
"Value": 5678
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"Category": "Group B",
|
|
14
|
+
"Value": 9012
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Category": "Group C",
|
|
18
|
+
"Value": 3456
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"dataBite": "",
|
|
22
|
+
"dataFunction": "Mean (Average)",
|
|
23
|
+
"dataColumn": "Value",
|
|
24
|
+
"bitePosition": "Left",
|
|
25
|
+
"biteFontSize": 36,
|
|
26
|
+
"fontSize": "medium",
|
|
27
|
+
"biteBody": "Highlight a statistic, data point, or key fact about a topic using the relevant layout option:",
|
|
28
|
+
"imageData": {
|
|
29
|
+
"display": "none",
|
|
30
|
+
"url": "",
|
|
31
|
+
"alt": "",
|
|
32
|
+
"options": []
|
|
33
|
+
},
|
|
34
|
+
"dataFormat": {
|
|
35
|
+
"roundToPlace": 0,
|
|
36
|
+
"commas": true,
|
|
37
|
+
"prefix": "",
|
|
38
|
+
"suffix": ""
|
|
39
|
+
},
|
|
40
|
+
"biteStyle": "tp5",
|
|
41
|
+
"filters": [],
|
|
42
|
+
"subtext": "*This is an optional subtext or citation.",
|
|
43
|
+
"title": "Data / Fact",
|
|
44
|
+
"theme": "theme-blue",
|
|
45
|
+
"shadow": false,
|
|
46
|
+
"visual": {
|
|
47
|
+
"border": false,
|
|
48
|
+
"accent": false,
|
|
49
|
+
"background": false,
|
|
50
|
+
"hideBackgroundColor": false,
|
|
51
|
+
"borderColorTheme": false,
|
|
52
|
+
"showTitle": true
|
|
53
|
+
},
|
|
54
|
+
"general": {
|
|
55
|
+
"isCompactStyle": false
|
|
56
|
+
},
|
|
57
|
+
"markupVariables": [],
|
|
58
|
+
"enableMarkupVariables": false
|
|
59
|
+
}
|
package/index.html
CHANGED
|
@@ -1,34 +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
|
-
margin: 0;
|
|
9
|
-
border-top: none !important;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* Add 1rem padding to mimic DFE when editor is not visible */
|
|
13
|
-
.cdc-open-viz-module:not(.isEditor) {
|
|
14
|
-
padding: 1rem;
|
|
15
|
-
}
|
|
16
|
-
</style>
|
|
17
|
-
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
|
18
|
-
</head>
|
|
19
|
-
<body>
|
|
20
|
-
<!-- Original -->
|
|
21
|
-
<!-- <div class="react-container" data-config="/examples/sankey-example-data.json"></div> -->
|
|
22
|
-
|
|
23
|
-
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data_bites.html#examples -->
|
|
24
|
-
<!-- <div class="react-container" data-config="/examples/gallery/calculated-average.json"></div> -->
|
|
25
|
-
<!-- <div class="react-container" data-config="/examples/gallery/calculated-with-pic.json"></div> -->
|
|
26
|
-
<!-- <div class="react-container" data-config="/examples/gallery/max-value.json"></div> -->
|
|
27
|
-
<!-- <div class="react-container" data-config="/examples/gallery/sum-of-data.json"></div> -->
|
|
28
|
-
|
|
29
|
-
<!-- TP5 Style Example -->
|
|
30
|
-
<div class="react-container" data-config="/examples/tp5-style.json"></div>
|
|
31
|
-
|
|
32
|
-
<script type="module" src="./src/index.jsx"></script>
|
|
33
|
-
</body>
|
|
34
|
-
</html>
|
|
1
|
+
<!-- index.html is generated by @cdc/core/generateViteConfig.js using the files in @cdc/core/devTemplate/ -->
|
package/package.json
CHANGED
|
@@ -1,49 +1,47 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/data-bite",
|
|
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": "CdcDataBite",
|
|
6
|
-
"main": "dist/cdcdatabite",
|
|
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/data-bite 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/data-bite"
|
|
22
|
-
},
|
|
23
|
-
"author": "cooms13 <dmo7@cdc.gov>",
|
|
24
|
-
"bugs": {
|
|
25
|
-
"url": "https://github.com/CDCgov/cdc-open-viz/issues"
|
|
26
|
-
},
|
|
27
5
|
"license": "Apache-2.0",
|
|
28
|
-
"
|
|
6
|
+
"author": "cooms13 <dmo7@cdc.gov>",
|
|
7
|
+
"bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
|
|
29
8
|
"dependencies": {
|
|
30
|
-
"@cdc/core": "^4.26.
|
|
31
|
-
"chroma-js": "3.1.2",
|
|
32
|
-
"html-react-parser": "5.2.3",
|
|
33
|
-
"lodash": "^4.17.
|
|
9
|
+
"@cdc/core": "^4.26.2",
|
|
10
|
+
"chroma-js": "^3.1.2",
|
|
11
|
+
"html-react-parser": "^5.2.3",
|
|
12
|
+
"lodash": "^4.17.23",
|
|
34
13
|
"react-accessible-accordion": "^5.0.1",
|
|
35
14
|
"resize-observer-polyfill": "^1.5.1"
|
|
36
15
|
},
|
|
37
|
-
"peerDependencies": {
|
|
38
|
-
"react": "^18.2.0",
|
|
39
|
-
"react-dom": "^18.2.0"
|
|
40
|
-
},
|
|
41
16
|
"devDependencies": {
|
|
42
17
|
"@rollup/plugin-dsv": "^3.0.2",
|
|
43
|
-
"@vitejs/plugin-react": "^
|
|
18
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
44
19
|
"sass": "^1.89.2",
|
|
45
20
|
"vite-plugin-css-injected-by-js": "^2.4.0",
|
|
46
21
|
"vite-plugin-svgr": "^4.2.0"
|
|
47
22
|
},
|
|
48
|
-
"gitHead": "
|
|
23
|
+
"gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
|
|
24
|
+
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
25
|
+
"main": "dist/cdcdatabite",
|
|
26
|
+
"moduleName": "CdcDataBite",
|
|
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/data-bite"
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "vite build",
|
|
38
|
+
"graph": "nx graph",
|
|
39
|
+
"prepublishOnly": "lerna run --scope @cdc/data-bite 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"
|
|
49
47
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react-vite'
|
|
2
2
|
import DataBite from '../CdcDataBite'
|
|
3
|
+
import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
|
|
3
4
|
|
|
4
5
|
const meta: Meta<typeof DataBite> = {
|
|
5
6
|
title: 'Components/Templates/Data Bite',
|
|
@@ -21,24 +22,36 @@ type Story = StoryObj<typeof DataBite>
|
|
|
21
22
|
export const Data_Bite_Circle_Average: Story = {
|
|
22
23
|
args: {
|
|
23
24
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json'
|
|
25
|
+
},
|
|
26
|
+
play: async ({ canvasElement }) => {
|
|
27
|
+
await assertVisualizationRendered(canvasElement)
|
|
24
28
|
}
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
export const Data_Bite_Text_Max_Pic: Story = {
|
|
28
32
|
args: {
|
|
29
33
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json'
|
|
34
|
+
},
|
|
35
|
+
play: async ({ canvasElement }) => {
|
|
36
|
+
await assertVisualizationRendered(canvasElement)
|
|
30
37
|
}
|
|
31
38
|
}
|
|
32
39
|
|
|
33
40
|
export const Data_Bite_Circle_Sum: Story = {
|
|
34
41
|
args: {
|
|
35
42
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json'
|
|
43
|
+
},
|
|
44
|
+
play: async ({ canvasElement }) => {
|
|
45
|
+
await assertVisualizationRendered(canvasElement)
|
|
36
46
|
}
|
|
37
47
|
}
|
|
38
48
|
|
|
39
49
|
export const Data_Bite_Text_Average_Pic: Story = {
|
|
40
50
|
args: {
|
|
41
51
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json'
|
|
52
|
+
},
|
|
53
|
+
play: async ({ canvasElement }) => {
|
|
54
|
+
await assertVisualizationRendered(canvasElement)
|
|
42
55
|
}
|
|
43
56
|
}
|
|
44
57
|
|
|
@@ -53,6 +66,9 @@ export const Data_Bite_TP5_Style: Story = {
|
|
|
53
66
|
'TP5 Style - A new layout style that displays the data value and message side by side, centered. The title appears above, and subtext appears below the message. On mobile devices, the message wraps below the data value. This style mimics the CDC Template Package 5.0 callout component design.'
|
|
54
67
|
}
|
|
55
68
|
}
|
|
69
|
+
},
|
|
70
|
+
play: async ({ canvasElement }) => {
|
|
71
|
+
await assertVisualizationRendered(canvasElement)
|
|
56
72
|
}
|
|
57
73
|
}
|
|
58
74
|
|
|
@@ -67,6 +83,9 @@ export const Data_Bite_TP5_White_Background: Story = {
|
|
|
67
83
|
'TP5 Style with White Background - This variant uses a white background with a 1px border and 6px border radius, providing a cleaner look while maintaining the TP5 layout style.'
|
|
68
84
|
}
|
|
69
85
|
}
|
|
86
|
+
},
|
|
87
|
+
play: async ({ canvasElement }) => {
|
|
88
|
+
await assertVisualizationRendered(canvasElement)
|
|
70
89
|
}
|
|
71
90
|
}
|
|
72
91
|
|
|
@@ -83,5 +102,8 @@ export const Editor_Mode_Basic: Story = {
|
|
|
83
102
|
'Basic editor mode rendering. For comprehensive editor testing with interactions, see "Data Bite/Editor Tests" stories.'
|
|
84
103
|
}
|
|
85
104
|
}
|
|
105
|
+
},
|
|
106
|
+
play: async ({ canvasElement }) => {
|
|
107
|
+
await assertVisualizationRendered(canvasElement)
|
|
86
108
|
}
|
|
87
109
|
}
|
package/src/store/db.reducer.ts
CHANGED