Merge pull request #52 from klimadashboard/feat/company-emissions-zod-typescript

feat(companies): typescript support to companies emissions

Author: davidjablonski

src/lib/components/charts/custom/companiesEmissions/CheckIcon.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	export let additionalClasses = '';
 </script>
 

src/lib/components/charts/custom/companiesEmissions/CompanyClimateGoals.svelte

@@ -1,11 +1,11 @@
-<script>
-	import companies from '$lib/stores/companies';
+<script lang="ts">
 	import CheckIcon from './CheckIcon.svelte';
 	import XIcon from './XIcon.svelte';
+	import type { CompanyMetaData } from './types';
 
-	export let companiesGoalData = [];
+	export let companiesGoalData: CompanyMetaData[] = [];
 
-	let isOMV = false;
+	let isOMV: boolean = false;
 	$: isOMV = !!companiesGoalData.filter((company) => company.name === 'OMV AG').length;
 
 	const tableCellClasses = 'text-semibold text-sm text-center px-1 leading-tight py-1';
@@ -31,16 +31,15 @@
 				</tr>
 			{/if}
 			{#each companiesGoalData as company (company.name)}
-				{@const companyMetaData = companies.find((c) => c.name == company.name)}
 				<tr class="border-b">
 					<td class={tableCellClasses}>
 						<img
 							src="https://base.klimadashboard.org/assets/{company.logoId}"
-							alt={companiesGoalData.name}
+							alt={company.name}
 							width="80"
 							height="80"
 							class="inline-block w-24 h-16 p-2 m-1 object-contain dark:bg-gray-100 rounded-xl"
-							title={companiesGoalData.name}
+							title={company.name}
 						/>
 					</td>
 					<td class={tableCellClasses}>
@@ -56,7 +55,7 @@
 							{/if}
 						{/if}
 					</td>
-					<td class={tableCellClasses} title={company.member_sbt}>
+					<td class={tableCellClasses}>
 						{#if company.member_sbt}
 							<CheckIcon additionalClasses="mx-auto" />
 						{:else}
@@ -68,10 +67,10 @@
 			{/each}
 		</tbody>
 	</table>
-	{#if isOMV}
-		<p class="text-sm pt-4">
-			*Öl und Gaskonzerne wie die OMV können aktuell nicht an der Science Based Target Initative
-			teilnehmen (SBTi Oil and Gas) und ihre Emmissionsziele validieren lassen.
-		</p>
-	{/if}
+{/if}
+{#if isOMV}
+	<p class="text-sm pt-4">
+		*Öl und Gaskonzerne wie die OMV können aktuell nicht an der Science Based Target Initative
+		teilnehmen (SBTi Oil and Gas) und ihre Emmissionsziele validieren lassen.
+	</p>
 {/if}

src/lib/components/charts/custom/companiesEmissions/CompanyEmissionsContainer.svelte

@@ -1,25 +1,19 @@
-<script>
-	// @ts-nocheck
-	import atxCompanies from '$lib/stores/companies';
-	import getDirectusInstance from '$lib/utils/directus';
-	import { readItems } from '@directus/sdk';
-	import { PUBLIC_VERSION } from '$env/static/public';
+<script lang="ts">
 	import CompanyEmissionsLineChart from './CompanyEmissionsLineChart.svelte';
 	import CompanyClimateGoals from './CompanyClimateGoals.svelte';
-	import { EMISSION_SCOPE_KEYS } from './constants';
-	import { getCompanyEmissionData, getAllSectors, getCompanyMetaData } from './getData';
+	import { getCompanyEmissionData, getAllSectors } from './getData';
 	import Switch from '$lib/components/Switch.svelte';
 	import { glossaryItem } from '$lib/stores/glossary';
 	import DataDownload from './DataDownload.svelte';
 	import { page } from '$app/state';
+	import type { CompanyMetaData, CompanyMetaDataArray } from './types';
 
-	export let companiesMetaData = [];
+	export let companiesMetaData: CompanyMetaDataArray = [];
 	export let chart;
 
-	const scopes = EMISSION_SCOPE_KEYS;
-	let selectedScopes = [1];
+	const scopes = [1, 2, 3];
+	let selectedScopes: number[] = [1];
 	let selectedSector = '';
-	let emissions;
 	let isFocusView = true;
 	let initialCompany = 'Erste Group Bank AG';
 	let selectedCompaniesNames = [initialCompany];
@@ -38,6 +32,8 @@
 	];
 	let selectedScope2Category = 'location_based';
 
+	type CompanyWithSelected = CompanyMetaData & { selected: boolean };
+
 	$: companies = companiesMetaData.map((company) => {
 		if (page.params.id && company.id === page.params.id) {
 			return {
@@ -50,7 +46,7 @@
 				selected: false
 			};
 		}
-	});
+	}) as CompanyWithSelected[];
 
 	function selectAll() {
 		companies = companies.map((company) => {
@@ -72,7 +68,7 @@
 		});
 	}
 
-	function onClickCompany(company) {
+	function onClickCompany(company: CompanyWithSelected) {
 		if (!isFocusView) {
 			companies = companies.map((c) => {
 				if (c.name === company.name) {
@@ -91,7 +87,6 @@
 	}
 
 	// Filter
-	$: allSelected = companies.reduce((selected, company) => selected && company.selected, true);
 	$: allDeselected = companies.reduce(
 		(deselected, company) => deselected && !company.selected,
 		true
@@ -101,7 +96,7 @@
 		.filter((company) => company.selected)
 		.map((company) => company.name);
 
-	function toggleScope(scope) {
+	function toggleScope(scope: number) {
 		if (selectedScopes.length === 1 && selectedScopes[0] === scope) return;
 		const index = selectedScopes.indexOf(scope);
 		if (index === -1) {
@@ -112,8 +107,9 @@
 		}
 	}
 
-	function handleGlossaryButtonClick(event) {
-		const term = event.target.dataset.term;
+	function handleGlossaryButtonClick(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		const term = target.dataset.term;
 		if (term) {
 			$glossaryItem = term;
 		}
@@ -135,7 +131,7 @@
         {selectedSector === sector.name
 						? 'text-black bg-gray-300 '
 						: 'text-gray-700 dark:text-gray-700 bg-gray-100 dark:bg-gray-500 '}"
-					aria-label={sector}
+					aria-label={sector.name}
 					title={sector.name}
 					on:click={() => {
 						if (selectedSector === sector.name) {
@@ -146,8 +142,8 @@
 					}}
 				>
 					<img
-						src="https://base.klimadashboard.org/assets/{sector.icon}"
-						alt="Energy"
+						src={`https://base.klimadashboard.org/assets/${sector.icon}`}
+						alt={sector.name}
 						height="60"
 						class="h-4"
 					/>
@@ -189,11 +185,11 @@
 					class="{isFocusView
 						? 'bg-agriculture'
 						: 'bg-energy'} h-3 w-3 inline-block rounded-full mr-1"
-				/>
+				></span>
 				{isFocusView ? 'Mehrfachauswahl: ein' : 'Mehrfachauswahl: aus'}
 			</button>
 		</div>
-		<div class="ml-auto" />
+		<div class="ml-auto"></div>
 	</div>
 	<!-- Companies -->
 	<div class="flex flex-wrap gap-2 mb-4">
@@ -209,13 +205,13 @@
 			>
 				<img
 					src="https://base.klimadashboard.org/assets/{company.sectorIconIds[0]}"
-					alt="Energy"
+					alt={company.sectors.join(', ')}
 					height="60"
 					class="h-4"
 				/>
 				<img
 					src="https://base.klimadashboard.org/assets/{company.logoId}"
-					alt={company.logo}
+					alt={company.name}
 					width="60"
 					height="60"
 					class="inline-block h-6 object-contain"
@@ -245,7 +241,7 @@
               {selectedScopes.includes(scope)
 							? 'text-black bg-gray-100 border-2 border-green-600'
 							: 'text-gray-600 bg-gray-100 border-2 border-gray-100'}"
-						aria-label={scope}
+						aria-label={`Scope ${scope}`}
 						on:click={() => toggleScope(scope)}
 					>
 						<span class="font-semibold tracking-wide">Scope {scope}</span>

src/lib/components/charts/custom/companiesEmissions/CompanyEmissionsLineChart.svelte

@@ -1,64 +1,47 @@
-<script>
-	// @ts-nocheck
+<script lang="ts">
 	import LineChart from '$lib/components/charts/chartLine.svelte';
-	import { EMISSION_SCOPE_KEYS } from './constants';
 	import { transformDataSingleCompany, transformDataMultipleCompanies } from './transformData';
+	import type { CompanyEmissionArray, CompanyMetaData } from './types';
 
-	export let emissions;
-	export let selectedCompanies;
-	export let selectedScopes;
-	export let selectedScope2Category = 'location_based';
+	export let emissions: CompanyEmissionArray;
+	export let selectedCompanies: CompanyMetaData[];
+	export let selectedScopes: number[];
+	export let selectedScope2Category: string = 'location_based';
 
-	let isScopeThreeSelected;
+	let isScopeThreeSelected: boolean;
 	$: isScopeThreeSelected = selectedScopes.includes(3);
 
-	let isSingleCompanySelected;
-	let selectedCompanyNames;
+	let isSingleCompanySelected: boolean;
+	let selectedCompanyNames: string[];
 	$: isSingleCompanySelected = selectedCompanies.length === 1;
 	$: selectedCompanyNames = [...selectedCompanies].map((company) => company.name);
 
-	const rawColors = ['#7CBAB3', '#575C75', '#71665B', '#B28834', '#8CAED9', '#E0A906', '#CF6317'];
-	const selectedScopesToColors = {
+	const rawColors: string[] = [
+		'#7CBAB3',
+		'#575C75',
+		'#71665B',
+		'#B28834',
+		'#8CAED9',
+		'#E0A906',
+		'#CF6317'
+	];
+	const selectedScopesToColors: Record<number, string> = {
 		1: '#4e79a7',
 		2: '#f28e2c',
 		3: '#e15759'
 	};
 
-	const selectedScopesToLabels = {
+	const selectedScopesToLabels: Record<number, string> = {
 		1: 'Scope 1',
 		2: 'Scope 2',
 		3: 'Scope 3'
 	};
 	const maxCompanies = 7;
 
-	// // Magazine Visuation Companies & Colors
-	// const rawColors = [
-	// 	'#19A6E2',
-	// 	'#08779A',
-	// 	'#910505',
-	// 	'#000000',
-	// 	'#036041',
-	// 	'#31B159',
-	// 	'#F2380F',
-	// 	'#0F469A',
-	// 	'#6787A6'
-	// ];
-	// selectedCompanyNames = [
-	// 	'Voestalpine AG',
-	// 	'OMV AG',
-	// 	'Wienerberger AG',
-	// 	'EVN AG',
-	// 	'Mayr-Melnhof Karton AG',
-	// 	'Lenzing AG',
-	// 	'STRABAG SE',
-	// 	'Verbund AG',
-	// 	'Austria Technologie & Systemtechnik AG'
-	// ];
-
-	let dataset = [];
-	let keys;
-	let labels;
-	let colors;
+	let dataset: Array<Record<string, any>> = [];
+	let keys: number[] | string[];
+	let labels: string[];
+	let colors: string[];
 	$: {
 		if (emissions && selectedCompanies && selectedScopes) {
 			if (isSingleCompanySelected) {
@@ -115,13 +98,16 @@
 		</p>
 	{/if}
 {:else if selectedCompanies.length === 0}
-	<div class="h-28"></div>
+	<div class="h-20"></div>
 	<p class="text-center">Keine Unternehmen ausgewählt.</p>
 	<p class="text-center">⬆ Wähle oben bis zu sieben Unternehmen aus! ⬆</p>
+	<div class="h-20"></div>
 {:else if selectedCompanies.length > maxCompanies}
-	<div class="h-28"></div>
+	<div class="h-20"></div>
 	<p class="text-center">Zu viele Unternehmen ausgewählt. Wähle maximal 7 Unternehmen.</p>
+	<div class="h-20"></div>
 {:else}
-	<div class="h-28"></div>
+	<div class="h-20"></div>
 	<p class="text-center">Laden...</p>
+	<div class="h-20"></div>
 {/if}

src/lib/components/charts/custom/companiesEmissions/DataDownload.svelte

@@ -1,9 +1,10 @@
-<script>
+<script lang="ts">
 	import { page } from '$app/state';
+	import type { CompanyEmission, CompanyEmissionArray } from './types';
 
-	export let data;
+	export let data: CompanyEmissionArray;
 
-	function escapeCSVValue(value) {
+	function escapeCSVValue(value: string | number | null | undefined) {
 		if (typeof value === 'string') {
 			// Escape double quotes by doubling them
 			const escaped = value.replace(/"/g, '""');
@@ -23,7 +24,7 @@
 			return;
 		}
 
-		const headers = Object.keys(data[0]);
+		const headers = Object.keys(data[0]) as (keyof CompanyEmission)[];
 		const rows = data.map((row) => headers.map((header) => escapeCSVValue(row[header])).join(','));
 		const csvContent = [headers.join(','), ...rows].join('\n');
 

src/lib/components/charts/custom/companiesEmissions/constants.js

@@ -1,6 +1,7 @@
 import getDirectusInstance from '$lib/utils/directus';
 import { readItems } from '@directus/sdk';
 import { flattenCompanies } from './utils';
+import type { Company, CompanyEmissionArray } from './types';
 
 // NOTE: Use these filters to filter directly via the API call,
 // instead of fetching all data and filtering client side:
@@ -17,11 +18,10 @@ export const getCompanyEmissionData = async () => {
 	const data = await directus.request(
 		readItems('companies_emissions', {
 			fields: ['year', 'company', 'scope', 'value', 'category', 'source'],
-
 			limit: -1
 		})
 	);
-	return data;
+	return data as CompanyEmissionArray;
 };
 
 export const getCompanyMetaData = async () => {
@@ -41,7 +41,11 @@ export const getCompanyMetaData = async () => {
 			limit: -1
 		})
 	);
-	return flattenCompanies(data);
+
+	// Flatten data for easier usage in the chart components
+	const flattenedData = flattenCompanies(data as Company[]);
+
+	return flattenedData;
 };
 
 export const getAllSectors = async () => {

src/lib/components/charts/custom/companiesEmissions/getData.ts

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import CompanyEmissionsContainer from './CompanyEmissionsContainer.svelte';
 	import { getCompanyMetaData } from './getData';