Skip to content

Commit 32ea2ab

Browse files
codesankalpcodesankalp
committed
[change] Reduce library size #392
Closes #392 Signed-off-by: Sankalp <sankalp.nex@gmail.com>
1 parent ea75cc7 commit 32ea2ab

15 files changed

+1706
-43137
lines changed

‎README.md‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -371,9 +371,9 @@ The library mainly supports two rendering modes -- `graph` and `map`. You can ch
371371

372372
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.
373373

374-
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.
374+
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.
375375

376-
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.
376+
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.
377377

378378
You can also customize some global properties with [`echartsOption`](https://echarts.apache.org/en/option.html) in echarts.
379379

@@ -820,9 +820,6 @@ The demo shows default `graph` render.
820820
The demo shows `map` render.
821821
[Map demo](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap.html)
822822

823-
The demo shows how to use `graphGL` to render big data.
824-
[graphGL(bigData) demo](https://openwisp.github.io/netjsongraph.js/examples/netjsongraph-graphGL.html)
825-
826823
The demo shows how to set custom attributes.
827824
[Custom attributes demo](https://openwisp.github.io/netjsongraph.js/examples/netjsongraph-elementsLegend.html)
828825

‎index.html‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,13 @@
3333
margin: 0;
3434
padding: 0;
3535
box-sizing: border-box;
36-
transition: background-color var(--transition-speed) ease,
37-
color var(--transition-speed) ease;
36+
transition:
37+
background-color var(--transition-speed) ease,
38+
color var(--transition-speed) ease;
3839
}
3940

4041
body {
41-
font-family: 'Inter', sans-serif;
42+
font-family: "Inter", sans-serif;
4243
background-color: var(--bg-primary);
4344
color: var(--text-primary);
4445
line-height: 1.6;
@@ -124,12 +125,14 @@
124125
flex-direction: column;
125126
align-items: center;
126127
}
128+
127129
.cards a {
128130
width: 100%;
129131
}
130132
}
131133
</style>
132134
</head>
135+
133136
<body>
134137
<button class="theme-toggle" aria-label="Toggle Dark Mode">
135138
🌓 Toggle Theme
@@ -186,11 +189,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
186189
>Leaflet plugins</a
187190
>
188191
</div>
189-
<div class="cards">
190-
<a href="./examples/netjsongraph-graphGL.html" target="_blank"
191-
>GraphGL render for big data</a
192-
>
193-
</div>
192+
194193
<div class="cards">
195194
<a href="./examples/netjsongraph-elementsLegend.html" target="_blank"
196195
>Custom attributes</a
@@ -216,11 +215,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
216215
>Multiple tiles render</a
217216
>
218217
</div>
219-
<div class="cards">
220-
<a href="./examples/netjsonmap-animation.html" target="_blank"
221-
>Geographic map animated links</a
222-
>
223-
</div>
218+
224219
<div class="cards">
225220
<a href="./examples/netjsonmap-appendData2.html" target="_blank"
226221
>Append data using arrays</a
@@ -244,23 +239,27 @@ <h1>NetJSONGraph.js Example Demos</h1>
244239
</main>
245240

246241
<script>
247-
const themeToggle = document.querySelector('.theme-toggle');
242+
const themeToggle = document.querySelector(".theme-toggle");
248243
const htmlElement = document.documentElement;
249244

250245
// Check for saved theme preference or system preference
251-
const savedTheme = localStorage.getItem('theme');
252-
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
246+
const savedTheme = localStorage.getItem("theme");
247+
const systemPrefersDark = window.matchMedia(
248+
"(prefers-color-scheme: dark)",
249+
).matches;
253250

254-
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
255-
htmlElement.classList.add('dark-mode');
251+
if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
252+
htmlElement.classList.add("dark-mode");
256253
}
257254

258-
themeToggle.addEventListener('click', () => {
259-
htmlElement.classList.toggle('dark-mode');
260-
255+
themeToggle.addEventListener("click", () => {
256+
htmlElement.classList.toggle("dark-mode");
257+
261258
// Save theme preference
262-
const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
263-
localStorage.setItem('theme', currentTheme);
259+
const currentTheme = htmlElement.classList.contains("dark-mode")
260+
? "dark"
261+
: "light";
262+
localStorage.setItem("theme", currentTheme);
264263
});
265264
</script>
266265
</body>

‎lib/js/echarts-gl.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.2.0",
44
"description": "NetJSON NetworkGraph visualizer",
55
"main": "index.js",
6+
"sideEffects": false,
67
"scripts": {
78
"test": "jest --silent",
89
"dev": "webpack serve --open --mode development",
@@ -52,6 +53,7 @@
5253
"@testing-library/jest-dom": "^6.4.2",
5354
"@types/jest": "^30.0.0",
5455
"acorn": "^8.11.3",
56+
"compression-webpack-plugin": "^11.1.0",
5557
"copy-webpack-plugin": "^13.0.0",
5658
"coveralls": "^3.1.1",
5759
"css-loader": "^7.1.2",
@@ -73,12 +75,12 @@
7375
"style-loader": "^4.0.0",
7476
"terser-webpack-plugin": "^5.3.10",
7577
"webpack": "^5.90.3",
78+
"webpack-bundle-analyzer": "^4.10.2",
7679
"webpack-cli": "^6.0.1",
7780
"webpack-dev-server": "^5.0.2"
7881
},
7982
"dependencies": {
8083
"echarts": "^5.6.0",
81-
"echarts-gl": "^2.0.9",
8284
"kdbush": "^4.0.2",
8385
"leaflet": "^1.8.0",
8486
"zrender": "^6.0.0"

0 commit comments

Comments
 (0)