Skip to content

Commit 78917ae

Browse files
author
Marko Petzold
committed
chore: update package dependencies and scripts; add theme support to WidgetMapbox
- Updated dependencies in package.json for improved stability and features. - Changed start script to use npm run watch for better development experience. - Added theme properties to WidgetMapbox for dynamic styling based on theme input. - Enhanced rendering logic to apply theme colors to the widget's background and text. - Updated default-data.json to include title and subtitle for better context.
1 parent 381a7f2 commit 78917ae

7 files changed

Lines changed: 1552 additions & 701 deletions

File tree

‎demo/index.html‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
padding: 0;
1111
width: 100%;
1212
height: 100%;
13+
background-color: aliceblue;
1314
}
1415

1516
* {
@@ -18,16 +19,27 @@
1819
}
1920
</style>
2021
</head>
22+
2123
<body>
2224
<div id="demo"></div>
23-
24-
<script src="./ObjectRandomizer.js"></script>
25+
<script src="https://storage.googleapis.com/reswarm-images/ObjectRandomizer.js"></script>
2526

2627
<script type="module">
2728
import { html, render } from 'lit'
28-
import '../dist/src/widget-mapbox.js'
29-
const response = await fetch('../src/default-data.json')
30-
const data = await response.json()
29+
import '../dist/widget-mapbox.js'
30+
const data = await fetch('../src/default-data.json').then((res) => res.json())
31+
const themeObject = await fetch('themes/vintage.json').then((res) => res.json())
32+
const theme = { theme_name: 'vintage', theme_object: themeObject }
33+
render(
34+
html`
35+
<widget-mapbox-1.5.3 .theme="${theme}" .inputData=${data}>
36+
web component is not registered. Make sure to use the tag with the correct version
37+
string from the package.json
38+
</widget-mapbox-1.5.3>
39+
`,
40+
document.getElementById('demo')
41+
)
42+
const widget = document.getElementById('demo').children[0]
3143
const keyPathsToRandomize = [
3244
'dataseries.0.data.1.value',
3345
'dataseries.0.data.5.value',
@@ -52,19 +64,12 @@
5264
'dataseries.1.data.15.value',
5365
'settings.title'
5466
]
55-
// check out https://geojson.io/ to generate example data
56-
setInterval(() => {
67+
const inter = setInterval(() => {
5768
const randomizedObj = randomizeObjectValues(data, keyPathsToRandomize)
5869

59-
// console.log('random', randomizedObj.dataseries[1].data[14]);
60-
render(
61-
html`
62-
<widget-mapbox-versionplaceholder .inputData=${randomizedObj}>
63-
web component not registered
64-
</widget-mapbox-versionplaceholder>
65-
`,
66-
document.querySelector('#demo')
67-
)
70+
// console.log('random', randomizedObj.dataseries[0].data[0])
71+
widget.inputData = randomizedObj
72+
// clearInterval(inter)
6873
}, 1000)
6974
</script>
7075
</body>

0 commit comments

Comments
 (0)