Skip to content

Commit

Permalink
feat: Use chart.js for polarplot n jobview
Browse files Browse the repository at this point in the history
  • Loading branch information
@spacehamster87
spacehamster87 committed Aug 10, 2023
1 parent f286872 commit b42a11d
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 151 deletions.
7 changes: 3 additions & 4 deletions web/frontend/src/Job.root.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,11 @@
} from "sveltestrap";
import PlotTable from "./PlotTable.svelte";
import Metric from "./Metric.svelte";
import PolarPlot from "./plots/Polar.svelte";
import Polar from "./plots/Polar.svelte";
import Roofline from "./plots/Roofline.svelte";
import JobInfo from "./joblist/JobInfo.svelte";
import TagManagement from "./TagManagement.svelte";
import MetricSelection from "./MetricSelection.svelte";
import Zoom from "./Zoom.svelte";
import StatsTable from "./StatsTable.svelte";
import { getContext } from "svelte";
Expand Down Expand Up @@ -233,7 +232,7 @@
{/if}
{/if}
<Col>
<PolarPlot
<Polar
width={polarPlotSize}
height={polarPlotSize}
metrics={ccconfig[
Expand All @@ -246,7 +245,7 @@
<Col>
<Roofline
width={fullWidth / 3 - 10}
height={polarPlotSize}
height={polarPlotSize + 20}
cluster={clusters
.find((c) => c.name == $initq.data.job.cluster)
.subClusters.find(
Expand Down
199 changes: 52 additions & 147 deletions web/frontend/src/plots/Polar.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,35 @@
<div>
<canvas bind:this={canvasElement} width="{width}" height="{height}"></canvas>
</div>

<script>
import { onMount, getContext } from 'svelte'
import { getContext } from 'svelte'
import { Radar } from 'svelte-chartjs';
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
Filler,
PointElement,
RadialLinearScale,
LineElement
} from 'chart.js';
ChartJS.register(
Title,
Tooltip,
Legend,
Filler,
PointElement,
RadialLinearScale,
LineElement
);
export let metrics
export let width
export let height
export let metrics
export let cluster
export let jobMetrics
const fontSize = 12
const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
const metricConfig = getContext('metrics')
let ctx, canvasElement
const labels = metrics.filter(name => {
if (!jobMetrics.find(m => m.name == name && m.scope == "node")) {
console.warn(`PolarPlot: No metric data for '${name}'`)
Expand Down Expand Up @@ -46,145 +59,37 @@
return avg / metric.series.length
}
const data = [
{
name: 'Max',
values: getValuesForStat(getMax),
color: 'rgb(0, 102, 255)',
areaColor: 'rgba(0, 102, 255, 0.25)'
},
{
name: 'Avg',
values: getValuesForStat(getAvg),
color: 'rgb(255, 153, 0)',
areaColor: 'rgba(255, 153, 0, 0.25)'
}
]
function render() {
if (!width || Number.isNaN(width))
return
const centerX = width / 2
const centerY = height / 2 - 15
const radius = (Math.min(width, height) / 2) - 50
// Draw circles
ctx.lineWidth = 1
ctx.strokeStyle = '#999999'
ctx.beginPath()
ctx.arc(centerX, centerY, radius * 1.0, 0, Math.PI * 2, false)
ctx.stroke()
ctx.beginPath()
ctx.arc(centerX, centerY, radius * 0.666, 0, Math.PI * 2, false)
ctx.stroke()
ctx.beginPath()
ctx.arc(centerX, centerY, radius * 0.333, 0, Math.PI * 2, false)
ctx.stroke()
// Axis
ctx.font = `${fontSize}px ${fontFamily}`
ctx.textAlign = 'center'
ctx.fillText('1/3',
Math.floor(centerX + radius * 0.333),
Math.floor(centerY + 15))
ctx.fillText('2/3',
Math.floor(centerX + radius * 0.666),
Math.floor(centerY + 15))
ctx.fillText('1.0',
Math.floor(centerX + radius * 1.0),
Math.floor(centerY + 15))
// Label text and straight lines from center
for (let i = 0; i < labels.length; i++) {
const angle = 2 * Math.PI * ((i + 1) / labels.length)
const dx = Math.cos(angle) * radius
const dy = Math.sin(angle) * radius
ctx.fillText(labels[i],
Math.floor(centerX + dx * 1.1),
Math.floor(centerY + dy * 1.1))
ctx.beginPath()
ctx.moveTo(centerX, centerY)
ctx.lineTo(centerX + dx, centerY + dy)
ctx.stroke()
}
for (let dataset of data) {
console.assert(dataset.values.length === labels.length, 'this will look confusing')
ctx.fillStyle = dataset.color
ctx.strokeStyle = dataset.color
const points = []
for (let i = 0; i < dataset.values.length; i++) {
const value = dataset.values[i]
const angle = 2 * Math.PI * ((i + 1) / labels.length)
const x = centerX + Math.cos(angle) * radius * value
const y = centerY + Math.sin(angle) * radius * value
ctx.beginPath()
ctx.arc(x, y, 3, 0, Math.PI * 2, false)
ctx.fill()
points.push({ x, y })
const data = {
labels: labels,
datasets: [
{
label: 'Max',
data: getValuesForStat(getMax),
fill: 1,
backgroundColor: 'rgba(0, 102, 255, 0.25)',
borderColor: 'rgb(0, 102, 255)',
pointBackgroundColor: 'rgb(0, 102, 255)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(0, 102, 255)'
},
{
label: 'Avg',
data: getValuesForStat(getAvg),
fill: true,
backgroundColor: 'rgba(255, 153, 0, 0.25)',
borderColor: 'rgb(255, 153, 0)',
pointBackgroundColor: 'rgb(255, 153, 0)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 153, 0)'
}
// "Fill" the shape this dataset has
ctx.fillStyle = dataset.areaColor
ctx.beginPath()
ctx.moveTo(points[0].x, points[0].y)
for (let p of points)
ctx.lineTo(p.x, p.y)
ctx.lineTo(points[0].x, points[0].y)
ctx.stroke()
ctx.fill()
}
// Legend at the bottom left corner
ctx.textAlign = 'left'
let paddingLeft = 0
for (let dataset of data) {
const text = `${dataset.name}: `
const textWidth = ctx.measureText(text).width
ctx.fillStyle = 'black'
ctx.fillText(text, paddingLeft, height - 20)
ctx.fillStyle = dataset.color
ctx.beginPath()
ctx.arc(paddingLeft + textWidth + 5, height - 25, 5, 0, Math.PI * 2, false)
ctx.fill()
paddingLeft += textWidth + 15
}
ctx.fillStyle = 'black'
ctx.fillText(`Values relative to respective peak.`, 0, height - 7)
]
}
let mounted = false
onMount(() => {
canvasElement.width = width
canvasElement.height = height
ctx = canvasElement.getContext('2d')
render(ctx, data, width, height)
mounted = true
})
let timeoutId = null
function sizeChanged() {
if (!mounted)
return;
if (timeoutId != null)
clearTimeout(timeoutId)
timeoutId = setTimeout(() => {
timeoutId = null
// No custom defined options but keep for clarity
const options = {}
canvasElement.width = width
canvasElement.height = height
ctx = canvasElement.getContext('2d')
render(ctx, data, width, height)
}, 250)
}
$: sizeChanged(width, height)
</script>

<Radar {data} {options} {width} {height}/>

0 comments on commit b42a11d

Please sign in to comment.