feat(client): Add chart sentence

client/src/components/dataset-card/chart-sentence.tsx

@@ -0,0 +1,30 @@
+import { GeoJsonProperties } from "geojson";
+import { useMemo } from "react";
+
+interface ChartSentenceprops {
+  sentence: string;
+  feature?: GeoJsonProperties;
+}
+
+const ChartSentence = ({ sentence, feature }: ChartSentenceprops) => {
+  const resolvedSentence = useMemo(() => {
+    let res = `${sentence}`; // Creating a copy
+
+    if (!!feature) {
+      Object.entries(feature).forEach(([key, value]) => {
+        res = res.replace(`{${key}}`, value);
+      });
+    }
+
+    return res;
+  }, [sentence, feature]);
+
+  return (
+    <div className="flex items-start justify-start gap-4 pl-8 text-xs">
+      {!!feature && <div className="shrink-0 font-medium">Selected point</div>}
+      <div>{resolvedSentence}</div>
+    </div>
+  );
+};
+
+export default ChartSentence;

client/src/components/dataset-card/index.tsx

@@ -25,6 +25,7 @@ import useYearChartData from "@/hooks/use-year-chart-data";
 import CursorArrowRaysIcon from "@/svgs/cursor-arrow-rays.svg";
 import { DatasetLayersDataItem, MetadataItemComponent } from "@/types/generated/strapi.schemas";
 
+import ChartSentence from "./chart-sentence";
 import DateControls from "./date-controls";
 import DownloadChartButton from "./download-chart-button";
 import DownloadLayerButton from "./download-layer-button";
@@ -194,6 +195,16 @@ const DatasetCard = ({
     return `${name}${!showChartOnInteraction ? ` - ${locationData![0].name}` : ""}.json`;
   }, [isChartDownloadDisabled, locationData, name, showChartOnInteraction]);
 
+  const isInteractionChartVisible = useMemo(
+    () => showChartOnInteraction && selectedLayer !== undefined && !!selectedFeature,
+    [selectedFeature, selectedLayer, showChartOnInteraction],
+  );
+
+  const isYearChartVisible = useMemo(
+    () => selectedDate !== undefined && selectedLayerId !== undefined,
+    [selectedDate, selectedLayerId],
+  );
+
   const onToggleDataset = useCallback(
     (active: boolean) => {
       if (selectedLayerId === undefined) {
@@ -361,21 +372,32 @@ const DatasetCard = ({
             Select a point on the map for details.
           </div>
         )}
-        {showChartOnInteraction && selectedLayer !== undefined && !!selectedFeature && (
+        {isInteractionChartVisible && (
           <div className="mt-3">
             <InteractionChart data={interactionChartData} loading={interactionChartIsLoading} />
           </div>
         )}
-        {selectedDate !== undefined && selectedLayerId !== undefined && (
+        {isYearChartVisible && (
           <div className="mt-3">
             <YearChart
               data={yearChartData}
-              date={selectedDate}
+              date={selectedDate!}
               loading={yearChartIsLoading}
               active={isDatasetActive}
             />
           </div>
         )}
+        {isDatasetActive &&
+          (isInteractionChartVisible || isYearChartVisible) &&
+          selectedLayer !== undefined &&
+          !!selectedLayer.attributes!.chart_sentence && (
+            <div className="mt-0.5">
+              <ChartSentence
+                sentence={selectedLayer.attributes!.chart_sentence}
+                feature={selectedFeature}
+              />
+            </div>
+          )}
         {isDatasetActive && selectedLayer !== undefined && selectedDate !== undefined && (
           <DateControls layer={selectedLayer} date={selectedDate} onChangeDate={onChangeDate} />
         )}

client/src/components/panels/drought/index.tsx

@@ -8,7 +8,7 @@ import useDatasetsBySubTopic from "@/hooks/use-datasets-by-sub-topic";
 const DroughtPanel = () => {
   const { data, isLoading } = useDatasetsBySubTopic(
     "drought",
-    ["name", "params_config", "download_link", "show_chart_on_interaction"],
+    ["name", "params_config", "download_link", "show_chart_on_interaction", "chart_sentence"],
     true,
   );
 

client/src/components/panels/flood/index.tsx

@@ -8,7 +8,7 @@ import useDatasetsBySubTopic from "@/hooks/use-datasets-by-sub-topic";
 const FloodPanel = () => {
   const { data, isLoading } = useDatasetsBySubTopic(
     "flood",
-    ["name", "params_config", "download_link", "show_chart_on_interaction"],
+    ["name", "params_config", "download_link", "show_chart_on_interaction", "chart_sentence"],
     true,
   );
 

client/src/components/panels/hydrometeorological/index.tsx

@@ -9,7 +9,7 @@ import HydrometeorologicalImage from "../../../../public/assets/images/hydromete
 const HydrometeorologicalPanel = () => {
   const { data, isLoading } = useDatasetsBySubTopic(
     "hydrometeorological",
-    ["name", "params_config", "download_link", "show_chart_on_interaction"],
+    ["name", "params_config", "download_link", "show_chart_on_interaction", "chart_sentence"],
     true,
   );