Skip to content

Commit 7b1d3ca

Browse files
codesankalpcodesankalp
committed
[change] Reduce library size #392
Closes #392 Signed-off-by: Sankalp <[email protected]>
1 parent dcb23b3 commit 7b1d3ca

15 files changed

+1905
-43360
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

@@ -754,9 +754,6 @@ The demo shows default `graph` render.
754754
The demo shows `map` render.
755755
[Map demo](https://openwisp.github.io/netjsongraph.js/examples/netjsonmap.html)
756756

757-
The demo shows how to use `graphGL` to render big data.
758-
[graphGL(bigData) demo](https://openwisp.github.io/netjsongraph.js/examples/netjsongraph-graphGL.html)
759-
760757
The demo shows how to set custom attributes.
761758
[Custom attributes demo](https://openwisp.github.io/netjsongraph.js/examples/netjsongraph-elementsLegend.html)
762759

‎index.html‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<title>netjsongraph.js: Examples</title>
@@ -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
@@ -239,23 +234,27 @@ <h1>NetJSONGraph.js Example Demos</h1>
239234
</main>
240235

241236
<script>
242-
const themeToggle = document.querySelector('.theme-toggle');
237+
const themeToggle = document.querySelector(".theme-toggle");
243238
const htmlElement = document.documentElement;
244239

245240
// Check for saved theme preference or system preference
246-
const savedTheme = localStorage.getItem('theme');
247-
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
241+
const savedTheme = localStorage.getItem("theme");
242+
const systemPrefersDark = window.matchMedia(
243+
"(prefers-color-scheme: dark)",
244+
).matches;
248245

249-
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
250-
htmlElement.classList.add('dark-mode');
246+
if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
247+
htmlElement.classList.add("dark-mode");
251248
}
252249

253-
themeToggle.addEventListener('click', () => {
254-
htmlElement.classList.toggle('dark-mode');
255-
250+
themeToggle.addEventListener("click", () => {
251+
htmlElement.classList.toggle("dark-mode");
252+
256253
// Save theme preference
257-
const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
258-
localStorage.setItem('theme', currentTheme);
254+
const currentTheme = htmlElement.classList.contains("dark-mode")
255+
? "dark"
256+
: "light";
257+
localStorage.setItem("theme", currentTheme);
259258
});
260259
</script>
261260
</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": "^5.6.1"

0 commit comments

Comments
 (0)