refactor(components): ♻️ created a Banner component for displaying warnings or errors

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<AreaConfig>) => {
 
   return (
     <AreaChart aspectRatio={0.4} {...props}>
+      <Banner />
       <ChartContainer>
         <ChartSvg>
           <AxisTime /> <AxisHeightLinear />

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 <NegativeValueWarning />;
+      default:
+        return null;
+    }
+  }, [state]);
+
+  return warning ? <Box sx={{ mb: 4 }}>{warning}</Box> : null;
+};
+
+const NegativeValueWarning = () => (
+  <HintYellow iconName="datasetError" iconSize={64}>
+    <Trans id="dataset.error.negative-values">
+      Careful, this dataset contains negative values and might not display
+      correctly with this chart type.
+      <br />
+      <strong>Try using another chart type.</strong>
+    </Trans>
+  </HintYellow>
+);

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.</1>"
+
 #: 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.</1>"

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.</1>"
+
 #: 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!</1>"

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.</1>"
+
 #: 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!</1>"

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.</1>"
+
 #: 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!</1>"