@cdc/map 4.24.10 → 4.24.12
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.
- package/dist/cdcmap.js +27324 -27152
- package/examples/default-geocode.json +13 -4
- package/examples/default-usa-regions.json +267 -117
- package/examples/example-city-state.json +6 -3
- package/examples/pattern.json +861 -0
- package/examples/private/DEV-9644.json +184 -0
- package/examples/private/default-patterns.json +867 -0
- package/index.html +4 -5
- package/package.json +3 -3
- package/src/CdcMap.tsx +53 -52
- package/src/_stories/CdcMap.Legend.Gradient.stories.tsx +67 -0
- package/src/_stories/CdcMap.Legend.stories.tsx +40 -0
- package/src/_stories/CdcMap.Patterns.stories.tsx +29 -0
- package/src/_stories/CdcMap.stories.tsx +59 -0
- package/src/_stories/UsaMap.NoData.stories.tsx +19 -0
- package/src/_stories/_mock/custom-layer-map.json +1117 -0
- package/src/_stories/_mock/default-patterns.json +865 -0
- package/src/_stories/_mock/example-city-state.json +858 -0
- package/src/_stories/_mock/usa-state-gradient.json +238 -0
- package/src/_stories/_mock/wastewater-map.json +208 -0
- package/src/components/CityList.tsx +5 -2
- package/src/components/EditorPanel/components/EditorPanel.tsx +81 -61
- package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +27 -23
- package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +75 -16
- package/src/components/Legend/components/Legend.tsx +42 -20
- package/src/components/Legend/components/index.scss +24 -24
- package/src/components/UsaMap/components/HexIcon.tsx +7 -1
- package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx +40 -6
- package/src/components/UsaMap/components/SingleState/SingleState.StateOutput.tsx +10 -2
- package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx +57 -12
- package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx +95 -21
- package/src/components/UsaMap/components/Territory/TerritoryShape.ts +13 -0
- package/src/components/UsaMap/components/UsaMap.County.tsx +11 -13
- package/src/components/UsaMap/components/UsaMap.Region.tsx +59 -16
- package/src/components/UsaMap/components/UsaMap.SingleState.tsx +2 -1
- package/src/components/UsaMap/components/UsaMap.State.tsx +60 -62
- package/src/components/UsaMap/helpers/shapes.ts +5 -4
- package/src/components/WorldMap/WorldMap.tsx +77 -16
- package/src/data/initial-state.js +2 -1
- package/src/helpers/applyColorToLegend.ts +80 -0
- package/src/helpers/colors.ts +23 -0
- package/src/hooks/useTooltip.ts +9 -6
- package/src/scss/editor-panel.scss +0 -3
- package/src/scss/filters.scss +1 -9
- package/src/scss/main.scss +0 -5
- package/src/scss/map.scss +11 -63
- package/src/types/MapConfig.ts +6 -1
- package/src/types/MapContext.ts +1 -0
- package/examples/default-patterns.json +0 -579
- 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
|
-
|
|
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
|
-
|
|
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--maps" data-config="/examples/default-geocode.json"></div>
|
|
42
|
-
<div class="react-container react-container--maps" data-config="/examples/default-single-state.json"></div>
|
|
40
|
+
<!-- <div class="react-container react-container--maps" data-config="/examples/default-geocode.json"></div> -->
|
|
41
|
+
<!-- <div class="react-container react-container--maps" data-config="/examples/default-single-state.json"></div> -->
|
|
43
42
|
<!-- <div class="react-container react-container--maps" data-config="/examples/bubble-us.json"></div> -->
|
|
44
43
|
<!-- <div class="react-container react-container--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.
|
|
3
|
+
"version": "4.24.12",
|
|
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.
|
|
28
|
+
"@cdc/core": "^4.24.12",
|
|
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": "
|
|
55
|
+
"gitHead": "347414f1da4b0e9bf2f22a7b59335deccf0b2d9c"
|
|
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,7 @@ 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'
|
|
80
81
|
|
|
81
82
|
// Data props
|
|
82
83
|
const stateKeys = Object.keys(supportedStates)
|
|
@@ -274,6 +275,22 @@ const CdcMap = ({
|
|
|
274
275
|
if (!uid && geoName) {
|
|
275
276
|
uid = cityKeys.find(key => key === geoName.toUpperCase())
|
|
276
277
|
}
|
|
278
|
+
|
|
279
|
+
if (state.general.displayAsHex) {
|
|
280
|
+
const upperCaseKey = geoName.toUpperCase()
|
|
281
|
+
const supportedDc = [
|
|
282
|
+
'WASHINGTON D.C.',
|
|
283
|
+
'DISTRICT OF COLUMBIA',
|
|
284
|
+
'WASHINGTON DC',
|
|
285
|
+
'DC',
|
|
286
|
+
'WASHINGTON DC.',
|
|
287
|
+
'D.C.',
|
|
288
|
+
'D.C'
|
|
289
|
+
]
|
|
290
|
+
if (supportedDc.includes(upperCaseKey)) {
|
|
291
|
+
uid = 'US-DC'
|
|
292
|
+
}
|
|
293
|
+
}
|
|
277
294
|
}
|
|
278
295
|
|
|
279
296
|
if ('us-region' === obj.general.geoType && obj.columns.geo.name) {
|
|
@@ -345,7 +362,6 @@ const CdcMap = ({
|
|
|
345
362
|
const newLegendMemo = new Map() // Reset memoization
|
|
346
363
|
const newLegendSpecialClassLastMemo = new Map() // Reset bin memoization
|
|
347
364
|
let primaryCol = obj.columns.primary.name,
|
|
348
|
-
isSingleState = obj.general.geoType === 'single-state',
|
|
349
365
|
isBubble = obj.general.type === 'bubble',
|
|
350
366
|
categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
|
|
351
367
|
type = obj.legend.type,
|
|
@@ -375,45 +391,6 @@ const CdcMap = ({
|
|
|
375
391
|
10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
|
|
376
392
|
}
|
|
377
393
|
|
|
378
|
-
const applyColorToLegend = legendIdx => {
|
|
379
|
-
// Default to "bluegreen" color scheme if the passed color isn't valid
|
|
380
|
-
let mapColorPalette = obj.customColors || colorPalettes[obj.color] || colorPalettes['bluegreen']
|
|
381
|
-
|
|
382
|
-
// Handle Region Maps need for a 10th color
|
|
383
|
-
if (general.geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
|
|
384
|
-
if (!general.palette.isReversed) {
|
|
385
|
-
mapColorPalette.push(chroma(mapColorPalette[8]).darken(0.75).hex())
|
|
386
|
-
} else {
|
|
387
|
-
mapColorPalette.unshift(chroma(mapColorPalette[0]).darken(0.75).hex())
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
let colorIdx = legendIdx - specialClasses
|
|
392
|
-
|
|
393
|
-
// Special Classes (No Data)
|
|
394
|
-
if (result[legendIdx].special) {
|
|
395
|
-
const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
|
|
396
|
-
|
|
397
|
-
return specialClassColors[legendIdx]
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
if (obj.color.includes('qualitative')) return mapColorPalette[colorIdx]
|
|
401
|
-
|
|
402
|
-
let amt = Math.max(result.length - specialClasses, 1)
|
|
403
|
-
let distributionArray = colorDistributions[amt]
|
|
404
|
-
|
|
405
|
-
let specificColor
|
|
406
|
-
if (distributionArray) {
|
|
407
|
-
specificColor = distributionArray[colorIdx]
|
|
408
|
-
} else if (mapColorPalette[colorIdx]) {
|
|
409
|
-
specificColor = colorIdx
|
|
410
|
-
} else {
|
|
411
|
-
specificColor = mapColorPalette.length - 1
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
return mapColorPalette[specificColor]
|
|
415
|
-
}
|
|
416
|
-
|
|
417
394
|
let specialClasses = 0
|
|
418
395
|
let specialClassesHash = {}
|
|
419
396
|
|
|
@@ -434,7 +411,7 @@ const CdcMap = ({
|
|
|
434
411
|
label: specialClass.label
|
|
435
412
|
})
|
|
436
413
|
|
|
437
|
-
result[result.length - 1].color = applyColorToLegend(result.length - 1)
|
|
414
|
+
result[result.length - 1].color = applyColorToLegend(result.length - 1, state, result)
|
|
438
415
|
|
|
439
416
|
specialClasses += 1
|
|
440
417
|
}
|
|
@@ -466,7 +443,7 @@ const CdcMap = ({
|
|
|
466
443
|
value: val
|
|
467
444
|
})
|
|
468
445
|
|
|
469
|
-
result[result.length - 1].color = applyColorToLegend(result.length - 1)
|
|
446
|
+
result[result.length - 1].color = applyColorToLegend(result.length - 1, state, result)
|
|
470
447
|
|
|
471
448
|
specialClasses += 1
|
|
472
449
|
}
|
|
@@ -548,7 +525,7 @@ const CdcMap = ({
|
|
|
548
525
|
|
|
549
526
|
// Add color to new legend item
|
|
550
527
|
for (let i = 0; i < result.length; i++) {
|
|
551
|
-
result[i].color = applyColorToLegend(i)
|
|
528
|
+
result[i].color = applyColorToLegend(i, state, result)
|
|
552
529
|
}
|
|
553
530
|
|
|
554
531
|
legendMemo.current = newLegendMemo
|
|
@@ -573,7 +550,9 @@ const CdcMap = ({
|
|
|
573
550
|
newLegendMemo.forEach(assignSpecialClassLastIndex)
|
|
574
551
|
legendSpecialClassLastMemo.current = newLegendSpecialClassLastMemo
|
|
575
552
|
|
|
576
|
-
|
|
553
|
+
// filter special classes from results
|
|
554
|
+
const specialValues = result.filter(d => d.special).map(d => d.value)
|
|
555
|
+
return result.filter(d => d.special || !specialValues.includes(d.value))
|
|
577
556
|
}
|
|
578
557
|
|
|
579
558
|
let uniqueValues = {}
|
|
@@ -610,7 +589,7 @@ const CdcMap = ({
|
|
|
610
589
|
let lastIdx = result.length - 1
|
|
611
590
|
|
|
612
591
|
// Add color to new legend item
|
|
613
|
-
result[lastIdx].color = applyColorToLegend(lastIdx)
|
|
592
|
+
result[lastIdx].color = applyColorToLegend(lastIdx, state, result)
|
|
614
593
|
}
|
|
615
594
|
}
|
|
616
595
|
|
|
@@ -662,7 +641,7 @@ const CdcMap = ({
|
|
|
662
641
|
max
|
|
663
642
|
})
|
|
664
643
|
|
|
665
|
-
result[result.length - 1].color = applyColorToLegend(result.length - 1)
|
|
644
|
+
result[result.length - 1].color = applyColorToLegend(result.length - 1, state, result)
|
|
666
645
|
|
|
667
646
|
changingNumber -= 1
|
|
668
647
|
numberOfRows -= chunkAmt
|
|
@@ -820,16 +799,30 @@ const CdcMap = ({
|
|
|
820
799
|
|
|
821
800
|
result.push(range)
|
|
822
801
|
|
|
823
|
-
result[result.length - 1].color = applyColorToLegend(result.length - 1)
|
|
802
|
+
result[result.length - 1].color = applyColorToLegend(result.length - 1, state, result)
|
|
824
803
|
}
|
|
825
804
|
}
|
|
826
805
|
|
|
827
806
|
result.forEach((legendItem, idx) => {
|
|
828
|
-
legendItem.color = applyColorToLegend(idx,
|
|
807
|
+
legendItem.color = applyColorToLegend(idx, state, result)
|
|
829
808
|
})
|
|
830
809
|
|
|
831
810
|
legendMemo.current = newLegendMemo
|
|
832
811
|
|
|
812
|
+
if (state.general.geoType === 'world') {
|
|
813
|
+
const runtimeDataKeys = Object.keys(runtimeData)
|
|
814
|
+
const isCountriesWithNoDataState =
|
|
815
|
+
obj.data === undefined ? false : !countryKeys.every(countryKey => runtimeDataKeys.includes(countryKey))
|
|
816
|
+
|
|
817
|
+
if (result.length > 0 && isCountriesWithNoDataState) {
|
|
818
|
+
result.push({
|
|
819
|
+
min: null,
|
|
820
|
+
max: null,
|
|
821
|
+
color: getGeoFillColor(state)
|
|
822
|
+
})
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
|
|
833
826
|
//----------
|
|
834
827
|
// DEV-784
|
|
835
828
|
// before returning the legend result
|
|
@@ -1702,6 +1695,7 @@ const CdcMap = ({
|
|
|
1702
1695
|
isDebug,
|
|
1703
1696
|
isEditor,
|
|
1704
1697
|
loadConfig,
|
|
1698
|
+
logo,
|
|
1705
1699
|
navigationHandler,
|
|
1706
1700
|
position,
|
|
1707
1701
|
resetLegendToggles,
|
|
@@ -1833,7 +1827,7 @@ const CdcMap = ({
|
|
|
1833
1827
|
closeModal(e)
|
|
1834
1828
|
}
|
|
1835
1829
|
}}
|
|
1836
|
-
style={{ padding: '15px
|
|
1830
|
+
style={{ padding: '15px 0px', margin: '0px' }}
|
|
1837
1831
|
>
|
|
1838
1832
|
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
|
|
1839
1833
|
<section className='outline-none geography-container w-100' ref={mapSvg} tabIndex='0'>
|
|
@@ -1845,7 +1839,8 @@ const CdcMap = ({
|
|
|
1845
1839
|
{'us-region' === geoType && <UsaMap.Region />}
|
|
1846
1840
|
{'us-county' === geoType && <UsaMap.County />}
|
|
1847
1841
|
{'world' === geoType && <WorldMap />}
|
|
1848
|
-
{
|
|
1842
|
+
{/* logo is handled in UsaMap.State when applicable */}
|
|
1843
|
+
{'data' === general.type && logo && ('us' !== geoType || 'us-geocode' === state.general.type) && (
|
|
1849
1844
|
<img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
|
|
1850
1845
|
)}
|
|
1851
1846
|
</>
|
|
@@ -1853,7 +1848,13 @@ const CdcMap = ({
|
|
|
1853
1848
|
</section>
|
|
1854
1849
|
|
|
1855
1850
|
{general.showSidebar && 'navigation' !== general.type && (
|
|
1856
|
-
<Legend
|
|
1851
|
+
<Legend
|
|
1852
|
+
dimensions={dimensions}
|
|
1853
|
+
ref={legendRef}
|
|
1854
|
+
skipId={tabId}
|
|
1855
|
+
containerWidthPadding={0}
|
|
1856
|
+
currentViewport={currentViewport}
|
|
1857
|
+
/>
|
|
1857
1858
|
)}
|
|
1858
1859
|
</div>
|
|
1859
1860
|
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
|
+
import CdcMap from '../CdcMap'
|
|
3
|
+
import UsGradient from './_mock/usa-state-gradient.json'
|
|
4
|
+
import WastewaterMap from './_mock/wastewater-map.json'
|
|
5
|
+
import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
|
|
6
|
+
|
|
7
|
+
const meta: Meta<typeof CdcMap> = {
|
|
8
|
+
title: 'Components/Templates/Map/Legend/Gradient',
|
|
9
|
+
component: CdcMap
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
type Story = StoryObj<typeof CdcMap>
|
|
13
|
+
|
|
14
|
+
export default meta
|
|
15
|
+
|
|
16
|
+
export const Gradient: Story = {
|
|
17
|
+
args: {
|
|
18
|
+
config: UsGradient
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export const Gradient_Smooth: Story = {
|
|
23
|
+
args: {
|
|
24
|
+
config: editConfigKeys(UsGradient, [{ path: ['legend', 'subStyle'], value: 'smooth' }])
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
export const Gradient_With_Box: Story = {
|
|
28
|
+
args: {
|
|
29
|
+
config: editConfigKeys(UsGradient, [
|
|
30
|
+
{ path: ['legend', 'subStyle'], value: 'linear blocks' },
|
|
31
|
+
{ path: ['legend', 'hideBorder'], value: false }
|
|
32
|
+
])
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export const Gradient_With_Text: Story = {
|
|
37
|
+
args: {
|
|
38
|
+
config: editConfigKeys(UsGradient, [
|
|
39
|
+
{ path: ['legend', 'title'], value: 'Title' },
|
|
40
|
+
{ path: ['legend', 'description'], value: 'Description' },
|
|
41
|
+
{ path: ['legend', 'hideBorder'], value: true }
|
|
42
|
+
])
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export const Gradient_With_Patterns: Story = {
|
|
47
|
+
args: {
|
|
48
|
+
config: WastewaterMap
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
export const Gradient_Reversed: Story = {
|
|
52
|
+
args: {
|
|
53
|
+
config: editConfigKeys(WastewaterMap, [
|
|
54
|
+
{
|
|
55
|
+
path: ['customColors'],
|
|
56
|
+
value: undefined
|
|
57
|
+
},
|
|
58
|
+
{ path: ['legend', 'specialClasses'], value: ['No Data'] },
|
|
59
|
+
{ path: ['legend', 'showSpecialClassesLast'], value: false },
|
|
60
|
+
{
|
|
61
|
+
path: ['legend', 'categoryValuesOrder'],
|
|
62
|
+
value: ['No Data', 'Minimal', 'Low', 'Moderate', 'High', 'Very High']
|
|
63
|
+
},
|
|
64
|
+
{ path: ['color'], value: 'greenblue' }
|
|
65
|
+
])
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
|
@@ -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
|