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 8 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
8 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
5d78f63
Merge branch 'master' into master
Unnati-Gupta24 Feb 9, 2025
e83e9b0
[fix] Remove global CSS rules to avoid conflicts #303
Unnati-Gupta24 Feb 11, 2025
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
11 changes: 11 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,13 @@
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style type="text/css">
html, body {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's avoid repeating this in each example. We can make a CSS file and store it in public/asstes/css/, should be doable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya I'm making a separate file for example specific stylings

margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

#legend h4 {
margin: 10px 0;
text-align: center;
Expand Down Expand Up @@ -68,9 +75,13 @@
</style>
</head>
<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>
Comment on lines +78 to +80
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we shorten this a bit, eg?

Suggested change
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>
<div id="njg">
</div>

The njg acronym stands for netjsongraph, it's already used elsewhere in the code.

<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
12 changes: 12 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,13 @@
<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%;
}

.njg-date {
height: fit-content;
text-align: center;
Expand All @@ -23,6 +30,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 +42,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
12 changes: 12 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,19 @@
<!-- 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%;
}
</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 +31,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
14 changes: 13 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,13 @@
<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%;
}

.njg-searchBtn {
border: none;
border-radius: 5px;
Expand Down Expand Up @@ -52,6 +59,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 +71,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 +121,4 @@
graph.render();
</script>
</body>
</html>
</html>
14 changes: 13 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,31 @@
<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%;
}

.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 +64,4 @@
map.render();
</script>
</body>
</html>
</html>
16 changes: 14 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,14 @@
<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%;
}

.switch-wrap input[type="checkbox"] {
height: 0;
width: 0;
Expand All @@ -28,11 +36,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 +103,4 @@
}
</script>
</body>
</html>
</html>
31 changes: 16 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,12 @@
<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%;
}

#legend h4 {
margin: 10px 0;
Expand Down Expand Up @@ -85,21 +85,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
12 changes: 12 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,19 @@
<!-- 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%;
}
</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 +28,7 @@
const graph = new NetJSONGraph(
"../assets/data/netjsongraph-graphGL.json",
{
container: "#graphChartContainer",
graphConfig: {
series: {
type: "graphGL",
Expand Down
14 changes: 13 additions & 1 deletion public/example_templates/netjsongraph-multipleLinks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,20 @@
<!-- 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%;
}
</style>
</head>

<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>
<script type="text/javascript">
/*
The demo is used to show the multiple links render.
Expand All @@ -19,6 +30,7 @@
const graph = new NetJSONGraph(
"../assets/data/netjsongraph-multipleLinks.json",
{
container: "#graphChartContainer",
graphConfig: {
// set force layout params
force: {
Expand All @@ -31,4 +43,4 @@
graph.render();
</script>
</body>
</html>
</html>
12 changes: 12 additions & 0 deletions public/example_templates/netjsongraph-nodeExpand.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,19 @@
<!-- 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%;
}
</style>
</head>
<body>
<div class="netjsongraph-container">
<div id="graphChartContainer"></div>
</div>
<script type="text/javascript">
/*
The demo is used to show hwo to interact with elements.
Expand All @@ -17,6 +28,7 @@
const graph = new NetJSONGraph(
"../assets/data/netjsongraph-foldNodes.json",
{
container: "#graphChartContainer",
dealDataByWorker: "../lib/js/netjsonWorker.js",
echartsOption: {
legend: {
Expand Down
Loading