@tradejs/app 2.0.17 → 2.0.19

package/src/app/lib/strategyPerformance.ts

@@ -0,0 +1,387 @@
+export type EquityLog = ReadonlyArray<readonly [number, number]>;
+
+export type TradingSession = 'Asia' | 'Europe' | 'US';
+
+export interface StrategyTradePoint {
+  index: number;
+  timestamp: number;
+  pnl: number;
+  equity: number;
+  hour: number;
+  session: TradingSession;
+}
+
+export interface DrawdownPoint {
+  timestamp: number;
+  drawdownPercent: number;
+}
+
+export interface RollingPerformancePoint {
+  index: number;
+  winRate: number;
+  pnl: number;
+}
+
+export interface DistributionBin {
+  id: string;
+  min: number;
+  max: number;
+  count: number;
+}
+
+export interface SessionPnlStat {
+  session: TradingSession;
+  pnl: number;
+  orders: number;
+}
+
+export interface HourlyPnlStat {
+  hour: number;
+  pnl: number;
+  orders: number;
+}
+
+export interface MonthlyStat {
+  id: string;
+  year: number;
+  monthIndex: number;
+  monthLabel: string;
+  orders: number;
+  wins: number;
+  pnl: number;
+}
+
+export interface YearlyMonthlyStats {
+  year: number;
+  months: MonthlyStat[];
+}
+
+export interface QuarterlyMonthlyStats {
+  label: string;
+  monthIndexes: readonly number[];
+  months: (MonthlyStat | null)[];
+  hasData: boolean;
+}
+
+export interface StrategyPerformanceViewModel {
+  monthlyStats: YearlyMonthlyStats[];
+  tradePoints: StrategyTradePoint[];
+  drawdownPoints: DrawdownPoint[];
+  rollingPerformancePoints: RollingPerformancePoint[];
+  pnlDistributionBins: DistributionBin[];
+  sessionPnlStats: SessionPnlStat[];
+  hourlyPnlStats: HourlyPnlStat[];
+}
+
+const resolveTradingSession = (hour: number): TradingSession => {
+  if (hour < 8) return 'Asia';
+  if (hour < 16) return 'Europe';
+  return 'US';
+};
+
+export const getEquityStepPnl = (orderLog: EquityLog, index: number) => {
+  const current = orderLog[index];
+  const previous = orderLog[index - 1];
+  if (!current || !previous) return null;
+
+  const pnl = current[1] - previous[1];
+  return Number.isFinite(pnl) ? pnl : null;
+};
+
+const calculateMaxPnlStreak = (
+  orderLog: EquityLog,
+  isStreakPnl: (pnl: number) => boolean,
+) => {
+  let currentStreak = 0;
+  let maxStreak = 0;
+
+  for (let index = 1; index < orderLog.length; index += 1) {
+    const pnl = getEquityStepPnl(orderLog, index);
+    if (pnl == null) continue;
+
+    if (isStreakPnl(pnl)) {
+      currentStreak += 1;
+      maxStreak = Math.max(maxStreak, currentStreak);
+    } else {
+      currentStreak = 0;
+    }
+  }
+
+  return maxStreak;
+};
+
+export const calculateMaxGrossStreak = (orderLog: EquityLog) =>
+  calculateMaxPnlStreak(orderLog, (pnl) => pnl > 0);
+
+export const calculateMaxLossStreak = (orderLog: EquityLog) =>
+  calculateMaxPnlStreak(orderLog, (pnl) => pnl < 0);
+
+export const calculateMaxDrawdownValue = (orderLog: EquityLog) => {
+  if (!orderLog.length) return null;
+
+  let peak = orderLog[0]?.[1] ?? 0;
+  let maxDrawdownPercent = 0;
+
+  for (const [, amount] of orderLog) {
+    if (!Number.isFinite(amount)) continue;
+
+    peak = Math.max(peak, amount);
+    if (peak <= 0) continue;
+
+    maxDrawdownPercent = Math.max(
+      maxDrawdownPercent,
+      ((peak - amount) / peak) * 100,
+    );
+  }
+
+  return maxDrawdownPercent;
+};
+
+export const formatMaxDrawdownPercent = (orderLog: EquityLog) => {
+  const value = calculateMaxDrawdownValue(orderLog);
+  return value == null ? null : `${value.toFixed(1)}%`;
+};
+
+export const buildStrategyTradePoints = (
+  orderLog: EquityLog,
+): StrategyTradePoint[] => {
+  const points: StrategyTradePoint[] = [];
+
+  for (let index = 1; index < orderLog.length; index += 1) {
+    const current = orderLog[index];
+    const previous = orderLog[index - 1];
+    if (!current || !previous) continue;
+
+    const [timestamp, equity] = current;
+    const pnl = equity - previous[1];
+    if (
+      !Number.isFinite(timestamp) ||
+      !Number.isFinite(equity) ||
+      !Number.isFinite(pnl)
+    ) {
+      continue;
+    }
+
+    const hour = new Date(timestamp).getUTCHours();
+    points.push({
+      index,
+      timestamp,
+      pnl,
+      equity,
+      hour,
+      session: resolveTradingSession(hour),
+    });
+  }
+
+  return points;
+};
+
+export const buildDrawdownPoints = (orderLog: EquityLog): DrawdownPoint[] => {
+  let peak = orderLog[0]?.[1] ?? 0;
+
+  return orderLog
+    .map(([timestamp, equity]) => {
+      if (!Number.isFinite(timestamp) || !Number.isFinite(equity)) return null;
+
+      peak = Math.max(peak, equity);
+      return {
+        timestamp,
+        drawdownPercent: peak > 0 ? ((peak - equity) / peak) * 100 : 0,
+      };
+    })
+    .filter((point): point is DrawdownPoint => point != null);
+};
+
+export const buildRollingPerformance = (
+  trades: StrategyTradePoint[],
+  windowSize = 50,
+): RollingPerformancePoint[] =>
+  trades.map((trade, index) => {
+    const windowTrades = trades.slice(
+      Math.max(0, index - windowSize + 1),
+      index + 1,
+    );
+    const wins = windowTrades.filter((item) => item.pnl > 0).length;
+
+    return {
+      index: trade.index,
+      winRate: windowTrades.length > 0 ? (wins / windowTrades.length) * 100 : 0,
+      pnl: windowTrades.reduce((sum, item) => sum + item.pnl, 0),
+    };
+  });
+
+export const buildPnlDistribution = (
+  trades: StrategyTradePoint[],
+  binCount = 12,
+): DistributionBin[] => {
+  if (!trades.length) return [];
+
+  const pnlValues = trades.map((trade) => trade.pnl);
+  const min = Math.min(...pnlValues);
+  const max = Math.max(...pnlValues);
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return [];
+
+  if (min === max) {
+    return [{ id: `${min}:${max}`, min, max, count: trades.length }];
+  }
+
+  const step = (max - min) / binCount;
+  const bins = Array.from({ length: binCount }, (_, index) => ({
+    id: String(index),
+    min: min + step * index,
+    max: index === binCount - 1 ? max : min + step * (index + 1),
+    count: 0,
+  }));
+
+  for (const pnl of pnlValues) {
+    const rawIndex = Math.floor((pnl - min) / step);
+    const bin = bins[Math.max(0, Math.min(binCount - 1, rawIndex))];
+    if (bin) bin.count += 1;
+  }
+
+  return bins;
+};
+
+export const buildSessionPnlStats = (
+  trades: StrategyTradePoint[],
+): SessionPnlStat[] => {
+  const stats = new Map<TradingSession, SessionPnlStat>(
+    (['Asia', 'Europe', 'US'] as const).map((session) => [
+      session,
+      { session, pnl: 0, orders: 0 },
+    ]),
+  );
+
+  for (const trade of trades) {
+    const stat = stats.get(trade.session);
+    if (!stat) continue;
+    stat.pnl += trade.pnl;
+    stat.orders += 1;
+  }
+
+  return [...stats.values()];
+};
+
+export const buildHourlyPnlStats = (
+  trades: StrategyTradePoint[],
+): HourlyPnlStat[] => {
+  const stats = Array.from({ length: 24 }, (_, hour) => ({
+    hour,
+    pnl: 0,
+    orders: 0,
+  }));
+
+  for (const trade of trades) {
+    const stat = stats[trade.hour];
+    if (!stat) continue;
+    stat.pnl += trade.pnl;
+    stat.orders += 1;
+  }
+
+  return stats;
+};
+
+const getMonthLabel = (monthIndex: number) =>
+  new Date(Date.UTC(2026, monthIndex - 1, 1)).toLocaleString('en-US', {
+    month: 'short',
+  });
+
+const monthQuarters = [
+  { label: 'Q1', months: [1, 2, 3] },
+  { label: 'Q2', months: [4, 5, 6] },
+  { label: 'Q3', months: [7, 8, 9] },
+  { label: 'Q4', months: [10, 11, 12] },
+] as const;
+
+export const buildQuarterlyMonthlyStats = (
+  months: MonthlyStat[],
+): QuarterlyMonthlyStats[] => {
+  const byMonth = new Map(months.map((month) => [month.monthIndex, month]));
+
+  return monthQuarters
+    .map((quarter) => {
+      const quarterMonths = quarter.months.map(
+        (monthIndex) => byMonth.get(monthIndex) ?? null,
+      );
+
+      return {
+        label: quarter.label,
+        monthIndexes: quarter.months,
+        months: quarterMonths,
+        hasData: quarterMonths.some((month) => month != null),
+      };
+    })
+    .filter((quarter) => quarter.hasData);
+};
+
+export const buildMonthlyStats = (
+  orderLog: EquityLog,
+): YearlyMonthlyStats[] => {
+  const grouped = new Map<string, MonthlyStat>();
+
+  for (let index = 1; index < orderLog.length; index += 1) {
+    const current = orderLog[index];
+    const previous = orderLog[index - 1];
+    if (!current || !previous) continue;
+
+    const [timestamp, amount] = current;
+    const previousAmount = previous[1];
+    if (
+      !Number.isFinite(timestamp) ||
+      !Number.isFinite(amount) ||
+      !Number.isFinite(previousAmount)
+    ) {
+      continue;
+    }
+
+    const date = new Date(timestamp);
+    const year = date.getUTCFullYear();
+    const monthIndex = date.getUTCMonth() + 1;
+    const id = `${year}-${String(monthIndex).padStart(2, '0')}`;
+    const pnl = amount - previousAmount;
+    const existing = grouped.get(id) ?? {
+      id,
+      year,
+      monthIndex,
+      monthLabel: getMonthLabel(monthIndex),
+      orders: 0,
+      wins: 0,
+      pnl: 0,
+    };
+
+    existing.orders += 1;
+    existing.wins += pnl > 0 ? 1 : 0;
+    existing.pnl += pnl;
+    grouped.set(id, existing);
+  }
+
+  const yearlyStats = new Map<number, MonthlyStat[]>();
+  for (const month of [...grouped.values()].sort(
+    (left, right) =>
+      left.year - right.year || left.monthIndex - right.monthIndex,
+  )) {
+    const months = yearlyStats.get(month.year) ?? [];
+    months.push(month);
+    yearlyStats.set(month.year, months);
+  }
+
+  return [...yearlyStats.entries()]
+    .sort(([leftYear], [rightYear]) => leftYear - rightYear)
+    .map(([year, months]) => ({ year, months }));
+};
+
+export const buildStrategyPerformanceViewModel = (
+  orderLog: EquityLog,
+): StrategyPerformanceViewModel => {
+  const tradePoints = buildStrategyTradePoints(orderLog);
+
+  return {
+    monthlyStats: buildMonthlyStats(orderLog),
+    tradePoints,
+    drawdownPoints: buildDrawdownPoints(orderLog),
+    rollingPerformancePoints: buildRollingPerformance(tradePoints, 50),
+    pnlDistributionBins: buildPnlDistribution(tradePoints),
+    sessionPnlStats: buildSessionPnlStats(tradePoints),
+    hourlyPnlStats: buildHourlyPnlStats(tradePoints),
+  };
+};

package/src/app/routes/dashboard/Dashboard.tsx

@@ -7,12 +7,8 @@ import { Box, Button, Flex, ClientOnly } from '@chakra-ui/react';
 import { useFilters, useTickers, useTestList } from '#store';
 import { Filters } from '#shared/Filters';
 import { MainChart } from '#app/components/Dashboard/MainChart';
-import {
-  Interval,
-  MarketUniverse,
-  OnChangeFilters,
-  Provider,
-} from '@tradejs/types';
+import { Interval, MarketUniverse, Provider } from '@tradejs/types';
+import type { OnChangeFilters } from '#app/types/ui';
 import {
   buildDashboardPath,
   parseDashboardPath as parseMarketDashboardPath,

package/src/app/routes/derivatives/derivativesViewModel.ts

@@ -0,0 +1,253 @@
+export type DerivativesInterval = '15m' | '1h';
+
+export type SummaryItem = {
+  symbol: string;
+  interval: DerivativesInterval;
+  points: number;
+  last_ts: string;
+  first_ts: string;
+  latest_open_interest: number | null;
+  first_open_interest: number | null;
+  oi_change: number | null;
+  oi_change_pct: number | null;
+  latest_funding_rate: number | null;
+  first_funding_rate: number | null;
+  funding_change: number | null;
+  sum_liq_long: number | null;
+  sum_liq_short: number | null;
+  sum_liq_total: number | null;
+};
+
+export type SummaryResponse = {
+  hours: number;
+  items: SummaryItem[];
+};
+
+export type DetailRow = {
+  symbol: string;
+  interval: DerivativesInterval;
+  ts: string;
+  open_interest: number | null;
+  funding_rate: number | null;
+  liq_long: number | null;
+  liq_short: number | null;
+  liq_total: number | null;
+};
+
+export type DetailResponse = {
+  rows: DetailRow[];
+  symbol: string;
+  interval: DerivativesInterval;
+};
+
+export type PriceRow = {
+  close: number;
+  timestamp: number;
+};
+
+export type PriceResponse = {
+  data?: PriceRow[];
+};
+
+export type SymbolMetrics = {
+  symbol: string;
+  lastTs: string | null;
+  currentOpenInterest: number | null;
+  oiChange: number | null;
+  oiChangePct: number | null;
+  currentFundingRate: number | null;
+  fundingChange: number | null;
+  sumLiqLong: number | null;
+  sumLiqShort: number | null;
+  sumLiqTotal: number | null;
+};
+
+export type DerivativesChartRow = {
+  timestamp: number;
+  openInterest: number;
+  funding: number;
+  longLiquidations: number;
+  shortLiquidations: number;
+};
+
+export type PriceChartRow = {
+  price: number;
+  timestamp: number;
+};
+
+type BiasTone = 'teal' | 'green' | 'red' | 'orange' | 'gray';
+
+export type MarketBias = {
+  label: string;
+  tone: BiasTone;
+};
+
+export const toFiniteNumber = (value: number | null | undefined) =>
+  typeof value === 'number' && Number.isFinite(value) ? value : null;
+
+export const mapRowsToChartRows = (rows: DetailRow[]): DerivativesChartRow[] =>
+  rows.map((row) => ({
+    timestamp: new Date(row.ts).getTime(),
+    openInterest: toFiniteNumber(row.open_interest) ?? 0,
+    funding: (toFiniteNumber(row.funding_rate) ?? 0) * 10_000,
+    longLiquidations: -(toFiniteNumber(row.liq_long) ?? 0),
+    shortLiquidations: toFiniteNumber(row.liq_short) ?? 0,
+  }));
+
+export const mapPriceRowsToChartRows = (rows: PriceRow[]): PriceChartRow[] =>
+  rows.map((row) => ({
+    price: toFiniteNumber(row.close) ?? 0,
+    timestamp: row.timestamp,
+  }));
+
+const getBias = (metrics: SymbolMetrics): MarketBias => {
+  const funding = toFiniteNumber(metrics.currentFundingRate) ?? 0;
+  const oiChangePct = toFiniteNumber(metrics.oiChangePct) ?? 0;
+  const longLiq = toFiniteNumber(metrics.sumLiqLong) ?? 0;
+  const shortLiq = toFiniteNumber(metrics.sumLiqShort) ?? 0;
+
+  if (shortLiq > longLiq * 1.35) {
+    return { label: 'Short squeeze', tone: 'green' };
+  }
+
+  if (longLiq > shortLiq * 1.35) {
+    return { label: 'Long flush', tone: 'red' };
+  }
+
+  if (oiChangePct > 1 && funding > 0) {
+    return { label: 'Crowded longs', tone: 'orange' };
+  }
+
+  if (oiChangePct > 1 && funding < 0) {
+    return { label: 'Crowded shorts', tone: 'teal' };
+  }
+
+  return { label: 'Balanced', tone: 'gray' };
+};
+
+const buildMetricsFromRows = (
+  symbol: string,
+  rows: DetailRow[],
+  summaryRow?: SummaryItem,
+): SymbolMetrics => {
+  if (!rows.length) {
+    return {
+      symbol,
+      lastTs: summaryRow?.last_ts ?? null,
+      currentOpenInterest: summaryRow?.latest_open_interest ?? null,
+      oiChange: summaryRow?.oi_change ?? null,
+      oiChangePct: summaryRow?.oi_change_pct ?? null,
+      currentFundingRate: summaryRow?.latest_funding_rate ?? null,
+      fundingChange: summaryRow?.funding_change ?? null,
+      sumLiqLong: summaryRow?.sum_liq_long ?? null,
+      sumLiqShort: summaryRow?.sum_liq_short ?? null,
+      sumLiqTotal: summaryRow?.sum_liq_total ?? null,
+    };
+  }
+
+  const first = rows[0];
+  const last = rows[rows.length - 1];
+  const firstOi = toFiniteNumber(first.open_interest);
+  const lastOi = toFiniteNumber(last.open_interest);
+  const oiChange = firstOi != null && lastOi != null ? lastOi - firstOi : null;
+  const oiChangePct =
+    oiChange != null && firstOi != null && Math.abs(firstOi) > 0
+      ? (oiChange / Math.abs(firstOi)) * 100
+      : null;
+  const firstFunding = toFiniteNumber(first.funding_rate);
+  const lastFunding = toFiniteNumber(last.funding_rate);
+  const fundingChange =
+    firstFunding != null && lastFunding != null
+      ? lastFunding - firstFunding
+      : null;
+
+  return rows.reduce<SymbolMetrics>(
+    (metrics, row) => ({
+      ...metrics,
+      sumLiqLong: (metrics.sumLiqLong ?? 0) + Number(row.liq_long || 0),
+      sumLiqShort: (metrics.sumLiqShort ?? 0) + Number(row.liq_short || 0),
+      sumLiqTotal: (metrics.sumLiqTotal ?? 0) + Number(row.liq_total || 0),
+    }),
+    {
+      symbol,
+      lastTs: last.ts,
+      currentOpenInterest: lastOi,
+      oiChange,
+      oiChangePct,
+      currentFundingRate: lastFunding,
+      fundingChange,
+      sumLiqLong: 0,
+      sumLiqShort: 0,
+      sumLiqTotal: 0,
+    },
+  );
+};
+
+export const buildDerivativesDashboardViewModel = ({
+  symbols,
+  selectedInterval,
+  summary,
+  detailsBySymbol,
+  pricesBySymbol,
+  summaryLoading,
+  detailLoading,
+  summaryError,
+  detailError,
+}: {
+  symbols: readonly string[];
+  selectedInterval: DerivativesInterval;
+  summary: SummaryResponse | null;
+  detailsBySymbol: Record<string, DetailRow[]>;
+  pricesBySymbol: Record<string, PriceRow[]>;
+  summaryLoading: boolean;
+  detailLoading: boolean;
+  summaryError: string;
+  detailError: string;
+}) => {
+  const filteredSummary = (summary?.items ?? []).filter(
+    (item) =>
+      item.interval === selectedInterval && symbols.includes(item.symbol),
+  );
+  const summaryBySymbol = Object.fromEntries(
+    filteredSummary.map((item) => [item.symbol, item]),
+  ) as Record<string, SummaryItem | undefined>;
+  const metricsBySymbol = Object.fromEntries(
+    symbols.map((symbol) => [
+      symbol,
+      buildMetricsFromRows(
+        symbol,
+        detailsBySymbol[symbol] ?? [],
+        summaryBySymbol[symbol],
+      ),
+    ]),
+  ) as Record<string, SymbolMetrics>;
+  const chartDataBySymbol = Object.fromEntries(
+    symbols.map((symbol) => [
+      symbol,
+      {
+        derivatives: mapRowsToChartRows(detailsBySymbol[symbol] ?? []),
+        prices: mapPriceRowsToChartRows(pricesBySymbol[symbol] ?? []),
+      },
+    ]),
+  ) as Record<
+    string,
+    { derivatives: DerivativesChartRow[]; prices: PriceChartRow[] }
+  >;
+
+  return {
+    metricsBySymbol,
+    chartDataBySymbol,
+    overviewRows: symbols.map((symbol) => ({
+      symbol,
+      metrics: metricsBySymbol[symbol],
+      bias: getBias(metricsBySymbol[symbol]),
+    })),
+    noSummaryData:
+      !summaryLoading && !summaryError && filteredSummary.length === 0,
+    noDetailData:
+      !detailLoading &&
+      !detailError &&
+      symbols.every((symbol) => (detailsBySymbol[symbol] ?? []).length === 0),
+    showSkeleton: (summaryLoading || detailLoading) && !summary,
+  };
+};