Skip to content

Commit f7ec52e

Browse files
Merge branch 'master' into add-ui-guidance-arrays-example
2 parents 6b24280 + bedbfbb commit f7ec52e

27 files changed

+446
-381
lines changed

index.html

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>netjsongraph.js: Examples</title>
4+
<title>Netjsongraph.js: Examples</title>
55
<meta charset="utf-8" />
66
<link rel="preconnect" href="https://fonts.googleapis.com" />
77
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -141,69 +141,74 @@ <h1>NetJSONGraph.js Example Demos</h1>
141141

142142
<main>
143143
<div class="cards">
144-
<a href="./examples/netjsongraph.html" target="_blank">Basic usage</a>
144+
<a href="./examples/netjsongraph.html" target="_blank">Standard graph</a>
145145
</div>
146146
<div class="cards">
147-
<a href="./examples/netjsonmap.html" target="_blank">Geographic map</a>
147+
<a href="./examples/netjsongraph-elementsLegend.html" target="_blank"
148+
>Graph with custom attributes &amp; legend</a
149+
>
148150
</div>
149151
<div class="cards">
150-
<a href="./examples/netjson-multipleInterfaces.html" target="_blank"
151-
>Multiple interfaces</a
152+
<a href="./examples/netjsongraph-wifi-clients.html" target="_blank"
153+
>WiFi clients graph</a
152154
>
153155
</div>
154156
<div class="cards">
155-
<a href="./examples/netjson-searchElements.html" target="_blank"
156-
>Search elements</a
157+
<a href="./examples/netjsonmap.html" target="_blank">Geographic map</a>
158+
</div>
159+
<div class="cards">
160+
<a href="./examples/netjson-clustering.html" target="_blank"
161+
>Geo map with clusters</a
157162
>
158163
</div>
159164
<div class="cards">
160-
<a href="./examples/netjson-dateParse.html" target="_blank"
161-
>Date parse</a
165+
<a href="./examples/njg-geojson.html" target="_blank"
166+
>Geo map GeoJSON</a
162167
>
163168
</div>
164169
<div class="cards">
165-
<a href="./examples/netjson-switchRenderMode.html" target="_blank"
166-
>Switch render mode</a
170+
<a href="./examples/netjsonmap-multipleTiles.html" target="_blank"
171+
>Geo map with tile switch</a
167172
>
168173
</div>
169174
<div class="cards">
170-
<a href="./examples/netjson-switchGraphMode.html" target="_blank"
171-
>Switch graph mode</a
175+
<a href="./examples/netjson-switchRenderMode.html" target="_blank"
176+
>Switch render mode (Canvas/SVG)</a
172177
>
173178
</div>
174179
<div class="cards">
175-
<a href="./examples/netjsongraph-nodeExpand.html" target="_blank"
176-
>Nodes expand or fold</a
180+
<a href="./examples/netjson-switchGraphMode.html" target="_blank"
181+
>Switch graph mode (Geographic/Graph)</a
177182
>
178183
</div>
179184
<div class="cards">
180185
<a href="./examples/netjsonmap-indoormap.html" target="_blank"
181-
>Indoor map</a
186+
>Indoor map (simple)</a
182187
>
183188
</div>
184189
<div class="cards">
185190
<a href="./examples/netjsonmap-indoormap-overlay.html" target="_blank"
186-
>Indoor map as Overlay of Geographic map</a
191+
>Geo map and drill down to indoor maps</a
187192
>
188193
</div>
189194
<div class="cards">
190195
<a href="./examples/netjsonmap-plugins.html" target="_blank"
191-
>Leaflet plugins</a
196+
>Geo map &amp; leaflet plugins</a
192197
>
193198
</div>
194199
<div class="cards">
195-
<a href="./examples/netjsongraph-graphGL.html" target="_blank"
196-
>GraphGL render for big data</a
200+
<a href="./examples/netjson-multipleInterfaces.html" target="_blank"
201+
>Multiple interfaces</a
197202
>
198203
</div>
199204
<div class="cards">
200-
<a href="./examples/netjsongraph-elementsLegend.html" target="_blank"
201-
>Custom attributes</a
205+
<a href="./examples/netjson-searchElements.html" target="_blank"
206+
>Search elements</a
202207
>
203208
</div>
204209
<div class="cards">
205-
<a href="./examples/netjsongraph-multipleLinks.html" target="_blank"
206-
>Multiple links render</a
210+
<a href="./examples/netjson-dateParse.html" target="_blank"
211+
>Date parse</a
207212
>
208213
</div>
209214
<div class="cards">
@@ -217,33 +222,28 @@ <h1>NetJSONGraph.js Example Demos</h1>
217222
>
218223
</div>
219224
<div class="cards">
220-
<a href="./examples/netjsonmap-multipleTiles.html" target="_blank"
221-
>Multiple tiles render</a
222-
>
223-
</div>
224-
<div class="cards">
225-
<a href="./examples/netjsonmap-animation.html" target="_blank"
226-
>Geographic map animated links</a
225+
<a href="./examples/netjsonmap-appendData2.html" target="_blank"
226+
>Append data using arrays</a
227227
>
228228
</div>
229229
<div class="cards">
230-
<a href="./examples/netjsonmap-appendData2.html" target="_blank"
231-
>Append data using arrays</a
230+
<a href="./examples/netjsongraph-multipleLinks.html" target="_blank"
231+
>Multiple links render</a
232232
>
233233
</div>
234234
<div class="cards">
235-
<a href="./examples/njg-geojson.html" target="_blank"
236-
>Geographic map with GeoJSON data</a
235+
<a href="./examples/netjsongraph-graphGL.html" target="_blank"
236+
>GraphGL render for big data</a
237237
>
238238
</div>
239239
<div class="cards">
240-
<a href="./examples/netjson-clustering.html" target="_blank"
241-
>Clustering</a
240+
<a href="./examples/netjsonmap-animation.html" target="_blank"
241+
>Geographic map animated links</a
242242
>
243243
</div>
244244
<div class="cards">
245-
<a href="./examples/netjsongraph-wifi-clients.html" target="_blank"
246-
>WiFi Clients Graph</a
245+
<a href="./examples/netjsongraph-nodeExpand.html" target="_blank"
246+
>Nodes expand or fold</a
247247
>
248248
</div>
249249
</main>

package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
"src/**/*.js": [
1919
"prettier --write",
2020
"git add"
21+
],
22+
"public/example_templates/**/*.html": [
23+
"prettier --write",
24+
"git add"
2125
]
2226
},
2327
"jest": {

public/example_templates/netjson-clustering.html

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -70,36 +70,33 @@
7070
</head>
7171
<body>
7272
<script type="text/javascript">
73-
const map = new NetJSONGraph(
74-
"../assets/data/netjson-clustering.json",
75-
{
76-
render: "map",
77-
clustering: true,
78-
clusteringThreshold: 2,
79-
clusterRadius: 80,
80-
disableClusteringAtLevel: 18,
81-
clusteringAttribute: "status",
82-
clusterSeparation: 20,
83-
bookmarkableActions: {
84-
enabled: true,
85-
id: "clustering",
86-
},
87-
mapOptions: {
88-
center: [55.98, 11.54],
89-
zoom: 4,
90-
minZoom: 3,
91-
maxZoom: 18,
92-
// No label configuration to keep the view clean
93-
},
94-
// defaults categories and colors
95-
// shown here to make customization easier
96-
// nodeCategories: [
97-
// {name: "ok", nodeStyle: {color: "#1ba619"}},
98-
// {name: "problem", nodeStyle: {color: "#ffa500"}},
99-
// {name: "critical", nodeStyle: {color: "#c92517"}},
100-
// ]
101-
}
102-
);
73+
const map = new NetJSONGraph("../assets/data/netjson-clustering.json", {
74+
render: "map",
75+
clustering: true,
76+
clusteringThreshold: 2,
77+
clusterRadius: 80,
78+
disableClusteringAtLevel: 18,
79+
clusteringAttribute: "status",
80+
clusterSeparation: 20,
81+
bookmarkableActions: {
82+
enabled: true,
83+
id: "clustering",
84+
},
85+
mapOptions: {
86+
center: [55.98, 11.54],
87+
zoom: 4,
88+
minZoom: 3,
89+
maxZoom: 18,
90+
// No label configuration to keep the view clean
91+
},
92+
// defaults categories and colors
93+
// shown here to make customization easier
94+
// nodeCategories: [
95+
// {name: "ok", nodeStyle: {color: "#1ba619"}},
96+
// {name: "problem", nodeStyle: {color: "#ffa500"}},
97+
// {name: "critical", nodeStyle: {color: "#c92517"}},
98+
// ]
99+
});
103100

104101
// Build legend UI
105102
const createLegend = (key, className) => {

public/example_templates/netjson-dateParse.html

Lines changed: 1 addition & 1 deletion
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: basic example</title>

public/example_templates/netjson-multipleInterfaces.html

Lines changed: 1 addition & 1 deletion
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: basic example</title>

public/example_templates/netjson-searchElements.html

Lines changed: 1 addition & 6 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: basic example</title>
@@ -29,11 +29,6 @@
2929
right: 0;
3030
}
3131

32-
.njg-searchBtn {
33-
border: none;
34-
border-radius: 5px;
35-
}
36-
3732
@media only screen and (max-width: 500px) {
3833
.njg-searchInput {
3934
width: 40%;

public/example_templates/netjson-switchGraphMode.html

Lines changed: 1 addition & 1 deletion
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: basic example</title>

public/example_templates/netjson-switchRenderMode.html

Lines changed: 1 addition & 1 deletion
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: basic example</title>

0 commit comments

Comments
 (0)