@cdc/map 4.23.11 → 4.24.1

package/src/scss/main.scss

@@ -11,6 +11,17 @@
   .loading > div.la-ball-beat {
     margin-top: 20%;
   }
+
+  .visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   @include breakpointClass(md) {
     .map-container.modal-background::before {
       border-bottom: $lightGray 1px solid;
@@ -22,7 +33,6 @@
 
 .cdc-map-inner-container {
   @import './map';
-  @import './sidebar';
   @import './datatable';
   flex-grow: 1;
   text-rendering: geometricPrecision;

package/src/types/MapConfig.ts

@@ -0,0 +1,149 @@
+import { ComponentThemes } from '@cdc/core/types/ComponentThemes'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
+
+export type MapVisualSettings = {
+  /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
+  minBubbleSize: number
+  /** maxBubbleSize - Maximum Circle Size when the map has a type of bubble */
+  maxBubbleSize: number
+  /** extraBubbleBorder - Bubble Maps > adds a white circle around the bubble to show contrast on other bubbles */
+  extraBubbleBorder: boolean
+  /** cityStyle - visual indicator of cities on state maps */
+  cityStyle: 'circle' | 'pin'
+  /** geoCodeCircleSize - controls the size of the city style option (circle or pin) */
+  geoCodeCircleSize: number
+  /** showBubbleZeros - shows circles on maps when the data is provided even if its a zero value */
+  showBubbleZeros: boolean
+}
+
+type PatternSelection = {
+  // dropdown selection for getting the column used on a pattern
+  dataKey: string
+  // text field input to match values found in the column
+  dataValue: string
+  // style of pattern to use
+  pattern: 'lines' | 'circles' | 'waves'
+  // optional legend update
+  label: string
+}
+
+export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label' | 'tooltip' | 'dataTable'>
+export type LatitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
+export type LongitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
+export type NavigateColumnProperties = Pick<EditorColumnProperties, 'name'>
+export type PrimaryColumnProperties = Pick<EditorColumnProperties, 'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip'>
+
+export type LegendShapeItem = {
+  column: string
+  key: string
+  operator: string
+  shape: string
+  value: string
+}
+
+export type LegendGrouping = {
+  legendTitle: string
+  legendDescription: string
+  items: LegendShapeItem[]
+}
+
+export type HexMapSettings = {
+  type: 'shapes' | 'standard'
+  shapeGroups: LegendGrouping[]
+}
+
+export type Coordinate = [number, number]
+
+export type MapConfig = Visualization & {
+  color: string // map color palette
+  customColors: string[] // custom color palette
+  columns: {
+    geo: GeoColumnProperties
+    primary: PrimaryColumnProperties
+    navigate: NavigateColumnProperties
+    latitude: LatitudeColumnProperties
+    longitude: LongitudeColumnProperties
+    categorical: { name }
+  }
+  dataUrl: string
+  runtimeDataUrl: string
+  filters: any[]
+  general: {
+    allowMapZoom: boolean
+    convertFipsCodes: boolean
+    displayAsHex: boolean
+    displayStateLabels: boolean
+    fullBorder: boolean
+    geoBorderColor: string
+    geoLabelOverride: string
+    geoType: 'us' | 'us-county' | 'world'
+    hasRegions: boolean
+    headerColor: ComponentThemes
+    hideGeoColumnInTooltip: boolean
+    hidePrimaryColumnInTooltip: boolean
+    language: string
+    palette: {
+      isReversed: boolean
+    }
+    showDownloadButton: boolean
+    showDownloadMediaButton: boolean
+    showSidebar: boolean
+    showTitle: boolean
+    statePicked: {
+      fipsCode: string
+      stateName: string
+    }
+    territoriesAlwaysShow: boolean
+    territoriesLabel: string
+    title: string
+    type: 'data' | 'navigation' | 'us-geocode' | 'world-geocode' | 'bubble'
+  }
+  legend: {
+    additionalCategories
+    categoryValuesOrder
+    description
+    descriptions: {}
+    specialClasses: { key; label; value }[]
+    unified: boolean
+    separateZero: boolean
+    singleColumn: boolean
+    singleRow: boolean
+    verticalSorted: boolean
+    showSpecialClassesLast: boolean
+    dynamicDescription: boolean
+    type: string
+    numberOfItems: number
+    position: string
+    title: string
+  }
+  table: {
+    label: string
+    expanded: boolean
+    limitHeight: boolean
+    height: string
+    caption: string
+    showDownloadUrl: boolean
+    showFullGeoNameInCSV: boolean
+    forceDisplay: boolean
+    download: boolean
+    indexLabel: string
+  }
+  tooltips: {
+    appearanceType: 'hover' | 'click'
+    linkLabel: string
+    capitalizeLabels: true
+    opacity: number
+  }
+  runtime: {
+    editorErrorMessage: string[]
+  }
+  mapPosition: { coordinates: Coordinate; zoom: number }
+  map: {
+    layers: { url; namespace; fill; fillOpacity; stroke; strokeWidth; tooltip }[]
+    patterns: PatternSelection[]
+  }
+  hexMap: HexMapSettings
+  filterBehavior: string
+  visual: MapVisualSettings
+}

package/src/types/MapContext.ts

@@ -0,0 +1,45 @@
+import { type MapConfig } from './MapConfig'
+
+export type MapContext = {
+  applyLegendToRow
+  applyTooltipsToGeo
+  closeModal
+  columnsInData
+  currentViewport
+  data
+  displayDataAsText
+  displayGeoName
+  filteredCountryCode
+  generateColorsArray
+  generateRuntimeData
+  geoClickHandler
+  handleCircleClick: Function
+  handleMapAriaLabels
+  hasZoom
+  innerContainerRef
+  isDashboard
+  isDebug
+  isEditor
+  loadConfig
+  navigationHandler
+  position
+  resetLegendToggles
+  runtimeFilters
+  runtimeLegend
+  setAccessibleStatus
+  setFilteredCountryCode
+  setParentConfig
+  setPosition
+  setRuntimeData
+  setRuntimeFilters
+  setRuntimeLegend
+  setSharedFilterValue
+  setState
+  state: MapConfig
+  supportedCities
+  supportedCounties
+  supportedCountries
+  supportedTerritories
+  titleCase
+  viewport
+}

package/src/types/runtimeLegend.ts

@@ -0,0 +1 @@
+export type RuntimeLegend = { disabled; bin; color; special }[]

package/src/components/Sidebar.tsx

@@ -1,142 +0,0 @@
-//TODO: Move legends to core
-import { useContext } from 'react'
-import parse from 'html-react-parser'
-
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendCircle from '@cdc/core/components/LegendCircle'
-import HexSetting from './HexShapeSettings'
-import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
-import ConfigContext from '../context'
-
-const Sidebar = () => {
-  // prettier-ignore
-  const {
-    displayDataAsText,
-    resetLegendToggles,
-    runtimeFilters,
-    runtimeLegend,
-    setAccessibleStatus,
-    setRuntimeLegend,
-    state,
-    viewport,
-  } = useContext(ConfigContext)
-
-  const { legend } = state
-
-  // Toggles if a legend is active and being applied to the map and data table.
-  const toggleLegendActive = (i, legendLabel) => {
-    const newValue = !runtimeLegend[i].disabled
-
-    runtimeLegend[i].disabled = newValue // Toggle!
-
-    let newLegend = [...runtimeLegend]
-
-    newLegend[i].disabled = newValue
-
-    const disabledAmt = runtimeLegend.disabledAmt ?? 0
-
-    newLegend['disabledAmt'] = newValue ? disabledAmt + 1 : disabledAmt - 1
-
-    setRuntimeLegend(newLegend)
-
-    setAccessibleStatus(`Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`)
-  }
-
-  const legendList = runtimeLegend.map((entry, idx) => {
-    const entryMax = displayDataAsText(entry.max, 'primary')
-
-    const entryMin = displayDataAsText(entry.min, 'primary')
-
-    let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
-
-    // If interval, add some formatting
-    if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
-      formattedText = `${entryMin} - < ${entryMax}`
-    }
-
-    const { disabled } = entry
-
-    if (legend.type === 'category') {
-      formattedText = displayDataAsText(entry.value, 'primary')
-    }
-
-    if (entry.max === 0 && entry.min === 0) {
-      formattedText = '0'
-    }
-
-    let legendLabel = formattedText
-
-    if (entry.hasOwnProperty('special')) {
-      legendLabel = entry.label || entry.value
-    }
-
-    const handleListItemClass = () => {
-      let classes = ['legend-container__li']
-      if (disabled) classes.push('legend-container__li--disabled')
-      if (entry.hasOwnProperty('special')) classes.push('legend-container__li--special-class')
-      return classes
-    }
-
-    return (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-      <li
-        className={handleListItemClass().join(' ')}
-        key={idx}
-        title={`Legend item ${legendLabel} - Click to disable`}
-        onClick={() => {
-          toggleLegendActive(idx, legendLabel)
-        }}
-      >
-        <LegendCircle fill={entry.color} /> <span className='label'>{legendLabel}</span>
-      </li>
-    )
-  })
-
-  const { legendClasses } = useDataVizClasses(state, viewport)
-
-  const handleReset = e => {
-    e.preventDefault()
-    resetLegendToggles()
-    setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
-  }
-
-  return (
-    <ErrorBoundary component='Sidebar'>
-      <div className='legends'>
-        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend'>
-          <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
-            {runtimeLegend.disabledAmt > 0 && (
-              <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
-                Clear
-              </button>
-            )}
-            {legend.title && <span className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</span>}
-            {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>}
-            {legend.dynamicDescription === true &&
-              runtimeFilters.map((filter, idx) => {
-                const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
-
-                // Do we have a custom description for this?
-                const desc = legend.descriptions[lookupStr] || ''
-
-                if (desc.length > 0) {
-                  return (
-                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
-                      {desc}
-                    </p>
-                  )
-                }
-                return true
-              })}
-            <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
-              {legendList}
-            </ul>
-          </section>
-        </aside>
-        {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && <HexSetting.Legend state={state} runtimeLegend={runtimeLegend} viewport={viewport} />}
-      </div>
-    </ErrorBoundary>
-  )
-}
-
-export default Sidebar

package/src/data/abbreviations.js

@@ -1,57 +0,0 @@
-export const abbrs = {
-	Alabama: 'AL',
-	Alaska: 'AK',
-	Arizona: 'AZ',
-	Arkansas: 'AR',
-	California: 'CA',
-	Colorado: 'CO',
-	Connecticut: 'CT',
-	Delaware: 'DE',
-	Florida: 'FL',
-	Georgia: 'GA',
-	Hawaii: 'HI',
-	Idaho: 'ID',
-	Illinois: 'IL',
-	Indiana: 'IN',
-	Iowa: 'IA',
-	Kansas: 'KS',
-	Kentucky: 'KY',
-	Louisiana: 'LA',
-	Maine: 'ME',
-	Maryland: 'MD',
-	Massachusetts: 'MA',
-	Michigan: 'MI',
-	Minnesota: 'MN',
-	Mississippi: 'MS',
-	Missouri: 'MO',
-	Montana: 'MT',
-	Nebraska: 'NE',
-	Nevada: 'NV',
-	'New Hampshire': 'NH',
-	'New Jersey': 'NJ',
-	'New Mexico': 'NM',
-	'New York': 'NY',
-	'North Carolina': 'NC',
-	'North Dakota': 'ND',
-	Ohio: 'OH',
-	Oklahoma: 'OK',
-	Oregon: 'OR',
-	Pennsylvania: 'PA',
-	'Rhode Island': 'RI',
-	'South Carolina': 'SC',
-	'South Dakota': 'SD',
-	Tennessee: 'TN',
-	Texas: 'TX',
-	Utah: 'UT',
-	Vermont: 'VT',
-	Virginia: 'VA',
-	Washington: 'WA',
-	'West Virginia': 'WV',
-	Wisconsin: 'WI',
-	Wyoming: 'WY',
-	'District of Columbia': 'DC',
-	Guam: 'GU',
-	'Virgin Islands': 'VI',
-	'Puerto Rico': 'PR',
-	'American Samoa': 'AS',
-};

package/src/data/feature-test.json

@@ -1,73 +0,0 @@
-{
-  "type": "Topology",
-  "arcs": [
-    [
-      [
-        33,
-        100
-      ],
-      [
-        -6,
-        9
-      ],
-      [
-        30,
-        66
-      ],
-      [
-        102,
-        -42
-      ],
-      [
-        -118,
-        -133
-      ],
-      [
-        11,
-        39
-      ],
-      [
-        -52,
-        39
-      ],
-      [
-        33,
-        22
-      ]
-    ]
-  ],
-  "transform": {
-    "scale": [
-      0.04505085471698112,
-      0.04496205714285712
-    ],
-    "translate": [
-      -116.2012448,
-      33.3764121
-    ]
-  },
-  "objects": {
-    "Untitled layer": {
-      "type": "GeometryCollection",
-      "geometries": [
-        {
-          "arcs": [
-            [
-              0
-            ]
-          ],
-          "type": "Polygon",
-          "properties": {
-            "name": "new",
-            "styleUrl": "#poly-000000-1200-77-nodesc",
-            "fill-opacity": 0.30196078431372547,
-            "fill": "#000000",
-            "stroke-opacity": 1,
-            "stroke": "#000000",
-            "stroke-width": 1.2
-          }
-        }
-      ]
-    }
-  }
-}