Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make political boundary names and counts less cluttered #169

Merged
merged 13 commits into from
Dec 19, 2024
Merged

Make political boundary names and counts less cluttered #169

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fbc786c
add showBoundaryNames property to ReportConfig interface
Moggach Dec 17, 2024
520b073
add switch for toggling boundary names to report controls
Moggach Dec 17, 2024
daae79a
bring value of showBoundaryNames to choropleths component
Moggach Dec 17, 2024
8fc9e3a
merge latest from main
Moggach Dec 18, 2024
265d5e7
only show boundary names layer if showBoundaryNames is true
Moggach Dec 18, 2024
9ba6c6e
scale down area count and label font sizes
Moggach Dec 18, 2024
74448e6
add show political boundary names check around area counts as well as…
Moggach Dec 18, 2024
4174bbd
initialise showBoundaryNames to false
Moggach Dec 18, 2024
1368257
merge GroupedData class fix from main
Moggach Dec 18, 2024
cbaac73
fix type errors - make showBoundaryNames default to false
Moggach Dec 18, 2024
7ee5b8a
remove console log
Moggach Dec 18, 2024
4f1e6ec
make showBoundaryNames true by default
Moggach Dec 18, 2024
06583e4
combine area count and label visbility check with existing visiblity …
Moggach Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 57 additions & 54 deletions nextjs/src/app/reports/[id]/(components)/MapLayers/PoliticalChoropleths.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
report.displayOptions?.dataVisualisation?.boundaryType === boundaryType
? 'visible'
: 'none'

const { data: dataByBoundary } = useDataByBoundary({ report, boundaryType })
const showBoundaryNames = report.displayOptions?.display.showBoundaryNames
const map = useLoadedMap()
const [selectedBoundary, setSelectedBoundary] = useAtom(selectedBoundaryAtom)
useClickOnBoundaryEvents(visibility === 'visible' ? tileset : null)
Expand Down Expand Up @@ -114,60 +114,63 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
layout={{ visibility, 'line-join': 'round', 'line-round-limit': 0.1 }}
/>
</Source>
<Source
id={`${tileset.mapboxSourceId}-area-count`}
type="geojson"
data={getAreaGeoJSON(dataByBoundary)}
>
<Layer
{showBoundaryNames && (
Moggach marked this conversation as resolved.
Show resolved Hide resolved
<Source
id={`${tileset.mapboxSourceId}-area-count`}
type="symbol"
layout={{
...getAreaCountLayout(dataByBoundary),
visibility,
}}
paint={{
'text-opacity': [
'interpolate',
['exponential', 1],
['zoom'],
//
7.5,
0,
//
7.8,
1,
],
'text-color': 'white',
'text-halo-color': '#24262b',
'text-halo-width': 1.5,
}}
/>
<Layer
id={`${tileset.mapboxSourceId}-area-label`}
type="symbol"
layout={{
...getAreaLabelLayout(dataByBoundary),
visibility,
}}
paint={{
'text-color': 'white',
'text-opacity': [
'interpolate',
['exponential', 1],
['zoom'],
//
7.5,
0,
//
7.8,
1,
],
'text-halo-color': '#24262b',
'text-halo-width': 1.5,
}}
/>
</Source>
type="geojson"
data={getAreaGeoJSON(dataByBoundary)}
>
<Layer
id={`${tileset.mapboxSourceId}-area-count`}
type="symbol"
layout={{
...getAreaCountLayout(dataByBoundary),
visibility,
}}
paint={{
'text-opacity': [
'interpolate',
['exponential', 1],
['zoom'],
//
7.5,
0,
//
7.8,
1,
],
'text-color': 'white',
'text-halo-color': '#24262b',
'text-halo-width': 1.5,
}}
/>

<Layer
id={`${tileset.mapboxSourceId}-area-label`}
type="symbol"
layout={{
...getAreaLabelLayout(dataByBoundary),
visibility,
}}
paint={{
'text-color': 'white',
'text-opacity': [
'interpolate',
['exponential', 1],
['zoom'],
//
7.5,
0,
//
7.8,
1,
],
'text-halo-color': '#24262b',
'text-halo-width': 1.5,
}}
/>
</Source>
)}
</>
)
}
Expand Down
19 changes: 17 additions & 2 deletions nextjs/src/app/reports/[id]/(components)/_ReportConfigLegacyControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ const ReportConfigLegacyControls: React.FC = () => {
report: {
organisation,
displayOptions: {
display: { showLastElectionData, showMPs, showStreetDetails } = {},
display: {
showLastElectionData,
showMPs,
showStreetDetails,
showBoundaryNames,
} = {},
},
},
} = useReport()
Expand Down Expand Up @@ -56,7 +61,6 @@ const ReportConfigLegacyControls: React.FC = () => {
},
})
}

return (
<div className="bg-meepGray-700 p-3">
<div className="p-3 pb-4 flex flex-col gap-2 border-t border-meepGray-700 ">
Expand All @@ -76,6 +80,17 @@ const ReportConfigLegacyControls: React.FC = () => {
/>
Street details
</div>
<div className="text-labelLg text-meepGray-200 flex items-center gap-2">
<Switch
checked={showBoundaryNames ?? false}
onCheckedChange={(checked: boolean) => {
updateReport({
displayOptions: { display: { showBoundaryNames: checked } },
})
}}
/>
Political boundary names
</div>
</div>
<div className="p-3 pb-4 flex flex-col gap-2 border-t border-meepGray-700 ">
<span className="label mb-2 text-labelLg text-meepGray-200">
Expand Down
16 changes: 8 additions & 8 deletions nextjs/src/app/reports/[id]/mapboxStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,14 +179,14 @@ export const getAreaCountLayout = (
1,
[
'max',
['*', ['/', ['get', 'count'], max], textScale(max) * 9],
textScale(min) * 10,
['*', ['/', ['get', 'count'], max], textScale(max) * 5],
textScale(min) * 6,
],
12,
[
'max',
['*', ['/', ['get', 'count'], max], textScale(max) * 18],
textScale(min) * 20,
['*', ['/', ['get', 'count'], max], textScale(max) * 14],
textScale(min) * 16,
],
],
'symbol-placement': 'point',
Expand Down Expand Up @@ -220,14 +220,14 @@ export const getAreaLabelLayout = (
1,
[
'max',
['*', ['/', ['get', 'count'], max], textScale(max) * 9],
textScale(min) * 10,
['*', ['/', ['get', 'count'], max], textScale(max) * 5],
textScale(min) * 6,
],
12,
[
'max',
['*', ['/', ['get', 'count'], max], textScale(max) * 18],
textScale(min) * 20,
['*', ['/', ['get', 'count'], max], textScale(max) * 14],
textScale(min) * 16,
],
],
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
Expand Down
2 changes: 2 additions & 0 deletions nextjs/src/app/reports/[id]/reportContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface ReportConfig {
showLastElectionData?: boolean
showPostcodeLabels?: boolean
boundaryOutlines?: AnalyticalAreaType[]
showBoundaryNames?: boolean
}
}

Expand All @@ -48,6 +49,7 @@ export const defaultReportConfig: ReportConfig = {
showMPs: false,
showLastElectionData: false,
boundaryOutlines: [AnalyticalAreaType.ParliamentaryConstituency_2024],
showBoundaryNames: false,
Moggach marked this conversation as resolved.
Show resolved Hide resolved
},
}

Expand Down
Loading