@cdc/dashboard 1.1.4 → 9.22.9

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 (35) hide show
  1. package/dist/cdcdashboard.js +40 -28
  2. package/examples/default-filter-control.json +175 -0
  3. package/examples/default-multi-dataset.json +498 -0
  4. package/examples/private/chart-issue.json +3467 -0
  5. package/examples/private/no-issue.json +3467 -0
  6. package/examples/private/totals-two.json +104 -0
  7. package/examples/private/totals.json +103 -0
  8. package/examples/temp-example-data.json +130 -0
  9. package/package.json +9 -8
  10. package/src/CdcDashboard.js +16 -1
  11. package/src/CdcDashboard.jsx +668 -0
  12. package/src/{context.tsx → ConfigContext.js} +0 -0
  13. package/src/components/{Column.js → Column.jsx} +9 -7
  14. package/src/components/DataTable.tsx +6 -9
  15. package/src/components/EditorPanel.js +200 -44
  16. package/src/components/{Grid.js → Grid.jsx} +5 -4
  17. package/src/components/Header.jsx +242 -0
  18. package/src/components/Row.js +1 -0
  19. package/src/components/Row.jsx +181 -0
  20. package/src/components/Row.jsx~HEAD +212 -0
  21. package/src/components/Widget.js +6 -2
  22. package/src/components/Widget.jsx +191 -0
  23. package/src/index.html +5 -4
  24. package/src/scss/editor-panel.scss +0 -1
  25. package/src/scss/grid.scss +61 -14
  26. package/src/scss/main.scss +67 -6
  27. package/src/components/Header.js +0 -15
  28. package/src/images/icon-close.svg +0 -1
  29. package/src/images/icon-code.svg +0 -3
  30. package/src/images/icon-down.svg +0 -1
  31. package/src/images/icon-edit.svg +0 -3
  32. package/src/images/icon-grid.svg +0 -4
  33. package/src/images/icon-move.svg +0 -8
  34. package/src/images/icon-up.svg +0 -1
  35. 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": "9.22.9",
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": "^9.22.9",
24
+ "@cdc/data-bite": "^9.22.9",
25
+ "@cdc/filtered-text": "^0.0.1",
26
+ "@cdc/map": "^9.22.9",
27
+ "@cdc/markup-include": "^9.22.9",
28
+ "@cdc/waffle-chart": "^9.22.9",
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": "90faf22c91ca0062432607e4599598f9e67c848a"
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'
@@ -58,6 +59,9 @@ const addVisualization = (type, subType) => {
58
59
  case 'markup-include':
59
60
  newVisualizationConfig.visualizationType = type
60
61
  break
62
+ case 'filtered-text':
63
+ newVisualizationConfig.visualizationType = type
64
+ break
61
65
  }
62
66
 
63
67
  return newVisualizationConfig
@@ -83,6 +87,7 @@ const VisualizationsPanel = () => (
83
87
  <Widget addVisualization={() => addVisualization('data-bite', '')} type="data-bite"/>
84
88
  <Widget addVisualization={() => addVisualization('waffle-chart', '')} type="waffle-chart"/>
85
89
  <Widget addVisualization={() => addVisualization('markup-include', '')} type="markup-include"/>
90
+ <Widget addVisualization={() => addVisualization('filtered-text', '')} type="filtered-text"/>
86
91
  </div>
87
92
  </div>
88
93
  )
@@ -395,6 +400,9 @@ export default function CdcDashboard(
395
400
  case 'markup-include':
396
401
  body = <><Header back={back} subEditor="Markup Include"/><CdcMarkupInclude key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
397
402
  break
403
+ case 'filtered-text':
404
+ body = <><Header back={back} subEditor="Filtered Text"/><FilteredText key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
405
+ break
398
406
  }
399
407
  }
400
408
  })
@@ -420,7 +428,11 @@ export default function CdcDashboard(
420
428
  {title && <div role="heading" className={`dashboard-title ${config.dashboard.theme ?? 'theme-blue'}`}>{title}</div>}
421
429
 
422
430
  {/* Filters */}
423
- {config.dashboard.filters && <Filters/>}
431
+ {config.dashboard.filters &&
432
+ <div className="cove-dashboard-filters">
433
+ <Filters />
434
+ </div>
435
+ }
424
436
 
425
437
  {/* Visualizations */}
426
438
  {config.rows && config.rows.map((row, index) => {
@@ -453,6 +465,9 @@ export default function CdcDashboard(
453
465
  {visualizationConfig.type === 'markup-include' && <CdcMarkupInclude key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
454
466
  updateChildConfig(col.widget, newConfig)
455
467
  }} isDashboard={true}/>}
468
+ {visualizationConfig.type === 'filtered-text' && <FilteredText key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
469
+ updateChildConfig(col.widget, newConfig)
470
+ }} isDashboard={true}/>}
456
471
  </div>
457
472
  }
458
473
  })}