@swr-data-lab/components 2.31.0 → 2.31.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DevContainer/DevContainer.svelte +35 -21
- package/dist/maplibre/ArrowSource/ArrowSource.svelte +3 -3
- package/dist/maplibre/ArrowSource/ArrowSource.svelte.d.ts +1 -1
- package/dist/maplibre/ArrowSource/quadraticToPoints.d.ts +8 -9
- package/dist/maplibre/ArrowSource/quadraticToPoints.js +56 -13
- package/dist/maplibre/types.d.ts +1 -0
- package/package.json +97 -97
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import GridInspector from './GridInspector.svelte';
|
|
3
3
|
import Copy from '../Copy/Copy.svelte';
|
|
4
4
|
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
|
|
5
|
+
import { text } from '@sveltejs/kit';
|
|
5
6
|
let { showHeader = true, showNav = true, showArticleHeader = true, showPlayer = true, eyebrow = 'Wärmewende in Ihrer Gemeinde', title = 'Baden-Württemberg heizt noch größtenteils fossil', intro = 'Fast drei Viertel der privaten Heizungen in Baden-Württemberg liefen 2022 noch mit Öl und Gas. In Neubauten werden inzwischen überwiegend Wärmepumpen eingebaut, doch es gibt regionale Unterschiede.', showBreadcrumbs = true, showGrid = false, paragraphsAbove = 0, paragraphsBelow = 0, children } = $props();
|
|
6
7
|
const date = new Date();
|
|
7
8
|
let articleEl = $state();
|
|
@@ -73,27 +74,31 @@ let articleEl = $state();
|
|
|
73
74
|
{/if}
|
|
74
75
|
<div class="article-body">
|
|
75
76
|
{#if paragraphsAbove > 0}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
77
|
+
<div class="article-text above">
|
|
78
|
+
{#each { length: paragraphsAbove }}
|
|
79
|
+
<Copy as="p">
|
|
80
|
+
Das SWR Data Lab hat Kaufpreise, Fahrzeugdaten und Betriebskosten von über 5.500
|
|
81
|
+
Neuwagenmodellen von 2024 bis April 2025 aus dem ADAC-Autokatalog untersucht. Die
|
|
82
|
+
Analyse zeigt, wie teuer ein Elektroauto, Diesel oder Benziner der unteren
|
|
83
|
+
Mittelklasse beim Kauf und Betrieb über viele Jahre im Mittel ist.
|
|
84
|
+
</Copy>
|
|
85
|
+
{/each}
|
|
86
|
+
</div>
|
|
84
87
|
{/if}
|
|
85
88
|
<div class="embed">
|
|
86
89
|
{@render children?.()}
|
|
87
90
|
</div>
|
|
88
91
|
{#if paragraphsBelow > 0}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
92
|
+
<div class="article-text below">
|
|
93
|
+
{#each { length: paragraphsBelow }}
|
|
94
|
+
<Copy as="p">
|
|
95
|
+
Das SWR Data Lab hat Kaufpreise, Fahrzeugdaten und Betriebskosten von über 5.500
|
|
96
|
+
Neuwagenmodellen von 2024 bis April 2025 aus dem ADAC-Autokatalog untersucht. Die
|
|
97
|
+
Analyse zeigt, wie teuer ein Elektroauto, Diesel oder Benziner der unteren
|
|
98
|
+
Mittelklasse beim Kauf und Betrieb über viele Jahre im Mittel ist.
|
|
99
|
+
</Copy>
|
|
100
|
+
{/each}
|
|
101
|
+
</div>
|
|
97
102
|
{/if}
|
|
98
103
|
</div>
|
|
99
104
|
</article>
|
|
@@ -259,22 +264,31 @@ header {
|
|
|
259
264
|
.article-body {
|
|
260
265
|
display: contents;
|
|
261
266
|
}
|
|
262
|
-
|
|
263
|
-
|
|
267
|
+
|
|
268
|
+
.article-text {
|
|
264
269
|
grid-column: 1/13;
|
|
270
|
+
display: flex;
|
|
271
|
+
flex-flow: column;
|
|
272
|
+
gap: 1em;
|
|
273
|
+
}
|
|
274
|
+
.article-text.above {
|
|
275
|
+
margin-bottom: 1.5em;
|
|
276
|
+
}
|
|
277
|
+
.article-text.below {
|
|
278
|
+
margin-top: 1.5em;
|
|
265
279
|
}
|
|
266
280
|
@media (min-width: 640px) {
|
|
267
|
-
.article-
|
|
281
|
+
.article-text {
|
|
268
282
|
grid-column: 2/12;
|
|
269
283
|
}
|
|
270
284
|
}
|
|
271
285
|
@media (min-width: 1024px) {
|
|
272
|
-
.article-
|
|
286
|
+
.article-text {
|
|
273
287
|
grid-column: 3/11;
|
|
274
288
|
}
|
|
275
289
|
}
|
|
276
290
|
@media (min-width: 1440px) {
|
|
277
|
-
.article-
|
|
291
|
+
.article-text {
|
|
278
292
|
grid-column: 4/10;
|
|
279
293
|
}
|
|
280
294
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<script lang="ts">import {} from 'maplibre-gl';
|
|
2
|
+
import { onDestroy, onMount } from 'svelte';
|
|
2
3
|
import MapSource from '../Source';
|
|
3
4
|
import { getMapContext } from '../context.svelte.js';
|
|
4
5
|
import quadraticToPoints from './quadraticToPoints';
|
|
5
|
-
import { onDestroy } from 'svelte';
|
|
6
6
|
const { map } = $derived(getMapContext());
|
|
7
7
|
const { id, arrows = [], attribution = '' } = $props();
|
|
8
8
|
const ars = arrows.map((a) => {
|
|
9
9
|
return {
|
|
10
10
|
width: a.width || 10,
|
|
11
|
-
points: quadraticToPoints(a.a, a.b, a.c
|
|
11
|
+
points: quadraticToPoints(a.a, a.b, a.c),
|
|
12
12
|
headScale: a.headScale
|
|
13
13
|
};
|
|
14
14
|
});
|
|
@@ -58,7 +58,7 @@ let sourceSpec = $state({
|
|
|
58
58
|
const onZoom = () => {
|
|
59
59
|
sourceSpec = { ...sourceSpec, data: arrowsToJson(ars) };
|
|
60
60
|
};
|
|
61
|
-
|
|
61
|
+
onMount(() => {
|
|
62
62
|
map?.on('zoom', onZoom);
|
|
63
63
|
});
|
|
64
64
|
onDestroy(() => {
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
+
import type { V2 } from '../types';
|
|
1
2
|
/**
|
|
2
|
-
Given a quadratic
|
|
3
|
-
returns a series of
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
Below is a naive implementation but good enough for now. For a better approach see:
|
|
9
|
-
https://bit-101.com/blog/posts/2024-09-29/evenly-placed-points-on-bezier-curves
|
|
3
|
+
* Given a quadratic Bezier defined by points a, b and c
|
|
4
|
+
* returns a series of evenly-spaced points on the curve
|
|
5
|
+
*
|
|
6
|
+
* Sources:
|
|
7
|
+
* - https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves
|
|
8
|
+
* - https://bit-101.com/blog/posts/2024-09-29/evenly-placed-points-on-bezier-curves
|
|
10
9
|
*/
|
|
11
|
-
declare const quadraticToPoints: (a:
|
|
10
|
+
declare const quadraticToPoints: (a: V2, b: V2, c: V2, n?: number) => V2[];
|
|
12
11
|
export default quadraticToPoints;
|
|
@@ -1,21 +1,64 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
returns a series of n points on the curve
|
|
4
|
-
|
|
5
|
-
The quadratic bezier is: B(t) = (1-t)[(1-t)P0 + tP1] + t[(1-t)P1+tP2]
|
|
6
|
-
Source: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves
|
|
7
|
-
|
|
8
|
-
Below is a naive implementation but good enough for now. For a better approach see:
|
|
9
|
-
https://bit-101.com/blog/posts/2024-09-29/evenly-placed-points-on-bezier-curves
|
|
2
|
+
* Returns the euclidian distance between two points
|
|
10
3
|
*/
|
|
11
|
-
const
|
|
4
|
+
const distance = (a, b) => {
|
|
5
|
+
return Math.sqrt((b[0] - a[0]) ** 2 + (b[1] - a[1]) ** 2);
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Given a sorted array arr and a value, returns the index i of arr
|
|
9
|
+
* such that arr[i] < value && arr[i + 1] > value using binary search
|
|
10
|
+
*/
|
|
11
|
+
const getSortedIndex = (arr, v) => {
|
|
12
|
+
let low = 0, high = arr.length;
|
|
13
|
+
while (low < high) {
|
|
14
|
+
let mid = (low + high) >>> 1; // === Math.abs((low + high) * .5) but faster
|
|
15
|
+
if (arr[mid] < v)
|
|
16
|
+
low = mid + 1;
|
|
17
|
+
else
|
|
18
|
+
high = mid;
|
|
19
|
+
}
|
|
20
|
+
return low;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Given a polyline, returns n evenly-spaced points on the polyline
|
|
24
|
+
*/
|
|
25
|
+
const interpolatePolyline = (points, n) => {
|
|
26
|
+
let res = [], totalLength = 0, segments = [0];
|
|
27
|
+
for (let i = 0; i < points.length - 2; i++) {
|
|
28
|
+
totalLength += distance(points[i], points[i + 1]);
|
|
29
|
+
segments.push(totalLength);
|
|
30
|
+
}
|
|
31
|
+
for (let i = 0; i < n; i++) {
|
|
32
|
+
const d = totalLength * (i / n);
|
|
33
|
+
const si = getSortedIndex(segments, d);
|
|
34
|
+
const p0 = points[si];
|
|
35
|
+
const p1 = points[si + 1];
|
|
36
|
+
const sn = [p1[0] - p0[0], p1[1] - p0[1]];
|
|
37
|
+
const segmentFraction = (d - segments[si]) / distance(p0, p1);
|
|
38
|
+
res.push([p1[0] + sn[0] * segmentFraction, p1[1] + sn[1] * segmentFraction]);
|
|
39
|
+
}
|
|
40
|
+
return res;
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* Given a quadratic Bezier defined by points a, b and c
|
|
44
|
+
* returns a series of evenly-spaced points on the curve
|
|
45
|
+
*
|
|
46
|
+
* Sources:
|
|
47
|
+
* - https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves
|
|
48
|
+
* - https://bit-101.com/blog/posts/2024-09-29/evenly-placed-points-on-bezier-curves
|
|
49
|
+
*/
|
|
50
|
+
const quadraticToPoints = (a, b, c, n = 25) => {
|
|
12
51
|
let points = [];
|
|
52
|
+
// 1. Interpolate the quadratic bezier function to obtain an uneven polyline
|
|
13
53
|
for (let i = 0; i < n; i++) {
|
|
14
54
|
const t = i / n;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
55
|
+
points.push([
|
|
56
|
+
(1 - t) * ((1 - t) * a[0] + t * c[0]) + t * ((1 - t) * c[0] + t * b[0]),
|
|
57
|
+
(1 - t) * ((1 - t) * a[1] + t * c[1]) + t * ((1 - t) * c[1] + t * b[1])
|
|
58
|
+
]);
|
|
18
59
|
}
|
|
19
|
-
|
|
60
|
+
// 2. Interpolate the polyline from (1) to get evenly-spaced points
|
|
61
|
+
points = interpolatePolyline([...points, b], n);
|
|
62
|
+
return points;
|
|
20
63
|
};
|
|
21
64
|
export default quadraticToPoints;
|
package/dist/maplibre/types.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export type Layer = LineLayerSpecification | FillLayerSpecification | FillExtrus
|
|
|
3
3
|
export type GeocodingService = 'maptiler';
|
|
4
4
|
export type GeocodingCountry = 'de' | 'at';
|
|
5
5
|
export type GeocodingLanguage = 'de' | 'en';
|
|
6
|
+
export type V2 = [number, number];
|
|
6
7
|
export interface Location {
|
|
7
8
|
lat: number;
|
|
8
9
|
lng: number;
|
package/package.json
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
2
|
+
"name": "@swr-data-lab/components",
|
|
3
|
+
"description": "SWR Data Lab component library",
|
|
4
|
+
"version": "2.31.2",
|
|
5
|
+
"author": "SWR Data Lab",
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"access": "public"
|
|
10
|
+
},
|
|
11
|
+
"repository": {
|
|
12
|
+
"url": "https://github.com/SWRdata/components"
|
|
13
|
+
},
|
|
14
|
+
"scripts": {
|
|
15
|
+
"dev": "vite dev",
|
|
16
|
+
"build": "vite build",
|
|
17
|
+
"preview": "vite preview",
|
|
18
|
+
"package": "svelte-kit sync && svelte-package -i src && publint",
|
|
19
|
+
"prepublishOnly": "npm run package",
|
|
20
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
21
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
22
|
+
"storybook": "storybook dev -p 6006",
|
|
23
|
+
"start": "storybook dev -p 6006",
|
|
24
|
+
"sync": "svelte-kit sync",
|
|
25
|
+
"build-storybook": "storybook build --disable-telemetry",
|
|
26
|
+
"test-storybook": "vitest run --project=storybook",
|
|
27
|
+
"test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
|
|
28
|
+
"semantic-release": "semantic-release"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"svelte": ">=5.0.0"
|
|
32
|
+
},
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"@maplibre/maplibre-gl-geocoder": "1.9.1",
|
|
35
|
+
"@maplibre/maplibre-gl-inspect": "1.7.1",
|
|
36
|
+
"maplibre-gl": "5.7.0",
|
|
37
|
+
"svelte-select": "5.8.3"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@semantic-release/changelog": "6.0.3",
|
|
41
|
+
"@semantic-release/git": "10.0.1",
|
|
42
|
+
"@semantic-release/npm": "13.1.1",
|
|
43
|
+
"@storybook/addon-docs": "10.0.4",
|
|
44
|
+
"@storybook/addon-links": "10.0.4",
|
|
45
|
+
"@storybook/addon-svelte-csf": "^5.0.10",
|
|
46
|
+
"@storybook/addon-vitest": "10.0.4",
|
|
47
|
+
"@storybook/sveltekit": "10.0.4",
|
|
48
|
+
"@storybook/test-runner": "^0.24.1",
|
|
49
|
+
"@sveltejs/adapter-auto": "7.0.0",
|
|
50
|
+
"@sveltejs/enhanced-img": "0.8.4",
|
|
51
|
+
"@sveltejs/kit": "2.48.4",
|
|
52
|
+
"@sveltejs/package": "2.5.4",
|
|
53
|
+
"@sveltejs/vite-plugin-svelte": "6.2.1",
|
|
54
|
+
"@types/geojson": "7946.0.16",
|
|
55
|
+
"@versatiles/style": "5.7.0",
|
|
56
|
+
"@vitest/browser": "4.0.6",
|
|
57
|
+
"@vitest/coverage-v8": "4.0.6",
|
|
58
|
+
"@vueless/storybook-dark-mode": "9.0.8",
|
|
59
|
+
"concurrently": "9.2.1",
|
|
60
|
+
"http-server": "14.1.1",
|
|
61
|
+
"mdx-mermaid": "2.0.3",
|
|
62
|
+
"playwright": "1.56.1",
|
|
63
|
+
"publint": "0.3.12",
|
|
64
|
+
"sass": "1.93.2",
|
|
65
|
+
"sass-embedded": "1.93.2",
|
|
66
|
+
"semantic-release": "25.0.1",
|
|
67
|
+
"storybook": "10.0.4",
|
|
68
|
+
"svelte": "5.33.6",
|
|
69
|
+
"svelte-check": "4.3.2",
|
|
70
|
+
"svelte-preprocess": "6.0.3",
|
|
71
|
+
"typescript": "5.9.2",
|
|
72
|
+
"vite": "7.1.11",
|
|
73
|
+
"vitest": "4.0.6",
|
|
74
|
+
"@vitest/browser-playwright": "4.0.6",
|
|
75
|
+
"wait-on": "8.0.3"
|
|
76
|
+
},
|
|
77
|
+
"overrides": {
|
|
78
|
+
"storybook": "$storybook"
|
|
79
|
+
},
|
|
80
|
+
"release": {
|
|
81
|
+
"plugins": [
|
|
82
|
+
"@semantic-release/commit-analyzer",
|
|
83
|
+
"@semantic-release/release-notes-generator",
|
|
84
|
+
"@semantic-release/npm"
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
"files": [
|
|
88
|
+
"dist/"
|
|
89
|
+
],
|
|
90
|
+
"sideEffects": [
|
|
91
|
+
"**/*.css"
|
|
92
|
+
],
|
|
93
|
+
"exports": {
|
|
94
|
+
".": {
|
|
95
|
+
"types": "./dist/index.d.ts",
|
|
96
|
+
"svelte": "./dist/index.js"
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
99
|
}
|