Rebuild company overview analysis page

2026-03-12 20:39:30 -04:00
parent b9a1d8ba40
commit ba385586bc
29 changed files with 2040 additions and 888 deletions
--- a/components/analysis/price-history-card.tsx
+++ b/components/analysis/price-history-card.tsx
@@ -0,0 +1,119 @@
+'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';
+
+type PriceHistoryCardProps = {
+  loading: boolean;
+  priceHistory: Array<{ date: string; close: number }>;
+  quote: number;
+};
+
+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');
+}
+
+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
+    : null;
+
+  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)}`}
+                  />
+                  <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>
+          </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]'}`}>
+              {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]'}`}>
+              {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'}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Panel>
+  );
+}