@swr-data-lab/components 1.12.4 → 1.13.0

package/package.json

@@ -67,7 +67,7 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.12.4",
+	"version": "1.13.0",
 	"overrides": {
 		"storybook": "$storybook"
 	}

package/src/ChartList/ChartList.mdx

@@ -0,0 +1,13 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as ChartListStories from './ChartList.stories.svelte';
+
+<Meta of={ChartListStories} />
+
+# Chart List
+
+Utility component for displaying a list of charts with associated embed URLs during development (typically on the `/` route of your Svelte project).
+
+<Stories />
+
+<Controls />

package/src/ChartList/ChartList.stories.svelte

@@ -0,0 +1,48 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { within, expect } from 'storybook/test';
+
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import ChartList from './ChartList.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Meta/ChartList',
+		component: ChartList
+	});
+
+	const testCharts = [
+		{ title: 'Baden-Württemberg Loosers', slug: 'bw-loosers' },
+		{ title: 'Baden-Württemberg Winners', slug: 'bw-winners' },
+		{ title: 'Rheinland-Pfalz Loosers', slug: 'rp-loosers' },
+		{ title: 'Rheinland-Pfalz Winners', slug: 'rp-winners' }
+	];
+</script>
+
+<Story
+	name="Default"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step('Project title renders', async () => {
+			const titleEl = canvas.getByTestId('chartlist-project-title');
+			expect(titleEl).toHaveTextContent('Grafiken für p110: Wie sieht der Wald von morgen aus?');
+		});
+
+		await step('All chart list items render', async () => {
+			testCharts.forEach((c) => {
+				const el = canvas.getByText(c.title);
+				expect(el).toBeTruthy();
+			});
+		});
+	}}
+>
+	<DesignTokens>
+		<ChartList
+			baseUrl="https://static.datenhub.net/apps/p110_wald-klimawandel/main"
+			charts={testCharts}
+			project="p110: Wie sieht der Wald von morgen aus?"
+		/>
+	</DesignTokens>
+</Story>

package/src/ChartList/ChartList.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { dev } from '$app/environment';
+
+	type ProjectPrefix = 'p' | 't';
+	type ProjectIdentifier = `${ProjectPrefix}${number}: ${string}`;
+
+	interface ChartSpec {
+		title: string;
+		slug: string;
+	}
+	interface ChartListProps {
+		project?: ProjectIdentifier;
+		charts?: ChartSpec[];
+		baseUrl?: string;
+	}
+	let { project, charts, baseUrl }: ChartListProps = $props();
+</script>
+
+<main>
+	<div class="inner">
+		<h1 data-testid="chartlist-project-title">Grafiken für {project}</h1>
+		{#if charts}
+			<table>
+				<thead>
+					<tr>
+						<th>Title</th>
+						{#if baseUrl}
+							<th>Embed URL</th>
+						{/if}
+					</tr>
+				</thead>
+				<tbody>
+					{#each charts as chart}
+						<tr>
+							<td>
+								<a href="./{chart.slug}{dev ? '' : '.html'}">{chart.title}</a>
+							</td>
+							{#if baseUrl}
+								<td>
+									<input type="text" value={`${baseUrl}/${chart.slug}.html`} />
+								</td>
+							{/if}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</div>
+</main>
+
+<style>
+	:global(*) {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+		color: inherit;
+	}
+	main {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-flow: column;
+		font-family: var(--swr-sans);
+		font-size: var(--fs-small-1);
+		max-width: 60rem;
+		margin: 0 auto;
+	}
+	.inner {
+		width: 100%;
+		border: 1px solid rgb(0, 0, 0);
+	}
+	h1 {
+		font-size: var(--fs-small-1);
+		width: 100%;
+		border-bottom: 1px solid black;
+		padding-bottom: 0.2em;
+		background-color: rgb(233, 238, 245);
+	}
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+	}
+	a {
+		display: block;
+		text-decoration: none;
+	}
+	th,
+	td,
+	h1 {
+		padding: 0.2em 0.4em;
+		text-align: left;
+	}
+	th {
+		border-bottom: 1px solid black;
+	}
+	tr {
+		border-bottom: 1px solid black;
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	input {
+		display: block;
+		width: 100%;
+		padding: 0.1em 0.3em;
+	}
+
+	a:hover,
+	a:focus-visible {
+		text-decoration: underline;
+	}
+	a:last-child {
+		border-bottom: 0;
+	}
+</style>

package/src/ChartList/index.ts

@@ -0,0 +1,2 @@
+import ChartList from './ChartList.svelte';
+export default ChartList;

package/src/Intro.mdx

@@ -1,7 +1,7 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="About" />
 
 # SWR Data Lab Components
 
-Experimental component library for SWR Data Lab interactives.
+Experimental component library for SWR Data Lab interactives.

package/src/app.d.ts

@@ -10,4 +10,4 @@ declare global {
 	}
 }
 
-export { };
+export {};

package/src/index.js

@@ -39,3 +39,6 @@ export { default as Select } from './Select/Select.svelte';
 
 // Deprecated
 export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
+
+// Meta
+export { default as ChartList } from './ChartList/ChartList.svelte';

package/src/maplibre/Maplibre.mdx

@@ -9,7 +9,7 @@ import * as MapStyleStories from './MapStyle/SWRDataLabLight.stories.svelte';
 
 Lightweight svelte components and basemaps for rendering custom slippy maps using the [versatiles](https://docs.versatiles.org/) stack.
 
-Based on [prior work](https://github.com/SWRdata/frontend_svelte_p012_spritpreise/blob/main/src/lib/components/Map/Map.svelte) from [Jakob Bauer](https://github.com/AgricolaJKB), [dimfield](https://github.com/dimfeld/svelte-maplibre) and [MIRUNE](https://github.com/MIERUNE/svelte-maplibre-gl).
+Based on [prior work](https://github.com/SWRdata/frontend_svelte_p012_spritpreise/blob/main/src/lib/components/Map/Map.svelte) from [Michael Kreil](https://github.com/MichaelKreil), [Jakob Bauer](https://github.com/AgricolaJKB), [dimfield](https://github.com/dimfeld/svelte-maplibre) and [MIRUNE](https://github.com/MIERUNE/svelte-maplibre-gl).
 
 <Story of={MapStyleStories.Default} />
 

package/src/maplibre/Tooltip/Tooltip.svelte

@@ -104,13 +104,16 @@
 		.maplibregl-popup-anchor-left {
 			flex-direction: row;
 		}
+
 		.maplibregl-popup-anchor-right {
 			flex-direction: row-reverse;
 		}
+
 		.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
 			transform: translateY(50%) rotate(45deg);
 			align-self: center;
 		}
+
 		.maplibregl-popup-anchor-top .maplibregl-popup-tip {
 			transform: translateY(-50%) rotate(-135deg);
 			align-self: center;
@@ -120,52 +123,56 @@
 			transform: translateX(-50%) rotate(135deg);
 			align-self: center;
 		}
+
 		.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
 			transform: translateY(1em) translateX(-50%) rotate(135deg);
 		}
+
 		.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
 			transform: translateY(-1em) translateX(-50%) rotate(135deg);
 		}
+
 		.maplibregl-popup-anchor-right .maplibregl-popup-tip {
 			transform: translateX(50%) rotate(-45deg);
 			align-self: center;
 		}
+
 		.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
 			transform: translateX(-1em) translateY(-50%) rotate(-135deg);
 			align-self: flex-end;
 		}
+
 		.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
 			transform: translateX(-1em) translateY(50%) rotate(45deg);
 			align-self: flex-end;
 		}
 
 		.maplibregl-popup-close-button {
-			background-color: transparent;
-			border: 0;
-			cursor: pointer;
 			position: absolute;
-			top: 0.45em;
-			right: 0.45em;
+			top: 0.5em;
+			right: 0.5em;
+			cursor: pointer;
+			border-radius: 2px;
 			display: flex;
-			border-radius: var(--br-small);
 			justify-content: center;
 			align-items: center;
-			padding-bottom: 0.1em;
-			border: 1px solid var(--violet-dark-5);
-			font-size: 1.2rem;
-			width: 1em;
-			height: 1em;
+			padding-bottom: 0.15em;
+			font-size: 1.25rem;
+			width: 1.1em;
+			height: 1.1em;
 			z-index: 100;
+			background: white;
+			border: 1px solid var(--gray-dark-5);
 		}
 
 		.maplibregl-popup-close-button:hover,
 		.maplibregl-popup-close-button:focus {
-			background: rgb(245, 245, 245);
+			background: var(--gray-light-5);
 		}
 
 		.maplibregl-popup-tip {
-			width: 0.6rem;
-			height: 0.6rem;
+			width: 0.65rem;
+			height: 0.65rem;
 			background: white;
 			position: absolute;
 			border-right: 1px solid rgba(0, 0, 0, 0.75);

package/src/maplibre/VectorLayer/VectorLayer.svelte

@@ -4,6 +4,10 @@
 		FillLayoutProps,
 		FillPaintProps,
 		LineLayoutProps,
+		CircleLayoutProps,
+		CirclePaintProps,
+		SymbolPaintProps,
+		SymbolLayoutProps,
 		LinePaintProps,
 		MapGeoJSONFeature,
 		MapLayerMouseEvent
@@ -22,8 +26,8 @@
 		visible?: boolean;
 		minZoom?: number;
 		maxZoom?: number;
-		paint?: LinePaintProps | FillPaintProps;
-		layout?: LineLayoutProps | FillLayoutProps;
+		paint?: LinePaintProps | FillPaintProps | CirclePaintProps | SymbolPaintProps;
+		layout?: LineLayoutProps | FillLayoutProps | CircleLayoutProps | SymbolLayoutProps;
 		hovered?: MapGeoJSONFeature | undefined;
 		selected?: MapGeoJSONFeature | undefined;
 

package/src/utils/formatDate.js

@@ -1,17 +1,17 @@
-import { timeFormat } from "d3-time-format"
+import { timeFormat } from 'd3-time-format';
 
 const formats = {
-  dayMonthYear: "%-d.%-m.%Y",
-  dayMonth: "%-d.%-m.",
-  dayMonthYearShort: "%-d.%-m.%y",
-  dayMonthHourMinute: "%-d.%-m., %-H.%M Uhr",
-  dayMonthYearHourMinute: "%-d.%-m.%Y, %-H.%M Uhr",
-  hourMinuteSophora: "%-H:%M Uhr",
-  hourMinute: "%-H.%M",
-}
+	dayMonthYear: '%-d.%-m.%Y',
+	dayMonth: '%-d.%-m.',
+	dayMonthYearShort: '%-d.%-m.%y',
+	dayMonthHourMinute: '%-d.%-m., %-H.%M Uhr',
+	dayMonthYearHourMinute: '%-d.%-m.%Y, %-H.%M Uhr',
+	hourMinuteSophora: '%-H:%M Uhr',
+	hourMinute: '%-H.%M'
+};
 
-const formatDate = ({ date, format = "dayMonthYear" }) => {
-  return timeFormat(formats[format] || format)(new Date(date))
-}
+const formatDate = ({ date, format = 'dayMonthYear' }) => {
+	return timeFormat(formats[format] || format)(new Date(date));
+};
 
-export default formatDate
+export default formatDate;

package/src/utils/formatNumber.js

@@ -2,12 +2,12 @@ import { formatLocale } from 'd3-format';
 
 export const defaultFormat = ',.1f';
 export const defaultLocale = {
-  decimal: ',',
-  thousands: ' ',
-  grouping: [3],
-  currency: ['', '€']
+	decimal: ',',
+	thousands: ' ',
+	grouping: [3],
+	currency: ['', '€']
 };
 
 export default formatNumber = ({ number, format = defaultFormat, locale = defaultLocale }) => {
-  return formatLocale(locale).format(format)(number);
+	return formatLocale(locale).format(format)(number);
 };

package/src/utils/getColorsBetween.js

@@ -9,17 +9,17 @@ import { range } from 'd3-array';
  * @returns
  */
 const getColorsBetween = (from, to, props = { n: 1, includeFromTo: false }) => {
-  const step = 1 / (props.n + 1);
-  const fromColor = Color(from);
-  const toColor = Color(to);
-  const colorsBetween = range(1, props.n + 1)
-    .map((i) => fromColor.mix(toColor, i * step))
-    .map((c) => c.hex().toString());
-  if (props.includeFromTo) {
-    return [from, ...colorsBetween, to];
-  } else {
-    return colorsBetween;
-  }
+	const step = 1 / (props.n + 1);
+	const fromColor = Color(from);
+	const toColor = Color(to);
+	const colorsBetween = range(1, props.n + 1)
+		.map((i) => fromColor.mix(toColor, i * step))
+		.map((c) => c.hex().toString());
+	if (props.includeFromTo) {
+		return [from, ...colorsBetween, to];
+	} else {
+		return colorsBetween;
+	}
 };
 
 export default getColorsBetween;

package/src/utils/getComparisonDiffs.js

@@ -1,9 +1,9 @@
 const getComparisonDiffs = (a, b) => {
-  return {
-    diff: a - b,
-    diffRel: (a / b - 1) * 100,
-    diffTag: a > b ? 'higher' : a === b ? 'equal' : 'smaller'
-  };
+	return {
+		diff: a - b,
+		diffRel: (a / b - 1) * 100,
+		diffTag: a > b ? 'higher' : a === b ? 'equal' : 'smaller'
+	};
 };
 
 export default getComparisonDiffs;

package/src/utils/getLaenderFromTopo.js

@@ -7,29 +7,29 @@ import { range } from 'd3-array';
  * @returns geojson
  */
 const getLaenderFromTopo = (topo) => {
-  const states = [];
-  const stateIds = range(1, 17).map((n) => String(n).padStart(2, '0'));
-  const key = Object.keys(topo.objects)[0];
+	const states = [];
+	const stateIds = range(1, 17).map((n) => String(n).padStart(2, '0'));
+	const key = Object.keys(topo.objects)[0];
 
-  stateIds.forEach((id) => {
-    const state = {
-      geometry: merge(
-        topo,
-        topo.objects[key].geometries.filter(
-          (g) => g.properties.id && g.properties.id.startsWith(id)
-        )
-      ),
-      id,
-      type: 'Feature',
-      properties: { id }
-    };
-    states.push(state);
-  });
+	stateIds.forEach((id) => {
+		const state = {
+			geometry: merge(
+				topo,
+				topo.objects[key].geometries.filter(
+					(g) => g.properties.id && g.properties.id.startsWith(id)
+				)
+			),
+			id,
+			type: 'Feature',
+			properties: { id }
+		};
+		states.push(state);
+	});
 
-  return {
-    type: 'FeatureCollection',
-    features: states
-  };
+	return {
+		type: 'FeatureCollection',
+		features: states
+	};
 };
 
 export default getLaenderFromTopo;

package/src/utils/getLaenderNicenameFromAgs.js

@@ -1,27 +1,27 @@
 const map = {
-  "01": "Schleswig-Holstein",
-  "02": "Hamburg",
-  "03": "Niedersachsen",
-  "04": "Bremen",
-  "05": "Nordrhein-Westfalen",
-  "06": "Hessen",
-  "07": "Rheinland-Pfalz",
-  "08": "Baden-Württemberg",
-  "09": "Bayern",
-  10: "Saarland",
-  11: "Berlin",
-  12: "Brandenburg",
-  13: "Mecklenburg-Vorpommern",
-  14: "Sachsen",
-  15: "Sachsen-Anhalt",
-  16: "Thüringen",
-}
+	'01': 'Schleswig-Holstein',
+	'02': 'Hamburg',
+	'03': 'Niedersachsen',
+	'04': 'Bremen',
+	'05': 'Nordrhein-Westfalen',
+	'06': 'Hessen',
+	'07': 'Rheinland-Pfalz',
+	'08': 'Baden-Württemberg',
+	'09': 'Bayern',
+	10: 'Saarland',
+	11: 'Berlin',
+	12: 'Brandenburg',
+	13: 'Mecklenburg-Vorpommern',
+	14: 'Sachsen',
+	15: 'Sachsen-Anhalt',
+	16: 'Thüringen'
+};
 
 /**
  * Get nicename for land ags
  * @param {string} ags
  * @returns {string} nicename
  */
-const getLaenderNicenameFromAgs = (ags) => map[ags]
+const getLaenderNicenameFromAgs = (ags) => map[ags];
 
-export default getLaenderNicenameFromAgs
+export default getLaenderNicenameFromAgs;

package/src/utils/isSvelteComponent.js

@@ -7,7 +7,7 @@ import { SvelteComponent } from 'svelte';
  */
 
 const isSvelteComponent = (component) => {
-  return SvelteComponent.isPrototypeOf(component) || typeof component === 'function';
+	return SvelteComponent.isPrototypeOf(component) || typeof component === 'function';
 };
 
 export default isSvelteComponent;

package/src/utils/prepareSophoraModel.js

@@ -1,31 +1,37 @@
 const SELECTORS = {
-  showScrollUp: "a.back-to-top",
-  showPlayerbar: "#playerbar",
-  showSharing: ".sharing",
-  showAuthors: ".meta-top .meta-authors",
-  allowZoom: "meta[name=viewport]",
-}
+	showScrollUp: 'a.back-to-top',
+	showPlayerbar: '#playerbar',
+	showSharing: '.sharing',
+	showAuthors: '.meta-top .meta-authors',
+	allowZoom: 'meta[name=viewport]'
+};
 
-const IS_MOBILE = window.innerWidth < 768
+const IS_MOBILE = window.innerWidth < 768;
 
 const prepareSophoraModel = (config) => {
-  console.log("###SWRDATA### updating dom with following config: ", config)
-  Object.entries(config).forEach(([k, v], _) => {
-    const element = document.querySelector(SELECTORS[k])
-    // show/hide elements
-    if (k.startsWith("show")) {
-      if ((v === "none" || (v === "mobile" && IS_MOBILE) || (v === "desktop" && !IS_MOBILE)) && element) {
-        element.style.display = "none"
-        element.style.visibility = "hidden"
-      }
-    }
-    // enable/disable zoom
-    if (k === "allowZoom") {
-      if (!v && element) {
-        element.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
-      }
-    }
-  })
-}
+	console.log('###SWRDATA### updating dom with following config: ', config);
+	Object.entries(config).forEach(([k, v], _) => {
+		const element = document.querySelector(SELECTORS[k]);
+		// show/hide elements
+		if (k.startsWith('show')) {
+			if (
+				(v === 'none' || (v === 'mobile' && IS_MOBILE) || (v === 'desktop' && !IS_MOBILE)) &&
+				element
+			) {
+				element.style.display = 'none';
+				element.style.visibility = 'hidden';
+			}
+		}
+		// enable/disable zoom
+		if (k === 'allowZoom') {
+			if (!v && element) {
+				element.setAttribute(
+					'content',
+					'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
+				);
+			}
+		}
+	});
+};
 
-export default prepareSophoraModel
+export default prepareSophoraModel;

package/src/utils/scrollIntoViewWithOffset.js

@@ -6,9 +6,9 @@ const OFFSET = -50;
  * @param {number} offset
  */
 const scrollIntoViewWithOffset = (ref, offset) => {
-  const yOffset = offset !== 'undefined' ? offset : OFFSET;
-  const y = ref.getBoundingClientRect().top + window.pageYOffset + yOffset;
-  window.scrollTo({ top: y, behavior: 'smooth' });
+	const yOffset = offset !== 'undefined' ? offset : OFFSET;
+	const y = ref.getBoundingClientRect().top + window.pageYOffset + yOffset;
+	window.scrollTo({ top: y, behavior: 'smooth' });
 };
 
 export default scrollIntoViewWithOffset;

package/src/utils/slugify.ts

@@ -1,12 +1,12 @@
 // Source: https://svelte.dev/playground/b130be5e485441a1842ae97e4ce4f244?version=5.20.0
 
 export default function slugify(str: string): string {
-  return str
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-    .trim()
-    .normalize('NFKD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase()
-    .replace(/[^a-z0-9 -]/g, '')
+	return str
+		.replace(/\s+/g, '-')
+		.replace(/-+/g, '-')
+		.trim()
+		.normalize('NFKD')
+		.replace(/[\u0300-\u036f]/g, '')
+		.toLowerCase()
+		.replace(/[^a-z0-9 -]/g, '');
 }

package/src/utils/topoToGeo.js

@@ -6,8 +6,8 @@ import { feature } from 'topojson-client';
  * @returns {object} geojson
  */
 const topoToGeo = (topojson) => {
-  const key = Object.keys(topojson.objects)[0];
-  return feature(topojson, topojson.objects[key]);
+	const key = Object.keys(topojson.objects)[0];
+	return feature(topojson, topojson.objects[key]);
 };
 
 export default topoToGeo;