Wm 50 fe adding texts and tooltips to the platform (#108)

* fe: updated content + fix hover on category card

* fe: update ranking widget styles

Author: atrincas

app-initial-data/indicators.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4d61f2ae5c9c35f5d6a4f631c6c915b772366ae40b7ef1b40a88a671cb9a31aa
-size 27395
+oid sha256:d137228d03c49a1846d2eb9ff5e2680b9bee27b1b87d41c885f784672589f3c3
+size 24134

app/src/components/chart/index.tsx

@@ -5,7 +5,12 @@ import { useTranslations } from "next-intl";
 import { IndicatorChartData } from "@/containers/indicators/types";
 
 import PieChart from "@/components/chart/pie";
-import { RankingChart, RankingChartSection } from "@/components/chart/ranking";
+import {
+  RankingChartLegend,
+  RankingChartList,
+  RankingChartSection,
+  RankingSection,
+} from "@/components/chart/ranking";
 
 type ValidIndicatorData = IndicatorChartData & { value: number };
 const getValidData = (data: IndicatorChartData[]): ValidIndicatorData[] => {
@@ -33,15 +38,45 @@ const WidgetChart: FC<WidgetChartProps> = ({ indicator, data }) => {
         { data: nonWetlands, title: t("non-wetlands"), type: "bars", unit },
       ];
 
-      return <RankingChart sections={sections} withLegend />;
+      return (
+        <div className="w-full space-y-7">
+          {sections.map((section) => (
+            <RankingSection key={`ranking-chart-section-${section.title}`} section={section} />
+          ))}
+          <RankingChartLegend />
+        </div>
+      );
     }
 
     case "cost-of-intervention": {
-      return <RankingChart data={getValidData(data)} />;
+      const unit = data.reduce((acc, d) => d.unit || acc, "") || "";
+
+      return (
+        <div className="w-full space-y-7">
+          <RankingChartList data={getValidData(data)} unit={unit} />
+        </div>
+      );
     }
 
     case "return-on-investment": {
-      return <RankingChart data={getValidData(data)} />;
+      const validData = getValidData(data);
+      const unit = data.reduce((acc, d) => d.unit || acc, "") || "";
+
+      const wetlands = validData.filter((d) => d.group === "wetlands");
+      const nonWetlands = validData.filter((d) => d.group === "non-wetlands");
+
+      const sections: RankingChartSection[] = [
+        { data: wetlands, type: "bars", unit },
+        { data: nonWetlands, type: "bars", unit },
+      ];
+
+      return (
+        <div className="w-full space-y-7">
+          {sections.map((section) => (
+            <RankingSection key={`ranking-chart-section-${section.title}`} section={section} />
+          ))}
+        </div>
+      );
     }
 
     case "wetland-types-get":

app/src/components/chart/ranking/index.tsx

@@ -11,18 +11,23 @@ import { ValidIndicatorData } from "@/components/chart/types";
 
 type RankingChartSection = {
   data: ValidIndicatorData[];
-  title: string;
   type: "bars" | "list";
-  unit: string;
+  title?: string;
+  unit?: string;
 };
 interface Props {
   data: Array<ValidIndicatorData>;
 }
 
-const RankingChartSectionHeader: FC<{ title: string; unit: string }> = ({ title, unit }) => (
-  <header className="text-2xs mb-1 flex items-center justify-between py-1 leading-[22px] uppercase">
-    <h3 className="font-medium">{title}</h3>
-    <p className="font-normal">{unit}</p>
+const RankingChartSectionHeader: FC<{ title?: string; unit?: string }> = ({ title, unit }) => (
+  <header
+    className={cn({
+      "text-2xs mb-1 flex items-center justify-end py-1 leading-[22px] uppercase": true,
+      "justify-between": !!title && !!unit,
+    })}
+  >
+    {!!title && <h3 className="font-medium">{title}</h3>}
+    {!!unit && <p className="font-normal">{unit}</p>}
   </header>
 );
 
@@ -31,7 +36,7 @@ const RankingChartList: FC<Props & { title?: string; unit?: string }> = ({ data,
 
   return (
     <section>
-      {title && unit && <RankingChartSectionHeader title={title} unit={unit} />}
+      <RankingChartSectionHeader title={title} unit={unit} />
       <ul className="space-y-3">
         {data
           .sort((a, b) => b.value - a.value)
@@ -49,7 +54,11 @@ const RankingChartList: FC<Props & { title?: string; unit?: string }> = ({ data,
   );
 };
 
-const RankingChartBars: FC<Props & { title: string; unit: string }> = ({ data, title, unit }) => {
+const RankingChartCategorizedBars: FC<Props & { title?: string; unit?: string }> = ({
+  data,
+  title,
+  unit,
+}) => {
   const scale = useMemo(() => {
     const maxValue = Math.max(...data.map((item) => item.value));
     return (value: number) => (value / maxValue) * 100; // Scale to percentage
@@ -58,7 +67,7 @@ const RankingChartBars: FC<Props & { title: string; unit: string }> = ({ data, t
   if (data.length === 0) return null;
 
   return (
-    <section className="border-t border-dashed">
+    <section className={cn({ "border-t border-dashed": !!title })}>
       <RankingChartSectionHeader title={title} unit={unit} />
       <ul className="space-y-4">
         {data
@@ -114,31 +123,12 @@ const RankingSection: FC<{
   return (
     <>
       {type === "bars" ? (
-        <RankingChartBars data={data} title={title} unit={unit} />
+        <RankingChartCategorizedBars data={data} title={title} unit={unit} />
       ) : type === "list" ? (
         <RankingChartList data={data} title={title} unit={unit} />
       ) : null}
     </>
   );
 };
 
-const RankingChart: FC<{
-  sections?: Array<RankingChartSection>;
-  data?: ValidIndicatorData[];
-  withLegend?: boolean;
-}> = ({ sections, data, withLegend }) => {
-  return (
-    <div className="w-full space-y-7">
-      {data ? (
-        <RankingChartList data={data} />
-      ) : sections ? (
-        sections.map((section) => (
-          <RankingSection key={`ranking-chart-section-${section.title}`} section={section} />
-        ))
-      ) : null}
-      {withLegend && <RankingChartLegend />}
-    </div>
-  );
-};
-
-export { RankingChart, RankingChartLegend, type RankingChartSection };
+export { RankingSection, RankingChartList, RankingChartLegend, type RankingChartSection };

app/src/containers/categories/item.tsx

@@ -76,8 +76,14 @@ export const CategoriesItem = (category: Category) => {
         )}
       >
         <header className="relative flex min-h-28 w-full flex-col justify-center">
-          <div className="relative w-full">
+          <div className="group relative w-full">
             <h2 className="font-display text-2xl">{category.name}</h2>
+            <p
+              className="invisible max-h-0 overflow-hidden text-sm font-normal opacity-0 transition-[opacity_max-height_visibility] duration-500 group-hover:visible group-hover:max-h-40 group-hover:opacity-100"
+              style={{ transitionProperty: "opacity, max-height, visibility" }}
+            >
+              {category.description}
+            </p>
           </div>
         </header>
 

app/src/containers/landscapes/list.tsx

@@ -35,9 +35,9 @@ export const LandscapesList = async () => {
         <li className="bg-background w-96 shrink-0 space-y-4 rounded-4xl p-6">
           <h1 className="font-display text-4xl text-blue-500">Highlighted landscapes</h1>
           <p className="text-foreground text-sm">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, similique magnam tenetur
-            eligendi beatae aut architecto deleniti iste autem adipisci ipsam hic nisi, quia, dicta
-            quam animi vel. Et, nihil!
+            Discover iconic wetland landscapes, see the different values they bring for nature and
+            the communities around them and explore why additional efforts are needed for better
+            management and protection.
           </p>
         </li>