dynamic legends

client/src/components/map/legend/types.ts

@@ -96,9 +96,11 @@ export interface SortableItemProps extends PropsWithChildren {
 
 export interface LegendTypeProps {
   className?: string;
+  type: 'choropleth' | 'gradient' | 'basic';
   items: Array<{
     value: string;
     color: string;
+    label?: string;
   }>;
 }
 

client/src/containers/datasets/item.tsx

@@ -15,7 +15,7 @@ import { INFO } from '@/containers/datasets/layers';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import { Switch } from '@/components/ui/switch';
-// TODO: replace with real type DatasetItemResonseDataItem
+
 export default function DatasetsItem(props: LayerListResponseDataItem) {
   const [layers, setLayersToURL] = useSyncLayers();
 

client/src/containers/datasets/layers/index.tsx

@@ -1,22 +1,15 @@
-import type { LayerProps, DeckGLLayerProps, LayerSettings } from '@/types/layers';
+import type { LayerProps, DeckGLLayerProps } from '@/types/layers';
 
 import BiomassDensity from '@/containers/datasets/layers/biomass-density/layer';
-import BiomassDensityLegend from '@/containers/datasets/layers/biomass-density/legend';
 import BiomassDensityInfo from '@/containers/datasets/layers/constants/biomass-density';
 import NetForestCarbonFluxInfo from '@/containers/datasets/layers/constants/net-flux-carbon';
 import SoilCarbonDensityInfo from '@/containers/datasets/layers/constants/soil-carbon-density';
 import { LandDegradationLayer } from '@/containers/datasets/layers/land-degradation/layer';
-import LandDegradationLegend from '@/containers/datasets/layers/land-degradation/legend';
 import NetForestCarbonFluxLayer from '@/containers/datasets/layers/net-forest-carbon-flux/layer';
-import NetForestCarbonFluxLegend from '@/containers/datasets/layers/net-forest-carbon-flux/legend';
 import { ProjectsLayer } from '@/containers/datasets/layers/projects/layer';
-import ProjectsLegend from '@/containers/datasets/layers/projects/legend';
 import SoilCarbonDensityLayer from '@/containers/datasets/layers/soil-carbon-density/layer';
-import SoilCarbonDensityLegend from '@/containers/datasets/layers/soil-carbon-density/legend';
 import TreeCoverLayer from '@/containers/datasets/layers/tree-cover/layer';
-import TreeCoverLegend from '@/containers/datasets/layers/tree-cover/legend';
 import TreeCoverLossLayer from '@/containers/datasets/layers/tree-cover-loss/layer';
-import TreeCoverLossLegend from '@/containers/datasets/layers/tree-cover-loss/legend';
 
 import LandDegradationInfo from './constants/land-degradation';
 import TreeCoverInfo from './constants/tree-cover';
@@ -29,10 +22,6 @@ type SimpleLayerIndex = {
   [key: number]: React.ComponentType<LayerProps>;
 };
 
-type LegendIndex = {
-  [key: string]: React.ComponentType<{ settings: LayerSettings }>;
-};
-
 type InfoIndex = {
   [key: number]: React.ComponentType;
 };
@@ -51,16 +40,6 @@ const SIMPLE_LAYERS: SimpleLayerIndex = {
   6: LandDegradationLayer,
 };
 
-export const LEGENDS: LegendIndex = {
-  5: ProjectsLegend,
-  1: TreeCoverLegend,
-  3: NetForestCarbonFluxLegend,
-  2: BiomassDensityLegend,
-  4: SoilCarbonDensityLegend,
-  6: LandDegradationLegend,
-  7: TreeCoverLossLegend,
-};
-
 export const INFO: InfoIndex = {
   1: TreeCoverInfo,
   2: BiomassDensityInfo,

client/src/containers/datasets/list.tsx

@@ -13,6 +13,8 @@ export default function DatasetsList() {
 
   const layers = data?.data || [];
 
+  if (!layers.length) return null;
+
   return (
     <ContentLoader
       data={data}

client/src/containers/map/legend/index.tsx

@@ -6,11 +6,11 @@ import { cn } from '@/lib/classnames';
 
 import { useSyncLayers } from '@/hooks/datasets/sync-query';
 
+import MapLegendItem from '@/containers/map/legend/legend-item';
+
 import Legend from '@/components/map/legend';
 import { Button } from '@/components/ui/button';
 
-import MapLegendItem from './item';
-
 const MapLegends = ({ className = '' }) => {
   const [layers] = useSyncLayers();
 
@@ -56,7 +56,7 @@ const MapLegends = ({ className = '' }) => {
         <Button
           variant="primary"
           size="base"
-          className="ml-auto mt-auto h-8 w-8 rounded-full p-0"
+          className="ml-auto mt-auto h-8 w-8 shrink-0 rounded-full p-0"
           onClick={handleOpenLegend}
         >
           {openLegend ? <ChevronsRight size={12} /> : <ChevronsLeft size={12} />}

client/src/containers/map/legend/legend-item/basic.tsx

@@ -0,0 +1,50 @@
+'use-client';
+
+import type { Layer } from '@/types/generated/strapi.schemas';
+import type { LayerSettings } from '@/types/layers';
+import type { Legend } from '@/types/map';
+
+import LegendSettings from '@/containers/legend-settings';
+
+const BasicLegendItem = ({
+  name,
+  legend_config,
+  settings,
+}: Layer & { settings: LayerSettings }) => {
+  const { items, notes } = legend_config as Legend;
+
+  return (
+    <div className="flex w-full">
+      {items.length === 1 ? (
+        <div className="flex w-full flex-col space-y-2">
+          <div className="flex w-full justify-between">
+            <div className="flex w-full items-center space-x-2">
+              <div className="h-3 w-3 rounded-sm" style={{ backgroundColor: items[0]?.color }} />
+              <p className="text-xs capitalize">{name}</p>
+            </div>
+            <LegendSettings settings={settings} />
+          </div>
+          {items[0]?.notes && <p className="text-xs text-gray-500">{items[0]?.notes}</p>}
+        </div>
+      ) : (
+        <div className="flex w-full justify-between">
+          <div>
+            <div className="flex w-full justify-between">
+              <p className="text-xs capitalize">{name}</p>
+              <LegendSettings settings={settings} />
+            </div>
+          </div>
+          {items.map((item) => (
+            <div key={item?.color} className="flex w-full items-center space-x-2">
+              <div className="h-3 w-3 rounded-sm" style={{ backgroundColor: item.color }} />
+              <p className="text-xs capitalize">{item.value}</p>
+            </div>
+          ))}
+          {notes && <p className="text-xs text-gray-500">{notes}</p>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BasicLegendItem;

client/src/containers/datasets/layers/land-degradation/legend.tsx → client/src/containers/map/legend/legend-item/choropleth.tsx

@@ -1,16 +1,17 @@
-import { useGetLayersId } from '@/types/generated/layer';
-import type { LayerSettings, LegendType } from '@/types/layers';
+'use-client';
 
-import LegendSettings from '@/containers/legend-settings';
-
-export default function Legend({ settings }: { settings: LayerSettings }) {
-  const { data } = useGetLayersId(Number(settings.id));
-
-  if (!data?.data?.attributes) return null;
+import type { Layer } from '@/types/generated/strapi.schemas';
+import type { LayerSettings } from '@/types/layers';
+import type { Legend } from '@/types/map';
 
-  const { legend_config, name } = data.data.attributes;
-  const { items } = legend_config as LegendType;
+import LegendSettings from '@/containers/legend-settings';
 
+const ChoroplethLegendItem = ({
+  name,
+  legend_config,
+  settings,
+}: Layer & { settings: LayerSettings }) => {
+  const { items } = legend_config as Legend;
   return (
     <div className="flex w-full flex-col space-y-2">
       <div className="flex w-full items-start justify-between">
@@ -47,4 +48,6 @@ export default function Legend({ settings }: { settings: LayerSettings }) {
       </div>
     </div>
   );
-}
+};
+
+export default ChoroplethLegendItem;