백테스팅 적용

2026-05-25 20:23:54 +09:00
parent 02d14e4b2b
commit cae1c3a624
33 changed files with 3399 additions and 385 deletions
@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+
+interface Props {
+  series: number[];
+  label?: string;
+  height?: number;
+}
+
+function sparkPath(values: number[], w: number, h: number): string {
+  if (values.length < 2) return '';
+  const lo = Math.min(...values);
+  const hi = Math.max(...values);
+  const range = hi - lo || 1;
+  return values.map((v, i) => {
+    const x = (i / (values.length - 1)) * w;
+    const y = h - 8 - ((v - lo) / range) * (h - 16);
+    return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+  }).join(' ');
+}
+
+export default function DashboardSparkChart({ series, label, height = 140 }: Props) {
+  const w = 480;
+  const path = useMemo(() => sparkPath(series, w, height), [series, height]);
+  const area = path ? `${path} L ${w},${height} L 0,${height} Z` : '';
+  const last = series.length ? series[series.length - 1] : 0;
+
+  return (
+    <div className="gc-spark-chart">
+      {label && (
+        <div className="gc-spark-chart-head">
+          <span>{label}</span>
+          <strong>{last.toFixed(1)}/s</strong>
+        </div>
+      )}
+      <svg viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none" className="gc-spark-chart-svg">
+        <defs>
+          <linearGradient id="gcSparkGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#22d3ee" stopOpacity="0.55" />
+            <stop offset="100%" stopColor="#6366f1" stopOpacity="0.05" />
+          </linearGradient>
+        </defs>
+        {area && <path d={area} fill="url(#gcSparkGrad)" />}
+        {path && (
+          <path d={path} fill="none" stroke="#22d3ee" strokeWidth="2" style={{ filter: 'drop-shadow(0 0 4px rgba(34,211,238,0.5))' }} />
+        )}
+      </svg>
+    </div>
+  );
+}