@cdc/map 4.24.11 → 4.24.12-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/cdcmap.js +34008 -33475
  2. package/examples/default-geocode.json +13 -4
  3. package/examples/default-usa-regions.json +267 -117
  4. package/examples/example-city-state.json +6 -3
  5. package/examples/pattern.json +861 -0
  6. package/examples/private/DEV-9989.json +229 -0
  7. package/examples/private/ardi.json +180 -0
  8. package/examples/private/colors 2.json +416 -0
  9. package/examples/private/colors.json +416 -0
  10. package/examples/private/colors.json.zip +0 -0
  11. package/examples/private/customColors.json +45348 -0
  12. package/examples/private/default-patterns.json +867 -0
  13. package/examples/private/test.json +1632 -0
  14. package/index.html +4 -5
  15. package/package.json +3 -3
  16. package/src/CdcMap.tsx +82 -79
  17. package/src/_stories/{CdcMapLegend.stories.tsx → CdcMap.Legend.Gradient.stories.tsx} +1 -20
  18. package/src/_stories/CdcMap.Legend.stories.tsx +40 -0
  19. package/src/_stories/CdcMap.Patterns.stories.tsx +29 -0
  20. package/src/_stories/CdcMap.stories.tsx +59 -0
  21. package/src/_stories/UsaMap.NoData.stories.tsx +19 -0
  22. package/src/_stories/_mock/custom-layer-map.json +1117 -0
  23. package/src/_stories/_mock/default-patterns.json +865 -0
  24. package/src/_stories/_mock/example-city-state.json +858 -0
  25. package/src/components/CityList.tsx +5 -2
  26. package/src/components/EditorPanel/components/EditorPanel.tsx +39 -256
  27. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +1 -1
  28. package/src/components/Legend/components/Legend.tsx +22 -6
  29. package/src/components/Legend/components/index.scss +16 -23
  30. package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx +40 -6
  31. package/src/components/UsaMap/components/SingleState/SingleState.StateOutput.tsx +10 -2
  32. package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx +1 -1
  33. package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx +14 -13
  34. package/src/components/UsaMap/components/UsaMap.County.tsx +11 -13
  35. package/src/components/UsaMap/components/UsaMap.Region.tsx +59 -16
  36. package/src/components/UsaMap/components/UsaMap.SingleState.tsx +2 -1
  37. package/src/components/UsaMap/components/UsaMap.State.tsx +58 -60
  38. package/src/components/WorldMap/WorldMap.tsx +77 -16
  39. package/src/data/initial-state.js +2 -1
  40. package/src/helpers/applyColorToLegend.ts +80 -0
  41. package/src/helpers/colors.ts +23 -0
  42. package/src/hooks/useTooltip.ts +9 -6
  43. package/src/scss/filters.scss +0 -3
  44. package/src/scss/main.scss +0 -1
  45. package/src/scss/map.scss +11 -59
  46. package/src/types/MapConfig.ts +7 -1
  47. package/src/types/MapContext.ts +1 -0
  48. package/examples/default-patterns.json +0 -579
  49. package/src/scss/datatable.scss +0 -6
package/index.html CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  <body>
24
24
  <!-- DEFAULT EXAMPLES -->
25
- <!-- <div class="react-container" data-config="/examples/annotation/usa-map.json"></div> -->
25
+ <!-- <div class="react-container" data-config="/examples/private/default-patterns.json"></div>-->
26
26
  <!-- <div class="react-container" data-config="/examples/hex-colors.json"></div> -->
27
27
  <!-- <div class="react-container" data-config="/examples/private/map.json"></div> -->
28
28
  <!-- <div class="react-container" data-config="/examples/private/zika-issue.json"></div> -->
@@ -30,16 +30,15 @@
30
30
 
31
31
  <!-- <div class="react-container react-container--maps" data-config="/examples/private/tooltip-issue.json"></div> -->
32
32
  <!-- <div class="react-container react-container--maps" data-config="/examples/test.json"></div> -->
33
- <!-- <div class="react-container react-container--maps" data-config="/examples/default-patterns.json"></div> -->
34
33
  <!-- <div class="react-container react-container--maps" data-config="/examples/test.json"></div> -->
35
34
  <!-- <div class="react-container react-container--maps" data-config="/examples/private/map-text-wrap.json"></div> -->
36
35
  <!-- <div class="react-container react-container--maps" data-config="/examples/private/tooltip-issue.json"></div> -->
37
36
  <!-- <div class="react-container react-container--maps" data-config="/examples/test.json"></div> -->
38
- <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div> -->
37
+ <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div>
39
38
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div> -->
40
39
  <!-- <div class="react-container react-container--maps" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/US-County-Level-Map.json"></div> -->
41
- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-geocode.json"></div>
42
- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div>
40
+ <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-geocode.json"></div> -->
41
+ <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div> -->
43
42
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-us.json"></div> -->
44
43
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-world.json"></div> -->
45
44
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/map",
3
- "version": "4.24.11",
3
+ "version": "4.24.12-2",
4
4
  "description": "React component for visualizing tabular data on a map of the United States or the world.",
5
5
  "moduleName": "CdcMap",
6
6
  "main": "dist/cdcmap",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "license": "Apache-2.0",
27
27
  "dependencies": {
28
- "@cdc/core": "^4.24.11",
28
+ "@cdc/core": "^4.24.12-2",
29
29
  "@emotion/core": "^10.0.28",
30
30
  "@emotion/react": "^11.1.5",
31
31
  "@hello-pangea/dnd": "^16.2.0",
@@ -52,5 +52,5 @@
52
52
  "react": "^18.2.0",
53
53
  "react-dom": "^18.2.0"
54
54
  },
55
- "gitHead": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808"
55
+ "gitHead": "a60edf1148396309eb473ac9f65426ee40797ddf"
56
56
  }
package/src/CdcMap.tsx CHANGED
@@ -5,6 +5,7 @@ import Waiting from '@cdc/core/components/Waiting'
5
5
  import Annotation from './components/Annotation'
6
6
  import Error from './components/EditorPanel/components/Error'
7
7
  import _ from 'lodash'
8
+ import { applyColorToLegend } from './helpers/applyColorToLegend'
8
9
 
9
10
  // types
10
11
  import { type ViewportSize } from './types/MapConfig'
@@ -16,7 +17,6 @@ import ResizeObserver from 'resize-observer-polyfill'
16
17
 
17
18
  // Third party
18
19
  import { Tooltip as ReactTooltip } from 'react-tooltip'
19
- import chroma from 'chroma-js'
20
20
  import Papa from 'papaparse'
21
21
  import parse from 'html-react-parser'
22
22
  import 'react-tooltip/dist/react-tooltip.css'
@@ -77,6 +77,8 @@ import WorldMap from './components/WorldMap' // Future: Lazy
77
77
  import useTooltip from './hooks/useTooltip'
78
78
  import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
79
79
  import SkipTo from '@cdc/core/components/elements/SkipTo'
80
+ import { getGeoFillColor } from './helpers/colors'
81
+ import { SubGrouping } from '@cdc/core/types/VizFilter'
80
82
 
81
83
  // Data props
82
84
  const stateKeys = Object.keys(supportedStates)
@@ -117,10 +119,17 @@ const CdcMap = ({
117
119
  const [loading, setLoading] = useState(true)
118
120
  const [displayPanel, setDisplayPanel] = useState(true)
119
121
  const [currentViewport, setCurrentViewport] = useState<ViewportSize>('lg')
120
- const [topoData, setTopoData] = useState<Topology | {}>({})
122
+ const [topoData, setTopoData] = useState<{}>({})
121
123
  const [runtimeFilters, setRuntimeFilters] = useState([])
122
- const [runtimeLegend, setRuntimeLegend] = useState([])
123
124
  const [runtimeData, setRuntimeData] = useState({ init: true })
125
+ const _setRuntimeData = (data: any) => {
126
+ if (config) {
127
+ setRuntimeData(data)
128
+ } else {
129
+ setRuntimeFilters(data)
130
+ }
131
+ }
132
+ const [runtimeLegend, setRuntimeLegend] = useState([])
124
133
  const [stateToShow, setStateToShow] = useState(null)
125
134
  const [modal, setModal] = useState(null)
126
135
  const [accessibleStatus, setAccessibleStatus] = useState('')
@@ -274,6 +283,22 @@ const CdcMap = ({
274
283
  if (!uid && geoName) {
275
284
  uid = cityKeys.find(key => key === geoName.toUpperCase())
276
285
  }
286
+
287
+ if (state.general.displayAsHex) {
288
+ const upperCaseKey = geoName.toUpperCase()
289
+ const supportedDc = [
290
+ 'WASHINGTON D.C.',
291
+ 'DISTRICT OF COLUMBIA',
292
+ 'WASHINGTON DC',
293
+ 'DC',
294
+ 'WASHINGTON DC.',
295
+ 'D.C.',
296
+ 'D.C'
297
+ ]
298
+ if (supportedDc.includes(upperCaseKey)) {
299
+ uid = 'US-DC'
300
+ }
301
+ }
277
302
  }
278
303
 
279
304
  if ('us-region' === obj.general.geoType && obj.columns.geo.name) {
@@ -341,7 +366,7 @@ const CdcMap = ({
341
366
  })
342
367
 
343
368
  // eslint-disable-next-line
344
- const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
369
+ const generateRuntimeLegend = useCallback((obj, runtimeFilters, hash) => {
345
370
  const newLegendMemo = new Map() // Reset memoization
346
371
  const newLegendSpecialClassLastMemo = new Map() // Reset bin memoization
347
372
  let primaryCol = obj.columns.primary.name,
@@ -356,7 +381,7 @@ const CdcMap = ({
356
381
  result.fromHash = hash
357
382
  }
358
383
 
359
- result.runtimeDataHash = runtimeData.fromHash
384
+ result.runtimeDataHash = runtimeFilters?.fromHash
360
385
 
361
386
  // Unified will based the legend off ALL of the data maps received. Otherwise, it will use
362
387
  let dataSet = obj.legend.unified ? obj.data : Object.values(runtimeData)
@@ -374,45 +399,6 @@ const CdcMap = ({
374
399
  10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
375
400
  }
376
401
 
377
- const applyColorToLegend = legendIdx => {
378
- // Default to "bluegreen" color scheme if the passed color isn't valid
379
- let mapColorPalette = obj.customColors || colorPalettes[obj.color] || colorPalettes['bluegreen']
380
-
381
- // Handle Region Maps need for a 10th color
382
- if (general.geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
383
- if (!general.palette.isReversed) {
384
- mapColorPalette.push(chroma(mapColorPalette[8]).darken(0.75).hex())
385
- } else {
386
- mapColorPalette.unshift(chroma(mapColorPalette[0]).darken(0.75).hex())
387
- }
388
- }
389
-
390
- let colorIdx = legendIdx - specialClasses
391
-
392
- // Special Classes (No Data)
393
- if (result[legendIdx].special) {
394
- const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
395
-
396
- return specialClassColors[legendIdx]
397
- }
398
-
399
- if (obj.color.includes('qualitative')) return mapColorPalette[colorIdx]
400
-
401
- let amt = Math.max(result.length - specialClasses, 1)
402
- let distributionArray = colorDistributions[amt]
403
-
404
- let specificColor
405
- if (distributionArray) {
406
- specificColor = distributionArray[colorIdx]
407
- } else if (mapColorPalette[colorIdx]) {
408
- specificColor = colorIdx
409
- } else {
410
- specificColor = mapColorPalette.length - 1
411
- }
412
-
413
- return mapColorPalette[specificColor]
414
- }
415
-
416
402
  let specialClasses = 0
417
403
  let specialClassesHash = {}
418
404
 
@@ -433,7 +419,7 @@ const CdcMap = ({
433
419
  label: specialClass.label
434
420
  })
435
421
 
436
- result[result.length - 1].color = applyColorToLegend(result.length - 1)
422
+ result[result.length - 1].color = applyColorToLegend(result.length - 1, state, result)
437
423
 
438
424
  specialClasses += 1
439
425
  }
@@ -465,7 +451,7 @@ const CdcMap = ({
465
451
  value: val
466
452
  })
467
453
 
468
- result[result.length - 1].color = applyColorToLegend(result.length - 1)
454
+ result[result.length - 1].color = applyColorToLegend(result.length - 1, state, result)
469
455
 
470
456
  specialClasses += 1
471
457
  }
@@ -547,7 +533,7 @@ const CdcMap = ({
547
533
 
548
534
  // Add color to new legend item
549
535
  for (let i = 0; i < result.length; i++) {
550
- result[i].color = applyColorToLegend(i)
536
+ result[i].color = applyColorToLegend(i, state, result)
551
537
  }
552
538
 
553
539
  legendMemo.current = newLegendMemo
@@ -611,7 +597,7 @@ const CdcMap = ({
611
597
  let lastIdx = result.length - 1
612
598
 
613
599
  // Add color to new legend item
614
- result[lastIdx].color = applyColorToLegend(lastIdx)
600
+ result[lastIdx].color = applyColorToLegend(lastIdx, state, result)
615
601
  }
616
602
  }
617
603
 
@@ -663,7 +649,7 @@ const CdcMap = ({
663
649
  max
664
650
  })
665
651
 
666
- result[result.length - 1].color = applyColorToLegend(result.length - 1)
652
+ result[result.length - 1].color = applyColorToLegend(result.length - 1, state, result)
667
653
 
668
654
  changingNumber -= 1
669
655
  numberOfRows -= chunkAmt
@@ -821,16 +807,30 @@ const CdcMap = ({
821
807
 
822
808
  result.push(range)
823
809
 
824
- result[result.length - 1].color = applyColorToLegend(result.length - 1)
810
+ result[result.length - 1].color = applyColorToLegend(result.length - 1, state, result)
825
811
  }
826
812
  }
827
813
 
828
814
  result.forEach((legendItem, idx) => {
829
- legendItem.color = applyColorToLegend(idx, specialClasses, result)
815
+ legendItem.color = applyColorToLegend(idx, state, result)
830
816
  })
831
817
 
832
818
  legendMemo.current = newLegendMemo
833
819
 
820
+ if (state.general.geoType === 'world') {
821
+ const runtimeDataKeys = Object.keys(runtimeFilters)
822
+ const isCountriesWithNoDataState =
823
+ obj.data === undefined ? false : !countryKeys.every(countryKey => runtimeDataKeys.includes(countryKey))
824
+
825
+ if (result.length > 0 && isCountriesWithNoDataState) {
826
+ result.push({
827
+ min: null,
828
+ max: null,
829
+ color: getGeoFillColor(state)
830
+ })
831
+ }
832
+ }
833
+
834
834
  //----------
835
835
  // DEV-784
836
836
  // before returning the legend result
@@ -883,32 +883,21 @@ const CdcMap = ({
883
883
  ) => {
884
884
  let newFilter = runtimeFilters[idx]
885
885
 
886
- const sortAsc = (a, b) => {
887
- return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
888
- }
889
-
890
- const sortDesc = (a, b) => {
891
- return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
886
+ const sort = (a, b) => {
887
+ const asc = obj.filters[idx].order !== 'desc'
888
+ return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })
892
889
  }
893
890
 
894
891
  if (type !== 'url') {
895
892
  values = getUniqueValues(state.data, columnName)
896
893
 
897
- if (obj.filters[idx].order === 'asc') {
898
- values = values.sort(sortAsc)
899
- }
900
-
901
- if (obj.filters[idx].order === 'desc') {
902
- values = values.sort(sortDesc)
903
- }
904
-
905
894
  if (obj.filters[idx].order === 'cust') {
906
895
  if (obj.filters[idx]?.values.length > 0) {
907
896
  values = obj.filters[idx].values
908
897
  }
898
+ } else {
899
+ values = values.sort(sort)
909
900
  }
910
- } else {
911
- values = values
912
901
  }
913
902
 
914
903
  if (undefined === newFilter) {
@@ -928,6 +917,7 @@ const CdcMap = ({
928
917
  newFilter.active = active ?? values[0] // Default to first found value
929
918
  newFilter.filterStyle = obj.filters[idx].filterStyle ? obj.filters[idx].filterStyle : 'dropdown'
930
919
  newFilter.showDropdown = showDropdown
920
+ newFilter.subGrouping = obj.filters[idx].subGrouping
931
921
 
932
922
  filters.push(newFilter)
933
923
  }
@@ -976,17 +966,23 @@ const CdcMap = ({
976
966
  // Filters
977
967
  if (filters?.length) {
978
968
  for (let i = 0; i < filters.length; i++) {
979
- const { columnName, active, type } = filters[i]
980
- if (type !== 'url' && String(row[columnName]) !== String(active)) return false // Bail out, not part of filter
969
+ const { columnName, active, type, filterStyle, subGrouping } = filters[i]
970
+ const isDataFilter = type !== 'url'
971
+ const matchingValue = String(active) === String(row[columnName]) // Group
972
+ if (isDataFilter && !matchingValue) return false // Bail out, data doesn't match the filter selection
973
+ if (filterStyle == 'nested-dropdown') {
974
+ const matchingSubValue = String(row[subGrouping?.columnName]) === String(subGrouping?.active)
975
+ if (subGrouping?.active && !matchingSubValue) {
976
+ return false // Bail out, data doesn't match the subgroup selection
977
+ }
978
+ }
981
979
  }
982
980
  }
983
-
984
981
  // Don't add additional rows with same UID
985
- if (undefined === result[row.uid]) {
982
+ if (result[row.uid] === undefined) {
986
983
  result[row.uid] = row
987
984
  }
988
985
  })
989
-
990
986
  return result
991
987
  } catch (e) {
992
988
  console.error('COVE: ', e) // eslint-disable-line
@@ -1572,7 +1568,7 @@ const CdcMap = ({
1572
1568
  const hashFilters = hashObj(state.filters)
1573
1569
  let filters
1574
1570
 
1575
- if (state.filters && hashFilters !== runtimeFilters.fromHash) {
1571
+ if (state.filters && (config || hashFilters !== runtimeFilters.fromHash)) {
1576
1572
  filters = generateRuntimeFilters(state, hashFilters, runtimeFilters)
1577
1573
 
1578
1574
  if (filters) {
@@ -1601,12 +1597,12 @@ const CdcMap = ({
1601
1597
  })
1602
1598
 
1603
1599
  // Data
1604
- if (hashData !== runtimeData.fromHash && state.data?.fromColumn) {
1600
+ if (hashData !== runtimeData?.fromHash && state.data?.fromColumn) {
1605
1601
  const newRuntimeData = generateRuntimeData(state, filters || runtimeFilters, hashData)
1606
1602
 
1607
1603
  setRuntimeData(newRuntimeData)
1608
1604
  } else {
1609
- if (hashLegend !== runtimeLegend.fromHash && undefined === runtimeData.init) {
1605
+ if (hashLegend !== runtimeLegend?.fromHash && undefined === runtimeData.init) {
1610
1606
  const legend = generateRuntimeLegend(state, runtimeData, hashLegend)
1611
1607
  setRuntimeLegend(legend)
1612
1608
  }
@@ -1703,6 +1699,7 @@ const CdcMap = ({
1703
1699
  isDebug,
1704
1700
  isEditor,
1705
1701
  loadConfig,
1702
+ logo,
1706
1703
  navigationHandler,
1707
1704
  position,
1708
1705
  resetLegendToggles,
@@ -1773,7 +1770,12 @@ const CdcMap = ({
1773
1770
  )
1774
1771
 
1775
1772
  const sectionClassNames = () => {
1776
- const classes = ['cove-component__content', 'cdc-map-inner-container', `${currentViewport}`]
1773
+ const classes = [
1774
+ 'cove-component__content',
1775
+ 'cdc-map-inner-container',
1776
+ `${currentViewport}`,
1777
+ `${state?.general?.headerColor}`
1778
+ ]
1777
1779
  if (config?.runtime?.editorErrorMessage.length > 0) classes.push('type-map--has-error')
1778
1780
  return classes.join(' ')
1779
1781
  }
@@ -1817,10 +1819,10 @@ const CdcMap = ({
1817
1819
  <Filters
1818
1820
  config={state}
1819
1821
  setConfig={setState}
1820
- getUniqueValues={getUniqueValues}
1821
1822
  filteredData={runtimeFilters}
1822
- setFilteredData={setRuntimeFilters}
1823
+ setFilteredData={_setRuntimeData}
1823
1824
  dimensions={dimensions}
1825
+ standaloneMap={!config}
1824
1826
  />
1825
1827
  )}
1826
1828
 
@@ -1846,7 +1848,8 @@ const CdcMap = ({
1846
1848
  {'us-region' === geoType && <UsaMap.Region />}
1847
1849
  {'us-county' === geoType && <UsaMap.County />}
1848
1850
  {'world' === geoType && <WorldMap />}
1849
- {'data' === general.type && logo && (
1851
+ {/* logo is handled in UsaMap.State when applicable */}
1852
+ {'data' === general.type && logo && ('us' !== geoType || 'us-geocode' === state.general.type) && (
1850
1853
  <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
1851
1854
  )}
1852
1855
  </>
package/src/_stories/{CdcMapLegend.stories.tsx → CdcMap.Legend.Gradient.stories.tsx} RENAMED
@@ -1,12 +1,11 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
  import CdcMap from '../CdcMap'
3
- import SingleStateWithFilters from './_mock/DEV-8942.json'
4
3
  import UsGradient from './_mock/usa-state-gradient.json'
5
4
  import WastewaterMap from './_mock/wastewater-map.json'
6
5
  import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
7
6
 
8
7
  const meta: Meta<typeof CdcMap> = {
9
- title: 'Components/Templates/Map/Legend',
8
+ title: 'Components/Templates/Map/Legend/Gradient',
10
9
  component: CdcMap
11
10
  }
12
11
 
@@ -14,18 +13,6 @@ type Story = StoryObj<typeof CdcMap>
14
13
 
15
14
  export default meta
16
15
 
17
- export const Single_State_With_Filters: Story = {
18
- args: {
19
- config: editConfigKeys(SingleStateWithFilters, [
20
- { path: ['legend', 'style'], value: 'gradient' },
21
- { path: ['legend', 'position'], value: 'top' },
22
- { path: ['legend', 'hideBorder'], value: true },
23
- { path: ['legend', 'title'], value: '' },
24
- { path: ['legend', 'description'], value: '' }
25
- ])
26
- }
27
- }
28
-
29
16
  export const Gradient: Story = {
30
17
  args: {
31
18
  config: UsGradient
@@ -56,12 +43,6 @@ export const Gradient_With_Text: Story = {
56
43
  }
57
44
  }
58
45
 
59
- export const Legend_Right: Story = {
60
- args: {
61
- config: editConfigKeys(SingleStateWithFilters, [{ path: ['legend', 'hideBorder'], value: true }])
62
- }
63
- }
64
-
65
46
  export const Gradient_With_Patterns: Story = {
66
47
  args: {
67
48
  config: WastewaterMap
package/src/_stories/CdcMap.Legend.stories.tsx ADDED
@@ -0,0 +1,40 @@
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+ import CdcMap from '../CdcMap'
3
+ import SingleStateWithFilters from './_mock/DEV-8942.json'
4
+ import CustomLayerMap from './_mock/custom-layer-map.json'
5
+ import WastewaterMap from './_mock/wastewater-map.json'
6
+ import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
7
+
8
+ const meta: Meta<typeof CdcMap> = {
9
+ title: 'Components/Templates/Map/Legend',
10
+ component: CdcMap
11
+ }
12
+
13
+ type Story = StoryObj<typeof CdcMap>
14
+
15
+ export default meta
16
+
17
+ export const Legend_Right: Story = {
18
+ args: {
19
+ config: editConfigKeys(SingleStateWithFilters, [{ path: ['legend', 'hideBorder'], value: true }])
20
+ }
21
+ }
22
+
23
+ export const Legend_Bottom: Story = {
24
+ args: {
25
+ config: editConfigKeys(CustomLayerMap, [
26
+ { path: ['legend', 'position'], value: 'bottom' },
27
+ { path: ['legend', 'singleRow'], value: false }
28
+ ])
29
+ }
30
+ }
31
+
32
+ export const Legend_Bottom_Single_Row: Story = {
33
+ args: {
34
+ config: editConfigKeys(WastewaterMap, [
35
+ { path: ['legend', 'position'], value: 'bottom' },
36
+ { path: ['legend', 'style'], value: 'circles' },
37
+ { path: ['legend', 'singleRow'], value: true }
38
+ ])
39
+ }
40
+ }
package/src/_stories/CdcMap.Patterns.stories.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+ import CdcMap from '../CdcMap'
3
+ import defaultPatterns from './_mock/default-patterns.json'
4
+ import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
5
+
6
+ const meta: Meta<typeof CdcMap> = {
7
+ title: 'Components/Templates/Map/Patterns',
8
+ component: CdcMap
9
+ }
10
+
11
+ type Story = StoryObj<typeof CdcMap>
12
+
13
+ export default meta
14
+
15
+ export const Default_Patterns: Story = {
16
+ args: {
17
+ config: defaultPatterns
18
+ }
19
+ }
20
+
21
+ export const Default_Patterns_Dark: Story = {
22
+ args: {
23
+ isEditor: true,
24
+ config: editConfigKeys(defaultPatterns, [
25
+ { path: ['color'], value: 'bluegreen' },
26
+ { path: ['legend', 'specialClasses'], value: [] }
27
+ ])
28
+ }
29
+ }
package/src/_stories/CdcMap.stories.tsx CHANGED
@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react'
2
2
  import CdcMap from '../CdcMap'
3
3
  import EqualNumberOptInExample from './_mock/DEV-7286.json'
4
4
  import SingleStateWithFilters from './_mock/DEV-8942.json'
5
+ import exampleCityState from './_mock/example-city-state.json'
6
+ import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
5
7
 
6
8
  const meta: Meta<typeof CdcMap> = {
7
9
  title: 'Components/Templates/Map',
@@ -94,4 +96,61 @@ export const Single_State_With_Filters: Story = {
94
96
  }
95
97
  }
96
98
 
99
+ let newConfig = editConfigKeys(exampleCityState, [
100
+ { path: ['customColors'], value: ['red', 'orange', 'yellow', 'green', 'blue', 'violet'] }
101
+ ])
102
+ newConfig = editConfigKeys(newConfig, [
103
+ {
104
+ path: ['legend', 'specialClasses'],
105
+ value: [
106
+ {
107
+ key: 'Rate',
108
+ value: '*',
109
+ label: '*'
110
+ }
111
+ ]
112
+ }
113
+ ])
114
+ let exampleCityStateStandardColors = editConfigKeys(exampleCityState, [
115
+ {
116
+ path: ['legend', 'specialClasses'],
117
+ value: [
118
+ {
119
+ key: 'Rate',
120
+ value: '*',
121
+ label: '*'
122
+ }
123
+ ]
124
+ }
125
+ ])
126
+ export const Custom_Color_Distributions_With_Special_Classes: Story = {
127
+ args: {
128
+ config: newConfig
129
+ }
130
+ }
131
+
132
+ export const Custom_Color_Distributions_Without_Special_Classes: Story = {
133
+ args: {
134
+ config: editConfigKeys(newConfig, [{ path: ['legend', 'specialClasses'], value: [] }])
135
+ }
136
+ }
137
+
138
+ export const Standard_Color_Distributions_With_Special_Classes: Story = {
139
+ args: {
140
+ config: exampleCityStateStandardColors
141
+ }
142
+ }
143
+
144
+ export const Standard_Color_Distributions_Without_Special_Classes: Story = {
145
+ args: {
146
+ config: editConfigKeys(exampleCityStateStandardColors, [{ path: ['legend', 'specialClasses'], value: [] }])
147
+ }
148
+ }
149
+
150
+ export const Custom_Color_Distributions_With_Update_Needed: Story = {
151
+ args: {
152
+ config: editConfigKeys(newConfig, [{ path: ['version'], value: '4.24.11' }])
153
+ }
154
+ }
155
+
97
156
  export default meta
package/src/_stories/UsaMap.NoData.stories.tsx ADDED
@@ -0,0 +1,19 @@
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+ import CdcMap from '../CdcMap'
3
+ import cityStateConfig from './_mock/example-city-state.json'
4
+ import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
5
+
6
+ const meta: Meta<typeof CdcMap> = {
7
+ title: 'Components/Templates/Map',
8
+ component: CdcMap
9
+ }
10
+
11
+ type Story = StoryObj<typeof CdcMap>
12
+
13
+ export const USA_Map_No_Data: Story = {
14
+ args: {
15
+ config: editConfigKeys(cityStateConfig, [{ path: ['data'], value: [] }])
16
+ }
17
+ }
18
+
19
+ export default meta