Enhance ROI tools with chart and CSV export

Author: haasonsaas

web/src/pages/ToolsPage.css

@@ -77,6 +77,78 @@
   color: rgba(226, 232, 240, 0.95);
 }
 
+.tools__chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.tools__download {
+  background: rgba(59, 130, 246, 0.15);
+  border: 1px solid rgba(59, 130, 246, 0.45);
+  border-radius: 0.5rem;
+  color: rgba(191, 219, 254, 0.95);
+  padding: 0.45rem 0.9rem;
+  cursor: pointer;
+}
+
+.tools__download:hover {
+  background: rgba(59, 130, 246, 0.25);
+}
+
+.tools__chart {
+  width: 100%;
+  max-width: 100%;
+  margin-top: 1rem;
+}
+
+.tools__chart-axis {
+  stroke: rgba(148, 163, 184, 0.3);
+  stroke-width: 1;
+}
+
+.tools__chart-line {
+  fill: none;
+  stroke-width: 2;
+}
+
+.tools__chart-line--gh {
+  stroke: rgba(248, 113, 113, 0.9);
+}
+
+.tools__chart-line--nimbus {
+  stroke: rgba(34, 197, 94, 0.9);
+}
+
+.tools__chart-legend {
+  display: flex;
+  gap: 1rem;
+}
+
+.tools__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  color: rgba(226, 232, 240, 0.85);
+}
+
+.tools__legend-swatch {
+  display: inline-block;
+  width: 18px;
+  height: 3px;
+  border-radius: 999px;
+}
+
+.tools__legend-swatch.tools__chart-line--gh {
+  background: rgba(248, 113, 113, 0.9);
+}
+
+.tools__legend-swatch.tools__chart-line--nimbus {
+  background: rgba(34, 197, 94, 0.9);
+}
+
 .tools__next {
   margin: 0;
   padding-left: 1.2rem;
@@ -92,3 +164,7 @@
   border-radius: 0.3rem;
   font-size: 0.8rem;
 }
+
+.tools__empty {
+  color: rgba(148, 163, 184, 0.75);
+}

web/src/pages/ToolsPage.tsx

@@ -20,6 +20,12 @@ interface RoiResult {
   breakevenLabel: string;
 }
 
+interface CostPoint {
+  runsPerDay: number;
+  ghMonthly: number;
+  nimbusMonthly: number;
+}
+
 const DEFAULT_INPUTS: RoiInputs = {
   runsPerDay: 180,
   avgRuntimeMins: 12,
@@ -65,6 +71,19 @@ export function ToolsPage() {
     };
   }, [inputs]);
 
+  const series = useMemo<CostPoint[]>(() => {
+    const points: CostPoint[] = [];
+    const maxRuns = Math.max(inputs.runsPerDay * 1.5, 60);
+    const step = Math.max(Math.round(maxRuns / 10), 10);
+    for (let runs = 0; runs <= maxRuns; runs += step) {
+      const minutesPerDay = runs * inputs.avgRuntimeMins;
+      const ghMonthly = minutesPerDay * inputs.ghMinuteCost * 30;
+      const nimbusMonthly = (minutesPerDay * inputs.nimbusMinuteCost + (minutesPerDay / 60) * inputs.hardwareCostPerHour) * 30;
+      points.push({ runsPerDay: runs, ghMonthly, nimbusMonthly });
+    }
+    return points;
+  }, [inputs]);
+
   const handleChange = (field: keyof RoiInputs) => (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = Number(event.target.value);
     setInputs((prev) => ({
@@ -73,6 +92,23 @@ export function ToolsPage() {
     }));
   };
 
+  const handleDownloadCsv = () => {
+    const rows = [
+      ["runs_per_day", "gh_monthly_cost", "nimbus_monthly_cost"],
+      ...series.map((point) => [point.runsPerDay.toFixed(0), point.ghMonthly.toFixed(2), point.nimbusMonthly.toFixed(2)]),
+    ];
+    const csv = rows.map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = "nimbus-roi.csv";
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(url);
+  };
+
   return (
     <div className="tools__container">
       <header className="tools__header">
@@ -127,6 +163,16 @@ export function ToolsPage() {
         </div>
       </section>
 
+      <section className="tools__section">
+        <div className="tools__chart-header">
+          <h2>Cost comparison</h2>
+          <button type="button" onClick={handleDownloadCsv} className="tools__download">
+            Download CSV
+          </button>
+        </div>
+        <CostChart points={series} />
+      </section>
+
       <section className="tools__section">
         <h2>Next steps</h2>
         <ul className="tools__next">
@@ -153,3 +199,53 @@ function ResultCard({ label, value, emphasize }: { label: string; value: string;
     </article>
   );
 }
+
+function CostChart({ points }: { points: CostPoint[] }) {
+  if (points.length === 0) {
+    return <p className="tools__empty">No data.</p>;
+  }
+
+  const width = 600;
+  const height = 240;
+  const padding = 40;
+  const maxCost = Math.max(...points.map((p) => Math.max(p.ghMonthly, p.nimbusMonthly)), 1);
+  const maxRuns = Math.max(...points.map((p) => p.runsPerDay), 1);
+
+  const scaleX = (runs: number) => padding + (runs / maxRuns) * (width - padding * 2);
+  const scaleY = (cost: number) => height - padding - (cost / maxCost) * (height - padding * 2);
+
+  const toPath = (selector: (point: CostPoint) => number) =>
+    points
+      .map((point, index) => {
+        const prefix = index === 0 ? "M" : "L";
+        return `${prefix}${scaleX(point.runsPerDay)},${scaleY(selector(point))}`;
+      })
+      .join(" ");
+
+  return (
+    <svg
+      className="tools__chart"
+      viewBox={`0 0 ${width} ${height}`}
+      role="img"
+      aria-label="Monthly cost comparison between GitHub Actions and Nimbus"
+    >
+      <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} className="tools__chart-axis" />
+      <line x1={padding} y1={padding} x2={padding} y2={height - padding} className="tools__chart-axis" />
+      <path d={toPath((p) => p.ghMonthly)} className="tools__chart-line tools__chart-line--gh" />
+      <path d={toPath((p) => p.nimbusMonthly)} className="tools__chart-line tools__chart-line--nimbus" />
+      <g className="tools__chart-legend" transform={`translate(${padding},${padding - 16})`}>
+        <LegendSwatch className="tools__chart-line--gh" label="GitHub Actions" />
+        <LegendSwatch className="tools__chart-line--nimbus" label="Nimbus" />
+      </g>
+    </svg>
+  );
+}
+
+function LegendSwatch({ className, label }: { className: string; label: string }) {
+  return (
+    <span className="tools__legend-item">
+      <span className={`tools__legend-swatch ${className}`} />
+      {label}
+    </span>
+  );
+}

web/src/pages/__tests__/ToolsPage.test.tsx

@@ -16,6 +16,8 @@ describe('ToolsPage', () => {
 
     expect(screen.getByText('Tools & ROI')).toBeInTheDocument();
     expect(screen.getByText(/GitHub Actions monthly cost/i)).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: /Monthly cost comparison/i })).toBeInTheDocument();
+    expect(screen.getByText(/Download CSV/i)).toBeInTheDocument();
   });
 
   it('updates calculations when inputs change', () => {