adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

make text size even larger
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m42s
Details

Browse Source
This commit is contained in:
Adam French
2026-03-07 16:57:46 +00:00
parent 0da6d3f0ed
commit 3200ef5bee
1 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
nginx/vue/src/views/home/Gym2.vue
View File

@@ -31,10 +31,10 @@ const activeMetric = computed(() => METRICS.find((m) => m.key === metric.value))
// SVG layout constants // SVG layout constants
const W = 290; const W = 290;
const H = 120; const H = 120;
const PL = 38; // padding left const PL = 46; // padding left
const PT = 8; // padding top const PT = 8; // padding top
const PR = 8; // padding right const PR = 8; // padding right
const PB = 22; // padding bottom const PB = 28; // padding bottom
const PLOT_W = W - PL - PR; const PLOT_W = W - PL - PR;
const PLOT_H = H - PT - PB; const PLOT_H = H - PT - PB;
@@ -80,10 +80,13 @@ const xLabels = computed(() => {
const yLabels = computed(() => { const yLabels = computed(() => {
const min = minVal.value; const min = minVal.value;
const max = maxVal.value; const max = maxVal.value;
return [0, 0.5, 1].map((t) => ({ return [0, 0.5, 1].map((t) => {
const raw = Math.round(min + t * (max - min));
return {
y: PT + PLOT_H - t * PLOT_H, y: PT + PLOT_H - t * PLOT_H,
label: Math.round(min + t * (max - min)), label: metric.value === "timePer500m" ? formatTime(raw) : raw,
})); };
});
}); });
function formatTime(secs) { function formatTime(secs) {
@@ -188,7 +191,7 @@ function formatValue(key, val) {
:x="PL - 3" :x="PL - 3"
:y="yl.y + 3" :y="yl.y + 3"
text-anchor="end" text-anchor="end"
font-size="6" font-size="10"
fill="var(--primary)" fill="var(--primary)"
font-family="var(--font_heading)" font-family="var(--font_heading)"
>{{ yl.label }}</text> >{{ yl.label }}</text>
@@ -200,7 +203,7 @@ function formatValue(key, val) {
:x="xl.x" :x="xl.x"
:y="H - 4" :y="H - 4"
text-anchor="middle" text-anchor="middle"
font-size="6" font-size="10"
fill="var(--primary)" fill="var(--primary)"
font-family="var(--font_heading)" font-family="var(--font_heading)"
>{{ xl.label }}</text> >{{ xl.label }}</text>
@@ -212,26 +215,26 @@ function formatValue(key, val) {
<!-- Tooltip --> <!-- Tooltip -->
<g v-if="hovered !== null && points[hovered]"> <g v-if="hovered !== null && points[hovered]">
<rect <rect
:x="Math.min(points[hovered].x + 4, W - 70)" :x="Math.min(points[hovered].x + 4, W - 85)"
:y="points[hovered].y - 18" :y="points[hovered].y - 20"
width="68" width="82"
height="25" height="32"
fill="var(--bg_primary)" fill="var(--bg_primary)"
:stroke="activeMetric.color" :stroke="activeMetric.color"
stroke-width="0.5" stroke-width="0.5"
rx="1" rx="1"
/> />
<text <text
:x="Math.min(points[hovered].x + 7, W - 67)" :x="Math.min(points[hovered].x + 7, W - 82)"
:y="points[hovered].y - 6" :y="points[hovered].y - 6"
font-size="8" font-size="12"
fill="var(--secondary)" fill="var(--secondary)"
font-family="var(--font_heading)" font-family="var(--font_heading)"
>{{ points[hovered].date.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "2-digit" }) }}</text> >{{ points[hovered].date.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "2-digit" }) }}</text>
<text <text
:x="Math.min(points[hovered].x + 7, W - 67)" :x="Math.min(points[hovered].x + 7, W - 82)"
:y="points[hovered].y + 4" :y="points[hovered].y + 8"
font-size="9" font-size="14"
:fill="activeMetric.color" :fill="activeMetric.color"
font-family="var(--font_heading)" font-family="var(--font_heading)"
>{{ formatValue(metric, points[hovered].value) }}</text> >{{ formatValue(metric, points[hovered].value) }}</text>