WIP main worktree changes before merge

components/analysis/price-history-card.tsx

@@ -1,120 +1,127 @@
 'use client';
 
 import { format } from 'date-fns';
-import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import { Panel } from '@/components/ui/panel';
 import { formatCurrency } from '@/lib/format';
+import { InteractivePriceChart } from '@/components/charts/interactive-price-chart';
+import type { DataSeries, Holding } from '@/lib/types';
 
 type PriceHistoryCardProps = {
   loading: boolean;
   priceHistory: Array<{ date: string; close: number }>;
+  benchmarkHistory: Array<{ date: string; close: number }>;
   quote: number;
+  position: Holding | null;
 };
 
-const CHART_TEXT = '#f3f5f7';
-const CHART_MUTED = '#a1a9b3';
-const CHART_GRID = 'rgba(196, 202, 211, 0.18)';
-const CHART_TOOLTIP_BG = 'rgba(31, 34, 39, 0.96)';
-const CHART_TOOLTIP_BORDER = 'rgba(220, 226, 234, 0.24)';
-
-function formatShortDate(value: string) {
-  const parsed = new Date(value);
-  return Number.isNaN(parsed.getTime()) ? value : format(parsed, 'MMM yy');
-}
-
 function formatLongDate(value: string) {
   const parsed = new Date(value);
   return Number.isNaN(parsed.getTime()) ? value : format(parsed, 'MMM dd, yyyy');
 }
 
+function asFiniteNumber(value: string | number | null | undefined) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  const parsed = typeof value === 'number' ? value : Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
 export function PriceHistoryCard(props: PriceHistoryCardProps) {
-  const series = props.priceHistory.map((point) => ({
-    ...point,
-    label: formatShortDate(point.date)
-  }));
-  const firstPoint = props.priceHistory[0] ?? null;
-  const lastPoint = props.priceHistory[props.priceHistory.length - 1] ?? null;
-  const change = firstPoint && lastPoint ? lastPoint.close - firstPoint.close : null;
-  const changePct = firstPoint && lastPoint && firstPoint.close !== 0
-    ? ((lastPoint.close - firstPoint.close) / firstPoint.close) * 100
+  const firstPoint = props.priceHistory[0];
+  const lastPoint = props.priceHistory[props.priceHistory.length - 1];
+  const inPortfolio = props.position !== null;
+
+  const defaultChange = firstPoint && lastPoint ? lastPoint.close - firstPoint.close : null;
+  const defaultChangePct = firstPoint && firstPoint.close > 0 && defaultChange !== null
+    ? (defaultChange / firstPoint.close) * 100
     : null;
+  const holdingChange = asFiniteNumber(props.position?.gain_loss);
+  const holdingChangePct = asFiniteNumber(props.position?.gain_loss_pct);
+
+  const change = inPortfolio ? holdingChange : defaultChange;
+  const changePct = inPortfolio ? holdingChangePct : defaultChangePct;
+  const rangeLabel = inPortfolio ? 'Holding return' : '1Y return';
+  const changeLabel = inPortfolio ? 'Holding P/L' : '1Y change';
+  const dateRange = inPortfolio
+    ? props.position?.created_at && (props.position.last_price_at ?? lastPoint?.date)
+      ? `${formatLongDate(props.position.created_at)} to ${formatLongDate(props.position.last_price_at ?? lastPoint?.date ?? '')}`
+      : 'No holding period available'
+    : firstPoint && lastPoint
+      ? `${formatLongDate(firstPoint.date)} to ${formatLongDate(lastPoint.date)}`
+      : 'No comparison range';
+  const statusToneClass = inPortfolio ? 'text-[#96f5bf]' : 'text-[color:var(--terminal-bright)]';
+  const performanceToneClass = change !== null && change < 0 ? 'text-[#ff9f9f]' : 'text-[#96f5bf]';
+
+  const chartData = props.priceHistory.map(point => ({
+    date: point.date,
+    price: point.close
+  }));
+  const comparisonSeries: DataSeries[] = [
+    {
+      id: 'stock',
+      label: 'Stock',
+      data: chartData,
+      color: '#96f5bf',
+      type: 'line'
+    },
+    {
+      id: 'sp500',
+      label: 'S&P 500',
+      data: props.benchmarkHistory.map((point) => ({
+        date: point.date,
+        price: point.close
+      })),
+      color: '#8ba0b8',
+      type: 'line'
+    }
+  ];
+
+  const helperText = Number.isFinite(props.quote)
+    ? `Spot price ${formatCurrency(props.quote)}`
+    : 'Spot price unavailable';
 
   return (
-    <Panel
-      title="Price chart"
-      subtitle="One-year weekly close with current spot price and trailing move."
-      className="h-full pt-2"
-    >
-      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_220px]">
-        <div>
-          {props.loading ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">Loading price history...</p>
-          ) : series.length === 0 ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No price history available.</p>
-          ) : (
-            <div className="h-[320px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <LineChart data={series}>
-                  <CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
-                  <XAxis
-                    dataKey="label"
-                    minTickGap={32}
-                    stroke={CHART_MUTED}
-                    fontSize={12}
-                    axisLine={{ stroke: CHART_MUTED }}
-                    tickLine={{ stroke: CHART_MUTED }}
-                    tick={{ fill: CHART_MUTED }}
-                  />
-                  <YAxis
-                    stroke={CHART_MUTED}
-                    fontSize={12}
-                    axisLine={{ stroke: CHART_MUTED }}
-                    tickLine={{ stroke: CHART_MUTED }}
-                    tick={{ fill: CHART_MUTED }}
-                    tickFormatter={(value: number) => `$${value.toFixed(0)}`}
-                    domain={[(dataMin) => dataMin * 0.05, (dataMax) => dataMax * 1.05]}
-                    allowDataOverflow
-                  />
-                  <Tooltip
-                    formatter={(value) => formatCurrency(Array.isArray(value) ? value[0] : value)}
-                    labelFormatter={(value) => String(value)}
-                    contentStyle={{
-                      backgroundColor: CHART_TOOLTIP_BG,
-                      border: `1px solid ${CHART_TOOLTIP_BORDER}`,
-                      borderRadius: '0.75rem'
-                    }}
-                    labelStyle={{ color: CHART_TEXT }}
-                    itemStyle={{ color: CHART_TEXT }}
-                    cursor={{ stroke: 'rgba(220, 226, 234, 0.28)', strokeWidth: 1 }}
-                  />
-                  <Line type="monotone" dataKey="close" stroke="#d9dee5" strokeWidth={2.5} dot={false} />
-                </LineChart>
-              </ResponsiveContainer>
-            </div>
-          )}
-        </div>
-
-        <div className="grid gap-0 border-t border-[color:var(--line-weak)] sm:grid-cols-3 xl:grid-cols-1 xl:border-l">
-          <div className="border-b border-[color:var(--line-weak)] px-4 py-4 xl:border-b xl:border-l-0">
-            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">Current price</p>
-            <p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(props.quote)}</p>
+    <Panel title="Price chart" subtitle="Interactive chart with historical data">
+      <div className="space-y-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <div className="border-b border-[color:var(--line-weak)] px-4 py-4 sm:border-b-0 sm:border-r">
+            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">Portfolio status</p>
+            <p className={`mt-2 text-2xl font-semibold ${statusToneClass}`}>{inPortfolio ? 'In portfolio' : 'Not in portfolio'}</p>
+            <p className="mt-2 text-xs text-[color:var(--terminal-muted)]">{helperText}</p>
           </div>
-          <div className="border-b border-[color:var(--line-weak)] px-4 py-4 xl:border-b">
-            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">1Y change</p>
-            <p className={`mt-2 text-2xl font-semibold ${change !== null && change < 0 ? 'text-[#ff9f9f]' : 'text-[#96f5bf]'}`}>
+          <div className="border-b border-[color:var(--line-weak)] px-4 py-4 sm:border-b-0 sm:border-r">
+            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">{changeLabel}</p>
+            <p className={`mt-2 text-2xl font-semibold ${performanceToneClass}`}>
               {change === null ? 'n/a' : formatCurrency(change)}
             </p>
           </div>
           <div className="px-4 py-4">
-            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">1Y return</p>
-            <p className={`mt-2 text-2xl font-semibold ${changePct !== null && changePct < 0 ? 'text-[#ff9f9f]' : 'text-[#96f5bf]'}`}>
+            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">{rangeLabel}</p>
+            <p className={`mt-2 text-2xl font-semibold ${performanceToneClass}`}>
               {changePct === null ? 'n/a' : `${changePct.toFixed(2)}%`}
             </p>
             <p className="mt-2 text-xs text-[color:var(--terminal-muted)]">
-              {firstPoint && lastPoint ? `${formatLongDate(firstPoint.date)} to ${formatLongDate(lastPoint.date)}` : 'No comparison range'}
+              {dateRange}
             </p>
           </div>
         </div>
+
+        <InteractivePriceChart
+          data={chartData}
+          dataSeries={comparisonSeries}
+          defaultChartType="line"
+          defaultTimeRange="1Y"
+          showVolume={false}
+          showToolbar={true}
+          height={320}
+          loading={props.loading}
+          formatters={{
+            price: formatCurrency,
+            date: (date: string) => format(new Date(date), 'MMM dd, yyyy')
+          }}
+        />
       </div>
     </Panel>
   );