@cdc/map 4.24.7 → 4.24.9

package/src/_stories/CdcMap.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import CdcMap from '../CdcMap'
 import EqualNumberOptInExample from './_mock/DEV-7286.json'
+import SingleStateWithFilters from './_mock/DEV-8942.json'
 
 const meta: Meta<typeof CdcMap> = {
   title: 'Components/Templates/Map',
@@ -91,4 +92,10 @@ export const Geocode: Story = {
   }
 }
 
+export const Single_State_With_Filters: Story = {
+  args: {
+    config: SingleStateWithFilters
+  }
+}
+
 export default meta

package/src/_stories/_mock/DEV-8942.json

@@ -0,0 +1,270 @@
+{
+  "annotations": [],
+  "general": {
+    "title": "Default County Map",
+    "subtext": "",
+    "territoriesLabel": "Territories",
+    "type": "map",
+    "geoType": "single-state",
+    "headerColor": "theme-blue",
+    "showSidebar": true,
+    "showTitle": true,
+    "geoBorderColor": "darkGray",
+    "showDownloadButton": true,
+    "expandDataTable": false,
+    "statePicked": {
+      "fipsCode": "06",
+      "stateName": "California"
+    },
+    "annotationDropdownText": "Annotations",
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesAlwaysShow": false,
+    "language": "en",
+    "geoLabelOverride": "Location",
+    "hasRegions": false,
+    "fullBorder": false,
+    "convertFipsCodes": true,
+    "palette": {
+      "isReversed": false
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false
+  },
+  "type": "map",
+  "color": "pinkpurple",
+  "columns": {
+    "geo": {
+      "name": "FIPS Codes",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "name": "Insured Rate",
+      "label": "Data Label",
+      "prefix": "",
+      "suffix": "%",
+      "dataTable": true,
+      "tooltip": true,
+      "roundToPlace": 0
+    },
+    "navigate": {
+      "name": "link",
+      "tooltip": false,
+      "dataTable": false
+    },
+    "latitude": {
+      "name": "Latitude"
+    },
+    "longitude": {
+      "name": "Longitude"
+    },
+    "additionalColumn1": {
+      "label": "New Column",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "State"
+    },
+    "additionalColumn2": {
+      "label": "New Column",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "Latitude"
+    },
+    "additionalColumn3": {
+      "label": "New Column",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "Longitude"
+    }
+  },
+  "legend": {
+    "numberOfItems": 3,
+    "position": "side",
+    "title": "Legend Title",
+    "description": "Legend Text",
+    "type": "equalnumber",
+    "specialClasses": [
+      {
+        "key": "Insured Rate",
+        "value": "N/A",
+        "label": "N/A"
+      }
+    ],
+    "descriptions": {},
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": false,
+    "verticalSorted": false,
+    "showSpecialClassesLast": false,
+    "dynamicDescription": false
+  },
+  "filters": [
+    {
+      "order": "asc",
+      "label": "",
+      "columnName": "State",
+      "values": [
+        "California",
+        "Florida"
+      ],
+      "active": "California",
+      "filterStyle": "dropdown"
+    }
+  ],
+  "table": {
+    "wrapColumns": false,
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": ""
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "runtime": {
+    "editorErrorMessage": []
+  },
+  "visual": {
+    "minBubbleSize": 1,
+    "maxBubbleSize": 20,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "cityStyleLabel": "",
+    "showBubbleZeros": false,
+    "additionalCityStyles": [],
+    "geoCodeCircleSize": "7"
+  },
+  "mapPosition": {
+    "coordinates": [
+      0,
+      0
+    ],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": [
+      {
+        "legendTitle": "",
+        "legendDescription": "",
+        "items": [
+          {
+            "key": "",
+            "shape": "Arrow Up",
+            "column": "",
+            "operator": "=",
+            "value": ""
+          }
+        ]
+      }
+    ]
+  },
+  "filterBehavior": "Filter Change",
+  "data": [
+    {
+      "Insured Rate": 8,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "06071",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 25,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "55005",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 25,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "12103",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "Florida"
+    },
+    {
+      "Insured Rate": 25,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "32005",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "State": "California",
+      "Longitude": ""
+    },
+    {
+      "Insured Rate": 18,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "06075",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 3,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "06027",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 25,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "06029",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 60,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "Yosemite is great!",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "37.865101",
+      "Longitude": "-119.538330",
+      "State": "California"
+    }
+  ],
+  "version": "4.24.9"
+}

package/src/components/Annotation/AnnotationDropdown.tsx

@@ -32,6 +32,7 @@ const AnnotationDropdown = () => {
 
     if (config.general.showAnnotationDropdown) {
       classes.push('d-lg-block')
+      classes.splice(classes.indexOf('d-lg-none'), 1)
     }
     return classes.join(' ')
   }

package/src/components/{BubbleList.jsx → BubbleList.tsx}

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react'
 import { scaleLinear } from 'd3-scale'
 import { countryCoordinates } from '../data/country-coordinates'
 import stateCoordinates from '../data/state-coordinates'
-import ConfigContext from './../../src/context'
+import ConfigContext from '../context'
 
 export const BubbleList = ({ data: dataImport, state, projection, applyLegendToRow, applyTooltipsToGeo, handleCircleClick, runtimeData, displayGeoName }) => {
   const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))

package/src/components/{CityList.jsx → CityList.tsx}

@@ -1,12 +1,17 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
 
 import { jsx } from '@emotion/react'
 import { supportedCities } from '../data/supported-geos'
 import { scaleLinear } from 'd3-scale'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
+import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
 
-const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported, tooltipId }) => {
+import ConfigContext from '../context'
+
+const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, titleCase, setSharedFilterValue, isFilterValueSupported, tooltipId, projection }) => {
   const [citiesData, setCitiesData] = useState({})
+  const { scale, state, topoData, runtimeData, position } = useContext(ConfigContext)
+  if (!projection) return
 
   useEffect(() => {
     const citiesDictionary = {}
@@ -91,6 +96,27 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
       needsPointer = true
     }
 
+    if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name] && state.general.geoType === 'single-state') {
+      const statePicked = getFilterControllingStatePicked(state, runtimeData)
+      const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
+      // SVG ITEMS
+      const WIDTH = 880
+      const HEIGHT = 500
+      const PADDING = 50
+
+      const newProjection = projection.fitExtent(
+        [
+          [PADDING, PADDING],
+          [WIDTH - PADDING, HEIGHT - PADDING]
+        ],
+        _statePickedData
+      )
+      let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
+      console.log('COORDINATES', coords)
+      transform = `translate(${newProjection(coords)}) scale(${state.visual.geoCodeCircleSize / (position.zoom > 1 ? position.zoom : 1)})`
+      needsPointer = true
+    }
+
     if (!transform) {
       return
     }

package/src/components/{DataTable.jsx → DataTable.tsx}

@@ -5,7 +5,7 @@ import ExternalIcon from '../images/external-link.svg' // TODO: Move to Icon com
 import Icon from '@cdc/core/components/ui/Icon'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
 import MediaControls from '@cdc/core/components/MediaControls'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
 
@@ -274,7 +274,7 @@ const DataTable = props => {
 
                           cellValue = (
                             <>
-                              <LegendCircle fill={legendColor[0]} />
+                              <LegendShape fill={legendColor[0]} />
                               {labelValue}
                             </>
                           )