diff --git a/app/charts/area/chart-area.tsx b/app/charts/area/chart-area.tsx index ed602d6e9..6a485aafc 100644 --- a/app/charts/area/chart-area.tsx +++ b/app/charts/area/chart-area.tsx @@ -23,6 +23,7 @@ import { } from "@/graphql/query-hooks"; import { useLocale } from "@/locales/use-locale"; +import { Banner } from "../../components/banner"; import { ChartProps } from "../shared/ChartProps"; export const ChartAreasVisualization = ({ @@ -79,6 +80,7 @@ export const ChartAreas = memo((props: ChartProps) => { return ( + diff --git a/app/components/banner.tsx b/app/components/banner.tsx new file mode 100644 index 000000000..ab53c9512 --- /dev/null +++ b/app/components/banner.tsx @@ -0,0 +1,40 @@ +import { Trans } from "@lingui/react"; +import { Box } from "@mui/material"; +import { useMemo } from "react"; + +import { HintYellow } from "@/components/hint"; + +import { useChartState } from "../charts/shared/chart-state"; + +/** + * Banner to display errors or warnings for a chart. Each chart type can have specific warnings or errors depending on the data. + * Will only recalculate when the chart type changes. + */ +export const Banner = () => { + const state = useChartState(); + + const warning = useMemo(() => { + switch (state.chartType) { + case "area": + const someValueIsNegative = state.allData.some( + (d) => +(state.getY(d) || 0) < 0 + ); + if (someValueIsNegative) return ; + default: + return null; + } + }, [state]); + + return warning ? {warning} : null; +}; + +const NegativeValueWarning = () => ( + + + Careful, this dataset contains negative values and might not display + correctly with this chart type. +
+ Try using another chart type. +
+
+); diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index 4ba766e8f..214678730 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -998,6 +998,10 @@ msgstr "Titel" #: app/browser/dataset-preview.tsx #: app/components/chart-preview.tsx +#: app/components/banner.tsx +msgid "dataset.error.negative-values" +msgstr "Vorsicht, dieser Datensatz enthält negative Werte und wird möglicherweise nicht korrekt mit diesem Diagrammtyp angezeigt. <0/><1>Versuchen Sie, einen anderen Diagrammtyp zu verwenden." + #: app/components/chart-published.tsx msgid "dataset.publicationStatus.draft.warning" msgstr "Achtung, dieser Datensatz ist im Entwurfs-Stadium.<0/><1>Diese Grafik nicht für Berichte verwenden." diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index 188c93c92..a0954060a 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -998,6 +998,10 @@ msgstr "Title" #: app/browser/dataset-preview.tsx #: app/components/chart-preview.tsx +#: app/components/banner.tsx +msgid "dataset.error.negative-values" +msgstr "Careful, this dataset contains negative values and might not display correctly with this chart type. <0/><1>Try using another chart type." + #: app/components/chart-published.tsx msgid "dataset.publicationStatus.draft.warning" msgstr "Careful, this dataset is only a draft.<0/><1>Don't use for reporting!" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 1118f13e6..c08c5227c 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -998,6 +998,10 @@ msgstr "Titre" #: app/browser/dataset-preview.tsx #: app/components/chart-preview.tsx +#: app/components/banner.tsx +msgid "dataset.error.negative-values" +msgstr "Attention, cet ensemble de données contient des valeurs négatives et pourrait ne pas s'afficher correctement avec ce type de graphique. <0/><1>Essayez d'utiliser un autre type de graphique." + #: app/components/chart-published.tsx msgid "dataset.publicationStatus.draft.warning" msgstr "Attention, ce jeu de données est à l'état d'ébauche.<0/><1>Ne l'utilisez pas pour une publication!" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index 558b9730f..5c31289f9 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -998,6 +998,10 @@ msgstr "Titolo" #: app/browser/dataset-preview.tsx #: app/components/chart-preview.tsx +#: app/components/banner.tsx +msgid "dataset.error.negative-values" +msgstr "Attenzione, questo set di dati contiene valori negativi e potrebbe non essere visualizzato correttamente con questo tipo di grafico. <0/><1>Prova a utilizzare un altro tipo di grafico." + #: app/components/chart-published.tsx msgid "dataset.publicationStatus.draft.warning" msgstr "Attenzione, questo set di dati è una bozza.<0/><1>Non utilizzare questo grafico per un rapporto!"