@cdc/dashboard 4.24.2 → 4.24.3

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 (38) hide show
  1. package/dist/cdcdashboard.js +98192 -85200
  2. package/examples/sankey.json +5218 -0
  3. package/index.html +3 -2
  4. package/package.json +11 -10
  5. package/src/CdcDashboard.tsx +124 -124
  6. package/src/CdcDashboardComponent.tsx +173 -186
  7. package/src/DashboardContext.tsx +4 -1
  8. package/src/_stories/Dashboard.stories.tsx +27 -5
  9. package/src/_stories/_mock/pivot-filter.json +163 -0
  10. package/src/_stories/_mock/standalone-table.json +122 -0
  11. package/src/_stories/_mock/toggle-example.json +4035 -0
  12. package/src/components/EditorWrapper/EditorWrapper.tsx +52 -0
  13. package/src/components/EditorWrapper/editor-wrapper.style.css +13 -0
  14. package/src/components/Filters.tsx +88 -0
  15. package/src/components/Header/FilterModal.tsx +480 -0
  16. package/src/components/Header/Header.tsx +25 -465
  17. package/src/components/Row.tsx +28 -17
  18. package/src/components/Toggle/Toggle.tsx +37 -0
  19. package/src/components/Toggle/index.tsx +1 -0
  20. package/src/components/Toggle/toggle-style.css +34 -0
  21. package/src/components/VisualizationsPanel.tsx +13 -3
  22. package/src/components/Widget.tsx +14 -30
  23. package/src/helpers/filterData.ts +72 -49
  24. package/src/helpers/generateValuesForFilter.ts +2 -12
  25. package/src/helpers/getApiFilterKey.ts +5 -0
  26. package/src/helpers/getUpdateConfig.ts +24 -22
  27. package/src/helpers/iconHash.tsx +34 -0
  28. package/src/helpers/tests/filterData.test.ts +149 -0
  29. package/src/images/icon-toggle.svg +1 -0
  30. package/src/scss/grid.scss +1 -1
  31. package/src/scss/main.scss +6 -0
  32. package/src/store/dashboard.actions.ts +19 -2
  33. package/src/store/dashboard.reducer.ts +9 -1
  34. package/src/types/ConfigRow.ts +2 -0
  35. package/src/types/DataSet.ts +7 -7
  36. package/src/types/InitialState.ts +2 -1
  37. package/src/types/SharedFilter.ts +5 -2
  38. package/src/types/Tab.ts +1 -0
package/src/_stories/Dashboard.stories.tsx CHANGED
@@ -5,9 +5,12 @@ import ExampleConfig_1 from './_mock/dashboard-gallery.json'
5
5
  import ExampleConfig_2 from './_mock/dashboard-2.json'
6
6
  import ExampleConfig_3 from './_mock/dashboard_no_filter.json'
7
7
  import Dashboard_Filter from './_mock/dashboard-filter.json'
8
- import Dashboard from '../CdcDashboardComponent'
8
+ import Dashboard from '../CdcDashboard'
9
+ import StandaloneTable from './_mock/standalone-table.json'
10
+ import PivotFitlerConfig from './_mock/pivot-filter.json'
9
11
  import { type DashboardConfig as Config } from '../types/DashboardConfig'
10
12
  import { userEvent, within } from '@storybook/testing-library'
13
+ import ToggleExampleConfig from './_mock/toggle-example.json'
11
14
 
12
15
  const meta: Meta<typeof Dashboard> = {
13
16
  title: 'Components/Pages/Dashboard',
@@ -18,25 +21,44 @@ type Story = StoryObj<typeof Dashboard>
18
21
 
19
22
  export const Example_1: Story = {
20
23
  args: {
21
- config: ExampleConfig_1 as unknown as Config
24
+ config: ExampleConfig_1
22
25
  }
23
26
  }
24
27
 
25
28
  export const Example_2: Story = {
26
29
  args: {
27
- config: ExampleConfig_2 as unknown as Config
30
+ config: ExampleConfig_2
28
31
  }
29
32
  }
30
33
 
31
34
  export const Example_3: Story = {
32
35
  args: {
33
- config: ExampleConfig_3 as unknown as Config
36
+ config: ExampleConfig_3
34
37
  }
35
38
  }
36
39
 
37
40
  export const Dashboard_Filters: Story = {
38
41
  args: {
39
- config: Dashboard_Filter as unknown as Config
42
+ config: Dashboard_Filter
43
+ }
44
+ }
45
+
46
+ export const StandAloneTable: Story = {
47
+ args: {
48
+ config: StandaloneTable
49
+ }
50
+ }
51
+
52
+ export const ToggleExample: Story = {
53
+ args: {
54
+ config: ToggleExampleConfig,
55
+ isEditor: true
56
+ }
57
+ }
58
+
59
+ export const PivotFilter: Story = {
60
+ args: {
61
+ config: PivotFitlerConfig
40
62
  }
41
63
  }
42
64
 
package/src/_stories/_mock/pivot-filter.json ADDED
@@ -0,0 +1,163 @@
1
+ {
2
+ "dashboard": {
3
+ "theme": "theme-blue",
4
+ "sharedFilters": [
5
+ {
6
+ "key": "Race",
7
+ "type": "datafilter",
8
+ "showDropdown": true,
9
+ "columnName": "Race",
10
+ "pivot": "Age-adjusted rate",
11
+ "usedBy": ["table1707935263149"]
12
+ }
13
+ ]
14
+ },
15
+ "rows": [
16
+ [
17
+ {
18
+ "width": 12,
19
+ "widget": "table1707935263149"
20
+ },
21
+ {},
22
+ {}
23
+ ]
24
+ ],
25
+ "visualizations": {
26
+ "table1707935263149": {
27
+ "newViz": true,
28
+ "openModal": false,
29
+ "uid": "table1707935263149",
30
+ "type": "table",
31
+ "table": {
32
+ "label": "Data Table",
33
+ "show": true,
34
+ "showDownloadUrl": false,
35
+ "showVertical": true,
36
+ "expanded": true
37
+ },
38
+ "columns": {},
39
+ "dataFormat": {},
40
+ "visualizationType": "table",
41
+ "dataDescription": {
42
+ "horizontal": false,
43
+ "series": false
44
+ },
45
+ "formattedData": [
46
+ {
47
+ "Race": "Hispanic or Latino",
48
+ "Age-adjusted rate": "644.2",
49
+ "Year": "2016"
50
+ },
51
+ {
52
+ "Race": "Non-Hispanic American Indian",
53
+ "Age-adjusted rate": "636.1",
54
+ "Year": "2016"
55
+ },
56
+ {
57
+ "Race": "Non-Hispanic Black",
58
+ "Age-adjusted rate": "563.7",
59
+ "Year": "2016"
60
+ },
61
+ {
62
+ "Race": "Hispanic or Latino",
63
+ "Age-adjusted rate": "644.2",
64
+ "Year": "2017"
65
+ },
66
+ {
67
+ "Race": "Non-Hispanic American Indian",
68
+ "Age-adjusted rate": "636.1",
69
+ "Year": "2017"
70
+ },
71
+ {
72
+ "Race": "Non-Hispanic Black",
73
+ "Age-adjusted rate": "563.7",
74
+ "Year": "2017"
75
+ }
76
+ ],
77
+ "dataKey": "valid-data-chart.csv",
78
+ "data": [
79
+ {
80
+ "Race": "Hispanic or Latino",
81
+ "Age-adjusted rate": "644.2",
82
+ "Year": "2016"
83
+ },
84
+ {
85
+ "Race": "Non-Hispanic American Indian",
86
+ "Age-adjusted rate": "636.1",
87
+ "Year": "2016"
88
+ },
89
+ {
90
+ "Race": "Non-Hispanic Black",
91
+ "Age-adjusted rate": "563.7",
92
+ "Year": "2016"
93
+ },
94
+ {
95
+ "Race": "Hispanic or Latino",
96
+ "Age-adjusted rate": "644.2",
97
+ "Year": "2017"
98
+ },
99
+ {
100
+ "Race": "Non-Hispanic American Indian",
101
+ "Age-adjusted rate": "636.1",
102
+ "Year": "2017"
103
+ },
104
+ {
105
+ "Race": "Non-Hispanic Black",
106
+ "Age-adjusted rate": "563.7",
107
+ "Year": "2017"
108
+ }
109
+ ]
110
+ }
111
+ },
112
+ "table": {
113
+ "label": "Data Table",
114
+ "show": false,
115
+ "showDownloadUrl": false,
116
+ "showVertical": true
117
+ },
118
+ "newViz": true,
119
+ "datasets": {
120
+ "valid-data-chart.csv": {
121
+ "data": [
122
+ {
123
+ "Race": "Hispanic or Latino",
124
+ "Age-adjusted rate": "644.2",
125
+ "Year": "2016"
126
+ },
127
+ {
128
+ "Race": "Non-Hispanic American Indian",
129
+ "Age-adjusted rate": "636.1",
130
+ "Year": "2016"
131
+ },
132
+ {
133
+ "Race": "Non-Hispanic Black",
134
+ "Age-adjusted rate": "563.7",
135
+ "Year": "2016"
136
+ },
137
+ {
138
+ "Race": "Hispanic or Latino",
139
+ "Age-adjusted rate": "644.2",
140
+ "Year": "2017"
141
+ },
142
+ {
143
+ "Race": "Non-Hispanic American Indian",
144
+ "Age-adjusted rate": "636.1",
145
+ "Year": "2017"
146
+ },
147
+ {
148
+ "Race": "Non-Hispanic Black",
149
+ "Age-adjusted rate": "563.7",
150
+ "Year": "2017"
151
+ }
152
+ ],
153
+ "dataFileSize": 178,
154
+ "dataFileName": "valid-data-chart.csv",
155
+ "dataFileSourceType": "file",
156
+ "dataFileFormat": "CSV",
157
+ "preview": true
158
+ }
159
+ },
160
+ "type": "dashboard",
161
+ "runtime": {},
162
+ "data": [1, 2, 3]
163
+ }
package/src/_stories/_mock/standalone-table.json ADDED
@@ -0,0 +1,122 @@
1
+ {
2
+ "dashboard": {
3
+ "theme": "theme-blue"
4
+ },
5
+ "rows": [
6
+ [
7
+ {
8
+ "width": 12,
9
+ "widget": "table1707840146431"
10
+ },
11
+ {},
12
+ {}
13
+ ]
14
+ ],
15
+ "visualizations": {
16
+ "table1707840146431": {
17
+ "newViz": true,
18
+ "openModal": false,
19
+ "uid": "table1707840146431",
20
+ "table": {
21
+ "label": "Data Table",
22
+ "show": true,
23
+ "showDownloadUrl": false,
24
+ "showVertical": true,
25
+ "expanded": true
26
+ },
27
+ "type": "table",
28
+ "visualizationType": "table",
29
+ "dataDescription": {
30
+ "horizontal": false,
31
+ "series": false
32
+ },
33
+ "columns": {},
34
+ "dataFormat": {},
35
+ "formattedData": [
36
+ {
37
+ "Race": "Hispanic or Latino",
38
+ "Age-adjusted rate": "644.2"
39
+ },
40
+ {
41
+ "Race": "Non-Hispanic American Indian",
42
+ "Age-adjusted rate": "6360.1"
43
+ },
44
+ {
45
+ "Race": "Non-Hispanic Black",
46
+ "Age-adjusted rate": "563.7"
47
+ },
48
+ {
49
+ "Race": "Non-Hispanic Asian or Pacific Islander",
50
+ "Age-adjusted rate": "202.5"
51
+ },
52
+ {
53
+ "Race": "Non-Hispanic White",
54
+ "Age-adjusted rate": "183.6"
55
+ }
56
+ ],
57
+ "dataKey": "valid-data-chart.csv",
58
+ "data": [
59
+ {
60
+ "Race": "Hispanic or Latino",
61
+ "Age-adjusted rate": "644.2"
62
+ },
63
+ {
64
+ "Race": "Non-Hispanic American Indian",
65
+ "Age-adjusted rate": "6360.1"
66
+ },
67
+ {
68
+ "Race": "Non-Hispanic Black",
69
+ "Age-adjusted rate": "563.7"
70
+ },
71
+ {
72
+ "Race": "Non-Hispanic Asian or Pacific Islander",
73
+ "Age-adjusted rate": "202.5"
74
+ },
75
+ {
76
+ "Race": "Non-Hispanic White",
77
+ "Age-adjusted rate": "183.6"
78
+ }
79
+ ]
80
+ }
81
+ },
82
+ "table": {
83
+ "label": "Data Table",
84
+ "show": false,
85
+ "showDownloadUrl": false,
86
+ "showVertical": true
87
+ },
88
+ "newViz": true,
89
+ "datasets": {
90
+ "valid-data-chart.csv": {
91
+ "data": [
92
+ {
93
+ "Race": "Hispanic or Latino",
94
+ "Age-adjusted rate": "644.2"
95
+ },
96
+ {
97
+ "Race": "Non-Hispanic American Indian",
98
+ "Age-adjusted rate": "6360.1"
99
+ },
100
+ {
101
+ "Race": "Non-Hispanic Black",
102
+ "Age-adjusted rate": "563.7"
103
+ },
104
+ {
105
+ "Race": "Non-Hispanic Asian or Pacific Islander",
106
+ "Age-adjusted rate": "202.5"
107
+ },
108
+ {
109
+ "Race": "Non-Hispanic White",
110
+ "Age-adjusted rate": "183.6"
111
+ }
112
+ ],
113
+ "dataFileSize": 178,
114
+ "dataFileName": "valid-data-chart.csv",
115
+ "dataFileSourceType": "file",
116
+ "dataFileFormat": "CSV",
117
+ "preview": true
118
+ }
119
+ },
120
+ "type": "dashboard",
121
+ "runtime": {}
122
+ }