fix: new legend symbol: Image

opendatasoft · Nov 16, 2023 · cba597f · cba597f
1 parent 1e373b5
commit cba597f
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 29 deletions.
diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -63,35 +63,50 @@ const battleImageMatch = {
 
 const bbox: BBox = [-6.855469, 41.343825, 11.645508, 51.37178];
 
+const legendCitiesItems = [
+    {
+        label: 'Paris',
+        color: citiesColorMatch.colors.Paris,
+        borderColor: citiesColorMatch.borderColors.Paris,
+        variant: CATEGORY_ITEM_VARIANT.Circle,
+    },
+    {
+        label: 'Nantes',
+        color: citiesColorMatch.colors.Nantes,
+        borderColor: citiesColorMatch.borderColors.Nantes,
+        variant: CATEGORY_ITEM_VARIANT.Circle,
+    },
+    {
+        label: 'Bordeaux',
+        color: citiesColorMatch.colors.Bordeaux,
+        borderColor: citiesColorMatch.borderColors.Bordeaux,
+        variant: CATEGORY_ITEM_VARIANT.Circle,
+    },
+    {
+        label: 'Marseille',
+        color: citiesColorMatch.colors.Marseille,
+        borderColor: citiesColorMatch.borderColors.Marseille,
+        variant: CATEGORY_ITEM_VARIANT.Circle,
+    },
+];
+
+const legendbattleItems = [
+    {
+        variant: CATEGORY_ITEM_VARIANT.Image,
+        label: 'Battle of Verdun',
+        src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Battle_icon_gladii_red.svg/14px-Battle_icon_gladii_red.svg.png',
+    },
+    {
+        variant: CATEGORY_ITEM_VARIANT.Image,
+        label: 'Battle of the Somme',
+        src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Big_battle_symbol.svg/14px-Big_battle_symbol.svg.png',
+    },
+];
+
 const legend = {
     type: 'category' as const,
-    title: 'French cities',
-    items: [
-        {
-            label: 'Paris',
-            color: citiesColorMatch.colors.Paris,
-            borderColor: citiesColorMatch.borderColors.Paris,
-            variant: CATEGORY_ITEM_VARIANT.Circle,
-        },
-        {
-            label: 'Nantes',
-            color: citiesColorMatch.colors.Nantes,
-            borderColor: citiesColorMatch.borderColors.Nantes,
-            variant: CATEGORY_ITEM_VARIANT.Circle,
-        },
-        {
-            label: 'Bordeaux',
-            color: citiesColorMatch.colors.Bordeaux,
-            borderColor: citiesColorMatch.borderColors.Bordeaux,
-            variant: CATEGORY_ITEM_VARIANT.Circle,
-        },
-        {
-            label: 'Marseille',
-            color: citiesColorMatch.colors.Marseille,
-            borderColor: citiesColorMatch.borderColors.Marseille,
-            variant: CATEGORY_ITEM_VARIANT.Circle,
-        },
-    ],
+    title: 'French cities and famous battles',
+    items: [...legendCitiesItems, ...legendbattleItems],
     align: 'start' as const,
 };
 

diff --git a/.../visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItemSymbol.svelte b/.../visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItemSymbol.svelte
@@ -2,6 +2,7 @@
     import BoxSymbol from '../Symbols/BoxSymbol.svelte';
     import LineSymbol from '../Symbols/LineSymbol.svelte';
     import CircleSymbol from '../Symbols/CircleSymbol.svelte';
+    import ImageSymbol from '../Symbols/ImageSymbol.svelte';
     import type { CategoryItem } from '../../types';
     import { CATEGORY_ITEM_VARIANT } from '../../types';
 
@@ -12,6 +13,8 @@
     <CircleSymbol {item} />
 {:else if item.variant === CATEGORY_ITEM_VARIANT.Box}
     <BoxSymbol {item} />
-{:else}
+{:else if item.variant === CATEGORY_ITEM_VARIANT.Line}
     <LineSymbol {item} />
+{:else if item.variant === CATEGORY_ITEM_VARIANT.Image}
+    <ImageSymbol {item} />
 {/if}
diff --git a/packages/visualizations/src/components/Legend/CategoryLegend/Symbols/ImageSymbol.svelte b/packages/visualizations/src/components/Legend/CategoryLegend/Symbols/ImageSymbol.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { ImageCategoryItem } from '../../types';
+
+    export let item: ImageCategoryItem;
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<img src={item.src} />
+
+<style>
+    img {
+        width: 16px;
+        margin-right: 6px;
+        object-fit: contain;
+    }
+</style>
diff --git a/packages/visualizations/src/components/Legend/types.ts b/packages/visualizations/src/components/Legend/types.ts
@@ -29,6 +29,7 @@ export const CATEGORY_ITEM_VARIANT = {
     Circle: 'circle',
     Line: 'line',
     Box: 'box',
+    Image: 'image',
 } as const;
 
 type BaseCategoryItem = {
@@ -56,7 +57,16 @@ export type LineCategoryItem = BaseCategoryItem & {
     dashed?: boolean;
 };
 
-export type CategoryItem = CircleCategoryItem | BoxCategoryItem | LineCategoryItem;
+export type ImageCategoryItem = BaseCategoryItem & {
+    variant: typeof CATEGORY_ITEM_VARIANT.Image;
+    src: string;
+};
+
+export type CategoryItem =
+    | CircleCategoryItem
+    | BoxCategoryItem
+    | LineCategoryItem
+    | ImageCategoryItem;
 
 export type CategoryLegend = {
     type: 'category';