Refactoring and dashboard state in DB
parent
8d8a6ff784
commit
fc8bb1c482
@ -0,0 +1,13 @@
|
||||
export const MessageWidget = ({ title, message }) => {
|
||||
title = title || 'Testo'
|
||||
message = message || 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, possimus.'
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="title">{title}</div>
|
||||
<div class="content">
|
||||
<p>{message}</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
import { useEffect, useRef } from 'preact/hooks'
|
||||
import { hashCode } from '../util.js'
|
||||
|
||||
const CANVAS_SIZE = 350
|
||||
|
||||
export const PieChartWidget = ({ title, parts, labels, total }) => {
|
||||
title = title || 'Grafico a torta'
|
||||
|
||||
parts = parts || [1]
|
||||
labels = labels || []
|
||||
|
||||
const canvasRef = useRef()
|
||||
|
||||
useEffect(() => {
|
||||
if (canvasRef.current) {
|
||||
const $canvas = canvasRef.current
|
||||
|
||||
$canvas.style.width = `${CANVAS_SIZE}px`
|
||||
$canvas.style.height = `${CANVAS_SIZE}px`
|
||||
|
||||
const width = $canvas.width / 2
|
||||
const height = $canvas.height / 2
|
||||
|
||||
const g = $canvas.getContext('2d')
|
||||
g.resetTransform()
|
||||
g.clearRect(0, 0, width * 2, height * 2)
|
||||
|
||||
g.scale(2, 2)
|
||||
g.translate(width / 2, height / 2)
|
||||
|
||||
g.font = `18px 'Open Sans'`
|
||||
g.textAlign = 'center'
|
||||
g.textBaseline = 'middle'
|
||||
|
||||
total = total || parts.reduce((acc, p) => acc + p)
|
||||
const anglesAndLabel = parts.map((p, i) => [(p / total) * 2 * Math.PI, labels[i] || ''])
|
||||
|
||||
g.fillStyle = `#ededed`
|
||||
g.beginPath()
|
||||
g.ellipse(0, 0, width * 0.5 * 0.8, width * 0.5 * 0.8, 0, 0, 2 * Math.PI)
|
||||
g.fill()
|
||||
|
||||
g.strokeStyle = `#00000044`
|
||||
g.beginPath()
|
||||
g.ellipse(0, 0, width * 0.5 * 0.8, width * 0.5 * 0.8, 0, 0, 2 * Math.PI)
|
||||
g.stroke()
|
||||
|
||||
let acc = 0
|
||||
for (const [angle, label] of anglesAndLabel) {
|
||||
g.fillStyle = `hsl(${((hashCode(label) % 0xff) * 360) / 0xff}, 80%, 65%)`
|
||||
g.beginPath()
|
||||
g.moveTo(0, 0)
|
||||
g.arc(0, 0, width * 0.5 * 0.8, acc - 0.5 * Math.PI, acc + angle - 0.5 * Math.PI)
|
||||
g.fill()
|
||||
|
||||
g.strokeStyle = `#00000044`
|
||||
g.beginPath()
|
||||
g.moveTo(0, 0)
|
||||
g.arc(0, 0, width * 0.5 * 0.8, acc - 0.5 * Math.PI, acc + angle - 0.5 * Math.PI)
|
||||
g.stroke()
|
||||
|
||||
g.fillStyle = '#333'
|
||||
g.fillText(
|
||||
label,
|
||||
Math.cos(acc + angle / 2 - 0.5 * Math.PI) * width * 0.5 * 0.9,
|
||||
Math.sin(acc + angle / 2 - 0.5 * Math.PI) * width * 0.5 * 0.9
|
||||
)
|
||||
|
||||
acc += angle
|
||||
}
|
||||
}
|
||||
}, [canvasRef, parts])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="title">{title}</div>
|
||||
<div class="content">
|
||||
<canvas ref={canvasRef} width={CANVAS_SIZE * 2} height={CANVAS_SIZE * 2}></canvas>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,9 +1,53 @@
|
||||
import { render } from 'preact'
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
import { MessageWidget } from './components/MessageWidget.jsx'
|
||||
import { PieChartWidget } from './components/PieChartWidget.jsx'
|
||||
import { useUser } from './util.js'
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<h1>Homepage</h1>
|
||||
</>
|
||||
)
|
||||
const WidgetTypes = {
|
||||
pie: PieChartWidget,
|
||||
message: MessageWidget,
|
||||
}
|
||||
|
||||
const Widget = ({ type, value }) => {
|
||||
const CustomWidget = WidgetTypes[type]
|
||||
|
||||
return (
|
||||
<div class={'widget ' + type}>
|
||||
<CustomWidget {...value} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const App = () => {
|
||||
const user = useUser()
|
||||
|
||||
const [widgets, setWidgets] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/dashboard-state')
|
||||
.then(res => res.json())
|
||||
.then(state => setWidgets(state.widgets))
|
||||
.catch(e => console.error(e))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<div class="logo">Dashboard</div>
|
||||
<div class="spacer">•</div>
|
||||
<div class="machine">space.phc.dm.unipi.it</div>
|
||||
</header>
|
||||
<p>
|
||||
(Viewing page as <b>{user}</b>)
|
||||
</p>
|
||||
<div class="widgets">
|
||||
{widgets.map(w => (
|
||||
<Widget {...w} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
render(<App />, document.querySelector('main'))
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
|
||||
export function hashCode(s) {
|
||||
s = s.toString() + "seed iniziale dell'hash"
|
||||
|
||||
let hash = 0
|
||||
|
||||
if (s.length === 0) return hash
|
||||
|
||||
for (let i = 0; i < s.length; i++) {
|
||||
const chr = s.charCodeAt(i)
|
||||
hash = (hash << 5) - hash + chr
|
||||
hash |= 0
|
||||
}
|
||||
|
||||
return Math.abs(hash)
|
||||
}
|
||||
|
||||
export function useUser() {
|
||||
const [user, setUser] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/current-user')
|
||||
.then(res => res.json())
|
||||
.then(value => setUser(value))
|
||||
.catch(e => console.error(e))
|
||||
}, [])
|
||||
|
||||
return user
|
||||
}
|
||||
Loading…
Reference in New Issue