added defauly legends to all maps, fixed overflow issue

evidence-dev · Oct 15, 2024 · 10a673c · 10a673c
1 parent ea5a149
commit 10a673c
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 45 deletions.
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte
@@ -65,6 +65,8 @@
 	export let legendType = undefined;
 	/** @type {string | undefined} */
 	export let legendFmt = undefined;
+	/** @type {boolean} */
+	export let legend = true;
 
 	const chartType = 'Area Map';
 
@@ -90,6 +92,7 @@
 			{legendFmt}
 			{legendType}
 			{chartType}
+			{legend}
 			{...$$restProps}
 		/>
 	</BaseMap>

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.stories.svelte
@@ -99,7 +99,7 @@ ORDER BY 1;
 			opacity="0.6"
 		/>
 
-		<Points data={la_locations} lat="lat" long="long" color="red" />
+		<Points data={la_locations} lat="lat" long="long" color="red" value="sales" />
 	</BaseMap>
 </Story>
 

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/BubbleMap.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/BubbleMap.stories.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <Story name="Basic Usage" parameters={{ chromatic: { disableSnapshot: true } }}>
-	<BubbleMap data={la_locations} lat="lat" long="long" size="sales" />
+	<BubbleMap data={la_locations} lat="lat" long="long" size="sales" value="sales" />
 </Story>
 
 <Story name="Loading" parameters={{ chromatic: { disableSnapshot: true } }}>

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/BubbleMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/BubbleMap.svelte
@@ -66,6 +66,8 @@
 	export let legendFmt = undefined;
 	/** @type {string[]|undefined} */
 	export let colorPalette = undefined;
+	/** @type {boolean} */
+	export let legend = true;
 
 	const chartType = 'Bubble Map';
 
@@ -86,6 +88,7 @@
 			{colorPalette}
 			{legendType}
 			{legendFmt}
+			{legend}
 			{...$$restProps}
 		/>
 	</BaseMap>

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js b/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
@@ -3,7 +3,7 @@ import { debounce } from 'perfect-debounce';
 import { fmt } from '@evidence-dev/component-utilities/formatting';
 import formatTitle from '@evidence-dev/component-utilities/formatTitle';
 import { initSmoothZoom } from './LeafletSmoothZoom';
-import { writable, derived, readonly, get } from 'svelte/store';
+import { writable, derived, readonly } from 'svelte/store';
 import chroma from 'chroma-js';
 import { uiColours } from '@evidence-dev/component-utilities/colours';
 import { mapColours } from '@evidence-dev/component-utilities/colours';
@@ -490,7 +490,7 @@ export class EvidenceMap {
 	/**
 	 *
 	 * @type {import('svelte/store').Writable<
-	 * { values: string[], colorPalette: string[], minValue: number, maxValue: number, legendType: string, legendFmt: string, chartType: string, legendId: string, value: string, noLegend: boolean }[]
+	 * { values: string[], colorPalette: string[], minValue: number, maxValue: number, legendType: string, legendFmt: string, chartType: string, legendId: string, value: string, legend: boolean }[]
 	 * >}
 	 */
 	#legendData = writable([]);
@@ -505,12 +505,12 @@ export class EvidenceMap {
 		chartType,
 		legendId,
 		value,
-		noLegend
+		legend
 	) {
 		this.#legendData.update((legendData) =>
-			legendData.some((legend) => legend.legendId === legendId)
-				? legendData.map((legend) =>
-						legend.legendId === legendId
+			legendData.some((data) => data.legendId === legendId)
+				? legendData.map((data) =>
+						data.legendId === legendId
 							? {
 									...legend,
 									colorPalette,
@@ -521,9 +521,9 @@ export class EvidenceMap {
 									legendFmt,
 									chartType,
 									value,
-									noLegend
+									legend
 								}
-							: legend
+							: data
 					)
 				: [
 						...legendData,
@@ -537,7 +537,7 @@ export class EvidenceMap {
 							chartType,
 							legendId,
 							value,
-							noLegend
+							legend
 						}
 					]
 		);
@@ -560,7 +560,7 @@ export class EvidenceMap {
 			legendFmt,
 			chartType,
 			legendId,
-			noLegend
+			legend
 		}
 	) {
 		await data.fetch();
@@ -580,7 +580,7 @@ export class EvidenceMap {
 		}
 		colorScale = chroma.scale(colorPalette).domain([min ?? minValue, max ?? maxValue]);
 
-		if (!noLegend) {
+		if (legend && value) {
 			values = this.handleLegendValues(colorPalette, values, legendType);
 			this.buildLegend(
 				colorPalette,
@@ -592,7 +592,7 @@ export class EvidenceMap {
 				chartType,
 				legendId,
 				value,
-				noLegend
+				legend
 			);
 		}
 		// Return the values, minValue, and maxValue for sharing with other functions

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.stories.svelte
@@ -85,7 +85,14 @@
 		long="long"
 		value="sales"
 	/>
-	<PointMap title="no legend" data={la_locations} lat="lat" long="long" value="sales" noLegend />
+	<PointMap
+		title="no legend"
+		data={la_locations}
+		lat="lat"
+		long="long"
+		value="sales"
+		legend={false}
+	/>
 </Story>
 
 <Story name="Loading" parameters={{ chromatic: { disableSnapshot: true } }}>

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
@@ -63,7 +63,7 @@
 	export let legendFmt = undefined;
 
 	/** @type {boolean} */
-	export let noLegend = false;
+	export let legend = true;
 
 	const chartType = 'Point Map';
 
@@ -94,7 +94,7 @@
 				{legendFmt}
 				{chartType}
 				{...$$restProps}
-				{noLegend}
+				{legend}
 			/>
 		</BaseMap>
 	</div>

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte
@@ -46,6 +46,9 @@
 	export let legendFmt = undefined;
 	export let chartType = 'Area Map';
 
+	/** @type {boolean} */
+	export let legend = true;
+
 	/**
 	 * Callback function for the area click event.
 	 * @type {(item: any) => void}
@@ -212,10 +215,14 @@
 			legendType,
 			legendFmt,
 			chartType,
-			legendId
+			legendId,
+			legend
 		};
 		await data.fetch();
-		({ values, colorScale, colorPalette } = await map.initializeData(data, initDataOptions));
+		({ values, colorPalette, legendType, colorScale } = await map.initializeData(
+			data,
+			initDataOptions
+		));
 
 		await processAreas();
 

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Bubbles.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Bubbles.svelte
@@ -12,6 +12,8 @@
 	/** @type {'categorical' | 'scalar' | undefined} */
 	export let legendType = undefined;
 	export let colorPalette = undefined;
+	/** @type {boolean} */
+	export let legend = true;
 </script>
 
-<Points sizeCol={size} {opacity} {legendType} {colorPalette} {...$$restProps} />
+<Points sizeCol={size} {opacity} {legendType} {colorPalette} {legend} {...$$restProps} />
diff --git a/...components/src/lib/unsorted/viz/map/components/Legend Components/CategoricalLegend.svelte b/...components/src/lib/unsorted/viz/map/components/Legend Components/CategoricalLegend.svelte
@@ -15,26 +15,19 @@
 	export let capitalize;
 
 	let legendTitle = capitalize(legend.value) || 'No value';
-	$: overflowAuto = true;
-	$: console.log(overflowAuto);
 
-	const handleOverflow = (event) => {
-		// Check which transition ended to avoid duplicate logs
-		if (event.propertyName === 'max-height') {
-			overflowAuto = !overflowAuto; // Set overflow auto when max-height transition ends
-		}
-	};
+	//total height of category value content
+	let overflowHeight = legend.values.length * 16;
+
+	let overflowOn = overflowHeight > height - 50;
 </script>
 
 <div class="flex {!multiLegend && direction === 'up' ? 'flex-col-reverse' : 'flex-col'}">
 	<div
 		style={`max-height: ${hideLegend ? '0px' : `${height - 50}px`};`}
-		class="flex flex-col{hideLegend
-			? ' opacity-0'
-			: ``}  transition-[opacity, max-height] duration-[350ms] ease-in-out w-full min-w-[86.5px] {overflowAuto
+		class="flex flex-col transition-[opacity, max-height, overflow-y] duration-[350ms] ease-in-out w-full min-w-[86.5px] {overflowOn
 			? 'overflow-y-auto'
-			: 'overflow-y-hidden'}"
-		on:transitionend={handleOverflow}
+			: 'overflow-hidden'} {hideLegend ? 'opacity-0' : ``}"
 	>
 		<div class="flex flex-wrap flex-col">
 			<p>{legendTitle}</p>

diff --git a/...core-components/src/lib/unsorted/viz/map/components/Legend Components/LegendToggle.svelte b/...core-components/src/lib/unsorted/viz/map/components/Legend Components/LegendToggle.svelte
@@ -28,7 +28,7 @@
 		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		class={`transition-transform duration-300 ease-in-out ${hideLegend ? 'rotate-180' : ''}`}
+		class={`transition-transform duration-300 ease-in-out ${hideLegend ? 'rotate-90' : ''}`}
 	>
 		{#if hideLegend}
 			<!-- Diagonal line 1 -->
@@ -37,25 +37,24 @@
 			<line x1="6" y1="18" x2="18" y2="6" />
 		{:else}
 			<!-- Row 1: Circle and Bar -->
-			<circle cx="5.5" cy="7" r="1" fill="currentColor" />
-			<rect x="8" y="6.5" width="11" height="1" rx="0.5" ry="0.5" fill="currentColor" />
+			<circle cx="5.5" cy="7" r="1" />
+			<rect x="8" y="6.5" width="11" height="1" rx="0.5" ry="0.5" />
 
 			<!-- Row 2: Circle and Bar -->
-			<circle cx="5.5" cy="12" r="1" fill="currentColor" />
+			<circle cx="5.5" cy="12" r="1" />
 			<rect
 				x="8"
 				y="11.5"
 				width="11"
 				height="1"
 				rx="0.5"
 				ry="0.5"
-				fill="currentColor"
 				class={`transition-opacity duration-200 ease-in-out ${hideLegend ? 'opacity-0' : 'opacity-100'}`}
 			/>
 
 			<!-- Row 3: Circle and Bar -->
-			<circle cx="5.5" cy="17" r="1" fill="currentColor" />
-			<rect x="8" y="16.5" width="11" height="1" rx="0.5" ry="0.5" fill="currentColor" />
+			<circle cx="5.5" cy="17" r="1" />
+			<rect x="8" y="16.5" width="11" height="1" rx="0.5" ry="0.5" />
 		{/if}
 	</svg>
 </button>
diff --git a/...core-components/src/lib/unsorted/viz/map/components/Legend Components/ScalarLegend.svelte b/...core-components/src/lib/unsorted/viz/map/components/Legend Components/ScalarLegend.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <div
-	class="flex flex-col mx-[3px] {hideLegend
+	class="flex flex-col {hideLegend
 		? hideLegendStyle
 		: showLegendStyle} min-w-52 transition-all duration-[350ms] ease-in-out w-full"
 >

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Legend.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Legend.svelte
@@ -2,6 +2,7 @@
 	import CategoricalLegend from './Legend Components/CategoricalLegend.svelte';
 	import ScalarLegend from './Legend Components/ScalarLegend.svelte';
 	import LegendToggle from './Legend Components/LegendToggle.svelte';
+
 	import { derived } from 'svelte/store';
 
 	const positions = {
@@ -75,7 +76,7 @@
 			<div class="flex flex-wrap">
 				{#each $categoricalLegendData as legend}
 					<div
-						class="border-x-[1px] border-gray-300 bg-gray-100 flex transition-[border, padding] ease-in-out ease-in-out duration-[350ms] px-1 {multiLegend
+						class="border-x-[1px] border-gray-300 bg-gray-100 flex transition-[border, padding] ease-in-out ease-in-out duration-[350ms] px-1.5 {multiLegend
 							? 'w-1/2 max-w-42'
 							: ''} {hideLegend ? 'border-y-0 py-0' : 'border-y-[1px] py-1'}"
 					>
@@ -95,7 +96,7 @@
 		{#if $scalarLegendData.length > 0}
 			{#each $scalarLegendData as legend}
 				<div
-					class="border-x-[1px] border-gray-300 bg-gray-100 overflow-hidden w-full items-center flex transition-[border, padding] duration-[350ms] ease-in-out px-1 {handleChevronDirection(
+					class="border-x-[1px] border-gray-300 bg-gray-100 overflow-hidden w-full items-center flex transition-[border, padding] duration-[350ms] ease-in-out px-1.5 {handleChevronDirection(
 						legend.legendType
 					) === 'right'
 						? 'flex-row-reverse'

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte
@@ -42,7 +42,7 @@
 	export let chartType = 'Point Map';
 
 	/** @type {boolean} */
-	export let noLegend = false;
+	export let legend = true;
 
 	if (size) {
 		// if size was user-supplied
@@ -238,7 +238,7 @@
 				legendFmt,
 				chartType,
 				legendId,
-				noLegend
+				legend
 			};
 			({ values, colorPalette, legendType, colorScale } = await map.initializeData(
 				data,