Skip to content

Commit

Permalink
Merge e884077 into 1606d69
Browse files Browse the repository at this point in the history
  • Loading branch information
@totallynotvaishnav
totallynotvaishnav authored Aug 10, 2022
2 parents 1606d69 + e884077 commit f7ccb6e
Show file tree
Hide file tree
Showing 28 changed files with 787 additions and 348 deletions.
110 changes: 68 additions & 42 deletions examples/netjson-dateParse.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<title>netjsongraph.js: basic example</title>
<meta charset="utf-8">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- theme can be easily customized via css -->
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet">
<link href="../src/css/netjsongraph.css" rel="stylesheet">
</head>
<body>
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../src/css/netjsongraph.css" rel="stylesheet" />
<style>
.njg-date {
height: fit-content;
text-align: center;
}

@media only screen and (max-width: 650px) {
.njg-date {
bottom: 80px;
width: 100vw;
right: unset;
}
}

@media only screen and (max-width: 850px) and (min-width: 650px) {
.njg-date {
bottom: 80px;
}
}
</style>
</head>

<body>
<script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
<script type="text/javascript">
/*
The demo is used to show the use of the `dataParse` function.
You can set the node or link property value `time`, we will call this function to parse the string in the element details defaultly.
Of course you can also call directly.
*/
// `graph` render defaultly.
const graph = new NetJSONGraph("./data/netjsonmap.json", {
// Convert to internal json format，add `time` field.
prepareData: data => {
data.nodes.map(node => {
node.label = node.name;
node.properties = node.properties || {};
node.properties.time = node.properties.time || "2000-01-01T00:00:00.000Z"
})
data.links.map(link => {
link.properties = link.properties || {};
link.properties.time = link.properties.time || "1999-12-31T23:59:59.999Z"
})
},
});

graph.render();
/*
The demo is used to show the use of the `dataParse` function.
You can set the node or link property value `time`, we will call this function to parse the string in the element details defaultly.
Of course you can also call directly.
*/
// `graph` render defaultly.
const graph = new NetJSONGraph("./data/netjsonmap.json", {
// Convert to internal json format，add `time` field.
prepareData: (data) => {
data.nodes.map((node) => {
node.label = node.name;
node.properties = node.properties || {};
node.properties.time =
node.properties.time || "2000-01-01T00:00:00.000Z";
});
data.links.map((link) => {
link.properties = link.properties || {};
link.properties.time =
link.properties.time || "1999-12-31T23:59:59.999Z";
});
},
});

graph.render();

(function addDateParse(_this) {
const dateNode = document.createElement("span"),
// Try to call the function directly.
// The exec result must be [date, year, month, day, hour, minute, second, millisecond?]
dateResult = _this.utils.dateParse({
dateString: "2019-04-03T05:06:54.000Z",
parseRegular:
/^([1-9]\d{3})-(\d{1,2})-(\d{1,2})T(\d{1,2}):(\d{1,2}):(\d{1,2})(?:\.(\d{1,3}))?Z$/,
});

(function addDateParse(_this){
const dateNode = document.createElement("span"),
// Try to call the function directly.
// The exec result must be [date, year, month, day, hour, minute, second, millisecond?]
dateResult = _this.utils.dateParse({
dateString: "2019-04-03T05:06:54.000Z",
parseRegular: /^([1-9]\d{3})-(\d{1,2})-(\d{1,2})T(\d{1,2}):(\d{1,2}):(\d{1,2})(?:\.(\d{1,3}))?Z$/,
});

dateNode.setAttribute("title", dateResult);
dateNode.setAttribute("class", "njg-date");
dateNode.innerHTML = "Incoming Time: " + dateResult;
_this.el.appendChild(dateNode);
})(graph)
dateNode.setAttribute("title", dateResult);
dateNode.setAttribute("class", "njg-date");
dateNode.innerHTML = "Incoming Time: " + dateResult;
_this.el.appendChild(dateNode);
})(graph);
</script>
</body>
</html>
30 changes: 16 additions & 14 deletions examples/netjson-multipleInterfaces.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<title>netjsongraph.js: basic example</title>
<meta charset="utf-8">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- theme can be easily customized via css -->
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet">
<link href="../src/css/netjsongraph.css" rel="stylesheet">
</head>
<body>
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../src/css/netjsongraph.css" rel="stylesheet" />
</head>

<body>
<script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
<script type="text/javascript">
/*
/*
The demo is used to show how to deal with the `multiple interfaces` in the NetJSON data.
We provide a work file to process the data before rendering.
This file provides functions to remove dirty data, deduplicate, handle multiple interfaces, add node links, add flatNodes and so on.
You can also define related files yourself.
*/
// `graph` render defaultly.
const graph = new NetJSONGraph("./data/netjson-multipleInterfaces.json", {
// Asynchronous processing of incoming data formats using WebWorker file.
dealDataByWorker: "../src/js/netjsonWorker.js",
});
graph.render();
// `graph` render defaultly.
const graph = new NetJSONGraph("./data/netjson-multipleInterfaces.json", {
// Asynchronous processing of incoming data formats using WebWorker file.
dealDataByWorker: "../src/js/netjsonWorker.js",
});
graph.render();
</script>
</body>
</body>
</html>
44 changes: 44 additions & 0 deletions examples/netjson-searchElements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,55 @@
<html lang="en">
<head>
<title>netjsongraph.js: basic example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<!-- theme can be easily customized via css -->
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../src/css/netjsongraph.css" rel="stylesheet" />
<style>
.njg-searchBtn {
border: none;
border-radius: 5px;
padding: 4px 8px;
}

.njg-searchInput {
padding: 4px;
border-radius: 5px;
border: none;
max-width: 70%;
}

.njg-searchContainer {
margin: 0 auto;
width: 80%;
text-align: center;
left: 0;
right: 0;
}

.njg-searchBtn {
border: none;
border-radius: 5px;
}

@media only screen and (max-width: 500px) {
.njg-searchInput {
width: 40%;
}
.njg-searchContainer {
width: 70%;
}
}

@media only screen and (max-width: 850px) and (min-width: 500px) {
.njg-searchInput {
width: 50%;
}
}
</style>
</head>

<body>
<script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
<script type="text/javascript">
Expand Down
8 changes: 3 additions & 5 deletions examples/netjson-switchGraphMode.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<title>netjsongraph.js: basic example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
Expand All @@ -14,9 +15,6 @@
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../src/css/netjsongraph.css" rel="stylesheet" />
<style type="text/css">
.njg-metadata {
left: 50px;
}
.leaflet-control-zoom {
top: 55px;
right: 1px;
Expand All @@ -27,8 +25,8 @@
<script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
<script type="text/javascript">
/*
The demo is used to show how to switch the netjsongraph render mode -- `graph` or `map`.
*/
The demo is used to show how to switch the netjsongraph render mode -- `graph` or `map`.
*/
const map = new NetJSONGraph("./data/netjsonmap.json", {
render: "map",
switchMode: true,
Expand Down
40 changes: 38 additions & 2 deletions examples/netjson-switchRenderMode.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,52 @@
<head>
<title>netjsongraph.js: basic example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- theme can be easily customized via css -->
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../src/css/netjsongraph.css" rel="stylesheet" />
<style>
.switch-wrap input[type="checkbox"] {
height: 0;
width: 0;
left: unset;
pointer-events: none;
}

@media only screen and (max-width: 500px) {
.switch-wrap {
top: 6px;
right: 60px;
height: fit-content;
}

.switch-wrap b {
font-size: 13px;
}

.switch-wrap label {
width: 38px;
height: 16px;
}

.switch-wrap label::before {
width: 12px;
height: 12px;
}

.switch-wrap input[type="checkbox"]:checked + label:before {
transform: translateX(20px);
}
}
</style>
</head>

<body>
<script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
<script type="text/javascript">
/*
The demo is used to show how to switch the netjsongraph render mode -- `svg` or `canvas`.
*/
The demo is used to show how to switch the netjsongraph render mode -- `svg` or `canvas`.
*/
const graph = new NetJSONGraph("./data/netjsonmap.json", {
onReady: function () {
switchRenderMode(this);
Expand Down
Loading

0 comments on commit f7ccb6e

Please sign in to comment.