@cdc/dashboard 1.1.4 → 4.22.10-alpha.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.
Files changed (36) hide show
  1. package/LICENSE +201 -0
  2. package/dist/cdcdashboard.js +40 -28
  3. package/examples/default-filter-control.json +175 -0
  4. package/examples/default-multi-dataset.json +498 -0
  5. package/examples/private/chart-issue.json +3467 -0
  6. package/examples/private/no-issue.json +3467 -0
  7. package/examples/private/totals-two.json +104 -0
  8. package/examples/private/totals.json +103 -0
  9. package/examples/temp-example-data.json +130 -0
  10. package/package.json +9 -8
  11. package/src/CdcDashboard.js +18 -6
  12. package/src/CdcDashboard.jsx +697 -0
  13. package/src/{context.tsx → ConfigContext.js} +0 -0
  14. package/src/components/{Column.js → Column.jsx} +9 -7
  15. package/src/components/DataTable.tsx +8 -10
  16. package/src/components/EditorPanel.js +200 -44
  17. package/src/components/{Grid.js → Grid.jsx} +5 -4
  18. package/src/components/Header.jsx +246 -0
  19. package/src/components/Row.js +1 -0
  20. package/src/components/Row.jsx +181 -0
  21. package/src/components/Row.jsx~HEAD +212 -0
  22. package/src/components/Widget.js +6 -2
  23. package/src/components/Widget.jsx +206 -0
  24. package/src/index.html +29 -25
  25. package/src/scss/editor-panel.scss +0 -1
  26. package/src/scss/grid.scss +60 -14
  27. package/src/scss/main.scss +71 -6
  28. package/src/components/Header.js +0 -15
  29. package/src/images/icon-close.svg +0 -1
  30. package/src/images/icon-code.svg +0 -3
  31. package/src/images/icon-down.svg +0 -1
  32. package/src/images/icon-edit.svg +0 -3
  33. package/src/images/icon-grid.svg +0 -4
  34. package/src/images/icon-move.svg +0 -8
  35. package/src/images/icon-up.svg +0 -1
  36. package/src/images/warning.svg +0 -1
package/examples/private/totals-two.json ADDED
@@ -0,0 +1,104 @@
1
+ {
2
+ "dashboard": {
3
+ "theme": "theme-blue",
4
+ "title": "Total Vaccine Doses Administered",
5
+ "description": "Total vaccine doses administered data are updated every Wednesday as soon as they are reviewed and verified.\n<br>\nInformation about the number of vials shipped is posted on <a href=\"https://aspr.hhs.gov/SNS/Pages/JYNNEOS-Distribution.aspx\">https://aspr.hhs.gov/SNS/Pages/JYNNEOS-Distribution.aspx</a>, and is updated every Monday, Wednesday, and Friday.\n"
6
+ },
7
+ "rows": [
8
+ [
9
+ {
10
+ "width": 12,
11
+ "widget": "data-bite1661201913029"
12
+ },
13
+ {},
14
+ {}
15
+ ]
16
+ ],
17
+ "visualizations": {
18
+ "data-bite1661201911110": {
19
+ "type": "data-bite",
20
+ "dataBite": "",
21
+ "dataFunction": "Sum",
22
+ "dataColumn": "Vaccines Distributed",
23
+ "bitePosition": "Left",
24
+ "biteFontSize": 24,
25
+ "fontSize": "small",
26
+ "biteBody": "<br><span class=\"h5\">Vials Shipped to all U.S. Jurisdictions</span>",
27
+ "imageData": {
28
+ "display": "none",
29
+ "url": "",
30
+ "alt": "",
31
+ "options": []
32
+ },
33
+ "dataFormat": {
34
+ "roundToPlace": 0,
35
+ "commas": true,
36
+ "prefix": "",
37
+ "suffix": ""
38
+ },
39
+ "biteStyle": "body",
40
+ "filters": [],
41
+ "subtext": "",
42
+ "title": "",
43
+ "theme": "theme-blue",
44
+ "shadow": false,
45
+ "newViz": true,
46
+ "uid": "data-bite1661201911110",
47
+ "visualizationType": "data-bite"
48
+ },
49
+ "data-bite1661201913029": {
50
+ "type": "data-bite",
51
+ "dataBite": "",
52
+ "dataFunction": "Sum",
53
+ "dataColumn": "Vaccines Administered",
54
+ "bitePosition": "Left",
55
+ "biteFontSize": 24,
56
+ "fontSize": "small",
57
+ "biteBody": "<br><span class=\"h5\">Doses Administered in the 54 U.S. Jurisdictions Reporting Data<span id=\"administered_date\"> as of October 4, 2022.",
58
+ "imageData": {
59
+ "display": "none",
60
+ "url": "",
61
+ "alt": "",
62
+ "options": []
63
+ },
64
+ "dataFormat": {
65
+ "roundToPlace": 0,
66
+ "commas": true,
67
+ "prefix": "",
68
+ "suffix": ""
69
+ },
70
+ "biteStyle": "body",
71
+ "filters": [],
72
+ "subtext": "",
73
+ "title": "",
74
+ "theme": "theme-blue",
75
+ "shadow": false,
76
+ "visual": {
77
+ "border": false,
78
+ "accent": false,
79
+ "background": false,
80
+ "hideBackgroundColor": false,
81
+ "borderColorTheme": false
82
+ },
83
+ "general": {
84
+ "isCompactStyle": false
85
+ },
86
+ "newViz": true,
87
+ "uid": "data-bite1661201913029",
88
+ "visualizationType": "data-bite",
89
+ "editing": true
90
+ }
91
+ },
92
+ "table": {
93
+ "label": "Data Table",
94
+ "show": false
95
+ },
96
+ "dataFileName": "https://www.cdc.gov/wcms/vizdata/poxvirus/monkeypox/data/vaccines/mpx_vaccine_databites.csv",
97
+ "dataFileSourceType": "url",
98
+ "dataUrl": "https://www.cdc.gov/wcms/vizdata/poxvirus/monkeypox/data/vaccines/mpx_vaccine_databites.csv",
99
+ "type": "dashboard",
100
+ "orientation": null,
101
+ "visualizationSubType": null,
102
+ "runtime": {},
103
+ "uuid": 1661454522321
104
+ }
package/examples/private/totals.json ADDED
@@ -0,0 +1,103 @@
1
+ {
2
+ "dashboard": {
3
+ "theme": "theme-blue",
4
+ "title": "Total Vaccine Doses Administered",
5
+ "description": "Total vaccine doses administered data are updated every Wednesday as soon as they are reviewed and verified.\n<br>\nInformation about the number of vials shipped is posted on <a href=\"https://aspr.hhs.gov/SNS/Pages/JYNNEOS-Distribution.aspx\">https://aspr.hhs.gov/SNS/Pages/JYNNEOS-Distribution.aspx</a>, and is updated every Monday, Wednesday, and Friday.\n"
6
+ },
7
+ "rows": [
8
+ [
9
+ {
10
+ "width": 12,
11
+ "widget": "data-bite1661201913029"
12
+ },
13
+ {},
14
+ {}
15
+ ]
16
+ ],
17
+ "visualizations": {
18
+ "data-bite1661201911110": {
19
+ "type": "data-bite",
20
+ "dataBite": "",
21
+ "dataFunction": "Sum",
22
+ "dataColumn": "Vaccines Distributed",
23
+ "bitePosition": "Left",
24
+ "biteFontSize": 24,
25
+ "fontSize": "small",
26
+ "biteBody": "<br><span class=\"h5\">Vials Shipped to all U.S. Jurisdictions</span>",
27
+ "imageData": {
28
+ "display": "none",
29
+ "url": "",
30
+ "alt": "",
31
+ "options": []
32
+ },
33
+ "dataFormat": {
34
+ "roundToPlace": 0,
35
+ "commas": true,
36
+ "prefix": "",
37
+ "suffix": ""
38
+ },
39
+ "biteStyle": "body",
40
+ "filters": [],
41
+ "subtext": "",
42
+ "title": "",
43
+ "theme": "theme-blue",
44
+ "shadow": false,
45
+ "newViz": true,
46
+ "uid": "data-bite1661201911110",
47
+ "visualizationType": "data-bite"
48
+ },
49
+ "data-bite1661201913029": {
50
+ "type": "data-bite",
51
+ "dataBite": "",
52
+ "dataFunction": "Sum",
53
+ "dataColumn": "Vaccines Administered",
54
+ "bitePosition": "Left",
55
+ "biteFontSize": 24,
56
+ "fontSize": "small",
57
+ "biteBody": "<br><span class=\"h5\">Doses Administered in the 54 U.S. Jurisdictions Reporting Data<span id=\"administered_date\"> as of October 4, 2022.",
58
+ "imageData": {
59
+ "display": "none",
60
+ "url": "",
61
+ "alt": "",
62
+ "options": []
63
+ },
64
+ "dataFormat": {
65
+ "roundToPlace": 0,
66
+ "commas": true,
67
+ "prefix": "",
68
+ "suffix": ""
69
+ },
70
+ "biteStyle": "body",
71
+ "filters": [],
72
+ "subtext": "",
73
+ "title": "",
74
+ "theme": "theme-blue",
75
+ "shadow": false,
76
+ "visual": {
77
+ "border": false,
78
+ "accent": false,
79
+ "background": false,
80
+ "hideBackgroundColor": false,
81
+ "borderColorTheme": false
82
+ },
83
+ "general": {
84
+ "isCompactStyle": false
85
+ },
86
+ "newViz": true,
87
+ "uid": "data-bite1661201913029",
88
+ "visualizationType": "data-bite",
89
+ "editing": true
90
+ }
91
+ },
92
+ "table": {
93
+ "label": "Data Table",
94
+ "show": false
95
+ },
96
+ "dataFileSourceType": "url",
97
+ "dataUrl": "https://www.cdc.gov/wcms/vizdata/poxvirus/monkeypox/data/vaccines/mpx_vaccine_databites.csv",
98
+ "type": "dashboard",
99
+ "orientation": null,
100
+ "visualizationSubType": null,
101
+ "runtime": {},
102
+ "uuid": 1661454522321
103
+ }
package/examples/temp-example-data.json ADDED
@@ -0,0 +1,130 @@
1
+ [
2
+ {
3
+ "date": "2011-10-01",
4
+ "New York": "89.4",
5
+ "San Francisco": "26.7",
6
+ "Austin": "34.2",
7
+ "wind": "Include Wind",
8
+ "humidity": "Include Humidiy"
9
+ },
10
+ {
11
+ "date": "2011-10-02",
12
+ "New York": "54.0",
13
+ "San Francisco": "59.9",
14
+ "Austin": "68.7",
15
+ "wind": "Include Wind",
16
+ "humidity": "Include Humidiy"
17
+ },
18
+ {
19
+ "date": "2011-10-03",
20
+ "New York": "51.3",
21
+ "San Francisco": "53.1",
22
+ "Austin": "64.4",
23
+ "wind": "Include Wind",
24
+ "humidity": "Include Humidiy"
25
+ },
26
+ {
27
+ "date": "2011-10-04",
28
+ "New York": "34.7",
29
+ "San Francisco": "56.8",
30
+ "Austin": "98.0",
31
+ "wind": "Include Wind",
32
+ "humidity": "Include Humidiy"
33
+ },
34
+ {
35
+ "date": "2011-10-01",
36
+ "New York": "32.4",
37
+ "San Francisco": "43.7",
38
+ "Austin": "54.2",
39
+ "wind": "Don't Include Wind",
40
+ "humidity": "Include Humidiy"
41
+ },
42
+ {
43
+ "date": "2011-10-02",
44
+ "New York": "65.0",
45
+ "San Francisco": "76.9",
46
+ "Austin": "87.7",
47
+ "wind": "Don't Include Wind",
48
+ "humidity": "Include Humidiy"
49
+ },
50
+ {
51
+ "date": "2011-10-03",
52
+ "New York": "53.3",
53
+ "San Francisco": "59.1",
54
+ "Austin": "69.4",
55
+ "wind": "Don't Include Wind",
56
+ "humidity": "Include Humidiy"
57
+ },
58
+ {
59
+ "date": "2011-10-04",
60
+ "New York": "55.7",
61
+ "San Francisco": "58.8",
62
+ "Austin": "68.0",
63
+ "wind": "Don't Include Wind",
64
+ "humidity": "Include Humidiy"
65
+ },
66
+ {
67
+ "date": "2011-10-01",
68
+ "New York": "63.4",
69
+ "San Francisco": "62.7",
70
+ "Austin": "72.2",
71
+ "wind": "Include Wind",
72
+ "humidity": "Don't Include Humidiy"
73
+ },
74
+ {
75
+ "date": "2011-10-02",
76
+ "New York": "58.0",
77
+ "San Francisco": "59.9",
78
+ "Austin": "67.7",
79
+ "wind": "Include Wind",
80
+ "humidity": "Don't Include Humidiy"
81
+ },
82
+ {
83
+ "date": "2011-10-03",
84
+ "New York": "53.3",
85
+ "San Francisco": "59.1",
86
+ "Austin": "69.4",
87
+ "wind": "Include Wind",
88
+ "humidity": "Don't Include Humidiy"
89
+ },
90
+ {
91
+ "date": "2011-10-04",
92
+ "New York": "55.7",
93
+ "San Francisco": "58.8",
94
+ "Austin": "68.0",
95
+ "wind": "Include Wind",
96
+ "humidity": "Don't Include Humidiy"
97
+ },
98
+ {
99
+ "date": "2011-10-01",
100
+ "New York": "63.4",
101
+ "San Francisco": "62.7",
102
+ "Austin": "87.2",
103
+ "wind": "Don't Include Wind",
104
+ "humidity": "Don't Include Humidiy"
105
+ },
106
+ {
107
+ "date": "2011-10-02",
108
+ "New York": "98.0",
109
+ "San Francisco": "59.9",
110
+ "Austin": "67.7",
111
+ "wind": "Don't Include Wind",
112
+ "humidity": "Don't Include Humidiy"
113
+ },
114
+ {
115
+ "date": "2011-10-03",
116
+ "New York": "53.3",
117
+ "San Francisco": "59.1",
118
+ "Austin": "69.4",
119
+ "wind": "Don't Include Wind",
120
+ "humidity": "Don't Include Humidiy"
121
+ },
122
+ {
123
+ "date": "2011-10-04",
124
+ "New York": "55.7",
125
+ "San Francisco": "54.8",
126
+ "Austin": "68.0",
127
+ "wind": "Don't Include Wind",
128
+ "humidity": "Don't Include Humidiy"
129
+ }
130
+ ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/dashboard",
3
- "version": "1.1.4",
3
+ "version": "4.22.10-alpha.1",
4
4
  "description": "React component for combining multiple visualizations into a single dashboard",
5
5
  "main": "dist/cdcdashboard",
6
6
  "scripts": {
@@ -19,12 +19,13 @@
19
19
  },
20
20
  "license": "Apache-2.0",
21
21
  "dependencies": {
22
- "@cdc/chart": "^1.3.4",
23
- "@cdc/core": "^1.1.4",
24
- "@cdc/data-bite": "^1.1.4",
25
- "@cdc/map": "^2.6.4",
26
- "@cdc/markup-include": "^1.0.2",
27
- "@cdc/waffle-chart": "^1.0.2",
22
+ "@cdc/chart": "^9.22.9",
23
+ "@cdc/core": "^4.22.10",
24
+ "@cdc/data-bite": "^4.22.10",
25
+ "@cdc/filtered-text": "^0.0.1",
26
+ "@cdc/map": "^4.22.10-alpha.1",
27
+ "@cdc/markup-include": "^4.22.10",
28
+ "@cdc/waffle-chart": "^4.22.10",
28
29
  "html-react-parser": "1.4.9",
29
30
  "js-base64": "^2.5.2",
30
31
  "papaparse": "^5.3.0",
@@ -43,5 +44,5 @@
43
44
  "resolutions": {
44
45
  "@types/react": "17.x"
45
46
  },
46
- "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
47
+ "gitHead": "bc6f9efd741e5b22140edc58c7a7f9e5efc43d1e"
47
48
  }
package/src/CdcDashboard.js CHANGED
@@ -19,6 +19,7 @@ import CdcChart from '@cdc/chart'
19
19
  import CdcDataBite from '@cdc/data-bite'
20
20
  import CdcWaffleChart from '@cdc/waffle-chart'
21
21
  import CdcMarkupInclude from '@cdc/markup-include'
22
+ import FilteredText from '@cdc/filtered-text';
22
23
 
23
24
  import EditorPanel from './components/EditorPanel'
24
25
  import Grid from './components/Grid'
@@ -33,6 +34,7 @@ import Papa from 'papaparse'
33
34
  import './scss/main.scss'
34
35
 
35
36
  import { publish } from '@cdc/core/helpers/events'
37
+ import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
36
38
 
37
39
  const addVisualization = (type, subType) => {
38
40
  let newVisualizationConfig = {
@@ -58,6 +60,9 @@ const addVisualization = (type, subType) => {
58
60
  case 'markup-include':
59
61
  newVisualizationConfig.visualizationType = type
60
62
  break
63
+ case 'filtered-text':
64
+ newVisualizationConfig.visualizationType = type
65
+ break
61
66
  }
62
67
 
63
68
  return newVisualizationConfig
@@ -83,6 +88,7 @@ const VisualizationsPanel = () => (
83
88
  <Widget addVisualization={() => addVisualization('data-bite', '')} type="data-bite"/>
84
89
  <Widget addVisualization={() => addVisualization('waffle-chart', '')} type="waffle-chart"/>
85
90
  <Widget addVisualization={() => addVisualization('markup-include', '')} type="markup-include"/>
91
+ <Widget addVisualization={() => addVisualization('filtered-text', '')} type="filtered-text"/>
86
92
  </div>
87
93
  </div>
88
94
  )
@@ -150,11 +156,7 @@ export default function CdcDashboard(
150
156
  }
151
157
  }
152
158
 
153
- const cacheBustingString = () => {
154
- const round = 1000 * 60 * 15;
155
- const date = new Date();
156
- return new Date(date.getTime() - (date.getTime() % round)).toISOString();
157
- };
159
+
158
160
 
159
161
  const loadConfig = async (configObj) => {
160
162
  // Set loading flag
@@ -395,6 +397,9 @@ export default function CdcDashboard(
395
397
  case 'markup-include':
396
398
  body = <><Header back={back} subEditor="Markup Include"/><CdcMarkupInclude key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
397
399
  break
400
+ case 'filtered-text':
401
+ body = <><Header back={back} subEditor="Filtered Text"/><FilteredText key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
402
+ break
398
403
  }
399
404
  }
400
405
  })
@@ -420,7 +425,11 @@ export default function CdcDashboard(
420
425
  {title && <div role="heading" className={`dashboard-title ${config.dashboard.theme ?? 'theme-blue'}`}>{title}</div>}
421
426
 
422
427
  {/* Filters */}
423
- {config.dashboard.filters && <Filters/>}
428
+ {config.dashboard.filters &&
429
+ <div className="cove-dashboard-filters">
430
+ <Filters />
431
+ </div>
432
+ }
424
433
 
425
434
  {/* Visualizations */}
426
435
  {config.rows && config.rows.map((row, index) => {
@@ -453,6 +462,9 @@ export default function CdcDashboard(
453
462
  {visualizationConfig.type === 'markup-include' && <CdcMarkupInclude key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
454
463
  updateChildConfig(col.widget, newConfig)
455
464
  }} isDashboard={true}/>}
465
+ {visualizationConfig.type === 'filtered-text' && <FilteredText key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
466
+ updateChildConfig(col.widget, newConfig)
467
+ }} isDashboard={true}/>}
456
468
  </div>
457
469
  }
458
470
  })}