@record-evolution/widget-mapbox 1.4.20 → 1.5.1

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-mapbox",
     "license": "MIT",
     "author": "widget-mapbox",
-    "version": "1.4.20",
+    "version": "1.5.1",
     "type": "module",
     "main": "dist/widget-mapbox.js",
     "types": "dist/src/widget-mapbox.d.ts",
@@ -23,37 +23,39 @@
         "cors": "gcloud storage buckets update gs://reswarm-images --cors-file=src/cors-config.json"
     },
     "dependencies": {
-        "@types/geojson": "^7946.0.12",
-        "@types/mapbox-gl": "^2.7.18",
-        "lit": "^3.0.2",
-        "mapbox-gl": "^2.15.0",
+        "@types/geojson": "^7946.0.14",
+        "@types/mapbox-gl": "^3.4.0",
+        "lit": "^3.2.0",
+        "mapbox-gl": "^3.7.0",
         "tinycolor2": "^1.6.0"
     },
     "devDependencies": {
-        "@babel/plugin-syntax-import-assertions": "^7.22.5",
-        "@custom-elements-manifest/analyzer": "^0.9.0",
-        "@open-wc/eslint-config": "^12.0.2",
+        "@babel/plugin-syntax-import-assertions": "^7.25.7",
+        "@custom-elements-manifest/analyzer": "^0.10.3",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^25.0.7",
-        "@rollup/plugin-json": "^6.0.1",
-        "@rollup/plugin-node-resolve": "^15.2.3",
-        "@rollup/plugin-replace": "^5.0.5",
-        "@rollup/plugin-typescript": "^11.1.5",
+        "@rollup/plugin-commonjs": "^28.0.0",
+        "@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",
+        "@types/glob": "^8.1.0",
         "@types/tinycolor2": "^1.4.6",
-        "@typescript-eslint/eslint-plugin": "^6.9.1",
-        "@typescript-eslint/parser": "^6.9.1",
-        "@web/dev-server": "^0.4.0",
-        "concurrently": "^8.2.2",
-        "eslint": "^8.53.0",
-        "eslint-config-prettier": "^9.0.0",
-        "husky": "^8.0.3",
-        "json-schema-to-typescript": "^13.1.1",
-        "lint-staged": "^15.0.2",
-        "prettier": "^3.0.3",
-        "rollup": "^3.21.0",
+        "@typescript-eslint/eslint-plugin": "^8.8.0",
+        "@typescript-eslint/parser": "^8.8.0",
+        "@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",
         "rollup-plugin-copy": "^3.5.0",
-        "tslib": "^2.6.2",
-        "typescript": "^5.2.2"
+        "tslib": "^2.7.0",
+        "typescript": "5.3.2"
     },
     "repository": {
         "type": "git",

package/src/default-data.json

@@ -1,9 +1,7 @@
 {
-    "settings": {
-        "style": "light-v11",
-        "showLegend": false,
-        "follow": false
-    },
+    "style": "light-v11",
+    "showLegend": false,
+    "follow": false,
     "dataseries": [
         {
             "label": "Circle Layer",

package/src/definition-schema.d.ts

@@ -32,7 +32,6 @@ export type SeriesLabel = string;
  * Create the specified type of layer on the map.
  */
 export type LayerType = "circle" | "symbol" | "heatmap" | "line";
-export type LayerBaseColor = string;
 /**
  * Restrict the number of rows for this dataseries to the given number of newest values. (If pivoted, then per each of the pivot dataseries.)
  */
@@ -45,7 +44,6 @@ export type Blur = number;
  * Opactity 1 means fully opaque, 0 means fully transparent.
  */
 export type Opacity = number;
-export type TextColor = string;
 export type TextSize = number;
 /**
  * For available icons check the maki icon set here https://labs.mapbox.com/maki-icons/
@@ -97,21 +95,16 @@ export type Dataseries = {
 /**
  * A map-chart
  */
-export interface MapConfiguration {
-  /**
-   * Settings
-   */
-  settings?: {
-    title?: Title;
-    subTitle?: Subtitle;
-    style?: MapStyle;
-    showLegend?: ShowLegend;
-    follow?: AutoFollow;
-    [k: string]: unknown;
-  };
+export interface InputData {
+  title?: Title;
+  subTitle?: Subtitle;
+  style?: MapStyle;
+  showLegend?: ShowLegend;
+  follow?: AutoFollow;
   dataseries?: Dataseries;
   [k: string]: unknown;
 }
+export type LayerBaseColor = string;
 export interface LayerConfiguration {
   circle?: CircleLayer;
   symbol?: SymbolLayer;
@@ -131,6 +124,9 @@ export interface SymbolLayer {
   "icon-size"?: IconSize;
   [k: string]: unknown;
 }
+export interface TextColor {
+  [k: string]: unknown;
+}
 export interface HeatmapLayer {
   "heatmap-intensity"?: Intensity;
   "heatmap-opacity"?: Opacity1;

package/src/definition-schema.json

@@ -1,52 +1,45 @@
 {
-    "title": "Map Configuration",
+    "title": "InputData",
     "description": "A map-chart",
     "type": "object",
     "properties": {
-        "settings": {
-            "description": "Settings",
-            "type": "object",
-            "order": 8,
-            "properties": {
-                "title": {
-                    "title": "Title",
-                    "type": "string",
-                    "order": 1
-                },
-                "subTitle": {
-                    "title": "Subtitle",
-                    "type": "string",
-                    "order": 2
-                },
-                "style": {
-                    "title": "Map Style",
-                    "description": "The basic style of the map.",
-                    "type": "string",
-                    "enum": [
-                        "streets-v12",
-                        "outdoors-v12",
-                        "light-v11",
-                        "dark-v11",
-                        "satellite-v9",
-                        "satellite-streets-v12",
-                        "navigation-day-v1",
-                        "navigation-night-v1"
-                    ],
-                    "required": true,
-                    "order": 3
-                },
-                "showLegend": {
-                    "title": "Show Legend",
-                    "type": "boolean",
-                    "order": 4
-                },
-                "follow": {
-                    "title": "Auto Follow",
-                    "description": "If true, the map automatically keeps the drawn locations in focus.",
-                    "type": "boolean",
-                    "order": 5
-                }
-            }
+        "title": {
+            "title": "Title",
+            "type": "string",
+            "order": 1
+        },
+        "subTitle": {
+            "title": "Subtitle",
+            "type": "string",
+            "order": 2
+        },
+        "style": {
+            "title": "Map Style",
+            "description": "The basic style of the map.",
+            "type": "string",
+            "enum": [
+                "streets-v12",
+                "outdoors-v12",
+                "light-v11",
+                "dark-v11",
+                "satellite-v9",
+                "satellite-streets-v12",
+                "navigation-day-v1",
+                "navigation-night-v1"
+            ],
+            "required": true,
+            "order": 3
+        },
+        "showLegend": {
+            "title": "Show Legend",
+            "type": "boolean",
+            "order": 4
+        },
+        "follow": {
+            "title": "Auto Follow",
+            "description": "If true, the map automatically keeps the drawn locations in focus.",
+            "type": "boolean",
+            "order": 5
         },
         "dataseries": {
             "title": "Dataseries",
@@ -78,7 +71,7 @@
                     },
                     "latestValues": {
                         "title": "Latest Values",
-                        "description": "Restrict the number of rows for this dataseries to the given number of newest values. (If pivoted, then per each of the pivot dataseries.)",
+                        "description": "Restrict the number of rows for this dataseries to the given number of newest values. (If you use split data, then per each of the split dataseries.)",
                         "type": "number",
                         "order": 4
                     },
@@ -212,13 +205,13 @@
                                     "order": 3
                                 },
                                 "value": {
-                                    "title": "A value for the data point",
+                                    "title": "Data point value",
                                     "type": "number",
                                     "order": 4
                                 },
                                 "pivot": {
-                                    "title": "Pivot Column",
-                                    "description": "You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, lon, lat, temperature] and specify 'city' as pivot column, then you will get a layer for each city.",
+                                    "title": "Split Data by",
+                                    "description": "You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, lon, lat, temperature] and specify 'city' as split column, then you will get a layer for each city.",
                                     "type": "string",
                                     "order": 5
                                 }

package/src/widget-mapbox.ts

@@ -6,14 +6,14 @@ import { repeat } from 'lit/directives/repeat.js'
 import mapboxgl from 'https://esm.run/mapbox-gl@3.0.1'
 import * as GeoJSON from 'geojson'
 import tinycolor from 'tinycolor2'
-import { MapConfiguration } from './definition-schema.js'
+import { LayerBaseColor, InputData } from './definition-schema.js'
 
-type Dataseries = Exclude<MapConfiguration['dataseries'], undefined>[number]
+type Dataseries = Exclude<InputData['dataseries'], undefined>[number]
 type Point = Exclude<Dataseries['data'], undefined>[number]
 
 export class WidgetMapbox extends LitElement {
     @property({ type: Object })
-    inputData?: MapConfiguration
+    inputData?: InputData
     @state()
     private map: any | undefined = undefined
 
@@ -30,17 +30,24 @@ export class WidgetMapbox extends LitElement {
     private mapLoaded: boolean = false
     private resizeObserver: ResizeObserver
     private mapStyle?: string
+    private customDebounce?: any
     private imageList: string[] = []
     constructor() {
         super()
         this.resizeObserver = new ResizeObserver(() => {
-            this.map?.resize()
-            this.fitBounds()
+            this.updateMap()
         })
         mapboxgl.accessToken =
             'pk.eyJ1IjoibWFya29wZSIsImEiOiJjazc1OWlsNjkwN2pyM2VxajV1eGRnYzgwIn0.3lVksk1nej_0KnWjCkBDAA'
     }
 
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        if(this.resizeObserver) {
+            this.resizeObserver.disconnect()
+        }
+    }
+
     update(changedProperties: Map<string, any>) {
         if (changedProperties.has('inputData')) {
             this.transformInputData()
@@ -55,6 +62,15 @@ export class WidgetMapbox extends LitElement {
         this.fitBounds()
     }
 
+    updateMap() {
+        if (this.customDebounce) clearTimeout(this.customDebounce)
+
+        this.customDebounce = setTimeout(() => {
+            this.map?.resize()
+            this.fitBounds() 
+        }, 300)
+    }
+
     fitBounds() {
         const bounds = new mapboxgl.LngLatBounds()
         this.dataSources.forEach((col: GeoJSON.FeatureCollection) => {
@@ -70,16 +86,16 @@ export class WidgetMapbox extends LitElement {
     }
 
     transformInputData() {
-        if (!this?.inputData?.settings || !this?.inputData?.dataseries?.length) return
+        if (!this?.inputData || !this?.inputData?.dataseries?.length) return
 
-        if (this.map && this.inputData.settings.style !== this.mapStyle) {
+        if (this.map && this.inputData?.style !== this.mapStyle) {
             this.createMap()
         }
 
         // choose random color if dataseries has none and store it for furure updates
         this.inputData.dataseries.forEach((ds) => {
             if (!this.colors.has(ds.label)) {
-                ds.color = ds.color ?? tinycolor.random().toString()
+                ds.color = ds.color ?? (tinycolor.random().toString() as LayerBaseColor)
                 this.colors.set(ds.label, ds.color)
             }
         })
@@ -96,7 +112,7 @@ export class WidgetMapbox extends LitElement {
             distincts.forEach((piv, i) => {
                 const prefix = piv ? `${piv} - ` : ''
                 const pds: any = {
-                    label: prefix + ds.label ?? '',
+                    label: prefix + ds.label,
                     order: ds.order,
                     type: ds.type,
                     latestValues: ds.latestValues,
@@ -420,7 +436,7 @@ export class WidgetMapbox extends LitElement {
                     this.addLineLayer(ds)
             }
         })
-        if (this.inputData?.settings?.follow) this.fitBounds()
+        if (this.inputData?.follow) this.fitBounds()
     }
 
     addBuildingLayer() {
@@ -474,7 +490,7 @@ export class WidgetMapbox extends LitElement {
 
     createMap() {
         if (this.map) return
-        this.mapStyle = this.inputData?.settings?.style
+        this.mapStyle = this.inputData?.style
         this.map = new mapboxgl.Map({
             container: this.shadowRoot?.getElementById('map') as HTMLCanvasElement,
             style: `mapbox://styles/mapbox/${this.mapStyle ?? 'light-v11'}`,
@@ -581,17 +597,17 @@ export class WidgetMapbox extends LitElement {
             <div class="wrapper">
                 <header
                     class="paging"
-                    ?active=${this.inputData?.settings?.title || this.inputData?.settings?.subTitle}
+                    ?active=${this.inputData?.title || this.inputData?.subTitle}
                 >
                     <div class="title">
-                        <h3 class="paging" ?active=${this.inputData?.settings?.title}>
-                            ${this.inputData?.settings?.title}
+                        <h3 class="paging" ?active=${this.inputData?.title}>
+                            ${this.inputData?.title}
                         </h3>
-                        <p class="paging" ?active=${this.inputData?.settings?.subTitle}>
-                            ${this.inputData?.settings?.subTitle}
+                        <p class="paging" ?active=${this.inputData?.subTitle}>
+                            ${this.inputData?.subTitle}
                         </p>
                     </div>
-                    <div class="legend paging" ?active=${this?.inputData?.settings?.showLegend}>
+                    <div class="legend paging" ?active=${this?.inputData?.showLegend}>
                         ${repeat(
                             this.dataSets,
                             (ds) => ds.label,