@swr-data-lab/components 1.15.1 → 2.0.0

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.
Files changed (9) hide show
  1. package/dist/ChartList/ChartList.svelte +30 -11
  2. package/dist/maplibre/Map/Map.svelte +12 -3
  3. package/dist/maplibre/MapStyle/SWRDataLabLight.d.ts +7 -1
  4. package/dist/maplibre/MapStyle/SWRDataLabLight.js +69 -45
  5. package/dist/maplibre/MapStyle/components/Buildings.js +36 -16
  6. package/dist/maplibre/MapStyle/tokens.d.ts +1 -0
  7. package/dist/maplibre/MapStyle/tokens.js +2 -1
  8. package/dist/maplibre/types.d.ts +3 -2
  9. package/package.json +17 -17
package/dist/ChartList/ChartList.svelte CHANGED
@@ -1,10 +1,10 @@
1
- <script lang="ts">import { dev } from '$app/environment';
1
+ <script lang="ts">"use strict";
2
2
  let { project, charts, baseUrl } = $props();
3
3
  </script>
4
4
 
5
5
  <main>
6
6
  <div class="inner">
7
- <h1 data-testid="chartlist-project-title">Grafiken für {project}</h1>
7
+ <h1 data-testid="chartlist-project-title">Grafiken für <em>{project}</em></h1>
8
8
  {#if charts}
9
9
  <table>
10
10
  <thead>
@@ -19,7 +19,7 @@ let { project, charts, baseUrl } = $props();
19
19
  {#each charts as chart}
20
20
  <tr>
21
21
  <td>
22
- <a href="./{chart.slug}{dev ? '' : '.html'}">{chart.title}</a>
22
+ <a href="./{chart.slug}">{chart.title}</a>
23
23
  </td>
24
24
  {#if baseUrl}
25
25
  <td>
@@ -32,17 +32,23 @@ let { project, charts, baseUrl } = $props();
32
32
  </table>
33
33
  {/if}
34
34
  </div>
35
+ <p class="notes">Nutze die "Embed URL" um Grafiken in Sophora einzubinden.</p>
35
36
  </main>
36
37
 
37
38
  <style>main {
38
39
  display: flex;
39
40
  justify-content: center;
40
- align-items: center;
41
+ align-items: flex-start;
41
42
  flex-flow: column;
42
43
  font-family: var(--swr-sans);
43
44
  font-size: var(--fs-small-1);
44
- max-width: 60rem;
45
+ max-width: 40rem;
45
46
  margin: 0 auto;
47
+ height: 90vh;
48
+ }
49
+ main * {
50
+ margin: 0;
51
+ padding: 0;
46
52
  }
47
53
 
48
54
  .inner {
@@ -51,11 +57,16 @@ let { project, charts, baseUrl } = $props();
51
57
  }
52
58
 
53
59
  h1 {
54
- font-size: var(--fs-small-1);
55
- width: 100%;
60
+ font-size: var(--fs-base);
56
61
  border-bottom: 1px solid black;
57
62
  padding-bottom: 0.2em;
58
- background-color: rgb(233, 238, 245);
63
+ background-color: rgb(255, 255, 255);
64
+ }
65
+ h1 em {
66
+ background: rgb(234, 239, 184);
67
+ font-style: normal;
68
+ padding: 0 0.3em;
69
+ border-radius: 2px;
59
70
  }
60
71
 
61
72
  table {
@@ -66,6 +77,7 @@ table {
66
77
 
67
78
  a {
68
79
  display: block;
80
+ color: inherit;
69
81
  text-decoration: none;
70
82
  }
71
83
 
@@ -81,7 +93,7 @@ th {
81
93
  }
82
94
 
83
95
  tr {
84
- border-bottom: 1px solid black;
96
+ border-bottom: 1px solid rgb(150, 150, 150);
85
97
  }
86
98
  tr:last-child {
87
99
  border-bottom: 0;
@@ -89,8 +101,10 @@ tr:last-child {
89
101
 
90
102
  input {
91
103
  display: block;
92
- width: 100%;
93
- padding: 0.1em 0.3em;
104
+ font-family: monospace;
105
+ width: calc(100% - 0.6em);
106
+ padding: 0.1em 0.2em;
107
+ font-size: inherit;
94
108
  }
95
109
 
96
110
  a:hover,
@@ -100,4 +114,9 @@ a:focus-visible {
100
114
 
101
115
  a:last-child {
102
116
  border-bottom: 0;
117
+ }
118
+
119
+ .notes {
120
+ margin-top: 0.5em;
121
+ font-size: var(--fs-small-2);
103
122
  }</style>
package/dist/maplibre/Map/Map.svelte CHANGED
@@ -3,8 +3,17 @@ import { onMount, onDestroy, getContext, hasContext } from 'svelte';
3
3
  import { createMapContext } from '../context.svelte.js';
4
4
  import {} from '../types';
5
5
  import FallbackStyle from './FallbackStyle';
6
- let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zoom = $bindable(), center = $bindable(), pitch = $bindable(0), bearing = $bindable(0), loading = $bindable(true), projection = { type: 'mercator' }, allowRotation = false, allowZoom = true, showDebug = false, initialLocation = { lat: 51.3, lng: 10.2, zoom: 5 } } = $props();
6
+ let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zoom = $bindable(), center = $bindable(), pitch = $bindable(0), bearing = $bindable(0), loading = $bindable(true), projection = { type: 'mercator' }, allowRotation = false, allowZoom = true, showDebug = false, initialLocation: receivedInitialLocation } = $props();
7
7
  let container;
8
+ // Merge initial location with default object so individual
9
+ // properties (like pitch) can be omitted by the caller
10
+ let initialLocation = {
11
+ lat: 51.3,
12
+ lng: 10.2,
13
+ zoom: 5,
14
+ pitch: 0,
15
+ ...receivedInitialLocation
16
+ };
8
17
  const mapContext = createMapContext();
9
18
  if (getContext('initialLocation') !== undefined && getContext('initialLocation') !== false) {
10
19
  initialLocation = getContext('initialLocation');
@@ -15,11 +24,11 @@ onMount(() => {
15
24
  style,
16
25
  minZoom,
17
26
  maxZoom,
18
- pitch,
19
27
  bearing,
20
28
  attributionControl: false, // Added via component
21
29
  center: [initialLocation.lng, initialLocation.lat],
22
30
  zoom: initialLocation.zoom,
31
+ pitch: initialLocation.pitch,
23
32
  ...options
24
33
  });
25
34
  mapContext.map.on('load', () => {
@@ -66,7 +75,7 @@ $effect(() => {
66
75
  {/if}
67
76
  {#if showDebug}
68
77
  <pre class="debug">
69
- {Object.entries({ ...center, zoom, allowZoom, allowRotation })
78
+ {Object.entries({ ...center, zoom, pitch, allowZoom, allowRotation })
70
79
  .map(([key, val]) => `${key}: ${val}`)
71
80
  .join('\n')}</pre>
72
81
  {/if}
package/dist/maplibre/MapStyle/SWRDataLabLight.d.ts CHANGED
@@ -1,3 +1,9 @@
1
1
  import type { StyleSpecification } from 'maplibre-gl';
2
- declare const style: StyleSpecification;
2
+ interface StyleOptions {
3
+ enableBuildingExtrusions?: boolean;
4
+ }
5
+ interface styleFunction {
6
+ (options?: StyleOptions): StyleSpecification;
7
+ }
8
+ declare const style: styleFunction;
3
9
  export default style;
package/dist/maplibre/MapStyle/SWRDataLabLight.js CHANGED
@@ -5,56 +5,80 @@ import makeTransit from './components/Transit';
5
5
  import makePlaceLabels from './components/PlaceLabels';
6
6
  import makeWalking from './components/Walking';
7
7
  import makeRoads from './components/Roads';
8
- const { buildings } = makeBuildings();
8
+ const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings();
9
9
  const { landuse } = makeLanduse();
10
10
  const { placeLabels } = makePlaceLabels();
11
11
  const { admin } = makeAdmin();
12
12
  const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit();
13
13
  const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking();
14
14
  const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads();
15
- const style = {
16
- version: 8,
17
- name: 'swr-datalab-light',
18
- metadata: { license: 'https://creativecommons.org/publicdomain/zero/1.0/' },
19
- glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf',
20
- sources: {
21
- 'versatiles-osm': {
22
- attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
23
- tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
24
- bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
25
- type: 'vector',
26
- scheme: 'xyz',
27
- minzoom: 0,
28
- maxzoom: 14
29
- }
30
- },
31
- sky: {
32
- 'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 5, 0.1, 7, 0]
33
- },
34
- layers: [
35
- // 1. Landuse
36
- ...landuse,
37
- ...airports,
38
- // 2. Buildings
39
- ...buildings,
40
- // 3. Tunnels
41
- ...walkingTunnels,
42
- ...roadTunnels,
43
- ...transitTunnels,
44
- // 4. Surface ways
45
- ...walkingSurface,
46
- ...roadSurface,
47
- ...transitSurface,
48
- // 5. Bridges ways
49
- ...walkingBridges,
50
- ...roadBridges,
51
- ...transitBridges,
52
- // 6. Admin boundaries
53
- ...admin,
54
- // 7. Labels
55
- ...walkingLabels,
56
- ...roadLabels,
57
- ...placeLabels
58
- ]
15
+ const style = (opts) => {
16
+ const options = {
17
+ enableBuildingExtrusions: false,
18
+ ...opts
19
+ };
20
+ return {
21
+ version: 8,
22
+ name: 'swr-datalab-light',
23
+ metadata: { license: 'https://creativecommons.org/publicdomain/zero/1.0/' },
24
+ glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf',
25
+ sources: {
26
+ 'versatiles-osm': {
27
+ attribution: '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
28
+ tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
29
+ bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
30
+ type: 'vector',
31
+ scheme: 'xyz',
32
+ minzoom: 0,
33
+ maxzoom: 14
34
+ },
35
+ ...(options.enableBuildingExtrusions && {
36
+ 'basemap-de': {
37
+ attribution: 'GeoBasis-DE',
38
+ type: 'vector',
39
+ bounds: [5.8, 47.2, 15.1, 55.1],
40
+ maxzoom: 15,
41
+ minzoom: 0,
42
+ scheme: 'xyz',
43
+ tiles: [
44
+ 'https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v2/bm_web_de_3857/{z}/{x}/{y}.pbf'
45
+ ]
46
+ }
47
+ })
48
+ },
49
+ sky: {
50
+ 'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 5, 0.1, 7, 0]
51
+ },
52
+ light: { anchor: 'viewport', color: 'white', intensity: 0.175 },
53
+ layers: [
54
+ // 1. Landuse
55
+ ...landuse,
56
+ ...airports,
57
+ // 2. Building footprints + Structures (ie. bridges)
58
+ ...(!options.enableBuildingExtrusions ? [buildingFootprints] : []),
59
+ ...(options.enableBuildingExtrusions ? [structureExtrusions] : []),
60
+ // 3. Tunnels
61
+ ...walkingTunnels,
62
+ ...roadTunnels,
63
+ ...transitTunnels,
64
+ // 4. Surface ways
65
+ ...walkingSurface,
66
+ ...roadSurface,
67
+ ...transitSurface,
68
+ // 5. Bridges ways
69
+ ...walkingBridges,
70
+ ...roadBridges,
71
+ ...transitBridges,
72
+ // 6. Admin boundaries
73
+ ...admin,
74
+ // 7. Labels
75
+ ...walkingLabels,
76
+ ...roadLabels,
77
+ // 8. Building extrusions
78
+ ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
79
+ // 8. Point labels
80
+ ...placeLabels
81
+ ]
82
+ };
59
83
  };
60
84
  export default style;
package/dist/maplibre/MapStyle/components/Buildings.js CHANGED
@@ -1,21 +1,41 @@
1
1
  import {} from '../../types';
2
+ import tokens from '../tokens';
3
+ const extrusionLayer = {
4
+ source: 'basemap-de',
5
+ type: 'fill-extrusion',
6
+ minzoom: 14,
7
+ maxzoom: 20,
8
+ paint: {
9
+ 'fill-extrusion-color': tokens.building,
10
+ 'fill-extrusion-opacity': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, 1],
11
+ 'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, ['get', 'hoehe']]
12
+ }
13
+ };
2
14
  export default function makeBuildings() {
3
- const buildings = [
4
- {
5
- id: 'building-fill',
6
- type: 'fill',
7
- source: 'versatiles-osm',
8
- 'source-layer': 'buildings',
9
- paint: {
10
- 'fill-color': 'hsl(240, 4%, 95%)',
11
- 'fill-opacity': {
12
- stops: [
13
- [14, 0],
14
- [15, 1]
15
- ]
16
- }
15
+ const buildingFootprints = {
16
+ id: 'building-footprints',
17
+ type: 'fill',
18
+ source: 'versatiles-osm',
19
+ 'source-layer': 'buildings',
20
+ paint: {
21
+ 'fill-color': tokens.building,
22
+ 'fill-opacity': {
23
+ stops: [
24
+ [14, 0],
25
+ [15, 1]
26
+ ]
17
27
  }
18
28
  }
19
- ];
20
- return { buildings };
29
+ };
30
+ const structureExtrusions = {
31
+ id: 'building-extrusions-structures',
32
+ 'source-layer': 'Bauwerksflaeche',
33
+ ...extrusionLayer
34
+ };
35
+ const buildingExtrusions = {
36
+ id: 'building-extrusions-buildings',
37
+ 'source-layer': 'Gebaeudeflaeche',
38
+ ...extrusionLayer
39
+ };
40
+ return { buildingFootprints, buildingExtrusions, structureExtrusions };
21
41
  }
package/dist/maplibre/MapStyle/tokens.d.ts CHANGED
@@ -16,5 +16,6 @@ declare const tokens: {
16
16
  street_tertiary_outline: string;
17
17
  label_primary: string;
18
18
  label_secondary: string;
19
+ building: string;
19
20
  };
20
21
  export default tokens;
package/dist/maplibre/MapStyle/tokens.js CHANGED
@@ -15,6 +15,7 @@ const tokens = {
15
15
  street_tertiary: 'hsl(0, 0%, 95%)',
16
16
  street_tertiary_outline: 'hsl(0, 0%, 50%)',
17
17
  label_primary: 'rgb(10, 10, 11)',
18
- label_secondary: 'hsl(240, 2%, 20%)'
18
+ label_secondary: 'hsl(240, 2%, 20%)',
19
+ building: '#f3f2f1'
19
20
  };
20
21
  export default tokens;
package/dist/maplibre/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { FillLayerSpecification, LineLayerSpecification } from 'maplibre-gl';
2
- export type Layer = LineLayerSpecification | FillLayerSpecification;
1
+ import type { FillExtrusionLayerSpecification, FillLayerSpecification, LineLayerSpecification } from 'maplibre-gl';
2
+ export type Layer = LineLayerSpecification | FillLayerSpecification | FillExtrusionLayerSpecification;
3
3
  export type GeocodingService = 'maptiler';
4
4
  export type GeocodingCountry = 'de' | 'at';
5
5
  export type GeocodingLanguage = 'de' | 'en';
@@ -7,4 +7,5 @@ export interface Location {
7
7
  lat: number;
8
8
  lng: number;
9
9
  zoom: number;
10
+ pitch?: number;
10
11
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@swr-data-lab/components",
3
3
  "description": "SWR Data Lab component library",
4
- "version": "1.15.1",
4
+ "version": "2.0.0",
5
5
  "author": "SWR Data Lab",
6
6
  "license": "UNLICENSED",
7
7
  "type": "module",
@@ -38,29 +38,29 @@
38
38
  "devDependencies": {
39
39
  "@semantic-release/changelog": "^6.0.3",
40
40
  "@semantic-release/git": "^10.0.1",
41
- "@semantic-release/npm": "^12.0.1",
42
- "@storybook/addon-docs": "^9.0.3",
43
- "@storybook/addon-links": "^9.0.3",
44
- "@storybook/addon-svelte-csf": "^5.0.3",
45
- "@storybook/addon-vitest": "^9.0.3",
46
- "@storybook/sveltekit": "^9.0.3",
47
- "@storybook/test-runner": "^0.22.0",
41
+ "@semantic-release/npm": "^12.0.2",
42
+ "@storybook/addon-docs": "^9.0.15",
43
+ "@storybook/addon-links": "^9.0.15",
44
+ "@storybook/addon-svelte-csf": "^5.0.4",
45
+ "@storybook/addon-vitest": "^9.0.15",
46
+ "@storybook/sveltekit": "^9.0.15",
47
+ "@storybook/test-runner": "^0.23.0",
48
48
  "@sveltejs/adapter-auto": "^6.0.1",
49
- "@sveltejs/kit": "^2.0.0",
50
- "@sveltejs/package": "^2.3.11",
51
- "@sveltejs/vite-plugin-svelte": "^5.0.3",
49
+ "@sveltejs/kit": "^2.22.2",
50
+ "@sveltejs/package": "^2.3.12",
51
+ "@sveltejs/vite-plugin-svelte": "^5.1.0",
52
52
  "@versatiles/style": "^5.6.0",
53
- "@vitest/browser": "^3.1.4",
54
- "@vitest/coverage-v8": "^3.1.4",
55
- "concurrently": "^9.0.1",
53
+ "@vitest/browser": "^3.2.4",
54
+ "@vitest/coverage-v8": "^3.2.4",
55
+ "concurrently": "^9.2.0",
56
56
  "http-server": "^14.1.1",
57
57
  "mdx-mermaid": "^2.0.3",
58
58
  "playwright": "^1.51.1",
59
59
  "publint": "^0.3.12",
60
60
  "sass": "^1.89.1",
61
- "sass-embedded": "^1.89.0",
62
- "semantic-release": "^24.2.5",
63
- "storybook": "^9.0.0",
61
+ "sass-embedded": "^1.89.2",
62
+ "semantic-release": "^24.2.6",
63
+ "storybook": "^9.0.15",
64
64
  "svelte-preprocess": "^6.0.3",
65
65
  "svelte": "^5.23.0",
66
66
  "svelte-check": "^4.0.0",