@cdc/editor 4.24.3 → 4.24.4

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.
@@ -2,10 +2,12 @@ import React, { useState, useContext, useMemo, useCallback, useEffect, memo } fr
2
2
  import { useTable, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination } from 'react-table'
3
3
  import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
4
4
  import { useDebounce } from 'use-debounce'
5
+ import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
5
6
 
6
7
  // Core
7
8
  import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength'
8
9
  import { errorMessages } from '../helpers/errorMessages'
10
+ import { DataSet } from '@cdc/dashboard/src/types/DataSet'
9
11
 
10
12
  const TableFilter = memo(({ globalFilter, setGlobalFilter, disabled = false }: any) => {
11
13
  const [filterValue, setFilterValue] = useState(globalFilter)
@@ -48,11 +50,61 @@ const Footer = memo(({ previousPage, nextPage, canPreviousPage, canNextPage, pag
48
50
  </footer>
49
51
  ))
50
52
 
51
- const PreviewDataTable = ({ data }) => {
52
- const [tableData, setTableData] = useState(data ?? [])
53
+ const PreviewDataTable = () => {
54
+ const { config } = useContext(ConfigContext)
55
+ const previewData = useMemo(() => {
56
+ if (config.type === 'dashboard') {
57
+ return Object.values(config.datasets).find((dataset: DataSet) => {
58
+ return dataset.preview && Array.isArray(dataset.data)
59
+ })
60
+ }
61
+ return config.data
62
+ }, [config.type, config.data, config.datasets])
63
+ const [tableData, _setTableData] = useState(previewData)
64
+ const runSideEffects = (td: any[]) => {
65
+ const isSankey = Object.keys(td[0]).includes('tableData')
66
+ const newData = generateColumns(isSankey ? td[0].tableData : td)
67
+ validateFipsCodeLength(newData)
68
+ return newData
69
+ }
70
+ const setTableData = td => _setTableData(runSideEffects(td))
71
+
53
72
  const dispatch = useContext(EditorDispatchContext)
54
73
 
74
+ const fetchAsyncData = async () => {
75
+ if (config.type === 'dashboard') {
76
+ Object.keys(config.datasets).forEach(async datasetKey => {
77
+ if (config.datasets[datasetKey].preview) {
78
+ if (config.datasets[datasetKey].dataUrl) {
79
+ const remoteData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
80
+ if (Array.isArray(remoteData)) {
81
+ setTableData(remoteData)
82
+ }
83
+ } else if (Array.isArray(config.datasets[datasetKey].data)) {
84
+ setTableData(config.datasets[datasetKey].data)
85
+ }
86
+ }
87
+ })
88
+ } else {
89
+ if (config.dataUrl) {
90
+ const remoteData = await fetchRemoteData(config.dataUrl)
91
+ if (Array.isArray(remoteData)) {
92
+ setTableData(remoteData)
93
+ }
94
+ }
95
+ }
96
+ }
97
+
98
+ useEffect(() => {
99
+ if (!config.data) {
100
+ fetchAsyncData()
101
+ } else {
102
+ setTableData(previewData)
103
+ }
104
+ }, [config.data]) // eslint-disable-line
105
+
55
106
  const tableColumns = useMemo(() => {
107
+ if (!tableData) return []
56
108
  const columns = tableData.columns ?? []
57
109
  if (columns.length > 0 && columns.includes('')) {
58
110
  // todo find a way to call the errors. Currently they are in DataImport.js
@@ -60,7 +112,7 @@ const PreviewDataTable = ({ data }) => {
60
112
  dispatch({ type: 'EDITOR_SET_ERRORS', payload: [errorMessages.emptyCols] })
61
113
  }
62
114
 
63
- return columns.map((columnName, idx) => {
115
+ return columns.map(columnName => {
64
116
  const columnConfig = {
65
117
  id: `column-${columnName}`,
66
118
  accessor: row => row[columnName],
@@ -73,7 +125,7 @@ const PreviewDataTable = ({ data }) => {
73
125
  }, [tableData])
74
126
 
75
127
  // This adds a columns property just like the D3 function for JSON parsing.
76
- const generateColumns = useCallback(data => {
128
+ const generateColumns = data => {
77
129
  let columns = []
78
130
 
79
131
  data.forEach(rowObj => {
@@ -92,20 +144,7 @@ const PreviewDataTable = ({ data }) => {
92
144
  newData.columns = columns
93
145
  return newData
94
146
  }
95
- }, [])
96
-
97
- useEffect(() => {
98
- if (!data) {
99
- return
100
- }
101
-
102
- let newData = [...data]
103
-
104
- const isSankey = Object.keys(newData[0]).includes('tableData')
105
- newData = generateColumns(isSankey ? newData[0].tableData : newData)
106
- validateFipsCodeLength(newData)
107
- setTableData(newData)
108
- }, [data, generateColumns])
147
+ }
109
148
 
110
149
  const {
111
150
  getTableProps,
@@ -122,79 +161,34 @@ const PreviewDataTable = ({ data }) => {
122
161
  previousPage
123
162
  } = useTable({ columns: tableColumns, data: tableData, initialState: { pageSize: 25 } }, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination)
124
163
 
125
- const NoData = () => (
126
- <section className='no-data-message'>
127
- <section>
128
- <h3>No Data</h3>
129
- <p>Import data to preview</p>
130
- </section>
131
- </section>
132
- )
133
-
134
164
  const PlaceholderTable = () => {
135
165
  return (
136
166
  <section className='no-data'>
137
- <NoData />
167
+ <section className='no-data-message'>
168
+ <section>
169
+ <h3>No Data</h3>
170
+ <p>Import data to preview</p>
171
+ </section>
172
+ </section>
138
173
  <div className='table-container'>
139
174
  <table className='editor data-table' role='table'>
140
175
  <thead>
141
- <tr role='row'>
176
+ <tr>
142
177
  <th scope='col' colSpan={1} role='columnheader'></th>
143
178
  <th scope='col' colSpan={1} role='columnheader'></th>
144
179
  <th scope='col' colSpan={1} role='columnheader'></th>
145
180
  </tr>
146
181
  </thead>
147
182
  <tbody>
148
- <tr role='row'>
149
- <td role='cell'></td>
150
- <td role='cell'></td>
151
- <td role='cell'></td>
152
- </tr>
153
- <tr role='row'>
154
- <td role='cell'></td>
155
- <td role='cell'></td>
156
- <td role='cell'></td>
157
- </tr>
158
- <tr role='row'>
159
- <td role='cell'></td>
160
- <td role='cell'></td>
161
- <td role='cell'></td>
162
- </tr>
163
- <tr role='row'>
164
- <td role='cell'></td>
165
- <td role='cell'></td>
166
- <td role='cell'></td>
167
- </tr>
168
- <tr role='row'>
169
- <td role='cell'></td>
170
- <td role='cell'></td>
171
- <td role='cell'></td>
172
- </tr>
173
- <tr role='row'>
174
- <td role='cell'></td>
175
- <td role='cell'></td>
176
- <td role='cell'></td>
177
- </tr>
178
- <tr role='row'>
179
- <td role='cell'></td>
180
- <td role='cell'></td>
181
- <td role='cell'></td>
182
- </tr>
183
- <tr role='row'>
184
- <td role='cell'></td>
185
- <td role='cell'></td>
186
- <td role='cell'></td>
187
- </tr>
188
- <tr role='row'>
189
- <td role='cell'></td>
190
- <td role='cell'></td>
191
- <td role='cell'></td>
192
- </tr>
193
- <tr role='row'>
194
- <td role='cell'></td>
195
- <td role='cell'></td>
196
- <td role='cell'></td>
197
- </tr>
183
+ <>
184
+ {[...Array(10)].map((_, i) => (
185
+ <tr key={i}>
186
+ <td></td>
187
+ <td></td>
188
+ <td></td>
189
+ </tr>
190
+ ))}
191
+ </>
198
192
  </tbody>
199
193
  </table>
200
194
  </div>
@@ -202,7 +196,7 @@ const PreviewDataTable = ({ data }) => {
202
196
  )
203
197
  }
204
198
 
205
- if (!data) return [<Header key='header' />, <PlaceholderTable key='table' />]
199
+ if (!tableData) return [<Header key='header' />, <PlaceholderTable key='table' />]
206
200
 
207
201
  const footerProps = { previousPage, nextPage, canPreviousPage, canNextPage, pageNumber: pageIndex + 1, totalPages: pageOptions.length }
208
202
 
@@ -244,7 +238,7 @@ const PreviewDataTable = ({ data }) => {
244
238
  </>
245
239
  )
246
240
 
247
- return [<Header key='header' data={data} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />, <Table key='table' />]
241
+ return [<Header key='header' data={tableData} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />, <Table key='table' />]
248
242
  }
249
243
 
250
244
  export default PreviewDataTable
@@ -17,6 +17,13 @@ export const formatConfigBeforeSave = configToStrip => {
17
17
  strippedConfig.visualizations[vizKey] = _.omit(strippedConfig.visualizations[vizKey], ['runtime', 'formattedData', 'data'])
18
18
  })
19
19
  }
20
+ if (strippedConfig.rows) {
21
+ strippedConfig.rows.forEach(row => {
22
+ if (row.dataKey) {
23
+ row = _.omit(row, ['data', 'formattedData'])
24
+ }
25
+ })
26
+ }
20
27
  } else {
21
28
  delete strippedConfig.runtime
22
29
  delete strippedConfig.formattedData
@@ -1,135 +0,0 @@
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
- "values": ["Hispanic or Latino", "Non-Hispanic American Indian", "Non-Hispanic Black", "Non-Hispanic Asian or Pacific Islander", "Non-Hispanic White"],
12
- "active": "Hispanic or Latino",
13
- "tier": 1
14
- }
15
- ]
16
- },
17
- "rows": [
18
- [
19
- {
20
- "width": 12,
21
- "widget": "table1707935263149"
22
- },
23
- {},
24
- {}
25
- ]
26
- ],
27
- "visualizations": {
28
- "table1707935263149": {
29
- "newViz": true,
30
- "openModal": false,
31
- "uid": "table1707935263149",
32
- "type": "table",
33
- "table": {
34
- "label": "Data Table",
35
- "show": true,
36
- "showDownloadUrl": false,
37
- "showVertical": true,
38
- "expanded": true
39
- },
40
- "columns": {},
41
- "dataFormat": {},
42
- "visualizationType": "table",
43
- "dataDescription": {
44
- "horizontal": false,
45
- "series": false
46
- },
47
- "formattedData": [
48
- {
49
- "Race": "Hispanic or Latino",
50
- "Age-adjusted rate": "644.2"
51
- },
52
- {
53
- "Race": "Non-Hispanic American Indian",
54
- "Age-adjusted rate": "636.1"
55
- },
56
- {
57
- "Race": "Non-Hispanic Black",
58
- "Age-adjusted rate": "563.7"
59
- },
60
- {
61
- "Race": "Non-Hispanic Asian or Pacific Islander",
62
- "Age-adjusted rate": "202.5"
63
- },
64
- {
65
- "Race": "Non-Hispanic White",
66
- "Age-adjusted rate": "183.6"
67
- }
68
- ],
69
- "dataKey": "valid-data-chart.csv",
70
- "data": [
71
- {
72
- "Race": "Hispanic or Latino",
73
- "Age-adjusted rate": "644.2"
74
- },
75
- {
76
- "Race": "Non-Hispanic American Indian",
77
- "Age-adjusted rate": "636.1"
78
- },
79
- {
80
- "Race": "Non-Hispanic Black",
81
- "Age-adjusted rate": "563.7"
82
- },
83
- {
84
- "Race": "Non-Hispanic Asian or Pacific Islander",
85
- "Age-adjusted rate": "202.5"
86
- },
87
- {
88
- "Race": "Non-Hispanic White",
89
- "Age-adjusted rate": "183.6"
90
- }
91
- ]
92
- }
93
- },
94
- "table": {
95
- "label": "Data Table",
96
- "show": true,
97
- "showDownloadUrl": false,
98
- "showVertical": true
99
- },
100
- "newViz": true,
101
- "datasets": {
102
- "valid-data-chart.csv": {
103
- "data": [
104
- {
105
- "Race": "Hispanic or Latino",
106
- "Age-adjusted rate": "644.2"
107
- },
108
- {
109
- "Race": "Non-Hispanic American Indian",
110
- "Age-adjusted rate": "636.1"
111
- },
112
- {
113
- "Race": "Non-Hispanic Black",
114
- "Age-adjusted rate": "563.7"
115
- },
116
- {
117
- "Race": "Non-Hispanic Asian or Pacific Islander",
118
- "Age-adjusted rate": "202.5"
119
- },
120
- {
121
- "Race": "Non-Hispanic White",
122
- "Age-adjusted rate": "183.6"
123
- }
124
- ],
125
- "dataFileSize": 178,
126
- "dataFileName": "valid-data-chart.csv",
127
- "dataFileSourceType": "file",
128
- "dataFileFormat": "CSV",
129
- "preview": true
130
- }
131
- },
132
- "type": "dashboard",
133
- "runtime": {},
134
- "data": [1, 2, 3]
135
- }
@@ -1,144 +0,0 @@
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
- "data": [
121
- {
122
- "Race": "Hispanic or Latino",
123
- "Age-adjusted rate": "644.2"
124
- },
125
- {
126
- "Race": "Non-Hispanic American Indian",
127
- "Age-adjusted rate": "6360.1"
128
- },
129
- {
130
- "Race": "Non-Hispanic Black",
131
- "Age-adjusted rate": "563.7"
132
- },
133
- {
134
- "Race": "Non-Hispanic Asian or Pacific Islander",
135
- "Age-adjusted rate": "202.5"
136
- },
137
- {
138
- "Race": "Non-Hispanic White",
139
- "Age-adjusted rate": "183.6"
140
- }
141
- ],
142
- "type": "dashboard",
143
- "runtime": {}
144
- }