Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[fix] Remove global CSS rules to avoid conflicts #303 Refactored CSS to prevent global styling conflicts with downstream projects. Fixes #303 #317

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

[fix] Remove global CSS rules to avoid conflicts #303 Refactored CSS to prevent global styling conflicts with downstream projects. Fixes #303 #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
47dabc9
Fixing global css issue
Unnati-Gupta24 Dec 23, 2024
2960928
Fixing global css issue
Unnati-Gupta24 Dec 23, 2024
489d344
[fix] Refactor CSS to avoid global style declarations #303
Unnati-Gupta24 Dec 23, 2024
a545b1c
[fix] Remove global CSS rules to avoid conflicts with downstream proj…
Unnati-Gupta24 Dec 23, 2024
a117764
[fix] Remove global CSS rules to avoid conflicts with downstream proj…
Unnati-Gupta24 Dec 23, 2024
068d66e
[fix] Remove global CSS rules to avoid conflicts #303
Unnati-Gupta24 Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions public/example_templates/netjson-clustering.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,26 @@
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.netjsongraph-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#graphChartContainer {
width: 100%;
height: 100%;
}

#legend h4 {
margin: 10px 0;
text-align: center;
Expand Down Expand Up @@ -68,9 +88,13 @@
</style>
</head>
<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>
<script type="text/javascript">
const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
render: "map",
container: "#graphChartContainer",
clustering: true,
clusteringThreshold: 50,
// set map initial state.
Expand Down
25 changes: 25 additions & 0 deletions public/example_templates/netjson-dateParse.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,26 @@
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.netjsongraph-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#graphChartContainer {
width: 100%;
height: 100%;
}

.njg-date {
height: fit-content;
text-align: center;
Expand All @@ -23,6 +43,10 @@
</head>

<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>

<script type="text/javascript">
/*
The demo is used to show the use of the `dataParse` function.
Expand All @@ -31,6 +55,7 @@
*/
// `graph` render defaultly.
const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
container: "#graphChartContainer",
// Convert to internal json format，add `time` field.
prepareData: (data) => {
data.nodes.map((node) => {
Expand Down
25 changes: 25 additions & 0 deletions public/example_templates/netjson-multipleInterfaces.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,32 @@
<!-- theme can be easily customized via css -->
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.netjsongraph-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#graphChartContainer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>
<script type="text/javascript">
/*
The demo is used to show how to deal with the `multiple interfaces` in the NetJSON data.
Expand All @@ -20,6 +44,7 @@
const graph = new NetJSONGraph(
"../assets/data/netjson-multipleInterfaces.json",
{
container: "#graphChartContainer",
// Asynchronous processing of incoming data formats using WebWorker file.
dealDataByWorker: "../lib/js/netjsonWorker.js",
},
Expand Down
27 changes: 26 additions & 1 deletion public/example_templates/netjson-searchElements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,26 @@
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.netjsongraph-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#graphChartContainer {
width: 100%;
height: 100%;
}

.njg-searchBtn {
border: none;
border-radius: 5px;
Expand Down Expand Up @@ -52,6 +72,10 @@
</head>

<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>

<script type="text/javascript">
/*
The demo is used to show the use of the `searchElements` function.
Expand All @@ -60,6 +84,7 @@
*/
// `graph` render defaultly.
let graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
container: "#graphChartContainer",
onReady: function () {
let searchContainer = document.createElement("div"),
searchInput = document.createElement("input"),
Expand Down Expand Up @@ -109,4 +134,4 @@
graph.render();
</script>
</body>
</html>
</html>
27 changes: 26 additions & 1 deletion public/example_templates/netjson-switchGraphMode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,44 @@
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.netjsongraph-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#graphChartContainer {
width: 100%;
height: 100%;
}

.leaflet-control-zoom {
top: 55px;
right: 1px;
}
</style>
</head>
<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>

<script type="text/javascript">
/*
The demo is used to show how to switch the netjsongraph render mode -- `graph` or `map`.
*/
const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
render: "map",
container: "#graphChartContainer",
switchMode: true,
// set map initial state.
mapOptions: {
Expand All @@ -52,4 +77,4 @@
map.render();
</script>
</body>
</html>
</html>
29 changes: 27 additions & 2 deletions public/example_templates/netjson-switchRenderMode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>netjsongraph.js: basic example</title>
Expand All @@ -8,6 +8,27 @@
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.netjsongraph-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#graphChartContainer {
width: 100%;
height: 100%;
}

.switch-wrap input[type="checkbox"] {
height: 0;
width: 0;
Expand All @@ -28,11 +49,15 @@
</head>

<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>
<script type="text/javascript">
/*
The demo is used to show how to switch the netjsongraph render mode -- `svg` or `canvas`.
*/
const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
container: "#graphChartContainer",
onReady: function () {
switchRenderMode(this);
},
Expand Down Expand Up @@ -91,4 +116,4 @@
}
</script>
</body>
</html>
</html>
44 changes: 29 additions & 15 deletions public/example_templates/netjsongraph-elementsLegend.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,25 @@
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style>
#container {
width: 100%;
height: 100%;
overflow: hidden;
overflow-y: scroll;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.netjsongraph-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#graphChartContainer {
width: 100%;
height: 100%;
}

#legend h4 {
margin: 10px 0;
Expand Down Expand Up @@ -85,21 +98,22 @@
}
</style>
</head>
<body>
<div id="legend">
<h4>Legends</h4>
<p><span class="circle node">&nbsp;</span> ordinary node</p>
<p><span class="circle gateway">&nbsp;</span> gateway node</p>
<p><span class="link wireless">&nbsp;</span> wireless link</p>
<p><span class="link ethernet">&nbsp;</span> ethernet link</p>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
<div id="legend">
<h4>Legends</h4>
<p><span class="circle node">&nbsp;</span> ordinary node</p>
<p><span class="circle gateway">&nbsp;</span> gateway node</p>
<p><span class="link wireless">&nbsp;</span> wireless link</p>
<p><span class="link ethernet">&nbsp;</span> ethernet link</p>
</div>
</div>
<div id="container"></div>
<script type="text/javascript">
/*
The demo is used to show how to set colorful nodes.
*/
const graph = new NetJSONGraph("../assets/data/netjson-elementsLegend.json", {
el: "#container",
container: "#graphChartContainer",
graphConfig: {
series: {
force: {
Expand Down
25 changes: 25 additions & 0 deletions public/example_templates/netjsongraph-graphGL.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,32 @@
<!-- theme can be easily customized via css -->
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.netjsongraph-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#graphChartContainer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>
<script type="text/javascript">
/*
The demo is used to show how to use `graphGL` to render big data.
Expand All @@ -17,6 +41,7 @@
const graph = new NetJSONGraph(
"../assets/data/netjsongraph-graphGL.json",
{
container: "#graphChartContainer",
graphConfig: {
series: {
type: "graphGL",
Expand Down
Loading
Loading