feat: v1 API + frontend migration

2026-07-03 14:06:33 -04:00
parent ff44db311d
commit c9e4d345b8
212 changed files with 26747 additions and 398 deletions
@@ -0,0 +1,210 @@
+import type { GraphDataPoint } from '../generated/model';
+
+interface ReadingHistoryGraphProps {
+  data: GraphDataPoint[];
+}
+
+export interface SVGPoint {
+  x: number;
+  y: number;
+}
+
+function getSVGBezierOpposedLine(
+  pointA: SVGPoint,
+  pointB: SVGPoint
+): { Length: number; Angle: number } {
+  const lengthX = pointB.x - pointA.x;
+  const lengthY = pointB.y - pointA.y;
+
+  return {
+    Length: Math.floor(Math.sqrt(lengthX * lengthX + lengthY * lengthY)),
+    Angle: Math.trunc(Math.atan2(lengthY, lengthX)),
+  };
+}
+
+function getBezierControlPoint(
+  currentPoint: SVGPoint,
+  prevPoint: SVGPoint | null,
+  nextPoint: SVGPoint | null,
+  isReverse: boolean
+): SVGPoint {
+  let pPrev = prevPoint;
+  let pNext = nextPoint;
+  if (!pPrev) {
+    pPrev = currentPoint;
+  }
+  if (!pNext) {
+    pNext = currentPoint;
+  }
+
+  const smoothingRatio = 0.2;
+  const directionModifier = isReverse ? Math.PI : 0;
+
+  const opposingLine = getSVGBezierOpposedLine(pPrev, pNext);
+  const lineAngle = opposingLine.Angle + directionModifier;
+  const lineLength = opposingLine.Length * smoothingRatio;
+
+  return {
+    x: Math.floor(currentPoint.x + Math.trunc(Math.cos(lineAngle) * lineLength)),
+    y: Math.floor(currentPoint.y + Math.trunc(Math.sin(lineAngle) * lineLength)),
+  };
+}
+
+function getSVGBezierPath(points: SVGPoint[]): string {
+  if (points.length === 0) {
+    return '';
+  }
+
+  let bezierSVGPath = '';
+
+  for (let index = 0; index < points.length; index++) {
+    const point = points[index];
+    if (!point) {
+      continue;
+    }
+
+    if (index === 0) {
+      bezierSVGPath += `M ${point.x},${point.y}`;
+      continue;
+    }
+
+    const pointMinusOne = points[index - 1];
+    if (!pointMinusOne) {
+      continue;
+    }
+
+    const pointPlusOne = points[index + 1] ?? point;
+    const pointMinusTwo = index - 2 >= 0 ? (points[index - 2] ?? null) : null;
+
+    const startControlPoint = getBezierControlPoint(pointMinusOne, pointMinusTwo, point, false);
+    const endControlPoint = getBezierControlPoint(point, pointMinusOne, pointPlusOne, true);
+
+    bezierSVGPath += ` C${startControlPoint.x},${startControlPoint.y} ${endControlPoint.x},${endControlPoint.y} ${point.x},${point.y}`;
+  }
+
+  return bezierSVGPath;
+}
+
+export interface SVGGraphData {
+  LinePoints: SVGPoint[];
+  BezierPath: string;
+  BezierFill: string;
+  Offset: number;
+}
+
+export function getSVGGraphData(
+  inputData: GraphDataPoint[],
+  svgWidth: number,
+  svgHeight: number
+): SVGGraphData {
+  let maxHeight = 0;
+  for (const item of inputData) {
+    if (item.minutes_read > maxHeight) {
+      maxHeight = item.minutes_read;
+    }
+  }
+
+  const sizePercentage = 0.5;
+  const sizeRatio = maxHeight > 0 ? (svgHeight * sizePercentage) / maxHeight : 0;
+  const blockOffset = inputData.length > 0 ? Math.floor(svgWidth / inputData.length) : 0;
+
+  const linePoints: SVGPoint[] = [];
+
+  let maxBX = 0;
+  let maxBY = 0;
+  let minBX = 0;
+
+  for (let idx = 0; idx < inputData.length; idx++) {
+    const item = inputData[idx];
+    if (!item) {
+      continue;
+    }
+
+    const itemSize = Math.floor(item.minutes_read * sizeRatio);
+    const itemY = svgHeight - itemSize;
+    const lineX = (idx + 1) * blockOffset;
+
+    linePoints.push({ x: lineX, y: itemY });
+
+    if (lineX > maxBX) {
+      maxBX = lineX;
+    }
+
+    if (lineX < minBX) {
+      minBX = lineX;
+    }
+
+    if (itemY > maxBY) {
+      maxBY = itemY;
+    }
+  }
+
+  return {
+    LinePoints: linePoints,
+    BezierPath: getSVGBezierPath(linePoints),
+    BezierFill: `L ${Math.floor(maxBX)},${Math.floor(maxBY)} L ${Math.floor(minBX + blockOffset)},${Math.floor(maxBY)} Z`,
+    Offset: blockOffset,
+  };
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+  const day = String(date.getUTCDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps) {
+  const svgWidth = 800;
+  const svgHeight = 70;
+
+  if (!data || data.length < 2) {
+    return (
+      <div className="relative flex h-24 items-center justify-center bg-surface-muted">
+        <p className="text-content-subtle">No data available</p>
+      </div>
+    );
+  }
+
+  const { BezierPath, BezierFill } = getSVGGraphData(data, svgWidth, svgHeight);
+
+  return (
+    <div className="relative">
+      <svg viewBox={`26 0 755 ${svgHeight}`} preserveAspectRatio="none" width="100%" height="6em">
+        <path fill="rgb(var(--secondary-600))" fillOpacity="0.5" stroke="none" d={`${BezierPath} ${BezierFill}`} />
+        <path fill="none" stroke="rgb(var(--secondary-600))" d={BezierPath} />
+      </svg>
+      <div
+        className="absolute top-0 flex size-full"
+        style={{
+          width: 'calc(100% * 31 / 30)',
+          transform: 'translateX(-50%)',
+          left: '50%',
+        }}
+      >
+        {data.map((point, i) => (
+          <div
+            key={i}
+            className="w-full opacity-0 hover:opacity-100"
+            style={{
+              background:
+                'linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%',
+            }}
+          >
+            <div
+              className="pointer-events-none absolute top-3 flex flex-col items-center rounded bg-surface/80 p-2 text-xs text-content"
+              style={{
+                transform: 'translateX(-50%)',
+                left: '50%',
+              }}
+            >
+              <span>{formatDate(point.date)}</span>
+              <span>{point.minutes_read} minutes</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}