neale
/
portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: neale:1fe69cd88f1255c2b7dc3edc11147008cdeb0c7d
Branches Tags
neale:main
...
compare: neale:2faa8f9d8c350367843e4a77e190e7d92010ad81
Branches Tags
neale:main

2 Commits
1fe69cd88f ... 2faa8f9d8c

Author SHA1 Message Date
Neale Pickett 2faa8f9d8c Native pie chart 2023-03-11 11:27:16 -07:00
Neale Pickett f9c74c2aac Working 2023-03-11 08:54:24 -07:00
7 changed files with 376 additions and 60 deletions
Show Stats Expand all files Collapse all files

79
web/index.css Normal file
View File

@ -0,0 +1,79 @@
body {
display: flex;
flex-flow: column;
height: 100vh;
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #222;
color: white;
}
.hidden {
display: none;
}
nav {
overflow-x: auto;
font-weight: bold;
font-size: 12pt;
display: flex;
}
nav img {
max-height: 2em;
}
nav a {
padding: 0.5em 1.5em;
color: #aaa;
text-decoration: none;
white-space: nowrap;
}
nav a[data-no-menu] {
display: none;
}
nav a:hover {
background: #555;
}
nav a.active {
background: #8b8;
color: black;
}
#app {
flex-grow: 1;
}
iframe {
display: block;
border: none;
width: 100%;
height: 100%;
}
.icons {
margin: auto 2em;
}
.icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 40em;
margin: auto;
gap: 20px;
}
.icons a {
background-color: #444;
color: #fff;
width: 120px;
height: 120px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.icons a img,
.icons a canvas {
max-width: 75%;
max-height: 75%;
width: 100%;
height: 100%;
image-rendering: pixelated;
}

30
web/index.html
View File

@ -1,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Webstat</title>
<meta charset="utf-8">
<script src="main.mjs" type="module"></script>
<style>
#pie {
max-width: 50px;
}
</style>
</head>
<body>
<div id="pie"></div>
<div id="chart"></div>
</body>
<head>
<title>Deer Grove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="deergrove.png">
<link rel="stylesheet" href="index.css">
<script src="index.mjs" type="module"></script>
</head>
<body>
<nav>
</nav>
<section id="app">
<iframe></iframe>
</section>
</body>
</html>

133
web/index.mjs Normal file
View File

@ -0,0 +1,133 @@
import * as WebStat from "./stat/webstat.mjs"
const Millisecond = 1
const Second = 1000 * Millisecond
const Minute = 60 * Second
class StatApp {
constructor(parent) {
this.stat = new WebStat.Stat()
this.chart = new WebStat.PieChart(parent, this.stat)
setInterval(()=>this.update(), 2 * Second)
this.update()
}
async update() {
this.stat.update()
this.chart.update()
}
}
let frames = {}
function activate(event, element) {
event.preventDefault()
let parent = element.parentElement
for (let e of parent.getElementsByClassName("active")) {
e.classList.remove("active")
}
element.classList.add("active")
let href = element.href
let app = document.querySelector("#app")
let frame = frames[href]
if (frame) {
frame.dispatchEvent(new Event("load"))
} else {
frame = app.appendChild(document.createElement("iframe"))
frame.addEventListener("load", e => frameLoaded(frame))
frame.src = href
frames[href] = frame
}
for (let fhref in frames) {
let f = frames[fhref]
if (fhref == href) {
f.classList.remove("hidden")
} else {
f.classList.add("hidden")
}
}
}
function frameLoaded(frame) {
let doc = frame.contentDocument
if (doc.title.length > 0) {
document.title = doc.title
}
let icon = document.querySelector("link[rel~='icon']")
let dicon = doc.querySelector("link[rel~='icon']")
if (dicon) {
icon.href = dicon.href
} else {
icon.href = defaultIcon
}
}
let defaultIcon = null
async function init() {
let doc = document.querySelector("iframe").contentDocument
defaultIcon = document.querySelector("link[rel~='icon']").href
for (let l of document.head.querySelectorAll("style")) {
doc.head.appendChild(l.cloneNode(true))
}
for (let l of document.head.querySelectorAll("link[rel='stylesheet']")) {
doc.head.appendChild(l.cloneNode())
}
for (let f of document.querySelectorAll("#app iframe")) {
frames[f.src] = f
}
let icons = doc.body.appendChild(doc.createElement("section"))
icons.classList.add("icons")
let nav = document.querySelector("nav")
let resp = await fetch("portal.json")
let obj = await resp.json()
for (let app of obj) {
let hlink = null
if (app.target != "_blank") {
hlink = nav.appendChild(document.createElement("a"))
hlink.href = app.href
hlink.textContent = app.title
if (app.target) {
hlink.target = app.target
} else {
hlink.addEventListener("click", event => activate(event, hlink))
}
}
let dlink = icons.appendChild(doc.createElement("a"))
dlink.href = app.href
if (app.target) {
dlink.target = app.target
} else {
dlink.addEventListener("click", event => activate(event, hlink))
}
if (app.icon) {
let icon = dlink.appendChild(doc.createElement("img"))
icon.src = app.icon
icon.alt = app.title
icon.title = app.title
icon.style.objectFit = "cover"
} else if (app.app) {
if (app.app == "stat") {
new StatApp(dlink)
}
} else {
let text = dlink.appendChild(doc.createElement("div"))
text.textContent = app.title
}
}
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init)
} else {
init()
}

70
web/portal.json Normal file
View File

@ -0,0 +1,70 @@
[
{
"title": "Movies",
"href": "https://deergrove.woozle.org/radarr/",
"icon": "/radarr/Content/Images/logo.svg"
},
{
"title": "Episodes",
"href": "https://deergrove.woozle.org/sonarr/",
"icon": "/sonarr/Content/Images/logo.svg"
},
{
"title": "Music",
"href": "https://deergrove.woozle.org/lidarr/",
"icon": "/lidarr/Content/Images/logo.svg"
},
{
"title": "Books",
"href": "https://deergrove.woozle.org/readarr/",
"icon": "/readarr/Content/Images/logo.svg"
},
{
"title": "Media Sucker",
"href": "https://deergrove.woozle.org/sucker/",
"icon": "/sucker/cd-dvd.svg"
},
{
"title": "Searcher",
"href": "https://deergrove.woozle.org/prowlarr/",
"icon": "/prowlarr/Content/Images/logo.png"
},
{
"title": "Usenet",
"href": "https://deergrove.woozle.org/nzbget/",
"icon": "/nzbget/img/favicon-256x256.png"
},
{
"title": "BitTorrent",
"href": "https://deergrove.woozle.org/transmission/web/",
"icon": "/transmission/web/images/webclip-icon.png"
},
{
"title": "3D Printer",
"href": "https://deergrove.woozle.org/octoprint/",
"icon": "/octoprint/static/img/logo.png"
},
{
"title": "Git",
"href": "https://git.woozle.org/",
"icon": "https://git.woozle.org/assets/img/logo.svg",
"target": "_blank"
},
{
"title": "Storage",
"href": "https://drive.woozle.org/",
"icon": "https://drive.woozle.org/storage/public/icons/cloud-folder.png",
"target": "_blank"
},
{
"title": "Genealogy",
"href": "https://ancestry.woozle.org/",
"icon": "https://ancestry.woozle.org/images/arbre_start.png",
"target": "_blank"
},
{
"title": "Host Stats",
"href": "/stat.html",
"app": "stat"
}
]

19
web/stat/stat.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>Webstat</title>
<meta charset="utf-8">
<script src="stat.mjs" type="module"></script>
<style>
#pie {
max-width: 50px;
position: absolute;
}
</style>
</head>
<body>
<div id="pie"></div>
<div id="chart"></div>
</body>
</html>

8
web/main.mjs → web/stat/stat.mjs
View File

@ -7,16 +7,16 @@ const Minute = 60 * Second
class App {
constructor() {
this.stat = new WebStat.Stat()
this.areaChart = new WebStat.AreaChart(document.querySelector("#chart"))
this.pieChart = new WebStat.PieChart(document.querySelector("#pie"))
this.areaChart = new WebStat.AreaChart(document.querySelector("#chart"), this.stat)
this.pieChart = new WebStat.PieChart(document.querySelector("#pie"), this.stat)
setInterval(()=>this.update(), 2 * Second)
}
async update() {
this.stat.update()
this.areaChart.update(this.stat)
this.pieChart.update(this.stat)
this.areaChart.update()
this.pieChart.update()
}
}

97
web/webstat.mjs → web/stat/webstat.mjs
View File

@ -1,5 +1,4 @@
//import Chart from "https://esm.run/chart.js@4.2.1/auto"
import Chart from "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/auto/+esm"
const τ = Math.PI * 2
function qpush(arr, val, len) {
arr.push(val)
@ -53,7 +52,8 @@ class Stat {
}
class AreaChart {
constructor(element, width=60) {
constructor(element, stat, width=60) {
this.stat = stat
this.width = width
this.canvas = element.appendChild(document.createElement("canvas"))
this.data ={
@ -93,10 +93,9 @@ class AreaChart {
)
}
async update(stat) {
let now = stat.Date
let cpu = stat.cpu()
qpush(this.data.labels, now, this.width)
async update() {
let cpu = this.stat.cpu()
qpush(this.data.labels, this.stat.Date, this.width)
qpush(this.datasets.user, cpu.user, this.width)
qpush(this.datasets.nice, cpu.nice, this.width)
qpush(this.datasets.sys, cpu.sys, this.width)
@ -107,47 +106,63 @@ class AreaChart {
}
class PieChart {
constructor(element) {
constructor(element, stat) {
this.stat = stat
this.canvas = element.appendChild(document.createElement("canvas"))
this.data ={
labels: ["user", "nice", "sys", "idle", "wait"],
datasets: []
}
this.chart = new Chart(
this.canvas,
{
type: "pie",
data: this.data,
options: {
animation: false,
borderWidth: 0,
backgroundColor: [
"red",
"green",
"orange",
"rgba(0, 64, 0, 0.2)",
"magenta",
],
plugins: {
legend: { display: false },
},
},
}
)
this.ctx = this.canvas.getContext("2d")
this.r = 250
this.θ = 0
this.canvas.width = this.r*2
this.canvas.height = this.r*2
}
async update(stat) {
let cpu = stat.cpu()
this.data.datasets = [{
label: "Current",
data: [cpu.user, cpu.nice, cpu.sys, cpu.idle, cpu.wait],
}]
this.chart.update()
arc(angle, color) {
this.ctx.fillStyle = color
this.ctx.beginPath()
this.ctx.arc(this.r, this,r, this,r, this.θ, this.θ + angle)
this.ctx.fill()
}
async update() {
let cpu = this.stat.cpu()
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
let colors = ["SkyBlue", "SeaGreen", "Gold", "Tomato"]
let values = [cpu.user, cpu.nice, cpu.sys, cpu.wait]
let labels = ["u", "n", "s", "w"]
let θ = -τ/4
this.ctx.save()
this.ctx.translate(this.r, this.r)
this.ctx.font = `bold ${this.r/3}px sans-serif`
for (let i = 0; i < colors.length; i++) {
let angle = values[i] * τ
this.ctx.fillStyle = colors[i]
this.ctx.beginPath()
this.ctx.arc(0, 0, this.r, θ, θ + angle, false)
this.ctx.lineTo(0, 0)
this.ctx.fill()
if (angle > τ/12) {
let mid = θ + angle/2
this.ctx.save()
this.ctx.rotate(mid)
this.ctx.translate(this.r*0.7, 0)
this.ctx.rotate(-mid)
this.ctx.fillStyle = "black"
this.ctx.textBaseline = "middle"
this.ctx.textAlign = "center"
this.ctx.fillText(labels[i], 0, 0)
this.ctx.restore()
}
θ += angle
}
this.ctx.restore()
}
}
export {
Stat,
AreaChart,
PieChart,
}