-
i
- }`}
+ }`}
className="text-pretty"
>
{desc}
@@ -43,7 +41,7 @@ export default function EventsPageWithSuspense() {
key={`${desc}-${
// biome-ignore lint/suspicious/noArrayIndexKey:
i
- }`}
+ }`}
className="text-pretty"
>
{desc}
@@ -69,7 +67,7 @@ export default function EventsPageWithSuspense() {
key={`${desc}-${
// biome-ignore lint/suspicious/noArrayIndexKey:
i
- }`}
+ }`}
className="text-pretty"
>
{desc}
@@ -97,7 +95,7 @@ export default function EventsPageWithSuspense() {
key={`${desc}-${
// biome-ignore lint/suspicious/noArrayIndexKey:
i
- }`}
+ }`}
className="text-pretty"
>
{desc}
@@ -119,5 +117,5 @@ export default function EventsPageWithSuspense() {
- );
+ )
},
size: 50,
}),
- ];
- }, []);
-
- if (!data) return null;
+ ]
+ }, [])
+ const isLoadingAny = Boolean(isLoadingSelectedOrgs || isLoadingEvents)
return (
columns={columns}
data={extendedData}
- isLoading={isPending ?? true}
+ isLoading={isLoadingAny}
/>
- );
+ )
}
-export default OrganisationsTable;
+export default OrganisationsTable
diff --git a/frontend-nextjs/src/components/OrgsLegend.tsx b/frontend-nextjs/src/components/OrgsLegend.tsx
index 98471469..b094d874 100644
--- a/frontend-nextjs/src/components/OrgsLegend.tsx
+++ b/frontend-nextjs/src/components/OrgsLegend.tsx
@@ -1,60 +1,69 @@
-"use client";
-import type { EventOrganizerSlugType } from "@/utility/eventsUtil";
-import { texts } from "@/utility/textUtil";
-import { ArrowRight } from "lucide-react";
-import { useMemo } from "react";
-import type { LegendOrganisation } from "./EventsTimeline/EventsTimelineLegend";
-import OrgsLegendItem from "./OrgsLegendItem";
+'use client'
+import type { EventOrganizerSlugType } from '@/utility/eventsUtil'
+import { texts } from '@/utility/textUtil'
+import { ArrowRight } from 'lucide-react'
+import { useMemo } from 'react'
+import type { LegendOrganisation } from './EventsTimeline/EventsTimelineLegend'
+import OrgsLegendItem from './OrgsLegendItem'
function getOtherOrg(organisations: LegendOrganisation[]) {
return {
- slug: "other" as EventOrganizerSlugType,
+ slug: 'other' as EventOrganizerSlugType,
name: texts.charts.protest_timeline.legend.other,
count: organisations.reduce((acc, org) => acc + (org.count ?? 0), 0),
color: `var(--grayDark)`,
isMain: false,
orgs: organisations.sort((a, b) => {
- if (!a.count || !b.count) return a.name.localeCompare(b.name);
- if (a.count > b.count) return -1;
- if (a.count < b.count) return 1;
- return a.name.localeCompare(b.name);
+ if (!a.count || !b.count) return a.name.localeCompare(b.name)
+ if (a.count > b.count) return -1
+ if (a.count < b.count) return 1
+ return a.name.localeCompare(b.name)
}),
- };
+ }
}
function OrgsLegend({
organisations,
+ selectedOrganisations,
}: {
- organisations: LegendOrganisation[];
+ organisations: LegendOrganisation[]
+ selectedOrganisations: LegendOrganisation[]
}) {
const { allOrgs, otherOrgs } = useMemo(() => {
- const mainOrgs: LegendOrganisation[] = [];
- const otherOrgs: LegendOrganisation[] = [];
+ const mainOrgs: LegendOrganisation[] = []
+ const otherOrgs: LegendOrganisation[] = []
for (const org of organisations) {
- if (!org.isMain) otherOrgs.push(org);
- else mainOrgs.push(org);
+ if (!org.isMain) otherOrgs.push(org)
+ else
+ mainOrgs.push({
+ ...org,
+ isActive:
+ selectedOrganisations.length !== organisations.length &&
+ !!selectedOrganisations.find((x) => x.slug === org.slug),
+ })
}
if (mainOrgs.length === 0) {
return {
allOrgs: organisations
.slice(0, 16)
- .concat(getOtherOrg(organisations.slice(16))),
+ .concat(getOtherOrg(organisations.slice(16)))
+ .map((org) => ({ ...org, isActive: false })),
otherOrgs: organisations.slice(16),
- };
+ }
}
if (organisations.length < 16) {
- return { allOrgs: [...mainOrgs, ...otherOrgs], otherOrgs: [] };
+ return { allOrgs: [...mainOrgs, ...otherOrgs], otherOrgs: [] }
}
- if (otherOrgs.length === 0) return { allOrgs: mainOrgs, otherOrgs: [] };
+ if (otherOrgs.length === 0) return { allOrgs: mainOrgs, otherOrgs: [] }
return {
allOrgs: [...mainOrgs, getOtherOrg(otherOrgs)],
otherOrgs,
- };
- }, [organisations]);
+ }
+ }, [organisations, selectedOrganisations])
- if (allOrgs.length === 0) return null;
+ if (allOrgs.length === 0) return null
return (
- );
+ )
}
-export default OrgsLegend;
+export default OrgsLegend
diff --git a/frontend-nextjs/src/components/OrgsLegendItem.tsx b/frontend-nextjs/src/components/OrgsLegendItem.tsx
index c6c61d49..5a8b8064 100644
--- a/frontend-nextjs/src/components/OrgsLegendItem.tsx
+++ b/frontend-nextjs/src/components/OrgsLegendItem.tsx
@@ -1,21 +1,21 @@
-import { cn } from "@/utility/classNames";
-import { texts } from "@/utility/textUtil";
-import { useSearchParams } from "next/navigation";
-import { memo, useMemo } from "react";
-import type { LegendOrganisation } from "./EventsTimeline/EventsTimelineLegend";
-import InternalLink from "./InternalLink";
-import OrgsTooltip from "./OrgsTooltip";
-import RoundedColorPill from "./RoundedColorPill";
-import { Portal, Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import { cn } from '@/utility/classNames'
+import { texts } from '@/utility/textUtil'
+import { useSearchParams } from 'next/navigation'
+import { memo, useMemo } from 'react'
+import type { LegendOrganisation } from './EventsTimeline/EventsTimelineLegend'
+import InternalLink from './InternalLink'
+import OrgsTooltip from './OrgsTooltip'
+import RoundedColorPill from './RoundedColorPill'
+import { Portal, Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip'
function OrgsLegendItem({
org,
otherOrgs,
}: {
- org: LegendOrganisation;
- otherOrgs?: LegendOrganisation[];
+ org: LegendOrganisation
+ otherOrgs?: LegendOrganisation[]
}) {
- const searchParams = useSearchParams();
+ const searchParams = useSearchParams()
// biome-ignore lint/correctness/useExhaustiveDependencies:
const triggerContent = useMemo(() => {
@@ -23,8 +23,13 @@ function OrgsLegendItem({
<>
+
{texts.homepage.hero.buttons.goToDashboard}
- );
+ )
}
diff --git a/frontend-nextjs/src/app/(pages)/page.tsx b/frontend-nextjs/src/app/(pages)/page.tsx
index 1ffc6e2c..fd59ccc2 100644
--- a/frontend-nextjs/src/app/(pages)/page.tsx
+++ b/frontend-nextjs/src/app/(pages)/page.tsx
@@ -1,13 +1,13 @@
-import InternalLink from "@/components/InternalLink";
-import { NewsletterForm } from "@/components/NewsletterForm";
-import AppLogo from "@/components/logos/AppLogo";
-import { buttonVariants } from "@/components/ui/button";
-import headerImage from "@/images/header-bg.webp";
-import dashboardScreenshotDark from "@/images/home-screenshot-dashboard-dark.webp";
-import dashboardScreenshotLight from "@/images/home-screenshot-dashboard-light.webp";
-import { cn } from "@/utility/classNames";
-import { texts } from "@/utility/textUtil";
-import Image from "next/image";
+import InternalLink from '@/components/InternalLink'
+import { NewsletterForm } from '@/components/NewsletterForm'
+import AppLogo from '@/components/logos/AppLogo'
+import { buttonVariants } from '@/components/ui/button'
+import headerImage from '@/images/header-bg.webp'
+import dashboardScreenshotDark from '@/images/home-screenshot-dashboard-dark.webp'
+import dashboardScreenshotLight from '@/images/home-screenshot-dashboard-light.webp'
+import { cn } from '@/utility/classNames'
+import { texts } from '@/utility/textUtil'
+import Image from 'next/image'
export const metadata = {
title: `${texts.mainNavigation.home} | ${texts.seo.siteTitle}`,
@@ -17,8 +17,8 @@ export default function HomePageWithSuspense() {
return (
-
- {({ reset }) => (
- (
-
- )}
-
- );
+
+ {({ reset }) => (
+ (
+
+ )}
+
+
+ )
}
diff --git a/frontend-nextjs/src/components/OrganisationPageHeader.tsx b/frontend-nextjs/src/components/OrganisationPageHeader.tsx
index 68d1598a..9e37bec4 100644
--- a/frontend-nextjs/src/components/OrganisationPageHeader.tsx
+++ b/frontend-nextjs/src/components/OrganisationPageHeader.tsx
@@ -1,18 +1,23 @@
-"use client";
-import { cn } from "@/utility/classNames";
-import { parseErrorMessage } from "@/utility/errorHandlingUtil";
-import type { EventOrganizerSlugType } from "@/utility/eventsUtil";
-import { getOrgStats } from "@/utility/orgsUtil";
-import { texts } from "@/utility/textUtil";
-import useEvents from "@/utility/useEvents";
-import { QueryErrorResetBoundary } from "@tanstack/react-query";
-import { ArrowLeft } from "lucide-react";
-import { ErrorBoundary } from "next/dist/client/components/error-boundary";
-import Image from "next/image";
-import { Suspense, memo, useMemo } from "react";
-import placeholderImage from "../assets/images/placeholder-image.avif";
-import ComponentError from "./ComponentError";
-import InternalLink from "./InternalLink";
+'use client'
+import { cn } from '@/utility/classNames'
+import { parseErrorMessage } from '@/utility/errorHandlingUtil'
+import type { EventOrganizerSlugType } from '@/utility/eventsUtil'
+import { getOrgStats } from '@/utility/orgsUtil'
+import { texts } from '@/utility/textUtil'
+import { useTimeFilteredEvents } from '@/utility/useEvents'
+import {
+ useAllOrganisations,
+ useOrganisation,
+} from '@/utility/useOrganisations'
+import { QueryErrorResetBoundary } from '@tanstack/react-query'
+import { ArrowLeft } from 'lucide-react'
+import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
+import Image from 'next/image'
+import { Suspense, memo, useMemo } from 'react'
+import placeholderImage from '../assets/images/placeholder-image.avif'
+import ComponentError from './ComponentError'
+import InternalLink from './InternalLink'
+import OrgsTooltip from './OrgsTooltip'
const PlaceholderSkeleton = memo(
({ width, height }: { width: number | string; height?: number | string }) => (
@@ -21,46 +26,48 @@ const PlaceholderSkeleton = memo(
style={{ width, height }}
/>
),
-);
+)
-const OrganisationPageWithPopulatedData = memo(
- ({
- slug,
- data,
- }: {
- data?: ReturnType["data"];
- slug: EventOrganizerSlugType;
- }) => {
- const org = data?.organisations.find((x) => x.slug === slug);
+function formatNumber(num: number) {
+ if (Number.isNaN(num)) return '?'
+ return Number.parseFloat(num.toFixed(2)).toLocaleString(texts.language)
+}
+
+const OrganisationPageHeader = memo(
+ ({ slug }: { slug?: EventOrganizerSlugType }) => {
+ const { organisation } = useOrganisation(slug)
+ const { organisations } = useAllOrganisations()
+ const { timeFilteredEvents } = useTimeFilteredEvents()
const title = useMemo(
() => (
<>
- {org ? (
- {org.name}
+ {organisation ? (
+ {organisation.name}
) : (
{({ reset }) => (
{
- const { message, details } = parseErrorMessage(error);
+ const { message, details } = parseErrorMessage(error)
return (
)}
- );
+ )
}
diff --git a/frontend-nextjs/src/components/OrganisationsSelect.tsx b/frontend-nextjs/src/components/OrganisationsSelect.tsx
index 17c5b2bf..f11febb9 100644
--- a/frontend-nextjs/src/components/OrganisationsSelect.tsx
+++ b/frontend-nextjs/src/components/OrganisationsSelect.tsx
@@ -1,34 +1,34 @@
-"use client";
+'use client'
import {
Check,
ChevronsUpDown,
HeartHandshakeIcon,
Loader2,
-} from "lucide-react";
+} from 'lucide-react'
-import { Button } from "@/components/ui/button";
+import { Button } from '@/components/ui/button'
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
-} from "@/components/ui/command";
+} from '@/components/ui/command'
import {
Popover,
PopoverContent,
PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/utility/classNames";
+} from '@/components/ui/popover'
+import { cn } from '@/utility/classNames'
import type {
EventOrganizerSlugType,
OrganisationType,
-} from "@/utility/eventsUtil";
-import { texts } from "@/utility/textUtil";
-import { useOrganisations } from "@/utility/useOrganisations";
-import { useMemo, useState } from "react";
-import RoundedColorPill from "./RoundedColorPill";
+} from '@/utility/eventsUtil'
+import { texts } from '@/utility/textUtil'
+import { useAllOrganisations } from '@/utility/useOrganisations'
+import { useMemo, useState } from 'react'
+import RoundedColorPill from './RoundedColorPill'
export function OrganisationsSelect({
className,
@@ -37,49 +37,49 @@ export function OrganisationsSelect({
selectedOrganisations,
onChange = () => {},
}: {
- className?: string;
- multiple?: boolean;
- organisations?: EventOrganizerSlugType[];
- selectedOrganisations: EventOrganizerSlugType[];
- onChange?: (orgs: EventOrganizerSlugType[]) => void;
+ className?: string
+ multiple?: boolean
+ organisations?: EventOrganizerSlugType[]
+ selectedOrganisations: EventOrganizerSlugType[]
+ onChange?: (orgs: EventOrganizerSlugType[]) => void
}) {
- const [open, setOpen] = useState(false);
- const { isPending, organisations: allOrganisations } = useOrganisations();
+ const [open, setOpen] = useState(false)
+ const { isPending, organisations: allOrganisations } = useAllOrganisations()
const selectedOrgs = useMemo(() => {
return selectedOrganisations
.map((slug) => allOrganisations.find(({ slug: s }) => s === slug))
- .filter(Boolean) as OrganisationType[];
- }, [allOrganisations, selectedOrganisations]);
+ .filter(Boolean) as OrganisationType[]
+ }, [allOrganisations, selectedOrganisations])
const orgsToSelectFrom = useMemo(() => {
- if (typeof organisations === "undefined") return allOrganisations;
+ if (typeof organisations === 'undefined') return allOrganisations
return (
organisations.map((slug) =>
allOrganisations.find(({ slug: s }) => s === slug),
) || []
- ).filter(Boolean) as OrganisationType[];
- }, [organisations, allOrganisations]);
+ ).filter(Boolean) as OrganisationType[]
+ }, [organisations, allOrganisations])
const selectedOrganizerSlugs = useMemo(
() => selectedOrgs?.map(({ slug }) => slug),
[selectedOrgs],
- );
+ )
const firstSelectedOrg = useMemo(
() => selectedOrgs?.find(({ slug }) => slug === selectedOrganizerSlugs[0]),
[selectedOrganizerSlugs, selectedOrgs],
- );
+ )
const selectedColors = useMemo(() => {
const colors = Array.from(
selectedOrganizerSlugs.reduce((acc, orgSlug) => {
- const org = selectedOrgs.find(({ slug }) => slug === orgSlug);
- if (!org) return acc;
- acc.add(org.color);
- return acc;
+ const org = selectedOrgs.find(({ slug }) => slug === orgSlug)
+ if (!org) return acc
+ acc.add(org.color)
+ return acc
}, new Set()),
- );
- return colors;
- }, [selectedOrganizerSlugs, selectedOrgs]);
+ )
+ return colors
+ }, [selectedOrganizerSlugs, selectedOrgs])
return (
@@ -89,10 +89,10 @@ export function OrganisationsSelect({
role="combobox"
aria-expanded={open}
className={cn(
- "w-fit justify-between rounded-none max-md:gap-0",
- "hover:bg-grayLight hover:text-fg border-grayMed",
- "group transition-colors max-lg:px-2 max-lg:py-1",
- isPending && "text-grayDark",
+ 'w-fit justify-between rounded-none max-md:gap-0',
+ 'hover:bg-grayLight hover:text-fg border-grayMed',
+ 'group transition-colors max-lg:px-2 max-lg:py-1',
+ isPending && 'text-grayDark',
className,
)}
>
@@ -102,14 +102,14 @@ export function OrganisationsSelect({
@@ -119,14 +119,14 @@ export function OrganisationsSelect({
{multiple && (
{!isPending && (
@@ -172,9 +172,11 @@ export function OrganisationsSelect({
onSelect={() => {
const newSlugs =
selectedOrganizerSlugs.length === selectedOrgs.length
- ? []
- : selectedOrganizerSlugs;
- onChange(newSlugs);
+ ? selectedOrganizerSlugs.length === 0
+ ? allOrganisations.map((x) => x.slug)
+ : []
+ : selectedOrganizerSlugs
+ onChange(newSlugs)
}}
>
{texts.filters.organisations.toggleAllNone}
@@ -187,23 +189,23 @@ export function OrganisationsSelect({
onSelect={(currentValue: string) => {
const alreadySelected = selectedOrganizerSlugs.includes(
currentValue as EventOrganizerSlugType,
- );
+ )
const newValues = alreadySelected
? selectedOrganizerSlugs.filter(
(slug) => slug !== currentValue,
)
- : [...selectedOrganizerSlugs, org.slug];
- const uniqueValues = Array.from(new Set(newValues));
- onChange(multiple ? uniqueValues : [org.slug]);
- !multiple && setOpen(false);
+ : [...selectedOrganizerSlugs, org.slug]
+ const uniqueValues = Array.from(new Set(newValues))
+ onChange(multiple ? uniqueValues : [org.slug])
+ !multiple && setOpen(false)
}}
>
o === org.slug)
- ? "opacity-100"
- : "opacity-0",
+ ? 'opacity-100'
+ : 'opacity-0',
)}
/>
@@ -217,5 +219,5 @@ export function OrganisationsSelect({
)}
- );
+ )
}
diff --git a/frontend-nextjs/src/components/OrganisationsTable.tsx b/frontend-nextjs/src/components/OrganisationsTable.tsx
index 16ce9727..f48a547b 100644
--- a/frontend-nextjs/src/components/OrganisationsTable.tsx
+++ b/frontend-nextjs/src/components/OrganisationsTable.tsx
@@ -1,55 +1,55 @@
-import { useFiltersStore } from "@/providers/FiltersStoreProvider";
-import { cn } from "@/utility/classNames";
-import { getOrgStats } from "@/utility/orgsUtil";
-import { texts } from "@/utility/textUtil";
-import useEvents from "@/utility/useEvents";
-import { createColumnHelper } from "@tanstack/react-table";
-import { useMemo } from "react";
-import { DataTable } from "./DataTable/DataTable";
-import InternalLink from "./InternalLink";
-import OrgsTooltip from "./OrgsTooltip";
-import RoundedColorPill from "./RoundedColorPill";
+import { cn } from '@/utility/classNames'
+import { getOrgStats } from '@/utility/orgsUtil'
+import { texts } from '@/utility/textUtil'
+import { useTimeFilteredEvents } from '@/utility/useEvents'
+import {
+ useAllOrganisations,
+ useSelectedOrganisations,
+} from '@/utility/useOrganisations'
+import { createColumnHelper } from '@tanstack/react-table'
+import { useMemo } from 'react'
+import { DataTable } from './DataTable/DataTable'
+import InternalLink from './InternalLink'
+import OrgsTooltip from './OrgsTooltip'
+import RoundedColorPill from './RoundedColorPill'
function formatNumber(num: number) {
- if (Number.isNaN(num)) return "?";
- return Math.round(num).toLocaleString(texts.language);
+ if (Number.isNaN(num)) return '?'
+ return Number.parseFloat(num.toFixed(2)).toLocaleString(texts.language)
}
function OrganisationsTable() {
- const { data, isPending } = useEvents();
- const { organizers } = useFiltersStore((state) => ({
- organizers: state.organizers,
- }));
+ const { isLoading: isLoadingSelectedOrgs, selectedOrganisations } =
+ useSelectedOrganisations()
+ const { isLoading: isLoadingEvents, timeFilteredEvents } =
+ useTimeFilteredEvents()
+ const { organisations } = useAllOrganisations()
const extendedData = useMemo(
() =>
- data?.organisations
- .filter(
- (org) => organizers.length === 0 || organizers.includes(org.slug),
- )
- .map((org) =>
- getOrgStats({
- events: data.events,
- organisations: data.organisations,
- organisation: org,
- }),
- ),
- [organizers, data],
- );
+ selectedOrganisations.map((org) =>
+ getOrgStats({
+ events: timeFilteredEvents,
+ organisations,
+ organisation: org,
+ }),
+ ),
+ [organisations, selectedOrganisations, timeFilteredEvents],
+ )
const columns = useMemo(() => {
- const columnHelper = createColumnHelper<(typeof extendedData)[0]>();
+ const columnHelper = createColumnHelper<(typeof extendedData)[0]>()
return [
- columnHelper.accessor("name", {
+ columnHelper.accessor('name', {
header: texts.organisationsPage.propertyNames.name,
cell: function render({ getValue, row }) {
- const { name, slug, color } = row.original;
+ const { name, slug, color } = row.original
return (
- );
+ )
},
size: 1000,
}),
- columnHelper.accessor("totalEvents", {
+ columnHelper.accessor('totalEvents', {
header: texts.organisationsPage.propertyNames.totalEvents,
cell: function render({ getValue }) {
- return Math.round(getValue()).toLocaleString(texts.language);
+ return Math.round(getValue()).toLocaleString(texts.language)
},
size: 50,
}),
- columnHelper.accessor("totalParticipants", {
+ columnHelper.accessor('totalParticipants', {
header: texts.organisationsPage.propertyNames.totalParticipants,
cell: function render({ getValue }) {
- return formatNumber(getValue());
+ return formatNumber(getValue())
},
size: 50,
}),
- columnHelper.accessor("avgParticipantsPerEvent", {
+ columnHelper.accessor('avgParticipantsPerEvent', {
header: texts.organisationsPage.propertyNames.avgParticipants,
cell: function render({ getValue }) {
- return formatNumber(getValue());
+ return formatNumber(getValue())
},
size: 50,
}),
- columnHelper.accessor("avgPartnerOrgsPerEvent", {
- header: texts.organisationsPage.propertyNames.avgPartners,
- cell: function render({ getValue }) {
- return formatNumber(getValue());
- },
- size: 50,
- }),
- columnHelper.accessor("totalPartners", {
+ columnHelper.accessor('totalPartners', {
header: texts.organisationsPage.propertyNames.totalPartners,
cell: function render({ getValue, row }) {
const partners = row.original.partners.sort((a, b) => {
- if (a.count < b.count) return 1;
- if (a.count > b.count) return -1;
- return a.name.localeCompare(b.name);
- });
- if (partners.length === 0) return 0;
+ if (a.count < b.count) return 1
+ if (a.count > b.count) return -1
+ return a.name.localeCompare(b.name)
+ })
+ if (partners.length === 0) return 0
return (
404
-{texts.fourOFour.heading}
++ {' '} + {texts.fourOFour.heading}{' '} +
{texts.fourOFour.description}
@@ -36,11 +36,11 @@ export default function HomePageWithSuspense() {
-
-
@@ -52,44 +52,44 @@ export default function HomePageWithSuspense() {
key={`${text}-${
// biome-ignore lint/suspicious/noArrayIndexKey:
@@ -52,44 +52,44 @@ export default function HomePageWithSuspense() {
key={`${text}-${
// biome-ignore lint/suspicious/noArrayIndexKey:
i
- }`}
+ }`}
>
{text}
))}
{texts.homepage.hero.buttons.goToDashboard}
{texts.homepage.hero.buttons.about}
{texts.homepage.hero.buttons.docs}
@@ -103,15 +103,15 @@ export default function HomePageWithSuspense() {
+
- );
+ )
}
diff --git a/frontend-nextjs/src/components/BaseLayout/index.tsx b/frontend-nextjs/src/components/BaseLayout/index.tsx
index 39ab78ee..4129f3eb 100644
--- a/frontend-nextjs/src/components/BaseLayout/index.tsx
+++ b/frontend-nextjs/src/components/BaseLayout/index.tsx
@@ -1,41 +1,41 @@
-"use client";
+'use client'
-import Footer from "@/components/Footer";
-import "@/styles/global.css";
-import { cn } from "@/utility/classNames";
-import { motion } from "framer-motion";
-import { usePathname } from "next/navigation";
-import { type ReactNode, useMemo, useRef } from "react";
-import { Menu } from "../menu";
-import { doesPathnameShowAnyFilter } from "../menu/HeaderMenu";
+import Footer from '@/components/Footer'
+import '@/styles/global.css'
+import { cn } from '@/utility/classNames'
+import { motion } from 'framer-motion'
+import { usePathname } from 'next/navigation'
+import { type ReactNode, useMemo, useRef } from 'react'
+import { Menu } from '../menu'
+import { doesPathnameShowAnyFilter } from '../menu/HeaderMenu'
export function BaseLayout({
children,
modal,
}: {
- children: ReactNode;
- modal: ReactNode;
+ children: ReactNode
+ modal: ReactNode
}) {
- const pathname = usePathname();
- const currentPage = pathname.split("/")[1] || "home";
- const showFilters = doesPathnameShowAnyFilter(pathname);
- const previouslyShown = useRef(showFilters);
+ const pathname = usePathname()
+ const currentPage = pathname.split('/')[1] || 'home'
+ const showFilters = doesPathnameShowAnyFilter(pathname)
+ const previouslyShown = useRef(showFilters)
const shouldExit = useMemo(() => {
- if (!previouslyShown.current) return showFilters;
- const wasShown = previouslyShown.current;
- previouslyShown.current = showFilters;
- return wasShown && !showFilters;
- }, [showFilters]);
+ if (!previouslyShown.current) return showFilters
+ const wasShown = previouslyShown.current
+ previouslyShown.current = showFilters
+ return wasShown && !showFilters
+ }, [showFilters])
return (
<>
+
@@ -107,14 +103,14 @@ export default function MediaSourceSelect() {
{
- setMediaSource(option.value);
- setIsOpened(false);
+ setMediaSource(option.value)
+ setIsOpened(false)
}}
>
@@ -164,5 +160,5 @@ export default function MediaSourceSelect() {
- );
+ )
}
diff --git a/frontend-nextjs/src/components/DocsPrevNextNav.tsx b/frontend-nextjs/src/components/DocsPrevNextNav.tsx
index 78acd6d3..e509ce71 100644
--- a/frontend-nextjs/src/components/DocsPrevNextNav.tsx
+++ b/frontend-nextjs/src/components/DocsPrevNextNav.tsx
@@ -1,62 +1,62 @@
-"use client";
-import { cn } from "@/utility/classNames";
-import { getDocsFlatToc } from "@/utility/docsUtil";
-import { texts } from "@/utility/textUtil";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-import { usePathname } from "next/navigation";
-import InternalLink from "./InternalLink";
+'use client'
+import { cn } from '@/utility/classNames'
+import { getDocsFlatToc } from '@/utility/docsUtil'
+import { texts } from '@/utility/textUtil'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+import { usePathname } from 'next/navigation'
+import InternalLink from './InternalLink'
function DocsPrevNextNav() {
- const pathname = usePathname();
- const currentPage = pathname.split("/").at(-1);
+ const pathname = usePathname()
+ const currentPage = pathname.split('/').at(-1)
- if (!currentPage) return null;
- const allDocsPages = getDocsFlatToc();
+ if (!currentPage) return null
+ const allDocsPages = getDocsFlatToc()
const currentPageIndex = allDocsPages.findIndex(
(page) => page.slug === currentPage,
- );
+ )
const prevPageIdx =
- currentPageIndex - 1 >= 0 ? currentPageIndex - 1 : undefined;
+ currentPageIndex - 1 >= 0 ? currentPageIndex - 1 : undefined
const nextPageIdx =
currentPageIndex + 1 < allDocsPages.length
? currentPageIndex + 1
- : undefined;
- const prevPage = typeof prevPageIdx === "number" && allDocsPages[prevPageIdx];
- const nextPage = typeof nextPageIdx === "number" && allDocsPages[nextPageIdx];
+ : undefined
+ const prevPage = typeof prevPageIdx === 'number' && allDocsPages[prevPageIdx]
+ const nextPage = typeof nextPageIdx === 'number' && allDocsPages[nextPageIdx]
return (
-
- {`Protest by ${event.organizers.slice(0, 3).join(", ")}${
+ {`Protest by ${event.organizers.slice(0, 3).join(', ')}${
event.organizers.length > 3
? `and ${event.organizers.length - 3} more`
- : ""
+ : ''
}: "${event.description.slice(0, 300)}${
- event.description.length > 300 ? "..." : ""
+ event.description.length > 300 ? '...' : ''
}"`}
- );
+ )
}
export function AggregatedEventsBubble({
@@ -65,9 +65,7 @@ export function AggregatedEventsBubble({
events,
sumSize,
}: AggregatedItemType) {
- const { setDateRange } = useFiltersStore(({ setDateRange }) => ({
- setDateRange,
- }));
+ const setDateRange = useFiltersStore(({ setDateRange }) => setDateRange)
return (
- );
+ )
},
-);
+)
function MediaSentimentChartWithData({
reset,
sentiment_target,
event_id,
}: {
- reset?: () => void;
- sentiment_target: TrendQueryProps["sentiment_target"];
- event_id?: string;
+ reset?: () => void
+ sentiment_target: TrendQueryProps['sentiment_target']
+ event_id?: string
}) {
const {
data: originalData,
@@ -144,55 +150,57 @@ function MediaSentimentChartWithData({
isPending,
isSuccess,
} = useMediaTrends({
- trend_type: "sentiment",
+ trend_type: 'sentiment',
sentiment_target,
enabled: !event_id,
- });
+ })
const data = originalData || {
applicability: false,
limitations: [],
trends: [],
- };
- if (isPending) return
{/*
- );
+ )
}
-export default ComponentError;
+export default ComponentError
diff --git a/frontend-nextjs/src/components/DataSourceSelect.tsx b/frontend-nextjs/src/components/DataSourceSelect.tsx
index 8aa87e6f..0fced52d 100644
--- a/frontend-nextjs/src/components/DataSourceSelect.tsx
+++ b/frontend-nextjs/src/components/DataSourceSelect.tsx
@@ -1,20 +1,20 @@
-import { Button } from "@/components/ui/button";
-import { Command, CommandItem, CommandList } from "@/components/ui/command";
+import { Button } from '@/components/ui/button'
+import { Command, CommandItem, CommandList } from '@/components/ui/command'
import {
Popover,
PopoverContent,
PopoverTrigger,
-} from "@/components/ui/popover";
+} from '@/components/ui/popover'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useFiltersStore } from "@/providers/FiltersStoreProvider";
-import type { MediaSourceType } from "@/stores/filtersStore";
-import { cn } from "@/utility/classNames";
-import { texts } from "@/utility/textUtil";
+} from '@/components/ui/tooltip'
+import { useFiltersStore } from '@/providers/FiltersStoreProvider'
+import type { MediaSourceType } from '@/stores/filtersStore'
+import { cn } from '@/utility/classNames'
+import { texts } from '@/utility/textUtil'
import {
ChevronsUpDownIcon,
GlobeIcon,
@@ -23,57 +23,53 @@ import {
type LucideIcon,
NewspaperIcon,
SearchIcon,
-} from "lucide-react";
-import { useMemo, useState } from "react";
+} from 'lucide-react'
+import { useMemo, useState } from 'react'
type OptionType = {
- name: string;
- value: MediaSourceType;
- Icon: LucideIcon;
- description: string;
+ name: string
+ value: MediaSourceType
+ Icon: LucideIcon
+ description: string
links: {
- label: string;
- href: string;
- }[];
-};
+ label: string
+ href: string
+ }[]
+}
const options: OptionType[] = [
{
name: texts.filters.mediaSource.values.onlineNews.name,
- value: "news_online",
+ value: 'news_online',
Icon: GlobeIcon,
description: texts.filters.mediaSource.values.onlineNews.description,
links: texts.filters.mediaSource.values.onlineNews.links,
},
{
name: texts.filters.mediaSource.values.printNews.name,
- value: "news_print",
+ value: 'news_print',
Icon: NewspaperIcon,
description: texts.filters.mediaSource.values.printNews.description,
links: texts.filters.mediaSource.values.printNews.links,
},
{
name: texts.filters.mediaSource.values.googleTrends.name,
- value: "web_google",
+ value: 'web_google',
Icon: SearchIcon,
description: texts.filters.mediaSource.values.googleTrends.description,
links: texts.filters.mediaSource.values.googleTrends.links,
},
-];
-const optionsMap = new Map(options.map((o) => [o.value, o]));
+]
+const optionsMap = new Map(options.map((o) => [o.value, o]))
export default function MediaSourceSelect() {
- const { mediaSource, setMediaSource } = useFiltersStore(
- ({ mediaSource, setMediaSource }) => ({
- mediaSource,
- setMediaSource,
- }),
- );
- const [isOpened, setIsOpened] = useState(false);
+ const mediaSource = useFiltersStore(({ mediaSource }) => mediaSource)
+ const setMediaSource = useFiltersStore(({ setMediaSource }) => setMediaSource)
+ const [isOpened, setIsOpened] = useState(false)
const selectedValue = useMemo(
() => (mediaSource && optionsMap.get(mediaSource)) || undefined,
[mediaSource],
- );
+ )
return (
+
@@ -86,5 +86,5 @@ export function BaseLayout({
{modal}
- );
+ )
}
diff --git a/frontend-nextjs/src/components/ComponentError/index.tsx b/frontend-nextjs/src/components/ComponentError/index.tsx
index 896c0f01..7421ea0a 100644
--- a/frontend-nextjs/src/components/ComponentError/index.tsx
+++ b/frontend-nextjs/src/components/ComponentError/index.tsx
@@ -1,31 +1,29 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { useFiltersStore } from "@/providers/FiltersStoreProvider";
-import { cn } from "@/utility/classNames";
-import { texts } from "@/utility/textUtil";
-import { X } from "lucide-react";
+'use client'
+import { Button } from '@/components/ui/button'
+import { useFiltersStore } from '@/providers/FiltersStoreProvider'
+import { cn } from '@/utility/classNames'
+import { texts } from '@/utility/textUtil'
+import { X } from 'lucide-react'
export type ComponentErrorProps = {
- errorMessage: string;
- errorDetails?: string;
- reset?: () => void;
-};
+ errorMessage: string
+ errorDetails?: string
+ reset?: () => void
+}
function ComponentError({
errorDetails,
errorMessage = texts.errors.apiErrorTranslations.defaultMessage(),
reset,
}: ComponentErrorProps) {
- const { from, to, resetAllFilters } = useFiltersStore(
- ({ from, to, resetAllFilters }) => ({
- from,
- to,
- resetAllFilters,
- }),
- );
+ const from = useFiltersStore(({ from }) => from)
+ const to = useFiltersStore(({ to }) => to)
+ const resetAllFilters = useFiltersStore(
+ ({ resetAllFilters }) => resetAllFilters,
+ )
return (
{children}
-
+
{' '}
@@ -37,9 +35,9 @@ function ComponentError({
{errorDetails && (
{" "}
+
{errorDetails}
@@ -56,10 +54,10 @@ function ComponentError({
{texts.errors.buttons.resetFilters}
)}
-
+
- );
+ )
}
function DocsPrevNextLink({
page,
isPrev = false,
}: {
- isPrev?: boolean;
+ isPrev?: boolean
page: {
- slug: string;
- title: string;
- };
+ slug: string
+ title: string
+ }
}) {
return (
{isPrev && (
{prevPage ?
+
{texts.singleProtestPage.charts.sentimentTowards({
@@ -34,9 +34,9 @@ function TrendHeadline({
- );
+ )
}
function EventPageContent({ id }: { id: string }) {
@@ -75,10 +75,7 @@ function EventPageContent({ id }: { id: string }) {
{isPrev ? texts.docsPage.prevPage : texts.docsPage.nextPage}
@@ -68,7 +68,7 @@ function DocsPrevNextLink({
;
-type BtnTouchEvent = ReactTouchEvent;
-type BtnEvent = BtnMouseEvent | BtnTouchEvent;
+import { useFiltersStore } from '@/providers/FiltersStoreProvider'
+import { useToday } from '@/providers/TodayProvider'
+import '@/styles/draggable-time-filter-range.css'
+import { cn } from '@/utility/classNames'
+import { dateToComparableDateItem } from '@/utility/comparableDateItemSchema'
+import { format } from '@/utility/dateUtil'
+import { useAllEvents } from '@/utility/useEvents'
+import { isInSameAggregationUnit } from '@/utility/useTimeIntervals'
+import useDebounce from '@custom-react-hooks/use-debounce'
+import useElementSize from '@custom-react-hooks/use-element-size'
+import { addDays, compareAsc, differenceInDays } from 'date-fns'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import RangeSlider from 'react-range-slider-input'
+import useTimelineEvents from './EventsTimeline/useTimelineEvents'
function DraggableTimeFilterRange() {
- const rangerRef = useRef(null);
- const midSegmentRef = useRef(null);
- const { from, to, setDateRange } = useFiltersStore((state) => ({
- from: dateToComparableDateItem(state.from),
- to: dateToComparableDateItem(state.to),
- setDateRange: state.setDateRange,
- }));
- const { today, datasetStartDate, datasetEndDate } = useToday();
- const amountOfDays = differenceInDays(datasetEndDate, datasetStartDate) + 1;
+ const { isLoading } = useAllEvents()
+ const from = useFiltersStore(({ from }) => dateToComparableDateItem(from))
+ const to = useFiltersStore(({ to }) => dateToComparableDateItem(to))
+ const setDateRange = useFiltersStore(({ setDateRange }) => setDateRange)
+ const { today, datasetStartDate, datasetEndDate } = useToday()
+ const amountOfDays = differenceInDays(datasetEndDate, datasetStartDate) + 1
const intervals = new Array(Math.abs(amountOfDays))
.fill(null)
.map((_, i) =>
dateToComparableDateItem(addDays(datasetStartDate, i), today),
- );
+ )
- const rangerSteps = intervals.map((_, i) => i);
- const rangerTicks = intervals.map((d) => d.time);
const indexOfFrom = useMemo(
- () =>
- intervals.findIndex((d) =>
- isInSameAggregationUnit("day", d, from),
- ),
+ () => intervals.findIndex((d) => isInSameAggregationUnit('day', d, from)),
[from, intervals],
- );
+ )
const indexOfTo = useMemo(
- () =>
- intervals.findIndex((d) =>
- isInSameAggregationUnit("day", d, to),
- ),
+ () => intervals.findIndex((d) => isInSameAggregationUnit('day', d, to)),
[to, intervals],
- );
- const [values, setValues] = useState>([
- indexOfFrom,
- indexOfTo,
- ]);
- const [tempValues, setTempValues] = useState<
- ReadonlyArray | undefined
- >([indexOfFrom, indexOfTo]);
- const [isDragging, setIsDragging] = useState(false);
- const [setDebouncedIsDragging] = useDebounce(setIsDragging, 500, {
- leading: false,
- trailing: true,
- });
- // biome-ignore lint/correctness/useExhaustiveDependencies:
- const startDragging = useCallback(() => {
- setIsDragging(true);
- setDebouncedIsDragging(false);
- }, []);
+ )
+ const initialValues = [indexOfFrom, indexOfTo] as [number, number]
+ const [values, setValues] = useState<[number, number]>(initialValues)
+ const [isDragging, setIsDragging] = useState(false)
+
+ const leftDate = useMemo(() => {
+ const d = intervals[values[0]].date
+ if (!d) return undefined
+ return format(d, 'dd. MMM. yyyy')
+ }, [intervals, values])
+ const rightDate = useMemo(() => {
+ const d = intervals[values[1]].date
+ if (!d) return undefined
+ return format(d, 'dd. MMM. yyyy')
+ }, [intervals, values])
useEffect(() => {
- setValues([indexOfFrom, indexOfTo]);
- setTempValues([indexOfFrom, indexOfTo]);
- }, [indexOfFrom, indexOfTo]);
-
- // biome-ignore lint/correctness/useExhaustiveDependencies:
- const onValuesChange = useCallback((vals: [number, number]) => {
- const [from, to] = [
- intervals[vals[0]] ?? intervals[0],
- intervals[vals[1]] ?? intervals[intervals.length - 1],
- ]
- .map((d) => new Date(d.time))
- .sort(compareAsc);
-
- setTempValues(vals);
- setDateRange({ from, to });
- }, []);
+ setValues([indexOfFrom, indexOfTo])
+ }, [indexOfFrom, indexOfTo])
const onChange = useCallback(
- (instance: Ranger) => {
- const [fromIdx, toIdx] = instance.sortedValues;
- onValuesChange([
- Math.max(0, fromIdx),
- Math.min(intervals.length - 1, toIdx),
- ]);
- },
- [onValuesChange, intervals],
- );
-
- // biome-ignore lint/correctness/useExhaustiveDependencies:
- const onDrag = useCallback((instance: Ranger) => {
- const [fromIdx, toIdx] = instance.sortedValues;
- setTempValues([fromIdx, toIdx]);
- startDragging();
- }, []);
-
- const rangerInstance = useRanger({
- getRangerElement: () => rangerRef.current,
- values: tempValues || values,
- min: 0,
- max: intervals.length - 1,
- stepSize: 1,
- steps: rangerSteps,
- ticks: rangerTicks,
- onChange,
- onDrag,
- });
-
- const handleSegmentDrag = useCallback(
- (
- e: MouseEvent | TouchEvent,
- initialX: number,
- values: ReadonlyArray,
- ) => {
- let clientX = e instanceof MouseEvent ? e.clientX : 0;
- if (window.TouchEvent && e instanceof window.TouchEvent) {
- clientX = e.changedTouches[0].clientX;
- }
- const initial = rangerInstance.getValueForClientX(initialX);
- const newValue = rangerInstance.getValueForClientX(clientX);
- const diff = newValue - initial;
- if (diff) {
- let actualDiff = 0;
- if (diff > 0) {
- const last = values[values.length - 1];
- const newRoundedLastValue = rangerInstance.roundToStep(last + diff);
-
- actualDiff = newRoundedLastValue - last;
- } else {
- const first = values[0];
- const newRoundedFirstValue = rangerInstance.roundToStep(first + diff);
- actualDiff = newRoundedFirstValue - first;
- }
-
- if (actualDiff) {
- return values.map((v) => v + actualDiff).sort();
- }
- }
- return values;
- },
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [rangerInstance.getValueForClientX, rangerInstance.roundToStep],
- );
-
- const handleSegmentPress = useCallback(
- (e: BtnEvent) => {
- const clientX =
- e.type === "touchmove"
- ? (e as BtnTouchEvent).changedTouches[0].clientX
- : (e as BtnMouseEvent).clientX;
- let tempVals = values;
- const onDrag = (e: MouseEvent | TouchEvent) => {
- tempVals = handleSegmentDrag(e, clientX, values);
- setTempValues(tempVals);
- startDragging();
- };
- const handleRelease = (e: MouseEvent | TouchEvent) => {
- const [fromIdx, toIdx] = [...(tempVals || values)].sort();
- onValuesChange([fromIdx, toIdx]);
- onDrag(e);
- document.removeEventListener("mousemove", onDrag);
- document.removeEventListener("touchmove", onDrag);
- document.removeEventListener("mouseup", handleRelease);
- document.removeEventListener("touchend", handleRelease);
- setIsDragging(false);
- };
-
- document.addEventListener("mousemove", onDrag);
- document.addEventListener("touchmove", onDrag);
- document.addEventListener("mouseup", handleRelease);
- document.addEventListener("touchend", handleRelease);
+ ([fromIdx, toIdx]: [number, number]) => {
+ setIsDragging(false)
+ const [from, to] = [
+ intervals[fromIdx] ?? intervals[0],
+ intervals[toIdx] ?? intervals[intervals.length - 1],
+ ]
+ .map((d) => d.date)
+ .sort(compareAsc)
+
+ setDateRange({ from, to })
},
- [handleSegmentDrag, onValuesChange, values, startDragging],
- );
+ [intervals, setDateRange],
+ )
+ const [debouncedOnChange] = useDebounce(onChange, 500)
- const handles = rangerInstance.handles()
- const steps = rangerInstance.getSteps();
return (
- ;
- isDragging?: boolean;
- isStart?: boolean;
- }) => {
- const { date } = comparableDateObject;
- const formattedDate = useMemo(() => format(date, "dd. MMM. yyyy"), [date]);
-
- const handleKeyDown = useCallback(
- (e: ReactKeyboardEvent) => {
- if (e.key === "Tab") return;
- e.preventDefault();
- onKeyDownHandler(e);
- },
- [onKeyDownHandler],
- );
-
- const handleMouseDown = useCallback(
- (e: ReactMouseEvent) => {
- e.preventDefault();
- onMouseDownHandler(e);
- },
- [onMouseDownHandler],
- );
-
- const handleTouchStart = useCallback(
- (e: ReactTouchEvent) => {
- e.preventDefault();
- onTouchStart(e);
- },
- [onTouchStart],
- );
-
- const left = useMemo(
- () => `${rangerInstance.getPercentageForValue(value)}%`,
- [rangerInstance, value],
- );
- if (!comparableDateObject) return null;
- return (
-
- );
- },
-);
+
+
+ )
+}
const HandleTooptip = memo(
({
formattedDate,
isStart,
isDragging,
- }: { formattedDate: string; isStart: boolean; isDragging: boolean }) => (
+ }: {
+ formattedDate?: string
+ isStart: boolean
+ isDragging: boolean
+ }) => (
-
- {formattedDate.split(" ").map((part, i) => (
- {part}
- ))}
-
+ {formattedDate
+ ?.split(' ')
+ .map((part, i) => {part})}
),
-);
+)
const BackgroundVis = memo(() => {
- const [parentRef, size] = useElementSize();
- const { datasetStartDate, datasetEndDate } = useToday();
- const { data } = useEvents({
- from: datasetStartDate,
- to: datasetEndDate,
- });
+ const [parentRef, size] = useElementSize()
+ const { datasetStartDate, datasetEndDate } = useToday()
const { eventColumns, columnsCount, sizeScale } = useTimelineEvents({
size,
- data,
- aggregationUnit: "week",
+ aggregationUnit: 'week',
config: {
eventMinHeight: 2,
eventMaxHeight: Math.floor(size.height * 0.9),
@@ -390,7 +157,7 @@ const BackgroundVis = memo(() => {
},
from: datasetStartDate,
to: datasetEndDate,
- });
+ })
return (
{
))}
- );
-});
+ )
+})
-export default DraggableTimeFilterRange;
+export default DraggableTimeFilterRange
diff --git a/frontend-nextjs/src/components/EventPageContent.tsx b/frontend-nextjs/src/components/EventPageContent.tsx
index 8f8c7eff..db3bce03 100644
--- a/frontend-nextjs/src/components/EventPageContent.tsx
+++ b/frontend-nextjs/src/components/EventPageContent.tsx
@@ -1,26 +1,26 @@
-import EventPageHeader from "@/components/EventPageHeader";
-import FullTextsSentimentChart from "@/components/FullTextsSentimentChart";
-import SectionHeadlineWithExplanation from "@/components/SectionHeadlineWithExplanation";
-import { texts, titleCase } from "@/utility/textUtil";
-import { getTopicIcon } from "@/utility/topicsUtil";
-import EventMediaTable from "./EventMediaTable";
-import HeadlineWithLine from "./HeadlineWithLine";
+import EventPageHeader from '@/components/EventPageHeader'
+import FullTextsSentimentChart from '@/components/FullTextsSentimentChart'
+import SectionHeadlineWithExplanation from '@/components/SectionHeadlineWithExplanation'
+import { texts, titleCase } from '@/utility/textUtil'
+import { getTopicIcon } from '@/utility/topicsUtil'
+import EventMediaTable from './EventMediaTable'
+import HeadlineWithLine from './HeadlineWithLine'
import {
ImpactKeywordLabel,
ImpactKeywordLabelTooltip,
topicsMap,
-} from "./ImpactChart/ImpactKeywordLabel";
-import TopicsLegend from "./TopicsLegend";
+} from './ImpactChart/ImpactKeywordLabel'
+import TopicsLegend from './TopicsLegend'
function TrendHeadline({
topic,
label,
}: {
- topic: "climate-activism" | "climate-policy";
- label: string;
+ topic: 'climate-activism' | 'climate-policy'
+ label: string
}) {
- const Icon = getTopicIcon(topic);
- const color = `var(--keyword-${topic})`;
+ const Icon = getTopicIcon(topic)
+ const color = `var(--keyword-${topic})`
return (
-
- );
-}
-
-const Handle = memo(
- ({
- value,
- comparableDateObject,
- onKeyDownHandler,
- onMouseDownHandler,
- onTouchStart,
- isActive,
- rangerInstance,
- isDragging = false,
- isStart = true,
- }: {
- value: number;
- comparableDateObject: ComparableDateItemType;
- onKeyDownHandler: (e: ReactKeyboardEvent) => void;
- onMouseDownHandler: (e: ReactMouseEvent) => void;
- onTouchStart: (e: ReactTouchEvent) => void;
- isActive: boolean;
- rangerInstance: Ranger
- {steps.slice(0, 3).map(({ left, width }, i) => (
-
-
@@ -78,7 +85,7 @@ const OrganisationPageWithPopulatedData = memo(
{texts.organisationsPage.propertyNames.totalEvents}
{stats ? (
- Math.round(stats.totalEvents).toLocaleString(texts.language)
+ formatNumber(stats.totalEvents)
) : (
{texts.organisationsPage.propertyNames.totalParticipants}
{stats ? (
- Math.round(stats.totalParticipants).toLocaleString(
- texts.language,
- )
+ formatNumber(stats.totalParticipants)
) : (
{texts.organisationsPage.propertyNames.avgParticipants}
{stats ? (
- Math.round(stats.avgParticipantsPerEvent).toLocaleString(
- texts.language,
- )
+ formatNumber(stats.avgParticipantsPerEvent)
) : (
- {texts.organisationsPage.propertyNames.avgPartners}
-
- {stats ? (
- Math.round(stats.avgPartnerOrgsPerEvent).toLocaleString(
- texts.language,
- )
- ) : (
-
{texts.organisationsPage.propertyNames.totalPartners}
{stats ? (
- Math.round(stats.totalPartners).toLocaleString(texts.language)
+
+
+
) : (
@@ -68,7 +77,7 @@ function OrgsLegend({ ))}
- {org.name.split(":")[0]}
+ {org.name}
- );
+ )
}
return (
@@ -73,7 +78,7 @@ function OrgsLegendItem({
- );
+ )
}
-export default memo(OrgsLegendItem);
+export default memo(OrgsLegendItem)
diff --git a/frontend-nextjs/src/components/TimeFilter.tsx b/frontend-nextjs/src/components/TimeFilter.tsx
index 137af717..c9bfd5f9 100644
--- a/frontend-nextjs/src/components/TimeFilter.tsx
+++ b/frontend-nextjs/src/components/TimeFilter.tsx
@@ -1,19 +1,14 @@
-"use client";
-import { useFiltersStore } from "@/providers/FiltersStoreProvider";
-import { DatePickerWithRange } from "./ui/date-range-picker";
+'use client'
+import { useFiltersStore } from '@/providers/FiltersStoreProvider'
+import { DatePickerWithRange } from './ui/date-range-picker'
function TimeFilter() {
- const { from, to, defaultFrom, defaultTo, setDateRange, resetDateRange } =
- useFiltersStore(
- ({ from, to, defaultFrom, defaultTo, setDateRange, resetDateRange }) => ({
- from,
- to,
- defaultFrom,
- defaultTo,
- setDateRange,
- resetDateRange,
- }),
- );
+ const from = useFiltersStore(({ from }) => from)
+ const to = useFiltersStore(({ to }) => to)
+ const defaultFrom = useFiltersStore(({ defaultFrom }) => defaultFrom)
+ const defaultTo = useFiltersStore(({ defaultTo }) => defaultTo)
+ const setDateRange = useFiltersStore(({ setDateRange }) => setDateRange)
+ const resetDateRange = useFiltersStore(({ resetDateRange }) => resetDateRange)
return (
& {
- children: ReactNode;
- impactHeadline?: string;
- impactDescription?: string;
- sources?: DataCreditLegendSource[];
- impactHelpSlug?: string;
-}) {
- const [showComputedImpact, setShowComputedImpact] = useState(false);
- const [parentRef, size] = useElementSize();
+}: TrendWithImpactChartWrapperProps) {
+ const [showComputedImpact, setShowComputedImpact] = useState(false)
+ const [parentRef, size] = useElementSize()
const { topics, applicability } = useTopics({
containerWidth: size.width,
trend_type,
sentiment_target,
- });
+ })
return (
+ {org.name.split(':')[0]}
{org.count && (
@@ -33,8 +38,8 @@ function OrgsLegendItem({
)}
- );
- }, [org.slug, searchParams]);
+ )
+ }, [org.slug, searchParams])
if (org.isMain) {
return (
@@ -44,8 +49,8 @@ function OrgsLegendItem({
+
+
+
+
+
+ )
+}
function TrendWithImpactChartWrapper({
children,
@@ -24,20 +52,14 @@ function TrendWithImpactChartWrapper({
impactDescription,
sources,
impactHelpSlug,
-}: React.ComponentProps
@@ -55,41 +77,38 @@ function TrendWithImpactChartWrapper({
}
${topics
.map(({ topic }) => {
- const slug = slugifyCssClass(topic);
+ const slug = slugifyCssClass(topic)
return `
html .topic-chart-wrapper:has(.legend-topic-${slug}:hover)
.topic-chart-item-topic-${slug} {
opacity: 1 !important;
filter: grayscale(0%) !important;
}
- `;
+ `
})
- .join("")}
+ .join('')}
`}
{children}
{applicability && (
- setShowComputedImpact((prev) => !prev)}
+ >
+ {showComputedImpact
+ ? texts.charts.impact.buttons.hideComputedImpacts
+ : texts.charts.impact.buttons.computeImpacts}
+
)}
{showComputedImpact && applicability && (
+ {props.children}
+
+ {texts.charts.impact.buttons.computeImpacts}
+
+
+ )
+}
diff --git a/frontend-nextjs/src/components/ui/calendar.tsx b/frontend-nextjs/src/components/ui/calendar.tsx
index 873af070..20145788 100644
--- a/frontend-nextjs/src/components/ui/calendar.tsx
+++ b/frontend-nextjs/src/components/ui/calendar.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client'
-import type * as React from "react";
-import { DayPicker } from "react-day-picker";
+import type * as React from 'react'
+import { DayPicker } from 'react-day-picker'
-import { buttonVariants } from "@/components/ui/button";
-import { useToday } from "@/providers/TodayProvider";
-import { cn } from "@/utility/classNames";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { buttonVariants } from '@/components/ui/button'
+import { useToday } from '@/providers/TodayProvider'
+import { cn } from '@/utility/classNames'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
-export type CalendarProps = React.ComponentProps;
+export type CalendarProps = React.ComponentProps
function Calendar({
className,
@@ -16,7 +16,7 @@ function Calendar({
showOutsideDays = true,
...props
}: CalendarProps) {
- const { today } = useToday();
+ const { today } = useToday()
return (
@@ -51,14 +51,14 @@ export function Combobox({
role="combobox"
aria-expanded={open}
className={cn(
- "w-fit justify-between rounded-none h-[38px]",
- "hover:bg-grayLight hover:text-fg border-grayLight",
+ 'w-fit justify-between rounded-none h-[38px]',
+ 'hover:bg-grayLight hover:text-fg border-grayLight',
className,
)}
>
{value
? options.find((option) => option.value === value)?.label
- : "Select value..."}
+ : 'Select value...'}
@@ -84,17 +84,17 @@ export function Combobox({
{
- const newValue = currentValue === value ? "" : currentValue;
- setValue(newValue);
- onChange(newValue);
- setOpen(false);
+ onSelect={(currentValue: OptionType['value']) => {
+ const newValue = currentValue === value ? '' : currentValue
+ setValue(newValue)
+ onChange(newValue)
+ setOpen(false)
}}
>
- );
+ )
}
diff --git a/frontend-nextjs/src/components/ui/date-range-picker.tsx b/frontend-nextjs/src/components/ui/date-range-picker.tsx
index 265bdcfa..610982b6 100644
--- a/frontend-nextjs/src/components/ui/date-range-picker.tsx
+++ b/frontend-nextjs/src/components/ui/date-range-picker.tsx
@@ -1,20 +1,20 @@
-"use client";
+'use client'
-import { endOfDay, isSameDay, startOfDay, subDays, subMonths } from "date-fns";
-import type { DateRange } from "react-day-picker";
+import { endOfDay, isSameDay, startOfDay, subDays, subMonths } from 'date-fns'
+import type { DateRange } from 'react-day-picker'
-import { Button } from "@/components/ui/button";
-import { Calendar, type CalendarProps } from "@/components/ui/calendar";
+import { Button } from '@/components/ui/button'
+import { Calendar, type CalendarProps } from '@/components/ui/calendar'
import {
Popover,
PopoverContent,
PopoverTrigger,
-} from "@/components/ui/popover";
-import { useToday } from "@/providers/TodayProvider";
-import { cn } from "@/utility/classNames";
-import { format } from "@/utility/dateUtil";
-import { texts } from "@/utility/textUtil";
-import { CalendarDays } from "lucide-react";
+} from '@/components/ui/popover'
+import { useToday } from '@/providers/TodayProvider'
+import { cn } from '@/utility/classNames'
+import { format } from '@/utility/dateUtil'
+import { texts } from '@/utility/textUtil'
+import { CalendarDays } from 'lucide-react'
import {
type ReactNode,
memo,
@@ -23,7 +23,7 @@ import {
useMemo,
useRef,
useState,
-} from "react";
+} from 'react'
export const DatePickerWithRange = memo(
({
@@ -33,75 +33,75 @@ export const DatePickerWithRange = memo(
onChange = () => {},
onReset,
}: CalendarProps & {
- className?: string;
- defaultDateRange: { from: Date; to: Date };
- dateRange: { from: Date; to: Date };
- onChange?: (date: { from: Date; to: Date }) => void;
- onReset?: () => void;
+ className?: string
+ defaultDateRange: { from: Date; to: Date }
+ dateRange: { from: Date; to: Date }
+ onChange?: (date: { from: Date; to: Date }) => void
+ onReset?: () => void
}) => {
- const [isOpen, setIsOpen] = useState(false);
- const lastRange = useRef();
- const [date, setDate] = useState(dateRange);
- const [month, setMonth] = useState();
- const { today } = useToday();
- const fromDateString = format(date?.from || today, "yyyy-MM-dd");
- const toDateString = format(date?.to || today, "yyyy-MM-dd");
+ const [isOpen, setIsOpen] = useState(false)
+ const lastRange = useRef()
+ const [date, setDate] = useState(dateRange)
+ const [month, setMonth] = useState()
+ const { today } = useToday()
+ const fromDateString = format(date?.from || today, 'yyyy-MM-dd')
+ const toDateString = format(date?.to || today, 'yyyy-MM-dd')
const isDefault = useMemo(() => {
- if (!defaultDateRange.from || !defaultDateRange.to) return false;
- if (!date?.from || !date?.to) return false;
+ if (!defaultDateRange.from || !defaultDateRange.to) return false
+ if (!date?.from || !date?.to) return false
return (
isSameDay(defaultDateRange.from, date.from) &&
isSameDay(defaultDateRange.to, date.to)
- );
- }, [defaultDateRange.from, defaultDateRange.to, date?.from, date?.to]);
+ )
+ }, [defaultDateRange.from, defaultDateRange.to, date?.from, date?.to])
useEffect(() => {
- if (!dateRange.from || !dateRange.to) return;
- setDate(dateRange);
- }, [dateRange]);
+ if (!dateRange.from || !dateRange.to) return
+ setDate(dateRange)
+ }, [dateRange])
// biome-ignore lint/correctness/useExhaustiveDependencies:
useEffect(() => {
- if (!date?.from || !date?.to || isOpen) return;
- if (!lastRange.current?.from || !lastRange.current?.to) return;
- const currFrom = format(lastRange.current.from, "yyyy-MM-dd");
- const currTo = format(lastRange.current.to, "yyyy-MM-dd");
- const unchangedFrom = fromDateString === currFrom;
- const unchangedTo = toDateString === currTo;
- if (unchangedFrom && unchangedTo) return;
- onChange({ from: date.from, to: date.to });
- lastRange.current = date;
- }, [isOpen, fromDateString, toDateString]);
+ if (!date?.from || !date?.to || isOpen) return
+ if (!lastRange.current?.from || !lastRange.current?.to) return
+ const currFrom = format(lastRange.current.from, 'yyyy-MM-dd')
+ const currTo = format(lastRange.current.to, 'yyyy-MM-dd')
+ const unchangedFrom = fromDateString === currFrom
+ const unchangedTo = toDateString === currTo
+ if (unchangedFrom && unchangedTo) return
+ onChange({ from: date.from, to: date.to })
+ lastRange.current = date
+ }, [isOpen, fromDateString, toDateString])
const onRangeChange = useCallback(
(newRange?: DateRange) => {
- setIsOpen(false);
- const { from, to } = newRange || {};
- if (!from || !to) return;
- onChange({ from, to });
+ setIsOpen(false)
+ const { from, to } = newRange || {}
+ if (!from || !to) return
+ onChange({ from, to })
},
[onChange],
- );
+ )
return (
{
- setIsOpen(newOpen);
+ setIsOpen(newOpen)
if (isOpen && !newOpen) {
- setDate(lastRange.current || dateRange);
+ setDate(lastRange.current || dateRange)
}
}}
>
{isOpen && (
- );
+ )
},
-);
+)
const LastSixMonthButton = memo(
({
onChange,
currentRange,
}: {
- onChange: (range: DateRange) => void;
- currentRange?: DateRange;
+ onChange: (range: DateRange) => void
+ currentRange?: DateRange
}) => {
- const { today } = useToday();
+ const { today } = useToday()
return (
- );
+ )
},
-);
+)
const LastTwelveMonthButton = memo(
({
onChange,
currentRange,
}: {
- onChange: (range: DateRange) => void;
- currentRange?: DateRange;
+ onChange: (range: DateRange) => void
+ currentRange?: DateRange
}) => {
- const { today } = useToday();
+ const { today } = useToday()
return (
- );
+ )
},
-);
+)
const LastMonthButton = memo(
({
onChange,
currentRange,
}: {
- onChange: (range: DateRange) => void;
- currentRange?: DateRange;
+ onChange: (range: DateRange) => void
+ currentRange?: DateRange
}) => {
- const { today } = useToday();
+ const { today } = useToday()
return (
- );
+ )
},
-);
+)
const PresetButton = memo(
({
@@ -286,23 +290,23 @@ const PresetButton = memo(
targetRange,
children,
}: {
- onChange: (range: DateRange) => void;
- currentRange?: DateRange;
- targetRange: { from: Date; to: Date };
- children: ReactNode;
+ onChange: (range: DateRange) => void
+ currentRange?: DateRange
+ targetRange: { from: Date; to: Date }
+ children: ReactNode
}) => {
const isActive =
currentRange?.from &&
currentRange?.to &&
isSameDay(currentRange.from, targetRange.from) &&
- isSameDay(currentRange.to, targetRange.to);
+ isSameDay(currentRange.to, targetRange.to)
return (
- );
+ )
},
-);
+)
diff --git a/frontend-nextjs/src/components/ui/dialog.tsx b/frontend-nextjs/src/components/ui/dialog.tsx
index 17092b81..e53eabce 100644
--- a/frontend-nextjs/src/components/ui/dialog.tsx
+++ b/frontend-nextjs/src/components/ui/dialog.tsx
@@ -1,18 +1,18 @@
-"use client";
+'use client'
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as React from "react";
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as React from 'react'
-import { cn } from "@/utility/classNames";
-import { X } from "lucide-react";
+import { cn } from '@/utility/classNames'
+import { X } from 'lucide-react'
-const Dialog = DialogPrimitive.Root;
+const Dialog = DialogPrimitive.Root
-const DialogTrigger = DialogPrimitive.Trigger;
+const DialogTrigger = DialogPrimitive.Trigger
-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = DialogPrimitive.Portal
-const DialogClose = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close
const DialogOverlay = React.forwardRef<
React.ElementRef,
@@ -21,24 +21,24 @@ const DialogOverlay = React.forwardRef<
,
React.ComponentPropsWithoutRef & {
- childrenContainerClassName?: string;
- animate?: boolean;
+ childrenContainerClassName?: string
+ animate?: boolean
}
>(
(
@@ -56,21 +56,21 @@ const DialogContent = React.forwardRef<
-
-
-
-
-
+
@@ -97,7 +116,7 @@ function TrendWithImpactChartWrapper({
{impactHeadline}
- );
+ )
}
-export default TrendWithImpactChartWrapper;
+export default function TrendWithImpactChartWrapperInView(
+ props: TrendWithImpactChartWrapperProps,
+) {
+ return (
+ {impactDescription}
-
+
@@ -116,7 +135,29 @@ function TrendWithImpactChartWrapper({
sources={sources}
/>
@@ -132,22 +136,22 @@ export const DatePickerWithRange = memo(
{
- setMonth(range.from);
- setDate(range);
+ setMonth(range.from)
+ setDate(range)
}}
/>
{
- setMonth(range.from);
- setDate(range);
+ setMonth(range.from)
+ setDate(range)
}}
/>
{
- setMonth(range.from);
- setDate(range);
+ setMonth(range.from)
+ setDate(range)
}}
/>
@@ -167,8 +171,8 @@ export const DatePickerWithRange = memo(
@@ -86,10 +86,10 @@ const DialogContent = React.forwardRef<
) => (
-);
-DialogHeader.displayName = "DialogHeader";
+)
+DialogHeader.displayName = 'DialogHeader'
const DialogFooter = ({
className,
@@ -123,14 +123,14 @@ const DialogFooter = ({
}: React.HTMLAttributes) => (
-);
-DialogFooter.displayName = "DialogFooter";
+)
+DialogFooter.displayName = 'DialogFooter'
const DialogTitle = React.forwardRef<
React.ElementRef,
@@ -139,13 +139,13 @@ const DialogTitle = React.forwardRef<
,
@@ -153,11 +153,11 @@ const DialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
,
@@ -37,17 +37,17 @@ const DrawerOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
,
React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => {
- const { direction } = React.useContext(DrawerContext);
+ const { direction } = React.useContext(DrawerContext)
return (
- );
-});
-DrawerContent.displayName = "DrawerContent";
+ )
+})
+DrawerContent.displayName = 'DrawerContent'
const DrawerHeader = ({
className,
...props
}: React.HTMLAttributes) => (
-);
-DrawerHeader.displayName = "DrawerHeader";
+)
+DrawerHeader.displayName = 'DrawerHeader'
const DrawerFooter = ({
className,
...props
}: React.HTMLAttributes) => (
-);
-DrawerFooter.displayName = "DrawerFooter";
+)
+DrawerFooter.displayName = 'DrawerFooter'
const DrawerTitle = React.forwardRef<
React.ElementRef,
@@ -121,13 +121,13 @@ const DrawerTitle = React.forwardRef<
,
@@ -135,11 +135,11 @@ const DrawerDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
+
+ export default ReactRangeSliderInput
+}
diff --git a/frontend-nextjs/src/styles/draggable-time-filter-range.css b/frontend-nextjs/src/styles/draggable-time-filter-range.css
new file mode 100644
index 00000000..41ad2bf4
--- /dev/null
+++ b/frontend-nextjs/src/styles/draggable-time-filter-range.css
@@ -0,0 +1,82 @@
+.range-slider {
+ touch-action: none;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ display: block;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ background: var(--grayLight);
+ mix-blend-mode: multiply;
+}
+:root[data-theme='dark'] .range-slider {
+ mix-blend-mode: screen;
+}
+.range-slider[data-vertical] {
+ height: 100%;
+ width: 8px;
+}
+.range-slider[data-disabled] {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.range-slider .range-slider__thumb {
+ position: absolute;
+ z-index: 3;
+ top: 50%;
+ height: 100%;
+ transform: translate(-50%, -50%);
+ border-radius: 999px;
+ background: var(--grayDark);
+ width: 0.75rem;
+ transition: background 0.15s ease;
+}
+.range-slider .range-slider__thumb:hover {
+ background: var(--fg);
+}
+.range-slider .range-slider__thumb:focus-visible {
+ outline: 0;
+ box-shadow:
+ 0 0 0 4px var(--bg),
+ 0 0 0 6px var(--fg);
+}
+.range-slider[data-vertical] .range-slider__thumb {
+ left: 50%;
+}
+.range-slider .range-slider__thumb[data-disabled] {
+ z-index: 2;
+}
+.range-slider .range-slider__range {
+ position: absolute;
+ z-index: 1;
+ transform: translate(0, -50%);
+ top: 50%;
+ width: 100%;
+ height: 100%;
+ background: var(--bg);
+}
+.range-slider input[type='range'] {
+ -webkit-appearance: none;
+ pointer-events: none;
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ background-color: transparent;
+}
+.range-slider input[type='range']::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+}
+.range-slider input[type='range']::-moz-range-thumb {
+ width: 0;
+ height: 0;
+ border: 0;
+}
+.range-slider input[type='range']:focus {
+ outline: 0;
+}
diff --git a/frontend-nextjs/src/styles/global.css b/frontend-nextjs/src/styles/global.css
index 6c73173b..6310bdf4 100644
--- a/frontend-nextjs/src/styles/global.css
+++ b/frontend-nextjs/src/styles/global.css
@@ -25,11 +25,11 @@
:root,
:root[data-theme='light'] {
--pageMaxWidth: 1920px;
- --pageFullWidth: min(100vw,var(--pageMaxWidth));
- --pagePadding: clamp(1.5rem,2vmax,4rem);
- --headerHeight: 75px;
- --filtersHeight: 141px;
- --footerHeight: 251px;
+ --pageFullWidth: min(100vw, var(--pageMaxWidth));
+ --pagePadding: clamp(1.5rem, 2vmax, 4rem);
+ --headerHeight: 75px;
+ --filtersHeight: 141px;
+ --footerHeight: 251px;
--fg: var(--brandGreen);
--bg: var(--brandWhite);
@@ -40,33 +40,33 @@
--grayLight: #e1ecf2;
--grayUltraLight: #f1faff;
- --categorical-color-1: #F46A9B;
- --categorical-color-2: #7EB0D5;
- --categorical-color-3: #FFB55A;
- --categorical-color-4: #8BD3C7;
- --categorical-color-5: #FD7F6F;
- --categorical-color-6: #B2E061;
- --categorical-color-7: #BD7EBE;
- --categorical-color-8: #FFEE65;
- --categorical-color-9: #BEB9DB;
- --categorical-color-10: #FDCCE5;
- --categorical-color-11: #EF9B20;
- --categorical-color-12: #EA5545;
+ --categorical-color-1: #f46a9b;
+ --categorical-color-2: #7eb0d5;
+ --categorical-color-3: #ffb55a;
+ --categorical-color-4: #8bd3c7;
+ --categorical-color-5: #fd7f6f;
+ --categorical-color-6: #b2e061;
+ --categorical-color-7: #bd7ebe;
+ --categorical-color-8: #ffee65;
+ --categorical-color-9: #beb9db;
+ --categorical-color-10: #fdcce5;
+ --categorical-color-11: #ef9b20;
+ --categorical-color-12: #ea5545;
--categorical-color-13: #327483;
- --categorical-color-14: #7EA73F;
+ --categorical-color-14: #7ea73f;
- --keyword-climate-activism: #D53D4F;
- --keyword-climate-crisis-framing:#FDAE61;
- --keyword-climate-policy: #66C2A5;
- --keyword-climate-science: #3288BD;
+ --keyword-climate-activism: #d53d4f;
+ --keyword-climate-crisis-framing: #fdae61;
+ --keyword-climate-policy: #66c2a5;
+ --keyword-climate-science: #3288bd;
- --sentiment-positive: #229E74;
- --sentiment-negative: #D55E00;
- --sentiment-neutral: #E69F00;
+ --sentiment-positive: #229e74;
+ --sentiment-negative: #d55e00;
+ --sentiment-neutral: #e69f00;
- --protest-timeline-height: max(30vh, 20rem);
- --media-coverage-chart-height: max(30vh, 20rem);
- --media-sentiment-chart-height: max(30vh, 20rem);
+ --protest-timeline-height: max(30lvh, 20rem);
+ --media-coverage-chart-height: max(30lvh, 20rem);
+ --media-sentiment-chart-height: max(30lvh, 20rem);
}
:root[data-theme='dark'] {
@@ -155,32 +155,30 @@
--input-color: var(--grayDark);
--button-primary-border: 1px solid var(--fg);
}
-
- :root[data-theme='dark'] #user-feedback-button {
+
+ :root[data-theme='dark'] #user-feedback-button {
--background: var(--bg) url(/images/noisy-inverted.webp) repeat center;
}
- @layer base {
- input[type='text'],
- input[type='password'],
- input[type='email'],
- input[type='number'],
- input[type='url'],
- input[type='date'],
- input[type='datetime-local'],
- input[type='month'],
- input[type='week'],
- input[type='time'],
- input[type='search'],
- input[type='tel'],
- input[type='checkbox'],
- select,
- select[multiple],
- textarea {
- @apply border-grayMed focus-visible:outline-none focus-visible:ring-2;
- @apply focus-visible:ring-offset-2 focus-visible:ring-fg focus-visible:ring-offset-bg;
- @apply focus-visible:border-grayMed bg-bg;
- }
+ input[type='text'],
+ input[type='password'],
+ input[type='email'],
+ input[type='number'],
+ input[type='url'],
+ input[type='date'],
+ input[type='datetime-local'],
+ input[type='month'],
+ input[type='week'],
+ input[type='time'],
+ input[type='search'],
+ input[type='tel'],
+ input[type='checkbox'],
+ select,
+ select[multiple],
+ textarea {
+ @apply border-grayMed focus-visible:outline-none focus-visible:ring-2;
+ @apply focus-visible:ring-offset-2 focus-visible:ring-fg focus-visible:ring-offset-bg;
+ @apply focus-visible:border-grayMed bg-bg;
}
input::-webkit-outer-spin-button,
@@ -207,17 +205,17 @@
dialog:modal {
max-width: 100vw;
- max-height: 100vh;
+ max-height: 100lvh;
}
body::after {
background-image: url(data:image/png;base64,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);
position: fixed;
content: '';
- height: 300vh;
+ height: 300lvh;
width: 300vw;
left: -100vw;
- top: -100vh;
+ top: -100lvh;
z-index: 999;
animation-name: grained;
animation-iteration-count: infinite;
@@ -285,7 +283,6 @@
@apply bg-brandWhite dark:bg-[url(/images/noisy-light.webp)] bg-repeat bg-center bg-blend-multiply;
}
-
.max-w-page {
@apply max-w-[var(--pageMaxWidth)];
}
@@ -315,6 +312,6 @@
}
.min-h-content {
- @apply min-h-[calc(100vh-var(--footerHeight)-var(--headerHeight))];
+ @apply min-h-[calc(100lvh-var(--footerHeight)-var(--headerHeight))];
}
}
diff --git a/frontend-nextjs/src/utility/orgsUtil.ts b/frontend-nextjs/src/utility/orgsUtil.ts
index fbe85e3f..d33fb0ef 100644
--- a/frontend-nextjs/src/utility/orgsUtil.ts
+++ b/frontend-nextjs/src/utility/orgsUtil.ts
@@ -10,7 +10,7 @@ export function getOrgStats(data: {
organisation: OrganisationType;
}) {
const { events, organisations, organisation: org } = data;
- const orgEvents = data.events.filter((e) =>
+ const orgEvents = events.filter((e) =>
e.organizers.find((o) => o.slug === org.slug),
);
const totalEvents = orgEvents.length ?? 0;
@@ -23,7 +23,7 @@ export function getOrgStats(data: {
.reduce((acc, e) => {
for (const partner of e.organizers) {
if (partner.slug === org.slug) continue;
- const partnerOrg = data.organisations.find(
+ const partnerOrg = organisations.find(
(o) => o.slug === partner.slug,
);
if (!partnerOrg) continue;
@@ -33,16 +33,14 @@ export function getOrgStats(data: {
}, new Map())
.values(),
);
+
return {
...org,
slug: org.slug,
name: org.name,
totalEvents: totalEvents,
totalParticipants,
- avgParticipantsPerEvent:
- totalEvents === 0 ? 0 : totalParticipants / totalEvents,
- avgPartnerOrgsPerEvent:
- totalEvents === 0 ? 0 : partners.length / totalEvents,
+ avgParticipantsPerEvent: Math.ceil(totalParticipants / Math.max(1, totalEvents)),
totalPartners: partners.length,
partners,
};
diff --git a/frontend-nextjs/src/utility/textUtil.tsx b/frontend-nextjs/src/utility/textUtil.tsx
index 664b6eb1..c9c4b13a 100644
--- a/frontend-nextjs/src/utility/textUtil.tsx
+++ b/frontend-nextjs/src/utility/textUtil.tsx
@@ -1,263 +1,268 @@
-import type { ReactNode } from "react";
-import { cn } from "./classNames";
+import type { ReactNode } from 'react'
+import { cn } from './classNames'
export function titleCase(str: string) {
return str.replace(
/\w\S*/g,
(txt) => txt.charAt(0).toUpperCase() + txt.substr(1),
- );
+ )
}
type ImpactDescriptionProps = {
- isSentiment: boolean;
- topicNode: ReactNode;
- isIncreasing: boolean;
- leastBound: string;
- mostBound: string;
-};
+ isSentiment: boolean
+ topicNode: ReactNode
+ isIncreasing: boolean
+ leastBound: string
+ mostBound: string
+}
-type WrapperEl = ({ children }: { children: ReactNode }) => JSX.Element;
+type WrapperEl = ({ children }: { children: ReactNode }) => JSX.Element
const B: WrapperEl = ({ children }) => (
{children}
-);
+)
const textsEnGB = {
- language: "en-GB",
+ language: 'en-GB',
seo: {
- siteTitle: "Media Impact Monitor",
- siteDescription: "A collaborative project aimed at enabling protest groups and NGOs to evaluate their impact on public discourse.",
+ siteTitle: 'Media Impact Monitor',
+ siteDescription:
+ 'A collaborative project aimed at enabling protest groups and NGOs to evaluate their impact on public discourse.',
},
mainNavigation: {
- home: "Home",
- dashboard: "Dashboard",
- organisations: "Organisations",
- about: "About",
- docs: "Docs",
- fourOFour: "Page not found",
- logoAssets: "Logo assets",
+ home: 'Home',
+ dashboard: 'Dashboard',
+ organisations: 'Organisations',
+ about: 'About',
+ docs: 'Docs',
+ fourOFour: 'Page not found',
+ logoAssets: 'Logo assets',
themeToggle: {
- light: "Light",
- dark: "Dark",
- system: "System",
- toggleText: "Toggle theme",
+ light: 'Light',
+ dark: 'Dark',
+ system: 'System',
+ toggleText: 'Toggle theme',
},
},
fourOFour: {
- heading: "This page does not exist",
- description: "It seems that the page you were looking for does not exist. Try the dashboard instead.",
+ heading: 'This page does not exist',
+ description:
+ 'It seems that the page you were looking for does not exist. Try the dashboard instead.',
},
errors: {
- heading: "Error",
+ heading: 'Error',
buttons: {
- tryAgain: "Try again",
- resetFilters: "Reset all filters",
+ tryAgain: 'Try again',
+ resetFilters: 'Reset all filters',
},
errorLoadingChartData: (
- { chartName = "chart" }: { chartName?: string } = { chartName: "chart" },
+ { chartName = 'chart' }: { chartName?: string } = { chartName: 'chart' },
) => `Error fetching the ${chartName} impact data`,
apiErrorTranslations: {
defaultMessage: (
- { datasetName = "data" }: { datasetName?: string } = {
- datasetName: "data",
+ { datasetName = 'data' }: { datasetName?: string } = {
+ datasetName: 'data',
},
) =>
`There was unexpected issue while retrieving the ${datasetName}. Please try again in a few minutes.`,
ApiFetchError: (
- { datasetName = "data" }: { datasetName?: string } = {
- datasetName: "data",
+ { datasetName = 'data' }: { datasetName?: string } = {
+ datasetName: 'data',
},
) =>
`We are facing issues with our API and where not able to retrieve the ${datasetName}. Please try again in a few minutes.`,
ZodError: (
- { datasetName = "data" }: { datasetName?: string } = {
- datasetName: "data",
+ { datasetName = 'data' }: { datasetName?: string } = {
+ datasetName: 'data',
},
) =>
`The ${datasetName} returned from the API are/is not in the expected format. Please try again in a few minutes or contact the developers.`,
- "An error has occured: 500": (
- { datasetName = "data" }: { datasetName?: string } = {
- datasetName: "data",
+ 'An error has occured: 500': (
+ { datasetName = 'data' }: { datasetName?: string } = {
+ datasetName: 'data',
},
- ) => "There was an unecpected error: 500",
+ ) => 'There was an unecpected error: 500',
},
},
footer: {
links: {
- logoAssets: "Logo assets",
- gitHub: "GitHub",
- appStatus: "App status",
+ logoAssets: 'Logo assets',
+ gitHub: 'GitHub',
+ appStatus: 'App status',
},
copyRightOwner: `Social Change Lab`,
- hostedBy: "Hosted by",
- sponsoredBy: "Sponsored by",
+ hostedBy: 'Hosted by',
+ sponsoredBy: 'Sponsored by',
},
homepage: {
hero: {
- heading: "Welcome to the Media Impact Monitor",
+ heading: 'Welcome to the Media Impact Monitor',
text: [
- "The Media Impact Monitor is a collaborative project aimed at enabling protest groups and NGOs to evaluate their impact on public discourse.",
- "Through the examination of various media sources, from local and national newspapers to social media and parliamentary debates, the tool provides a detailed view of how activism influences public discussion.",
+ 'The Media Impact Monitor is a collaborative project aimed at enabling protest groups and NGOs to evaluate their impact on public discourse.',
+ 'Through the examination of various media sources, from local and national newspapers to social media and parliamentary debates, the tool provides a detailed view of how activism influences public discussion.',
],
buttons: {
- goToDashboard: "Go to the dashboard",
- about: "About",
- docs: "Documentation",
+ goToDashboard: 'Go to the dashboard',
+ about: 'About',
+ docs: 'Documentation',
},
newsletterCallout: {
- heading: "Get notified when we launch the v1!",
+ heading: 'Get notified when we launch the v1!',
},
backgroundImage: {
- lightAlt: "A screenshot of the dashboard (light mode)",
- darkAlt: "A screenshot of the dashboard (dark mode)",
+ lightAlt: 'A screenshot of the dashboard (light mode)',
+ darkAlt: 'A screenshot of the dashboard (dark mode)',
},
},
},
newsLetterSection: {
- heading: "Receive updates and get notified when we launch the v1!",
- screenshotLightAlt: "A screenshot of the dashboard (light mode)",
- screenshotDarkAlt: "A screenshot of the dashboard (dark mode)",
- invalidEmail: "Please enter a valid email address",
- inputLabel: "What is your email address?",
- inputPlaceholder: "anna.smith@example.com",
- submitButton: "Subscribe",
+ heading: 'Receive updates and get notified when we launch the v1!',
+ screenshotLightAlt: 'A screenshot of the dashboard (light mode)',
+ screenshotDarkAlt: 'A screenshot of the dashboard (dark mode)',
+ invalidEmail: 'Please enter a valid email address',
+ inputLabel: 'What is your email address?',
+ inputPlaceholder: 'anna.smith@example.com',
+ submitButton: 'Subscribe',
},
uiCommon: {
- showMore: "Show more",
- showLess: "Show less",
- nextPageAriaLabel: "Go to next page",
- prevPageAriaLabel: "Go to previous page",
+ showMore: 'Show more',
+ showLess: 'Show less',
+ nextPageAriaLabel: 'Go to next page',
+ prevPageAriaLabel: 'Go to previous page',
},
filters: {
mediaSource: {
- label: "Media source",
- fieldPlaceholder: "Select data source",
+ label: 'Media source',
+ fieldPlaceholder: 'Select data source',
values: {
onlineNews: {
- name: "Online News",
- description: "Articles from online news pages.",
+ name: 'Online News',
+ description: 'Articles from online news pages.',
links: [
{
- label: "Official Website",
- href: "https://www.mediacloud.org/",
+ label: 'Official Website',
+ href: 'https://www.mediacloud.org/',
},
],
},
printNews: {
- name: "Print News",
- description: "Articles from print newspapers.",
+ name: 'Print News',
+ description: 'Articles from print newspapers.',
links: [
{
- label: "Official Website",
- href: "https://www.genios.de/",
+ label: 'Official Website',
+ href: 'https://www.genios.de/',
},
{
- label: "Press Page",
- href: "https://www.genios.de/browse/Alle/Presse",
+ label: 'Press Page',
+ href: 'https://www.genios.de/browse/Alle/Presse',
},
],
},
googleTrends: {
- name: "Google Trends",
- description: "Search trends from Google.",
+ name: 'Google Trends',
+ description: 'Search trends from Google.',
links: [
{
- label: "Official Website",
- href: "https://trends.google.com/trends/",
+ label: 'Official Website',
+ href: 'https://trends.google.com/trends/',
},
],
},
},
},
organisations: {
- label: "Organisations",
- selectOrganisation: "Select organisation",
- noOrganisationsFound: "No organisations found",
- toggleAllNone: "Toggle all/none",
- unknownOrganisation: "Unknown organisation",
+ label: 'Organisations',
+ selectOrganisation: 'Select organisation',
+ noOrganisationsFound: 'No organisations found',
+ toggleAllNone: 'Toggle all/none',
+ unknownOrganisation: 'Unknown organisation',
},
timeRange: {
- label: "Time range",
- presets: "Presets",
- last6MonthsLong: "Last 6 months",
- last6MonthsShort: "-6M",
- last12MonthsLong: "Last 12 months",
- last12MonthsShort: "-12M",
- last30DaysLong: "Last 30 days",
- last30DaysShort: "-30D",
+ label: 'Time range',
+ presets: 'Presets',
+ last6MonthsLong: 'Last 6 months',
+ last6MonthsShort: '-6M',
+ last12MonthsLong: 'Last 12 months',
+ last12MonthsShort: '-12M',
+ last30DaysLong: 'Last 30 days',
+ last30DaysShort: '-30D',
buttons: {
- apply: "Apply",
- cancel: "Cancel",
- resetDefaults: "Reset defaults",
+ apply: 'Apply',
+ cancel: 'Cancel',
+ resetDefaults: 'Reset defaults',
},
},
},
info: {
welcome_message: {
- heading: "The Impact Monitor Dashboard",
+ heading: 'The Impact Monitor Dashboard',
description: [
- "Welcome to the Impact Monitor Dashboard. Here, you can see protests over time, topics, and sentiments within the media and how protest organisations impact the media landscape.",
- "Start by setting the filters at the top of the page and scroll down to explore the data.",
+ 'Welcome to the Impact Monitor Dashboard. Here, you can see protests over time, topics, and sentiments within the media and how protest organisations impact the media landscape.',
+ 'Start by setting the filters at the top of the page and scroll down to explore the data.',
],
buttons: {
- cta: "Got it",
- docs: "Learn more",
- whatIsThis: "What is this dashboard?",
+ cta: 'Got it',
+ docs: 'Learn more',
+ whatIsThis: 'What is this dashboard?',
},
arrowHints: {
- setYourFilters: "Set your filters",
- scrollDown: "Scroll down to explore",
+ setYourFilters: 'Set your filters',
+ scrollDown: 'Scroll down to explore',
},
},
},
charts: {
help: {
- howToReadThis: "How to read this",
- readInTheDocs: "Read in the docs",
+ howToReadThis: 'How to read this',
+ readInTheDocs: 'Read in the docs',
tabs: {
- info: "Info",
- methodology: "Methodology",
- data: "Data",
+ info: 'Info',
+ methodology: 'Methodology',
+ data: 'Data',
},
},
common: {
- legend: "Legend",
- dataCredit: "Data credit",
- articlesUnit: "articles",
- total: "Total",
- loading: "Loading chart data...",
+ legend: 'Legend',
+ dataCredit: 'Data credit',
+ articlesUnit: 'articles',
+ total: 'Total',
+ loading: 'Loading chart data...',
cantShowThisChart: {
heading: "We can't show this chart",
- text: "Given the the following limitations:",
+ text: 'Given the the following limitations:',
limitationTranslations: {
// CAUTION: The text below is the the original message from the API
// used as s key to translate it. Only change the value on the right
// of the colon ":"
- "Sentiment trend requires fulltext analysis, which is only available for news_online, not web_google.": `This chart can only be displayed when selecting the meda source "Online News". The source "Google Trends" is not supported.`,
- "Sentiment trend requires fulltext analysis, which is only available for news_online, not news_print.": `This chart can only be displayed when selecting the meda source "Online News". The source "Print News" is not supported.`,
+ 'Sentiment trend requires fulltext analysis, which is only available for news_online, not web_google.': `This chart can only be displayed when selecting the meda source "Online News". The source "Google Trends" is not supported.`,
+ 'Sentiment trend requires fulltext analysis, which is only available for news_online, not news_print.': `This chart can only be displayed when selecting the meda source "Online News". The source "Print News" is not supported.`,
},
},
},
topics: {
- positive: "Positive",
- negative: "Negative",
- neutral: "Neutral",
- "climate activism": "Climate Activism",
- "climate crisis framing": "Climate Crisis Framing",
- "climate policy": "Climate Policy",
- "climate science": "Climate Science",
+ positive: 'Positive',
+ negative: 'Negative',
+ neutral: 'Neutral',
+ 'climate activism': 'Climate Activism',
+ 'climate crisis framing': 'Climate Crisis Framing',
+ 'climate policy': 'Climate Policy',
+ 'climate science': 'Climate Science',
},
aggregationUnit: {
- day: "day",
- week: "week",
- month: "month",
- year: "year",
+ day: 'day',
+ week: 'week',
+ month: 'month',
+ year: 'year',
},
keywordsTooltip: {
intro: ({
categoryNode,
keywordsCount,
- }: { categoryNode: ReactNode; keywordsCount: number | string }) => (
+ }: {
+ categoryNode: ReactNode
+ keywordsCount: number | string
+ }) => (
<>
The category {categoryNode} encompasses articles including one or more
of the following {keywordsCount} keywords:
@@ -275,21 +280,21 @@ const textsEnGB = {
),
linkToDocs: ({ LinkWrapper }: { LinkWrapper: WrapperEl }) => (
<>
- To know more about the methodology, see the{" "}
+ To know more about the methodology, see the{' '}
documentation .
),
},
impact: {
buttons: {
- computeImpacts: "Compute impacts",
- hideComputedImpacts: "Hide computed impacts",
+ computeImpacts: 'Compute impacts',
+ hideComputedImpacts: 'Hide computed impacts',
},
tooltips: {
- upTo: "Up to",
- downTo: "Down to",
- atLeast: "At least",
- noImpact: "No impact",
+ upTo: 'Up to',
+ downTo: 'Down to',
+ atLeast: 'At least',
+ noImpact: 'No impact',
},
descriptions: {
unclearChange: ({ isSentiment, topicNode }: ImpactDescriptionProps) => (
@@ -311,12 +316,12 @@ const textsEnGB = {
}: ImpactDescriptionProps) => (
<>
{`shows ${isIncreasing ? `an ` : `a `}`}
- {isIncreasing ? "increase" : "decrease"}
+ {isIncreasing ? 'increase' : 'decrease'}
{` in the publication of `}
{isSentiment && <> {topicNode} }
{` articles `}
{!isSentiment && <>about {topicNode}}
- {" by at least "}
+ {' by at least '}
{leastBound}
{` and up to `}
{mostBound}
@@ -335,44 +340,47 @@ const textsEnGB = {
),
},
limitation: {
- title: "Limitation",
+ title: 'Limitation',
message: ({ organisationNode }: { organisationNode: ReactNode }) => (
<>
The impact of an average protest by {organisationNode} cannot be
computed because of the following limitations:
),
- widenYourFilters: "Widen your filters or choose another organisation.",
+ widenYourFilters: 'Widen your filters or choose another organisation.',
limitationTranslations: {
- "Not enough events to estimate impact.":
- "Not enough events to estimate impact.",
+ 'Not enough events to estimate impact.':
+ 'Not enough events to estimate impact.',
},
},
error: {
message:
- "The impact cannot be computed because of the following error:",
+ 'The impact cannot be computed because of the following error:',
changeYourFilters:
- "Change your filters or choose another organisation.",
+ 'Change your filters or choose another organisation.',
},
introduction: {
message: ({
organisationNode,
selectedTimeFrameNode,
}: {
- organisationNode: ReactNode;
- selectedTimeFrameNode: ReactNode;
+ organisationNode: ReactNode
+ selectedTimeFrameNode: ReactNode
}) => (
<>
- An average protest by {organisationNode} within the{" "}
+ An average protest by {organisationNode} within the{' '}
{selectedTimeFrameNode}
),
selectedTimeFrame: {
- label: "selected timeframe",
+ label: 'selected timeframe',
tooltipMessage: ({
fromNode,
toNode,
- }: { fromNode: ReactNode; toNode: ReactNode }) => (
+ }: {
+ fromNode: ReactNode
+ toNode: ReactNode
+ }) => (
<>
The selected timeframe is:
{fromNode} to {toNode}. @@ -380,7 +388,10 @@ const textsEnGB = { tooltipNotice: ({ percentageNode, organisationNode, - }: { percentageNode: ReactNode; organisationNode: ReactNode }) => ( + }: { + percentageNode: ReactNode + organisationNode: ReactNode + }) => ( <> Only {percentageNode} of protests from {organisationNode} are within the selected timeframe. Select a longer timeframe to get a @@ -391,35 +402,35 @@ const textsEnGB = { }, }, protest_timeline: { - heading: "What protests are happening?", + heading: 'What protests are happening?', description: [ - "See protests over time for all of the selected organisations.", - "Hover or click on the bubbles for more information on individual protest events.", - "Currently, we only cover climate protests in Germany since 2020.", + 'See protests over time for all of the selected organisations.', + 'Hover or click on the bubbles for more information on individual protest events.', + 'Currently, we only cover climate protests in Germany since 2020.', ], data_credit: [ { - label: "Protest data", + label: 'Protest data', links: [ { - text: "Armed Conflict Location & Event Data Project (ACLED)", - url: "https://acleddata.com/", + text: 'Armed Conflict Location & Event Data Project (ACLED)', + url: 'https://acleddata.com/', }, ], }, ], legend: { - size: "Size", + size: 'Size', participants: { - day: "Protest participants", - week: "Weekly participants", - month: "Monthly participants", - year: "Yearly participants", + day: 'Protest participants', + week: 'Weekly participants', + month: 'Monthly participants', + year: 'Yearly participants', }, - zeroOrUnknown: "0 or unknown", - color: "Color", - organisations: "Organisations", - other: "Other", + zeroOrUnknown: '0 or unknown', + color: 'Color', + organisations: 'Organisations', + other: 'Other', }, tooltips: { aggregated: ({ @@ -429,45 +440,45 @@ const textsEnGB = { participantCount, orgsCount, }: { - timeUnitLabel: string; - timeValue: string; - protestCount: number; - participantCount: number | undefined; - orgsCount: number; + timeUnitLabel: string + timeValue: string + protestCount: number + participantCount: number | undefined + orgsCount: number }) => ( <> - The {timeUnitLabel} of {timeValue} saw a total of{" "} + The {timeUnitLabel} of {timeValue} saw a total of{' '} - {protestCount.toLocaleString("en-GB")} protest - {protestCount > 1 && "s"} + {protestCount.toLocaleString('en-GB')} protest + {protestCount > 1 && 's'} {participantCount && ( <> - , comprising of{" "} + , comprising of{' '} - {participantCount.toLocaleString("en-GB")} participant - {participantCount > 1 && "s"} + {participantCount.toLocaleString('en-GB')} participant + {participantCount > 1 && 's'} )} - {`, and ${protestCount > 1 ? "were" : "was"} organized by the following organisation${orgsCount > 1 ? "s" : ""}:`} + {`, and ${protestCount > 1 ? 'were' : 'was'} organized by the following organisation${orgsCount > 1 ? 's' : ''}:`} ), }, }, topics_trend: { - heading: "What topics are the focus of public discourse?", + heading: 'What topics are the focus of public discourse?', description: [ - "See how many articles are published on various topics over time.", - "Use the filters to switch between online newspaper articles, print newspaper articles, and queries that people search for on Google.", + 'See how many articles are published on various topics over time.', + 'Use the filters to switch between online newspaper articles, print newspaper articles, and queries that people search for on Google.', ], data_credit: [ { - label: "Media data", + label: 'Media data', links: [ { - text: "MediaCloud", - url: "https://mediacloud.org/", + text: 'MediaCloud', + url: 'https://mediacloud.org/', }, ], }, @@ -475,87 +486,86 @@ const textsEnGB = { }, topics_impact: { - heading: "Computed impacts", + heading: 'Computed impacts', description: - "See how a protest by an organisation influences the publication of articles about climate change (by topics).", + 'See how a protest by an organisation influences the publication of articles about climate change (by topics).', }, sentiment_protest: { - heading: "What sentiment does the media show towards the protests?", + heading: 'What sentiment does the media show towards the protests?', description: [ "See whether the media's coverage of the protests is more positive, negative, or neutral.", ], data_credit: [ { - label: "Media data", + label: 'Media data', links: [ { - text: "MediaCloud", - url: "https://mediacloud.org/", + text: 'MediaCloud', + url: 'https://mediacloud.org/', }, ], }, ], }, sentiment_protest_impact: { - heading: "Computed impacts", + heading: 'Computed impacts', description: - "See how a protest by an organisation influences the publication of articles about climate activism (by sentiment).", + 'See how a protest by an organisation influences the publication of articles about climate activism (by sentiment).', }, sentiment_policy: { heading: - "What stance does the media have towards progressive climate policies?", + 'What stance does the media have towards progressive climate policies?', description: [ - "See whether the media supports or opposes policies aimed at mitigating climate change.", + 'See whether the media supports or opposes policies aimed at mitigating climate change.', ], data_credit: [ { - label: "Media data", + label: 'Media data', links: [ { - text: "MediaCloud", - url: "https://mediacloud.org/", + text: 'MediaCloud', + url: 'https://mediacloud.org/', }, ], }, ], }, sentiment_policy_impact: { - heading: "Computed impacts", + heading: 'Computed impacts', description: - "See how a protest by an organisation influences the publication of articles about climate policies (by sentiment).", + 'See how a protest by an organisation influences the publication of articles about climate policies (by sentiment).', }, }, organisationsPage: { - heading: "Organisations Overview", + heading: 'Organisations Overview', description: ({ isSameDay, formattedFrom, formattedTo, orgsCount, }: { - isSameDay: boolean; - formattedFrom: string; - formattedTo: string; - orgsCount: number; + isSameDay: boolean + formattedFrom: string + formattedTo: string + orgsCount: number }) => { const formattedDate = isSameDay ? `on ${formattedFrom}` - : `between ${formattedFrom} and ${formattedTo}`; + : `between ${formattedFrom} and ${formattedTo}` const organisersCount = orgsCount > 0 - ? `the ${orgsCount} selected organisation${orgsCount > 1 ? "s" : ""}` - : "all organisations"; - return `An overview of ${organisersCount} with protests ${formattedDate}. You can use the filters above to change the date range or select specific organisations.`; + ? `the ${orgsCount} selected organisation${orgsCount > 1 ? 's' : ''}` + : 'all organisations' + return `An overview of ${organisersCount} with protests ${formattedDate}. You can use the filters above to change the date range or select specific organisations.` }, - allOrganisations: "All organisations", - showPartnersAriaLabel: "Show partners tooltip", + allOrganisations: 'All organisations', + showPartnersAriaLabel: 'Show partners tooltip', propertyNames: { - name: "Name", - totalEvents: "Total Events", - totalParticipants: "Total Participants", - avgParticipants: "Avg. Participants", - avgPartners: "Avg. Partners", - totalPartners: "Total Partners", + name: 'Name', + totalEvents: 'Total Events', + totalParticipants: 'Total Participants', + avgParticipants: 'Avg. Participants', + totalPartners: 'Partners', }, }, singleProtestPage: { @@ -564,280 +574,283 @@ const textsEnGB = { orgsCount, orgName, }: { - formattedDate: string; - orgsCount: number; - orgName: string; + formattedDate: string + orgsCount: number + orgName: string }) => cn( `Protest on ${formattedDate}`, - orgsCount > 1 && "multiple organisations", + orgsCount > 1 && 'multiple organisations', orgsCount === 1 && orgName, ), propertyNames: { - city: "City", - country: "Country", - organisations: "Organisations", + city: 'City', + country: 'Country', + organisations: 'Organisations', }, table: { - heading: "Protest Articles", - description: "See which articles mention the protest", + heading: 'Protest Articles', + description: 'See which articles mention the protest', header: { - title: "Title", - summary: "Summary", - date: "Date", - url: "URL", - sentimentActivism: "Sent. Activism", - sentimentPolicy: "Sent. Policy", + title: 'Title', + summary: 'Summary', + date: 'Date', + url: 'URL', + sentimentActivism: 'Sent. Activism', + sentimentPolicy: 'Sent. Policy', }, }, charts: { - heading: "Protest Timeline of Sentiment", + heading: 'Protest Timeline of Sentiment', description: - "See the sentiment towards activism of articles related to the protest", + 'See the sentiment towards activism of articles related to the protest', sentimentTowards: ({ topicNode }: { topicNode: ReactNode }) => ( <>Sentiment towards {topicNode} ), }, }, docsPage: { - documentation: "Documentation", - nextPage: "Next page", - prevPage: "Previous page", - contents: "Contents", - onThisPage: "On this page", - tocAriaLabel: "Table of contents of the documentation", - tocButtonText: "Contents", - tocNoContentsFound: "No headings found on this page.", + documentation: 'Documentation', + nextPage: 'Next page', + prevPage: 'Previous page', + contents: 'Contents', + onThisPage: 'On this page', + tocAriaLabel: 'Table of contents of the documentation', + tocButtonText: 'Contents', + tocNoContentsFound: 'No headings found on this page.', }, -}; +} const textsXXX = { - language: "XXX", + language: 'XXX', seo: { - siteTitle: "XXX", - siteDescription: "XXX", + siteTitle: 'XXX', + siteDescription: 'XXX', }, mainNavigation: { - home: "XXX", - dashboard: "XXX", - organisations: "XXX", - about: "XXX", - docs: "XXX", - fourOFour: "XXX", - logoAssets: "XXX", + home: 'XXX', + dashboard: 'XXX', + organisations: 'XXX', + about: 'XXX', + docs: 'XXX', + fourOFour: 'XXX', + logoAssets: 'XXX', themeToggle: { - light: "XXX", - dark: "XXX", - system: "XXX", - toggleText: "XXX", + light: 'XXX', + dark: 'XXX', + system: 'XXX', + toggleText: 'XXX', }, }, fourOFour: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', }, errors: { - heading: "XXX", + heading: 'XXX', buttons: { - tryAgain: "XXX", - resetFilters: "XXX", + tryAgain: 'XXX', + resetFilters: 'XXX', }, errorLoadingChartData: ( - { chartName = "XXX" }: { chartName?: string } = { chartName: "XXX" }, + { chartName = 'XXX' }: { chartName?: string } = { chartName: 'XXX' }, ) => `XXX ${chartName} XXX`, apiErrorTranslations: { defaultMessage: ( - { datasetName = "XXX" }: { datasetName?: string } = { - datasetName: "XXX", + { datasetName = 'XXX' }: { datasetName?: string } = { + datasetName: 'XXX', }, ) => `XXX ${datasetName}. XXX.`, ApiFetchError: ( - { datasetName = "XXX" }: { datasetName?: string } = { - datasetName: "XXX", + { datasetName = 'XXX' }: { datasetName?: string } = { + datasetName: 'XXX', }, ) => `XXX`, ZodError: ( - { datasetName = "XXX" }: { datasetName?: string } = { - datasetName: "XXX", + { datasetName = 'XXX' }: { datasetName?: string } = { + datasetName: 'XXX', }, ) => `XXX ${datasetName} XXX`, - "An error has occured: 500": ( - { datasetName = "data" }: { datasetName?: string } = { - datasetName: "data", + 'An error has occured: 500': ( + { datasetName = 'data' }: { datasetName?: string } = { + datasetName: 'data', }, - ) => "XXX", + ) => 'XXX', }, }, footer: { links: { - logoAssets: "XXX", - gitHub: "XXX", - appStatus: "XXX", + logoAssets: 'XXX', + gitHub: 'XXX', + appStatus: 'XXX', }, - copyRightOwner: "XXX", - hostedBy: "XXX", - sponsoredBy: "XXX", + copyRightOwner: 'XXX', + hostedBy: 'XXX', + sponsoredBy: 'XXX', }, homepage: { hero: { - heading: "XXX", - text: ["XXX", "XXX"], + heading: 'XXX', + text: ['XXX', 'XXX'], buttons: { - goToDashboard: "XXX", - about: "XXX", - docs: "XXX", + goToDashboard: 'XXX', + about: 'XXX', + docs: 'XXX', }, newsletterCallout: { - heading: "XXX", + heading: 'XXX', }, backgroundImage: { - lightAlt: "XXX", - darkAlt: "XXX", + lightAlt: 'XXX', + darkAlt: 'XXX', }, }, }, newsLetterSection: { - heading: "XXX", - screenshotLightAlt: "XXX", - screenshotDarkAlt: "XXX", - invalidEmail: "XXX", - inputLabel: "XXX", - inputPlaceholder: "XXX", - submitButton: "XXX", + heading: 'XXX', + screenshotLightAlt: 'XXX', + screenshotDarkAlt: 'XXX', + invalidEmail: 'XXX', + inputLabel: 'XXX', + inputPlaceholder: 'XXX', + submitButton: 'XXX', }, uiCommon: { - showMore: "XXX", - showLess: "XXX", - nextPageAriaLabel: "XXX", - prevPageAriaLabel: "XXX", + showMore: 'XXX', + showLess: 'XXX', + nextPageAriaLabel: 'XXX', + prevPageAriaLabel: 'XXX', }, filters: { mediaSource: { - label: "XXX", - fieldPlaceholder: "XXX", + label: 'XXX', + fieldPlaceholder: 'XXX', values: { onlineNews: { - name: "XXX", - description: "XXX", + name: 'XXX', + description: 'XXX', links: [ { - label: "XXX", - href: "XXX", + label: 'XXX', + href: 'XXX', }, ], }, printNews: { - name: "XXX", - description: "XXX", + name: 'XXX', + description: 'XXX', links: [ { - label: "XXX", - href: "XXX", + label: 'XXX', + href: 'XXX', }, { - label: "XXX", - href: "XXX", + label: 'XXX', + href: 'XXX', }, ], }, googleTrends: { - name: "XXX", - description: "XXX", + name: 'XXX', + description: 'XXX', links: [ { - label: "XXX", - href: "XXX", + label: 'XXX', + href: 'XXX', }, ], }, }, }, organisations: { - label: "XXX", - selectOrganisation: "XXX", - noOrganisationsFound: "XXX", - toggleAllNone: "XXX", - unknownOrganisation: "XXX", + label: 'XXX', + selectOrganisation: 'XXX', + noOrganisationsFound: 'XXX', + toggleAllNone: 'XXX', + unknownOrganisation: 'XXX', }, timeRange: { - label: "XXX", - presets: "XXX", - last6MonthsLong: "XXX", - last6MonthsShort: "XXX", - last12MonthsLong: "XXX", - last12MonthsShort: "XXX", - last30DaysLong: "XXX", - last30DaysShort: "XXX", + label: 'XXX', + presets: 'XXX', + last6MonthsLong: 'XXX', + last6MonthsShort: 'XXX', + last12MonthsLong: 'XXX', + last12MonthsShort: 'XXX', + last30DaysLong: 'XXX', + last30DaysShort: 'XXX', buttons: { - apply: "XXX", - cancel: "XXX", - resetDefaults: "XXX", + apply: 'XXX', + cancel: 'XXX', + resetDefaults: 'XXX', }, }, }, info: { welcome_message: { - heading: "XXX", - description: ["XXX", "XXX"], + heading: 'XXX', + description: ['XXX', 'XXX'], buttons: { - cta: "XXX", - docs: "XXX", - whatIsThis: "XXX", + cta: 'XXX', + docs: 'XXX', + whatIsThis: 'XXX', }, arrowHints: { - setYourFilters: "XXX", - scrollDown: "XXX", + setYourFilters: 'XXX', + scrollDown: 'XXX', }, }, }, charts: { help: { - howToReadThis: "XXX", - readInTheDocs: "XXX", + howToReadThis: 'XXX', + readInTheDocs: 'XXX', tabs: { - info: "XXX", - methodology: "XXX", - data: "XXX", + info: 'XXX', + methodology: 'XXX', + data: 'XXX', }, }, common: { - legend: "XXX", - articlesUnit: "XXX", - total: "XXX", - dataCredit: "XXX", - loading: "XXX...", + legend: 'XXX', + articlesUnit: 'XXX', + total: 'XXX', + dataCredit: 'XXX', + loading: 'XXX...', cantShowThisChart: { - heading: "XXX", - text: "XXX", + heading: 'XXX', + text: 'XXX', limitationTranslations: { // CAUTION: The text below is the the original message from the API // used as s key to translate it. Only change the value on the right // of the colon ":" - "Sentiment trend requires fulltext analysis, which is only available for news_online, not web_google.": `XXX`, - "Sentiment trend requires fulltext analysis, which is only available for news_online, not news_print.": `XXX`, + 'Sentiment trend requires fulltext analysis, which is only available for news_online, not web_google.': `XXX`, + 'Sentiment trend requires fulltext analysis, which is only available for news_online, not news_print.': `XXX`, }, }, }, topics: { - positive: "XXX", - negative: "XXX", - neutral: "XXX", - "climate activism": "XXX", - "climate crisis framing": "XXX", - "climate policy": "XXX", - "climate science": "XXX", + positive: 'XXX', + negative: 'XXX', + neutral: 'XXX', + 'climate activism': 'XXX', + 'climate crisis framing': 'XXX', + 'climate policy': 'XXX', + 'climate science': 'XXX', }, aggregationUnit: { - day: "XXX", - week: "XXX", - month: "XXX", - year: "XXX", + day: 'XXX', + week: 'XXX', + month: 'XXX', + year: 'XXX', }, keywordsTooltip: { intro: ({ categoryNode, keywordsCount, - }: { categoryNode: ReactNode; keywordsCount: number | string }) => ( + }: { + categoryNode: ReactNode + keywordsCount: number | string + }) => ( <> XXX {categoryNode} XXX {keywordsCount} XXX @@ -859,19 +872,19 @@ const textsXXX = { }, impact: { buttons: { - computeImpacts: "XXX", - hideComputedImpacts: "XXX", + computeImpacts: 'XXX', + hideComputedImpacts: 'XXX', }, tooltips: { - upTo: "XXX", - downTo: "XXX", - atLeast: "XXX", - noImpact: "XXX", + upTo: 'XXX', + downTo: 'XXX', + atLeast: 'XXX', + noImpact: 'XXX', }, descriptions: { unclearChange: ({ isSentiment, topicNode }: ImpactDescriptionProps) => ( <> - XXX XXX XXX {isSentiment && <> {topicNode} } XXX{" "} + XXX XXX XXX {isSentiment && <> {topicNode} } XXX{' '} {topicNode} XXX ), @@ -883,50 +896,53 @@ const textsXXX = { mostBound, }: ImpactDescriptionProps) => ( <> - XXX {isIncreasing ? "XXX" : "XXX"} XXX{" "} - {isSentiment && <> {topicNode} } XXX {topicNode} XXX{" "} + XXX {isIncreasing ? 'XXX' : 'XXX'} XXX{' '} + {isSentiment && <> {topicNode} } XXX {topicNode} XXX{' '} {leastBound} XXX {mostBound} XXX ), noChange: ({ isSentiment, topicNode }: ImpactDescriptionProps) => ( <> - XXX XXX XXX {isSentiment && <> {topicNode} } XXX{" "} + XXX XXX XXX {isSentiment && <> {topicNode} } XXX{' '} {topicNode} XXX ), }, limitation: { - title: "XXX", + title: 'XXX', message: ({ organisationNode }: { organisationNode: ReactNode }) => ( <>XXX {organisationNode} XXX ), - widenYourFilters: "XXX", + widenYourFilters: 'XXX', limitationTranslations: { - "Not enough events to estimate impact.": "XXX", + 'Not enough events to estimate impact.': 'XXX', }, }, error: { - message: "XXX", - changeYourFilters: "XXX", + message: 'XXX', + changeYourFilters: 'XXX', }, introduction: { message: ({ organisationNode, selectedTimeFrameNode, }: { - organisationNode: ReactNode; - selectedTimeFrameNode: ReactNode; + organisationNode: ReactNode + selectedTimeFrameNode: ReactNode }) => ( <> XXX {organisationNode} XXX {selectedTimeFrameNode} ), selectedTimeFrame: { - label: "XXX", + label: 'XXX', tooltipMessage: ({ fromNode, toNode, - }: { fromNode: ReactNode; toNode: ReactNode }) => ( + }: { + fromNode: ReactNode + toNode: ReactNode + }) => ( <> XXX
{fromNode} XXX {toNode}. @@ -934,7 +950,10 @@ const textsXXX = { tooltipNotice: ({ percentageNode, organisationNode, - }: { percentageNode: ReactNode; organisationNode: ReactNode }) => ( + }: { + percentageNode: ReactNode + organisationNode: ReactNode + }) => ( <> XXX {percentageNode} XXX {organisationNode} XXX @@ -943,31 +962,31 @@ const textsXXX = { }, }, protest_timeline: { - heading: "XXX", - description: ["XXX", "XXX", "XXX"], + heading: 'XXX', + description: ['XXX', 'XXX', 'XXX'], data_credit: [ { - label: "XXX", + label: 'XXX', links: [ { - text: "XXX", - url: "XXX", + text: 'XXX', + url: 'XXX', }, ], }, ], legend: { - size: "XXX", + size: 'XXX', participants: { - day: "XXX", - week: "XXX", - month: "XXX", - year: "XXX", + day: 'XXX', + week: 'XXX', + month: 'XXX', + year: 'XXX', }, - zeroOrUnknown: "XXX", - color: "XXX", - organisations: "XXX", - other: "XXX", + zeroOrUnknown: 'XXX', + color: 'XXX', + organisations: 'XXX', + other: 'XXX', }, tooltips: { aggregated: ({ @@ -977,35 +996,35 @@ const textsXXX = { participantCount, orgsCount, }: { - timeUnitLabel: string; - timeValue: string; - protestCount: number; - participantCount: number | undefined; - orgsCount: number; + timeUnitLabel: string + timeValue: string + protestCount: number + participantCount: number | undefined + orgsCount: number }) => ( <> - XXX {timeValue} XXX{" "} - {protestCount.toLocaleString("en-GB")} XXX{" "} + XXX {timeValue} XXX{' '} + {protestCount.toLocaleString('en-GB')} XXX{' '} {participantCount && ( <> - XXX {participantCount.toLocaleString("en-GB")} XXX + XXX {participantCount.toLocaleString('en-GB')} XXX - )}{" "} - XXX {orgsCount > 1 ? "XXX" : "XXX"} XXX + )}{' '} + XXX {orgsCount > 1 ? 'XXX' : 'XXX'} XXX ), }, }, topics_trend: { - heading: "XXX", - description: ["XXX", "XXX"], + heading: 'XXX', + description: ['XXX', 'XXX'], data_credit: [ { - label: "XXX", + label: 'XXX', links: [ { - text: "XXX", - url: "XXX", + text: 'XXX', + url: 'XXX', }, ], }, @@ -1013,111 +1032,110 @@ const textsXXX = { }, topics_impact: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', }, sentiment_protest: { - heading: "XXX", - description: ["XXX"], + heading: 'XXX', + description: ['XXX'], data_credit: [ { - label: "XXX", + label: 'XXX', links: [ { - text: "XXX", - url: "XXX", + text: 'XXX', + url: 'XXX', }, ], }, ], }, sentiment_protest_impact: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', }, sentiment_policy: { - heading: "XXX", - description: ["XXX"], + heading: 'XXX', + description: ['XXX'], data_credit: [ { - label: "XXX", + label: 'XXX', links: [ { - text: "XXX", - url: "XXX", + text: 'XXX', + url: 'XXX', }, ], }, ], }, sentiment_policy_impact: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', }, }, organisationsPage: { - heading: "XXX", + heading: 'XXX', description: (props: { - isSameDay: boolean; - formattedFrom: string; - formattedTo: string; - orgsCount: number; + isSameDay: boolean + formattedFrom: string + formattedTo: string + orgsCount: number }) => { - return `XXX`; + return `XXX` }, - allOrganisations: "XXX", - showPartnersAriaLabel: "XXX", + allOrganisations: 'XXX', + showPartnersAriaLabel: 'XXX', propertyNames: { - name: "XXX", - totalEvents: "XXX", - totalParticipants: "XXX", - avgParticipants: "XXX", - avgPartners: "XXX", - totalPartners: "XXX", + name: 'XXX', + totalEvents: 'XXX', + totalParticipants: 'XXX', + avgParticipants: 'XXX', + totalPartners: 'XXX', }, }, singleProtestPage: { heading: (props: { - formattedDate: string; - orgsCount: number; - orgName: string; + formattedDate: string + orgsCount: number + orgName: string }) => `XXX`, propertyNames: { - city: "XXX", - country: "XXX", - organisations: "XXX", + city: 'XXX', + country: 'XXX', + organisations: 'XXX', }, table: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', header: { - title: "XXX", - summary: "XXX", - date: "XXX", - url: "XXX", - sentimentActivism: "XXX", - sentimentPolicy: "XXX", + title: 'XXX', + summary: 'XXX', + date: 'XXX', + url: 'XXX', + sentimentActivism: 'XXX', + sentimentPolicy: 'XXX', }, }, charts: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', sentimentTowards: ({ topicNode }: { topicNode: ReactNode }) => ( <>XXX {topicNode} ), }, }, docsPage: { - documentation: "XXX", - nextPage: "XXX", - prevPage: "XXX", - contents: "XXX", - onThisPage: "XXX", - tocAriaLabel: "XXX", - tocButtonText: "XXX", - tocNoContentsFound: "XXX", + documentation: 'XXX', + nextPage: 'XXX', + prevPage: 'XXX', + contents: 'XXX', + onThisPage: 'XXX', + tocAriaLabel: 'XXX', + tocButtonText: 'XXX', + tocNoContentsFound: 'XXX', }, -} satisfies typeof textsEnGB; +} satisfies typeof textsEnGB -export const texts = textsEnGB; +export const texts = textsEnGB // export const texts = textsXXX; diff --git a/frontend-nextjs/src/utility/useEventMedia.ts b/frontend-nextjs/src/utility/useEventMedia.ts index 9dc13bb4..e2570762 100644 --- a/frontend-nextjs/src/utility/useEventMedia.ts +++ b/frontend-nextjs/src/utility/useEventMedia.ts @@ -9,11 +9,12 @@ import { import type { OrganisationType, ParsedEventType } from "./eventsUtil"; import { getStaleTime } from "./queryUtil"; import { today } from "./today"; -import useEvents from "./useEvents"; +import { useAllOrganisations } from "./useOrganisations"; import useQueryErrorToast from "./useQueryErrorToast"; -export function getEventMediaQueryOptions( +function getEventMediaQueryOptions( allOrganisations: OrganisationType[], + isLoading: boolean, query?: Partial,
) {
const queryParsing = eventMediaInputQueryZodSchema.safeParse(query);
@@ -34,22 +35,18 @@ export function getEventMediaQueryOptions(
)
: null,
staleTime: getStaleTime(today),
- enabled: queryParsing.success,
+ enabled: !isLoading && queryParsing.success,
});
}
function useEventMedia(eventId?: ParsedEventType["event_id"]) {
- const { data } = useEvents();
- const { organizers, mediaSource, from, to } = useFiltersStore(
- ({ organizers, mediaSource, from, to }) => ({
- organizers,
- mediaSource,
- from,
- to,
- }),
- );
+ const { organisations, isLoading } = useAllOrganisations();
+ const organizers = useFiltersStore(({ organizers }) => organizers);
+ const mediaSource = useFiltersStore(({ mediaSource }) => mediaSource);
+ const from = useFiltersStore(({ from }) => from);
+ const to = useFiltersStore(({ to }) => to);
const query = useQuery(
- getEventMediaQueryOptions(data?.organisations || [], {
+ getEventMediaQueryOptions(organisations || [], isLoading, {
eventId,
organizers,
from,
diff --git a/frontend-nextjs/src/utility/useEvents.ts b/frontend-nextjs/src/utility/useEvents.ts
index 7c1c6f93..f65caf93 100644
--- a/frontend-nextjs/src/utility/useEvents.ts
+++ b/frontend-nextjs/src/utility/useEvents.ts
@@ -1,121 +1,109 @@
-"use client";
-import { useFiltersStore } from "@/providers/FiltersStoreProvider";
-import { useToday } from "@/providers/TodayProvider";
+'use client'
+import { useFiltersStore } from '@/providers/FiltersStoreProvider'
+import { useToday } from '@/providers/TodayProvider'
import {
type UseQueryResult,
useQuery,
useQueryClient,
-} from "@tanstack/react-query";
-import { getTime } from "date-fns";
-import { useEffect, useMemo } from "react";
+} from '@tanstack/react-query'
+import { getTime } from 'date-fns'
+import { useEffect } from 'react'
import {
type OrganisationType,
type ParsedEventType,
- extractEventOrganisations,
- getEventsData,
-} from "./eventsUtil";
-import { getStaleTime } from "./queryUtil";
-import useQueryErrorToast from "./useQueryErrorToast";
+ getEventsData
+} from './eventsUtil'
+import { getStaleTime } from './queryUtil'
+import { useOrganizersKey } from './useOrganisations'
+import useQueryErrorToast from './useQueryErrorToast'
export type UseEventsReturnType = Omit<
UseQueryResult,
- "data"
+ 'data'
> & {
data: {
- allEvents: ParsedEventType[];
- events: ParsedEventType[];
- eventsByOrgs: ParsedEventType[];
- organisations: OrganisationType[];
- selectedOrganisations: OrganisationType[];
- };
-};
+ allEvents: ParsedEventType[]
+ events: ParsedEventType[]
+ eventsByOrgs: ParsedEventType[]
+ organisations: OrganisationType[]
+ selectedOrganisations: OrganisationType[]
+ }
+}
+
+export function useAllEvents() {
+ const queryClient = useQueryClient()
+ const { today } = useToday()
-function useEvents({
- from: inputFrom,
- to: inputTo,
-}: { from?: Date; to?: Date } = {}): UseEventsReturnType {
- const queryClient = useQueryClient();
- const { today } = useToday();
- const filterStore = useFiltersStore((state) => ({
- from: state.from,
- fromTime: getTime(state.from),
- to: state.to,
- toTime: getTime(state.to),
- fromDateString: state.fromDateString,
- toDateString: state.toDateString,
- organizers: state.organizers,
- }));
- const queryKey = ["events"];
const query = useQuery({
- queryKey,
+ queryKey: ['allEvents'],
queryFn: async () => await getEventsData(undefined, today),
staleTime: getStaleTime(today),
- });
- const { data, error } = query;
-
- useQueryErrorToast("protests", error);
-
- const organisersKey = useMemo(
- () => filterStore.organizers.sort().join("-"),
- [filterStore.organizers],
- );
- const events = useMemo(() => {
- return (data ?? []).filter((e) => {
- if (!e.date) return false;
- const beforeFrom = e.time < filterStore.fromTime;
- const afterTo = e.time > filterStore.toTime;
- if (beforeFrom || afterTo) return false;
- return true;
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [data, filterStore.fromDateString, filterStore.toDateString]);
-
- const eventFilteredByOrganizers = useMemo(() => {
- if (filterStore.organizers.length === 0) return events;
- return events.filter((e) =>
- filterStore.organizers.find((orgSlug) =>
- e.organizers.find((x) => x.slug === orgSlug),
- ),
- );
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [events, organisersKey]);
-
- const organisations = useMemo(
- () => (data?.length ? extractEventOrganisations(data) : []),
- [data],
- );
+ })
+ const { data, error } = query
- const orgsFromFilteredEvents = useMemo(
- () => (events.length ? extractEventOrganisations(events) : []),
- [events],
- );
-
- const selectedOrganisations = useMemo(() => {
- if (filterStore.organizers.length === 0) return orgsFromFilteredEvents;
- const selectedOrs = orgsFromFilteredEvents.filter((org) =>
- filterStore.organizers.find((o) => o === org.slug),
- );
- return selectedOrs.length === 0 ? orgsFromFilteredEvents : selectedOrs;
- }, [filterStore.organizers, orgsFromFilteredEvents]);
+ useQueryErrorToast('protests', error)
useEffect(() => {
- if (!data || data.length === 0) return;
+ if (!data || data.length === 0) return
for (const event of data) {
- queryClient.setQueryData(["events", event.event_id], event);
+ queryClient.setQueryData(['events', event.event_id], event)
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [data]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [data])
return {
...query,
- data: {
- allEvents: data ?? [],
- events,
- eventsByOrgs: eventFilteredByOrganizers,
- organisations,
- selectedOrganisations,
+ allEvents: data ?? [],
+ }
+}
+
+export function useTimeFilteredEvents() {
+ const { allEvents, isLoading } = useAllEvents()
+ const fromTime = useFiltersStore(({ from }) => getTime(from))
+ const toTime = useFiltersStore(({ to }) => getTime(to))
+
+ const query = useQuery({
+ queryKey: ['timeFilteredEvents', fromTime, toTime],
+ queryFn: () => {
+ const eventsInTimeRange = (allEvents ?? []).filter((e) => {
+ if (!e.date) return false
+ const beforeFrom = e.time < fromTime
+ const afterTo = e.time > toTime
+ if (beforeFrom || afterTo) return false
+ return true
+ })
+ return eventsInTimeRange
},
- };
+ enabled: !isLoading && allEvents.length > 0,
+ })
+
+ return {
+ ...query,
+ timeFilteredEvents: query.data ?? [],
+ }
}
-export default useEvents;
+export function useFilteredEvents() {
+ const { timeFilteredEvents, isLoading } = useTimeFilteredEvents()
+ const organizers = useFiltersStore(({ organizers }) => organizers)
+ const organizersKey = useOrganizersKey()
+
+ const query = useQuery({
+ queryKey: ['filteredEvents', timeFilteredEvents, organizersKey],
+ queryFn: () => {
+ if (organizers.length === 0) return timeFilteredEvents
+ const eventsOfSelectedOrgs = timeFilteredEvents.filter((e) =>
+ organizers.find((orgSlug) =>
+ e.organizers.find((x) => x.slug === orgSlug),
+ ),
+ );
+ return eventsOfSelectedOrgs
+ },
+ enabled: !isLoading
+ })
+
+ return {
+ ...query,
+ filteredEvents: query.data ?? [],
+ }
+}
diff --git a/frontend-nextjs/src/utility/useFullTexts.ts b/frontend-nextjs/src/utility/useFullTexts.ts
index 7292edf7..7023778f 100644
--- a/frontend-nextjs/src/utility/useFullTexts.ts
+++ b/frontend-nextjs/src/utility/useFullTexts.ts
@@ -1,14 +1,14 @@
import { useFiltersStore } from "@/providers/FiltersStoreProvider";
import { useToday } from "@/providers/TodayProvider";
+import { useAllOrganisations } from '@/utility/useOrganisations';
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
import slugify from "slugify";
import { getFullTextsData } from "./fullTextsUtil";
-import useEvents from "./useEvents";
export function useFullTexts({ event_id }: { event_id?: string }) {
const organizers = useFiltersStore(({ organizers }) => organizers);
- const { data } = useEvents();
+ const { organisations, isLoading } = useAllOrganisations();
const { today } = useToday();
const organizersKey = useMemo(
() =>
@@ -25,10 +25,10 @@ export function useFullTexts({ event_id }: { event_id?: string }) {
getFullTextsData({
event_id: event_id || "",
organizers,
- allOrganisations: data.organisations || [],
+ allOrganisations: organisations || [],
today,
}),
- enabled: !!event_id,
+ enabled: !!event_id && !isLoading,
});
return query;
}
diff --git a/frontend-nextjs/src/utility/useIsInViewPort.tsx b/frontend-nextjs/src/utility/useIsInViewPort.tsx
new file mode 100644
index 00000000..5e0326af
--- /dev/null
+++ b/frontend-nextjs/src/utility/useIsInViewPort.tsx
@@ -0,0 +1,32 @@
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+ type RefObject,
+} from 'react'
+
+export function useIsInViewport(ref: RefObject) {
+ const [isIntersecting, setIsIntersecting] = useState(false)
+
+ const observer = useMemo(() => {
+ if (typeof window === 'undefined') return
+ return new IntersectionObserver(([entry]) =>
+ setIsIntersecting(entry.isIntersecting),
+ )
+ }, [])
+
+ const cleanup = useCallback(() => {
+ if (!observer) return
+ observer.disconnect()
+ }, [observer])
+
+ useEffect(() => {
+ if (!ref.current || !observer) return cleanup
+ observer.observe(ref.current)
+
+ return () => cleanup
+ }, [ref, observer, cleanup])
+
+ return isIntersecting
+}
diff --git a/frontend-nextjs/src/utility/useMediaImpact.ts b/frontend-nextjs/src/utility/useMediaImpact.ts
index bbe9b1e3..c5c572d5 100644
--- a/frontend-nextjs/src/utility/useMediaImpact.ts
+++ b/frontend-nextjs/src/utility/useMediaImpact.ts
@@ -1,13 +1,12 @@
"use client";
import { useFiltersStore } from "@/providers/FiltersStoreProvider";
import { useQuery } from "@tanstack/react-query";
-import { format } from "./dateUtil";
import type { EventOrganizerSlugType } from "./eventsUtil";
import { getMediaImpactData } from "./mediaImpactUtil";
import type { TrendQueryProps } from "./mediaTrendUtil";
import { getStaleTime } from "./queryUtil";
import { today } from "./today";
-import useEvents from "./useEvents";
+import { useAllOrganisations } from "./useOrganisations";
import useQueryErrorToast from "./useQueryErrorToast";
function useMediaImpactData({
@@ -19,11 +18,11 @@ function useMediaImpactData({
trend_type: TrendQueryProps["trend_type"];
sentiment_target: TrendQueryProps["sentiment_target"];
}) {
- const { from, to, mediaSource } = useFiltersStore(
- ({ from, to, mediaSource }) => ({ from, to, mediaSource }),
- );
- const fromDateString = format(from, "yyyy-MM-dd");
- const toDateString = format(to, "yyyy-MM-dd");
+ const from = useFiltersStore(({ from }) => from);
+ const to = useFiltersStore(({ to }) => to);
+ const mediaSource = useFiltersStore(({ mediaSource }) => mediaSource);
+ const fromDateString = useFiltersStore(({ fromDateString }) => fromDateString);
+ const toDateString = useFiltersStore(({ toDateString }) => toDateString);
const queryKey = [
"mediaImpact",
trend_type,
@@ -33,7 +32,7 @@ function useMediaImpactData({
toDateString,
mediaSource,
];
- const { data } = useEvents();
+ const { organisations, isLoading } = useAllOrganisations();
const query = useQuery({
queryKey,
queryFn: async () => {
@@ -47,11 +46,11 @@ function useMediaImpactData({
organizer,
mediaSource,
},
- allOrganisations: data?.organisations || [],
+ allOrganisations: organisations || [],
});
},
staleTime: getStaleTime(today),
- enabled: organizer !== undefined && data?.organisations?.length > 0,
+ enabled: organizer !== undefined && organisations?.length > 0 && !isLoading,
});
useQueryErrorToast(`media ${trend_type} impact`, query.error);
diff --git a/frontend-nextjs/src/utility/useMediaTrends.ts b/frontend-nextjs/src/utility/useMediaTrends.ts
index 57feab6f..f8b728ef 100644
--- a/frontend-nextjs/src/utility/useMediaTrends.ts
+++ b/frontend-nextjs/src/utility/useMediaTrends.ts
@@ -2,12 +2,10 @@
import { useFiltersStore } from "@/providers/FiltersStoreProvider";
import { useToday } from "@/providers/TodayProvider";
import { useQuery } from "@tanstack/react-query";
-import { useMemo } from "react";
import slugify from "slugify";
-import { format } from "./dateUtil";
import { type TrendQueryProps, getMediaTrendData } from "./mediaTrendUtil";
import { getStaleTime } from "./queryUtil";
-import useEvents from "./useEvents";
+import { useAllOrganisations } from "./useOrganisations";
import useQueryErrorToast from "./useQueryErrorToast";
function useMediaTrends({
@@ -17,25 +15,20 @@ function useMediaTrends({
}: Pick & {
enabled?: boolean;
}) {
- const { from, to, organizers, mediaSource } = useFiltersStore(
- ({ from, to, organizers, mediaSource }) => ({
- from,
- to,
- organizers,
- mediaSource,
- }),
- );
- const fromDateString = format(from, "yyyy-MM-dd");
- const toDateString = format(to, "yyyy-MM-dd");
- const organizersKey = useMemo(
- () =>
+ const from = useFiltersStore(({ from }) => from);
+ const to = useFiltersStore(({ to }) => to);
+ const organizers = useFiltersStore(({ organizers }) => organizers);
+ const mediaSource = useFiltersStore(({ mediaSource }) => mediaSource);
+ const fromDateString = useFiltersStore(({ fromDateString }) => fromDateString);
+ const toDateString = useFiltersStore(({ toDateString }) => toDateString);
+ const organizersKey = useFiltersStore(
+ ({ organizers }) =>
organizers
.map((o) => slugify(o, { lower: true, strict: true }))
.sort()
.join("-"),
- [organizers],
);
- const { data } = useEvents();
+ const { organisations, isLoading } = useAllOrganisations();
const { today } = useToday();
const queryKey = [
"mediaTrends",
@@ -59,12 +52,12 @@ function useMediaTrends({
organizers,
mediaSource,
},
- allOrganisations: data.organisations || [],
+ allOrganisations: organisations || [],
},
today,
),
staleTime: getStaleTime(today),
- enabled,
+ enabled: enabled && !isLoading,
});
useQueryErrorToast(`media ${trend_type} trends`, query.error);
diff --git a/frontend-nextjs/src/utility/useOrganisations.ts b/frontend-nextjs/src/utility/useOrganisations.ts
index c01cfdee..326cc666 100644
--- a/frontend-nextjs/src/utility/useOrganisations.ts
+++ b/frontend-nextjs/src/utility/useOrganisations.ts
@@ -1,27 +1,92 @@
-import { parse, startOfDay } from "date-fns";
-import type { EventOrganizerSlugType } from "./eventsUtil";
-import { today } from "./today";
-import useEvents from "./useEvents";
-
-export function useOrganisations() {
- const { data, isPending } = useEvents({
- from: startOfDay(parse("01-01-2020", "dd-MM-yyyy", today)),
- to: today,
+import { useFiltersStore } from "@/providers/FiltersStoreProvider";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { extractEventOrganisations, type EventOrganizerSlugType } from "./eventsUtil";
+import { useAllEvents, useFilteredEvents } from "./useEvents";
+
+export function useAllOrganisations() {
+ const { allEvents, isLoading } = useAllEvents();
+
+ const query = useQuery({
+ queryKey: ["organisations"],
+ queryFn: () => {
+ if (!allEvents || allEvents.length === 0) return [];
+ return extractEventOrganisations(allEvents);
+ },
+ enabled: !isLoading && allEvents.length > 0,
});
return {
- organisations: data?.organisations ?? [],
- isPending,
- };
+ ...query,
+ organisations: query.data ?? [],
+ }
+}
+
+export function useFilteredEventsOrganisations() {
+ const { filteredEvents, isLoading } = useFilteredEvents();
+ const organizersKey = useOrganizersKey();
+ const fromDateString = useFiltersStore(({ fromDateString }) => fromDateString);
+ const toDateString = useFiltersStore(({ toDateString }) => toDateString);
+ const organizers = useFiltersStore(({ organizers }) => organizers);
+
+ const query = useQuery({
+ queryKey: ["filteredEventsOrganisations", organizersKey, fromDateString, toDateString],
+ queryFn: () => {
+ if (!filteredEvents || filteredEvents.length === 0) return [];
+ const events = organizers.length === 0 ? filteredEvents : filteredEvents.filter(
+ (event) => event.organizers.find((org) => organizers.includes(org.slug))
+ )
+ return extractEventOrganisations(events)
+ },
+ enabled: !isLoading && filteredEvents.length > 0,
+ })
+
+ return {
+ ...query,
+ filteredEventsOrganisations: query.data ?? [],
+ }
+}
+
+export function useOrganizersKey() {
+ const organizers = useFiltersStore(({ organizers }) => organizers);
+ const organisersKey = useMemo(() => organizers.sort().join('-'), [organizers])
+ return organisersKey
+}
+
+export function useSelectedOrganisations() {
+ const { organisations, isLoading } = useAllOrganisations();
+ const organizers = useFiltersStore(({ organizers }) => organizers);
+ const organizersKey = useOrganizersKey();
+
+ const query = useQuery({
+ queryKey: ["selectedOrganisations", organizersKey],
+ queryFn: () => {
+ if (organizers.length === 0) return organisations;
+ const selectedOrs = organisations.filter((org) =>
+ organizers.find((o) => o === org.slug),
+ );
+ return selectedOrs.length === 0 ? organisations : selectedOrs;
+ },
+ enabled: !isLoading && organisations.length > 0,
+ })
+
+ return {
+ ...query,
+ selectedOrganisations: query.data ?? [],
+ }
}
export function useOrganisation(slug: EventOrganizerSlugType | undefined) {
- const { organisations, isPending } = useOrganisations();
+ const { organisations, isLoading } = useAllOrganisations();
+
+ const query = useQuery({
+ queryKey: ["organisations", slug],
+ queryFn: () => slug ? organisations.find(({ slug: s }) => s === slug) : undefined,
+ enabled: !!slug && !isLoading && organisations.length > 0,
+ });
return {
- organisation: slug
- ? organisations.find(({ slug: s }) => s === slug)
- : undefined,
- isPending,
+ ...query,
+ organisation: query.data,
};
}
diff --git a/frontend-nextjs/src/utility/useTimeIntervals.ts b/frontend-nextjs/src/utility/useTimeIntervals.ts
index 9c5747b5..1be6f783 100644
--- a/frontend-nextjs/src/utility/useTimeIntervals.ts
+++ b/frontend-nextjs/src/utility/useTimeIntervals.ts
@@ -1,6 +1,7 @@
-import type { AggregationUnitType } from "@/components/EventsTimeline/useAggregationUnit";
-import { useFiltersStore } from "@/providers/FiltersStoreProvider";
-import { useToday } from "@/providers/TodayProvider";
+import type { AggregationUnitType } from '@/components/EventsTimeline/useAggregationUnit'
+import { useFiltersStore } from '@/providers/FiltersStoreProvider'
+import { useToday } from '@/providers/TodayProvider'
+import { useQuery } from '@tanstack/react-query'
import {
addDays,
addMonths,
@@ -17,111 +18,109 @@ import {
startOfDay,
startOfMonth,
startOfWeek,
- startOfYear
-} from "date-fns";
-import { useMemo } from "react";
+ startOfYear,
+} from 'date-fns'
import {
type ComparableDateItemType,
dateToComparableDateItem,
-} from "./comparableDateItemSchema";
-import { format } from "./dateUtil";
+} from './comparableDateItemSchema'
+import { format } from './dateUtil'
function useTimeIntervals({
from: inputFrom,
to: inputTo,
aggregationUnit,
}: {
- from?: Date;
- to?: Date;
- aggregationUnit: AggregationUnitType;
+ from?: Date
+ to?: Date
+ aggregationUnit: AggregationUnitType
}) {
- const filterStore = useFiltersStore(
- ({ from, to, fromDateString, toDateString }) => ({
- from,
- to,
- fromDateString,
- toDateString,
- }),
- );
- const from = inputFrom ?? filterStore.from;
- const to = inputTo ?? filterStore.to;
+ const filtersFrom = useFiltersStore(({ from }) => from)
+ const filtersTo = useFiltersStore(({ to }) => to)
+ const filtersFromDateString = useFiltersStore(({ fromDateString }) => fromDateString)
+ const filtersToDateString = useFiltersStore(({ toDateString }) => toDateString)
+
+ const from = inputFrom ?? filtersFrom
+ const to = inputTo ?? filtersTo
const fromDateString = inputFrom
- ? format(inputFrom, "yyyy-MM-dd")
- : filterStore.fromDateString;
+ ? format(inputFrom, 'yyyy-MM-dd')
+ : filtersFromDateString
const toDateString = inputTo
- ? format(inputTo, "yyyy-MM-dd")
- : filterStore.toDateString;
- const range = { from, to };
- const { today } = useToday();
+ ? format(inputTo, 'yyyy-MM-dd')
+ : filtersToDateString
+ const range = { from, to }
+ const { today } = useToday()
- const eventColumns = useMemo(() => {
- const { from, to } = range;
- if (!from || !to) return [];
- const timeComparatorFn =
- getTimeComparatorByAggregationUnit(aggregationUnit);
- const timeStartFn = getTimeStartByAggregationUnit(aggregationUnit);
- const timeIncrementerFn =
- getTimeIncrementerByAggregationUnit(aggregationUnit);
- const timeDiff = Math.abs(timeComparatorFn(to, from)) + 1;
- return new Array(timeDiff)
- .fill(null)
- .map((_, idx) =>
- dateToComparableDateItem(
- timeStartFn(timeIncrementerFn(from, idx)),
- today,
- ),
- );
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [fromDateString, toDateString, aggregationUnit]);
+ const intervalsQuery = useQuery({
+ queryKey: ['timeIntervals', fromDateString, toDateString, aggregationUnit],
+ queryFn: () => {
+ const { from, to } = range
+ if (!from || !to) return []
+ const timeComparatorFn =
+ getTimeComparatorByAggregationUnit(aggregationUnit)
+ const timeStartFn = getTimeStartByAggregationUnit(aggregationUnit)
+ const timeIncrementerFn =
+ getTimeIncrementerByAggregationUnit(aggregationUnit)
+ const timeDiff = Math.abs(timeComparatorFn(to, from)) + 1
+ return new Array(timeDiff)
+ .fill(null)
+ .map((_, idx) =>
+ dateToComparableDateItem(
+ timeStartFn(timeIncrementerFn(from, idx)),
+ today,
+ ),
+ )
+ },
+ })
- return eventColumns;
+ return intervalsQuery.data || []
}
-export default useTimeIntervals;
+export default useTimeIntervals
function getTimeComparatorByAggregationUnit(
aggregationUnit: AggregationUnitType,
) {
- if (aggregationUnit === "day") return differenceInDays;
- if (aggregationUnit === "week") return differenceInCalendarISOWeeks;
- if (aggregationUnit === "month") return differenceInCalendarMonths;
- return differenceInYears;
+ if (aggregationUnit === 'day') return differenceInDays
+ if (aggregationUnit === 'week') return differenceInCalendarISOWeeks
+ if (aggregationUnit === 'month') return differenceInCalendarMonths
+ return differenceInYears
}
function getTimeStartByAggregationUnit(aggregationUnit: AggregationUnitType) {
- if (aggregationUnit === "day") return startOfDay;
- if (aggregationUnit === "week")
- return (d: Date | string) => startOfWeek(d, { weekStartsOn: 1 });
- if (aggregationUnit === "month") return startOfMonth;
- return startOfYear;
+ if (aggregationUnit === 'day') return startOfDay
+ if (aggregationUnit === 'week')
+ return (d: Date | string) => startOfWeek(d, { weekStartsOn: 1 })
+ if (aggregationUnit === 'month') return startOfMonth
+ return startOfYear
}
function getTimeIncrementerByAggregationUnit(
aggregationUnit: AggregationUnitType,
) {
- if (aggregationUnit === "day") return addDays;
- if (aggregationUnit === "week") return addWeeks;
- if (aggregationUnit === "month") return addMonths;
- return addYears;
+ if (aggregationUnit === 'day') return addDays
+ if (aggregationUnit === 'week') return addWeeks
+ if (aggregationUnit === 'month') return addMonths
+ return addYears
}
export function getDateRangeByAggregationUnit({
aggregationUnit,
date,
}: {
- aggregationUnit: AggregationUnitType;
- date: Date;
+ aggregationUnit: AggregationUnitType
+ date: Date
}) {
- if (aggregationUnit === "week")
+ if (aggregationUnit === 'week')
return {
from: startOfWeek(date, { weekStartsOn: 1 }),
to: endOfWeek(date, { weekStartsOn: 1 }),
- };
- if (aggregationUnit === "month")
- return { from: startOfMonth(date), to: endOfMonth(date) };
- if (aggregationUnit === "year")
- return { from: startOfYear(date), to: endOfYear(date) };
- return { from: startOfDay(date), to: endOfDay(date) };
+ }
+ if (aggregationUnit === 'month')
+ return { from: startOfMonth(date), to: endOfMonth(date) }
+ if (aggregationUnit === 'year')
+ return { from: startOfYear(date), to: endOfYear(date) }
+ return { from: startOfDay(date), to: endOfDay(date) }
}
export function isInSameAggregationUnit(
@@ -129,12 +128,12 @@ export function isInSameAggregationUnit(
a: ComparableDateItemType,
b: ComparableDateItemType,
) {
- const isSameDay = a.day === b.day;
- const isSameWeek = a.week === b.week;
- const isSameMonth = a.month === b.month;
- const isSameYear = a.year === b.year;
- if (aggregationUnit === "day") return isSameYear && isSameMonth && isSameDay;
- if (aggregationUnit === "week") return isSameYear && isSameMonth && isSameWeek;
- if (aggregationUnit === "month") return isSameYear && isSameMonth;
+ const isSameDay = a.day === b.day
+ const isSameWeek = a.week === b.week
+ const isSameMonth = a.month === b.month
+ const isSameYear = a.year === b.year
+ if (aggregationUnit === 'day') return isSameYear && isSameMonth && isSameDay
+ if (aggregationUnit === 'week') return isSameYear && isSameMonth && isSameWeek
+ if (aggregationUnit === 'month') return isSameYear && isSameMonth
return isSameYear
}
diff --git a/frontend-nextjs/src/utility/useTimeScale.ts b/frontend-nextjs/src/utility/useTimeScale.ts
index e148239c..62fded70 100644
--- a/frontend-nextjs/src/utility/useTimeScale.ts
+++ b/frontend-nextjs/src/utility/useTimeScale.ts
@@ -3,10 +3,11 @@ import { scaleUtc } from "d3-scale";
import { useMemo } from "react";
function useTimeScale(width: number) {
- const range = useFiltersStore(({ from, to }) => ({ from, to }));
+ const from = useFiltersStore(({ from }) => from);
+ const to = useFiltersStore(({ to }) => to);
return useMemo(
- () => scaleUtc().domain([range.from, range.to]).rangeRound([0, width]),
- [range, width],
+ () => scaleUtc().domain([from, to]).rangeRound([0, width]),
+ [from, to, width],
);
}
diff --git a/frontend-nextjs/src/utility/useTopics.tsx b/frontend-nextjs/src/utility/useTopics.tsx
index c9360f21..384f28f0 100644
--- a/frontend-nextjs/src/utility/useTopics.tsx
+++ b/frontend-nextjs/src/utility/useTopics.tsx
@@ -1,90 +1,96 @@
import useAggregationUnit, {
formatDateByAggregationUnit,
-} from "@/components/EventsTimeline/useAggregationUnit";
-import { useCallback, useMemo } from "react";
-import type { ComparableDateItemType } from "./comparableDateItemSchema";
-import type { TrendQueryProps } from "./mediaTrendUtil";
-import { getTopicColor } from "./topicsUtil";
-import useMediaTrends from "./useMediaTrends";
-import useTimeIntervals, { isInSameAggregationUnit } from "./useTimeIntervals";
+} from '@/components/EventsTimeline/useAggregationUnit'
+import { useQuery } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
+import type { ComparableDateItemType } from './comparableDateItemSchema'
+import type { TrendQueryProps } from './mediaTrendUtil'
+import { getTopicColor } from './topicsUtil'
+import useMediaTrends from './useMediaTrends'
+import useTimeIntervals, { isInSameAggregationUnit } from './useTimeIntervals'
function useTopics({
containerWidth,
trend_type,
sentiment_target,
}: {
- containerWidth: number;
- trend_type: TrendQueryProps["trend_type"];
- sentiment_target: TrendQueryProps["sentiment_target"];
+ containerWidth: number
+ trend_type: TrendQueryProps['trend_type']
+ sentiment_target: TrendQueryProps['sentiment_target']
}) {
- const query = useMediaTrends({ trend_type, sentiment_target });
- const data = useMemo(() => query.data?.trends || [], [query.data?.trends]);
+ const query = useMediaTrends({ trend_type, sentiment_target })
+ const data = useMemo(() => query.data?.trends || [], [query.data?.trends])
- const aggregationUnit = useAggregationUnit(containerWidth);
- const intervals = useTimeIntervals({ aggregationUnit });
+ const aggregationUnit = useAggregationUnit(containerWidth)
+ const intervals = useTimeIntervals({ aggregationUnit })
const isInSameUnit = useCallback(
- (comparableDateItem: ComparableDateItemType, date: ComparableDateItemType) =>
- isInSameAggregationUnit(aggregationUnit, comparableDateItem, date),
+ (
+ comparableDateItem: ComparableDateItemType,
+ date: ComparableDateItemType,
+ ) => isInSameAggregationUnit(aggregationUnit, comparableDateItem, date),
[aggregationUnit],
- );
+ )
- const { filteredData, topics } = useMemo(() => {
- const allTopics = Array.from(
- data
- .reduce((acc, day) => {
- acc.add(day.topic);
- return acc;
- }, new Set())
- .values(),
- );
- const filteredData = intervals.map((comparableDateObject) => {
- const daysInUnit = data.filter((day) =>
- isInSameUnit(comparableDateObject, day),
- );
- return allTopics.reduce(
- (acc, topic) => {
- const itemsWithTopics = daysInUnit.filter(
- (day) => day.topic === topic,
- );
- const sum = itemsWithTopics.reduce(
- (acc, day) => acc + (day.n_articles || 0),
- 0,
- );
- acc[topic] = sum;
- return acc;
- },
- {
- comparableDateObject: comparableDateObject,
- dateFormatted: formatDateByAggregationUnit(
- comparableDateObject.date,
- aggregationUnit,
- ),
- } as {
- comparableDateObject: ComparableDateItemType;
- dateFormatted: string;
- } & {
- [key: string]: number;
- },
- );
- });
- return {
- topics: allTopics.sort().map((topic) => ({
- topic,
- color: getTopicColor(topic),
- sum: filteredData.reduce((acc, day) => acc + day[topic], 0),
- })),
- filteredData,
- };
- }, [data, intervals, isInSameUnit, aggregationUnit]);
+ const topicsQuery = useQuery({
+ queryKey: ['topics', data, intervals, isInSameUnit, aggregationUnit],
+ queryFn: () => {
+ const allTopics = Array.from(
+ data
+ .reduce((acc, day) => {
+ acc.add(day.topic)
+ return acc
+ }, new Set())
+ .values(),
+ )
+ const filteredData = intervals.map((comparableDateObject) => {
+ const daysInUnit = data.filter((day) =>
+ isInSameUnit(comparableDateObject, day),
+ )
+ return allTopics.reduce(
+ (acc, topic) => {
+ const itemsWithTopics = daysInUnit.filter(
+ (day) => day.topic === topic,
+ )
+ const sum = itemsWithTopics.reduce(
+ (acc, day) => acc + (day.n_articles || 0),
+ 0,
+ )
+ acc[topic] = sum
+ return acc
+ },
+ {
+ comparableDateObject: comparableDateObject,
+ dateFormatted: formatDateByAggregationUnit(
+ comparableDateObject.date,
+ aggregationUnit,
+ ),
+ } as {
+ comparableDateObject: ComparableDateItemType
+ dateFormatted: string
+ } & {
+ [key: string]: number
+ },
+ )
+ })
+ return {
+ topics: allTopics.sort().map((topic) => ({
+ topic,
+ color: getTopicColor(topic),
+ sum: filteredData.reduce((acc, day) => acc + day[topic], 0),
+ })),
+ filteredData,
+ }
+ },
+ })
return {
applicability: query.data?.applicability ?? true,
limitations: query.data?.limitations ?? [],
- topics,
- filteredData,
+ topics: topicsQuery.data?.topics || [],
+ filteredData: topicsQuery.data?.filteredData || [],
aggregationUnit,
- };
+ }
}
-export default useTopics;
+export default useTopics
diff --git a/notebooks/2024-08-29-david-event-coverage.ipynb b/notebooks/2024-08-29-david-event-coverage.ipynb
new file mode 100644
index 00000000..bb7fff53
--- /dev/null
+++ b/notebooks/2024-08-29-david-event-coverage.ipynb
@@ -0,0 +1,114 @@
+{
+ "cells": [
+ {
+ "cell_type": "code",
+ "execution_count": 1,
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "from media_impact_monitor.events import get_events, EventSearch\n",
+ "from media_impact_monitor.fulltexts import get_fulltexts, FulltextSearch\n",
+ "from datetime import date\n",
+ "from tqdm.auto import tqdm\n",
+ "import pandas as pd\n",
+ "import matplotlib.pyplot as plt\n",
+ "\n",
+ "events = get_events(\n",
+ " EventSearch(source=\"acled\", start_date=date(2024, 4, 1), end_date=date(2024, 6, 30))\n",
+ ")\n",
+ "events = events.sample(200, random_state=0)\n"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 2,
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "application/vnd.jupyter.widget-view+json": {
+ "model_id": "b5647fc6b3094603bfb09bc6c088b0f4",
+ "version_major": 2,
+ "version_minor": 0
+ },
+ "text/plain": [
+ " 0%| | 0/200 [00:00"
+ ]
+ },
+ "metadata": {},
+ "output_type": "display_data"
+ }
+ ],
+ "source": [
+ "mean_articles = {\n",
+ " org: events[events.organizers.apply(lambda x: org in x)].fulltexts.mean()\n",
+ " for org in events[\"organizers\"].explode().unique()\n",
+ "}\n",
+ "mean_articles = pd.Series(mean_articles)\n",
+ "mean_articles = mean_articles.sort_values(ascending=True)\n",
+ "mean_articles.plot(kind=\"barh\", figsize=(10, 10))\n",
+ "plt.show()\n"
+ ]
+ }
+ ],
+ "metadata": {
+ "kernelspec": {
+ "display_name": ".venv",
+ "language": "python",
+ "name": "python3"
+ },
+ "language_info": {
+ "codemirror_mode": {
+ "name": "ipython",
+ "version": 3
+ },
+ "file_extension": ".py",
+ "mimetype": "text/x-python",
+ "name": "python",
+ "nbconvert_exporter": "python",
+ "pygments_lexer": "ipython3",
+ "version": "3.10.14"
+ }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
{fromNode} to {toNode}. @@ -380,7 +388,10 @@ const textsEnGB = { tooltipNotice: ({ percentageNode, organisationNode, - }: { percentageNode: ReactNode; organisationNode: ReactNode }) => ( + }: { + percentageNode: ReactNode + organisationNode: ReactNode + }) => ( <> Only {percentageNode} of protests from {organisationNode} are within the selected timeframe. Select a longer timeframe to get a @@ -391,35 +402,35 @@ const textsEnGB = { }, }, protest_timeline: { - heading: "What protests are happening?", + heading: 'What protests are happening?', description: [ - "See protests over time for all of the selected organisations.", - "Hover or click on the bubbles for more information on individual protest events.", - "Currently, we only cover climate protests in Germany since 2020.", + 'See protests over time for all of the selected organisations.', + 'Hover or click on the bubbles for more information on individual protest events.', + 'Currently, we only cover climate protests in Germany since 2020.', ], data_credit: [ { - label: "Protest data", + label: 'Protest data', links: [ { - text: "Armed Conflict Location & Event Data Project (ACLED)", - url: "https://acleddata.com/", + text: 'Armed Conflict Location & Event Data Project (ACLED)', + url: 'https://acleddata.com/', }, ], }, ], legend: { - size: "Size", + size: 'Size', participants: { - day: "Protest participants", - week: "Weekly participants", - month: "Monthly participants", - year: "Yearly participants", + day: 'Protest participants', + week: 'Weekly participants', + month: 'Monthly participants', + year: 'Yearly participants', }, - zeroOrUnknown: "0 or unknown", - color: "Color", - organisations: "Organisations", - other: "Other", + zeroOrUnknown: '0 or unknown', + color: 'Color', + organisations: 'Organisations', + other: 'Other', }, tooltips: { aggregated: ({ @@ -429,45 +440,45 @@ const textsEnGB = { participantCount, orgsCount, }: { - timeUnitLabel: string; - timeValue: string; - protestCount: number; - participantCount: number | undefined; - orgsCount: number; + timeUnitLabel: string + timeValue: string + protestCount: number + participantCount: number | undefined + orgsCount: number }) => ( <> - The {timeUnitLabel} of {timeValue} saw a total of{" "} + The {timeUnitLabel} of {timeValue} saw a total of{' '} - {protestCount.toLocaleString("en-GB")} protest - {protestCount > 1 && "s"} + {protestCount.toLocaleString('en-GB')} protest + {protestCount > 1 && 's'} {participantCount && ( <> - , comprising of{" "} + , comprising of{' '} - {participantCount.toLocaleString("en-GB")} participant - {participantCount > 1 && "s"} + {participantCount.toLocaleString('en-GB')} participant + {participantCount > 1 && 's'} )} - {`, and ${protestCount > 1 ? "were" : "was"} organized by the following organisation${orgsCount > 1 ? "s" : ""}:`} + {`, and ${protestCount > 1 ? 'were' : 'was'} organized by the following organisation${orgsCount > 1 ? 's' : ''}:`} ), }, }, topics_trend: { - heading: "What topics are the focus of public discourse?", + heading: 'What topics are the focus of public discourse?', description: [ - "See how many articles are published on various topics over time.", - "Use the filters to switch between online newspaper articles, print newspaper articles, and queries that people search for on Google.", + 'See how many articles are published on various topics over time.', + 'Use the filters to switch between online newspaper articles, print newspaper articles, and queries that people search for on Google.', ], data_credit: [ { - label: "Media data", + label: 'Media data', links: [ { - text: "MediaCloud", - url: "https://mediacloud.org/", + text: 'MediaCloud', + url: 'https://mediacloud.org/', }, ], }, @@ -475,87 +486,86 @@ const textsEnGB = { }, topics_impact: { - heading: "Computed impacts", + heading: 'Computed impacts', description: - "See how a protest by an organisation influences the publication of articles about climate change (by topics).", + 'See how a protest by an organisation influences the publication of articles about climate change (by topics).', }, sentiment_protest: { - heading: "What sentiment does the media show towards the protests?", + heading: 'What sentiment does the media show towards the protests?', description: [ "See whether the media's coverage of the protests is more positive, negative, or neutral.", ], data_credit: [ { - label: "Media data", + label: 'Media data', links: [ { - text: "MediaCloud", - url: "https://mediacloud.org/", + text: 'MediaCloud', + url: 'https://mediacloud.org/', }, ], }, ], }, sentiment_protest_impact: { - heading: "Computed impacts", + heading: 'Computed impacts', description: - "See how a protest by an organisation influences the publication of articles about climate activism (by sentiment).", + 'See how a protest by an organisation influences the publication of articles about climate activism (by sentiment).', }, sentiment_policy: { heading: - "What stance does the media have towards progressive climate policies?", + 'What stance does the media have towards progressive climate policies?', description: [ - "See whether the media supports or opposes policies aimed at mitigating climate change.", + 'See whether the media supports or opposes policies aimed at mitigating climate change.', ], data_credit: [ { - label: "Media data", + label: 'Media data', links: [ { - text: "MediaCloud", - url: "https://mediacloud.org/", + text: 'MediaCloud', + url: 'https://mediacloud.org/', }, ], }, ], }, sentiment_policy_impact: { - heading: "Computed impacts", + heading: 'Computed impacts', description: - "See how a protest by an organisation influences the publication of articles about climate policies (by sentiment).", + 'See how a protest by an organisation influences the publication of articles about climate policies (by sentiment).', }, }, organisationsPage: { - heading: "Organisations Overview", + heading: 'Organisations Overview', description: ({ isSameDay, formattedFrom, formattedTo, orgsCount, }: { - isSameDay: boolean; - formattedFrom: string; - formattedTo: string; - orgsCount: number; + isSameDay: boolean + formattedFrom: string + formattedTo: string + orgsCount: number }) => { const formattedDate = isSameDay ? `on ${formattedFrom}` - : `between ${formattedFrom} and ${formattedTo}`; + : `between ${formattedFrom} and ${formattedTo}` const organisersCount = orgsCount > 0 - ? `the ${orgsCount} selected organisation${orgsCount > 1 ? "s" : ""}` - : "all organisations"; - return `An overview of ${organisersCount} with protests ${formattedDate}. You can use the filters above to change the date range or select specific organisations.`; + ? `the ${orgsCount} selected organisation${orgsCount > 1 ? 's' : ''}` + : 'all organisations' + return `An overview of ${organisersCount} with protests ${formattedDate}. You can use the filters above to change the date range or select specific organisations.` }, - allOrganisations: "All organisations", - showPartnersAriaLabel: "Show partners tooltip", + allOrganisations: 'All organisations', + showPartnersAriaLabel: 'Show partners tooltip', propertyNames: { - name: "Name", - totalEvents: "Total Events", - totalParticipants: "Total Participants", - avgParticipants: "Avg. Participants", - avgPartners: "Avg. Partners", - totalPartners: "Total Partners", + name: 'Name', + totalEvents: 'Total Events', + totalParticipants: 'Total Participants', + avgParticipants: 'Avg. Participants', + totalPartners: 'Partners', }, }, singleProtestPage: { @@ -564,280 +574,283 @@ const textsEnGB = { orgsCount, orgName, }: { - formattedDate: string; - orgsCount: number; - orgName: string; + formattedDate: string + orgsCount: number + orgName: string }) => cn( `Protest on ${formattedDate}`, - orgsCount > 1 && "multiple organisations", + orgsCount > 1 && 'multiple organisations', orgsCount === 1 && orgName, ), propertyNames: { - city: "City", - country: "Country", - organisations: "Organisations", + city: 'City', + country: 'Country', + organisations: 'Organisations', }, table: { - heading: "Protest Articles", - description: "See which articles mention the protest", + heading: 'Protest Articles', + description: 'See which articles mention the protest', header: { - title: "Title", - summary: "Summary", - date: "Date", - url: "URL", - sentimentActivism: "Sent. Activism", - sentimentPolicy: "Sent. Policy", + title: 'Title', + summary: 'Summary', + date: 'Date', + url: 'URL', + sentimentActivism: 'Sent. Activism', + sentimentPolicy: 'Sent. Policy', }, }, charts: { - heading: "Protest Timeline of Sentiment", + heading: 'Protest Timeline of Sentiment', description: - "See the sentiment towards activism of articles related to the protest", + 'See the sentiment towards activism of articles related to the protest', sentimentTowards: ({ topicNode }: { topicNode: ReactNode }) => ( <>Sentiment towards {topicNode} ), }, }, docsPage: { - documentation: "Documentation", - nextPage: "Next page", - prevPage: "Previous page", - contents: "Contents", - onThisPage: "On this page", - tocAriaLabel: "Table of contents of the documentation", - tocButtonText: "Contents", - tocNoContentsFound: "No headings found on this page.", + documentation: 'Documentation', + nextPage: 'Next page', + prevPage: 'Previous page', + contents: 'Contents', + onThisPage: 'On this page', + tocAriaLabel: 'Table of contents of the documentation', + tocButtonText: 'Contents', + tocNoContentsFound: 'No headings found on this page.', }, -}; +} const textsXXX = { - language: "XXX", + language: 'XXX', seo: { - siteTitle: "XXX", - siteDescription: "XXX", + siteTitle: 'XXX', + siteDescription: 'XXX', }, mainNavigation: { - home: "XXX", - dashboard: "XXX", - organisations: "XXX", - about: "XXX", - docs: "XXX", - fourOFour: "XXX", - logoAssets: "XXX", + home: 'XXX', + dashboard: 'XXX', + organisations: 'XXX', + about: 'XXX', + docs: 'XXX', + fourOFour: 'XXX', + logoAssets: 'XXX', themeToggle: { - light: "XXX", - dark: "XXX", - system: "XXX", - toggleText: "XXX", + light: 'XXX', + dark: 'XXX', + system: 'XXX', + toggleText: 'XXX', }, }, fourOFour: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', }, errors: { - heading: "XXX", + heading: 'XXX', buttons: { - tryAgain: "XXX", - resetFilters: "XXX", + tryAgain: 'XXX', + resetFilters: 'XXX', }, errorLoadingChartData: ( - { chartName = "XXX" }: { chartName?: string } = { chartName: "XXX" }, + { chartName = 'XXX' }: { chartName?: string } = { chartName: 'XXX' }, ) => `XXX ${chartName} XXX`, apiErrorTranslations: { defaultMessage: ( - { datasetName = "XXX" }: { datasetName?: string } = { - datasetName: "XXX", + { datasetName = 'XXX' }: { datasetName?: string } = { + datasetName: 'XXX', }, ) => `XXX ${datasetName}. XXX.`, ApiFetchError: ( - { datasetName = "XXX" }: { datasetName?: string } = { - datasetName: "XXX", + { datasetName = 'XXX' }: { datasetName?: string } = { + datasetName: 'XXX', }, ) => `XXX`, ZodError: ( - { datasetName = "XXX" }: { datasetName?: string } = { - datasetName: "XXX", + { datasetName = 'XXX' }: { datasetName?: string } = { + datasetName: 'XXX', }, ) => `XXX ${datasetName} XXX`, - "An error has occured: 500": ( - { datasetName = "data" }: { datasetName?: string } = { - datasetName: "data", + 'An error has occured: 500': ( + { datasetName = 'data' }: { datasetName?: string } = { + datasetName: 'data', }, - ) => "XXX", + ) => 'XXX', }, }, footer: { links: { - logoAssets: "XXX", - gitHub: "XXX", - appStatus: "XXX", + logoAssets: 'XXX', + gitHub: 'XXX', + appStatus: 'XXX', }, - copyRightOwner: "XXX", - hostedBy: "XXX", - sponsoredBy: "XXX", + copyRightOwner: 'XXX', + hostedBy: 'XXX', + sponsoredBy: 'XXX', }, homepage: { hero: { - heading: "XXX", - text: ["XXX", "XXX"], + heading: 'XXX', + text: ['XXX', 'XXX'], buttons: { - goToDashboard: "XXX", - about: "XXX", - docs: "XXX", + goToDashboard: 'XXX', + about: 'XXX', + docs: 'XXX', }, newsletterCallout: { - heading: "XXX", + heading: 'XXX', }, backgroundImage: { - lightAlt: "XXX", - darkAlt: "XXX", + lightAlt: 'XXX', + darkAlt: 'XXX', }, }, }, newsLetterSection: { - heading: "XXX", - screenshotLightAlt: "XXX", - screenshotDarkAlt: "XXX", - invalidEmail: "XXX", - inputLabel: "XXX", - inputPlaceholder: "XXX", - submitButton: "XXX", + heading: 'XXX', + screenshotLightAlt: 'XXX', + screenshotDarkAlt: 'XXX', + invalidEmail: 'XXX', + inputLabel: 'XXX', + inputPlaceholder: 'XXX', + submitButton: 'XXX', }, uiCommon: { - showMore: "XXX", - showLess: "XXX", - nextPageAriaLabel: "XXX", - prevPageAriaLabel: "XXX", + showMore: 'XXX', + showLess: 'XXX', + nextPageAriaLabel: 'XXX', + prevPageAriaLabel: 'XXX', }, filters: { mediaSource: { - label: "XXX", - fieldPlaceholder: "XXX", + label: 'XXX', + fieldPlaceholder: 'XXX', values: { onlineNews: { - name: "XXX", - description: "XXX", + name: 'XXX', + description: 'XXX', links: [ { - label: "XXX", - href: "XXX", + label: 'XXX', + href: 'XXX', }, ], }, printNews: { - name: "XXX", - description: "XXX", + name: 'XXX', + description: 'XXX', links: [ { - label: "XXX", - href: "XXX", + label: 'XXX', + href: 'XXX', }, { - label: "XXX", - href: "XXX", + label: 'XXX', + href: 'XXX', }, ], }, googleTrends: { - name: "XXX", - description: "XXX", + name: 'XXX', + description: 'XXX', links: [ { - label: "XXX", - href: "XXX", + label: 'XXX', + href: 'XXX', }, ], }, }, }, organisations: { - label: "XXX", - selectOrganisation: "XXX", - noOrganisationsFound: "XXX", - toggleAllNone: "XXX", - unknownOrganisation: "XXX", + label: 'XXX', + selectOrganisation: 'XXX', + noOrganisationsFound: 'XXX', + toggleAllNone: 'XXX', + unknownOrganisation: 'XXX', }, timeRange: { - label: "XXX", - presets: "XXX", - last6MonthsLong: "XXX", - last6MonthsShort: "XXX", - last12MonthsLong: "XXX", - last12MonthsShort: "XXX", - last30DaysLong: "XXX", - last30DaysShort: "XXX", + label: 'XXX', + presets: 'XXX', + last6MonthsLong: 'XXX', + last6MonthsShort: 'XXX', + last12MonthsLong: 'XXX', + last12MonthsShort: 'XXX', + last30DaysLong: 'XXX', + last30DaysShort: 'XXX', buttons: { - apply: "XXX", - cancel: "XXX", - resetDefaults: "XXX", + apply: 'XXX', + cancel: 'XXX', + resetDefaults: 'XXX', }, }, }, info: { welcome_message: { - heading: "XXX", - description: ["XXX", "XXX"], + heading: 'XXX', + description: ['XXX', 'XXX'], buttons: { - cta: "XXX", - docs: "XXX", - whatIsThis: "XXX", + cta: 'XXX', + docs: 'XXX', + whatIsThis: 'XXX', }, arrowHints: { - setYourFilters: "XXX", - scrollDown: "XXX", + setYourFilters: 'XXX', + scrollDown: 'XXX', }, }, }, charts: { help: { - howToReadThis: "XXX", - readInTheDocs: "XXX", + howToReadThis: 'XXX', + readInTheDocs: 'XXX', tabs: { - info: "XXX", - methodology: "XXX", - data: "XXX", + info: 'XXX', + methodology: 'XXX', + data: 'XXX', }, }, common: { - legend: "XXX", - articlesUnit: "XXX", - total: "XXX", - dataCredit: "XXX", - loading: "XXX...", + legend: 'XXX', + articlesUnit: 'XXX', + total: 'XXX', + dataCredit: 'XXX', + loading: 'XXX...', cantShowThisChart: { - heading: "XXX", - text: "XXX", + heading: 'XXX', + text: 'XXX', limitationTranslations: { // CAUTION: The text below is the the original message from the API // used as s key to translate it. Only change the value on the right // of the colon ":" - "Sentiment trend requires fulltext analysis, which is only available for news_online, not web_google.": `XXX`, - "Sentiment trend requires fulltext analysis, which is only available for news_online, not news_print.": `XXX`, + 'Sentiment trend requires fulltext analysis, which is only available for news_online, not web_google.': `XXX`, + 'Sentiment trend requires fulltext analysis, which is only available for news_online, not news_print.': `XXX`, }, }, }, topics: { - positive: "XXX", - negative: "XXX", - neutral: "XXX", - "climate activism": "XXX", - "climate crisis framing": "XXX", - "climate policy": "XXX", - "climate science": "XXX", + positive: 'XXX', + negative: 'XXX', + neutral: 'XXX', + 'climate activism': 'XXX', + 'climate crisis framing': 'XXX', + 'climate policy': 'XXX', + 'climate science': 'XXX', }, aggregationUnit: { - day: "XXX", - week: "XXX", - month: "XXX", - year: "XXX", + day: 'XXX', + week: 'XXX', + month: 'XXX', + year: 'XXX', }, keywordsTooltip: { intro: ({ categoryNode, keywordsCount, - }: { categoryNode: ReactNode; keywordsCount: number | string }) => ( + }: { + categoryNode: ReactNode + keywordsCount: number | string + }) => ( <> XXX {categoryNode} XXX {keywordsCount} XXX @@ -859,19 +872,19 @@ const textsXXX = { }, impact: { buttons: { - computeImpacts: "XXX", - hideComputedImpacts: "XXX", + computeImpacts: 'XXX', + hideComputedImpacts: 'XXX', }, tooltips: { - upTo: "XXX", - downTo: "XXX", - atLeast: "XXX", - noImpact: "XXX", + upTo: 'XXX', + downTo: 'XXX', + atLeast: 'XXX', + noImpact: 'XXX', }, descriptions: { unclearChange: ({ isSentiment, topicNode }: ImpactDescriptionProps) => ( <> - XXX XXX XXX {isSentiment && <> {topicNode} } XXX{" "} + XXX XXX XXX {isSentiment && <> {topicNode} } XXX{' '} {topicNode} XXX ), @@ -883,50 +896,53 @@ const textsXXX = { mostBound, }: ImpactDescriptionProps) => ( <> - XXX {isIncreasing ? "XXX" : "XXX"} XXX{" "} - {isSentiment && <> {topicNode} } XXX {topicNode} XXX{" "} + XXX {isIncreasing ? 'XXX' : 'XXX'} XXX{' '} + {isSentiment && <> {topicNode} } XXX {topicNode} XXX{' '} {leastBound} XXX {mostBound} XXX ), noChange: ({ isSentiment, topicNode }: ImpactDescriptionProps) => ( <> - XXX XXX XXX {isSentiment && <> {topicNode} } XXX{" "} + XXX XXX XXX {isSentiment && <> {topicNode} } XXX{' '} {topicNode} XXX ), }, limitation: { - title: "XXX", + title: 'XXX', message: ({ organisationNode }: { organisationNode: ReactNode }) => ( <>XXX {organisationNode} XXX ), - widenYourFilters: "XXX", + widenYourFilters: 'XXX', limitationTranslations: { - "Not enough events to estimate impact.": "XXX", + 'Not enough events to estimate impact.': 'XXX', }, }, error: { - message: "XXX", - changeYourFilters: "XXX", + message: 'XXX', + changeYourFilters: 'XXX', }, introduction: { message: ({ organisationNode, selectedTimeFrameNode, }: { - organisationNode: ReactNode; - selectedTimeFrameNode: ReactNode; + organisationNode: ReactNode + selectedTimeFrameNode: ReactNode }) => ( <> XXX {organisationNode} XXX {selectedTimeFrameNode} ), selectedTimeFrame: { - label: "XXX", + label: 'XXX', tooltipMessage: ({ fromNode, toNode, - }: { fromNode: ReactNode; toNode: ReactNode }) => ( + }: { + fromNode: ReactNode + toNode: ReactNode + }) => ( <> XXX
{fromNode} XXX {toNode}. @@ -934,7 +950,10 @@ const textsXXX = { tooltipNotice: ({ percentageNode, organisationNode, - }: { percentageNode: ReactNode; organisationNode: ReactNode }) => ( + }: { + percentageNode: ReactNode + organisationNode: ReactNode + }) => ( <> XXX {percentageNode} XXX {organisationNode} XXX @@ -943,31 +962,31 @@ const textsXXX = { }, }, protest_timeline: { - heading: "XXX", - description: ["XXX", "XXX", "XXX"], + heading: 'XXX', + description: ['XXX', 'XXX', 'XXX'], data_credit: [ { - label: "XXX", + label: 'XXX', links: [ { - text: "XXX", - url: "XXX", + text: 'XXX', + url: 'XXX', }, ], }, ], legend: { - size: "XXX", + size: 'XXX', participants: { - day: "XXX", - week: "XXX", - month: "XXX", - year: "XXX", + day: 'XXX', + week: 'XXX', + month: 'XXX', + year: 'XXX', }, - zeroOrUnknown: "XXX", - color: "XXX", - organisations: "XXX", - other: "XXX", + zeroOrUnknown: 'XXX', + color: 'XXX', + organisations: 'XXX', + other: 'XXX', }, tooltips: { aggregated: ({ @@ -977,35 +996,35 @@ const textsXXX = { participantCount, orgsCount, }: { - timeUnitLabel: string; - timeValue: string; - protestCount: number; - participantCount: number | undefined; - orgsCount: number; + timeUnitLabel: string + timeValue: string + protestCount: number + participantCount: number | undefined + orgsCount: number }) => ( <> - XXX {timeValue} XXX{" "} - {protestCount.toLocaleString("en-GB")} XXX{" "} + XXX {timeValue} XXX{' '} + {protestCount.toLocaleString('en-GB')} XXX{' '} {participantCount && ( <> - XXX {participantCount.toLocaleString("en-GB")} XXX + XXX {participantCount.toLocaleString('en-GB')} XXX - )}{" "} - XXX {orgsCount > 1 ? "XXX" : "XXX"} XXX + )}{' '} + XXX {orgsCount > 1 ? 'XXX' : 'XXX'} XXX ), }, }, topics_trend: { - heading: "XXX", - description: ["XXX", "XXX"], + heading: 'XXX', + description: ['XXX', 'XXX'], data_credit: [ { - label: "XXX", + label: 'XXX', links: [ { - text: "XXX", - url: "XXX", + text: 'XXX', + url: 'XXX', }, ], }, @@ -1013,111 +1032,110 @@ const textsXXX = { }, topics_impact: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', }, sentiment_protest: { - heading: "XXX", - description: ["XXX"], + heading: 'XXX', + description: ['XXX'], data_credit: [ { - label: "XXX", + label: 'XXX', links: [ { - text: "XXX", - url: "XXX", + text: 'XXX', + url: 'XXX', }, ], }, ], }, sentiment_protest_impact: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', }, sentiment_policy: { - heading: "XXX", - description: ["XXX"], + heading: 'XXX', + description: ['XXX'], data_credit: [ { - label: "XXX", + label: 'XXX', links: [ { - text: "XXX", - url: "XXX", + text: 'XXX', + url: 'XXX', }, ], }, ], }, sentiment_policy_impact: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', }, }, organisationsPage: { - heading: "XXX", + heading: 'XXX', description: (props: { - isSameDay: boolean; - formattedFrom: string; - formattedTo: string; - orgsCount: number; + isSameDay: boolean + formattedFrom: string + formattedTo: string + orgsCount: number }) => { - return `XXX`; + return `XXX` }, - allOrganisations: "XXX", - showPartnersAriaLabel: "XXX", + allOrganisations: 'XXX', + showPartnersAriaLabel: 'XXX', propertyNames: { - name: "XXX", - totalEvents: "XXX", - totalParticipants: "XXX", - avgParticipants: "XXX", - avgPartners: "XXX", - totalPartners: "XXX", + name: 'XXX', + totalEvents: 'XXX', + totalParticipants: 'XXX', + avgParticipants: 'XXX', + totalPartners: 'XXX', }, }, singleProtestPage: { heading: (props: { - formattedDate: string; - orgsCount: number; - orgName: string; + formattedDate: string + orgsCount: number + orgName: string }) => `XXX`, propertyNames: { - city: "XXX", - country: "XXX", - organisations: "XXX", + city: 'XXX', + country: 'XXX', + organisations: 'XXX', }, table: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', header: { - title: "XXX", - summary: "XXX", - date: "XXX", - url: "XXX", - sentimentActivism: "XXX", - sentimentPolicy: "XXX", + title: 'XXX', + summary: 'XXX', + date: 'XXX', + url: 'XXX', + sentimentActivism: 'XXX', + sentimentPolicy: 'XXX', }, }, charts: { - heading: "XXX", - description: "XXX", + heading: 'XXX', + description: 'XXX', sentimentTowards: ({ topicNode }: { topicNode: ReactNode }) => ( <>XXX {topicNode} ), }, }, docsPage: { - documentation: "XXX", - nextPage: "XXX", - prevPage: "XXX", - contents: "XXX", - onThisPage: "XXX", - tocAriaLabel: "XXX", - tocButtonText: "XXX", - tocNoContentsFound: "XXX", + documentation: 'XXX', + nextPage: 'XXX', + prevPage: 'XXX', + contents: 'XXX', + onThisPage: 'XXX', + tocAriaLabel: 'XXX', + tocButtonText: 'XXX', + tocNoContentsFound: 'XXX', }, -} satisfies typeof textsEnGB; +} satisfies typeof textsEnGB -export const texts = textsEnGB; +export const texts = textsEnGB // export const texts = textsXXX; diff --git a/frontend-nextjs/src/utility/useEventMedia.ts b/frontend-nextjs/src/utility/useEventMedia.ts index 9dc13bb4..e2570762 100644 --- a/frontend-nextjs/src/utility/useEventMedia.ts +++ b/frontend-nextjs/src/utility/useEventMedia.ts @@ -9,11 +9,12 @@ import { import type { OrganisationType, ParsedEventType } from "./eventsUtil"; import { getStaleTime } from "./queryUtil"; import { today } from "./today"; -import useEvents from "./useEvents"; +import { useAllOrganisations } from "./useOrganisations"; import useQueryErrorToast from "./useQueryErrorToast"; -export function getEventMediaQueryOptions( +function getEventMediaQueryOptions( allOrganisations: OrganisationType[], + isLoading: boolean, query?: Partial