From ee9bc5d5aa2b24e39df06b23c66bc9cb814eb88e Mon Sep 17 00:00:00 2001 From: Maria Nordqvist <144018694+marianordqvist@users.noreply.github.com> Date: Thu, 7 Mar 2024 18:43:09 +0100 Subject: [PATCH 01/10] feat/fix-typo (#391) * feat/fix-typo * Revert "feat/fix-typo" This reverts commit fa4e7391bb16b2dd5e851853a72faa19599e7486. * removed comma * Revert "removed comma" This reverts commit 7fd69f4e294c5f2a68045426027df7a9699e3f1d. * x --- pages/om-oss/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/om-oss/index.tsx b/pages/om-oss/index.tsx index bbaa1df4..488debbf 100644 --- a/pages/om-oss/index.tsx +++ b/pages/om-oss/index.tsx @@ -153,7 +153,7 @@ function OmOss() { Våra samarbetspartners under de första två åren har varit Världsnaturfonden WWF, - Postkodstiftelsen, PwC, ClimateView,, Klimatklubben, Våra barns klimat, + Postkodstiftelsen, PwC, ClimateView, Klimatklubben, Våra barns klimat, Researchers’ Desk, Argand Partners och We Don’t Have Time. From 713c32d3bc4db2aa710f49de1c7d678071c988fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexander=20Sandstr=C3=B6m?= <52504991+bengterik@users.noreply.github.com> Date: Thu, 7 Mar 2024 19:11:58 +0100 Subject: [PATCH 02/10] Feat/docker build (#394) * Add Docker build for dev environment * Update readme with instructions --- .dockerignore | 4 ++++ Dockerfile | 15 +++++++++++++++ README.md | 8 ++++++++ 3 files changed, 27 insertions(+) create mode 100644 .dockerignore create mode 100644 Dockerfile diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..3f9fe19d --- /dev/null +++ b/.dockerignore @@ -0,0 +1,4 @@ +.git +*Dockerfile* +*docker-compose* +node_modules \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..9fce5ab5 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,15 @@ +FROM node:21-alpine3.18 + +WORKDIR /app + +COPY package.json ./ + +RUN npm install + +COPY . ./ + +EXPOSE 3000 + +ENTRYPOINT [ "npm" ] + +CMD [ "run", "dev" ] \ No newline at end of file diff --git a/README.md b/README.md index b76e4eb6..d72f7da1 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,14 @@ We use next.js and Typescript and it's pretty straightforward to get started. Ju This opens up a webserver on http://localhost:3000. Just edit the code and see the live refresh. +The project can also be run with docker (although with much slower refresh time): + + # builds the image + docker build -t klimatkollen . + + # starts the container + docker run -t -i --rm -p 3000:3000 --name klimatkollen klimatkollen + ## Contribute The idea behind Klimatkollen is to give citizens access to the climate data we need to meet the goals of the Paris Agreement – and save our own future. From 7b4ea08de7189f3d0a3c3988fd49b1c6d64927fa Mon Sep 17 00:00:00 2001 From: 3xp3ri3nce <145166025+3xp3ri3nce@users.noreply.github.com> Date: Thu, 7 Mar 2024 19:12:23 +0100 Subject: [PATCH 03/10] fixed extra comma /lalarus (#395) From 6deab8aaf29c5fc16ba69f93a7d33c568fe93869 Mon Sep 17 00:00:00 2001 From: Simon Mossmyr Date: Thu, 7 Mar 2024 19:13:41 +0100 Subject: [PATCH 04/10] Move datasets Elbilarna and Laddarna closer together (#386) (#397) --- utils/datasetDescriptions.tsx | 94 +++++++++++++++++------------------ 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/utils/datasetDescriptions.tsx b/utils/datasetDescriptions.tsx index 352b493c..bd90f7ed 100644 --- a/utils/datasetDescriptions.tsx +++ b/utils/datasetDescriptions.tsx @@ -46,27 +46,6 @@ export const datasetDescriptions: DatasetDescriptions = { formattedDataPoint: (dataPoint) => ((dataPoint as number) * 100).toFixed(1), }, - Elbilarna: { - title: 'Elbilsökning', - body: 'Ökningstakten i kommunerna för andel nyregistrerade laddbara bilar 2015–2022, angivet i procentenheter per år.', - source: ( - <> - Källa: - {' '} - - Trafikanalys - - - ), - boundaries: [0.04, 0.05, 0.06, 0.07, 0.08], - labels: ['4 -', '4–5', '5–6', '6–7', '7–8', '8 +'], - labelRotateUp: [true, true, true, true, true, true], - columnHeader: 'Ökning elbilar', - sortAscending: false, - rawDataPoint: (item) => item.ElectricCarChangePercent, - formattedDataPoint: (dataPoint) => ((dataPoint as number) * 100).toFixed(1), - }, - Klimatplanerna: { title: 'Klimatplan', body: ( @@ -106,6 +85,53 @@ export const datasetDescriptions: DatasetDescriptions = { formattedDataPoint: (dataPoint) => (dataPoint === 'Saknas' ? 'Nej' : 'Ja'), }, + Elbilarna: { + title: 'Elbilsökning', + body: 'Ökningstakten i kommunerna för andel nyregistrerade laddbara bilar 2015–2022, angivet i procentenheter per år.', + source: ( + <> + Källa: + {' '} + + Trafikanalys + + + ), + boundaries: [0.04, 0.05, 0.06, 0.07, 0.08], + labels: ['4 -', '4–5', '5–6', '6–7', '7–8', '8 +'], + labelRotateUp: [true, true, true, true, true, true], + columnHeader: 'Ökning elbilar', + sortAscending: false, + rawDataPoint: (item) => item.ElectricCarChangePercent, + formattedDataPoint: (dataPoint) => ((dataPoint as number) * 100).toFixed(1), + }, + + Laddarna: { + title: 'Elbilar per laddare', + body: 'Antal laddbara bilar per offentliga laddpunkter år 2023. EU rekommenderar max 10 bilar per laddare.', + source: ( + <> + Källa: + {' '} + + Power Circle ELIS + + {' '} + + ), + boundaries: [1e6, 40, 30, 20, 10], + labels: ['Inga laddare', '40 +', '30-40', '20-30', '10-20', '10 -'], + labelRotateUp: [], + columnHeader: 'Elbil per laddare', + sortAscending: true, + rawDataPoint: (item) => item.ElectricVehiclePerChargePoints, + formattedDataPoint: (dataPoint) => ((dataPoint as number) < 1e5 ? (dataPoint as number).toFixed(1) : 'Laddare saknas'), + }, + Cyklarna: { title: 'Cykelvägslängd', body: 'Antal meter cykelväg per invånare per kommun år 2022.', @@ -173,32 +199,6 @@ export const datasetDescriptions: DatasetDescriptions = { formattedDataPoint: (dataPoint) => (dataPoint as number).toFixed(1), }, - Laddarna: { - title: 'Elbilar per laddare', - body: 'Antal laddbara bilar per offentliga laddpunkter år 2023. EU rekommenderar max 10 bilar per laddare.', - source: ( - <> - Källa: - {' '} - - Power Circle ELIS - - {' '} - - ), - boundaries: [1e6, 40, 30, 20, 10], - labels: ['Inga laddare', '40 +', '30-40', '20-30', '10-20', '10 -'], - labelRotateUp: [], - columnHeader: 'Elbil per laddare', - sortAscending: true, - rawDataPoint: (item) => item.ElectricVehiclePerChargePoints, - formattedDataPoint: (dataPoint) => ((dataPoint as number) < 1e5 ? (dataPoint as number).toFixed(1) : 'Laddare saknas'), - }, - Koldioxidbudgetarna: { title: 'Budget slut om', body: 'Datum då kommunens koldioxidbudget tar slut om utsläppen fortsätter enligt nuvarande trend. Några kommuner kommer att hålla budgeten om trenden står sig.', From 86dc89373d0679c4f5b1a70765a742922cda6682 Mon Sep 17 00:00:00 2001 From: Simon Steiger <106233551+simonsteiger@users.noreply.github.com> Date: Thu, 7 Mar 2024 19:40:34 +0100 Subject: [PATCH 05/10] Improve municipality screen (#401) - Better display on mobile - Center municipality name - Center divs in HeaderSection --- components/BackArrow.tsx | 3 ++- components/Municipality/Municipality.tsx | 11 ++++++----- components/Typography.ts | 18 ++++++++++++++++++ 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/components/BackArrow.tsx b/components/BackArrow.tsx index afacd7fd..200b6f72 100644 --- a/components/BackArrow.tsx +++ b/components/BackArrow.tsx @@ -6,7 +6,8 @@ const StyledButton = styled.button` border: none; cursor: pointer; background-color: transparent; - align-self: flex-start; + width: 60px; + text-align: left; ` type BackArrowProps = { diff --git a/components/Municipality/Municipality.tsx b/components/Municipality/Municipality.tsx index 5f0310e2..62886aa6 100644 --- a/components/Municipality/Municipality.tsx +++ b/components/Municipality/Municipality.tsx @@ -2,7 +2,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import styled from 'styled-components' -import { H1, ParagraphBold } from '../Typography' +import { H1NoPad, ParagraphBold } from '../Typography' import BackArrow from '../BackArrow' import PageWrapper from '../PageWrapper' import DropDown from '../DropDown' @@ -16,7 +16,8 @@ import Scorecard from './MunicipalityScorecard' const StyledContainer = styled.div` display: flex; flex-direction: column; - gap: 2rem; + align-items center; + gap: 1.5rem; margin-bottom: 48px; ` @@ -29,7 +30,7 @@ const HeaderSection = styled.div` flex-direction: row; justify-content: space-between; align-items: center; - margin-top: 20px; + margin-top: 10px; ` const Bottom = styled.div` @@ -74,10 +75,10 @@ function Municipality(props: Props) { return ( <> - -

{municipality.Name}

+ + {municipality.Name} {coatOfArmsImage && ( Date: Fri, 8 Mar 2024 08:31:08 +0100 Subject: [PATCH 06/10] Fix 370 Animate Paris Agreement graph (#399) * Animate Paris Agreement graph * Fix linter errors --- components/Graph.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Graph.tsx b/components/Graph.tsx index 8b72fd37..af6ddabd 100644 --- a/components/Graph.tsx +++ b/components/Graph.tsx @@ -118,13 +118,13 @@ function Graph({ // @ts-ignore id: 'budget', fill: true, - data: budgetDataset, - borderWidth: 2, + data: step >= 2 ? budgetDataset : budgetDataset.map(({ x }) => ({ x, y: 0 })), + borderWidth: step >= 2 ? 2 : 0, borderColor: colorTheme.lightGreen, backgroundColor: colorTheme.lightGreenOpaqe, pointRadius: 0, tension: 0.15, - hidden: step < 2, + hidden: false, }, { // @ts-ignore From 430b8a96a9dbb9ae99b108473d7ec0cd3fa7969a Mon Sep 17 00:00:00 2001 From: Johan Li Date: Fri, 8 Mar 2024 08:40:03 +0100 Subject: [PATCH 07/10] =?UTF-8?q?Improve=20the=20existing=20municipality?= =?UTF-8?q?=20search=20=E2=80=93=20sorting=20by=20Swedish=20and=20prioriti?= =?UTF-8?q?zing=20matches=20that=20begin=20with=20the=20input=20query=20(#?= =?UTF-8?q?398)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Municipality search: handle Swedish sorting and prioritize results that start with query * run prettier --- components/DropDown.test.ts | 30 ++++++++++++++++++++++++++++++ components/DropDown.tsx | 31 +++++++++++++++++++++++++++++-- 2 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 components/DropDown.test.ts diff --git a/components/DropDown.test.ts b/components/DropDown.test.ts new file mode 100644 index 00000000..b41b71fe --- /dev/null +++ b/components/DropDown.test.ts @@ -0,0 +1,30 @@ +import { test } from 'vitest' +import { getSortedMunicipalities, search } from './DropDown' + +test('Municipalities should be sorted by Swedish alphabetical order', () => { + expect( + getSortedMunicipalities(['Örebro', 'Säffle', 'Älmhult', 'Åre', 'Karlshamn']), + ).toEqual(['Karlshamn', 'Säffle', 'Åre', 'Älmhult', 'Örebro']) +}) + +describe('When searching a list of sorted municipalities', () => { + const municipalities = ['Göteborg', 'Malmö', 'Stockholm', 'Södertälje'] + + test('Results that do not include the query should be filtered out', () => { + expect(search('holm', municipalities)).toEqual(['Stockholm']) + expect(search('s', municipalities)).toEqual(['Stockholm', 'Södertälje']) + }) + + test('The search is case-insensitive', () => { + expect(search('göt', municipalities)).toEqual(['Göteborg']) + expect(search('GÖt', municipalities)).toEqual(['Göteborg']) + }) + + test('Results that start with the query should be prioritized', () => { + expect(search('st', ['Avesta', 'Mariestad', 'Stockholm'])).toEqual([ + 'Stockholm', + 'Avesta', + 'Mariestad', + ]) + }) +}) diff --git a/components/DropDown.tsx b/components/DropDown.tsx index 41d42977..5d09330b 100644 --- a/components/DropDown.tsx +++ b/components/DropDown.tsx @@ -86,8 +86,35 @@ type Props = { className: string } +export function getSortedMunicipalities(municipalitiesName: Array) { + return municipalitiesName.sort((a, b) => a.localeCompare(b, 'sv')) +} + +export function search(query: string, municipalitiesName: Array) { + const queryLowerCase = query.toLowerCase() + + return municipalitiesName + .filter((municipality) => municipality.toLowerCase().includes(queryLowerCase)) + .sort((a, b) => { + const lowerA = a.toLowerCase() + const lowerB = b.toLowerCase() + + const startsWithQueryA = lowerA.startsWith(queryLowerCase) + const startsWithQueryB = lowerB.startsWith(queryLowerCase) + + if (startsWithQueryA && !startsWithQueryB) { + return -1 + } + if (!startsWithQueryA && startsWithQueryB) { + return 1 + } + + return 0 + }) +} + function DropDown({ municipalitiesName, placeholder, className }: Props) { - const sortedMunicipalities = municipalitiesName.sort((a, b) => a.localeCompare(b)) + const sortedMunicipalities = getSortedMunicipalities(municipalitiesName) const [showDropDown, setShowDropDown] = useState(false) const [selectedMunicipality, setSelectedMunicipality] = useState('') const [municipalities, setMunicipalities] = useState(sortedMunicipalities) @@ -128,7 +155,7 @@ function DropDown({ municipalitiesName, placeholder, className }: Props) { } else { setShowDropDown(true) } - const filteredMunicipalities = sortedMunicipalities.filter((test) => test.toLowerCase().includes(value.toLowerCase())) + const filteredMunicipalities = search(value, sortedMunicipalities) setMunicipalities(filteredMunicipalities) } From 2725b7f3ac7df01b83c7a2e386940ea6805f5e32 Mon Sep 17 00:00:00 2001 From: Elvira Date: Fri, 8 Mar 2024 09:08:23 +0100 Subject: [PATCH 08/10] decrease municipality titles/headers for mobile screens (#407) --- components/Typography.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Typography.ts b/components/Typography.ts index f01272d2..8765da2f 100644 --- a/components/Typography.ts +++ b/components/Typography.ts @@ -17,7 +17,7 @@ export const H1NoPad = styled.h1` line-height: 1.25; @media (max-width: 768px) { - font-size: 42px; + font-size: 35px; } ` @@ -28,7 +28,7 @@ export const H2 = styled.h2` margin: 0 0 8px 0; @media (max-width: 768px) { - font-size: 28px; + font-size: 24px; } ` From 43fa206b8b7ab34d57c8100216fb6039b90d7ff7 Mon Sep 17 00:00:00 2001 From: Elvira Date: Fri, 8 Mar 2024 09:58:40 +0100 Subject: [PATCH 09/10] move drop-down test to test folder (#409) --- {components => __tests__/components}/DropDown.test.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {components => __tests__/components}/DropDown.test.ts (100%) diff --git a/components/DropDown.test.ts b/__tests__/components/DropDown.test.ts similarity index 100% rename from components/DropDown.test.ts rename to __tests__/components/DropDown.test.ts From 9f964880c8c2ff4ae138048600fb23453b9c7ec5 Mon Sep 17 00:00:00 2001 From: Elvira Date: Fri, 8 Mar 2024 10:01:59 +0100 Subject: [PATCH 10/10] update path on drop-down test (#410) --- __tests__/components/DropDown.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/components/DropDown.test.ts b/__tests__/components/DropDown.test.ts index b41b71fe..913df822 100644 --- a/__tests__/components/DropDown.test.ts +++ b/__tests__/components/DropDown.test.ts @@ -1,5 +1,5 @@ import { test } from 'vitest' -import { getSortedMunicipalities, search } from './DropDown' +import { getSortedMunicipalities, search } from '../../components/DropDown' test('Municipalities should be sorted by Swedish alphabetical order', () => { expect(