mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-05-18 12:05:53 +00:00
297 lines
11 KiB
Vue
297 lines
11 KiB
Vue
<script setup>
|
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
data: { type: Array, required: true },
|
|
labels: { type: Array, default: () => [] },
|
|
vbWidth: { type: Number, default: 320 },
|
|
height: { type: Number, default: 80 },
|
|
stroke: { type: String, default: '#008771' },
|
|
strokeWidth: { type: Number, default: 2 },
|
|
maxPoints: { type: Number, default: 120 },
|
|
showGrid: { type: Boolean, default: true },
|
|
gridColor: { type: String, default: 'rgba(0,0,0,0.1)' },
|
|
fillOpacity: { type: Number, default: 0.15 },
|
|
showMarker: { type: Boolean, default: true },
|
|
markerRadius: { type: Number, default: 2.8 },
|
|
showAxes: { type: Boolean, default: false },
|
|
yTickStep: { type: Number, default: 25 },
|
|
tickCountX: { type: Number, default: 4 },
|
|
paddingLeft: { type: Number, default: 56 },
|
|
paddingRight: { type: Number, default: 6 },
|
|
paddingTop: { type: Number, default: 6 },
|
|
paddingBottom: { type: Number, default: 20 },
|
|
showTooltip: { type: Boolean, default: false },
|
|
// Value-range customization. When valueMax is null the chart auto-scales
|
|
// to the running max of the data (useful for unbounded series like
|
|
// network throughput or online clients). Defaults preserve the legacy
|
|
// 0..100 percent behavior so existing callers don't need to change.
|
|
valueMin: { type: Number, default: 0 },
|
|
valueMax: { type: [Number, null], default: 100 },
|
|
// Y-axis tick formatter. Receives the raw value, returns the label.
|
|
// tooltipFormatter formats the hover-readout; falls back to yFormatter.
|
|
yFormatter: { type: Function, default: (v) => `${Math.round(v)}%` },
|
|
tooltipFormatter: { type: Function, default: null },
|
|
});
|
|
|
|
const hoverIdx = ref(-1);
|
|
|
|
// Measured CSS width of the SVG. Drives the viewBox so SVG units stay
|
|
// 1:1 with rendered pixels — otherwise `preserveAspectRatio="none"`
|
|
// stretches the X axis and squashes axis text horizontally on narrow
|
|
// containers (mobile). Falls back to the prop until the first measure.
|
|
const svgRef = ref(null);
|
|
const measuredWidth = ref(0);
|
|
const effectiveVbWidth = computed(() => measuredWidth.value > 0 ? measuredWidth.value : props.vbWidth);
|
|
|
|
let resizeObserver = null;
|
|
function measure() {
|
|
const el = svgRef.value;
|
|
if (!el) return;
|
|
const w = el.getBoundingClientRect?.().width || 0;
|
|
if (w > 0) measuredWidth.value = Math.round(w);
|
|
}
|
|
onMounted(() => {
|
|
measure();
|
|
if (typeof ResizeObserver !== 'undefined' && svgRef.value) {
|
|
resizeObserver = new ResizeObserver(measure);
|
|
resizeObserver.observe(svgRef.value);
|
|
} else {
|
|
window.addEventListener('resize', measure);
|
|
}
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (resizeObserver) resizeObserver.disconnect();
|
|
else window.removeEventListener('resize', measure);
|
|
});
|
|
|
|
const viewBoxAttr = computed(() => `0 0 ${effectiveVbWidth.value} ${props.height}`);
|
|
const drawWidth = computed(() => Math.max(1, effectiveVbWidth.value - props.paddingLeft - props.paddingRight));
|
|
const drawHeight = computed(() => Math.max(1, props.height - props.paddingTop - props.paddingBottom));
|
|
const nPoints = computed(() => Math.min(props.data.length, props.maxPoints));
|
|
|
|
const dataSlice = computed(() => {
|
|
const n = nPoints.value;
|
|
if (n === 0) return [];
|
|
return props.data.slice(props.data.length - n);
|
|
});
|
|
|
|
const labelsSlice = computed(() => {
|
|
const n = nPoints.value;
|
|
if (!props.labels?.length || n === 0) return [];
|
|
const start = Math.max(0, props.labels.length - n);
|
|
return props.labels.slice(start);
|
|
});
|
|
|
|
// Resolved domain. When valueMax is null we auto-scale; pad the upper
|
|
// bound by 10% so the line never touches the top edge — looks more
|
|
// natural and gives the axis a sane ceiling. Floor the dynamic range
|
|
// at 1 to avoid divide-by-zero on flat-line data (e.g. all zeros).
|
|
const yDomain = computed(() => {
|
|
const min = props.valueMin;
|
|
if (props.valueMax != null) return { min, max: props.valueMax };
|
|
let max = min;
|
|
for (const v of dataSlice.value) {
|
|
const n = Number(v);
|
|
if (Number.isFinite(n) && n > max) max = n;
|
|
}
|
|
if (max <= min) max = min + 1;
|
|
return { min, max: max * 1.1 };
|
|
});
|
|
|
|
function project(v) {
|
|
const { min, max } = yDomain.value;
|
|
const span = max - min;
|
|
if (span <= 0) return props.paddingTop + drawHeight.value;
|
|
const clipped = Math.max(min, Math.min(max, Number(v) || 0));
|
|
const ratio = (clipped - min) / span;
|
|
return Math.round(props.paddingTop + (drawHeight.value - ratio * drawHeight.value));
|
|
}
|
|
|
|
const pointsArr = computed(() => {
|
|
const n = nPoints.value;
|
|
if (n === 0) return [];
|
|
const slice = dataSlice.value;
|
|
const w = drawWidth.value;
|
|
const dx = n > 1 ? w / (n - 1) : 0;
|
|
return slice.map((v, i) => {
|
|
const x = Math.round(props.paddingLeft + i * dx);
|
|
return [x, project(v)];
|
|
});
|
|
});
|
|
|
|
const pointsStr = computed(() => pointsArr.value.map((p) => `${p[0]},${p[1]}`).join(' '));
|
|
|
|
const areaPath = computed(() => {
|
|
if (pointsArr.value.length === 0) return '';
|
|
const first = pointsArr.value[0];
|
|
const last = pointsArr.value[pointsArr.value.length - 1];
|
|
const baseY = props.paddingTop + drawHeight.value;
|
|
const line = pointsStr.value.replace(/ /g, ' L ');
|
|
return `M ${first[0]},${baseY} L ${line} L ${last[0]},${baseY} Z`;
|
|
});
|
|
|
|
const gridLines = computed(() => {
|
|
if (!props.showGrid) return [];
|
|
const h = drawHeight.value;
|
|
const w = drawWidth.value;
|
|
return [0, 0.25, 0.5, 0.75, 1].map((r) => {
|
|
const y = Math.round(props.paddingTop + h * r);
|
|
return { x1: props.paddingLeft, y1: y, x2: props.paddingLeft + w, y2: y };
|
|
});
|
|
});
|
|
|
|
const lastPoint = computed(() => {
|
|
if (pointsArr.value.length === 0) return null;
|
|
return pointsArr.value[pointsArr.value.length - 1];
|
|
});
|
|
|
|
// Y-axis tick rendering. We pick a small number of evenly spaced values
|
|
// inside the resolved domain and run them through yFormatter — that's
|
|
// what makes "MB/s" / "clients" / "%" all render correctly without the
|
|
// caller having to subclass the component.
|
|
const yTicks = computed(() => {
|
|
if (!props.showAxes) return [];
|
|
const { min, max } = yDomain.value;
|
|
const out = [];
|
|
// For percent-style domains keep the legacy fixed step; otherwise
|
|
// default to 4 evenly spaced ticks (5 lines including the bottom).
|
|
if (props.valueMax === 100 && props.valueMin === 0 && props.yTickStep > 0) {
|
|
for (let p = min; p <= max; p += props.yTickStep) {
|
|
const y = project(p);
|
|
out.push({ y, label: props.yFormatter(p) });
|
|
}
|
|
return out;
|
|
}
|
|
const ticks = 5;
|
|
for (let i = 0; i < ticks; i++) {
|
|
const v = min + ((max - min) * i) / (ticks - 1);
|
|
out.push({ y: project(v), label: props.yFormatter(v) });
|
|
}
|
|
return out;
|
|
});
|
|
|
|
const xTicks = computed(() => {
|
|
if (!props.showAxes) return [];
|
|
const labels = labelsSlice.value;
|
|
const n = nPoints.value;
|
|
if (n === 0) return [];
|
|
const m = Math.max(2, props.tickCountX);
|
|
const w = drawWidth.value;
|
|
const dx = n > 1 ? w / (n - 1) : 0;
|
|
const out = [];
|
|
for (let i = 0; i < m; i++) {
|
|
const idx = Math.round((i * (n - 1)) / (m - 1));
|
|
const label = labels[idx] != null ? String(labels[idx]) : String(idx);
|
|
const x = Math.round(props.paddingLeft + idx * dx);
|
|
out.push({ x, label });
|
|
}
|
|
return out;
|
|
});
|
|
|
|
function onMouseMove(evt) {
|
|
if (!props.showTooltip || pointsArr.value.length === 0) return;
|
|
const rect = evt.currentTarget.getBoundingClientRect();
|
|
const px = evt.clientX - rect.left;
|
|
const x = (px / rect.width) * effectiveVbWidth.value;
|
|
const n = nPoints.value;
|
|
const dx = n > 1 ? drawWidth.value / (n - 1) : 0;
|
|
const idx = Math.max(0, Math.min(n - 1, Math.round((x - props.paddingLeft) / (dx || 1))));
|
|
hoverIdx.value = idx;
|
|
}
|
|
|
|
function onMouseLeave() {
|
|
hoverIdx.value = -1;
|
|
}
|
|
|
|
function fmtHoverText() {
|
|
const idx = hoverIdx.value;
|
|
if (idx < 0 || idx >= dataSlice.value.length) return '';
|
|
const raw = Number(dataSlice.value[idx] || 0);
|
|
const fmt = props.tooltipFormatter || props.yFormatter;
|
|
const val = fmt(Number.isFinite(raw) ? raw : 0);
|
|
const lab = labelsSlice.value[idx] != null ? labelsSlice.value[idx] : '';
|
|
return `${val}${lab ? ' • ' + lab : ''}`;
|
|
}
|
|
|
|
// Stable per-instance gradient id so multiple sparklines on a page
|
|
// don't clobber each other's <defs id="spkGrad">.
|
|
const gradId = `spkGrad-${Math.random().toString(36).slice(2, 9)}`;
|
|
</script>
|
|
|
|
<template>
|
|
<svg ref="svgRef" width="100%" :height="height" :viewBox="viewBoxAttr" preserveAspectRatio="none"
|
|
class="sparkline-svg" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
|
|
<defs>
|
|
<linearGradient :id="gradId" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" :stop-color="stroke" :stop-opacity="fillOpacity" />
|
|
<stop offset="100%" :stop-color="stroke" stop-opacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<g v-if="showGrid">
|
|
<line v-for="(g, i) in gridLines" :key="i" :x1="g.x1" :y1="g.y1" :x2="g.x2" :y2="g.y2" :stroke="gridColor"
|
|
stroke-width="1" class="cpu-grid-line" />
|
|
</g>
|
|
|
|
<g v-if="showAxes">
|
|
<text v-for="(t, i) in yTicks" :key="'y' + i" class="cpu-grid-y-text" :x="Math.max(0, paddingLeft - 4)"
|
|
:y="t.y + 4" text-anchor="end" font-size="10">{{ t.label }}</text>
|
|
<text v-for="(t, i) in xTicks" :key="'x' + i" class="cpu-grid-x-text" :x="t.x" :y="paddingTop + drawHeight + 14"
|
|
text-anchor="middle" font-size="10">{{ t.label }}</text>
|
|
</g>
|
|
|
|
<path v-if="areaPath" :d="areaPath" :fill="`url(#${gradId})`" stroke="none" />
|
|
<polyline :points="pointsStr" fill="none" :stroke="stroke" :stroke-width="strokeWidth" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<circle v-if="showMarker && lastPoint" :cx="lastPoint[0]" :cy="lastPoint[1]" :r="markerRadius" :fill="stroke" />
|
|
|
|
<g v-if="showTooltip && hoverIdx >= 0 && pointsArr[hoverIdx]">
|
|
<line class="cpu-grid-h-line" :x1="pointsArr[hoverIdx][0]" :x2="pointsArr[hoverIdx][0]" :y1="paddingTop"
|
|
:y2="paddingTop + drawHeight" stroke="rgba(0,0,0,0.2)" stroke-width="1" />
|
|
<circle :cx="pointsArr[hoverIdx][0]" :cy="pointsArr[hoverIdx][1]" r="3.5" :fill="stroke" />
|
|
<text class="cpu-grid-text" :x="pointsArr[hoverIdx][0]" :y="paddingTop + 12" text-anchor="middle"
|
|
font-size="11">{{ fmtHoverText() }}</text>
|
|
</g>
|
|
</svg>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sparkline-svg {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<!-- Axis labels live on SVG <text> elements; Vue's scoped CSS doesn't
|
|
reliably hash-attribute SVG descendants, so the dark-mode overrides
|
|
have to live in a non-scoped block to actually take effect. The
|
|
numbers are also small, so the dark-theme fills run at ~85% opacity
|
|
for legibility (the previous 55% was washed out on navy backgrounds). -->
|
|
<style>
|
|
.sparkline-svg .cpu-grid-y-text,
|
|
.sparkline-svg .cpu-grid-x-text {
|
|
fill: rgba(0, 0, 0, 0.65);
|
|
}
|
|
|
|
.sparkline-svg .cpu-grid-text {
|
|
fill: rgba(0, 0, 0, 0.88);
|
|
}
|
|
|
|
body.dark .sparkline-svg .cpu-grid-y-text,
|
|
body.dark .sparkline-svg .cpu-grid-x-text {
|
|
fill: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
body.dark .sparkline-svg .cpu-grid-text {
|
|
fill: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
body.dark .sparkline-svg .cpu-grid-line {
|
|
stroke: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
body.dark .sparkline-svg .cpu-grid-h-line {
|
|
stroke: rgba(255, 255, 255, 0.35);
|
|
}
|
|
</style>
|