Skip to content

Instantly share code, notes, and snippets.

@kurtisdunn

kurtisdunn/index.html

Created January 14, 2021 04:00
Show Gist options
  • Save kurtisdunn/d619c2ca4eb3f46769387e6ff036c36f to your computer and use it in GitHub Desktop.
Save kurtisdunn/d619c2ca4eb3f46769387e6ff036c36f to your computer and use it in GitHub Desktop.
Download ZIP
Ping time Chart
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blank Template</title>
</head>
<body>
<div class="container">
<canvas id="chart1" width="800" height="450"></canvas>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
import './scss/main.scss';
import Chart from 'chart.js';
const commsRoom = [
{from: "10.10.10.15", seq:0, time:"0.768"},
{from: "10.10.10.15", seq:1, time:"0.740"},
{from: "10.10.10.15", seq:2, time:"2.287"},
{from: "10.10.10.15", seq:3, time:"0.793"},
{from: "10.10.10.15", seq:4, time:"0.788"},
{from: "10.10.10.15", seq:5, time:"0.742"},
{from: "10.10.10.15", seq:6, time:"0.886"},
{from: "10.10.10.15", seq:7, time:"2.338"},
{from: "10.10.10.15", seq:8, time:"0.761"},
{from: "10.10.10.15", seq:9, time:"0.835"},
{from: "10.10.10.15", seq:10, time:"0.747"},
{from: "10.10.10.15", seq:11, time:"0.897"},
{from: "10.10.10.15", seq:12, time:"2.732"},
{from: "10.10.10.15", seq:13, time:"0.765"},
{from: "10.10.10.15", seq:14, time:"0.932"},
{from: "10.10.10.15", seq:15, time:"0.744"},
{from: "10.10.10.15", seq:16, time:"0.723"},
{from: "10.10.10.15", seq:17, time:"8.989"},
{from: "10.10.10.15", seq:18, time:"0.842"},
{from: "10.10.10.15", seq:19, time:"0.827"},
{from: "10.10.10.15", seq:20, time:"0.701"},
{from: "10.10.10.15", seq:21, time:"0.772"},
{from: "10.10.10.15", seq:22, time:"2.160"},
{from: "10.10.10.15", seq:23, time:"0.712"},
{from: "10.10.10.15", seq:24, time:"0.836"},
{from: "10.10.10.15", seq:25, time:"0.751"},
{from: "10.10.10.15", seq:26, time:"4.183"},
{from: "10.10.10.15", seq:27, time:"5.117"},
{from: "10.10.10.15", seq:28, time:"3.192"},
{from: "10.10.10.15", seq:29, time:"0.950"},
{from: "10.10.10.15", seq:30, time:"0.836"},
{from: "10.10.10.15", seq:31, time:"0.755"},
{from: "10.10.10.15", seq:32, time:"0.977"},
{from: "10.10.10.15", seq:33, time:"0.777"},
{from: "10.10.10.15", seq:34, time:"0.841"},
{from: "10.10.10.15", seq:35, time:"0.856"},
{from: "10.10.10.15", seq:36, time:"0.815"},
{from: "10.10.10.15", seq:37, time:"0.822"},
{from: "10.10.10.15", seq:38, time:"10.898"},
{from: "10.10.10.15", seq:39, time:"0.783"},
{from: "10.10.10.15", seq:40, time:"0.770"}
]
const regionalOffice = [
{from: "10.10.10.10", seq:0, time:"1.255"},
{from: "10.10.10.10", seq:1, time:"0.767"},
{from: "10.10.10.10", seq:2, time:"7.442"},
{from: "10.10.10.10", seq:3, time:"1.042"},
{from: "10.10.10.10", seq:4, time:"0.871"},
{from: "10.10.10.10", seq:5, time:"0.770"},
{from: "10.10.10.10", seq:6, time:"0.784"},
{from: "10.10.10.10", seq:7, time:"0.818"},
{from: "10.10.10.10", seq:8, time:"0.799"},
{from: "10.10.10.10", seq:9, time:"0.871"},
{from: "10.10.10.10", seq:10, time:"0.784"},
{from: "10.10.10.10", seq:11, time:"5.552"},
{from: "10.10.10.10", seq:12, time:"0.942"},
{from: "10.10.10.10", seq:13, time:"0.872"},
{from: "10.10.10.10", seq:14, time:"0.846"},
{from: "10.10.10.10", seq:15, time:"0.731"},
{from: "10.10.10.10", seq:16, time:"0.772"},
{from: "10.10.10.10", seq:17, time:"11.761"},
{from: "10.10.10.10", seq:18, time:"0.737"},
{from: "10.10.10.10", seq:19, time:"9.753"},
{from: "10.10.10.10", seq:20, time:"0.956"},
{from: "10.10.10.10", seq:21, time:"0.963"},
{from: "10.10.10.10", seq:22, time:"0.785"},
{from: "10.10.10.10", seq:23, time:"0.777"},
{from: "10.10.10.10", seq:24, time:"0.753"},
{from: "10.10.10.10", seq:25, time:"0.701"},
{from: "10.10.10.10", seq:26, time:"0.949"},
{from: "10.10.10.10", seq:27, time:"0.718"},
{from: "10.10.10.10", seq:28, time:"0.811"},
{from: "10.10.10.10", seq:29, time:"0.757"},
{from: "10.10.10.10", seq:30, time:"0.876"},
{from: "10.10.10.10", seq:31, time:"1.636"},
{from: "10.10.10.10", seq:32, time:"0.994"},
{from: "10.10.10.10", seq:33, time:"0.747"},
{from: "10.10.10.10", seq:34, time:"0.979"},
{from: "10.10.10.10", seq:35, time:"0.768"},
{from: "10.10.10.10", seq:36, time:"0.768"},
{from: "10.10.10.10", seq:37, time:"0.764"},
{from: "10.10.10.10", seq:38, time:"0.857"},
{from: "10.10.10.10", seq:39, time:"0.704"},
{from: "10.10.10.10", seq:40, time:"0.767"}
]
const gallard =[
{ from: "10.10.10.22", seq:0, time:"2.158"},
{ from: "10.10.10.22", seq:1, time:"2.172"},
{ from: "10.10.10.22", seq:2, time:"1.947"},
{ from: "10.10.10.22", seq:3, time:"1.876"},
{ from: "10.10.10.22", seq:4, time:"2.359"},
{ from: "10.10.10.22", seq:5, time:"2.122"},
{ from: "10.10.10.22", seq:6, time:"2.263"},
{ from: "10.10.10.22", seq:7, time:"2.007"},
{ from: "10.10.10.22", seq:8, time:"2.601"},
{ from: "10.10.10.22", seq:9, time:"2.032"},
{ from: "10.10.10.22", seq:10, time:"2.017"},
{ from: "10.10.10.22", seq:11, time:"2.296"},
{ from: "10.10.10.22", seq:12, time:"2.109"},
{ from: "10.10.10.22", seq:13, time:"1.963"},
{ from: "10.10.10.22", seq:14, time:"1.977"},
{ from: "10.10.10.22", seq:15, time:"1.873"},
{ from: "10.10.10.22", seq:16, time:"2.193"},
{ from: "10.10.10.22", seq:17, time:"1.998"},
{ from: "10.10.10.22", seq:18, time:"2.090"},
{ from: "10.10.10.22", seq:19, time:"1.938"},
{ from: "10.10.10.22", seq:20, time:"1.897"},
{ from: "10.10.10.22", seq:21, time:"1.856"},
{ from: "10.10.10.22", seq:22, time:"2.013"},
{ from: "10.10.10.22", seq:23, time:"2.167"},
{ from: "10.10.10.22", seq:24, time:"2.067"},
{ from: "10.10.10.22", seq:25, time:"2.157"},
{ from: "10.10.10.22", seq:26, time:"2.130"},
{ from: "10.10.10.22", seq:27, time:"1.975"},
{ from: "10.10.10.22", seq:28, time:"1.917"},
{ from: "10.10.10.22", seq:29, time:"2.128"},
{ from: "10.10.10.22", seq:30, time:"2.118"},
{ from: "10.10.10.22", seq:31, time:"2.166"},
{ from: "10.10.10.22", seq:32, time:"2.122"},
{ from: "10.10.10.22", seq:33, time:"2.124"},
{ from: "10.10.10.22", seq:34, time:"2.177"},
{ from: "10.10.10.22", seq:35, time:"6.711"},
{ from: "10.10.10.22", seq:36, time:"6.741"},
{ from: "10.10.10.22", seq:37, time:"1.971"},
{ from: "10.10.10.22", seq:38, time:"1.984"},
{ from: "10.10.10.22", seq:39, time:"2.118"},
{ from: "10.10.10.22", seq:40, time:"2.104"}
]
const communityCare =[
{from:"10.10.10.30", seq:0, time:"0.852"},
{from:"10.10.10.30", seq:1, time:"0.956"},
{from:"10.10.10.30", seq:2, time:"3.618"},
{from:"10.10.10.30", seq:3, time:"0.884"},
{from:"10.10.10.30", seq:4, time:"0.832"},
{from:"10.10.10.30", seq:5, time:"0.835"},
{from:"10.10.10.30", seq:6, time:"0.969"},
{from:"10.10.10.30", seq:7, time:"0.716"},
{from:"10.10.10.30", seq:8, time:"0.825"},
{from:"10.10.10.30", seq:9, time:"0.751"},
{from:"10.10.10.30", seq:10, time:"0.983"},
{from:"10.10.10.30", seq:11, time:"1.016"},
{from:"10.10.10.30", seq:12, time:"0.967"},
{from:"10.10.10.30", seq:13, time:"0.786"},
{from:"10.10.10.30", seq:14, time:"0.780"},
{from:"10.10.10.30", seq:15, time:"0.817"},
{from:"10.10.10.30", seq:16, time:"0.839"},
{from:"10.10.10.30", seq:17, time:"0.801"},
{from:"10.10.10.30", seq:18, time:"0.946"},
{from:"10.10.10.30", seq:19, time:"4.461"},
{from:"10.10.10.30", seq:20, time:"0.812"},
{from:"10.10.10.30", seq:21, time:"0.812"},
{from:"10.10.10.30", seq:22, time:"0.808"},
{from:"10.10.10.30", seq:23, time:"0.782"},
{from:"10.10.10.30", seq:24, time:"0.831"},
{from:"10.10.10.30", seq:25, time:"2.297"},
{from:"10.10.10.30", seq:26, time:"0.960"},
{from:"10.10.10.30", seq:27, time:"0.852"},
{from:"10.10.10.30", seq:28, time:"1.399"},
{from:"10.10.10.30", seq:29, time:"0.797"},
{from:"10.10.10.30", seq:30, time:"0.825"},
{from:"10.10.10.30", seq:31, time:"0.985"},
{from:"10.10.10.30", seq:32, time:"0.862"},
{from:"10.10.10.30", seq:33, time:"0.991"},
{from:"10.10.10.30", seq:34, time:"2.351"},
{from:"10.10.10.30", seq:35, time:"1.141"},
{from:"10.10.10.30", seq:36, time:"0.766"},
{from:"10.10.10.30", seq:37, time:"0.750"},
{from:"10.10.10.30", seq:38, time:"0.752"},
{from:"10.10.10.30", seq:39, time:"2.651"},
{from:"10.10.10.30", seq:40, time:"0.865"}
]
const cedar =[
{from: "10.10.10.16", seq:0, time:"0.884" },
{from: "10.10.10.16", seq:1, time:"0.519" },
{from: "10.10.10.16", seq:2, time:"0.510" },
{from: "10.10.10.16", seq:3, time:"0.493" },
{from: "10.10.10.16", seq:4, time:"0.488" },
{from: "10.10.10.16", seq:5, time:"0.491" },
{from: "10.10.10.16", seq:6, time:"0.480" },
{from: "10.10.10.16", seq:7, time:"0.488" },
{from: "10.10.10.16", seq:8, time:"0.481" },
{from: "10.10.10.16", seq:9, time:"0.337" },
{from: "10.10.10.16", seq:10, time:"0.492" },
{from: "10.10.10.16", seq:11, time:"0.509" },
{from: "10.10.10.16", seq:12, time:"0.342" },
{from: "10.10.10.16", seq:13, time:"0.357" },
{from: "10.10.10.16", seq:14, time:"0.482" },
{from: "10.10.10.16", seq:15, time:"0.915" },
{from: "10.10.10.16", seq:16, time:"0.485" },
{from: "10.10.10.16", seq:17, time:"0.383" },
{from: "10.10.10.16", seq:18, time:"0.476" },
{from: "10.10.10.16", seq:19, time:"0.337" },
{from: "10.10.10.16", seq:20, time:"0.448" },
{from: "10.10.10.16", seq:21, time:"0.476" },
{from: "10.10.10.16", seq:22, time:"0.475" },
{from: "10.10.10.16", seq:23, time:"0.723" },
{from: "10.10.10.16", seq:24, time:"0.424" },
{from: "10.10.10.16", seq:25, time:"0.353" },
{from: "10.10.10.16", seq:26, time:"0.452" },
{from: "10.10.10.16", seq:27, time:"0.484" },
{from: "10.10.10.16", seq:28, time:"0.488" },
{from: "10.10.10.16", seq:29, time:"0.671" },
{from: "10.10.10.16", seq:30, time:"0.461" },
{from: "10.10.10.16", seq:31, time:"0.478" },
{from: "10.10.10.16", seq:32, time:"0.336" },
{from: "10.10.10.16", seq:33, time:"0.335" },
{from: "10.10.10.16", seq:34, time:"0.559" },
{from: "10.10.10.16", seq:35, time:"0.406" },
{from: "10.10.10.16", seq:36, time:"0.455" },
{from: "10.10.10.16", seq:37, time:"0.521" },
{from: "10.10.10.16", seq:38, time:"0.413" },
{from: "10.10.10.16", seq:39, time:"0.353" },
{from: "10.10.10.16", seq:40, time:"0.493" }
]
const camelia = [
{ from:"10.10.10.20", seq:0, time:"1.132"},
{ from:"10.10.10.20", seq:1, time:"0.320"},
{ from:"10.10.10.20", seq:2, time:"0.373"},
{ from:"10.10.10.20", seq:3, time:"0.384"},
{ from:"10.10.10.20", seq:4, time:"0.401"},
{ from:"10.10.10.20", seq:5, time:"0.361"},
{ from:"10.10.10.20", seq:6, time:"0.347"},
{ from:"10.10.10.20", seq:7, time:"0.409"},
{ from:"10.10.10.20", seq:8, time:"0.345"},
{ from:"10.10.10.20", seq:9, time:"0.492"},
{ from:"10.10.10.20", seq:10, time:"0.387"},
{ from:"10.10.10.20", seq:11, time:"0.369"},
{ from:"10.10.10.20", seq:12, time:"0.318"},
{ from:"10.10.10.20", seq:13, time:"0.411"},
{ from:"10.10.10.20", seq:14, time:"0.397"},
{ from:"10.10.10.20", seq:15, time:"0.461"},
{ from:"10.10.10.20", seq:16, time:"0.356"},
{ from:"10.10.10.20", seq:17, time:"0.331"},
{ from:"10.10.10.20", seq:18, time:"0.510"},
{ from:"10.10.10.20", seq:19, time:"0.376"},
{ from:"10.10.10.20", seq:20, time:"0.374"},
{ from:"10.10.10.20", seq:21, time:"0.327"},
{ from:"10.10.10.20", seq:22, time:"0.428"},
{ from:"10.10.10.20", seq:23, time:"0.400"},
{ from:"10.10.10.20", seq:24, time:"0.344"},
{ from:"10.10.10.20", seq:25, time:"0.380"},
{ from:"10.10.10.20", seq:26, time:"0.320"},
{ from:"10.10.10.20", seq:27, time:"0.478"},
{ from:"10.10.10.20", seq:28, time:"0.581"},
{ from:"10.10.10.20", seq:29, time:"0.572"},
{ from:"10.10.10.20", seq:30, time:"0.335"},
{ from:"10.10.10.20", seq:31, time:"0.887"},
{ from:"10.10.10.20", seq:32, time:"0.341"},
{ from:"10.10.10.20", seq:33, time:"0.492"},
{ from:"10.10.10.20", seq:34, time:"0.395"},
{ from:"10.10.10.20", seq:35, time:"0.371"},
{ from:"10.10.10.20", seq:36, time:"0.549"},
{ from:"10.10.10.20", seq:37, time:"0.311"},
{ from:"10.10.10.20", seq:38, time:"0.469"},
{ from:"10.10.10.20", seq:39, time:"0.275"},
{ from:"10.10.10.20", seq:40, time:"0.349"}
]
const synergy = [
{ from:"10.10.10.21", seq:0, time:"1.186" },
{ from:"10.10.10.21", seq:1, time:"1.437" },
{ from:"10.10.10.21", seq:2, time:"1.337" },
{ from:"10.10.10.21", seq:3, time:"1.420" },
{ from:"10.10.10.21", seq:4, time:"1.343" },
{ from:"10.10.10.21", seq:5, time:"1.417" },
{ from:"10.10.10.21", seq:6, time:"2.664" },
{ from:"10.10.10.21", seq:7, time:"1.673" },
{ from:"10.10.10.21", seq:8, time:"1.359" },
{ from:"10.10.10.21", seq:9, time:"1.195" },
{ from:"10.10.10.21", seq:10, time:"1.398" },
{ from:"10.10.10.21", seq:11, time:"1.153" },
{ from:"10.10.10.21", seq:12, time:"1.301" },
{ from:"10.10.10.21", seq:13, time:"1.032" },
{ from:"10.10.10.21", seq:14, time:"1.401" },
{ from:"10.10.10.21", seq:15, time:"1.084" },
{ from:"10.10.10.21", seq:16, time:"1.174" },
{ from:"10.10.10.21", seq:17, time:"1.247" },
{ from:"10.10.10.21", seq:18, time:"1.152" },
{ from:"10.10.10.21", seq:19, time:"1.263" },
{ from:"10.10.10.21", seq:20, time:"1.213" },
{ from:"10.10.10.21", seq:21, time:"1.114" },
{ from:"10.10.10.21", seq:22, time:"1.674" },
{ from:"10.10.10.21", seq:23, time:"1.140" },
{ from:"10.10.10.21", seq:24, time:"1.273" },
{ from:"10.10.10.21", seq:25, time:"1.092" },
{ from:"10.10.10.21", seq:26, time:"1.207" },
{ from:"10.10.10.21", seq:27, time:"1.390" },
{ from:"10.10.10.21", seq:28, time:"1.177" },
{ from:"10.10.10.21", seq:29, time:"1.875" },
{ from:"10.10.10.21", seq:30, time:"1.142" },
{ from:"10.10.10.21", seq:31, time:"1.055" },
{ from:"10.10.10.21", seq:32, time:"1.163" },
{ from:"10.10.10.21", seq:33, time:"1.089" },
{ from:"10.10.10.21", seq:34, time:"1.233" },
{ from:"10.10.10.21", seq:35, time:"1.275" },
{ from:"10.10.10.21", seq:36, time:"1.209" },
{ from:"10.10.10.21", seq:37, time:"0.983" },
{ from:"10.10.10.21", seq:38, time:"1.258" },
{ from:"10.10.10.21", seq:39, time:"1.220" },
{ from:"10.10.10.21", seq:40, time:"1.221" }
]
const getTime = (dataSet) => {
let arr =[]
dataSet.forEach(i => arr.push(i.time));
return arr
}
console.log(getTime(commsRoom));
Chart.defaults.global.defaultFontColor = '#ccc';
new Chart(document.getElementById('chart1'), {
type: 'line',
data: {
labels: Array.from(Array(41).keys()),
datasets: [{
data: getTime(commsRoom),
label: "Comms Room",
borderColor: "#3e95cd",
fill: false
}
, {
data: getTime(regionalOffice),
label: "Regional Office",
borderColor: "#8e5ea2",
fill: false
},
{
data: getTime(gallard),
label: "Gallard",
borderColor: "#3cba9f",
fill: false
},
{
data: getTime(communityCare),
label: "Community Care",
borderColor: "#e8c3b9",
fill: false
},
{
data: getTime(cedar),
label: "Cedar",
borderColor: "#c45850",
fill: false
},
{
data: getTime(camelia),
label: "Camelia",
borderColor: "#f29866",
fill: false
},
{
data: getTime(synergy),
label: "Synergy",
borderColor: "#f29866",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'Ping times from Sophos XG (in milliseconds)'
}
}
});
Raw
package.json
{
"name": "blank_webpack_es6",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development --host 0.0.0.0",
"build": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/kurtis-dunn/Blank-Webpack-ES6-Bootstrap.git"
},
"bugs": {
"url": "https://github.com/kurtis-dunn/Blank-Webpack-ES6-Bootstrap/issues"
},
"homepage": "https://github.com/kurtis-dunn/Blank-Webpack-ES6-Bootstrap#readme",
"author": "Kurtis Dunn",
"dependencies": {
"bootstrap": "^5.0.0-beta1",
"chart.js": "^2.9.4"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^0.28.11",
"empty-module": "0.0.2",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^4.0.0-beta.8",
"node-sass": "^3.9.0",
"postcss-loader": "^4.1.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.23.1",
"webpack-bundle-analyzer": "^3.5.2",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "^3.1.10"
}
}
Raw
webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
mode: 'development',
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(scss)$/,
use: [{
// inject CSS to page
loader: 'style-loader'
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'Blank Webpack ES^ Bootstrap',
template: 'src/index.html'
}),
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/)
],
devServer: {
contentBase: './dist',
hot: true
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment