@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/cost/CostTrendChart.tsx

@@ -1,11 +1,8 @@
 import { useState, useMemo, useRef, useCallback } from 'react'
 import { clsx } from 'clsx'
 import { Loader2, TrendingUp } from 'lucide-react'
-import {
-  useOpenCostTrend,
-  type CostTimeRange,
-  type OpenCostTrendSeries,
-} from '../../api/client'
+import { useOpenCostTrend, type CostTimeRange, type OpenCostTrendSeries } from '../../api/client'
+import { formatCostAxis, formatCostPerHour } from './format'
 
 const SERIES_COLORS = [
   '#3b82f6', // blue-500
@@ -34,7 +31,7 @@ export function CostTrendChart() {
       <div className="rounded-lg border border-theme-border bg-theme-surface/50 p-4">
         <div className="flex items-center justify-center h-[200px] text-theme-text-tertiary">
           <Loader2 className="w-5 h-5 animate-spin mr-2" />
-          Loading cost trend...
+          Loading cost trend…
         </div>
       </div>
     )
@@ -49,24 +46,12 @@ export function CostTrendChart() {
       <div className="flex items-center justify-between px-4 py-2.5 border-b border-theme-border">
         <div className="flex items-center gap-2">
           <TrendingUp className="w-4 h-4 text-theme-text-tertiary" />
-          <span className="text-xs font-medium text-theme-text-secondary">Cost Trend</span>
-        </div>
-        <div className="flex items-center gap-1">
-          {TIME_RANGES.map(tr => (
-            <button
-              key={tr.value}
-              onClick={() => setTimeRange(tr.value)}
-              className={clsx(
-                'px-2 py-1 text-xs rounded-md transition-colors',
-                timeRange === tr.value
-                  ? 'bg-skyhook-600/20 text-blue-400 font-medium'
-                  : 'text-theme-text-quaternary hover:text-theme-text-tertiary'
-              )}
-            >
-              {tr.label}
-            </button>
-          ))}
+          <div>
+            <div className="text-xs font-medium text-theme-text-secondary">Cost rate trend</div>
+            <div className="text-[10px] text-theme-text-tertiary">Historical OpenCost allocation rate ($/hr)</div>
+          </div>
         </div>
+        <CostTimeRangeSelector value={timeRange} onChange={setTimeRange} />
       </div>
       <div className="p-4">
         <StackedAreaChart series={data.series} />
@@ -76,7 +61,7 @@ export function CostTrendChart() {
   )
 }
 
-function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
+export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
   const svgRef = useRef<SVGSVGElement>(null)
   const [hoverX, setHoverX] = useState<number | null>(null)
 
@@ -106,7 +91,7 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
     const minTs = timestamps[0]
     const maxTs = timestamps[timestamps.length - 1]
 
-    const seriesLookups = series.map(s => {
+    const seriesLookups = series.map((s) => {
       const map = new Map<number, number>()
       for (const dp of s.dataPoints) {
         map.set(dp.timestamp, dp.value)
@@ -150,21 +135,47 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
 
     // Build stacked area paths
     const paths = series.map((_, si) => {
-      const topPoints = timestamps.map((ts, ti) => ({ x: toX(ts), y: toY(stacked[si][ti]) }))
-      const bottomPoints = si > 0
-        ? timestamps.map((ts, ti) => ({ x: toX(ts), y: toY(stacked[si - 1][ti]) }))
-        : timestamps.map(ts => ({ x: toX(ts), y: toY(0) }))
+      const topPoints = timestamps.map((ts, ti) => ({
+        x: toX(ts),
+        y: toY(stacked[si][ti]),
+      }))
+      const bottomPoints =
+        si > 0
+          ? timestamps.map((ts, ti) => ({
+              x: toX(ts),
+              y: toY(stacked[si - 1][ti]),
+            }))
+          : timestamps.map((ts) => ({ x: toX(ts), y: toY(0) }))
 
       const topPath = topPoints.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ')
-      const bottomPath = [...bottomPoints].reverse().map((p, i) => `${i === 0 ? 'L' : 'L'}${p.x},${p.y}`).join(' ')
+      const bottomPath = [...bottomPoints]
+        .reverse()
+        .map((p, i) => `${i === 0 ? 'L' : 'L'}${p.x},${p.y}`)
+        .join(' ')
       const areaPath = topPath + ' ' + bottomPath + ' Z'
       const linePath = topPoints.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ')
 
-      return { areaPath, linePath, color: SERIES_COLORS[si % SERIES_COLORS.length] }
+      return {
+        areaPath,
+        linePath,
+        color: SERIES_COLORS[si % SERIES_COLORS.length],
+      }
     })
 
-    return { timestamps, stacked, minTs, maxTs, yMax, seriesLookups, toX, toY, yTicks, xTicks, paths }
-  }, [series])
+    return {
+      timestamps,
+      stacked,
+      minTs,
+      maxTs,
+      yMax,
+      seriesLookups,
+      toX,
+      toY,
+      yTicks,
+      xTicks,
+      paths,
+    }
+  }, [series, plotHeight, plotWidth])
 
   // Hover data — depends on hoverX + chartData, must be a separate hook (called unconditionally)
   const hoverData = useMemo(() => {
@@ -189,11 +200,15 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
     const points = series.map((s, si) => {
       const val = seriesLookups[si].get(closestTs) ?? 0
       total += val
-      return { namespace: s.namespace, value: val, color: SERIES_COLORS[si % SERIES_COLORS.length] }
+      return {
+        namespace: s.namespace,
+        value: val,
+        color: SERIES_COLORS[si % SERIES_COLORS.length],
+      }
     })
 
     return { ts: closestTs, x: toX(closestTs), total, points }
-  }, [hoverX, chartData, series])
+  }, [hoverX, chartData, series, plotWidth])
 
   const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
     const svg = svgRef.current
@@ -210,18 +225,15 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
 
   return (
     <div className="relative">
-      <svg
-        ref={svgRef}
-        viewBox={`0 0 ${width} ${height}`}
-        className="w-full"
-        preserveAspectRatio="xMidYMid meet"
-      >
+      <svg ref={svgRef} viewBox={`0 0 ${width} ${height}`} className="w-full" preserveAspectRatio="xMidYMid meet">
         {/* Grid lines */}
         {yTicks.map((tick, i) => (
           <line
             key={`grid-${i}`}
-            x1={marginLeft} y1={tick.y}
-            x2={width - marginRight} y2={tick.y}
+            x1={marginLeft}
+            y1={tick.y}
+            x2={width - marginRight}
+            y2={tick.y}
             stroke="currentColor"
             className="text-theme-border/30"
             strokeWidth="1"
@@ -250,7 +262,7 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
             key={`xlabel-${i}`}
             x={tick.x}
             y={height - 4}
-            textAnchor="middle"
+            textAnchor={i === 0 ? 'start' : i === xTicks.length - 1 ? 'end' : 'middle'}
             className="fill-theme-text-secondary"
             fontSize="10"
             fontFamily="ui-monospace, monospace"
@@ -261,11 +273,7 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
 
         {/* Stacked area fills (render bottom to top) */}
         {paths.map((p, i) => (
-          <path
-            key={`area-${i}`}
-            d={p.areaPath}
-            fill={p.color + '33'}
-          />
+          <path key={`area-${i}`} d={p.areaPath} fill={p.color + '33'} />
         ))}
 
         {/* Lines (top edges of each area) */}
@@ -283,8 +291,10 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
         {/* Hover crosshair */}
         {hoverData && (
           <line
-            x1={hoverData.x} y1={marginTop}
-            x2={hoverData.x} y2={marginTop + plotHeight}
+            x1={hoverData.x}
+            y1={marginTop}
+            x2={hoverData.x}
+            y2={marginTop + plotHeight}
             stroke="currentColor"
             className="text-theme-text-tertiary"
             strokeWidth="1"
@@ -294,8 +304,10 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
 
         {/* Mouse event overlay */}
         <rect
-          x={marginLeft} y={marginTop}
-          width={plotWidth} height={plotHeight}
+          x={marginLeft}
+          y={marginTop}
+          width={plotWidth}
+          height={plotHeight}
           fill="transparent"
           style={{ cursor: 'crosshair' }}
           onMouseMove={handleMouseMove}
@@ -315,28 +327,30 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
           <div className="bg-theme-surface border border-theme-border rounded-lg shadow-lg px-3 py-2 text-xs whitespace-nowrap">
             <div className="text-theme-text-tertiary mb-1.5 font-mono">
               {new Date(hoverData.ts * 1000).toLocaleString([], {
-                month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
               })}
             </div>
             {hoverData.points
-              .filter(p => p.value > 0)
+              .filter((p) => p.value > 0)
               .sort((a, b) => b.value - a.value)
               .map((p, i) => (
                 <div key={i} className="flex items-center gap-2 py-0.5">
-                  <div
-                    className="w-2 h-2 rounded-full shrink-0"
-                    style={{ backgroundColor: p.color }}
-                  />
+                  <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: p.color }} />
                   <span className="text-theme-text-secondary">{p.namespace}</span>
                   <span className="text-theme-text-primary font-semibold ml-auto pl-3 tabular-nums">
                     {formatCostTooltip(p.value)}
                   </span>
                 </div>
               ))}
-            <div className="border-t border-theme-border/50 mt-1 pt-1 flex justify-between text-theme-text-primary font-semibold">
-              <span>Total</span>
-              <span className="tabular-nums">{formatCostTooltip(hoverData.total)}</span>
-            </div>
+            {series.length > 1 && (
+              <div className="border-t border-theme-border/50 mt-1 pt-1 flex justify-between text-theme-text-primary font-semibold">
+                <span>Total</span>
+                <span className="tabular-nums">{formatCostTooltip(hoverData.total)}</span>
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -344,7 +358,7 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
   )
 }
 
-function ChartLegend({ series }: { series: OpenCostTrendSeries[] }) {
+export function ChartLegend({ series }: { series: OpenCostTrendSeries[] }) {
   return (
     <div className="flex flex-wrap gap-x-4 gap-y-1 mt-2">
       {series.map((s, i) => (
@@ -360,20 +374,37 @@ function ChartLegend({ series }: { series: OpenCostTrendSeries[] }) {
   )
 }
 
-function formatCostAxis(value: number): string {
-  if (value >= 1000) return `$${(value / 1000).toFixed(0)}k`
-  if (value >= 1) return `$${value.toFixed(1)}`
-  if (value >= 0.01) return `$${value.toFixed(2)}`
-  if (value > 0) return `$${value.toFixed(3)}`
-  return '$0'
+export function CostTimeRangeSelector({
+  value,
+  onChange,
+}: {
+  value: CostTimeRange
+  onChange: (value: CostTimeRange) => void
+}) {
+  return (
+    <div className="flex items-center gap-1">
+      {TIME_RANGES.map((range) => (
+        <button
+          key={range.value}
+          type="button"
+          aria-pressed={value === range.value}
+          onClick={() => onChange(range.value)}
+          className={clsx(
+            'rounded-md px-2 py-1 text-xs transition-colors',
+            value === range.value
+              ? 'bg-accent-muted font-medium text-accent-text'
+              : 'text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary',
+          )}
+        >
+          {range.label}
+        </button>
+      ))}
+    </div>
+  )
 }
 
 function formatCostTooltip(value: number): string {
-  if (value >= 1000) return `$${(value / 1000).toFixed(1)}k/hr`
-  if (value >= 1) return `$${value.toFixed(2)}/hr`
-  if (value >= 0.01) return `$${value.toFixed(3)}/hr`
-  if (value > 0) return `$${value.toFixed(4)}/hr`
-  return '$0.00/hr'
+  return formatCostPerHour(value)
 }
 
 function formatTimestamp(unix: number): string {

package/src/components/cost/CostView.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { resourceKindForCostWorkload } from './CostView'
+
+describe('resourceKindForCostWorkload', () => {
+  it('does not link standalone aggregate rows as pods', () => {
+    expect(resourceKindForCostWorkload('standalone')).toBeNull()
+  })
+
+  it('keeps static pod rows linkable to their mirror pod', () => {
+    expect(resourceKindForCostWorkload('staticpod')).toBe('Pod')
+  })
+})