585 lines
15 KiB
Svelte
585 lines
15 KiB
Svelte
<script lang="ts">
|
|
import type { HudSummary } from "$lib/types/hud";
|
|
|
|
export let summary: HudSummary;
|
|
export let side: "left" | "right" = "right";
|
|
export let panelIndex = 0;
|
|
export let xValues: number[] | null = null;
|
|
export let yValues: number[] | null = null;
|
|
|
|
const viewportWidth = 100;
|
|
const viewportHeight = 36;
|
|
const horizontalInset = 2;
|
|
const verticalInset = 2;
|
|
|
|
interface CurveSample {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
interface PlotPoint {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
interface AxisTick {
|
|
value: number;
|
|
label: string;
|
|
plotX: number;
|
|
plotY: number;
|
|
}
|
|
|
|
function clamp(value: number, min: number, max: number): number {
|
|
return Math.min(max, Math.max(min, value));
|
|
}
|
|
|
|
function formatValue(value: number | null): string {
|
|
if (value === null) {
|
|
return "--";
|
|
}
|
|
|
|
return value.toFixed(1);
|
|
}
|
|
|
|
function formatAxisValue(value: number, axis: "x" | "y"): string {
|
|
if (!Number.isFinite(value)) {
|
|
return "--";
|
|
}
|
|
|
|
if (axis === "x") {
|
|
return String(Math.round(value));
|
|
}
|
|
|
|
if (Math.abs(value) >= 1000) {
|
|
const compact = Math.round((value / 1000) * 10) / 10;
|
|
return Number.isInteger(compact) ? `${compact.toFixed(0)}k` : `${compact.toFixed(1)}k`;
|
|
}
|
|
|
|
return Math.abs(value) >= 100 ? Math.round(value).toString() : value.toFixed(1);
|
|
}
|
|
|
|
function resolveDataBounds(values: number[]): { min: number; max: number } {
|
|
if (values.length === 0) {
|
|
return { min: 0, max: 1 };
|
|
}
|
|
|
|
return {
|
|
min: Math.min(...values),
|
|
max: Math.max(...values)
|
|
};
|
|
}
|
|
|
|
function resolveBounds(values: number[]): { min: number; max: number } {
|
|
if (values.length === 0) {
|
|
return { min: 0, max: 1 };
|
|
}
|
|
|
|
const min = Math.min(...values);
|
|
const max = Math.max(...values);
|
|
|
|
if (Math.abs(max - min) < 0.001) {
|
|
const padding = Math.max(Math.abs(max) * 0.05, 1);
|
|
return { min: min - padding, max: max + padding };
|
|
}
|
|
|
|
return { min, max };
|
|
}
|
|
|
|
function mapXToViewport(value: number, bounds: { min: number; max: number }): number {
|
|
const span = bounds.max - bounds.min;
|
|
const chartWidth = viewportWidth - horizontalInset * 2;
|
|
const ratio = span <= 0 ? 0.5 : (value - bounds.min) / span;
|
|
const mappedX = horizontalInset + ratio * chartWidth;
|
|
return Math.round(clamp(mappedX, horizontalInset, viewportWidth - horizontalInset) * 100) / 100;
|
|
}
|
|
|
|
function mapYToViewport(value: number, bounds: { min: number; max: number }): number {
|
|
const span = bounds.max - bounds.min;
|
|
const chartHeight = viewportHeight - verticalInset * 2;
|
|
const ratio = span <= 0 ? 0.5 : (value - bounds.min) / span;
|
|
const mappedY = viewportHeight - verticalInset - ratio * chartHeight;
|
|
return Math.round(clamp(mappedY, verticalInset, viewportHeight - verticalInset) * 100) / 100;
|
|
}
|
|
|
|
function buildSamples(rawYValues: number[], rawXValues: number[]): CurveSample[] {
|
|
if (!rawYValues.length) {
|
|
return [];
|
|
}
|
|
|
|
return rawYValues.map((rawY, index) => {
|
|
const x = rawXValues[index];
|
|
const y = Number.isFinite(rawY) ? Number(rawY) : 0;
|
|
const resolvedX = Number.isFinite(x) ? Number(x) : index + 1;
|
|
return { x: resolvedX, y };
|
|
});
|
|
}
|
|
|
|
function convertPoints(
|
|
samples: CurveSample[],
|
|
xBounds: { min: number; max: number },
|
|
yBounds: { min: number; max: number }
|
|
): PlotPoint[] {
|
|
if (samples.length === 0) {
|
|
return [];
|
|
}
|
|
|
|
if (samples.length === 1) {
|
|
return [{ x: viewportWidth / 2, y: viewportHeight / 2 }];
|
|
}
|
|
|
|
return samples.map((sample) => {
|
|
return {
|
|
x: mapXToViewport(sample.x, xBounds),
|
|
y: mapYToViewport(sample.y, yBounds)
|
|
};
|
|
});
|
|
}
|
|
|
|
function buildYAxisTicks(
|
|
yScaleBounds: { min: number; max: number },
|
|
yDataBounds: { min: number; max: number }
|
|
): AxisTick[] {
|
|
const hasRange = Math.abs(yDataBounds.max - yDataBounds.min) >= 0.001;
|
|
const tickValues = hasRange
|
|
? [yDataBounds.max, (yDataBounds.max + yDataBounds.min) / 2, yDataBounds.min]
|
|
: [yScaleBounds.max, (yScaleBounds.max + yScaleBounds.min) / 2, yScaleBounds.min];
|
|
return tickValues.map((value) => ({
|
|
value,
|
|
label: formatAxisValue(value, "y"),
|
|
plotX: horizontalInset,
|
|
plotY: mapYToViewport(value, yScaleBounds)
|
|
}));
|
|
}
|
|
|
|
function buildXAxisTicks(samples: CurveSample[], xScaleBounds: { min: number; max: number }): AxisTick[] {
|
|
if (!samples.length) {
|
|
return [];
|
|
}
|
|
|
|
const first = samples[0].x;
|
|
const middle = samples[Math.floor((samples.length - 1) / 2)].x;
|
|
const last = samples[samples.length - 1].x;
|
|
const tickValues = [first, middle, last];
|
|
return tickValues.map((value) => ({
|
|
value,
|
|
label: formatAxisValue(value, "x"),
|
|
plotX: mapXToViewport(value, xScaleBounds),
|
|
plotY: viewportHeight - 1.2
|
|
}));
|
|
}
|
|
|
|
function createLinePath(points: PlotPoint[]): string {
|
|
if (points.length === 0) {
|
|
return "";
|
|
}
|
|
|
|
return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
|
|
}
|
|
|
|
function createAreaPath(points: PlotPoint[]): string {
|
|
if (points.length < 2) {
|
|
return "";
|
|
}
|
|
|
|
const linePath = createLinePath(points);
|
|
const firstPoint = points[0];
|
|
const lastPoint = points[points.length - 1];
|
|
|
|
return `${linePath} L ${lastPoint.x} ${viewportHeight} L ${firstPoint.x} ${viewportHeight} Z`;
|
|
}
|
|
|
|
$: sourceYValues = yValues && yValues.length ? yValues : summary.points;
|
|
$: sourceXValues = xValues && xValues.length ? xValues : summary.xValues ?? [];
|
|
$: samples = buildSamples(sourceYValues, sourceXValues);
|
|
$: sampleCount = samples.length;
|
|
$: xScaleBounds = resolveBounds(samples.map((sample) => sample.x));
|
|
$: yScaleBounds = resolveBounds(samples.map((sample) => sample.y));
|
|
$: xDataBounds = resolveDataBounds(samples.map((sample) => sample.x));
|
|
$: yDataBounds = resolveDataBounds(samples.map((sample) => sample.y));
|
|
$: plotPoints = convertPoints(samples, xScaleBounds, yScaleBounds);
|
|
$: linePath = createLinePath(plotPoints);
|
|
$: areaPath = createAreaPath(plotPoints);
|
|
$: lastPoint = plotPoints.length > 0 ? plotPoints[plotPoints.length - 1] : null;
|
|
$: yAxisTicks = sampleCount > 0 ? buildYAxisTicks(yScaleBounds, yDataBounds) : [];
|
|
$: xAxisTicks = sampleCount > 0 ? buildXAxisTicks(samples, xScaleBounds) : [];
|
|
$: latestValue = formatValue(summary.latest);
|
|
$: minValue = formatValue(summary.min);
|
|
$: maxValue = formatValue(summary.max);
|
|
</script>
|
|
|
|
<article
|
|
class="signal-panel summary-panel side-{side}"
|
|
class:is-empty={sampleCount === 0}
|
|
aria-hidden={sampleCount === 0}
|
|
style="--panel-index: {panelIndex};"
|
|
>
|
|
<header class="panel-head">
|
|
<div class="head-text">
|
|
<p class="panel-code">TOT</p>
|
|
<p class="panel-title">{summary.label}</p>
|
|
</div>
|
|
|
|
<div class="icon-layer" aria-hidden="true">
|
|
<span class="icon-chip tone-cyan">NOW</span>
|
|
<span class="icon-chip tone-lime">MIN</span>
|
|
<span class="icon-chip tone-orange">MAX</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="chart-stage">
|
|
<svg viewBox="0 0 {viewportWidth} {viewportHeight}" preserveAspectRatio="none" role="img" aria-label={summary.label}>
|
|
<defs>
|
|
<linearGradient id="summary-fill" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="rgb(62 232 255 / 0.28)" />
|
|
<stop offset="100%" stop-color="rgb(62 232 255 / 0.02)" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<g class="grid-lines" aria-hidden="true">
|
|
{#each [6, 12, 18, 24, 30] as y}
|
|
<line x1="0" y1={y} x2={viewportWidth} y2={y}></line>
|
|
{/each}
|
|
</g>
|
|
|
|
{#if areaPath}
|
|
<path d={areaPath} class="summary-area"></path>
|
|
{/if}
|
|
|
|
{#if linePath}
|
|
<path d={linePath} class="summary-line"></path>
|
|
{/if}
|
|
|
|
{#if lastPoint}
|
|
<circle cx={lastPoint.x} cy={lastPoint.y} r="1.7" class="summary-dot"></circle>
|
|
{/if}
|
|
|
|
<g class="axis-labels" aria-hidden="true">
|
|
{#each yAxisTicks as tick, index (`y-${index}`)}
|
|
<text class="axis-label y-axis-label" x={tick.plotX + 0.8} y={tick.plotY - 0.35} text-anchor="start">
|
|
{tick.label}
|
|
</text>
|
|
{/each}
|
|
|
|
{#each xAxisTicks as tick, index (`x-${index}`)}
|
|
<text
|
|
class="axis-label x-axis-label"
|
|
x={tick.plotX}
|
|
y={tick.plotY}
|
|
text-anchor={index === 0 ? "start" : index === xAxisTicks.length - 1 ? "end" : "middle"}
|
|
>
|
|
{tick.label}
|
|
</text>
|
|
{/each}
|
|
</g>
|
|
</svg>
|
|
|
|
{#if sampleCount === 0}
|
|
<div class="empty-state">
|
|
<span>Waiting</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<footer class="panel-foot">
|
|
<p class="foot-item">
|
|
<span class="dot tone-cyan"></span>
|
|
<span class="metric-text">Now</span>
|
|
<span class="value">{latestValue}</span>
|
|
</p>
|
|
<p class="foot-item">
|
|
<span class="dot tone-lime"></span>
|
|
<span class="metric-text">Min</span>
|
|
<span class="value">{minValue}</span>
|
|
</p>
|
|
<p class="foot-item">
|
|
<span class="dot tone-orange"></span>
|
|
<span class="metric-text">Max</span>
|
|
<span class="value">{maxValue}</span>
|
|
</p>
|
|
</footer>
|
|
</article>
|
|
|
|
<style>
|
|
.signal-panel {
|
|
--offset-x: 12%;
|
|
--enter-ms: 1800ms;
|
|
--fade-ms: 1000ms;
|
|
overflow: hidden;
|
|
inline-size: min(100%, clamp(16.8rem, 23vw, 22rem));
|
|
aspect-ratio: 1.44 / 1;
|
|
min-block-size: 11.8rem;
|
|
justify-self: start;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto;
|
|
gap: 0.4rem;
|
|
padding: 0.56rem 0.62rem 0.58rem;
|
|
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.42);
|
|
border-radius: 0.92rem;
|
|
background:
|
|
linear-gradient(160deg, rgb(var(--hud-surface-alt-rgb) / 0.76) 0%, rgb(var(--hud-surface-rgb) / 0.62) 48%, rgb(var(--hud-surface-deep-rgb) / 0.76) 100%),
|
|
radial-gradient(circle at 12% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 40%);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08),
|
|
inset 0 -24px 32px rgb(0 0 0 / 0.48),
|
|
0 0 14px rgb(var(--hud-glow-rgb) / 0.14);
|
|
opacity: 1;
|
|
transform: translateX(0) scale(1) rotate(0);
|
|
transition:
|
|
opacity var(--fade-ms) cubic-bezier(0.18, 0.88, 0.3, 1),
|
|
transform var(--enter-ms) cubic-bezier(0.2, 0.9, 0.28, 1),
|
|
border-color 460ms ease,
|
|
filter 760ms ease;
|
|
transition-delay: calc(var(--panel-index) * 140ms);
|
|
}
|
|
|
|
.signal-panel.side-left {
|
|
--offset-x: -132%;
|
|
}
|
|
|
|
.signal-panel.side-right {
|
|
--offset-x: 132%;
|
|
justify-self: end;
|
|
}
|
|
|
|
.summary-panel.is-empty {
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.panel-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 0.4rem;
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.head-text {
|
|
min-width: 0;
|
|
}
|
|
|
|
.panel-code {
|
|
margin: 0;
|
|
font-size: 0.63rem;
|
|
color: rgb(var(--hud-text-dim-rgb) / 0.88);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.panel-title {
|
|
margin: 0.12rem 0 0;
|
|
font-size: 0.75rem;
|
|
color: rgb(var(--hud-text-main-rgb) / 0.96);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.icon-layer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.26rem;
|
|
}
|
|
|
|
.icon-chip {
|
|
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.44);
|
|
border-radius: 999px;
|
|
padding: 0.08rem 0.36rem;
|
|
font-size: 0.58rem;
|
|
letter-spacing: 0.08em;
|
|
color: rgb(var(--hud-text-main-rgb) / 0.94);
|
|
background: rgb(var(--hud-surface-rgb) / 0.66);
|
|
}
|
|
|
|
.icon-chip.tone-cyan {
|
|
border-color: rgb(var(--hud-cyan-rgb) / 0.54);
|
|
}
|
|
|
|
.icon-chip.tone-lime {
|
|
border-color: rgb(var(--hud-lime-rgb) / 0.56);
|
|
}
|
|
|
|
.icon-chip.tone-orange {
|
|
border-color: rgb(var(--hud-orange-rgb) / 0.58);
|
|
}
|
|
|
|
.chart-stage {
|
|
position: relative;
|
|
block-size: clamp(6.4rem, 9vw, 8.2rem);
|
|
overflow: hidden;
|
|
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
|
|
border-radius: 0.62rem;
|
|
background:
|
|
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.68), rgb(var(--hud-surface-deep-rgb) / 0.78)),
|
|
radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.09), transparent 45%);
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
}
|
|
|
|
.grid-lines line {
|
|
stroke: rgb(var(--hud-border-strong-rgb) / 0.16);
|
|
stroke-width: 0.45;
|
|
}
|
|
|
|
.summary-area {
|
|
fill: url(#summary-fill);
|
|
}
|
|
|
|
.summary-line {
|
|
fill: none;
|
|
stroke: rgb(var(--hud-cyan-rgb) / 0.96);
|
|
stroke-width: 1.35;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
filter: drop-shadow(0 0 4px rgb(var(--hud-cyan-rgb) / 0.22));
|
|
}
|
|
|
|
.summary-dot {
|
|
fill: rgb(var(--hud-lime-rgb) / 0.98);
|
|
filter: drop-shadow(0 0 6px rgb(var(--hud-lime-rgb) / 0.3));
|
|
}
|
|
|
|
.axis-label {
|
|
fill: rgb(var(--hud-text-main-rgb) / 0.88);
|
|
font-size: 2.8px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
text-shadow:
|
|
0 1px 0 rgb(0 0 0 / 0.46),
|
|
0 0 4px rgb(0 0 0 / 0.3);
|
|
}
|
|
|
|
.y-axis-label {
|
|
fill: rgb(var(--hud-text-dim-rgb) / 0.84);
|
|
}
|
|
|
|
.x-axis-label {
|
|
fill: rgb(var(--hud-text-dim-rgb) / 0.9);
|
|
}
|
|
|
|
.empty-state {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgb(var(--hud-text-dim-rgb) / 0.76);
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
background: linear-gradient(180deg, rgb(var(--hud-surface-deep-rgb) / 0.06), rgb(var(--hud-surface-deep-rgb) / 0.18));
|
|
}
|
|
|
|
.panel-foot {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.8rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.foot-item {
|
|
margin: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.28rem;
|
|
color: rgb(var(--hud-text-main-rgb) / 0.9);
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.metric-text {
|
|
color: rgb(var(--hud-text-dim-rgb) / 0.82);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dot {
|
|
inline-size: 0.34rem;
|
|
block-size: 0.34rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.dot.tone-cyan {
|
|
background: rgb(var(--hud-cyan-rgb));
|
|
}
|
|
|
|
.dot.tone-lime {
|
|
background: rgb(var(--hud-lime-rgb));
|
|
}
|
|
|
|
.dot.tone-orange {
|
|
background: rgb(var(--hud-orange-rgb));
|
|
}
|
|
|
|
.value {
|
|
min-inline-size: 2.6rem;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.signal-panel {
|
|
inline-size: min(100%, clamp(14rem, 30vw, 17rem));
|
|
aspect-ratio: 1.5 / 1;
|
|
min-block-size: 10.1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 900px) {
|
|
.signal-panel {
|
|
inline-size: min(100%, clamp(15rem, 22vw, 18.5rem));
|
|
min-block-size: 10.6rem;
|
|
}
|
|
|
|
.chart-stage {
|
|
block-size: clamp(5.7rem, 7.6vw, 6.9rem);
|
|
}
|
|
}
|
|
|
|
@media (max-height: 760px) {
|
|
.signal-panel {
|
|
inline-size: min(100%, clamp(13.8rem, 20vw, 16.5rem));
|
|
min-block-size: 9.8rem;
|
|
padding: 0.46rem 0.5rem 0.5rem;
|
|
}
|
|
|
|
.panel-foot {
|
|
margin-block-start: 0.28rem;
|
|
}
|
|
|
|
.chart-stage {
|
|
block-size: clamp(5rem, 6.6vw, 6rem);
|
|
}
|
|
}
|
|
|
|
@media (max-height: 680px) {
|
|
.signal-panel {
|
|
inline-size: min(100%, clamp(12.8rem, 18vw, 15rem));
|
|
min-block-size: 8.7rem;
|
|
padding: 0.4rem 0.46rem 0.44rem;
|
|
}
|
|
|
|
.panel-head {
|
|
margin-block-end: 0.26rem;
|
|
}
|
|
|
|
.panel-foot {
|
|
margin-block-start: 0.18rem;
|
|
gap: 0.56rem;
|
|
}
|
|
|
|
.chart-stage {
|
|
block-size: clamp(4.4rem, 5.6vw, 5.4rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.signal-panel {
|
|
inline-size: 100%;
|
|
aspect-ratio: 1.7 / 1;
|
|
min-block-size: 0;
|
|
}
|
|
}
|
|
</style>
|