npm - @cdc/dashboard - Versions diffs - 4.23.6 → 4.23.8 - Mend

@cdc/dashboard 4.23.6 → 4.23.8

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 (9) hide show

package/dist/cdcdashboard.js +74310 -73096
package/examples/default-filter-control.json +3 -0
package/examples/shared-filters.json +60 -0
package/index.html +2 -2
package/package.json +9 -9
package/src/CdcDashboard.jsx +32 -24
package/src/components/Header.jsx +15 -1
package/src/components/Widget.jsx +61 -6
package/src/scss/main.scss +5 -7

package/examples/default-filter-control.json CHANGED Viewed

@@ -147,6 +147,9 @@
         "specialClasses": [
           "N/A"
         ]
+      },
+      "dataTable": {
       }
     },
     "chart1": {

package/examples/shared-filters.json CHANGED Viewed

@@ -535,6 +535,66 @@
           "state": "Florida"
         }
       ]
+    },
+    "data3": {
+      "data": [
+        {
+          "Insured Rate": 8,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06071",
+          "Year (Good filter option)": "2010",
+          "link": ""
+        },
+        {
+          "Insured Rate": 0,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "55005",
+          "Year (Good filter option)": "2010",
+          "link": "https://cdc.gov"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "12103",
+          "Year (Good filter option)": "2010",
+          "link": ""
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "32005",
+          "Year (Good filter option)": "2010",
+          "link": ""
+        },
+        {
+          "Insured Rate": 18,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06075",
+          "Year (Good filter option)": "2010",
+          "link": ""
+        },
+        {
+          "Insured Rate": 3,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06027",
+          "Year (Good filter option)": "2010",
+          "link": ""
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06029",
+          "Year (Good filter option)": "2010",
+          "link": ""
+        },
+        {
+          "Insured Rate": 60,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06065",
+          "Year (Good filter option)": "2010",
+          "link": ""
+        }
+      ]
     }
   },
   "runtime": {},

package/index.html CHANGED Viewed

@@ -21,8 +21,8 @@
   <body>
     <!-- <div class="react-container" data-config="/examples/default.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/default-multi-dataset.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/default-filter-control.json"></div> -->
-    <div class="react-container" data-config="/examples/shared-filters.json"></div>
+    <div class="react-container" data-config="/examples/default-filter-control.json"></div>
+    <!-- <div class="react-container" data-config="/examples/private/bar-color.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/private/totals.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/private/totals-two.json"></div> -->
     <script type="module" src="./src/index.jsx"></script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.23.6",
+  "version": "4.23.8",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -25,13 +25,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.23.6",
-    "@cdc/core": "^4.23.6",
-    "@cdc/data-bite": "^4.23.6",
-    "@cdc/filtered-text": "^4.23.6",
-    "@cdc/map": "^4.23.6",
-    "@cdc/markup-include": "^4.23.6",
-    "@cdc/waffle-chart": "^4.23.6",
+    "@cdc/chart": "^4.23.8",
+    "@cdc/core": "^4.23.8",
+    "@cdc/data-bite": "^4.23.8",
+    "@cdc/filtered-text": "^4.23.8",
+    "@cdc/map": "^4.23.8",
+    "@cdc/markup-include": "^4.23.8",
+    "@cdc/waffle-chart": "^4.23.8",
     "html-react-parser": "^3.0.8",
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
@@ -47,5 +47,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade"
+  "gitHead": "ba0a072a40c430baf121ad5ece0165f52a414b86"
 }

package/src/CdcDashboard.jsx CHANGED Viewed

@@ -97,6 +97,7 @@ const VisualizationsPanel = ({ loadConfig, config }) => (
       <Widget addVisualization={() => addVisualization('waffle-chart', '')} type='waffle-chart' />
       <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
       <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
+      <Widget addVisualization={() => addVisualization('filter-dropdowns', '')} type='filter-dropdowns' />
     </div>
     <span className='subheading-3'>Advanced</span>
     <AdvancedEditor loadConfig={loadConfig} state={config} />
@@ -283,6 +284,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         let add = true
         filters.forEach(filter => {
+          // eslint-disable-next-line eqeqeq
           if (filter.type !== 'url' && row[filter.columnName] != filter.active) {
             add = false
           }
@@ -416,7 +418,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     setConfig(updatedConfig)
   }
-  const Filters = () => {
+  const Filters = ({ hide }) => {
     const changeFilterActive = (index, value) => {
       let dashboardConfig = { ...config.dashboard }
@@ -445,7 +447,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     const announceChange = text => {}
     return config.dashboard.sharedFilters.map((singleFilter, index) => {
-      if (singleFilter.type !== 'url' && !singleFilter.showDropdown) return <></>
+      if ((singleFilter.type !== 'url' && !singleFilter.showDropdown) || (hide && hide.indexOf(index) !== -1)) return <></>
       const values = []
@@ -466,21 +468,23 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
       })
       return (
-        <section className='dashboard-filters-section' key={`${singleFilter.key}-filtersection-${index}`}>
-          <label htmlFor={`filter-${index}`}>{singleFilter.key}</label>
-          <select
-            id={`filter-${index}`}
-            className='filter-select'
-            data-index='0'
-            value={singleFilter.active}
-            onChange={val => {
-              changeFilterActive(index, val.target.value)
-              announceChange(`Filter ${singleFilter.key} value has been changed to ${val.target.value}, please reference the data table to see updated values.`)
-            }}
-          >
-            {values}
-          </select>
-        </section>
+        <div className='cove-dashboard-filters'>
+          <section className='dashboard-filters-section' key={`${singleFilter.key}-filtersection-${index}`}>
+            <label htmlFor={`filter-${index}`}>{singleFilter.key}</label>
+            <select
+              id={`filter-${index}`}
+              className='filter-select'
+              data-index='0'
+              value={singleFilter.active}
+              onChange={val => {
+                changeFilterActive(index, val.target.value)
+                announceChange(`Filter ${singleFilter.key} value has been changed to ${val.target.value}, please reference the data table to see updated values.`)
+              }}
+            >
+              {values}
+            </select>
+          </section>
+        </div>
       )
     })
   }
@@ -596,6 +600,14 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
               </>
             )
             break
+          case 'filter-dropdowns':
+            body = (
+              <>
+                <Header tabSelected={tabSelected} setTabSelected={setTabSelected} back={back} subEditor='Filter Dropdowns' />
+                <Filters hide={visualizationConfig.hide} />
+              </>
+            )
+            break
           default:
             body = <></>
             break
@@ -622,18 +634,13 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
           {/* Title */}
           {title && (
             <div role='heading' aria-level='3' className={`dashboard-title ${config.dashboard.theme ?? 'theme-blue'}`}>
-              {title}
+              {parse(title)}
             </div>
           )}
           {/* Description */}
           {description && <div className='subtext'>{parse(description)}</div>}
           {/* Filters */}
-          {config.dashboard.sharedFilters && (
-            <div className='cove-dashboard-filters'>
-              {' '}
-              <Filters />
-            </div>
-          )}
+          {config.dashboard.sharedFilters && Object.keys(config.visualizations).filter(vizKey => config.visualizations[vizKey].visualizationType === 'filter-dropdowns').length === 0 && <Filters />}
           {/* Visualizations */}
           {config.rows &&
@@ -748,6 +755,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                   isDashboard={true}
                                 />
                               )}
+                              {visualizationConfig.type === 'filter-dropdowns' && <Filters hide={visualizationConfig.hide} />}
                             </div>
                           </React.Fragment>
                         )

package/src/components/Header.jsx CHANGED Viewed

@@ -45,9 +45,23 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
   const removeFilter = index => {
     let dashboardConfig = { ...config.dashboard }
+    let visualizations = { ...config.visualizations }
     dashboardConfig.sharedFilters.splice(index, 1)
+    Object.keys(visualizations).forEach(vizKey => {
+      if(visualizations[vizKey].visualizationType === 'filter-dropdowns' && visualizations[vizKey].hide && visualizations[vizKey].hide.length > 0){
+        if(visualizations[vizKey].hide.indexOf(index) !== -1){
+          visualizations[vizKey].hide.splice(visualizations[vizKey].hide.indexOf(index), 1)
+        }
+        visualizations[vizKey].hide.forEach((hideIndex, i) => {
+          if(hideIndex > index){
+            visualizations[vizKey].hide[i] = hideIndex - 1
+          }
+        })
+      }
+    })
     // Ensures URL filters refresh after filter removal
     if (dashboardConfig.datasets) {
       Object.keys(dashboardConfig.datasets).forEach(datasetKey => {
@@ -55,7 +69,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
       })
     }
-    updateConfig({ ...config, dashboard: dashboardConfig })
+    updateConfig({ ...config, visualizations, dashboard: dashboardConfig })
     overlay?.actions.toggleOverlay()
   }

package/src/components/Widget.jsx CHANGED Viewed

@@ -25,7 +25,8 @@ const iconHash = {
   'single-state': <Icon display='mapAl' base />,
   gear: <Icon display='gear' base />,
   tools: <Icon display='tools' base />,
-  'filtered-text': <Icon display='filtered-text' base />
+  'filtered-text': <Icon display='filtered-text' base />,
+  'filter-dropdowns': <Icon display='filter-dropdowns' base />
 }
 const labelHash = {
@@ -40,7 +41,8 @@ const labelHash = {
   'us-county': 'United States (State- or County-Level)',
   world: 'World',
   'single-state': 'U.S. State',
-  'filtered-text': 'filtered-text'
+  'filtered-text': 'Filtered Text',
+  'filter-dropdowns': 'Filter Dropdowns'
 }
 const Widget = ({ data = {}, addVisualization, type }) => {
@@ -175,9 +177,62 @@ const Widget = ({ data = {}, addVisualization, type }) => {
     )
   }
+  const filterHideModal = (configureData) => {
+    const onFilterHideChange = (e, index) => {
+      const visualizations = {...config.visualizations}
+      const currentVizKey = Object.keys(visualizations).find(vizKey => vizKey === configureData.uid)
+      if(currentVizKey){
+        const currentVizConfig = visualizations[currentVizKey]
+        if(currentVizConfig){
+          if(!currentVizConfig.hide) currentVizConfig.hide = []
+          if(!e.target.checked && currentVizConfig.hide.indexOf(index) === -1) {
+            visualizations[currentVizKey].hide.push(index)
+          } else if(e.target.checked && currentVizConfig.hide.indexOf(index) !== -1) {
+            visualizations[currentVizKey].hide.splice(currentVizConfig.hide.indexOf(index), 1)
+          }
+        }
+      }
+      updateConfig({...config, visualizations})
+    }
+    overlay?.actions.toggleOverlay()
+    return (
+      <Modal>
+        <Modal.Content>
+          <div>
+            Choose which filters to display:
+          </div>
+          {config.dashboard.sharedFilters && config.dashboard.sharedFilters.length > 0 && config.dashboard.sharedFilters.map((sharedFilter, index) => (
+            <label>
+              <input type="checkbox" defaultChecked={!configureData.hide || configureData.hide.indexOf(index) === -1} onChange={(e) => onFilterHideChange(e, index)} />
+              {sharedFilter.key}
+            </label>
+          ))}
+          {(!config.dashboard.sharedFilters || config.dashboard.sharedFilters.length === 0) && (
+            <>No dashboard filters added yet.</>
+          )}
+          <div>
+            <button style={{ margin: '1em' }} className='cove-button' onClick={() => overlay?.actions.toggleOverlay()}>
+              Continue
+            </button>
+          </div>
+        </Modal.Content>
+      </Modal>
+    )
+  }
   useEffect(() => {
     if (data.openModal) {
-      overlay?.actions.openOverlay(dataDesignerModal(dataRef.current))
+      overlay?.actions.openOverlay(type === 'filter-dropdowns' ? filterHideModal(dataRef.current) : dataDesignerModal(dataRef.current))
       visualizations[data.uid].openModal = false
@@ -192,7 +247,7 @@ const Widget = ({ data = {}, addVisualization, type }) => {
         <div className='widget__content'>
           {data.rowIdx !== undefined && (
             <div className='widget-menu'>
-              {((data.dataKey && data.dataDescription && data.formattedData) || type === 'markup-include') && (
+              {((data.dataKey && data.dataDescription && data.formattedData) || type === 'markup-include') && type !== 'filter-dropdowns' && (
                 <button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
                   {iconHash['tools']}
                 </button>
@@ -202,7 +257,7 @@ const Widget = ({ data = {}, addVisualization, type }) => {
                   title='Configure Data'
                   className='btn btn-configure'
                   onClick={() => {
-                    overlay?.actions.openOverlay(dataDesignerModal(data))
+                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? filterHideModal(data) : dataDesignerModal(data))
                   }}
                 >
                   {iconHash['gear']}
@@ -215,7 +270,7 @@ const Widget = ({ data = {}, addVisualization, type }) => {
           )}
           {iconHash[type]}
           <span>{labelHash[type]}</span>
-          {data.newViz && (
+          {data.newViz && type !== 'filter-dropdowns'  && (
             <span onClick={editWidget} className='config-needed'>
               Configuration needed
             </span>

package/src/scss/main.scss CHANGED Viewed

@@ -239,6 +239,11 @@
     width: 100%;
   }
+  .cove-dashboard-filters {
+    display: inline-flex;
+    margin: 1em;
+  }
   @include breakpointClass(md) {
     .dashboard-row {
       flex-direction: row;
@@ -271,13 +276,6 @@
     }
   }
-  @include breakpoint(md) {
-    .cove-dashboard-filters {
-      display: flex;
-      gap: 30px;
-    }
-  }
   .dashboard-filters-section {
     margin: 0 0 1em;
   }