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/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/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();
 

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

@@ -0,0 +1,51 @@
+'use-client';
+
+import type { LayerSettings } from '@/types/layers';
+import type { Legend } from '@/types/map';
+
+import LegendSettings from '@/containers/legend-settings';
+
+const BasicLegendItem = ({
+  name,
+  settings,
+  items,
+  notes,
+}: {
+  name: Legend['name'];
+  settings: LayerSettings;
+  items: Legend['items'];
+  notes?: Legend['notes'];
+}) => (
+  <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,19 @@
-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 { 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,
+  settings,
+  items,
+}: {
+  name: Legend['name'];
+  settings: LayerSettings;
+  items: Legend['items'];
+}) => {
   return (
     <div className="flex w-full flex-col space-y-2">
       <div className="flex w-full items-start justify-between">
@@ -47,4 +50,6 @@ export default function Legend({ settings }: { settings: LayerSettings }) {
       </div>
     </div>
   );
-}
+};
+
+export default ChoroplethLegendItem;