Merge branch 'master' into issues/454-fix-redundant-labels

Author: Dhruv-ub

.eslintrc.js

@@ -11,4 +11,7 @@ module.exports = {
     browser: true,
     es6: true,
   },
+  globals: {
+    BUNDLE_LEAFLET: "readonly",
+  },
 };

.github/workflows/ci.yml

@@ -18,6 +18,11 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: ".nvmrc"
+
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -44,12 +49,21 @@ jobs:
         run: ./run-qa-checks
 
   build:
-    name: Tests and Coverage
+    name: Tests and Coverage (${{ matrix.build-type }})
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        build-type: [dev, prod, echarts-only]
 
     steps:
       - uses: actions/checkout@v6
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: ".nvmrc"
+
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -66,9 +80,22 @@ jobs:
         run: |
           yarn install
 
-      - name: Running Server
+      - name: Build (Prod Full)
+        if: matrix.build-type == 'prod'
+        run: yarn build:full
+
+      - name: Build (Echarts Only)
+        if: matrix.build-type == 'echarts-only'
+        run: yarn build:echarts-only
+
+      - name: Running Server (Dev)
+        if: matrix.build-type == 'dev'
         run: yarn start &
 
+      - name: Running Server (Dist)
+        if: matrix.build-type == 'prod' || matrix.build-type == 'echarts-only'
+        run: npx --yes http-server dist -p 8080 &
+
       - name: Wait for server to be ready
         run: npx wait-on http://localhost:8080
 
@@ -86,13 +113,15 @@ jobs:
           which chromedriver
 
       - name: Unit tests
+        if: matrix.build-type == 'dev'
         run: yarn coverage --testPathIgnorePatterns=test/netjsongraph.browser.test.js
 
       - name: Browser tests
         # Test timeout set to 30 seconds in CI since it runs slower
         run: yarn test --runInBand --testTimeout=30000 test/netjsongraph.browser.test.js
 
       - name: Coveralls
+        if: matrix.build-type == 'dev'
         uses: coverallsapp/github-action@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.nvmrc

@@ -1 +1 @@
-18
+lts/krypton

README.md

@@ -25,6 +25,12 @@ Visualize a NetJSON NetworkGraph with pan/zoom, labels and tooltips.
 
 Plot nodes by geographic coordinates on a Leaflet basemap; pan/zoom with markers.
 
+### Geographic map with nodes moving in real-time
+
+[![Geographic map with nodes moving in real-time](docs/gifs/movingnode.gif)](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap-moving-node.html)
+
+This example demonstrates how to update a node’s coordinates to simulate a moving vehicle.
+
 ### Indoor map
 
 [![Indoor map](docs/gifs/netjsonmap-indoormap.gif)](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap-indoormap.html)
@@ -141,6 +147,61 @@ yarn install
 yarn start
 ```
 
+## Building the library
+
+The netjsongraph.js library provides **two build variants** to optimize bundle size for different use cases.
+
+By default, `yarn build` executes the full bundle.
+
+### 1. Full Bundle (Recommended for standalone usage)
+
+Build the complete library with all dependencies included:
+
+```bash
+yarn build:full
+```
+
+Analyze the build with [Webpack Bundle Analyzer](https://github.com/webpack/webpack-bundle-analyzer):
+
+```bash
+yarn build:full:stats
+```
+
+**Output**:
+
+- `dist/netjsongraph.min.js` - Complete library with ECharts and Leaflet
+- Compressed versions (`.gz` and `.br`) for optimized delivery
+- Deletes/overwrites previous builds
+
+**Use when**: You want a standalone library with all dependencies bundled.
+
+### 2. ECharts-Only Bundle (Optimized for projects with existing Leaflet)
+
+Build the library without Leaflet, expecting it to be provided externally:
+
+```bash
+yarn build:echarts-only
+```
+
+Analyze the build with [Webpack Bundle Analyzer](https://github.com/webpack/webpack-bundle-analyzer):
+
+```bash
+yarn build:echarts-only:stats
+```
+
+**Output**:
+
+- `dist/netjsongraph.echarts.min.js` - Library with ECharts only
+- Compressed versions (`.gz` and `.br`)
+- Deletes/overwrites previous builds
+
+**Use when**: Your project already includes Leaflet (e.g., via django-leaflet in OpenWISP projects). This reduces bundle size by ~144 KiB.
+
+**Requirements**: Leaflet must be loaded before NetJSONGraph (available as global `L` object).
+
+**Note**: The echarts-only build dynamically loads Leaflet from CDN for map examples.
+For production use, ensure Leaflet is available locally or from a trusted CDN.
+
 ### Run Tests
 
 The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.
@@ -924,6 +985,22 @@ yarn start
 </html>
 ```
 
+### Geographic map nodes moving in realtime
+
+You can move a node programmatically on the map at runtime using the `moveNodeInRealTime` helper in utils.
+
+This is useful to animate devices, show mobile nodes, or reflect position updates coming from a realtime source (sockets, polling, etc.).
+
+You can see this feature in action in the following example: [Geographic map nodes moving in realtime](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap-moving-node.html).
+
+```JS
+// .util.moveNodeInRealTime(nodeId, location)
+moveNodeInRealTime(id, location)
+```
+
+- `id` - the node id (string) to move.
+- `location` - `{lat: number, lng: number}`
+
 ### Upgrading from 0.1.x versions to 0.2.x
 
 We advise all users of netjsongraph.js who are using the 0.1.x version to

docs/gifs/movingnode.gif

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>Load data using geo extent</title>

examples/load_data_geo_extent/index.html

@@ -1,53 +1,58 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
     <title>Live update example</title>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <!-- theme can be easily customized via css -->
-    <link href="/netjsongraph.css" rel="stylesheet">
-    <link href="/netjsongraph-theme.css" rel="stylesheet">
-</head>
-<body>
-    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>
+    <link href="/netjsongraph.css" rel="stylesheet" />
+    <link href="/netjsongraph-theme.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script
+      src="https://cdn.socket.io/4.5.0/socket.io.min.js"
+      integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k"
+      crossorigin="anonymous"
+    ></script>
     <script type="text/javascript" src="/netjsongraph.min.js"></script>
     <script type="text/javascript">
-        /*
+      /*
             The demo is used to show how to use the `JSONDataUpdate` function to update data.
             In this example we use socket.io to listen for server messages.
             Adopted the default parameters of function -- 
             overrride old data and deal with the new data with the processing function set in config.
             See other examples：
         */
-        // `graph` render by default.
-        const graph = new NetJSONGraph("/netjsonmap.json",{
-          echartsOption: {
-              legend: {
-                show: false,
-              },
-              title:{
-                text:'Live update example',
-                textStyle:{
-                  color:'#fff',
-                  fontSize:24,
-                },
-                left:'center',
-                top:20,
-              }
+      // `graph` render by default.
+      const graph = new NetJSONGraph("/netjsonmap.json", {
+        echartsOption: {
+          legend: {
+            show: false,
+          },
+          title: {
+            text: "Live update example",
+            textStyle: {
+              color: "#fff",
+              fontSize: 24,
             },
-        });
+            left: "center",
+            top: 20,
+          },
+        },
+      });
 
-        graph.render();
+      graph.render();
 
-        const socket = io("http://localhost:3000/",{ transports : ['websocket'] });
+      const socket = io("http://localhost:3000/", {transports: ["websocket"]});
 
-        socket.on("connect", function() {
-          console.log("client connected");
-        });
-        socket.on("disconnect", function() {
-          console.log("client disconnected");
-        });
+      socket.on("connect", function () {
+        console.log("client connected");
+      });
+      socket.on("disconnect", function () {
+        console.log("client disconnected");
+      });
 
-        // Update view when the data changes. override old data by default.
-        socket.on("netjsonChange", graph.utils.JSONDataUpdate.bind(graph));
+      // Update view when the data changes. override old data by default.
+      socket.on("netjsonChange", graph.utils.JSONDataUpdate.bind(graph));
     </script>
-</html>
+  </body>
+</html>