Merge branch 'main' into dev

Author: davidpomerenke

frontend-nextjs/src/components/EventsTimeline/EventsTimelineLegend.tsx

@@ -21,43 +21,43 @@ const placeholderOrganisations: LegendOrganisation[] = [
 	{
 		slug: 'fridays-for-future' as EventOrganizerSlugType,
 		name: 'Fridays for Future',
-		color: 'var(--categorical-color-1)',
+		color: 'var(--categorical-color-6)',
 		isMain: true,
 	},
 	{
 		slug: 'last-generation' as EventOrganizerSlugType,
 		name: 'Last Generation',
-		color: 'var(--categorical-color-2)',
+		color: 'var(--categorical-color-5)',
 		isMain: true,
 	},
 	{
 		slug: 'extinction-rebellion' as EventOrganizerSlugType,
 		name: 'Extinction Rebellion',
-		color: 'var(--categorical-color-3)',
+		color: 'var(--categorical-color-7)',
 		isMain: true,
 	},
 	{
 		slug: 'bund' as EventOrganizerSlugType,
 		name: 'BUND',
-		color: 'var(--categorical-color-4)',
+		color: 'var(--categorical-color-14)',
 		isMain: true,
 	},
 	{
-		slug: 'greenpeace' as EventOrganizerSlugType,
-		name: 'Greenpeace',
-		color: 'var(--categorical-color-5)',
+		slug: 'nabu' as EventOrganizerSlugType,
+		name: 'NABU',
+		color: 'var(--categorical-color-2)',
 		isMain: true,
 	},
 	{
-		slug: 'verdi-united-services-union' as EventOrganizerSlugType,
-		name: 'Ver.di: United Services Union',
-		color: 'var(--categorical-color-6)',
+		slug: 'greenpeace' as EventOrganizerSlugType,
+		name: 'Greenpeace',
+		color: 'var(--categorical-color-3)',
 		isMain: true,
 	},
 	{
 		slug: 'ende-gelaende' as EventOrganizerSlugType,
 		name: 'Ende Gelaende',
-		color: 'var(--categorical-color-7)',
+		color: 'var(--categorical-color-4)',
 		isMain: true,
 	},
 	{
@@ -66,28 +66,10 @@ const placeholderOrganisations: LegendOrganisation[] = [
 		color: 'var(--categorical-color-8)',
 		isMain: true,
 	},
-	{
-		slug: 'mlpd-marxist-leninist-party-of-germany' as EventOrganizerSlugType,
-		name: 'MLPD: Marxist-Leninist Party of Germany',
-		color: 'var(--categorical-color-9)',
-		isMain: true,
-	},
 	{
 		slug: 'the-left' as EventOrganizerSlugType,
 		name: 'The Left',
-		color: 'var(--categorical-color-10)',
-		isMain: true,
-	},
-	{
-		slug: 'government-of-germany' as EventOrganizerSlugType,
-		name: 'Government of Germany',
-		color: 'var(--grayDark)',
-		isMain: false,
-	},
-	{
-		slug: 'adfc-german-bicycle-club' as EventOrganizerSlugType,
-		name: 'ADFC: German Bicycle Club',
-		color: 'var(--categorical-color-11)',
+		color: 'var(--categorical-color-1)',
 		isMain: true,
 	},
 	{
@@ -96,12 +78,6 @@ const placeholderOrganisations: LegendOrganisation[] = [
 		color: 'var(--categorical-color-12)',
 		isMain: true,
 	},
-	{
-		slug: 'rebell-youth-league-rebel' as EventOrganizerSlugType,
-		name: 'REBELL: Youth League Rebel',
-		color: 'var(--categorical-color-14)',
-		isMain: true,
-	},
 ]
 
 function EventsTimelineLegend({

frontend-nextjs/src/components/TopicChartTooltip.tsx

@@ -1,53 +1,53 @@
-import { cn } from "@/utility/classNames";
-import type { ComparableDateItemType } from "@/utility/comparableDateItemSchema";
-import { format } from "@/utility/dateUtil";
-import { texts, titleCase } from "@/utility/textUtil";
-import { getTopicIcon } from "@/utility/topicsUtil";
-import { memo } from "react";
+import { cn } from '@/utility/classNames'
+import type { ComparableDateItemType } from '@/utility/comparableDateItemSchema'
+import { format } from '@/utility/dateUtil'
+import { texts, titleCase } from '@/utility/textUtil'
+import { getTopicIcon } from '@/utility/topicsUtil'
+import { memo } from 'react'
 import {
 	type AggregationUnitType,
 	formatDateByAggregationUnit,
-} from "./EventsTimeline/useAggregationUnit";
-import { ImpactKeywordLabel } from "./ImpactChart/ImpactKeywordLabel";
+} from './EventsTimeline/useAggregationUnit'
+import { ImpactKeywordLabel } from './ImpactChart/ImpactKeywordLabel'
 
 function TopicChartTooltip({
 	aggregationUnit,
 	topics,
 	item,
 }: {
-	aggregationUnit: AggregationUnitType;
+	aggregationUnit: AggregationUnitType
 	topics: {
-		topic: string;
-		color: string;
-		sum: number;
-	}[];
+		topic: string
+		color: string
+		sum: number
+	}[]
 	item: Record<string, number> & {
-		comparableDateObject: ComparableDateItemType;
-	};
+		comparableDateObject: ComparableDateItemType
+	}
 }) {
-	const { date } = item.comparableDateObject;
+	const { date } = item.comparableDateObject
 	return (
 		<div
 			className={cn(
-				"bg-pattern-soft border border-grayMed p-4 flex flex-col gap-1",
-				"shadow-lg shadow-black/5 dark:shadow-black/50",
+				'bg-pattern-soft border border-grayMed p-4 flex flex-col gap-1',
+				'shadow-lg shadow-black/5 dark:shadow-black/50',
 			)}
 		>
 			<strong className="font-bold font-headlines text-base leading-tight pb-2 mb-2 border-b border-grayLight min-w-56">
-				{aggregationUnit !== "day" &&
+				{aggregationUnit !== 'day' &&
 					`${aggregationUnit.charAt(0).toUpperCase()}${aggregationUnit.slice(
 						1,
 					)} of `}
-				{aggregationUnit === "day" && format(date, "EEEE d MMMM yyyy")}
-				{aggregationUnit === "month" && format(date, "MMMM yyyy")}
-				{aggregationUnit !== "day" &&
-					aggregationUnit !== "month" &&
+				{aggregationUnit === 'day' && format(date, 'EEEE d MMMM yyyy')}
+				{aggregationUnit === 'month' && format(date, 'MMMM yyyy')}
+				{aggregationUnit !== 'day' &&
+					aggregationUnit !== 'month' &&
 					formatDateByAggregationUnit(date, aggregationUnit)}
 			</strong>
 			{topics
 				.map((t) => ({ ...t, value: item[t.topic] ?? 0 }))
 				.map(({ topic, value, color }) => {
-					const Icon = getTopicIcon(topic);
+					const Icon = getTopicIcon(topic)
 					return (
 						<div
 							key={topic}
@@ -67,16 +67,18 @@ function TopicChartTooltip({
 								{(+value)?.toLocaleString(texts.language) ?? 0}
 							</span>
 						</div>
-					);
+					)
 				})}
 			<div className="border-t border-grayLight pt-1 mt-1 flex gap-4 justify-between items-center">
 				<strong className="font-bold ">{texts.charts.common.total}:</strong>
 				<span className="font-mono text-xs text-grayDark">
-					{topics.reduce((acc, { topic }) => acc + (item[topic] || 0), 0)}
+					{topics
+						.reduce((acc, { topic }) => acc + (item[topic] || 0), 0)
+						.toLocaleString(texts.language)}
 				</span>
 			</div>
 		</div>
-	);
+	)
 }
 
-export default memo(TopicChartTooltip);
+export default memo(TopicChartTooltip)

frontend-nextjs/src/components/TrendWithImpactChartWrapper.tsx

@@ -118,7 +118,7 @@ function TrendWithImpactChartWrapper({
 									{impactHeadline}
 								</h3>
 								<p className="text-sm text-grayDark">{impactDescription}</p>
-								<Alert className="mt-2 px-2 py-1 flex-row flex items-baseline gap-4 xl:w-[calc(100%-12rem)]">
+								<Alert className="mt-2 px-2 py-1 flex-row flex items-baseline gap-4 xl:w-fit xl:max-w-[calc(100%-12rem)]">
 									<AlertTitle className="inline-flex items-baseline gap-2 text-nowrap">
 										<AlertTriangle className="w-4 h-4 translate-y-0.5" />
 										{texts.charts.impact.disclaimer.title}