Skip to content

Commit b8a1026

Browse files
jaybjayb
authored
Fix [DEV-11734] Remove mobile tiles per row for charts (#2418)
* Remove mobile option for tiles per row for charts * Fix dynamic y-axis padding
1 parent 3a18b25 commit b8a1026

File tree

7 files changed

+52
-72
lines changed

7 files changed

+52
-72
lines changed

‎packages/chart/src/CdcChartComponent.tsx‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -173,33 +173,33 @@ const CdcChart: React.FC<CdcChartProps> = ({
173173
return {
174174
title: title
175175
? processMarkupVariables(title, config.data || [], config.markupVariables, {
176-
isEditor,
177-
filters: config.filters || []
178-
}).processedContent
176+
isEditor,
177+
filters: config.filters || []
178+
}).processedContent
179179
: title,
180180
superTitle: config.superTitle
181181
? processMarkupVariables(config.superTitle, config.data || [], config.markupVariables, {
182-
isEditor,
183-
filters: config.filters || []
184-
}).processedContent
182+
isEditor,
183+
filters: config.filters || []
184+
}).processedContent
185185
: config.superTitle,
186186
introText: config.introText
187187
? processMarkupVariables(config.introText, config.data || [], config.markupVariables, {
188-
isEditor,
189-
filters: config.filters || []
190-
}).processedContent
188+
isEditor,
189+
filters: config.filters || []
190+
}).processedContent
191191
: config.introText,
192192
legacyFootnotes: config.legacyFootnotes
193193
? processMarkupVariables(config.legacyFootnotes, config.data || [], config.markupVariables, {
194-
isEditor,
195-
filters: config.filters || []
196-
}).processedContent
194+
isEditor,
195+
filters: config.filters || []
196+
}).processedContent
197197
: config.legacyFootnotes,
198198
description: config.description
199199
? processMarkupVariables(config.description, config.data || [], config.markupVariables, {
200-
isEditor,
201-
filters: config.filters || []
202-
}).processedContent
200+
isEditor,
201+
filters: config.filters || []
202+
}).processedContent
203203
: config.description
204204
}
205205
}, [
@@ -547,7 +547,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
547547
for (let entry of entries) {
548548
let { width, height } = entry.contentRect
549549

550-
width = isEditor ? width - EDITOR_WIDTH : width
550+
const editorIsOpen = isEditor && !!document.querySelector('.editor-panel:not(.hidden)')
551+
width = editorIsOpen ? width - EDITOR_WIDTH : width
551552

552553
const newViewport = getViewport(width)
553554

@@ -1188,8 +1189,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
11881189
legend.position === 'top' ||
11891190
visualizationType === 'Sankey' ||
11901191
visualizationType === 'Spark Line'
1191-
? 'w-100'
1192-
: 'w-75'
1192+
? 'w-100'
1193+
: 'w-75'
11931194
}
11941195
>
11951196
{/* Check if there is data to display */}
@@ -1243,7 +1244,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
12431244
const labelMargin = 120
12441245
const widthReduction =
12451246
config.showLineSeriesLabels &&
1246-
(config.legend.position !== 'right' || config.legend.hide)
1247+
(config.legend.position !== 'right' || config.legend.hide)
12471248
? labelMargin
12481249
: 0
12491250
return (
@@ -1347,8 +1348,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
13471348
config.visualizationType === 'Sankey'
13481349
? config?.data?.[0]?.tableData
13491350
: config.table.customTableConfig
1350-
? filterVizData(config.filters, config.data)
1351-
: config.data
1351+
? filterVizData(config.filters, config.data)
1352+
: config.data
13521353

13531354
if (config.smallMultiples?.mode) {
13541355
const prepared = prepareSmallMultiplesDataTable(config, config.columns, dataTableRuntimeData)

‎packages/chart/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx‎

Lines changed: 23 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -97,48 +97,29 @@ const PanelSmallMultiples: FC<PanelProps> = props => {
9797

9898
{config.smallMultiples?.mode && (
9999
<>
100-
<div className='two-col-inputs'>
101-
<TextField
102-
type='number'
103-
value={config.smallMultiples?.tilesPerRowDesktop}
104-
section='smallMultiples'
105-
fieldName='tilesPerRowDesktop'
106-
label='Tiles Per Row'
107-
updateField={updateField}
108-
min={1}
109-
max={6}
110-
tooltip={
111-
<Tooltip style={{ textTransform: 'none' }}>
112-
<Tooltip.Target>
113-
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
114-
</Tooltip.Target>
115-
<Tooltip.Content>
116-
<p>Number of tiles to display per row on desktop screens.</p>
117-
</Tooltip.Content>
118-
</Tooltip>
119-
}
120-
/>
121-
<TextField
122-
type='number'
123-
value={config.smallMultiples?.tilesPerRowMobile}
124-
section='smallMultiples'
125-
fieldName='tilesPerRowMobile'
126-
label='Mobile'
127-
updateField={updateField}
128-
min={1}
129-
max={3}
130-
tooltip={
131-
<Tooltip style={{ textTransform: 'none' }}>
132-
<Tooltip.Target>
133-
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
134-
</Tooltip.Target>
135-
<Tooltip.Content>
136-
<p>Number of tiles to display per row on mobile screens.</p>
137-
</Tooltip.Content>
138-
</Tooltip>
139-
}
140-
/>
141-
</div>
100+
<TextField
101+
type='number'
102+
value={config.smallMultiples?.tilesPerRowDesktop}
103+
section='smallMultiples'
104+
fieldName='tilesPerRowDesktop'
105+
label='Tiles Per Row (Desktop)'
106+
updateField={updateField}
107+
min={1}
108+
max={3}
109+
tooltip={
110+
<Tooltip style={{ textTransform: 'none' }}>
111+
<Tooltip.Target>
112+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
113+
</Tooltip.Target>
114+
<Tooltip.Content>
115+
<p>
116+
Number of chart tiles to display per row on desktop screens. Mobile will always show 1 tile
117+
per row.
118+
</p>
119+
</Tooltip.Content>
120+
</Tooltip>
121+
}
122+
/>
142123

143124
{/* Tile Ordering */}
144125
{(() => {

‎packages/chart/src/components/SmallMultiples/SmallMultiples.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
3838
const { mode, tileColumn, tilesPerRowDesktop, tilesPerRowMobile } = config.smallMultiples || {}
3939

4040
const isMobile = isMobileSmallMultiplesViewport(currentViewport)
41-
const tilesPerRow = isMobile ? tilesPerRowMobile || 2 : tilesPerRowDesktop || 3
41+
const tilesPerRow = isMobile ? tilesPerRowMobile || 1 : tilesPerRowDesktop || 3
4242

4343
// Figure out what objects to iterate over based on mode - memoized to prevent recalculation
4444
const tileItems = useMemo<Array<TileItem>>(() => {

‎packages/chart/src/hooks/useScales.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,19 +92,16 @@ const useScales = (properties: useScaleProps) => {
9292

9393
// Apply auto-padding if needed
9494
if (needsYAxisAutoPadding && !isHorizontal) {
95-
for (let i = 0; i < 2; i++) {
95+
for (let i = 0; i < 3; i++) {
9696
const scale = composeYScale({ min, max, yMax, config, leftMax })
9797
const padding = getYAxisAutoPadding(scale, handleNumTicks, maxValue, minValue, config)
98-
99-
if (padding > 0) {
98+
if (i === 0 || padding > 0) {
10099
const adjustedConfig = { ...config, yAxis: { ...config.yAxis, scalePadding: padding, enablePadding: true } }
101100
const result = getMinMax({ ...minMaxProps, config: adjustedConfig })
102101
min = result.min
103102
max = result.max
104103
leftMax = result.leftMax
105104
rightMax = result.rightMax
106-
} else {
107-
break
108105
}
109106
}
110107
}

‎packages/core/helpers/viewports.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ export const isMobileTerritoryViewport = currentViewport => isBelowBreakpoint('s
1515

1616
export const isMobileFontViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
1717

18-
export const isMobileSmallMultiplesViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
18+
export const isMobileSmallMultiplesViewport = currentViewport => isBelowBreakpoint('md', currentViewport)

‎packages/map/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ const PanelSmallMultiples: FC<PanelSmallMultiplesProps> = props => {
121121
label='Tiles Per Row (Desktop)'
122122
updateField={updateField}
123123
min={1}
124-
max={4}
124+
max={3}
125125
tooltip={
126126
<Tooltip style={{ textTransform: 'none' }}>
127127
<Tooltip.Target>

‎packages/map/src/hooks/useResizeObserver.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export const useResizeObserver = (isEditor: boolean) => {
1515
for (let entry of entries) {
1616
let { width, height } = entry.contentRect
1717

18-
width = isEditor ? width - EDITOR_WIDTH : width
18+
const editorIsOpen = isEditor && !!document.querySelector('.editor-panel:not(.hidden)')
19+
width = editorIsOpen ? width - EDITOR_WIDTH : width
1920

2021
const newViewport = getViewport(width)
2122

0 commit comments

Comments
 (0)