16582217787

Committed 28 Jul 2025 10:59PM UTC coverage: 80.832% (+2.0%) from 78.786%

Build # 16582217787

Build Type

push

github

Committed by

web-flow

Commit Message

[change] Uniform geojson map rendering #395

Closes #395

Coverage Stats

449 of 599 branches covered (74.96%)

Branch coverage included in aggregate %.

140 of 187 new or added lines in 7 files covered. (74.87%)

4 existing lines in 3 files now uncovered.

795 of 940 relevant lines covered (84.57%)

7.27 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.31

/src/js/netjsongraph.config.js

import L from "leaflet/dist/leaflet";
/**
 * Default options
 *
 * @param  {string}            el                  body        Container element. "body" defaultly.
 * @param  {string|function}   render              "graph"     Render function. "graph" defaultly.
 * @param  {bool}              metadata            true        Display NetJSON metadata at startup?
 * @param  {bool}              svgRender           false       Use SVG render?
 * @param  {string}            dealDataByWorker                WebWorker file url.
 *
 * @param  {object}            echartsOption       {}          A global configuration of Echarts. @see {@link https://echarts.apache.org/en/option.html#title}
 *
 * @param  {object}            graphConfig         {}          Configuration of graph series(graphRender). @see {@link https://echarts.apache.org/en/option.html#series-graph}
 *
 * @param  {string|bool}       mapOptions          {}          Map init config. @see {@link https://leafletjs.com/reference-1.5.0.html#map-option}
 * @param  {array}             mapTileConfig       []          Map tiles config array, whose format is [{label, urlTemplate, options}]. @see {@link https://leafletjs.com/reference-1.5.0.html#tilelayer-option}
 * @param  {array}             mapLinkConfig       []          Support multiple lines superimposed style. @see {@link https://echarts.apache.org/en/option.html#series-lines}
 * @param  {object}            mapNodeConfig       {}          Map node style. @see {@link https://echarts.apache.org/en/option.html#series-effectScatter}
 *
 * @param {int|Array|function} nodeSize            node => 10  The size of nodes in pixel. @see {@link https://echarts.apache.org/en/option.html#series-graph.symbolSize}
 * @param  {object|function}   nodeStyleProperty   node => {}  Used to custom node style. @see {@link https://echarts.apache.org/en/option.html#series-graph.data.itemStyle}
 * @param  {object|function}   linkStyleProperty   link => {}  Used to custom link style. @see {@link https://echarts.apache.org/en/option.html#series-graph.links.lineStyle}
 *
 * @param  {function}          onInit                          Callback function executed on initialization.
 * @param  {function}          onRender                        Callback function executed on render start.
 * @param  {function}          onUpdate                        Callback function executed on update.
 * @param  {function}          afterUpdate                     Callback function executed after update.
 * @param  {function}          onReady                         Callback function executed when rendered.
 * @param  {function}          prepareData                     Callback function executed after data has been loaded. Used to convert data to NetJSONGraph Data.
 * @param  {function}          onClickElement                  Called when a node or link is clicked.
 */
const NetJSONGraphDefaultConfig = {
  metadata: true,
  svgRender: false,
  switchMode: false,
  maxPointsFetched: 10000,
  loadMoreAtZoomLevel: 9,
  clustering: false,
  clusteringThreshold: 100,
  disableClusteringAtLevel: 8,
  clusterRadius: 80,
  showMetaOnNarrowScreens: false,
  showLabelsAtZoomLevel: 7,
  crs: L.CRS.EPSG3857,
  echartsOption: {
    aria: {
      show: true,
      description:
        "This is a force-oriented graph chart that depicts the relationship between ip nodes.",
    },
    toolbox: {
      show: true,
      iconStyle: {
        borderColor: "#fff",
      },
      feature: {
        restore: {
          show: true,
          title: "Restore view",
        },
        saveAsImage: {
          show: true,
          title: "Save image",
        },
      },
    },
  },

  graphConfig: {
    series: {
      layout: "force",
      label: {
        show: true,
        color: "#fff",
        position: "top",
      },
      labelLayout: {
        hideOverlap: true,
      },
      force: {
        gravity: 0.1,
        edgeLength: [20, 60],
        repulsion: 120,
      },
      roam: true,
      draggable: true,
      legendHoverLink: true,
      emphasis: {
        focus: "none",
        lineStyle: {
          color: "#3acc38",
          opacity: 1,
        },
      },
      nodeStyle: {
        color: "#ffebc4",
      },
      linkStyle: {
        width: 6,
        color: "#1ba619",
      },
      nodeSize: "15",
    },
    baseOptions: {
      backgroundColor: "#282222",
      media: [
        {
          query: {
            minWidth: 320,
            maxWidth: 500,
          },
          option: {
            series: [
              {
                zoom: 0.7,
              },
            ],
            toolbox: {
              itemSize: 18,
            },
          },
        },
        {
          query: {
            minWidth: 501,
          },
          option: {
            series: [
              {
                zoom: 1,
              },
            ],
            toolbox: {
              itemSize: 15,
            },
          },
        },
        {
          query: {
            minWidth: 320,
            maxWidth: 850,
          },
          option: {
            tooltip: {
              show: false,
            },
          },
        },
        {
          query: {
            minWidth: 851,
          },
          option: {
            tooltip: {
              show: true,
            },
          },
        },
      ],
    },
  },

  mapOptions: {
    roam: true,
    zoomAnimation: false,
    minZoom: 3,
    maxZoom: 18,
    nodeConfig: {
      type: "scatter",
      label: {
        show: true,
        color: "#000000",
        position: "top",
        formatter: "{b}",
      },
      nodeStyle: {
        color: "#1566a9",
      },
      nodeSize: "17",
    },
    linkConfig: {
      linkStyle: {
        width: 5,
        color: "#1ba619",
      },
      emphasis: {
        focus: "none",
        lineStyle: {
          color: "#3acc38",
          opacity: 1,
        },
      },
    },
    clusterConfig: {
      symbolSize: 30,
      itemStyle: {
        color: "#1566a9",
      },
      tooltip: {
        show: false,
      },
      label: {
        show: true,
        position: "inside",
        color: "#fff",
        offset: [0, 0],
      },
    },
    baseOptions: {
      toolbox: {
        show: false,
      },
      media: [
        {
          query: {
            minWidth: 320,
            maxWidth: 850,
          },
          option: {
            tooltip: {
              show: false,
            },
          },
        },
        {
          query: {
            minWidth: 851,
          },
          option: {
            tooltip: {
              show: true,
            },
          },
        },
      ],
    },
  },
  mapTileConfig: [
    {
      urlTemplate:
        process.env.MAPBOX_URL_TEMPLATE ||
        "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      options: {
        attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,
         tiles offered by <a href="https://www.mapbox.com">Mapbox</a>`,
      },
    },
  ],
  geoOptions: {
    style: {
      fillColor: "#1566a9",
      weight: 0,
      fillOpacity: 0.8,
      radius: 8,
    },
  },
  nodeCategories: [],
  linkCategories: [],

  /**
   * @function
   * @name prepareData
   * Callback function executed after data has been loaded. Used to convert data to NetJSONGraph Data.
   *
   * @param JSONData  {object}
   *
   * @this  {object}        The instantiated object of NetJSONGraph
   *
   */
  // eslint-disable-next-line no-unused-vars
  prepareData(JSONData) {},

  /**
   * @function
   * @name onClickElement
   * Called when a node or link is clicked
   *
   * @param {string} type   The type of element
   * @param {object} data   Element data
   *
   * @this  {object}        The instantiated object of NetJSONGraph
   *
   */
  onClickElement(type, data) {
    let nodeLinkData;
    if (this.utils && this.utils.isNetJSON(this.data)) {
      if (type === "node") {
        nodeLinkData = this.utils.nodeInfo(data);
      } else if (type === "link") {
        nodeLinkData = this.utils.linkInfo(data);
      } else {
        // For GeoJSON Feature (e.g., polygons, points) just forward its properties as-is
        nodeLinkData = data;
      }

      if (this.config.showMetaOnNarrowScreens || this.el.clientWidth > 850) {
        this.gui.metaInfoContainer.style.display = "flex";
      }
    } else {
      nodeLinkData = data;
    }

    this.gui.getNodeLinkInfo(type, nodeLinkData);
    this.gui.sideBar.classList.remove("hidden");
  },

  /**
   * @function
   * @name onReady
   * Callback function executed when rendered.
   *
   * @this  {object}        The instantiated object of NetJSONGraph
   *
   */
  /* istanbul ignore next */
  onReady() {},
};

export default {...NetJSONGraphDefaultConfig};

1	import L from "leaflet/dist/leaflet";
2	/**
3	* Default options
4	*
5	* @param {string} el body Container element. "body" defaultly.
6	* @param {string\|function} render "graph" Render function. "graph" defaultly.
7	* @param {bool} metadata true Display NetJSON metadata at startup?
8	* @param {bool} svgRender false Use SVG render?
9	* @param {string} dealDataByWorker WebWorker file url.
10	*
11	* @param {object} echartsOption {} A global configuration of Echarts. @see {@link https://echarts.apache.org/en/option.html#title}
12	*
13	* @param {object} graphConfig {} Configuration of graph series(graphRender). @see {@link https://echarts.apache.org/en/option.html#series-graph}
14	*
15	* @param {string\|bool} mapOptions {} Map init config. @see {@link https://leafletjs.com/reference-1.5.0.html#map-option}
16	* @param {array} mapTileConfig [] Map tiles config array, whose format is [{label, urlTemplate, options}]. @see {@link https://leafletjs.com/reference-1.5.0.html#tilelayer-option}
17	* @param {array} mapLinkConfig [] Support multiple lines superimposed style. @see {@link https://echarts.apache.org/en/option.html#series-lines}
18	* @param {object} mapNodeConfig {} Map node style. @see {@link https://echarts.apache.org/en/option.html#series-effectScatter}
19	*
20	* @param {int\|Array\|function} nodeSize node => 10 The size of nodes in pixel. @see {@link https://echarts.apache.org/en/option.html#series-graph.symbolSize}
21	* @param {object\|function} nodeStyleProperty node => {} Used to custom node style. @see {@link https://echarts.apache.org/en/option.html#series-graph.data.itemStyle}
22	* @param {object\|function} linkStyleProperty link => {} Used to custom link style. @see {@link https://echarts.apache.org/en/option.html#series-graph.links.lineStyle}
23	*
24	* @param {function} onInit Callback function executed on initialization.
25	* @param {function} onRender Callback function executed on render start.
26	* @param {function} onUpdate Callback function executed on update.
27	* @param {function} afterUpdate Callback function executed after update.
28	* @param {function} onReady Callback function executed when rendered.
29	* @param {function} prepareData Callback function executed after data has been loaded. Used to convert data to NetJSONGraph Data.
30	* @param {function} onClickElement Called when a node or link is clicked.
31	*/
32	const NetJSONGraphDefaultConfig = {	3✔
33	metadata: true,
34	svgRender: false,
35	switchMode: false,
36	maxPointsFetched: 10000,
37	loadMoreAtZoomLevel: 9,
38	clustering: false,
39	clusteringThreshold: 100,
40	disableClusteringAtLevel: 8,
41	clusterRadius: 80,
42	showMetaOnNarrowScreens: false,
43	showLabelsAtZoomLevel: 7,
44	crs: L.CRS.EPSG3857,
45	echartsOption: {
46	aria: {
47	show: true,
48	description:
49	"This is a force-oriented graph chart that depicts the relationship between ip nodes.",
50	},
51	toolbox: {
52	show: true,
53	iconStyle: {
54	borderColor: "#fff",
55	},
56	feature: {
57	restore: {
58	show: true,
59	title: "Restore view",
60	},
61	saveAsImage: {
62	show: true,
63	title: "Save image",
64	},
65	},
66	},
67	},
68
69	graphConfig: {
70	series: {
71	layout: "force",
72	label: {
73	show: true,
74	color: "#fff",
75	position: "top",
76	},
77	labelLayout: {
78	hideOverlap: true,
79	},
80	force: {
81	gravity: 0.1,
82	edgeLength: [20, 60],
83	repulsion: 120,
84	},
85	roam: true,
86	draggable: true,
87	legendHoverLink: true,
88	emphasis: {
89	focus: "none",
90	lineStyle: {
91	color: "#3acc38",
92	opacity: 1,
93	},
94	},
95	nodeStyle: {
96	color: "#ffebc4",
97	},
98	linkStyle: {
99	width: 6,
100	color: "#1ba619",
101	},
102	nodeSize: "15",
103	},
104	baseOptions: {
105	backgroundColor: "#282222",
106	media: [
107	{
108	query: {
109	minWidth: 320,
110	maxWidth: 500,
111	},
112	option: {
113	series: [
114	{
115	zoom: 0.7,
116	},
117	],
118	toolbox: {
119	itemSize: 18,
120	},
121	},
122	},
123	{
124	query: {
125	minWidth: 501,
126	},
127	option: {
128	series: [
129	{
130	zoom: 1,
131	},
132	],
133	toolbox: {
134	itemSize: 15,
135	},
136	},
137	},
138	{
139	query: {
140	minWidth: 320,
141	maxWidth: 850,
142	},
143	option: {
144	tooltip: {
145	show: false,
146	},
147	},
148	},
149	{
150	query: {
151	minWidth: 851,
152	},
153	option: {
154	tooltip: {
155	show: true,
156	},
157	},
158	},
159	],
160	},
161	},
162
163	mapOptions: {
164	roam: true,
165	zoomAnimation: false,
166	minZoom: 3,
167	maxZoom: 18,
168	nodeConfig: {
169	type: "scatter",
170	label: {
171	show: true,
172	color: "#000000",
173	position: "top",
174	formatter: "{b}",
175	},
176	nodeStyle: {
177	color: "#1566a9",
178	},
179	nodeSize: "17",
180	},
181	linkConfig: {
182	linkStyle: {
183	width: 5,
184	color: "#1ba619",
185	},
186	emphasis: {
187	focus: "none",
188	lineStyle: {
189	color: "#3acc38",
190	opacity: 1,
191	},
192	},
193	},
194	clusterConfig: {
195	symbolSize: 30,
196	itemStyle: {
197	color: "#1566a9",
198	},
199	tooltip: {
200	show: false,
201	},
202	label: {
203	show: true,
204	position: "inside",
205	color: "#fff",
206	offset: [0, 0],
207	},
208	},
209	baseOptions: {
210	toolbox: {
211	show: false,
212	},
213	media: [
214	{
215	query: {
216	minWidth: 320,
217	maxWidth: 850,
218	},
219	option: {
220	tooltip: {
221	show: false,
222	},
223	},
224	},
225	{
226	query: {
227	minWidth: 851,
228	},
229	option: {
230	tooltip: {
231	show: true,
232	},
233	},
234	},
235	],
236	},
237	},
238	mapTileConfig: [
239	{
240	urlTemplate:
241	process.env.MAPBOX_URL_TEMPLATE \|\|	6✔
242	"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
243	options: {
244	attribution: `© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,
245	tiles offered by <a href="https://www.mapbox.com">Mapbox</a>`,
246	},
247	},
248	],
249	geoOptions: {
250	style: {
251	fillColor: "#1566a9",
252	weight: 0,
253	fillOpacity: 0.8,
254	radius: 8,
255	},
256	},
257	nodeCategories: [],
258	linkCategories: [],
259
260	/**
261	* @function
262	* @name prepareData
263	* Callback function executed after data has been loaded. Used to convert data to NetJSONGraph Data.
264	*
265	* @param JSONData {object}
266	*
267	* @this {object} The instantiated object of NetJSONGraph
268	*
269	*/
270	// eslint-disable-next-line no-unused-vars
271	prepareData(JSONData) {},
272
273	/**
274	* @function
275	* @name onClickElement
276	* Called when a node or link is clicked
277	*
278	* @param {string} type The type of element
279	* @param {object} data Element data
280	*
281	* @this {object} The instantiated object of NetJSONGraph
282	*
283	*/
284	onClickElement(type, data) {
285	let nodeLinkData;
286	if (this.utils && this.utils.isNetJSON(this.data)) {	6!
287	if (type === "node") {	6✔
288	nodeLinkData = this.utils.nodeInfo(data);	3✔
289	} else if (type === "link") {	3✔
290	nodeLinkData = this.utils.linkInfo(data);	2✔
291	} else {
292	// For GeoJSON Feature (e.g., polygons, points) just forward its properties as-is
293	nodeLinkData = data;	1✔
294	}
295
296	if (this.config.showMetaOnNarrowScreens \|\| this.el.clientWidth > 850) {	6✔
297	this.gui.metaInfoContainer.style.display = "flex";	4✔
298	}
299	} else {
UNCOV 300	nodeLinkData = data;	×
301	}
302
303	this.gui.getNodeLinkInfo(type, nodeLinkData);	6✔
304	this.gui.sideBar.classList.remove("hidden");	6✔
305	},
306
307	/**
308	* @function
309	* @name onReady
310	* Callback function executed when rendered.
311	*
312	* @this {object} The instantiated object of NetJSONGraph
313	*
314	*/
315	/* istanbul ignore next */
316	onReady() {},
317	};
318
319	export default {...NetJSONGraphDefaultConfig};

openwisp / netjsongraph.js / 16582217787

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous