@cdc/dashboard 4.25.3 → 4.25.5-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.25.3",
+  "version": "4.25.5-1",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -27,27 +27,22 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.25.3",
-    "@cdc/core": "^4.25.3",
-    "@cdc/data-bite": "^4.25.3",
-    "@cdc/filtered-text": "^4.25.3",
-    "@cdc/map": "^4.25.3",
-    "@cdc/markup-include": "^4.25.3",
-    "@cdc/waffle-chart": "^4.25.3",
-    "html-react-parser": "^3.0.8",
+    "@cdc/chart": "^4.25.5-1",
+    "@cdc/core": "^4.25.5-1",
+    "@cdc/data-bite": "^4.25.5-1",
+    "@cdc/filtered-text": "^4.25.5-1",
+    "@cdc/map": "^4.25.5-1",
+    "@cdc/markup-include": "^4.25.5-1",
+    "@cdc/waffle-chart": "^4.25.5-1",
     "js-base64": "^2.5.2",
-    "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-table": "^7.5.0",
-    "react-tooltip": "5.8.2-beta.3",
-    "use-debounce": "^6.0.1",
-    "whatwg-fetch": "^3.6.2"
+    "use-debounce": "^6.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "b09566f5a7d57c8d0109e5f407257729d6b36846"
+  "gitHead": "1d0a6e716bc113e6bea3636fcae90ebf2d19bb5c"
 }

package/src/CdcDashboardComponent.tsx

@@ -21,7 +21,7 @@ import getViewport from '@cdc/core/helpers/getViewport'
 
 import CdcChart from '@cdc/chart/src/CdcChartComponent'
 import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
-import CdcMap from '@cdc/map/src/CdcMap'
+import CdcMap from '@cdc/map/src/CdcMapComponent'
 import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
 import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
 import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
@@ -66,6 +66,7 @@ import { loadAPIFiltersFactory } from './helpers/loadAPIFilters'
 import Loader from '@cdc/core/components/Loader'
 import Alert from '@cdc/core/components/Alert'
 import { shouldLoadAllFilters } from './helpers/shouldLoadAllFilters'
+import { subscribe, unsubscribe } from '@cdc/core/helpers/events'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -120,12 +121,16 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     for (let i = 0; i < datasetKeys.length; i++) {
       const datasetKey = datasetKeys[i]
       const dataset = config.datasets[datasetKey]
-
-      if (dataset.dataUrl && filters) {
+      const windowQueryParams = Object.fromEntries(new URLSearchParams(window.location.search))
+      const loadQueryParam = windowQueryParams[dataset.loadQueryParam || '']
+      if (dataset.dataUrl && (filters || loadQueryParam)) {
         const dataUrl = new URL(dataset.runtimeDataUrl || dataset.dataUrl, window.location.origin)
         const currentQSParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
         const updatedQSParams = {}
-        filters.forEach(filter => {
+        if (loadQueryParam) {
+          updatedQSParams[dataset.loadQueryParam] = loadQueryParam
+        }
+        filters?.forEach(filter => {
           if (
             filter.type === 'urlfilter' &&
             reloadURLHelpers.filterUsedByDataUrl(filter, datasetKey, config.visualizations, config.rows)
@@ -143,7 +148,6 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             }
 
             if (!!filter.setByQueryParameter) {
-              const windowQueryParams = Object.fromEntries(new URLSearchParams(window.location.search))
               const filterValue = windowQueryParams[filter.setByQueryParameter]
               const queryParam = filter.apiFilter?.valueSelector || filter.setByQueryParameter
               if (filterValue) {
@@ -271,6 +275,29 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     dispatch({ type: 'SET_SHARED_FILTERS', payload: newConfig.dashboard.sharedFilters })
   }
 
+  const setEventData = ({ detail }) => {
+    try {
+      const newDatasets = Object.keys(detail).reduce((acc, key) => {
+        if (state.data[key] !== undefined) {
+          acc[key] = detail[key]
+        }
+        return acc
+      }, {})
+      const filteredData = { ...state.filteredData, ...newDatasets }
+      dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
+      dispatch({ type: 'SET_DATA', payload: { ...state.data, ...newDatasets } })
+    } catch (e) {
+      console.error('Error setting event data: ', e)
+    }
+  }
+
+  useEffect(() => {
+    subscribe('cove_set_data', setEventData)
+    return () => {
+      unsubscribe('cove_set_data', setEventData)
+    }
+  }, [])
+
   useEffect(() => {
     const { config } = state
     const loadAllFilters = shouldLoadAllFilters(config, isEditor && !isPreview)

package/src/_stories/Dashboard.stories.tsx

@@ -341,6 +341,8 @@ export const RegressionAPIFiltersMap: Story = {
     await sleep(1000)
     const topicsFilter = canvas.getByLabelText('Category', { selector: 'select' })
     await user.selectOptions(topicsFilter, ['topicId'])
+    await sleep(1000)
+
     const indicatorsFilter = canvas.getByLabelText('Indicator', { selector: 'select' })
     await user.selectOptions(indicatorsFilter, ['indicatorID'])
     const yearsFilter = canvas.getByLabelText('Year', { selector: 'select' })

package/src/_stories/_mock/api-filter-map.json

@@ -113,6 +113,45 @@
         "hideGeoColumnInTooltip": false,
         "hidePrimaryColumnInTooltip": false
       },
+      "tooltips": {
+        "appearanceType": "hover",
+        "linkLabel": "Learn More",
+        "capitalizeLabels": true,
+        "opacity": 90
+      },
+      "map": {
+        "layers": [],
+        "patterns": []
+      },
+      "visual": {
+        "minBubbleSize": 1,
+        "maxBubbleSize": 20,
+        "extraBubbleBorder": false,
+        "cityStyle": "circle",
+        "cityStyleLabel": "",
+        "showBubbleZeros": false,
+        "additionalCityStyles": [],
+        "geoCodeCircleSize": 8
+      },
+      "hexMap": {
+        "type": "",
+        "shapeGroups": [
+          {
+            "legendTitle": "",
+            "legendDescription": "",
+            "items": [
+              {
+                "key": "",
+                "shape": "Arrow Up",
+                "column": "",
+                "operator": "=",
+                "value": ""
+              }
+            ]
+          }
+        ]
+      },
+      "annotations": [],
       "color": "greenBlue",
       "columns": {
         "geo": {
@@ -170,7 +209,8 @@
         "position": "side",
         "title": "Crude Prevalence",
         "separateZero": true
-      }
+      },
+      "table": {}
     }
   },
   "type": "dashboard",
@@ -179,6 +219,7 @@
       "dataUrl": "http://test.gov/api/POC/TableData?DataValueTypeId=CRDMEDN"
     }
   },
+  "table": {},
   "filterBehavior": "Apply Button",
   "runtime": {},
   "uuid": 1684783370106

package/src/components/CollapsibleVisualizationRow.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import Icon from '../../../core/components/ui/Icon'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
 type CollapsableVizRow = {
   allExpanded: boolean
@@ -17,7 +17,7 @@ const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
   children
 }) => {
   const [isExpanded, setIsExpanded] = useState(allExpanded)
-  const titleFontSize = ['xs', 'xxs'].includes(currentViewport) ? '13px' : `${appFontSize}px`
+  const titleFontSize = ['xs', 'xxs'].includes(currentViewport) ? '13px' : `${APP_FONT_SIZE}px`
 
   useEffect(() => {
     setIsExpanded(allExpanded)

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -8,7 +8,7 @@ import NestedDropdown from '@cdc/core/components/NestedDropdown'
 import { MouseEventHandler } from 'react'
 import Loader from '@cdc/core/components/Loader'
 import _ from 'lodash'
-import { DROPDOWN_STYLES } from '@cdc/core/components/Filters/Filters'
+import { DROPDOWN_STYLES } from '@cdc/core/components/Filters/components/Dropdown'
 
 type DashboardFilterProps = {
   show: number[]

package/src/components/DashboardFilters/DashboardFiltersEditor/components/APIModal.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react'
+import { SharedFilter } from '../../../../types/SharedFilter'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+
+type APIModalProps = {
+  filter: SharedFilter
+  isNestedDropdown: boolean
+  updateAPIFilter: Function
+}
+
+const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPIFilter }) => {
+  const [APIEndpoint, setAPIEndpoint] = useState(filter.apiFilter?.apiEndpoint || '')
+  const [APIValueSelector, setAPIValueSelector] = useState(filter.apiFilter?.valueSelector || '')
+  const [APITextSelector, setAPITextSelector] = useState(filter.apiFilter?.textSelector || '')
+  const [APISubGroupValueSelector, setAPISubGroupValueSelector] = useState(filter.apiFilter?.subgroupValueSelector)
+  const [APISubGroupTextSelector, setAPISubGroupTextSelector] = useState(filter.apiFilter?.subgroupTextSelector)
+  return (
+    <fieldset className='mb-1 px-3 cdc-open-viz-module'>
+      <label className='d-block'>
+        <span>API Endpoint: </span>
+        <textarea
+          value={APIEndpoint}
+          rows={4}
+          onChange={e => setAPIEndpoint(e.target.value)}
+          className='w-100'
+          style={{ minHeight: '1.5rem', maxWidth: '90%' }}
+        />
+        {isNestedDropdown && (
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Your API Endpoint should return both value selector values.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        )}
+      </label>
+      <div className='d-flex'>
+        <div className={`w-50${isNestedDropdown ? ' border border-dark p-1 m-1' : ''}`}>
+          <label>
+            <span>Value Selector: </span>
+            <input type='text' value={APIValueSelector || ''} onChange={e => setAPIValueSelector(e.target.value)} />
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Value to use in the html option element</p>
+              </Tooltip.Content>
+            </Tooltip>
+            <p>{` * Required`}</p>
+          </label>
+          <label>
+            <span>Display Text Selector: </span>
+            <input type='text' value={APITextSelector || ''} onChange={e => setAPITextSelector(e.target.value)} />
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Text to use in the html option element. If none is applied value selector will be used.</p>
+              </Tooltip.Content>
+            </Tooltip>
+            <p>{` * Optional`}</p>
+          </label>
+        </div>
+
+        {isNestedDropdown && (
+          <div className={`w-50${isNestedDropdown ? ' border border-dark p-1 m-1' : ''}`}>
+            <label>
+              <span>Subgroup Value Selector: </span>
+              <input
+                type='text'
+                value={APISubGroupValueSelector || ''}
+                onChange={e => setAPISubGroupValueSelector(e.target.value)}
+              />
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Value to use in the html option element</p>
+                </Tooltip.Content>
+              </Tooltip>
+              <p>{` * Required`}</p>
+            </label>
+            <label>
+              <span>Subgroup Display Text Selector: </span>
+              <input
+                type='text'
+                value={APISubGroupTextSelector || ''}
+                onChange={e => setAPISubGroupTextSelector(e.target.value)}
+              />
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Text to use in the html option element. If none is applied value selector will be used.</p>
+                </Tooltip.Content>
+              </Tooltip>
+              <p>{` * Optional`}</p>
+            </label>
+          </div>
+        )}
+      </div>
+      <div className='d-flex justify-content-end mt-2'>
+        <button
+          className='btn btn-primary mt-2'
+          onClick={() =>
+            updateAPIFilter(
+              APIEndpoint,
+              APIValueSelector,
+              APITextSelector,
+              APISubGroupValueSelector,
+              APISubGroupTextSelector
+            )
+          }
+        >
+          Save
+        </button>
+      </div>
+    </fieldset>
+  )
+}
+
+export default APIModal