From 4d026ce8ac252c155451f1a6df18d7b20ada3bfb Mon Sep 17 00:00:00 2001 From: Sankalp Date: Tue, 9 Sep 2025 00:10:25 +0530 Subject: [PATCH 1/4] [change] Reduce library size #392 Closes #392 Signed-off-by: Sankalp --- README.md | 49 +- index.html | 45 +- jest.global-setup.js | 1 + lib/js/echarts-gl.min.js | 1 - package.json | 8 +- public/assets/data/airplaneRouteMap.json | 612 - public/assets/data/netjsongraph-graphGL.json | 40080 ---------------- .../netjsongraph-graphGL.html | 77 - .../netjsonmap-animation.html | 83 - src/js/leaflet-loader.js | 50 + src/js/netjsongraph.config.js | 7 +- src/js/netjsongraph.core.js | 2 +- src/js/netjsongraph.geojson.js | 2 +- src/js/netjsongraph.js | 24 +- src/js/netjsongraph.render.js | 28 +- test/browser.test.utils.js | 4 - test/netjsongraph.render.test.js | 14 +- webpack.config.js | 319 +- yarn.lock | 3612 +- 19 files changed, 1873 insertions(+), 43145 deletions(-) delete mode 100644 lib/js/echarts-gl.min.js delete mode 100644 public/assets/data/airplaneRouteMap.json delete mode 100644 public/assets/data/netjsongraph-graphGL.json delete mode 100644 public/example_templates/netjsongraph-graphGL.html delete mode 100644 public/example_templates/netjsonmap-animation.html create mode 100644 src/js/leaflet-loader.js diff --git a/README.md b/README.md index 2eec806f..cff28e7d 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,48 @@ yarn install yarn start ``` +## Build Variants + +NetJSONGraph.js offers **3 optimized build variants** to match different integration needs: + +### **Chunked Build** + +```bash +yarn build:chunks +``` + +**Output**: separate files for optimal loading + +- `netjsongraph.[hash].min.js` - Core library +- `echarts.[hash].min.js` - Network graph rendering +- `leaflet.[hash].min.js` - Geographic map rendering + +**Best for**: large applications with conditional loading + +### **ECharts Bundle** + +```bash +yarn build:echarts +``` + +**Output**: single javascript file optimized for rendering network graphs. + +- `netjsongraph-echarts.[hash].min.js` + +**Best for**: apps focused exclusively on network topology graphs. + +### **Complete Bundle** + +```bash +yarn build:complete +``` + +**Output**: single file with all the dependencies (echarts and leaflet). + +- `netjsongraph-complete.[hash].min.js` + +**Best for**: apps that need to support both network graphs and geographic maps. + ### Run Tests The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them. @@ -371,9 +413,9 @@ The library mainly supports two rendering modes -- `graph` and `map`. You can ch In extreme cases, you can also pass your own render function if you don't want Echarts to render. We will pass in the processed netjson data and netjsongraph object. -For graph, you need to configure `graphConfig` property. We only support [graph](https://echarts.apache.org/en/option.html#series-graph) and [graphGL](https://echarts.apache.org/zh/option-gl.html#series-graphGL). The main difference between **graph** and **graphGL** is the [`forceAtlas2`](https://echarts.apache.org/zh/option-gl.html#series-graphGL.forceAtlas2) param series in Echarts. The latter is mainly used for big data rendering. You can use **graphGL** by setting `graphConfig.type` to `graphGL`. We use **graph** series and **force** layout by default. You can modify them freely according to the documentation. +For graph, you need to configure `graphConfig` property. We support [graph](https://echarts.apache.org/en/option.html#series-graph) rendering with force layout. We use **graph** series and **force** layout by default. You can modify them freely according to the documentation. -For map, you need to configure `mapOptions`. The [`mapOptions`](https://leafletjs.com/reference-1.5.0.html#map-option) and [`mapTileConfig`](https://leafletjs.com/reference-1.5.0.html#tilelayer) are required for the map render. You can customize the nodes and links with [`nodeConfig`](https://echarts.apache.org/en/option.html#series-scatter) and [`linkConfig`](https://echarts.apache.org/en/option.html#series-lines) optionally. For map nodes, you can also change the `type` to [`effectScatter`](https://echarts.apache.org/en/option.html#series-effectScatter) series to enable animation effects. +For map, you need to configure `mapOptions`. The [`mapOptions`](https://leafletjs.com/reference-1.5.0.html#map-option) and [`mapTileConfig`](https://leafletjs.com/reference-1.5.0.html#tilelayer) are required for the map render. You can customize the nodes and links with [`nodeConfig`](https://echarts.apache.org/en/option.html#series-scatter) and [`linkConfig`](https://echarts.apache.org/en/option.html#series-lines) optionally. You can also customize some global properties with [`echartsOption`](https://echarts.apache.org/en/option.html) in echarts. @@ -820,9 +862,6 @@ The demo shows default `graph` render. The demo shows `map` render. [Map demo](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap.html) -The demo shows how to use `graphGL` to render big data. -[graphGL(bigData) demo](https://openwisp.github.io/netjsongraph.js/examples/netjsongraph-graphGL.html) - The demo shows how to set custom attributes. [Custom attributes demo](https://openwisp.github.io/netjsongraph.js/examples/netjsongraph-elementsLegend.html) diff --git a/index.html b/index.html index cb3c8b16..4f1f4746 100644 --- a/index.html +++ b/index.html @@ -33,12 +33,13 @@ margin: 0; padding: 0; box-sizing: border-box; - transition: background-color var(--transition-speed) ease, - color var(--transition-speed) ease; + transition: + background-color var(--transition-speed) ease, + color var(--transition-speed) ease; } body { - font-family: 'Inter', sans-serif; + font-family: "Inter", sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; @@ -124,12 +125,14 @@ flex-direction: column; align-items: center; } + .cards a { width: 100%; } } +