diff --git a/website/src/components/Output.tsx b/website/src/components/Output.tsx index 7829a168..2aef5f0a 100644 --- a/website/src/components/Output.tsx +++ b/website/src/components/Output.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react"; import { ColumnType } from "@/components/ResizableDataTable"; import ResizableDataTable from "@/components/ResizableDataTable"; import { usePipelineContext } from "@/contexts/PipelineContext"; -import { Loader2, Download, ChevronDown } from "lucide-react"; +import { Loader2, Download, ChevronDown, Circle } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import BookmarkableText from "@/components/BookmarkableText"; @@ -19,6 +19,47 @@ import { useWebSocket } from "@/contexts/WebSocketContext"; import AnsiRenderer from "./AnsiRenderer"; import clsx from "clsx"; +const TinyPieChart: React.FC<{ percentage: number }> = ({ percentage }) => { + const size = 16; + const radius = 6; + const strokeWidth = 2; + const center = size / 2; + const circumference = 2 * Math.PI * radius; + const strokeDasharray = `${ + (percentage * circumference) / 100 + } ${circumference}`; + + return ( +