@cdc/map 4.26.3 → 4.26.5
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/CONFIG.md +268 -0
- package/README.md +74 -24
- package/dist/cdcmap-CY9IcPSi.es.js +6 -0
- package/dist/cdcmap-DlpiY3fQ.es.js +4 -0
- package/dist/cdcmap.js +29168 -27482
- package/examples/{testing-layer-2.json → __data__/testing-layer-2.json} +1 -1
- package/examples/{testing-layer.json → __data__/testing-layer.json} +1 -1
- package/examples/county-hsa-toggle.json +51993 -0
- package/examples/custom-map-layers.json +2 -2
- package/examples/default-county.json +6 -3
- package/examples/minimal-example.json +73 -0
- package/examples/private/annotation-bug.json +2 -2
- package/examples/private/css-issue.json +314 -0
- package/examples/private/region-breaking.json +1639 -0
- package/examples/private/test1.json +27247 -0
- package/package.json +4 -4
- package/src/CdcMapComponent.tsx +107 -14
- package/src/_stories/CdcMap.AltText.stories.tsx +122 -0
- package/src/_stories/CdcMap.Editor.ColumnsSectionTests.stories.tsx +600 -0
- package/src/_stories/CdcMap.Editor.DataTableSectionTests.stories.tsx +404 -0
- package/src/_stories/CdcMap.Editor.FiltersSectionTests.stories.tsx +229 -0
- package/src/_stories/CdcMap.Editor.GeneralSectionTests.stories.tsx +262 -0
- package/src/_stories/CdcMap.Editor.LegendSectionTests.stories.tsx +541 -0
- package/src/_stories/CdcMap.Editor.MultiCountryWorldMapTests.stories.tsx +359 -0
- package/src/_stories/CdcMap.Editor.PatternSettingsSectionTests.stories.tsx +516 -0
- package/src/_stories/CdcMap.Editor.SmallMultiplesSectionTests.stories.tsx +165 -0
- package/src/_stories/CdcMap.Editor.TextAnnotationsSectionTests.stories.tsx +145 -0
- package/src/_stories/CdcMap.Editor.TypeSectionTests.stories.tsx +312 -0
- package/src/_stories/CdcMap.Editor.VisualSectionTests.stories.tsx +359 -0
- package/src/_stories/CdcMap.Editor.ZoomControlsTests.stories.tsx +88 -0
- package/src/_stories/CdcMap.FocusVisibility.stories.tsx +87 -0
- package/src/_stories/CdcMap.HiddenMount.stories.tsx +69 -0
- package/src/_stories/CdcMap.ResetBehavior.stories.tsx +32 -0
- package/src/_stories/CdcMap.Zoom.stories.tsx +111 -0
- package/src/_stories/{CdcMap.stories.tsx → CdcMap.smoke.stories.tsx} +60 -0
- package/src/_stories/_mock/alt_text_metadata.json +65 -0
- package/src/_stories/_mock/legends/legend-tests.json +3 -3
- package/src/_stories/_mock/world-bubble-reset.json +138 -0
- package/src/_stories/_mock/world-data-zoom-filters.json +166 -0
- package/src/components/Annotation/AnnotationList.tsx +1 -1
- package/src/components/BubbleList.tsx +13 -0
- package/src/components/EditorPanel/components/EditorPanel.tsx +637 -382
- package/src/components/EditorPanel/components/HexShapeSettings.tsx +1 -1
- package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +112 -117
- package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +26 -13
- package/src/components/EditorPanel/components/editorPanel.styles.css +22 -2
- package/src/components/FilterControls.tsx +21 -0
- package/src/components/Legend/components/Legend.tsx +3 -3
- package/src/components/Legend/components/LegendItem.Hex.tsx +4 -2
- package/src/components/SmallMultiples/SmallMultiples.tsx +2 -2
- package/src/components/SmallMultiples/SynchronizedTooltip.tsx +1 -1
- package/src/components/UsaMap/components/UsaMap.County.tsx +309 -108
- package/src/components/UsaMap/components/UsaMap.Region.tsx +5 -2
- package/src/components/UsaMap/components/UsaMap.SingleState.tsx +33 -10
- package/src/components/UsaMap/components/UsaMap.State.tsx +10 -3
- package/src/components/UsaMap/data/cb_2019_us_county_20m.json +75817 -1
- package/src/components/UsaMap/data/hsa_fips_mapping.json +3144 -0
- package/src/components/WorldMap/WorldMap.tsx +37 -4
- package/src/components/WorldMap/data/world-topo.json +1 -1
- package/src/components/ZoomableGroup.tsx +23 -3
- package/src/components/filterControls.styles.css +6 -0
- package/src/data/initial-state.js +3 -0
- package/src/data/supported-counties.json +1 -1
- package/src/helpers/countyTerritories.ts +38 -0
- package/src/helpers/dataTableHelpers.ts +35 -6
- package/src/helpers/generateRuntimeFilters.ts +2 -1
- package/src/helpers/handleMapAriaLabels.ts +45 -30
- package/src/helpers/shouldAutoResetSingleStateZoom.ts +22 -0
- package/src/helpers/tests/countyTerritories.test.ts +87 -0
- package/src/helpers/tests/handleMapAriaLabels.test.ts +71 -0
- package/src/helpers/tests/shouldAutoResetSingleStateZoom.test.ts +71 -0
- package/src/hooks/useApplyTooltipsToGeo.tsx +7 -4
- package/src/hooks/useGeoClickHandler.ts +13 -1
- package/src/hooks/useMapLayers.tsx +1 -1
- package/src/hooks/useStateZoom.tsx +39 -20
- package/src/hooks/useTooltip.test.tsx +2 -16
- package/src/hooks/useTooltip.ts +18 -7
- package/src/index.jsx +5 -2
- package/src/scss/main.scss +6 -21
- package/src/scss/map.scss +20 -0
- package/src/store/map.actions.ts +5 -2
- package/src/store/map.reducer.ts +12 -3
- package/src/test/CdcMap.test.jsx +24 -0
- package/src/types/MapConfig.ts +11 -0
- package/src/types/MapContext.ts +6 -1
- package/topojson-updater/README.txt +1 -1
- package/dist/cdcmap-vr9HZwRt.es.js +0 -6
- package/examples/__data__/city-state-data.json +0 -668
- package/examples/city-state.json +0 -434
- package/examples/default-world-data.json +0 -1450
- package/examples/new-cities.json +0 -656
- package/src/_stories/CdcMap.Editor.stories.tsx +0 -3648
- package/topojson-updater/package-lock.json +0 -223
- /package/src/_stories/{CdcMap.ColumnWrap.stories.tsx → CdcMap.ColumnWrap.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.Defaults.stories.tsx → CdcMap.Defaults.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.DistrictOfColumbia.stories.tsx → CdcMap.DistrictOfColumbia.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.Filters.stories.tsx → CdcMap.Filters.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.Legend.Gradient.stories.tsx → CdcMap.Legend.Gradient.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.Legend.stories.tsx → CdcMap.Legend.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.Patterns.stories.tsx → CdcMap.Patterns.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.SmallMultiples.stories.tsx → CdcMap.SmallMultiples.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.Table.stories.tsx → CdcMap.Table.smoke.stories.tsx} +0 -0
- /package/src/_stories/{CdcMap.ZeroColor.stories.tsx → CdcMap.ZeroColor.smoke.stories.tsx} +0 -0
- /package/src/_stories/{GoogleMap.stories.tsx → GoogleMap.smoke.stories.tsx} +0 -0
- /package/src/_stories/{UsaMap.NoData.stories.tsx → UsaMap.NoData.smoke.stories.tsx} +0 -0
package/CONFIG.md
ADDED
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
# `@cdc/map` Configuration Reference
|
|
2
|
+
|
|
3
|
+
This document covers the `@cdc/map`-owned config contract. Shared nested structures such as `filters`, `table`, `annotations`, `markupVariables`, `general.palette`, and the shared column/property shapes are documented in the [`@cdc/core` config reference](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md).
|
|
4
|
+
|
|
5
|
+
To follow those shared types locally, use `packages/core/CONFIG.md` in this monorepo or `node_modules/@cdc/core/CONFIG.md` in an installed app. If neither path is available, use the GitHub link above.
|
|
6
|
+
|
|
7
|
+
## Organization
|
|
8
|
+
|
|
9
|
+
The sections below follow the package’s real config surface:
|
|
10
|
+
|
|
11
|
+
| Section | Covers |
|
|
12
|
+
| --- | --- |
|
|
13
|
+
| Identity and data source | Package identity plus loader metadata |
|
|
14
|
+
| Geography and columns | Map mode, geography controls, and package-specific column wiring |
|
|
15
|
+
| Copy and shell controls | Title, intro/subtext, download toggles, and map shell behavior |
|
|
16
|
+
| Classification and palette | Map-specific legend behavior and palette notes |
|
|
17
|
+
| Map features | Overlays, patterns, hex maps, and small multiples |
|
|
18
|
+
| Layout and interactivity | Map positioning, visual shell settings, and tooltip behavior |
|
|
19
|
+
| Fields You Can Ignore | Legacy/editor artifacts that may still appear in saved configs |
|
|
20
|
+
|
|
21
|
+
## Minimum Working Config
|
|
22
|
+
|
|
23
|
+
The copy-pasteable minimum config lives in [README.md](./README.md). Its source of truth is [`examples/minimal-example.json`](./examples/minimal-example.json), and a test keeps the README block in sync with that file.
|
|
24
|
+
|
|
25
|
+
## Identity and Data Source
|
|
26
|
+
|
|
27
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
28
|
+
| --- | --- | --- | --- | --- | --- |
|
|
29
|
+
| `type` | `string` | Yes | None | Identifies the package. | Must be `map`. |
|
|
30
|
+
| `version` | `string` | No | None | Saved COVE version for migration purposes. | Use a semantic COVE version for authored configs so migrations can reason about saved-version order. |
|
|
31
|
+
| `locale` | `string` | No | Browser/runtime default | Locale used by markup-variable and shared formatting helpers. | Any valid `Intl` locale is accepted. |
|
|
32
|
+
|
|
33
|
+
The following authorable data-loading fields are shared and documented in core: `data`, `dataUrl`, `dataDescription`, `dataMetadata`, and `dataKey` for dashboard-driven embeds. `dataMetadata` may be loader-populated, but consumers should preserve or author it when metadata-backed alt text, markup variables, or footnotes need it. Runtime/file metadata such as `runtimeDataUrl` may still appear in saved configs, but consumers usually do not author those fields directly.
|
|
34
|
+
|
|
35
|
+
## Geography and Columns
|
|
36
|
+
|
|
37
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
38
|
+
| --- | --- | --- | --- | --- | --- |
|
|
39
|
+
| `general.geoType` | `string` | Yes | `single-state` | Chooses the geography family being rendered. | `us`, `us-region`, `us-county`, `world`, `single-state`, `google-map`. Geocode maps use `general.type: "us-geocode"` with `geoType: "us-county"` or `general.type: "world-geocode"` with `geoType: "world"`. Bubble maps use `general.type: "bubble"` with a supported geography such as `us` or `world`. |
|
|
40
|
+
| `general.type` | `string` | Yes | `data` | Chooses the interaction mode. | `data`, `navigation`, `us-geocode`, `world-geocode`, `bubble` |
|
|
41
|
+
| `columns.geo` | `object` | Yes | See package defaults | Geography lookup column. | Uses shared column properties from core; `displayColumn` is map-specific and is used when the displayed geography label differs from the lookup field. |
|
|
42
|
+
| `columns.primary` | `object` | Conditionally | See package defaults | Main data column used for classification and tooltips. | Uses shared column properties from core. Required for data maps and bubble maps. |
|
|
43
|
+
| `columns.navigate` | `object` | Conditionally | `{ name: '' }` | URL column used in navigation mode. | Required when `general.type` is `navigation`. |
|
|
44
|
+
| `columns.latitude` | `object` | Conditionally | `{ name: '' }` | Latitude column for coordinate-based geocode and Google maps. | Required for `us-geocode`, `world-geocode`, and `google-map`. US/world bubble maps can resolve positions from built-in geography coordinates. |
|
|
45
|
+
| `columns.longitude` | `object` | Conditionally | `{ name: '' }` | Longitude column for coordinate-based geocode and Google maps. | Required for `us-geocode`, `world-geocode`, and `google-map`. US/world bubble maps can resolve positions from built-in geography coordinates. |
|
|
46
|
+
| `columns.categorical` | `object` | No | `{ name: '' }` | Category column for bubble maps using categorical legends. | `name` only. |
|
|
47
|
+
| `columns.hsa` | `object` | No | `{ name: '' }` | Optional HSA column used by county maps when HSA boundaries are shown. | `name` only. |
|
|
48
|
+
| `columns.additionalColumnN` | `object` | No | None | Additional persisted column configs for tooltip and data-table output. | Editor-created keys such as `additionalColumn0` use shared column display fields. |
|
|
49
|
+
|
|
50
|
+
## Copy And Shell Controls
|
|
51
|
+
|
|
52
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
53
|
+
| --- | --- | --- | --- | --- | --- |
|
|
54
|
+
| `general.title` | `string` | No | `''` | Main map title. | Hidden when `showTitle` is `false`. |
|
|
55
|
+
| `general.titleStyle` | `string` | No | `small` | Chooses the visual title treatment. | `legacy`, `large`, `small` |
|
|
56
|
+
| `general.showTitle` | `boolean` | No | `true` | Shows or hides the title. | `true`, `false` |
|
|
57
|
+
| `general.superTitle` | `string` | No | `''` | Optional small line above the main title. | Editor-managed. |
|
|
58
|
+
| `general.language` | `string` | No | `en` | Language code used by some map helpers and editor defaults. | Usually an ISO locale/language code. |
|
|
59
|
+
| `general.introText` | `string` | No | `''` | Intro copy shown in the shell. | Supports markup variables when enabled. |
|
|
60
|
+
| `general.subtext` | `string` | No | `''` | Supporting copy shown below the visualization. | Supports basic HTML plus markup variables when enabled. |
|
|
61
|
+
| `general.footnotes` | `string` | No | `''` | Legacy/simple footnote copy. | Prefer top-level `footnotes` for structured static or data-driven footnotes. |
|
|
62
|
+
| `footnotes` | [`Footnotes`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#footnotes) | No | None | Structured static or data-driven footnotes rendered below the map. | Shared footnotes shape from `@cdc/core`. |
|
|
63
|
+
| `general.navigationTarget` | `string` | No | `_self` | Target used when the map opens navigation URLs. | `_self`, `_blank` |
|
|
64
|
+
| `general.showSidebar` | `boolean \| "hidden"` | No | `true` | Shows the legend/sidebar region. | Author booleans for normal configs. Set to `false` for navigation and bubble layouts. Editor exports may contain `"hidden"`, but runtime treats that string as truthy, so it does not hide the legend. |
|
|
65
|
+
| `general.noDataMessage` | `string` | No | `No State Selected` | Message shown when a single-state map has no active selection. | Package-specific copy. |
|
|
66
|
+
| `general.annotationDropdownText` | `string` | No | `Annotations` | Label shown for the annotation dropdown. | Used when annotation dropdowns are enabled. |
|
|
67
|
+
| `general.showAnnotationDropdown` | `boolean` | No | `false` | Changes desktop visibility classes for the annotation dropdown. | Annotation dropdown markup renders when annotations exist; this flag controls whether it is shown in desktop layouts. |
|
|
68
|
+
| `general.geoBorderColor` | `string` | No | `darkGray` | Border color used for geography outlines. | `darkGray`, `sameAsBackground`, and other editor-supported color tokens. |
|
|
69
|
+
| `general.geoLabelOverride` | `string` | No | `''` | Overrides the geography label used in tooltips and other copy. | Useful when the map should say "Country", "State/Territory", or similar. |
|
|
70
|
+
| `general.fullBorder` | `boolean` | No | `false` | Adds a full border around navigation maps. | Mainly relevant when `general.type` is `navigation`. |
|
|
71
|
+
| `general.headerColor` | `string` | No | `theme-blue` | Map-owned header theme token. | Accepts shared [`ComponentThemes`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#componentthemes) values. |
|
|
72
|
+
| `general.displayStateLabels` | `boolean` | No | `true` | Shows state labels directly on the map. | `true`, `false` |
|
|
73
|
+
| `general.displayAsHex` | `boolean` | No | `false` | Switches the US map to a hex-style treatment. | Works with `hexMap`. |
|
|
74
|
+
| `general.equalNumberOptIn` | `boolean` | No | `false` | Enables the newer equal-number legend path. | Used when `legend.separateZero` and equal-number classification interact. |
|
|
75
|
+
| `general.allowMapZoom` | `boolean` | No | `true` | Enables zooming on supported map types. | Disabled in some editor flows and unsupported map modes. |
|
|
76
|
+
| `general.showClearSelectionButton` | `boolean` | No | `true` | Shows a Clear Selection control for dashboard maps that set a shared filter. | Only meaningful when the map is used inside a dashboard as a `setBy` control and a selection is currently active. Current runtime support is implemented for the U.S. map. |
|
|
77
|
+
| `general.hideGeoColumnInTooltip` | `boolean` | No | `false` | Hides the geography field name in tooltips. | `true`, `false` |
|
|
78
|
+
| `general.hidePrimaryColumnInTooltip` | `boolean` | No | `false` | Hides the primary data field name in tooltips. | `true`, `false` |
|
|
79
|
+
| `general.showDownloadImgButton` | `boolean` | No | `false` | Enables PNG/image download. | Editor-managed field. |
|
|
80
|
+
| `general.includeContextInDownload` | `boolean` | No | `false` | Includes heading and explanatory context in image downloads. | Only meaningful when image downloads are enabled. |
|
|
81
|
+
| `general.showDownloadPdfButton` | `boolean` | No | `false` | Enables PDF download. | Editor-managed field. |
|
|
82
|
+
| `general.showHSABoundaries` | `boolean` | No | `false` | Shows HSA boundaries on supported county maps. | Mainly relevant for health-system maps. |
|
|
83
|
+
| `general.showNeighboringStates` | `boolean` | No | `false` | Includes neighboring states in the county map outline. | Only relevant for county maps. |
|
|
84
|
+
| `general.showStateDropdown` | `boolean` | No | `false` | Shows a state picker in county views. | Only relevant for county maps. |
|
|
85
|
+
| `general.countyCensusYear`, `general.filterControlsCountyYear` | `string` | No | Package defaults | County census-year controls used by county map helpers and editor flows. | Only meaningful for county maps. |
|
|
86
|
+
| `general.filterControlsStatesPicked` | `string` | No | `''` | Source column used to derive selected states from filtered data. | Related to `general.statesPicked`; consumed by single-state/county helper logic. |
|
|
87
|
+
| `general.hideUnselectedStates` | `boolean` | No | `true` when states are picked | Controls whether selected-state maps hide or keep unselected states visible. | Only meaningful when `statesPicked` is populated on single-state maps. |
|
|
88
|
+
| `general.statesPicked` | `object[]` | No | `[]` | Selected states for single-state maps. | Each item has `fipsCode` and `stateName`. |
|
|
89
|
+
| `general.countriesPicked` | `object[]` | No | `[]` | Selected countries for world maps. | Each item has `iso` and `name`. Use supported ISO 3166-1 alpha-3 codes for `iso`; two-letter codes can fail selection and centering. |
|
|
90
|
+
| `general.hideUnselectedCountries` | `boolean` | No | `false` | Controls whether unselected countries are hidden or grayed out. | Only meaningful when `countriesPicked` is populated. |
|
|
91
|
+
| `general.territoriesAlwaysShow` | `boolean` | No | `false` in package initial state | Controls how U.S. territories are rendered on U.S. maps. | `true`, `false`. On county maps, `false` hides all territory counties, except migrated legacy configs with `migrations.showPuertoRico` can still render Puerto Rico for compatibility; `true` renders only territory counties with matching runtime data. On state maps, `false` renders only territories with matching runtime data; `true` renders all supported territories whether data exists or not. Normal loaded configs are seeded or migrated before rendering; lower-level geography helpers still treat an undefined value as enabled for legacy compatibility. |
|
|
92
|
+
| `general.territoriesLabel` | `string` | No | None | Label shown for the territories group in U.S. region maps. | Mainly relevant for `us-region`; legacy and example configs commonly use `Territories`. |
|
|
93
|
+
| `general.hasRegions` | `boolean` | No | `false` | Marks the map as region-aware for some data-loading and editor flows. | Mainly used by US regional map flows. |
|
|
94
|
+
|
|
95
|
+
The canonical palette configuration is shared in core. This package still accepts the legacy `color` field for older saved configs, but new configs should author `general.palette` instead.
|
|
96
|
+
|
|
97
|
+
## Classification And Palette
|
|
98
|
+
|
|
99
|
+
Legend configuration is shared with core. The map package honors the shared legend contract plus these map-specific fields and behaviors:
|
|
100
|
+
|
|
101
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
102
|
+
| --- | --- | --- | --- | --- | --- |
|
|
103
|
+
| `legend.type` | `string` | No | `equalnumber` | Chooses the classification strategy. | `equalnumber`, `equalinterval`, `category` |
|
|
104
|
+
| `legend.numberOfItems` | `number` | No | `5` | Number of legend classes for numeric legends. | Editor usually limits this to small integer values. |
|
|
105
|
+
| `legend.position` | `string` | No | `top` | Legend placement. | `top`, `bottom`, `left`, `right`, `side`, depending on layout. |
|
|
106
|
+
| `legend.style` | `string` | No | `gradient` | Legend marker or gradient style. | `circles`, `boxes`, `gradient` |
|
|
107
|
+
| `legend.subStyle` | `string` | No | `linear blocks` | Gradient legend treatment. | `linear blocks`, `smooth` |
|
|
108
|
+
| `legend.title`, `legend.description` | `string` | No | `''` | Legend heading and description. | Supports markup-variable processing in supported map flows. |
|
|
109
|
+
| `legend.descriptions` | `Record<string, string \| string[]>` | No | `{}` | Dynamic legend-description lookup used when `legend.dynamicDescription` is `true`. | Keys use the filter index and selected filter-value index, such as `0,0`. Editor-saved values may be strings or one-item string arrays. |
|
|
110
|
+
| `legend.specialClasses` | `{ key; label; value }[]` | No | `[]` | Extra legend classes for special cases. | Used for no-data or other override classes. |
|
|
111
|
+
| `legend.unified` | `boolean` | No | `false` | Uses unified legend behavior for compatible map modes. | `true`, `false` |
|
|
112
|
+
| `legend.singleColumn`, `legend.singleRow`, `legend.verticalSorted` | `boolean` | No | `false` | Layout and sorting controls for legend items. | Runtime may still adapt for available space. |
|
|
113
|
+
| `legend.showSpecialClassesLast` | `boolean` | No | `false` | Moves special classes to the end of the legend. | `true`, `false` |
|
|
114
|
+
| `legend.dynamicDescription` | `boolean` | No | `false` | Enables dynamic legend description behavior. | `true`, `false` |
|
|
115
|
+
|
|
116
|
+
When `legend` is omitted entirely, the package initial state supplies the defaults above. When a config provides a partial `legend` object, missing `numberOfItems`, `position`, `style`, and `hideBorder` can be backfilled from legacy defaults: `3`, `side`, `circles`, and `false`.
|
|
117
|
+
|
|
118
|
+
| Behavior | Details |
|
|
119
|
+
| --- | --- |
|
|
120
|
+
| `legend.separateZero` | When `true`, numeric legends split zero into its own class unless `general.equalNumberOptIn` changes the scaling path. |
|
|
121
|
+
| `legend.categoryValuesOrder` | Controls the order of categorical legend items and small-multiple tile sorting. |
|
|
122
|
+
| `legend.additionalCategories` | Adds extra category labels to the legend. |
|
|
123
|
+
| `legend.groupBy` | Groups categorical legend items when the editor uses grouped category views. |
|
|
124
|
+
| `legend.tickRotation` | Rotates legend tick labels in supported layouts. |
|
|
125
|
+
| `legend.hideBorder` | Hides the legend border when `true`. The default is `true` for the package’s current initial state. |
|
|
126
|
+
| `legend.singleColumnLegend` | Legacy flag used by older legend layouts. |
|
|
127
|
+
| `legend.separators` | Optional separator metadata used by gradient legends. |
|
|
128
|
+
|
|
129
|
+
## Filtering And Tables
|
|
130
|
+
|
|
131
|
+
Shared filter and table structures are documented in [`@cdc/core`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#filters) and [`@cdc/core` table docs](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#table). Map-specific behavior includes:
|
|
132
|
+
|
|
133
|
+
| Behavior | Details |
|
|
134
|
+
| --- | --- |
|
|
135
|
+
| `filterBehavior` | Controls whether the map updates immediately or waits for an explicit filter change in supporting editor flows. |
|
|
136
|
+
| `filterIntro` | Intro copy shown near the filter UI. |
|
|
137
|
+
| `table.forceDisplay` | Keeps the data table visible even when the current mode would normally hide it. |
|
|
138
|
+
| `table.showNonGeoData` | Includes non-geographic rows in map-related table output. |
|
|
139
|
+
| `table.showFullGeoNameInCSV` | Adds full geography names to CSV downloads when the formatter can resolve them. |
|
|
140
|
+
| `table.wrapColumns` | Allows map table cell content to wrap instead of staying on one line. |
|
|
141
|
+
|
|
142
|
+
## Map Features
|
|
143
|
+
|
|
144
|
+
### `map.layers`
|
|
145
|
+
|
|
146
|
+
Custom overlay or base layers added by the editor.
|
|
147
|
+
|
|
148
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
149
|
+
| --- | --- | --- | --- | --- | --- |
|
|
150
|
+
| `name` | `string` | No | None | Display name for the layer. | Editor-label metadata used in the accordion label; runtime rendering depends on `url` and `namespace`, not `name`. |
|
|
151
|
+
| `url` | `string` | Yes | None | Layer source URL. | Current runtime expects TopoJSON. Raw GeoJSON is not handled by this layer reader. |
|
|
152
|
+
| `namespace` | `string` | Yes | None | TopoJSON `objects` key used to select the layer geometry. | Required for rendering and also used when building layer ids. |
|
|
153
|
+
| `fill` | `string` | No | TopoJSON feature fill, then `transparent` | Fill color for the layer. | CSS color string. |
|
|
154
|
+
| `fillOpacity` | `number \| string` | No | TopoJSON `fill-opacity`, then `1` | Fill opacity for the layer. | Saved configs may contain either a number or numeric string. |
|
|
155
|
+
| `stroke` | `string` | No | TopoJSON feature stroke, then `transparent` | Stroke color for the layer. | CSS color string. |
|
|
156
|
+
| `strokeWidth` | `number \| string` | No | TopoJSON `stroke-width` when present | Stroke width for the layer. | Saved configs may contain either a number or numeric string. |
|
|
157
|
+
| `tooltip` | `string` | No | `''` | Tooltip text or HTML for the layer. | Empty string disables layer-specific tooltip content. |
|
|
158
|
+
|
|
159
|
+
### `map.patterns`
|
|
160
|
+
|
|
161
|
+
Pattern overlays applied to matching geography rows.
|
|
162
|
+
|
|
163
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
164
|
+
| --- | --- | --- | --- | --- | --- |
|
|
165
|
+
| `dataKey` | `string` | No | `''` | Column used to match the pattern. | Leave blank to match across all columns. |
|
|
166
|
+
| `dataValue` | `string` | No | `''` | Value that triggers the pattern. | Compared as a string or numeric-like value. |
|
|
167
|
+
| `pattern` | `string` | No | `circles` | Pattern type. | `circles`, `waves`, `lines` |
|
|
168
|
+
| `label` | `string` | No | `''` | Optional legend label for the pattern. | Displayed in the legend when present. |
|
|
169
|
+
| `size` | `string` | No | `medium` | Pattern density / size. | `small`, `medium`, `large` |
|
|
170
|
+
| `color` | `string` | No | `''` | Pattern color. | CSS color string. |
|
|
171
|
+
|
|
172
|
+
### `hexMap`
|
|
173
|
+
|
|
174
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
175
|
+
| --- | --- | --- | --- | --- | --- |
|
|
176
|
+
| `hexMap.type` | `string` | No | `''` | Chooses the hex-map rendering mode. | `shapes`, `standard`, or blank to disable. |
|
|
177
|
+
| `hexMap.shapeGroups` | `object[]` | No | `[]` or a single blank group in defaults | Groups of arrow/shape rules for hex-map cells. | See the nested fields below. |
|
|
178
|
+
|
|
179
|
+
`hexMap.shapeGroups[]`
|
|
180
|
+
|
|
181
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
182
|
+
| --- | --- | --- | --- | --- | --- |
|
|
183
|
+
| `legendTitle` | `string` | No | `''` | Title for the shape group in the legend. | Optional. |
|
|
184
|
+
| `legendDescription` | `string` | No | `''` | Description for the shape group. | Optional. |
|
|
185
|
+
| `items` | `object[]` | No | `[]` | Shape rules that determine which arrow or icon is shown. | Each item matches by `key`, `operator`, and `value`. |
|
|
186
|
+
|
|
187
|
+
`hexMap.shapeGroups[].items[]`
|
|
188
|
+
|
|
189
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
190
|
+
| --- | --- | --- | --- | --- | --- |
|
|
191
|
+
| `shape` | `string` | No | `Arrow Up` | Shape rendered for the rule. | Editor values include arrow directions. |
|
|
192
|
+
| `key` | `string` | No | `''` | Source column/key to inspect. | Current editor and runtime use this field for hex-shape matching. |
|
|
193
|
+
| `operator` | `string` | No | `=` | Comparison operator. | `=`, `≠`, `<`, `>`, `<=`, `>=` |
|
|
194
|
+
| `value` | `string` | No | `''` | Comparison value. | Compared against the configured key. |
|
|
195
|
+
|
|
196
|
+
### `smallMultiples`
|
|
197
|
+
|
|
198
|
+
Only supported for `us`, `single-state`, and `us-region` map types.
|
|
199
|
+
|
|
200
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
201
|
+
| --- | --- | --- | --- | --- | --- |
|
|
202
|
+
| `smallMultiples.mode` | `string` | No | `''` | Enables the small-multiples mode. | `by-column` when active. |
|
|
203
|
+
| `smallMultiples.tileColumn` | `string` | No | `''` | Column used to split the map into tiles. | Must be a column in the dataset. |
|
|
204
|
+
| `smallMultiples.tilesPerRowDesktop` | `number` | No | `2` | Number of tiles per row on desktop. | Editor limits this to small integer values. |
|
|
205
|
+
| `smallMultiples.tilesPerRowMobile` | `number` | No | `1` | Number of tiles per row on mobile. | Usually left alone. |
|
|
206
|
+
| `smallMultiples.tileOrderType` | `string` | No | `asc` | Tile ordering strategy. | `asc`, `desc`, `custom` |
|
|
207
|
+
| `smallMultiples.tileOrder` | `string[]` | No | `[]` | Explicit custom tile order. | Used only when `tileOrderType` is `custom`. |
|
|
208
|
+
| `smallMultiples.tileTitles` | `object` | No | `{}` | Optional custom title map per tile key. | Keys are tile identifiers. |
|
|
209
|
+
| `smallMultiples.synchronizedTooltips` | `boolean` | No | `true` | Keeps tooltips synchronized across tiles. | `true`, `false` |
|
|
210
|
+
|
|
211
|
+
### `annotations` and `markupVariables`
|
|
212
|
+
|
|
213
|
+
These structures are shared with core. In map configs, annotation dropdown markup renders when annotations exist; `general.showAnnotationDropdown` controls the desktop visibility treatment. Markup variables are applied to title, intro, subtext, legend, and other supported text fields when `enableMarkupVariables` is true.
|
|
214
|
+
|
|
215
|
+
## Layout And Interactivity
|
|
216
|
+
|
|
217
|
+
### Accessibility
|
|
218
|
+
|
|
219
|
+
Map configs can include [`altText`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#alttextconfig), the shared `AltTextConfig` object from core. The map runtime first builds a map-specific SVG `aria-label` from the rendered geography and data context, then appends the resolved static or metadata-driven `altText` description when one is available.
|
|
220
|
+
|
|
221
|
+
Shared shell styling flags on `visual` follow core [`ComponentStyles`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#componentstyles). Map-specific `visual` fields are listed here because they affect marker, bubble, and geocode rendering.
|
|
222
|
+
|
|
223
|
+
| Field | Type | Required | Default | Description | Allowed values / Notes |
|
|
224
|
+
| --- | --- | --- | --- | --- | --- |
|
|
225
|
+
| `mapPosition.coordinates` | `[number, number]` | No | `[0, 30]` | Initial map center. | The runtime may reset this when the geography changes. |
|
|
226
|
+
| `mapPosition.zoom` | `number` | No | `1` | Initial map zoom. | Editor/runtime may reset it when geography changes. |
|
|
227
|
+
| `visual.border` | `boolean` | No | `false` | Enables a component border. | Shared shell styling flag. |
|
|
228
|
+
| `visual.borderColorTheme` | `boolean` | No | `false` | Uses the theme color for the border. | Shared shell styling flag. |
|
|
229
|
+
| `visual.accent` | `boolean` | No | `false` | Enables accent styling. | Shared shell styling flag. |
|
|
230
|
+
| `visual.background` | `boolean` | No | `false` | Enables background styling. | Shared shell styling flag. |
|
|
231
|
+
| `visual.hideBackgroundColor` | `boolean` | No | `false` | Suppresses the background color. | Shared shell styling flag. |
|
|
232
|
+
| `visual.tp5Treatment` | `boolean` | No | `false` | Enables the TP5 shell treatment. | Mostly controlled by editor settings. |
|
|
233
|
+
| `visual.tp5Background` | `boolean` | No | `false` | Enables the TP5 cyan background. | Mostly controlled by editor settings. |
|
|
234
|
+
| `visual.minBubbleSize` | `number` | No | `1` | Minimum bubble radius. | Only relevant for bubble maps. |
|
|
235
|
+
| `visual.maxBubbleSize` | `number` | No | `20` | Maximum bubble radius. | Only relevant for bubble maps. |
|
|
236
|
+
| `visual.extraBubbleBorder` | `boolean` | No | `false` | Adds an extra border around bubbles. | Only relevant for bubble maps. |
|
|
237
|
+
| `visual.cityStyle` | `string` | No | `circle` | Default city marker shape. | `circle`, `pin`, `square`, `triangle`, `diamond`, `star` |
|
|
238
|
+
| `visual.cityStyleLabel` | `string` | No | `''` | Legend label for the default city style. | Optional. |
|
|
239
|
+
| `visual.geoCodeCircleSize` | `number` | No | `8` | Size used for geocode city markers. | Editor limits this to small integer values. |
|
|
240
|
+
| `visual.showBubbleZeros` | `boolean` | No | `false` | Shows bubble markers for zero values. | Only relevant for bubble maps. |
|
|
241
|
+
| `visual.additionalCityStyles` | `object[]` | No | `[]` | Extra city-style rules added in the editor. | Each rule uses `label`, `column`, `value`, and `shape`. |
|
|
242
|
+
| `tooltips.appearanceType` | `string` | No | `hover` | Chooses hover or click-based detail displays. | `hover`, `click` |
|
|
243
|
+
| `tooltips.linkLabel` | `string` | No | `Learn More` | Tooltip link label. | Used when `appearanceType` is `click`. |
|
|
244
|
+
| `tooltips.noDataLabel` | `string` | No | `No Data` render fallback | Text shown for missing data in the tooltip. | Omitted or empty values render as `No Data`. |
|
|
245
|
+
| `tooltips.opacity` | `number` | No | `90` | Tooltip opacity. | 0-100 in editor flows. |
|
|
246
|
+
|
|
247
|
+
## Fields You Can Ignore
|
|
248
|
+
|
|
249
|
+
These fields may appear in saved configs, editor exports, or runtime state, but consumers usually do not need to author them directly:
|
|
250
|
+
|
|
251
|
+
| Field or group | Why you can ignore it |
|
|
252
|
+
| --- | --- |
|
|
253
|
+
| `runtime.*` | Internal runtime state created by the package during initialization. |
|
|
254
|
+
| `defaultData`, `formattedData`, `datasets`, `runtimeDataUrl` | Loader/runtime artifacts rather than hand-authored standalone config. |
|
|
255
|
+
| `color` | Legacy top-level palette token. Author `general.palette` for current configs. |
|
|
256
|
+
| `sharing.*` | Loader/export metadata that belongs to editor or embed flows. |
|
|
257
|
+
| `migrations.*` | Migration bookkeeping that records which update steps have run. Preserve `migrations.showPuertoRico` when encountered in migrated county maps; runtime still reads it as legacy compatibility metadata. Only set `migrations.showPuertoRico: false` when explicitly opting a county map out of the legacy Puerto Rico rendering shim. |
|
|
258
|
+
| `dataTable` | Top-level legacy/export artifact; table behavior is configured through `table`. |
|
|
259
|
+
| `usingWidgetLoader` | Internal loader flag. |
|
|
260
|
+
| `newViz` | Editor-only preview/confirmation flag. |
|
|
261
|
+
| `general.filterControlsStatePicked` | Legacy singular editor-control artifact; use `general.statesPicked` for authored selected-state config. |
|
|
262
|
+
| `general.convertFipsCodes` | Legacy/editor-authored FIPS conversion flag. Current runtime normalizes FIPS-like values during U.S. and county map load regardless of this value. |
|
|
263
|
+
| `general.showDownloadMediaButton` | Legacy editor control; current rendering uses `general.showDownloadImgButton` and `general.showDownloadPdfButton` directly. |
|
|
264
|
+
| `general.territoriesAlwayShow` | Misspelled legacy artifact from an older migration bug. The runtime repairs this to `general.territoriesAlwaysShow`; do not author it manually. |
|
|
265
|
+
| `map.patterns[].contrastCheck` | Editor validation state for pattern contrast; changing it does not affect rendered pattern matching or styling. |
|
|
266
|
+
| `hexMap.shapeGroups[].items[].column` | Legacy/stale hex-shape field; author `hexMap.shapeGroups[].items[].key` for current runtime matching. |
|
|
267
|
+
| `statePicked` | Legacy saved-config artifact from older editor flows. |
|
|
268
|
+
| `general.showDownloadButton`, `general.expandDataTable` | Legacy editor state from older configs. Current table behavior uses `table.download` and `table.expanded`. |
|
package/README.md
CHANGED
|
@@ -2,42 +2,92 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@cdc/map)
|
|
4
4
|
|
|
5
|
-
React component for visualizing tabular data on a map of the United States or the world.
|
|
5
|
+
`<CdcMap />` is a React component for visualizing tabular data on a map of the United States or the world.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
* [Numeric Maps](https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-numeric-maps.html)
|
|
9
|
-
* [World Map](https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-world-data-map.html)
|
|
10
|
-
* [Categorical Map](https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-categorical-maps.html)
|
|
11
|
-
* [Filterable Map](https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-numeric-maps-filterable.html)
|
|
7
|
+
## Installation
|
|
12
8
|
|
|
13
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install @cdc/map
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
2. Import the component and begin using in your code.
|
|
15
|
+
Pass a `config` object directly to the component:
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
<!-- README_EXAMPLE_CONFIG_START -->
|
|
18
|
+
```jsx
|
|
19
19
|
import CdcMap from '@cdc/map'
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const config = {
|
|
22
|
+
version: '4.26.4',
|
|
23
|
+
general: {
|
|
24
|
+
title: 'Minimal US Map',
|
|
25
|
+
geoType: 'us',
|
|
26
|
+
type: 'data',
|
|
27
|
+
showTitle: true,
|
|
28
|
+
palette: {
|
|
29
|
+
name: 'sequential_blue',
|
|
30
|
+
version: '2.0',
|
|
31
|
+
isReversed: false
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
type: 'map',
|
|
35
|
+
columns: {
|
|
36
|
+
geo: { name: 'FIPS Codes', label: 'Location', tooltip: false, dataTable: true },
|
|
37
|
+
primary: { name: 'Rate', label: 'Rate', prefix: '', suffix: '%', tooltip: true, dataTable: true },
|
|
38
|
+
navigate: { name: '' },
|
|
39
|
+
latitude: { name: '' },
|
|
40
|
+
longitude: { name: '' }
|
|
41
|
+
},
|
|
42
|
+
legend: {
|
|
43
|
+
type: 'equalnumber',
|
|
44
|
+
numberOfItems: 3,
|
|
45
|
+
position: 'side',
|
|
46
|
+
style: 'circles',
|
|
47
|
+
title: 'Legend',
|
|
48
|
+
description: '',
|
|
49
|
+
descriptions: {},
|
|
50
|
+
specialClasses: [],
|
|
51
|
+
unified: false,
|
|
52
|
+
singleColumn: false,
|
|
53
|
+
singleRow: false,
|
|
54
|
+
verticalSorted: false,
|
|
55
|
+
showSpecialClassesLast: false,
|
|
56
|
+
dynamicDescription: false,
|
|
57
|
+
hideBorder: false
|
|
58
|
+
},
|
|
59
|
+
filters: [],
|
|
60
|
+
filterBehavior: 'Filter Change',
|
|
61
|
+
data: [
|
|
62
|
+
{ 'FIPS Codes': '01', Rate: 10 },
|
|
63
|
+
{ 'FIPS Codes': '02', Rate: 20 },
|
|
64
|
+
{ 'FIPS Codes': '04', Rate: 30 }
|
|
65
|
+
]
|
|
66
|
+
}
|
|
22
67
|
|
|
68
|
+
function App() {
|
|
23
69
|
return (
|
|
24
|
-
<div className=
|
|
25
|
-
<CdcMap />
|
|
70
|
+
<div className='App'>
|
|
71
|
+
<CdcMap config={config} />
|
|
26
72
|
</div>
|
|
27
|
-
)
|
|
73
|
+
)
|
|
28
74
|
}
|
|
29
75
|
|
|
30
|
-
export default App
|
|
76
|
+
export default App
|
|
31
77
|
```
|
|
78
|
+
<!-- README_EXAMPLE_CONFIG_END -->
|
|
79
|
+
|
|
80
|
+
You can also load configuration from a URL with `<CdcMap configUrl='/path/to/config.json' />`.
|
|
81
|
+
|
|
82
|
+
## Configuration
|
|
83
|
+
|
|
84
|
+
The primary reference for authoring configs is [CONFIG.md](./CONFIG.md).
|
|
32
85
|
|
|
33
|
-
|
|
86
|
+
If you are reading this in a context where relative Markdown links do not open correctly, use the [GitHub copy of the map config reference](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/map/CONFIG.md).
|
|
34
87
|
|
|
35
|
-
|
|
88
|
+
## Properties
|
|
36
89
|
|
|
37
|
-
| Property
|
|
38
|
-
|
|
39
|
-
|
|
|
40
|
-
| configUrl
|
|
41
|
-
| config | Object | You can pass the raw configuration object directly as a prop. For help generating such an object, use the built in editor. |
|
|
42
|
-
| isEditor | Boolean | A simple flag that will load the editor for the maps inside your app. Helpful to provide a user interface instead of having to edit raw JSON. |
|
|
43
|
-
| className | String | Lets you add a custom class name to the outermost container element of the map. |
|
|
90
|
+
| Property | Type | Description |
|
|
91
|
+
| --- | --- | --- |
|
|
92
|
+
| `config` | `object` | Configuration object for the map. This is the primary integration path for React consumers. |
|
|
93
|
+
| `configUrl` | `string` | Optional URL to a JSON config file. Use this when you want the component to fetch its config at runtime. |
|