From 2d3a9a936da80a642eabab5e9fedaf56ba78caea Mon Sep 17 00:00:00 2001 From: Jay Boice Date: Wed, 8 Jan 2025 11:12:22 -0500 Subject: [PATCH 1/6] [DEV-10065] Map UX improvements (#1819) * Map territory and annotation box UX improvements * Use bootstrap for padding * Change territory label class --- .../Annotations/components/AnnotationDropdown.tsx | 2 +- .../map/src/components/Annotation/AnnotationDropdown.tsx | 2 +- .../src/components/UsaMap/components/TerritoriesSection.tsx | 4 ++-- packages/map/src/scss/map.scss | 6 +----- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/chart/src/components/Annotations/components/AnnotationDropdown.tsx b/packages/chart/src/components/Annotations/components/AnnotationDropdown.tsx index b49f3d48e..2a2ab18fb 100644 --- a/packages/chart/src/components/Annotations/components/AnnotationDropdown.tsx +++ b/packages/chart/src/components/Annotations/components/AnnotationDropdown.tsx @@ -21,7 +21,7 @@ const AnnotationDropdown = () => { } const handleAccordionClassName = () => { - const classNames = ['data-table-heading', 'annotation__dropdown-list'] + const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3'] if (!expanded) { classNames.push('collapsed') } diff --git a/packages/map/src/components/Annotation/AnnotationDropdown.tsx b/packages/map/src/components/Annotation/AnnotationDropdown.tsx index a5ac4c472..dbb471830 100644 --- a/packages/map/src/components/Annotation/AnnotationDropdown.tsx +++ b/packages/map/src/components/Annotation/AnnotationDropdown.tsx @@ -21,7 +21,7 @@ const AnnotationDropdown = () => { } const handleAccordionClassName = () => { - const classNames = ['data-table-heading', 'annotation__dropdown-list'] + const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3'] if (!expanded) { classNames.push('collapsed') } diff --git a/packages/map/src/components/UsaMap/components/TerritoriesSection.tsx b/packages/map/src/components/UsaMap/components/TerritoriesSection.tsx index ceadd6ffd..525ca1fea 100644 --- a/packages/map/src/components/UsaMap/components/TerritoriesSection.tsx +++ b/packages/map/src/components/UsaMap/components/TerritoriesSection.tsx @@ -36,13 +36,13 @@ const TerritoriesSection: React.FC = ({ territories, lo
{usTerritories.length > 0 && ( <> -
US Territories:
+
U.S. Territories
{usTerritories} )} {freelyAssociatedStates.length > 0 && ( <> -
Freely Associated States:
+
Freely Associated States
{freelyAssociatedStates} )} diff --git a/packages/map/src/scss/map.scss b/packages/map/src/scss/map.scss index 02c95f342..ef8749f77 100644 --- a/packages/map/src/scss/map.scss +++ b/packages/map/src/scss/map.scss @@ -102,10 +102,7 @@ $medium: 768px; } .territories-label { - color: black; - font-size: 1.1em; - display: block; - margin-top: 15px; + font-size: 1em; } // Cities and Territories @@ -194,7 +191,6 @@ $medium: 768px; transform: none; } .territories { - font-size: 1em; > span { margin-left: 0; } From 5e0600ac99e8f2bc47f2c6f0b0c237ad6f894f70 Mon Sep 17 00:00:00 2001 From: Adam Doe <17502761+adamdoe@users.noreply.github.com> Date: Wed, 8 Jan 2025 09:17:26 -0800 Subject: [PATCH 2/6] [resize-observer] fix resize observer issue (#1818) * [resize-observer] fix resize observer issue * [resize-observer] resolve color update issue --- packages/core/helpers/coveUpdateWorker.ts | 2 ++ packages/core/helpers/isOlderVersion.ts | 20 ++++++++++++++++++ packages/core/helpers/useDataVizClasses.ts | 4 +--- packages/core/helpers/ver/4.24.11.ts | 18 ++++++++++++++++ packages/core/helpers/ver/4.25.1.ts | 2 +- packages/map/index.html | 9 +++++--- packages/map/src/CdcMap.tsx | 14 +++++-------- packages/map/src/_stories/CdcMap.stories.tsx | 2 +- .../_stories/_mock/example-city-state.json | 2 +- .../Annotation/Annotation.Draggable.tsx | 5 ++--- .../Annotation/AnnotationDropdown.tsx | 4 +--- packages/map/src/components/DataTable.tsx | 6 +++--- .../components/Legend/components/Legend.tsx | 6 ++---- .../Legend/components/LegendItem.Hex.tsx | 4 +--- packages/map/src/components/Modal.tsx | 4 +--- .../map/src/helpers/applyColorToLegend.ts | 6 +++--- packages/map/src/hooks/useResizeObserver.ts | 21 ++++++++++++++++--- 17 files changed, 86 insertions(+), 43 deletions(-) create mode 100644 packages/core/helpers/isOlderVersion.ts create mode 100644 packages/core/helpers/ver/4.24.11.ts diff --git a/packages/core/helpers/coveUpdateWorker.ts b/packages/core/helpers/coveUpdateWorker.ts index 7186804d6..63b930d81 100644 --- a/packages/core/helpers/coveUpdateWorker.ts +++ b/packages/core/helpers/coveUpdateWorker.ts @@ -10,6 +10,7 @@ import update_4_24_7 from './ver/4.24.7' import update_4_24_9 from './ver/4.24.9' import versionNeedsUpdate from './ver/versionNeedsUpdate' import update_4_24_10 from './ver/4.24.10' +import update_4_24_11 from './ver/4.24.11' import update_4_25_1 from './ver/4.25.1' export const coveUpdateWorker = config => { @@ -22,6 +23,7 @@ export const coveUpdateWorker = config => { ['4.24.7', update_4_24_7, true], ['4.24.9', update_4_24_9], ['4.24.10', update_4_24_10], + ['4.24.11', update_4_24_11], ['4.25.1', update_4_25_1] ] diff --git a/packages/core/helpers/isOlderVersion.ts b/packages/core/helpers/isOlderVersion.ts new file mode 100644 index 000000000..9fac1a8a2 --- /dev/null +++ b/packages/core/helpers/isOlderVersion.ts @@ -0,0 +1,20 @@ +/** + * Determines if the previous version is older than the current version. + * + * This function compares two version strings in the format "major.minor.patch". + * It returns `true` if the `previousVersion` is older than the `currentVersion`, + * otherwise it returns `false`. + * + * @param previousVersion - The version string to compare against the current version. + * @param currentVersion - The version string to compare with the previous version. + * @returns `true` if the previous version is older, otherwise `false`. + */ +export default function isOlderVersion(previousVersion: string, currentVersion: string): boolean { + if (!previousVersion) return true + const [prevMajor, prevMinor, prevPatch] = previousVersion.split('.').map(Number) + const [currMajor, currMinor, currPatch] = currentVersion.split('.').map(Number) + if (currMajor > prevMajor) return false + if (currMajor === prevMajor && currMinor > prevMinor) return false + if (currMajor === prevMajor && currMinor === prevMinor && currPatch > prevPatch) return false + return true +} diff --git a/packages/core/helpers/useDataVizClasses.ts b/packages/core/helpers/useDataVizClasses.ts index b30513e40..4c626bcc2 100644 --- a/packages/core/helpers/useDataVizClasses.ts +++ b/packages/core/helpers/useDataVizClasses.ts @@ -1,7 +1,7 @@ import useResizeObserver from '@cdc/map/src/hooks/useResizeObserver' import { isBelowBreakpoint } from './viewports' -export default function useDataVizClasses(config) { +export default function useDataVizClasses(config, viewport = null) { const { legend, lineDatapointStyle, @@ -15,8 +15,6 @@ export default function useDataVizClasses(config) { shadow } = config - const { currentViewport: viewport } = useResizeObserver(false) - let lineDatapointClass = '' if (lineDatapointStyle === 'hover') { diff --git a/packages/core/helpers/ver/4.24.11.ts b/packages/core/helpers/ver/4.24.11.ts new file mode 100644 index 000000000..bd71f4c6d --- /dev/null +++ b/packages/core/helpers/ver/4.24.11.ts @@ -0,0 +1,18 @@ +import _ from 'lodash' + +const addColorMigration = config => { + // add new property + config.migrations = config.migrations || {} + config.migrations.addColorMigration = true + return config +} + +const update_4_24_11 = config => { + const ver = '4.24.11' + const newConfig = _.cloneDeep(config) + addColorMigration(newConfig) + newConfig.version = ver + return newConfig +} + +export default update_4_24_11 diff --git a/packages/core/helpers/ver/4.25.1.ts b/packages/core/helpers/ver/4.25.1.ts index 29ed14ae6..efc9ee1d5 100644 --- a/packages/core/helpers/ver/4.25.1.ts +++ b/packages/core/helpers/ver/4.25.1.ts @@ -10,7 +10,7 @@ const removeTerritoriesLabel = config => { const update_4_25_1 = config => { const ver = '4.25.1' const newConfig = _.cloneDeep(config) - removeTerritoriesLabel(config) + removeTerritoriesLabel(newConfig) newConfig.version = ver return newConfig } diff --git a/packages/map/index.html b/packages/map/index.html index 81b43cecc..80ae96a74 100644 --- a/packages/map/index.html +++ b/packages/map/index.html @@ -18,7 +18,7 @@ -
+
@@ -28,9 +28,12 @@ -
+ - +
diff --git a/packages/map/src/CdcMap.tsx b/packages/map/src/CdcMap.tsx index 3d6437c89..f30b4a050 100644 --- a/packages/map/src/CdcMap.tsx +++ b/packages/map/src/CdcMap.tsx @@ -118,11 +118,10 @@ const CdcMap = ({ const [filteredCountryCode, setFilteredCountryCode] = useState() const [position, setPosition] = useState(state.mapPosition) const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false) - const [container, setContainer] = useState() const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`) // eslint-disable-line const [requiredColumns, setRequiredColumns] = useState(null) // Simple state so we know if we need more information before parsing the map const [projection, setProjection] = useState(null) - const { currentViewport, resizeObserver, dimensions } = useResizeObserver(isEditor) + const { currentViewport, dimensions, container, outerContainerRef } = useResizeObserver(isEditor) const legendRef = useRef(null) const tooltipRef = useRef(null) @@ -933,12 +932,6 @@ const CdcMap = ({ } }) - const outerContainerRef = useCallback(node => { - if (node !== null) { - resizeObserver.observe(node) - } - setContainer(node) - }, []) // eslint-disable-line const mapSvg = useRef(null) // this is passed DOWN into the various components @@ -1450,7 +1443,10 @@ const CdcMap = ({ tooltipRef, topoData, setTopoData, - mapId + mapId, + outerContainerRef, + dimensions, + currentViewport } if (!mapProps.data || !state.data) return <> diff --git a/packages/map/src/_stories/CdcMap.stories.tsx b/packages/map/src/_stories/CdcMap.stories.tsx index e4c8d6dac..699187cb9 100644 --- a/packages/map/src/_stories/CdcMap.stories.tsx +++ b/packages/map/src/_stories/CdcMap.stories.tsx @@ -149,7 +149,7 @@ export const Standard_Color_Distributions_Without_Special_Classes: Story = { export const Custom_Color_Distributions_With_Update_Needed: Story = { args: { - config: editConfigKeys(newConfig, [{ path: ['version'], value: '4.24.11' }]) + config: editConfigKeys(newConfig, [{ path: ['version'], value: '4.24.10' }]) } } diff --git a/packages/map/src/_stories/_mock/example-city-state.json b/packages/map/src/_stories/_mock/example-city-state.json index a11492dd8..df0edbe71 100644 --- a/packages/map/src/_stories/_mock/example-city-state.json +++ b/packages/map/src/_stories/_mock/example-city-state.json @@ -854,5 +854,5 @@ } ], "filterStyle": "Filter Changes", - "version": "4.24.12" + "version": "4.24.11" } \ No newline at end of file diff --git a/packages/map/src/components/Annotation/Annotation.Draggable.tsx b/packages/map/src/components/Annotation/Annotation.Draggable.tsx index a76ef5bea..b7df7fc0a 100644 --- a/packages/map/src/components/Annotation/Annotation.Draggable.tsx +++ b/packages/map/src/components/Annotation/Annotation.Draggable.tsx @@ -9,7 +9,6 @@ import { MarkerArrow } from '@visx/marker' import './Annotation.Draggable.styles.css' import ConfigContext from '../../context' import { MapContext } from '../../types/MapContext' -import useResizeObserver from '../../hooks/useResizeObserver' const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => { const [draggingItems, setDraggingItems] = useState([]) @@ -17,9 +16,9 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => { state: config, setState: updateConfig, isDraggingAnnotation, - isEditor + isEditor, + dimensions } = useContext(ConfigContext) - const { dimensions } = useResizeObserver(isEditor) const [width, height] = dimensions const { annotations } = config const prevDimensions = useRef(dimensions) diff --git a/packages/map/src/components/Annotation/AnnotationDropdown.tsx b/packages/map/src/components/Annotation/AnnotationDropdown.tsx index dbb471830..fe9da9a7b 100644 --- a/packages/map/src/components/Annotation/AnnotationDropdown.tsx +++ b/packages/map/src/components/Annotation/AnnotationDropdown.tsx @@ -4,11 +4,9 @@ import './AnnotationDropdown.styles.css' import Icon from '@cdc/core/components/ui/Icon' import { appFontSize } from '@cdc/core/helpers/cove/fontSettings' import AnnotationList from './AnnotationList' -import useResizeObserver from '../../hooks/useResizeObserver' const AnnotationDropdown = () => { - const { state: config, isEditor } = useContext(ConfigContext) - const { currentViewport: viewport } = useResizeObserver(isEditor) + const { state: config, isEditor, currentViewport: viewport } = useContext(ConfigContext) const [expanded, setExpanded] = useState(false) const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${appFontSize}px` diff --git a/packages/map/src/components/DataTable.tsx b/packages/map/src/components/DataTable.tsx index dd4fc381a..42a4fad24 100644 --- a/packages/map/src/components/DataTable.tsx +++ b/packages/map/src/components/DataTable.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, memo } from 'react' +import React, { useEffect, useState, memo, useContext } from 'react' import Papa from 'papaparse' import ExternalIcon from '../images/external-link.svg' // TODO: Move to Icon component @@ -11,7 +11,7 @@ import SkipTo from '@cdc/core/components/elements/SkipTo' import Loading from '@cdc/core/components/Loading' import { navigationHandler } from '../helpers/navigationHandler' -import useResizeObserver from '../hooks/useResizeObserver' +import ConfigContext from '../context' /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */ const DataTable = props => { @@ -33,10 +33,10 @@ const DataTable = props => { setFilteredCountryCode } = props + const { currentViewport: viewport } = useContext(ConfigContext) const [expanded, setExpanded] = useState(expandDataTable) const [sortBy, setSortBy] = useState({ column: 'geo', asc: false }) const [accessibilityLabel, setAccessibilityLabel] = useState('') - const { currentViewport: viewport } = useResizeObserver(false) const fileName = `${mapTitle || 'data-table'}.csv` // Catch all sorting method used on load by default but also on user click diff --git a/packages/map/src/components/Legend/components/Legend.tsx b/packages/map/src/components/Legend/components/Legend.tsx index e887c903d..2a4c66d6a 100644 --- a/packages/map/src/components/Legend/components/Legend.tsx +++ b/packages/map/src/components/Legend/components/Legend.tsx @@ -20,7 +20,6 @@ import './index.scss' import { type ViewPort } from '@cdc/core/types/ViewPort' import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports' import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText' -import useResizeObserver from '../../../hooks/useResizeObserver' const LEGEND_PADDING = 30 @@ -33,8 +32,7 @@ type LegendProps = { const Legend = forwardRef((props, ref) => { const { skipId, containerWidthPadding } = props - const { isEditor } = useContext(ConfigContext) - const { currentViewport, dimensions } = useResizeObserver(isEditor) + const { isEditor, dimensions, currentViewport } = useContext(ConfigContext) const { // prettier-ignore @@ -224,7 +222,7 @@ const Legend = forwardRef((props, ref) => { } const legendListItems = legendList(isLegendGradient) - const { legendClasses } = useDataVizClasses(state) + const { legendClasses } = useDataVizClasses(state, viewport) const handleReset = e => { const legend = ref.current diff --git a/packages/map/src/components/Legend/components/LegendItem.Hex.tsx b/packages/map/src/components/Legend/components/LegendItem.Hex.tsx index e925545d9..41c45f4c7 100644 --- a/packages/map/src/components/Legend/components/LegendItem.Hex.tsx +++ b/packages/map/src/components/Legend/components/LegendItem.Hex.tsx @@ -1,11 +1,9 @@ import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses' import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai' import parse from 'html-react-parser' -import useResizeObserver from '../../../hooks/useResizeObserver' const LegendItemHex = props => { - const { state } = props - const { currentViewport: viewport } = useResizeObserver(false) + const { state, currentViewport: viewport } = props const getItemShape = shape => { switch (shape) { diff --git a/packages/map/src/components/Modal.tsx b/packages/map/src/components/Modal.tsx index 7c9eb626d..e760ca9ac 100644 --- a/packages/map/src/components/Modal.tsx +++ b/packages/map/src/components/Modal.tsx @@ -2,15 +2,13 @@ import { useContext } from 'react' import LegendShape from '@cdc/core/components/LegendShape' import ConfigContext from '../context' import Icon from '@cdc/core/components/ui/Icon' -import useResizeObserver from '../hooks/useResizeObserver' const Modal = () => { - const { applyTooltipsToGeo, applyLegendToRow, content, state } = useContext(ConfigContext) + const { applyTooltipsToGeo, applyLegendToRow, content, state, currentViewport: viewport } = useContext(ConfigContext) const { capitalizeLabels } = state.tooltips const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx') const type = state.general.type const legendColors = applyLegendToRow(content.keyedData) - const { currentViewport: viewport } = useResizeObserver(false) return (
{ const [dimensions, setDimensions] = useState([0, 0]) - const [currentViewport, setCurrentViewport] = useState('lg') + const [currentViewport, setCurrentViewport] = useState(null) + const [container, setContainer] = useState(null) const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { @@ -24,7 +25,21 @@ export const useResizeObserver = (isEditor: boolean) => { } }) - return { resizeObserver, dimensions, currentViewport } + const outerContainerRef = useCallback(node => { + if (node !== null) { + resizeObserver.observe(node) + } + setContainer(node) + + return () => { + resizeObserver.disconnect() + } + }, []) + + useEffect(() => { + console.log('Final dimensions:', dimensions) + }, [dimensions]) + return { resizeObserver, dimensions, currentViewport, outerContainerRef, container } } export default useResizeObserver From 483425f0bb4f6cd432f520556e20dfa9c67d9674 Mon Sep 17 00:00:00 2001 From: Adam Doe <17502761+adamdoe@users.noreply.github.com> Date: Wed, 8 Jan 2025 19:05:11 -0800 Subject: [PATCH 3/6] [dev] handle no state in displayDataAsText --- packages/core/helpers/displayDataAsText.ts | 9 ++++++++- packages/dashboard/index.html | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/core/helpers/displayDataAsText.ts b/packages/core/helpers/displayDataAsText.ts index 4cd007d0f..783ab0696 100644 --- a/packages/core/helpers/displayDataAsText.ts +++ b/packages/core/helpers/displayDataAsText.ts @@ -1,12 +1,19 @@ import { MapConfig } from '@cdc/map/src/types/MapConfig' export const displayDataAsText = (value: string | number, columnName, state: MapConfig) => { + if (!state) return value + if (value === null || value === '' || value === undefined) { return '' } // if string of letters like 'Home' then don't need to format as a number - if (typeof value === 'string' && value.length > 0 && /[a-zA-Z]/.test(value) && state.legend.type === 'equalnumber') { + if ( + typeof value === 'string' && + value.length > 0 && + /[a-zA-Z]/.test(value) && + state?.legend?.type === 'equalnumber' + ) { return value } diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html index c4ef4d4e9..bc06c978a 100644 --- a/packages/dashboard/index.html +++ b/packages/dashboard/index.html @@ -30,7 +30,7 @@ -
+
From c2ba4e4e843a699dd598cd23945ff10e25a0eb30 Mon Sep 17 00:00:00 2001 From: Adam Doe <17502761+adamdoe@users.noreply.github.com> Date: Wed, 8 Jan 2025 19:07:25 -0800 Subject: [PATCH 4/6] [dev] fix border on map legends --- packages/map/src/components/Legend/components/Legend.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/map/src/components/Legend/components/Legend.tsx b/packages/map/src/components/Legend/components/Legend.tsx index 2a4c66d6a..a0d07c3f7 100644 --- a/packages/map/src/components/Legend/components/Legend.tsx +++ b/packages/map/src/components/Legend/components/Legend.tsx @@ -42,7 +42,7 @@ const Legend = forwardRef((props, ref) => { setAccessibleStatus, setRuntimeLegend, state, - viewport, + currentViewport: viewport, mapId } = useContext(ConfigContext) From 42c05b29b22e8cada3a6dcee61a06a82e3261d17 Mon Sep 17 00:00:00 2001 From: Jay Boice Date: Thu, 9 Jan 2025 10:00:17 -0500 Subject: [PATCH 5/6] Enhancement [DEV-10238] Top spacing (#1823) * Add stories * Improve top element spacing --- packages/chart/src/CdcChart.tsx | 2 +- .../Visualization/visualizations.scss | 2 +- packages/core/components/ui/Title/index.tsx | 2 +- .../dashboard/src/CdcDashboardComponent.tsx | 2 +- .../src/_stories/Dashboard.stories.tsx | 32 +++++++++++++++++++ .../_stories/_mock/data-bite-dash-test.json | 1 + .../_stories/_mock/data-bite-dash-test_1.json | 1 + .../_mock/data-bite-dash-test_1_1.json | 1 + .../_mock/data-bite-dash-test_1_1_1.json | 1 + .../MultiConfigTabs/MultiConfigTabs.tsx | 2 +- .../components/MultiConfigTabs/MultiTabs.tsx | 2 +- .../src/components/VisualizationRow.tsx | 2 +- packages/map/src/CdcMap.tsx | 2 +- 13 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 packages/dashboard/src/_stories/_mock/data-bite-dash-test.json create mode 100644 packages/dashboard/src/_stories/_mock/data-bite-dash-test_1.json create mode 100644 packages/dashboard/src/_stories/_mock/data-bite-dash-test_1_1.json create mode 100644 packages/dashboard/src/_stories/_mock/data-bite-dash-test_1_1_1.json diff --git a/packages/chart/src/CdcChart.tsx b/packages/chart/src/CdcChart.tsx index 6231d7165..d7f1a3689 100644 --- a/packages/chart/src/CdcChart.tsx +++ b/packages/chart/src/CdcChart.tsx @@ -1289,7 +1289,7 @@ const CdcChart = ({ isDashboard={isDashboard} title={title} superTitle={config.superTitle} - classes={['chart-title', `${config.theme}`, 'cove-component__header']} + classes={['chart-title', `${config.theme}`, 'cove-component__header', 'mb-3']} style={undefined} /> diff --git a/packages/core/components/Layout/components/Visualization/visualizations.scss b/packages/core/components/Layout/components/Visualization/visualizations.scss index 9dfeef319..2543d6e65 100644 --- a/packages/core/components/Layout/components/Visualization/visualizations.scss +++ b/packages/core/components/Layout/components/Visualization/visualizations.scss @@ -1,6 +1,6 @@ .cdc-open-viz-module { .cdc-chart-inner-container .cove-component__content { - padding: 1rem 15px 27px 0 !important; + padding: 0 15px 27px 0 !important; } &.isEditor { overflow: auto; diff --git a/packages/core/components/ui/Title/index.tsx b/packages/core/components/ui/Title/index.tsx index 0ec7a2427..9fddd3ee8 100644 --- a/packages/core/components/ui/Title/index.tsx +++ b/packages/core/components/ui/Title/index.tsx @@ -16,7 +16,7 @@ const Title = (props: HeaderProps) => { const { isDashboard, title, superTitle, classes = [], showTitle = true, ariaLevel = 2 } = props // standard classes every vis should have - const updatedClasses = ['cove-component__header', 'component__header', ...classes] + const updatedClasses = ['cove-component__header', 'component__header', 'mb-3', ...classes] return ( title && diff --git a/packages/dashboard/src/CdcDashboardComponent.tsx b/packages/dashboard/src/CdcDashboardComponent.tsx index 9bb9502d1..5c5eb7dd7 100644 --- a/packages/dashboard/src/CdcDashboardComponent.tsx +++ b/packages/dashboard/src/CdcDashboardComponent.tsx @@ -534,7 +534,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug = classes={[`dashboard-title`, `${config.dashboard.theme ?? 'theme-blue'}`]} /> {/* Description */} - {description &&
{parse(description)}
} + {description &&
{parse(description)}
} {/* Visualizations */} {config.rows && config.rows diff --git a/packages/dashboard/src/_stories/Dashboard.stories.tsx b/packages/dashboard/src/_stories/Dashboard.stories.tsx index b74f64f0c..c6b5dc2cc 100644 --- a/packages/dashboard/src/_stories/Dashboard.stories.tsx +++ b/packages/dashboard/src/_stories/Dashboard.stories.tsx @@ -24,6 +24,10 @@ import { ConfigRow } from '../types/ConfigRow' import BumpChartConfig from './_mock/bump-chart.json' import MethodologyConfig from './_mock/methodology.json' import methodologyAPI from './_mock/methodologyAPI' +import TopSpacing_1 from './_mock/data-bite-dash-test.json' +import TopSpacing_2 from './_mock/data-bite-dash-test_1.json' +import TopSpacing_3 from './_mock/data-bite-dash-test_1_1.json' +import TopSpacing_4 from './_mock/data-bite-dash-test_1_1_1.json' const meta: Meta = { title: 'Components/Pages/Dashboard', @@ -403,4 +407,32 @@ export const RegressionMultiVisualization: Story = { } } +export const Top_Spacing_1: Story = { + args: { + config: TopSpacing_1, + isEditor: false + } +} + +export const Top_Spacing_2: Story = { + args: { + config: TopSpacing_2, + isEditor: false + } +} + +export const Top_Spacing_3: Story = { + args: { + config: TopSpacing_3, + isEditor: false + } +} + +export const Top_Spacing_4: Story = { + args: { + config: TopSpacing_4, + isEditor: false + } +} + export default meta diff --git a/packages/dashboard/src/_stories/_mock/data-bite-dash-test.json b/packages/dashboard/src/_stories/_mock/data-bite-dash-test.json new file mode 100644 index 000000000..c7365a18f --- /dev/null +++ b/packages/dashboard/src/_stories/_mock/data-bite-dash-test.json @@ -0,0 +1 @@ +{"dashboard":{"theme":"theme-blue","sharedFilters":[],"description":"Dash Description","title":"Dashboard Name"},"rows":[{"columns":[{"width":6,"widget":"data-bite1722537849962"},{"width":6,"widget":"data-bite1728059122204"}],"dataDescription":{"horizontal":false,"series":true,"singleRow":true},"dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}],"visualizations":{"data-bite1722537849962":{"type":"data-bite","dataBite":"","dataFunction":"Sum","dataColumn":"specimens tested","bitePosition":"Left","biteFontSize":24,"fontSize":"medium","biteBody":"specimens tested that would have detected influenza A(H5) or other novel influenza viruses","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":"+"},"biteStyle":"title","filters":[],"subtext":"","title":"Specimens tested","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"filterBehavior":"Filter Change","openModal":true,"uid":"data-bite1722537849962","visualizationType":"data-bite","dataDescription":{"horizontal":false,"series":true,"singleRow":true},"version":"4.24.10","dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"},"data-bite1728059122204":{"type":"data-bite","dataBite":"","dataFunction":"Sum","dataColumn":"Human cases","bitePosition":"Left","biteFontSize":24,"fontSize":"medium","biteBody":"case detected through national flu surveillance","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":""},"biteStyle":"title","filters":[],"subtext":"","title":"Human cases","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"filterBehavior":"Filter Change","openModal":true,"uid":"data-bite1728059122204","visualizationType":"data-bite","dataDescription":{"horizontal":false,"series":true,"singleRow":true},"version":"4.24.10","dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}},"table":{"label":"Data Table","show":false,"showDownloadUrl":false,"showVertical":true},"datasets":{"/bird-flu/modules/situation-summary/national-flu-surveillance.csv":{"dataFileSize":39,"dataFileName":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv","dataFileSourceType":"url","dataFileFormat":"OCTET-STREAM","preview":true,"dataUrl":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}},"type":"dashboard","version":"4.24.10","uuid":1722537847428} \ No newline at end of file diff --git a/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1.json b/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1.json new file mode 100644 index 000000000..50c987f02 --- /dev/null +++ b/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1.json @@ -0,0 +1 @@ +{"dashboard":{"theme":"theme-blue","sharedFilters":[],"description":"Dash Description","title":""},"rows":[{"columns":[{"width":6,"widget":"data-bite1722537849962"},{"width":6,"widget":"data-bite1728059122204"}],"dataDescription":{"horizontal":false,"series":true,"singleRow":true},"dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}],"visualizations":{"data-bite1722537849962":{"type":"data-bite","dataBite":"","dataFunction":"Sum","dataColumn":"specimens tested","bitePosition":"Left","biteFontSize":24,"fontSize":"medium","biteBody":"specimens tested that would have detected influenza A(H5) or other novel influenza viruses","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":"+"},"biteStyle":"title","filters":[],"subtext":"","title":"Specimens tested","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"filterBehavior":"Filter Change","openModal":true,"uid":"data-bite1722537849962","visualizationType":"data-bite","dataDescription":{"horizontal":false,"series":true,"singleRow":true},"version":"4.24.10","dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"},"data-bite1728059122204":{"type":"data-bite","dataBite":"","dataFunction":"Sum","dataColumn":"Human cases","bitePosition":"Left","biteFontSize":24,"fontSize":"medium","biteBody":"case detected through national flu surveillance","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":""},"biteStyle":"title","filters":[],"subtext":"","title":"Human cases","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"filterBehavior":"Filter Change","openModal":true,"uid":"data-bite1728059122204","visualizationType":"data-bite","dataDescription":{"horizontal":false,"series":true,"singleRow":true},"version":"4.24.10","dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}},"table":{"label":"Data Table","show":false,"showDownloadUrl":false,"showVertical":true},"datasets":{"/bird-flu/modules/situation-summary/national-flu-surveillance.csv":{"dataFileSize":39,"dataFileName":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv","dataFileSourceType":"url","dataFileFormat":"OCTET-STREAM","preview":true,"dataUrl":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}},"type":"dashboard","version":"4.24.10","uuid":1722537847428} \ No newline at end of file diff --git a/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1_1.json b/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1_1.json new file mode 100644 index 000000000..898d5a5f8 --- /dev/null +++ b/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1_1.json @@ -0,0 +1 @@ +{"dashboard":{"theme":"theme-blue","sharedFilters":[],"description":"","title":"Title no description"},"rows":[{"columns":[{"width":6,"widget":"data-bite1722537849962"},{"width":6,"widget":"data-bite1728059122204"}],"dataDescription":{"horizontal":false,"series":true,"singleRow":true},"dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}],"visualizations":{"data-bite1722537849962":{"type":"data-bite","dataBite":"","dataFunction":"Sum","dataColumn":"specimens tested","bitePosition":"Left","biteFontSize":24,"fontSize":"medium","biteBody":"specimens tested that would have detected influenza A(H5) or other novel influenza viruses","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":"+"},"biteStyle":"title","filters":[],"subtext":"","title":"Specimens tested","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"filterBehavior":"Filter Change","openModal":true,"uid":"data-bite1722537849962","visualizationType":"data-bite","dataDescription":{"horizontal":false,"series":true,"singleRow":true},"version":"4.24.10","dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"},"data-bite1728059122204":{"type":"data-bite","dataBite":"","dataFunction":"Sum","dataColumn":"Human cases","bitePosition":"Left","biteFontSize":24,"fontSize":"medium","biteBody":"case detected through national flu surveillance","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":""},"biteStyle":"title","filters":[],"subtext":"","title":"Human cases","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"filterBehavior":"Filter Change","openModal":true,"uid":"data-bite1728059122204","visualizationType":"data-bite","dataDescription":{"horizontal":false,"series":true,"singleRow":true},"version":"4.24.10","dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}},"table":{"label":"Data Table","show":false,"showDownloadUrl":false,"showVertical":true},"datasets":{"/bird-flu/modules/situation-summary/national-flu-surveillance.csv":{"dataFileSize":39,"dataFileName":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv","dataFileSourceType":"url","dataFileFormat":"OCTET-STREAM","preview":true,"dataUrl":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}},"type":"dashboard","version":"4.24.10","uuid":1722537847428} \ No newline at end of file diff --git a/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1_1_1.json b/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1_1_1.json new file mode 100644 index 000000000..b168030f8 --- /dev/null +++ b/packages/dashboard/src/_stories/_mock/data-bite-dash-test_1_1_1.json @@ -0,0 +1 @@ +{"dashboard":{"theme":"theme-blue","sharedFilters":[],"description":"","title":""},"rows":[{"columns":[{"width":6,"widget":"data-bite1722537849962"},{"width":6,"widget":"data-bite1728059122204"}],"dataDescription":{"horizontal":false,"series":true,"singleRow":true},"dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}],"visualizations":{"data-bite1722537849962":{"type":"data-bite","dataBite":"","dataFunction":"Sum","dataColumn":"specimens tested","bitePosition":"Left","biteFontSize":24,"fontSize":"medium","biteBody":"specimens tested that would have detected influenza A(H5) or other novel influenza viruses","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":"+"},"biteStyle":"title","filters":[],"subtext":"","title":"Specimens tested","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"filterBehavior":"Filter Change","openModal":true,"uid":"data-bite1722537849962","visualizationType":"data-bite","dataDescription":{"horizontal":false,"series":true,"singleRow":true},"version":"4.24.10","dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"},"data-bite1728059122204":{"type":"data-bite","dataBite":"","dataFunction":"Sum","dataColumn":"Human cases","bitePosition":"Left","biteFontSize":24,"fontSize":"medium","biteBody":"case detected through national flu surveillance","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":""},"biteStyle":"title","filters":[],"subtext":"","title":"Human cases","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"filterBehavior":"Filter Change","openModal":true,"uid":"data-bite1728059122204","visualizationType":"data-bite","dataDescription":{"horizontal":false,"series":true,"singleRow":true},"version":"4.24.10","dataKey":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}},"table":{"label":"Data Table","show":false,"showDownloadUrl":false,"showVertical":true},"datasets":{"/bird-flu/modules/situation-summary/national-flu-surveillance.csv":{"dataFileSize":39,"dataFileName":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv","dataFileSourceType":"url","dataFileFormat":"OCTET-STREAM","preview":true,"dataUrl":"/bird-flu/modules/situation-summary/national-flu-surveillance.csv"}},"type":"dashboard","version":"4.24.10","uuid":1722537847428} \ No newline at end of file diff --git a/packages/dashboard/src/components/MultiConfigTabs/MultiConfigTabs.tsx b/packages/dashboard/src/components/MultiConfigTabs/MultiConfigTabs.tsx index e6e5f01c9..de1660e7c 100644 --- a/packages/dashboard/src/components/MultiConfigTabs/MultiConfigTabs.tsx +++ b/packages/dashboard/src/components/MultiConfigTabs/MultiConfigTabs.tsx @@ -117,7 +117,7 @@ const MultiConfigTabs = () => { if (!config.multiDashboards) return null return ( -