@cdc/dashboard 4.23.6 → 4.23.7

package/examples/default-filter-control.json

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

package/examples/shared-filters.json

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.23.6",
+  "version": "4.23.7",
   "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.7",
+    "@cdc/core": "^4.23.7",
+    "@cdc/data-bite": "^4.23.7",
+    "@cdc/filtered-text": "^4.23.7",
+    "@cdc/map": "^4.23.7",
+    "@cdc/markup-include": "^4.23.7",
+    "@cdc/waffle-chart": "^4.23.7",
     "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": "6c7ac5215dcf3bc1cc7d199089c8c2e75f53a93e"
 }

package/src/CdcDashboard.jsx

@@ -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
@@ -628,11 +640,8 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
           {/* 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 */}
@@ -748,6 +757,9 @@ 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

@@ -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

@@ -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

@@ -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;
   }

package/LICENSE

@@ -1,201 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.