Format and lint
This commit is contained in:
parent
42ee2d4c51
commit
04a78e7bfe
75 changed files with 1290 additions and 719 deletions
|
|
@ -1,10 +1,8 @@
|
|||
import type { ViewState } from '../types';
|
||||
|
||||
|
||||
export const INITIAL_RETRY_MS = 1000;
|
||||
export const MAX_RETRY_MS = 10000;
|
||||
|
||||
|
||||
/** Lower percentile for color-range clipping (0–100) */
|
||||
export const COLOR_RANGE_LOW_PERCENTILE = 5;
|
||||
/** Upper percentile for color-range clipping (0–100) */
|
||||
|
|
@ -22,7 +20,6 @@ export const INITIAL_VIEW_STATE: ViewState = {
|
|||
pitch: 0,
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Zoom to H3 resolution mapping thresholds.
|
||||
* Returns the H3 resolution to use for a given zoom level.
|
||||
|
|
@ -38,8 +35,6 @@ export const ZOOM_TO_RESOLUTION_THRESHOLDS = [
|
|||
|
||||
export const POSTCODE_ZOOM_THRESHOLD = 16;
|
||||
|
||||
|
||||
|
||||
export const FEATURE_GRADIENT: { t: number; color: [number, number, number] }[] = [
|
||||
{ t: 0, color: [46, 204, 113] },
|
||||
{ t: 0.33, color: [241, 196, 15] },
|
||||
|
|
@ -71,22 +66,23 @@ export const GLYPHS_URL = '/assets/fonts/{fontstack}/{range}.pbf';
|
|||
/** Twemoji base URL (served locally from public/assets/) */
|
||||
export const TWEMOJI_BASE = '/assets/twemoji/';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Groups whose features should be collapsed into stacked bar charts.
|
||||
* Keyed by feature group name. Each entry defines one stacked chart.
|
||||
*/
|
||||
export const STACKED_GROUPS: Record<string, {
|
||||
/** Display label for the chart */
|
||||
label: string;
|
||||
/** If set, use this feature's stats for the total and info popup. Otherwise sum components. */
|
||||
feature?: string;
|
||||
/** Suffix shown after the total value (e.g. "avg/yr") */
|
||||
unit?: string;
|
||||
/** Feature names that make up the segments */
|
||||
components: string[];
|
||||
}[]> = {
|
||||
export const STACKED_GROUPS: Record<
|
||||
string,
|
||||
{
|
||||
/** Display label for the chart */
|
||||
label: string;
|
||||
/** If set, use this feature's stats for the total and info popup. Otherwise sum components. */
|
||||
feature?: string;
|
||||
/** Suffix shown after the total value (e.g. "avg/yr") */
|
||||
unit?: string;
|
||||
/** Feature names that make up the segments */
|
||||
components: string[];
|
||||
}[]
|
||||
> = {
|
||||
Crime: [
|
||||
{
|
||||
label: 'Serious crime',
|
||||
|
|
@ -130,18 +126,21 @@ export const STACKED_GROUPS: Record<string, {
|
|||
* Groups whose enum features should be collapsed into compact multi-row charts.
|
||||
* Keyed by feature group name. Each entry defines one stacked enum chart.
|
||||
*/
|
||||
export const STACKED_ENUM_GROUPS: Record<string, {
|
||||
/** Display label for the chart */
|
||||
label: string;
|
||||
/** If set, use this feature for the info popup */
|
||||
feature?: string;
|
||||
/** Enum feature names that make up the rows */
|
||||
components: string[];
|
||||
/** Value order for consistent segment ordering */
|
||||
valueOrder: string[];
|
||||
/** Colors for each value (matches valueOrder) */
|
||||
valueColors: string[];
|
||||
}[]> = {
|
||||
export const STACKED_ENUM_GROUPS: Record<
|
||||
string,
|
||||
{
|
||||
/** Display label for the chart */
|
||||
label: string;
|
||||
/** If set, use this feature for the info popup */
|
||||
feature?: string;
|
||||
/** Enum feature names that make up the rows */
|
||||
components: string[];
|
||||
/** Value order for consistent segment ordering */
|
||||
valueOrder: string[];
|
||||
/** Colors for each value (matches valueOrder) */
|
||||
valueColors: string[];
|
||||
}[]
|
||||
> = {
|
||||
Property: [
|
||||
{
|
||||
label: 'Property type',
|
||||
|
|
|
|||
|
|
@ -5,14 +5,18 @@ import {
|
|||
GLYPHS_URL,
|
||||
FEATURE_GRADIENT,
|
||||
DENSITY_GRADIENT,
|
||||
DENSITY_GRADIENT_DARK,
|
||||
ZOOM_TO_RESOLUTION_THRESHOLDS,
|
||||
TWEMOJI_BASE,
|
||||
BUFFER_MULTIPLIER,
|
||||
} from './consts';
|
||||
|
||||
// Re-export constants for backwards compatibility
|
||||
export { FEATURE_GRADIENT as GRADIENT, DENSITY_GRADIENT, DENSITY_GRADIENT_DARK, POSTCODE_ZOOM_THRESHOLD } from './consts';
|
||||
export {
|
||||
FEATURE_GRADIENT as GRADIENT,
|
||||
DENSITY_GRADIENT,
|
||||
DENSITY_GRADIENT_DARK,
|
||||
POSTCODE_ZOOM_THRESHOLD,
|
||||
} from './consts';
|
||||
|
||||
const ROAD_OPACITY = 0.4;
|
||||
|
||||
|
|
@ -25,31 +29,33 @@ export function getMapStyle(theme: 'light' | 'dark'): StyleSpecification {
|
|||
|
||||
// Reduce road layer opacity so hexagons are more visible
|
||||
// In dark mode, make all text white with dark outline
|
||||
const modifiedLayers = baseLayers.map((layer) => {
|
||||
// Modify road opacity
|
||||
if (layer.id.includes('roads_') || layer.id.includes('road_')) {
|
||||
if (layer.type === 'line') {
|
||||
return { ...layer, paint: { ...layer.paint, 'line-opacity': ROAD_OPACITY } };
|
||||
} else if (layer.type === 'fill') {
|
||||
return { ...layer, paint: { ...layer.paint, 'fill-opacity': ROAD_OPACITY } };
|
||||
const modifiedLayers = baseLayers
|
||||
.filter((layer) => !layer.id.includes('buildings'))
|
||||
.map((layer) => {
|
||||
// Modify road opacity
|
||||
if (layer.id.includes('roads_') || layer.id.includes('road_')) {
|
||||
if (layer.type === 'line') {
|
||||
return { ...layer, paint: { ...layer.paint, 'line-opacity': ROAD_OPACITY } };
|
||||
} else if (layer.type === 'fill') {
|
||||
return { ...layer, paint: { ...layer.paint, 'fill-opacity': ROAD_OPACITY } };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modify text colors in dark mode
|
||||
if (isDark && layer.type === 'symbol' && layer.paint?.['text-color']) {
|
||||
return {
|
||||
...layer,
|
||||
paint: {
|
||||
...layer.paint,
|
||||
'text-color': '#ffffff',
|
||||
'text-halo-color': '#1a1a1a',
|
||||
'text-halo-width': 1.5,
|
||||
},
|
||||
};
|
||||
}
|
||||
// Modify text colors in dark mode
|
||||
if (isDark && layer.type === 'symbol' && layer.paint?.['text-color']) {
|
||||
return {
|
||||
...layer,
|
||||
paint: {
|
||||
...layer.paint,
|
||||
'text-color': '#ffffff',
|
||||
'text-halo-color': '#1a1a1a',
|
||||
'text-halo-width': 1.5,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return layer;
|
||||
});
|
||||
return layer;
|
||||
});
|
||||
|
||||
return {
|
||||
version: 8,
|
||||
|
|
@ -88,23 +94,25 @@ function rgbToOklab(rgb: [number, number, number]): [number, number, number] {
|
|||
const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
|
||||
|
||||
return [
|
||||
0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
|
||||
1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
|
||||
0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
|
||||
0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
|
||||
1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
|
||||
0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
|
||||
];
|
||||
}
|
||||
|
||||
function oklabToRgb(lab: [number, number, number]): [number, number, number] {
|
||||
const L = lab[0], a = lab[1], b = lab[2];
|
||||
const L = lab[0],
|
||||
a = lab[1],
|
||||
b = lab[2];
|
||||
|
||||
const l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * b, 3);
|
||||
const m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * b, 3);
|
||||
const s = Math.pow(L - 0.0894841775 * a - 1.2914855480 * b, 3);
|
||||
const s = Math.pow(L - 0.0894841775 * a - 1.291485548 * b, 3);
|
||||
|
||||
return [
|
||||
linearToSrgb(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
|
||||
linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
|
||||
linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s),
|
||||
linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -134,7 +142,10 @@ export function normalizedToColor(t: number): [number, number, number] {
|
|||
return interpolateGradient(t, FEATURE_GRADIENT);
|
||||
}
|
||||
|
||||
export function countToColor(t: number, gradient: GradientStop[] = DENSITY_GRADIENT): [number, number, number] {
|
||||
export function countToColor(
|
||||
t: number,
|
||||
gradient: GradientStop[] = DENSITY_GRADIENT
|
||||
): [number, number, number] {
|
||||
return interpolateGradient(t, gradient);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -111,15 +111,16 @@ export function summarizeParams(queryString: string): string {
|
|||
|
||||
const f = params.get('f');
|
||||
if (f) {
|
||||
const filterNames = f.split(',').map((seg) => {
|
||||
const colonIdx = seg.indexOf(':');
|
||||
return colonIdx > 0 ? seg.substring(0, colonIdx) : seg;
|
||||
}).filter(Boolean);
|
||||
const filterNames = f
|
||||
.split(',')
|
||||
.map((seg) => {
|
||||
const colonIdx = seg.indexOf(':');
|
||||
return colonIdx > 0 ? seg.substring(0, colonIdx) : seg;
|
||||
})
|
||||
.filter(Boolean);
|
||||
if (filterNames.length > 0) {
|
||||
parts.push(
|
||||
filterNames.length <= 2
|
||||
? filterNames.join(', ')
|
||||
: `${filterNames.length} filters`
|
||||
filterNames.length <= 2 ? filterNames.join(', ') : `${filterNames.length} filters`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue