legend types

Vizzuality · Apr 10, 2024 · a218a92 · a218a92
1 parent 67fb751
commit a218a92
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 55 deletions.
diff --git a/client/src/containers/map/legend/legend-item/basic.tsx b/client/src/containers/map/legend/legend-item/basic.tsx
@@ -1,51 +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,
-  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>
+}: 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">
-            <p className="text-xs capitalize">{name}</p>
+            <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>
-        {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 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>
-        ))}
-        {notes && <p className="text-xs text-gray-500">{notes}</p>}
-      </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;
diff --git a/client/src/containers/map/legend/legend-item/choropleth.tsx b/client/src/containers/map/legend/legend-item/choropleth.tsx
@@ -1,19 +1,17 @@
 '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 ChoroplethLegendItem = ({
   name,
+  legend_config,
   settings,
-  items,
-}: {
-  name: Legend['name'];
-  settings: LayerSettings;
-  items: Legend['items'];
-}) => {
+}: 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">

diff --git a/client/src/containers/map/legend/legend-item/gradient.tsx b/client/src/containers/map/legend/legend-item/gradient.tsx
@@ -2,20 +2,18 @@
 
 import { cn } from '@/lib/classnames';
 
+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 GradientLegendItem = ({
   name,
-  items,
+  legend_config,
   settings,
-}: {
-  name: Legend['name'];
-  items: Legend['items'];
-  settings: LayerSettings;
-}) => {
+}: 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">

diff --git a/client/src/containers/map/legend/legend-item/index.tsx b/client/src/containers/map/legend/legend-item/index.tsx
@@ -2,6 +2,7 @@
 
 import { useGetLayersId } from '@/types/generated/layer';
 import type { LayerSettings } from '@/types/layers';
+import type { Legend } from '@/types/map';
 
 import BasicLegendItem from './basic';
 import ChoroplethLegendItem from './choropleth';
@@ -15,18 +16,22 @@ const MapLegendItem = ({ settings }: { settings: LayerSettings }) => {
   if (!data?.data?.attributes) return null;
 
   const { legend_config, name } = data.data.attributes;
-  const { type, items } = legend_config;
+  const { type } = legend_config as Legend;
 
   return (
     <div
       key={id}
       className="shadow-legend flex w-full items-center justify-between rounded bg-white px-4 py-2"
     >
-      {type === 'gradient' && <GradientLegendItem name={name} items={items} settings={settings} />}
+      {type === 'gradient' && (
+        <GradientLegendItem name={name} legend_config={legend_config} settings={settings} />
+      )}
       {type === 'choropleth' && (
-        <ChoroplethLegendItem name={name} items={items} settings={settings} />
+        <ChoroplethLegendItem name={name} legend_config={legend_config} settings={settings} />
+      )}
+      {type === 'basic' && (
+        <BasicLegendItem name={name} settings={settings} legend_config={legend_config} />
       )}
-      {type === 'basic' && <BasicLegendItem name={name} settings={settings} items={items} />}
     </div>
   );
 };

diff --git a/client/src/types/generated/strapi.schemas.ts b/client/src/types/generated/strapi.schemas.ts
@@ -1478,15 +1478,29 @@ export type LayerCreatedBy = {
   data?: LayerCreatedByData;
 };
 
+export const LEGEND_TYPE = ['basic', 'choropleth', 'gradient'] as const;
+
+export type LegendType = (typeof LEGEND_TYPE)[number];
+
+export type LegendConfig = {
+  type: LegendType;
+  name?: string;
+  info?: string;
+  description?: string;
+  items: { color: string; value: string; notes?: string }[];
+  intersections?: { id: number; color: string }[];
+  notes?: string;
+};
+
 export interface Layer {
   name?: string;
   config?: unknown;
   params_config?: unknown;
   decode_function?: string;
   legend_config?: unknown;
-  description?: string;
-  info?: string;
   slug?: string;
+  description?: string;
+  dialog?: string;
   createdAt?: string;
   updatedAt?: string;
   publishedAt?: string;
@@ -1672,7 +1686,7 @@ export type LayerListResponseMeta = {
 };
 
 export interface LayerListResponseDataItem {
-  id: number;
+  id?: number;
   attributes?: Layer;
 }
 
@@ -1687,9 +1701,9 @@ export type LayerRequestData = {
   params_config?: unknown;
   decode_function?: string;
   legend_config?: unknown;
-  description?: string;
-  info?: unknown;
   slug?: string;
+  description?: string;
+  dialog?: string;
 };
 
 export interface LayerRequest {