diff --git a/src/lib/browse/colors.ts b/src/lib/browse/colors.ts index fb9cb46a..3e6e4276 100644 --- a/src/lib/browse/colors.ts +++ b/src/lib/browse/colors.ts @@ -40,29 +40,6 @@ export const colors = { "#080C54", ], - // A qualitative set from colorbrewer2.org - funding_programmes: [ - "#66c2a5", - "#fc8d62", - "#8da0cb", - "#e78ac3", - "#a6d854", - "#ffd92f", - "grey", - ], - - current_milestone: [ - "grey", - "grey", - "red", - "red", - "#fbb862", - "#eddc76", - "#dafd9d", - "#76c384", - "#488f31", - ], - // Thanks to https://ropensci.github.io/slopes/articles/roadnetworkcycling.html gradient_flat_to_steep: [ "#267300", diff --git a/src/lib/browse/schemes/Filters.svelte b/src/lib/browse/schemes/Filters.svelte index c2366bcb..2998abe5 100644 --- a/src/lib/browse/schemes/Filters.svelte +++ b/src/lib/browse/schemes/Filters.svelte @@ -6,9 +6,11 @@ Select, } from "govuk-svelte"; import { Modal } from "lib/common"; - import { onMount } from "svelte"; import type { Feature, Schemes, SchemeData } from "types"; - import { fundingProgrammesForColouringAndFiltering } from "./data"; + import { + atfFundingProgrammes, + currentMilestones as currentMilestoneColors, + } from "./colors"; export let source: string; export let schemes: Map; @@ -24,41 +26,30 @@ let counts = { interventions: 0, totalLength: 0.0 }; // Dropdown filters - let authorities: [string, string][] = []; + $: authorities = getAuthorities(schemes); let filterAuthority = ""; - let fundingProgrammes: [string, string][] = []; - let knownFundingProgrammes: Set = new Set( - fundingProgrammesForColouringAndFiltering.slice(0, -1), - ); + let fundingProgrammes: [string, string][] = Object.keys( + atfFundingProgrammes, + ).map((x) => [x, x]); let filterFundingProgramme = ""; - let currentMilestones: [string, string][] = []; + let currentMilestones: [string, string][] = Object.keys( + currentMilestoneColors, + ).map((x) => [x, x]); let filterCurrentMilestone = ""; - // TODO Change when schemes changes - onMount(() => { - let set1: Set = new Set(); - let set2: Set = new Set(); - let set3: Set = new Set(); + function getAuthorities( + schemes: Map, + ): [string, string][] { + let names: Set = new Set(); for (let x of schemes.values()) { if (x.browse?.authority_or_region) { - set1.add(x.browse.authority_or_region); - } - if (x.browse?.funding_programme) { - set2.add(x.browse.funding_programme); - } - if (x.browse?.current_milestone) { - set3.add(x.browse.current_milestone); + names.add(x.browse.authority_or_region); } } - authorities = Array.from(set1.entries()); - authorities.sort(); - fundingProgrammes = fundingProgrammesForColouringAndFiltering.map( - (value: string) => [value, value], - ); - - currentMilestones = Array.from(set3.entries()); - currentMilestones.sort(); - }); + let result = Array.from(names.entries()); + result.sort(); + return result; + } // When any filters change, update showSchemes function filtersUpdated( @@ -97,11 +88,8 @@ return false; } if ( - (filterFundingProgramme && - filterFundingProgramme !== "Other" && - scheme.browse?.funding_programme != filterFundingProgramme) || - (filterFundingProgramme === "Other" && - knownFundingProgrammes.has(scheme.browse?.funding_programme ?? "")) + filterFundingProgramme && + scheme.browse?.funding_programme != filterFundingProgramme ) { return false; } @@ -204,49 +192,96 @@ Reset all filters - - +
+ + + (filterInterventionText = "")}> + Clear + + + + + + (filterSchemeText = "")}> + Clear + + + + + + + + (filterInterventionText = "")}> + Clear + + + + + + (filterSchemeText = "")}> + Clear + + + +
diff --git a/src/lib/browse/schemes/colors.ts b/src/lib/browse/schemes/colors.ts index aab799e6..6642a678 100644 --- a/src/lib/browse/schemes/colors.ts +++ b/src/lib/browse/schemes/colors.ts @@ -1,66 +1,19 @@ -import { constructMatchExpression } from "lib/maplibre"; -import type { DataDrivenPropertyValueSpecification } from "maplibre-gl"; -import { fundingProgrammesForColouringAndFiltering } from "./data"; -import { colors } from "../colors"; +export let atfFundingProgrammes = { + ATF2: "#66c2a5", + "ATF2 or ATF3": "#fc8d62", + ATF3: "#8da0cb", + ATF4: "#e78ac3", + ATF4E: "#a6d854", +}; -export function styleByFundingProgramme(): [ - DataDrivenPropertyValueSpecification, - [string, string][], -] { - let [colorMapping, legendRows] = getColorMappingAndLegend( - fundingProgrammesForColouringAndFiltering, - colors.funding_programmes, - ); - - let color = constructMatchExpression( - ["get", "funding_programme"], - colorMapping, - "grey", - ); - return [color, legendRows]; -} - -export function styleByCurrentMilestone(): [ - DataDrivenPropertyValueSpecification, - [string, string][], -] { - let stageGates = [ - "removed", - "no data", - "not progressed", - "superseded", - "preliminary design completed", - "feasability design completed", - "detailed design completed", - "consruction started", - "construction completed", - ]; - - let [colorMapping, legendRows] = getColorMappingAndLegend( - stageGates, - colors.current_milestone, - ); - - let color = constructMatchExpression( - ["get", "current_milestone"], - colorMapping, - "grey", - ); - return [color, legendRows]; -} - -function getColorMappingAndLegend( - keys: string[], - colorList: string[], -): [{ [key: string]: string }, [string, string][]] { - let legendRows: [string, string][] = []; - let colorMapping: { [key: string]: string } = {}; - let i = 0; - for (let x of keys) { - let color = colorList[i++ % colorList.length]; - colorMapping[x] = color; - legendRows.push([x, color]); - } - - return [colorMapping, legendRows]; -} +export let currentMilestones = { + removed: "grey", + "no data": "grey", + "not progressed": "red", + superseded: "red", + "preliminary design completed": "#fbb862", + "feasability design completed": "#eddc76", + "detailed design completed": "#dafd9d", + "consruction started": "#76c384", + "construction completed": "#488f31", +}; diff --git a/src/lib/browse/schemes/data.ts b/src/lib/browse/schemes/data.ts index 7db38544..1bfa8efd 100644 --- a/src/lib/browse/schemes/data.ts +++ b/src/lib/browse/schemes/data.ts @@ -87,13 +87,3 @@ function keepFeature(feature: Feature): boolean { return true; } - -export const fundingProgrammesForColouringAndFiltering = [ - "ATF2", - "ATF2 or ATF3", - "ATF3", - "ATF4", - "ATF4E", - "Planned pipeline", - "Other", -];