refactor(ui): organize component source tree

packages/ui/src/components/telemetry/Sparkline.tsx

@@ -0,0 +1,37 @@
+import type { UiSeverity } from "../../types";
+
+export interface SparklineProps {
+  values?: number[];
+  severity?: UiSeverity;
+}
+
+export function Sparkline({
+  values = [],
+  severity = "neutral",
+}: SparklineProps) {
+  const points = toPoints(values);
+
+  return (
+    <svg
+      className="sparkline"
+      data-severity={severity}
+      viewBox="0 0 100 24"
+      aria-hidden="true"
+    >
+      {points ? <polyline points={points} /> : null}
+    </svg>
+  );
+}
+
+function toPoints(values: number[]): string {
+  if (values.length === 0) return "";
+  const max = Math.max(...values, 1);
+  const step = values.length > 1 ? 100 / (values.length - 1) : 100;
+  return values
+    .map((value, index) => {
+      const x = index * step;
+      const y = 24 - (Math.max(0, value) / max) * 22;
+      return `${x.toFixed(2)},${y.toFixed(2)}`;
+    })
+    .join(" ");
+}