@cdc/core 4.24.3 → 4.24.5

package/components/Filters.jsx

@@ -8,30 +8,57 @@ import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryString
 // Third Party
 import PropTypes from 'prop-types'
 
+export const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar']
+
+export const filterOrderOptions = [
+  {
+    label: 'Ascending Alphanumeric',
+    value: 'asc'
+  },
+  {
+    label: 'Descending Alphanumeric',
+    value: 'desc'
+  },
+  {
+    label: 'Custom',
+    value: 'cust'
+  }
+]
+
+export const handleSorting = singleFilter => {
+  const { order } = singleFilter
+
+  const sortAsc = (a, b) => {
+    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+  }
+
+  const sortDesc = (a, b) => {
+    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+  }
+
+  if (!order || order === '') {
+    singleFilter.order = 'asc'
+  }
+
+  if (order === 'desc') {
+    singleFilter.values = singleFilter.values.sort(sortDesc)
+  }
+
+  if (order === 'asc') {
+    singleFilter.values = singleFilter.values.sort(sortAsc)
+  }
+  return singleFilter
+}
+
+const hasStandardFilterBehavior = ['chart', 'table']
+
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
   // Desconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
-  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, filterData } = props
-  const { type, filterBehavior, filters } = visualizationConfig
-
-  const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar']
-
-  const filterOrderOptions = [
-    {
-      label: 'Ascending Alphanumeric',
-      value: 'asc'
-    },
-    {
-      label: 'Descending Alphanumeric',
-      value: 'desc'
-    },
-    {
-      label: 'Custom',
-      value: 'cust'
-    }
-  ]
+  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, filterData, getUniqueValues } = props
+  const { type, data } = visualizationConfig
 
   /**
    * Re-orders a filter based on two indices and updates the runtime filters array and filters state
@@ -51,7 +78,7 @@ export const useFilters = props => {
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
-    const filtersCopy = visualizationConfig.type === 'chart' ? [...visualizationConfig.filters] : [...filteredData]
+    const filtersCopy = hasStandardFilterBehavior.includes(visualizationConfig.type) ? [...visualizationConfig.filters] : [...filteredData]
     const filterItem = { ...filtersCopy[filterIndex] }
 
     // Overwrite filterItem.values since thats what we map through in the editor panel
@@ -99,7 +126,7 @@ export const useFilters = props => {
     }
 
     // If we're on a chart and not using the apply button
-    if (visualizationConfig.type === 'chart' && visualizationConfig.filterBehavior === 'Filter Change') {
+    if (hasStandardFilterBehavior.includes(visualizationConfig.type) && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(filterData(newFilters, excludedData))
     }
   }
@@ -127,7 +154,7 @@ export const useFilters = props => {
       setFilteredData(newFilters, excludedData)
     }
 
-    if (type === 'chart') {
+    if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
       setFilteredData(filterData(newFilters, excludedData))
     }
 
@@ -139,19 +166,33 @@ export const useFilters = props => {
     e.preventDefault()
 
     // reset to first item in values array.
-    newFilters.map(filter => {
-      filter = handleSorting(filter)
-      filter.active = filter.values[0]
-      return filter
+    let needsQueryUpdate = false
+    const queryParams = getQueryParams()
+    newFilters.forEach((filter, i) => {
+      if(!filter.values || filter.values.length === 0){
+        filter.values = getUniqueValues(data, filter.columnName)
+      }
+      newFilters[i].active = handleSorting(filter).values[0]
+
+
+      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
+        queryParams[filter.setByQueryParameter] = filter.active
+        needsQueryUpdate = true
+      }
     })
 
+    if (needsQueryUpdate) {
+      updateQueryString(queryParams)
+    }
+
+    setConfig({ ...visualizationConfig, filters: newFilters })
+
     if (type === 'map') {
       setFilteredData(newFilters, excludedData)
     } else {
       setFilteredData(filterData(newFilters, excludedData))
     }
 
-    setConfig({ ...visualizationConfig, filters: newFilters })
   }
 
   const filterConstants = {
@@ -161,31 +202,6 @@ export const useFilters = props => {
     applyText: 'Select the apply button to update the visualization information.'
   }
 
-  const handleSorting = singleFilter => {
-    const { order } = singleFilter
-
-    const sortAsc = (a, b) => {
-      return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-    }
-
-    const sortDesc = (a, b) => {
-      return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-    }
-
-    if (!order || order === '') {
-      singleFilter.order = 'asc'
-    }
-
-    if (order === 'desc') {
-      singleFilter.values = singleFilter.values.sort(sortDesc)
-    }
-
-    if (order === 'asc') {
-      singleFilter.values = singleFilter.values.sort(sortAsc)
-    }
-    return singleFilter
-  }
-
   // prettier-ignore
   return {
     handleApplyButton,
@@ -202,8 +218,8 @@ export const useFilters = props => {
 }
 
 const Filters = props => {
-  const { config: visualizationConfig, filteredData, dimensions } = props
-  const { filters, type, general, theme, filterBehavior } = visualizationConfig
+  const { config: visualizationConfig, filteredData, dimensions, getUniqueValues } = props
+  const { filters, type, general, theme, filterBehavior, data } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState('')
   const id = useId()
@@ -239,16 +255,17 @@ const Filters = props => {
   const Filters = props => props.children
 
   const filterSectionClassList = ['filters-section', type === 'map' ? general.headerColor : visualizationConfig?.visualizationType === 'Spark Line' ? null : theme]
-
   // Exterior Section Wrapper
   Filters.Section = props => {
     return (
-      <section className={filterSectionClassList.join(' ')}>
-        <p className='filters-section__intro-text'>
-          {filterConstants.introText} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
-        </p>
-        <div className='filters-section__wrapper'>{props.children}</div>
-      </section>
+      visualizationConfig?.filters && (
+        <section className={filterSectionClassList.join(' ')}>
+          <p className='filters-section__intro-text'>
+            {filters?.some(f => f.active) ? filterConstants.introText : ''} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
+          </p>
+          <div className='filters-section__wrapper'>{props.children}</div>
+        </section>
+      )
     )
   }
 

package/components/Layout/components/Responsive.tsx

@@ -0,0 +1,184 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import '../styles/editor-utils.scss'
+import '../styles/editor.scss'
+
+import Icon from '../../ui/Icon'
+
+const breakpoints = [
+  '360', // xxs (mobile) 0 - 360
+  '480', // xs
+  '768', // sm
+  '960', // md
+  '1170', // lg
+  '1280' // xl
+]
+
+const os = navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
+
+const Responsive = ({ children, isEditor }) => {
+  const [displayPanel, setDisplayPanel] = useState(false)
+  const [displayGrid, setDisplayGrid] = useState(false)
+  const [viewportPreview, setViewportPreview] = useState(null)
+  const [rotateAnimation, setRotateAnimation] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [previewDimensions, setPreviewDimensions] = useState<{ width: number; height: number }>(null)
+
+  const resetIcon = useRef(null)
+  const editorPanelRef = useRef(null)
+  const componentContainerRef = useRef(null)
+
+  const viewportPreviewController = useCallback(
+    breakpoint => {
+      return setViewportPreview(prevState => (prevState !== breakpoint ? breakpoint : null))
+    },
+    [viewportPreview]
+  )
+
+  const onKeypress = key => {
+    if (key.code === 'KeyL' && key.ctrlKey) setDisplayPanel(display => !display)
+    const viewportCommandKey = os === 'MacOS' ? key.metaKey : key.altKey
+    if (viewportCommandKey) {
+      let keyIndex = key.key
+
+      // Validates that the hotkey pressed is a number, and that
+      // the number is within the range of the provided breakpoint list range.
+      if (!isNaN(keyIndex)) {
+        if (keyIndex <= breakpoints.length) {
+          key.preventDefault()
+          viewportPreviewController(breakpoints[keyIndex - 1])
+        }
+      }
+    }
+
+    if (!viewportCommandKey) {
+      if (key.code === 'KeyG') setDisplayGrid(display => !display)
+      if (key.code === 'KeyR') resetPreview()
+    }
+  }
+
+  // Set and clean up the event listener for the hotkeys
+  useEffect(() => {
+    document.addEventListener('keydown', onKeypress)
+    return () => document.removeEventListener('keydown', onKeypress)
+  }, [])
+
+  //Reset Viewport Preview
+  const resetPreview = useCallback(() => {
+    if (!rotateAnimation && resetIcon.current) {
+      setViewportPreview(null)
+      setRotateAnimation(true)
+      setDisplayGrid(false)
+      resetIcon.current.style.transition = 'transform 800ms cubic-bezier(0.16, 1, 0.3, 1)'
+      resetIcon.current.style.transform = 'rotate(-360deg)'
+
+      const timeoutShow = setTimeout(() => {
+        setRotateAnimation(false)
+        resetIcon.current.style.transition = null
+        resetIcon.current.style.transform = 'rotate(0deg)'
+        resetIcon.current.style.transform = null
+      }, 400)
+
+      return () => clearTimeout(timeoutShow)
+    }
+  }, [rotateAnimation])
+
+  // Toggle the grid display with the viewport preview
+  useEffect(() => {
+    return viewportPreview ? setDisplayGrid(true) : setDisplayGrid(false)
+  }, [viewportPreview])
+
+  // Observe and set editor component widths
+  useEffect(() => {
+    if (!componentContainerRef.current) return
+
+    let resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        let { width, height } = entry.contentRect
+        setPreviewDimensions({ width, height })
+      }
+    })
+
+    resizeObserver.observe(componentContainerRef.current)
+
+    return () => {
+      if (!resizeObserver) return
+      resizeObserver.disconnect()
+      resizeObserver = null
+    }
+  })
+
+  const onBackClick = () => setDisplayPanel(!displayPanel)
+
+  if (!isEditor || !displayPanel) return children
+
+  return (
+    <div className='cove-editor__content' data-grid={displayGrid || null}>
+      <div className='cove-editor__content-wrap--x' style={viewportPreview ? { maxWidth: viewportPreview + 'px', minWidth: 'unset' } : null}>
+        <div className='cove-editor__content-wrap--y'>
+          <div className='cove-editor-utils__breakpoints--px'>
+            {displayGrid && displayPanel && (
+              <>
+                {Math.round(previewDimensions.width)}
+                <span className='mx-1' style={{ fontSize: '0.675rem' }}>
+                  ✕
+                </span>
+                {Math.round(previewDimensions.height)}
+              </>
+            )}
+          </div>
+          <div className='cove-editor__grid-caret--top' ref={componentContainerRef}>
+            <div className='cove-editor__grid-caret--bottom'>{children}</div>
+          </div>
+        </div>
+      </div>
+      <div className='cove-editor-utils__hotkeys'>
+        <div className='cove-editor-utils__hotkeys--left'>
+          <p className={displayPanel ? 'hotkey--active' : null}>Editor</p>
+          <p className={displayGrid ? 'hotkey--active' : null}>Grid</p>
+          <p className={rotateAnimation ? 'hotkey--active' : null}>Reset</p>
+          <p className={viewportPreview ? 'hotkey--active' : null}>View</p>
+        </div>
+        <div className='cove-editor-utils__hotkeys--right'>
+          <p className={displayPanel ? 'hotkey--active' : null}>esc</p>
+          <p className={displayGrid ? 'hotkey--active' : null}>G</p>
+          <p className={rotateAnimation ? 'hotkey--active' : null}>R</p>
+          <p className={viewportPreview ? 'hotkey--active' : null}>
+            {os === 'MacOS' ? <Icon style={{ marginRight: '0.25rem' }} display='command' size={12} /> : 'Alt'} + {viewportPreview ? breakpoints.indexOf(viewportPreview) + 1 : `[1 - ${breakpoints.length}]`}
+          </p>
+        </div>
+      </div>
+
+      <div className='cove-editor-utils__breakpoints'>
+        <ul className={`cove-editor-utils__breakpoints-list${viewportPreview ? ' has-active' : ''}`}>
+          <button
+            className='cove-editor-utils__breakpoints-item'
+            onClick={() => {
+              setDisplayGrid(display => !display)
+            }}
+          >
+            <div className='cove-editor-utils__breakpoints-grid'>
+              <Icon display='grid' />
+            </div>
+          </button>
+          {breakpoints.map((breakpoint, index) => (
+            <button className={`cove-editor-utils__breakpoints-item${viewportPreview === breakpoint ? ' active' : ''}`} onClick={() => viewportPreviewController(breakpoint)} key={index}>
+              {breakpoint}px
+            </button>
+          ))}
+          <button
+            className='cove-editor-utils__breakpoints-item'
+            onClick={() => {
+              resetPreview()
+            }}
+          >
+            <div className='cove-editor-utils__breakpoints-reset' ref={resetIcon}>
+              <Icon display='rotateLeft' />
+            </div>
+          </button>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default Responsive

package/components/Layout/components/Sidebar/components/Sidebar.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import './sidebar.styles.scss'
+
+type SidebarProps = {
+  // whether or not the viz is within a dashboard
+  isDashboard: boolean
+  // show/hide the sidebar
+  displayPanel: boolean
+  // sidebarTitle
+  title: string
+  // inner content
+  children: React.ReactNode
+  // on arrow toggle
+  onBackClick: () => void
+}
+
+const Sidebar: React.FC<SidebarProps> = props => {
+  const { displayPanel = false, isDashboard = false, title = 'Configure Visualization', children, onBackClick } = props
+
+  const getSectionClasses = () => {
+    const sectionClasses = ['editor-panel', 'cove', 'sidebar']
+    if (!displayPanel) sectionClasses.push('hidden')
+    if (isDashboard) sectionClasses.push('dashboard')
+    return sectionClasses
+  }
+
+  const getButtonClasses = () => {
+    const buttonClasses = []
+    if (displayPanel) buttonClasses.push('editor-panel__toggle')
+    if (!displayPanel) buttonClasses.push('collapsed', 'editor-panel__toggle')
+    return buttonClasses
+  }
+
+  return (
+    <>
+      <button className={getButtonClasses().join(' ')} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
+      <section className={getSectionClasses().join(' ')}>
+        <h2 className='editor-panel__title'>{title}</h2>
+        <section className='form-container' data-html2canvas-ignore>
+          {children}
+        </section>
+      </section>
+    </>
+  )
+}
+
+export default Sidebar