@record-evolution/widget-mapbox 1.5.2 → 1.5.4

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-mapbox",
     "license": "MIT",
     "author": "widget-mapbox",
-    "version": "1.5.2",
+    "version": "1.5.4",
     "type": "module",
     "main": "dist/widget-mapbox.js",
     "types": "dist/src/widget-mapbox.d.ts",
@@ -13,51 +13,49 @@
     ],
     "scripts": {
         "analyze": "cem analyze --litelement",
-        "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+        "start": "concurrently -k -r \"npm run watch\" \"wds\"",
         "build": "rollup -c rollup.config.js",
         "watch": "rollup -w -c rollup.config.js",
         "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-mapbox",
         "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-mapbox && npm i @record-evolution/widget-mapbox",
         "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
-        "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-        "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
         "release": "npm version patch --tag-version-prefix='' && git push && git push --tag",
         "cors": "gcloud storage buckets update gs://reswarm-images --cors-file=src/cors-config.json"
     },
     "dependencies": {
-        "@types/geojson": "^7946.0.14",
-        "@types/mapbox-gl": "^3.4.0",
-        "lit": "^3.2.0",
-        "mapbox-gl": "^3.7.0",
+        "@types/geojson": "^7946.0.16",
+        "@types/mapbox-gl": "^3.4.1",
+        "lit": "^3.3.0",
+        "mapbox-gl": "^3.13.0",
         "tinycolor2": "^1.6.0"
     },
     "devDependencies": {
-        "@babel/plugin-syntax-import-assertions": "^7.25.7",
-        "@custom-elements-manifest/analyzer": "^0.10.3",
+        "@babel/plugin-syntax-import-assertions": "^7.27.1",
+        "@custom-elements-manifest/analyzer": "^0.10.4",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^28.0.0",
+        "@rollup/plugin-commonjs": "^28.0.6",
         "@rollup/plugin-json": "^6.1.0",
-        "@rollup/plugin-node-resolve": "^15.3.0",
-        "@rollup/plugin-replace": "^6.0.1",
-        "@rollup/plugin-typescript": "^12.1.0",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-typescript": "^12.1.3",
         "@types/glob": "^8.1.0",
         "@types/tinycolor2": "^1.4.6",
-        "@typescript-eslint/eslint-plugin": "^8.8.0",
-        "@typescript-eslint/parser": "^8.8.0",
+        "@typescript-eslint/eslint-plugin": "^8.34.1",
+        "@typescript-eslint/parser": "^8.34.1",
         "@web/dev-server": "^0.4.6",
-        "concurrently": "^9.0.1",
-        "eslint": "^9.12.0",
-        "eslint-config-prettier": "^9.1.0",
-        "glob": "^11.0.0",
-        "husky": "^9.1.6",
-        "json-schema-to-typescript": "^15.0.2",
-        "lint-staged": "^15.2.10",
-        "minimatch": "3.1.2",
-        "prettier": "^3.3.3",
-        "rollup": "^4.24.0",
+        "concurrently": "^9.1.2",
+        "eslint": "^9.29.0",
+        "eslint-config-prettier": "^10.1.5",
+        "glob": "^11.0.3",
+        "husky": "^9.1.7",
+        "json-schema-to-typescript": "^15.0.4",
+        "lint-staged": "^16.1.2",
+        "minimatch": "10.0.3",
+        "prettier": "^3.5.3",
+        "rollup": "^4.43.0",
         "rollup-plugin-copy": "^3.5.0",
-        "tslib": "^2.7.0",
-        "typescript": "5.3.2"
+        "tslib": "^2.8.1",
+        "typescript": "5.8.3"
     },
     "repository": {
         "type": "git",

package/src/default-data.json

@@ -1,4 +1,6 @@
 {
+    "title": "Test",
+    "subTitle": "Subtitle",
     "style": "light-v11",
     "showLegend": false,
     "follow": false,

package/src/widget-mapbox.ts

@@ -10,10 +10,17 @@ import { LayerBaseColor, InputData } from './definition-schema.js'
 
 type Dataseries = Exclude<InputData['dataseries'], undefined>[number]
 type Point = Exclude<Dataseries['data'], undefined>[number]
-
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
 export class WidgetMapbox extends LitElement {
     @property({ type: Object })
     inputData?: InputData
+
+    @property({ type: Object })
+    theme?: Theme
+
     @state()
     private map: any | undefined = undefined
 
@@ -26,6 +33,10 @@ export class WidgetMapbox extends LitElement {
     @state()
     colors: any = new Map()
 
+    @state() private themeBgColor?: string
+    @state() private themeTitleColor?: string
+    @state() private themeSubtitleColor?: string
+
     public version: string = 'versionplaceholder'
     private mapLoaded: boolean = false
     private resizeObserver: ResizeObserver
@@ -43,7 +54,7 @@ export class WidgetMapbox extends LitElement {
 
     disconnectedCallback() {
         super.disconnectedCallback()
-        if(this.resizeObserver) {
+        if (this.resizeObserver) {
             this.resizeObserver.disconnect()
         }
     }
@@ -52,6 +63,16 @@ export class WidgetMapbox extends LitElement {
         if (changedProperties.has('inputData')) {
             this.transformInputData()
         }
+
+        if (changedProperties.has('theme')) {
+            const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
+            const cssBgColor = getComputedStyle(this).getPropertyValue('--re-background-color').trim()
+            this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
+            this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
+            this.themeSubtitleColor =
+                cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
+        }
+
         super.update(changedProperties)
     }
 
@@ -67,16 +88,33 @@ export class WidgetMapbox extends LitElement {
 
         this.customDebounce = setTimeout(() => {
             this.map?.resize()
-            this.fitBounds() 
+            this.fitBounds()
         }, 300)
     }
 
+    isArrayOfTwoNumbers(v: any) {
+        return (
+            Array.isArray(v) && // Check if it's an array
+            v.length <= 3 && // Check if the array has exactly two elements
+            typeof v[0] === 'number' && // Check if the first element is a number
+            typeof v[1] === 'number' // Check if the second element is a number
+        )
+    }
+
     fitBounds() {
         const bounds = new mapboxgl.LngLatBounds()
         this.dataSources.forEach((col: GeoJSON.FeatureCollection) => {
             col.features.forEach((f) => {
                 // @ts-ignore
-                if (f.geometry.coordinates?.length) bounds.extend(f.geometry.coordinates)
+                if (this.isArrayOfTwoNumbers(f.geometry?.coordinates)) {
+                    // @ts-ignore
+                    bounds.extend(f.geometry.coordinates)
+                } else {
+                    // @ts-ignore
+                    for (const lnglat of f.geometry.coordinates) {
+                        if (this.isArrayOfTwoNumbers(lnglat)) bounds.extend(lnglat)
+                    }
+                }
             })
         })
         if (bounds.isEmpty()) {
@@ -129,7 +167,7 @@ export class WidgetMapbox extends LitElement {
         // Filter for latest Values
         this.dataSets.forEach((ds) => {
             if (ds?.latestValues && ds?.latestValues > 0) {
-                ds.data = ds?.data?.slice(0, ds.latestValues ?? 1) ?? []
+                ds.data = ds?.data?.slice(-ds.latestValues || -1) ?? []
             }
         })
 
@@ -522,9 +560,7 @@ export class WidgetMapbox extends LitElement {
     static styles = css`
         :host {
             display: block;
-            color: var(--re-bar-text-color, #000);
             font-family: sans-serif;
-            padding: 16px;
             box-sizing: border-box;
             margin: auto;
         }
@@ -559,6 +595,8 @@ export class WidgetMapbox extends LitElement {
         .wrapper {
             display: flex;
             flex-direction: column;
+            box-sizing: border-box;
+            padding: 16px;
             height: 100%;
             width: 100%;
         }
@@ -586,6 +624,16 @@ export class WidgetMapbox extends LitElement {
         a.mapboxgl-ctrl-logo {
             display: none;
         }
+
+        .no-data {
+            font-size: 20px;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+        }
     `
 
     render() {
@@ -594,16 +642,18 @@ export class WidgetMapbox extends LitElement {
                 href="https://api.mapbox.com/mapbox-gl-js/v${mapboxgl.version}/mapbox-gl.css"
                 rel="stylesheet"
             />
-            <div class="wrapper">
-                <header
-                    class="paging"
-                    ?active=${this.inputData?.title || this.inputData?.subTitle}
-                >
+            <div
+                class="wrapper"
+                style="background-color: ${this.themeBgColor}; color: ${this.themeTitleColor}"
+            >
+                <header class="paging" ?active=${this.inputData?.title || this.inputData?.subTitle}>
                     <div class="title">
-                        <h3 class="paging" ?active=${this.inputData?.title}>
-                            ${this.inputData?.title}
-                        </h3>
-                        <p class="paging" ?active=${this.inputData?.subTitle}>
+                        <h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
+                        <p
+                            class="paging"
+                            ?active=${this.inputData?.subTitle}
+                            style="color: ${this.themeSubtitleColor}"
+                        >
                             ${this.inputData?.subTitle}
                         </p>
                     </div>
@@ -624,7 +674,8 @@ export class WidgetMapbox extends LitElement {
                         )}
                     </div>
                 </header>
-                <div id="map"></div>
+                <div class="paging no-data" ?active=${!this.dataSets.length}>No Data</div>
+                <div id="map" class="paging" ?active=${this.dataSets.length}></div>
             </div>
         `
     }