Add gym chart to show rowing results
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m45s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m45s
This commit is contained in:
267
nginx/vue/src/views/home/Gym2.vue
Normal file
267
nginx/vue/src/views/home/Gym2.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import axios from "axios";
|
||||
import Header from "@/components/text/Header.vue";
|
||||
|
||||
const rows = ref([]);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
const metric = ref("distance");
|
||||
const hovered = ref(null);
|
||||
|
||||
const METRICS = [
|
||||
{ key: "distance", label: "Distance (m)", color: "#55ffbb" },
|
||||
{ key: "timePer500m", label: "Pace /500m", color: "#ff579a" },
|
||||
{ key: "calories", label: "Calories", color: "#62ff57" },
|
||||
];
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await axios.get("https://www.adam-french.co.uk/api/rowing");
|
||||
rows.value = res.data.slice().reverse(); // API returns DESC, reverse to chronological
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const activeMetric = computed(() => METRICS.find((m) => m.key === metric.value));
|
||||
|
||||
// SVG layout constants
|
||||
const W = 290;
|
||||
const H = 120;
|
||||
const PL = 38; // padding left
|
||||
const PT = 8; // padding top
|
||||
const PR = 8; // padding right
|
||||
const PB = 22; // padding bottom
|
||||
const PLOT_W = W - PL - PR;
|
||||
const PLOT_H = H - PT - PB;
|
||||
|
||||
const chartData = computed(() =>
|
||||
rows.value.map((r) => ({
|
||||
date: new Date(r.date),
|
||||
value: r[metric.value],
|
||||
raw: r,
|
||||
}))
|
||||
);
|
||||
|
||||
const minVal = computed(() => Math.min(...chartData.value.map((d) => d.value)));
|
||||
const maxVal = computed(() => Math.max(...chartData.value.map((d) => d.value)));
|
||||
|
||||
const points = computed(() => {
|
||||
const data = chartData.value;
|
||||
const n = data.length;
|
||||
if (!n) return [];
|
||||
const min = minVal.value;
|
||||
const range = maxVal.value - min || 1;
|
||||
return data.map((d, i) => ({
|
||||
x: PL + (n <= 1 ? PLOT_W / 2 : (i / (n - 1)) * PLOT_W),
|
||||
y: PT + PLOT_H - ((d.value - min) / range) * PLOT_H,
|
||||
date: d.date,
|
||||
value: d.value,
|
||||
raw: d.raw,
|
||||
}));
|
||||
});
|
||||
|
||||
const polyline = computed(() => points.value.map((p) => `${p.x},${p.y}`).join(" "));
|
||||
|
||||
const xLabels = computed(() => {
|
||||
const data = chartData.value;
|
||||
const pts = points.value;
|
||||
if (!data.length) return [];
|
||||
const indices = new Set([0, Math.floor((data.length - 1) / 2), data.length - 1]);
|
||||
return [...indices].map((i) => ({
|
||||
x: pts[i].x,
|
||||
label: data[i].date.toLocaleDateString("en-GB", { month: "short", day: "numeric" }),
|
||||
}));
|
||||
});
|
||||
|
||||
const yLabels = computed(() => {
|
||||
const min = minVal.value;
|
||||
const max = maxVal.value;
|
||||
return [0, 0.5, 1].map((t) => ({
|
||||
y: PT + PLOT_H - t * PLOT_H,
|
||||
label: Math.round(min + t * (max - min)),
|
||||
}));
|
||||
});
|
||||
|
||||
function formatTime(secs) {
|
||||
const m = Math.floor(secs / 60);
|
||||
const s = Math.round(secs % 60);
|
||||
return `${m}:${String(s).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function formatValue(key, val) {
|
||||
if (key === "timePer500m") return formatTime(val) + " /500m";
|
||||
if (key === "distance") return val + " m";
|
||||
if (key === "calories") return Math.round(val) + " kcal";
|
||||
return val;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full overflow-hidden">
|
||||
<Header>Rowing</Header>
|
||||
|
||||
<div v-if="loading" class="flex-1 flex items-center justify-center">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<div v-else-if="error" class="flex-1 flex items-center justify-center">
|
||||
<p class="text-tertiary text-xs">{{ error }}</p>
|
||||
</div>
|
||||
<div v-else class="flex flex-col flex-1 px-1 pb-1 gap-1 overflow-hidden">
|
||||
<!-- Metric tabs -->
|
||||
<div class="flex gap-1 pt-1">
|
||||
<button
|
||||
v-for="m in METRICS"
|
||||
:key="m.key"
|
||||
class="metric-btn text-xs px-2 py-0.5 font-heading border"
|
||||
:style="{
|
||||
borderColor: m.color,
|
||||
color: metric === m.key ? '#1b110e' : m.color,
|
||||
backgroundColor: metric === m.key ? m.color : 'transparent',
|
||||
}"
|
||||
@click="metric = m.key"
|
||||
>
|
||||
{{ m.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- SVG Chart -->
|
||||
<div class="flex-1 relative">
|
||||
<svg
|
||||
:viewBox="`0 0 ${W} ${H}`"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="none"
|
||||
class="overflow-visible"
|
||||
>
|
||||
<!-- Grid lines -->
|
||||
<line
|
||||
v-for="yl in yLabels"
|
||||
:key="yl.y"
|
||||
:x1="PL"
|
||||
:y1="yl.y"
|
||||
:x2="W - PR"
|
||||
:y2="yl.y"
|
||||
stroke="var(--quaternary)"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
|
||||
<!-- Area fill -->
|
||||
<polygon
|
||||
v-if="points.length"
|
||||
:points="`${PL},${PT + PLOT_H} ${polyline} ${W - PR},${PT + PLOT_H}`"
|
||||
:fill="activeMetric.color"
|
||||
fill-opacity="0.08"
|
||||
/>
|
||||
|
||||
<!-- Line -->
|
||||
<polyline
|
||||
v-if="points.length"
|
||||
:points="polyline"
|
||||
:stroke="activeMetric.color"
|
||||
stroke-width="1.5"
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<!-- Data points -->
|
||||
<circle
|
||||
v-for="(p, i) in points"
|
||||
:key="i"
|
||||
:cx="p.x"
|
||||
:cy="p.y"
|
||||
:r="hovered === i ? 4 : 2"
|
||||
:fill="activeMetric.color"
|
||||
style="cursor: pointer"
|
||||
@mouseenter="hovered = i"
|
||||
@mouseleave="hovered = null"
|
||||
/>
|
||||
|
||||
<!-- Y axis labels -->
|
||||
<text
|
||||
v-for="yl in yLabels"
|
||||
:key="`y${yl.y}`"
|
||||
:x="PL - 3"
|
||||
:y="yl.y + 3"
|
||||
text-anchor="end"
|
||||
font-size="6"
|
||||
fill="var(--primary)"
|
||||
font-family="var(--font_heading)"
|
||||
>{{ yl.label }}</text>
|
||||
|
||||
<!-- X axis labels -->
|
||||
<text
|
||||
v-for="xl in xLabels"
|
||||
:key="`x${xl.x}`"
|
||||
:x="xl.x"
|
||||
:y="H - 4"
|
||||
text-anchor="middle"
|
||||
font-size="6"
|
||||
fill="var(--primary)"
|
||||
font-family="var(--font_heading)"
|
||||
>{{ xl.label }}</text>
|
||||
|
||||
<!-- Axes -->
|
||||
<line :x1="PL" :y1="PT" :x2="PL" :y2="PT + PLOT_H" stroke="var(--primary)" stroke-width="0.5" />
|
||||
<line :x1="PL" :y1="PT + PLOT_H" :x2="W - PR" :y2="PT + PLOT_H" stroke="var(--primary)" stroke-width="0.5" />
|
||||
|
||||
<!-- Tooltip -->
|
||||
<g v-if="hovered !== null && points[hovered]">
|
||||
<rect
|
||||
:x="Math.min(points[hovered].x + 4, W - 60)"
|
||||
:y="points[hovered].y - 16"
|
||||
width="58"
|
||||
height="20"
|
||||
fill="var(--bg_primary)"
|
||||
:stroke="activeMetric.color"
|
||||
stroke-width="0.5"
|
||||
rx="1"
|
||||
/>
|
||||
<text
|
||||
:x="Math.min(points[hovered].x + 7, W - 57)"
|
||||
:y="points[hovered].y - 7"
|
||||
font-size="5.5"
|
||||
fill="var(--secondary)"
|
||||
font-family="var(--font_heading)"
|
||||
>{{ points[hovered].date.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "2-digit" }) }}</text>
|
||||
<text
|
||||
:x="Math.min(points[hovered].x + 7, W - 57)"
|
||||
:y="points[hovered].y + 1"
|
||||
font-size="6"
|
||||
:fill="activeMetric.color"
|
||||
font-family="var(--font_heading)"
|
||||
>{{ formatValue(metric, points[hovered].value) }}</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Summary stats -->
|
||||
<div class="flex justify-between text-xs border-t border-quaternary pt-1">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-primary font-heading">{{ rows.length }}</span>
|
||||
<span class="text-quaternary" style="font-size: 0.6rem">sessions</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-primary font-heading">{{ rows.reduce((s, r) => s + r.distance, 0).toLocaleString() }}m</span>
|
||||
<span class="text-quaternary" style="font-size: 0.6rem">total dist</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-primary font-heading">{{ formatTime(rows.reduce((s, r) => s + r.timePer500m, 0) / (rows.length || 1)) }}</span>
|
||||
<span class="text-quaternary" style="font-size: 0.6rem">avg pace</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.metric-btn {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user