Merge pull request #83 from pbl-nl/NDC_label

Extra info on NDCs in country graphs

Author: chantalwuer

src/lib/charts/components/NdcRange.svelte

@@ -25,6 +25,8 @@
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		mouseover: (e?: any) => void;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		mousetextover: (e?: any) => void;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		mouseout: (e?: any) => void;
 	}
 
@@ -38,6 +40,7 @@
 		textNdc,
 		color = 'black',
 		mouseover,
+		mousetextover,
 		mouseout
 	}: Props = $props();
 
@@ -100,6 +103,11 @@
 		font-size="18px"
 		font-weight="bold"
 		class="text-container"
+		onmouseover={mousetextover}
+		onfocus={() => mouseover()}
+		onmouseout={() => mouseout()}
+		onblur={() => mouseout()}
+		role="tooltip"
 	>
 		{textNdc}
 	</text>

src/routes/about/+page.svelte

@@ -228,14 +228,19 @@
 				<QA question="What NDC data is shown?">
 					When NDCs area published by countries, they are often expressed in relative terms (e.g. 30
 					% reduction in 2030 compared to 1990). The absolute values are calculations that depend on
-					the historical and baseline emission data used. We use NDC data based on the data we use
-					for the Carbon Budget Explorer (Jones et al., 2021), which is deduced from
+					the historical and baseline emission data used.
+					<br />
+					We use NDC data deduced from the
 					<a
 						href="https://themasites.pbl.nl/o/climate-ndc-policies-tool/"
 						target="_blank"
 						rel="noopener noreferrer">PBL NDC tool</a
-					>, which is based on historical data from PRIMAP. All NDC values are only an indication.
-					When precise NDC data is needed, it is better to refer to the official NDC documents.
+					>, which is based on historical data from PRIMAP and includes additional insights from
+					land use emissions accounting models. Because we analyze all greenhouse gas emissions
+					including land use, we also convert NDC data to that level.
+					<br />
+					All NDC values are only an indication. When precise NDC data is needed, it is better to refer
+					to the official NDC documents.
 				</QA>
 				<QA question="Why are there no NDCs for European Member States?">
 					European Member States have a joint NDC, which is to reduce GHG emissions by at least 55 %

src/routes/regions/[region]/+page.svelte

@@ -75,9 +75,17 @@
 		}
 		return `Nationally determined contribution in ${row.time} ranges from ${row.max.toFixed(
 			0
-		)} to ${row.min.toFixed(0)} Mt CO₂e`;
+		)} to ${row.min.toFixed(0)} Mt CO₂e.`;
 	});
 
+	const hoverTextNdc = function (e: ComponentEvents<SvelteComponent>) {
+		const myevt = {
+			e,
+			msg: 'The NDC data shown here are country reported inventory data based on the most recent NDC submission available in the UNFCCC NDC registry. Read more on the About page.'
+		};
+		evt = myevt;
+	};
+
 	function hoverAllocationMethod(id: string) {
 		return hoverBuilder(
 			(row) => `${id} in ${row.time} is ${row.mean.toFixed(0)} Mt CO₂e (with default settings)`
@@ -163,6 +171,13 @@
 									0
 								)} to ${data.ndcReduction.max.toFixed(0)} % reduction`}
 							{/if}
+							{#if !data.isEuMemberState}
+								<span
+									class="tooltip tooltip-right text-lg"
+									data-tip="To calculate reduction numbers from NDC targets, country inventory data are compared to historic emissions, which are affected by uncertainties and varying land use accounting methods. These numbers may therefore differ from those shown in the graph."
+									>ⓘ</span
+								>
+							{/if}
 						</span>
 					</p>
 				</div>
@@ -229,9 +244,10 @@
 									y1={range[1]}
 									textNdcMin={`Min: ${range[0].toFixed(0)}`}
 									textNdcMax={`Max: ${range[1].toFixed(0)}`}
-									textNdc={`NDC`}
+									textNdc="NDC"
 									color="black"
 									mouseover={hoverNdc}
+									mousetextover={hoverTextNdc}
 									mouseout={(e) => (evt = e)}
 								/>
 							{/if}