ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-11-10 08:57:25 +01:00
Code Issues Packages Releases Activity

Plot axis label sizing and padding

Browse Source
This commit is contained in:
Christoph Kluge 2023-04-11 16:29:39 +02:00
parent 52a07b51d2
commit dd2b4609a3
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/frontend/src/plots/Histogram.svelte
View File

@ -28,7 +28,7 @@
const fontSize = 12 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 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 paddingLeft = 35, paddingRight = 20, paddingTop = 20, paddingBottom = 20 const paddingLeft = 50, paddingRight = 20, paddingTop = 20, paddingBottom = 20
let ctx, canvasElement let ctx, canvasElement

10
web/frontend/src/plots/Roofline.svelte
View File

@ -4,7 +4,8 @@
<script context="module"> <script context="module">
const axesColor = '#aaaaaa' const axesColor = '#aaaaaa'
const fontSize = 12 const tickFontSize = 10
const labelFontSize = 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 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 paddingLeft = 40, const paddingLeft = 40,
paddingRight = 10, paddingRight = 10,
@ -95,7 +96,7 @@
// Axes // Axes
ctx.fillStyle = 'black' ctx.fillStyle = 'black'
ctx.strokeStyle = axesColor ctx.strokeStyle = axesColor
ctx.font = `${fontSize}px ${fontFamily}` ctx.font = `${tickFontSize}px ${fontFamily}`
ctx.beginPath() ctx.beginPath()
for (let x = minX, i = 0; x <= maxX; i++) { for (let x = minX, i = 0; x <= maxX; i++) {
let px = getCanvasX(x) let px = getCanvasX(x)
@ -103,18 +104,20 @@
let textWidth = ctx.measureText(text).width let textWidth = ctx.measureText(text).width
ctx.fillText(text, ctx.fillText(text,
Math.floor(px - (textWidth / 2)), Math.floor(px - (textWidth / 2)),
height - paddingBottom + fontSize + 5) height - paddingBottom + tickFontSize + 5)
ctx.moveTo(px, paddingTop - 5) ctx.moveTo(px, paddingTop - 5)
ctx.lineTo(px, height - paddingBottom + 5) ctx.lineTo(px, height - paddingBottom + 5)
x *= axisStepFactor(i, w) x *= axisStepFactor(i, w)
} }
if (data.xLabel) { if (data.xLabel) {
ctx.font = `${labelFontSize}px ${fontFamily}`
let textWidth = ctx.measureText(data.xLabel).width let textWidth = ctx.measureText(data.xLabel).width
ctx.fillText(data.xLabel, Math.floor((width / 2) - (textWidth / 2)), height - 20) ctx.fillText(data.xLabel, Math.floor((width / 2) - (textWidth / 2)), height - 20)
} }
ctx.textAlign = 'center' ctx.textAlign = 'center'
ctx.font = `${tickFontSize}px ${fontFamily}`
for (let y = minY, i = 0; y <= maxY; i++) { for (let y = minY, i = 0; y <= maxY; i++) {
let py = getCanvasY(y) let py = getCanvasY(y)
ctx.moveTo(paddingLeft - 5, py) ctx.moveTo(paddingLeft - 5, py)
@ -129,6 +132,7 @@
y *= axisStepFactor(i) y *= axisStepFactor(i)
} }
if (data.yLabel) { if (data.yLabel) {
ctx.font = `${labelFontSize}px ${fontFamily}`
ctx.save() ctx.save()
ctx.translate(15, Math.floor(height / 2)) ctx.translate(15, Math.floor(height / 2))
ctx.rotate(-Math.PI / 2) ctx.rotate(-Math.PI / 2)