[fix] Remove global CSS rules to avoid conflicts #303 Refactored CSS to prevent global styling conflicts with downstream projects. Fixes #303 #317
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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; | ||
|
|
@@ -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. | ||
|
|
@@ -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) => { | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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. | ||
|
|
@@ -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", | ||
| }, | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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; | ||
|
|
@@ -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. | ||
|
|
@@ -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"), | ||
|
|
@@ -109,4 +121,4 @@ | |
| graph.render(); | ||
| </script> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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: { | ||
|
|
@@ -52,4 +64,4 @@ | |
| map.render(); | ||
| </script> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>netjsongraph.js: basic example</title> | ||
|
|
@@ -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; | ||
|
|
@@ -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); | ||
| }, | ||
|
|
@@ -91,4 +103,4 @@ | |
| } | ||
| </script> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,12 +7,12 @@ | |
| <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%; | ||
| } | ||
|
|
||
| #legend h4 { | ||
| margin: 10px 0; | ||
|
|
@@ -85,21 +85,22 @@ | |
| } | ||
| </style> | ||
| </head> | ||
| <div class="netjsongraph-container"> | ||
| <div id="graphChartContainer"></div> | ||
| <div id="legend"> | ||
| <h4>Legends</h4> | ||
| <p><span class="circle node"> </span> ordinary node</p> | ||
| <p><span class="circle gateway"> </span> gateway node</p> | ||
| <p><span class="link wireless"> </span> wireless link</p> | ||
| <p><span class="link ethernet"> </span> ethernet link</p> | ||
| </div> | ||
| </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", { | ||
| container: "#graphChartContainer", | ||
| graphConfig: { | ||
| series: { | ||
| force: { | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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. | ||
|
|
@@ -17,6 +28,7 @@ | |
| const graph = new NetJSONGraph( | ||
| "../assets/data/netjsongraph-graphGL.json", | ||
| { | ||
| container: "#graphChartContainer", | ||
| graphConfig: { | ||
| series: { | ||
| type: "graphGL", | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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. | ||
|
|
@@ -19,6 +30,7 @@ | |
| const graph = new NetJSONGraph( | ||
| "../assets/data/netjsongraph-multipleLinks.json", | ||
| { | ||
| container: "#graphChartContainer", | ||
| graphConfig: { | ||
| // set force layout params | ||
| force: { | ||
|
|
@@ -31,4 +43,4 @@ | |
| graph.render(); | ||
| </script> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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. | ||
|
|
@@ -17,6 +28,7 @@ | |
| const graph = new NetJSONGraph( | ||
| "../assets/data/netjsongraph-foldNodes.json", | ||
| { | ||
| container: "#graphChartContainer", | ||
| dealDataByWorker: "../lib/js/netjsonWorker.js", | ||
| echartsOption: { | ||
| legend: { | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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.There was a problem hiding this comment.
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