@tradejs/app 1.0.8 → 1.0.10

package/src/app/components/Strategies/AdvancedMetricsPanel.tsx

@@ -0,0 +1,727 @@
+'use client';
+
+import { Box, Flex, Grid, SimpleGrid, Text } from '@chakra-ui/react';
+import type { AdvancedTradeMetrics } from '@tradejs/core/backtest';
+import {
+  formatCompactNumber,
+  formatFee,
+  formatInteger,
+  formatPercent,
+  formatSignedNumber,
+  getPnlColor,
+} from '#components/Shared/OrdersDrawer';
+
+type MetricTone = 'amount' | 'positive' | 'negative' | 'warning' | 'neutral';
+type MetricVariant = 'default' | 'primary';
+
+interface MetricItem {
+  id: string;
+  label: string;
+  value: string;
+  detail?: string;
+  tone?: MetricTone;
+  numericValue?: number | null;
+  variant?: MetricVariant;
+}
+
+interface MetricGroup {
+  id: string;
+  title: string;
+  description?: string;
+  metrics: MetricItem[];
+}
+
+interface MetricSection {
+  id: string;
+  title: string;
+  subtitle: string;
+  groups: MetricGroup[];
+  quarterlyPnl?: AdvancedTradeMetrics['stability']['quarterlyPnl'];
+}
+
+const getAmountLabel = (value: number | null | undefined) =>
+  typeof value === 'number' && Number.isFinite(value)
+    ? `${formatSignedNumber(value)} USDT`
+    : 'n/a';
+
+const getPlainAmountLabel = (value: number | null | undefined) =>
+  typeof value === 'number' && Number.isFinite(value)
+    ? `${formatCompactNumber(value, { maximumFractionDigits: 2 })} USDT`
+    : 'n/a';
+
+const getRatioLabel = (value: number | null | undefined) =>
+  typeof value === 'number' && Number.isFinite(value)
+    ? `${formatCompactNumber(value, {
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 2,
+      })}x`
+    : 'n/a';
+
+const getNumberLabel = (value: number | null | undefined) =>
+  formatCompactNumber(value, {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 0,
+  });
+
+const getMetricColor = (item: MetricItem) => {
+  if (item.tone === 'amount') {
+    return getPnlColor(item.numericValue);
+  }
+
+  if (item.tone === 'positive') {
+    return 'teal.300';
+  }
+
+  if (item.tone === 'negative') {
+    return 'red.300';
+  }
+
+  if (item.tone === 'warning') {
+    return 'orange.300';
+  }
+
+  return item.variant === 'primary' ? 'gray.100' : 'gray.200';
+};
+
+const amountMetric = (
+  id: string,
+  label: string,
+  value: number | null | undefined,
+  options: Partial<MetricItem> = {},
+): MetricItem => ({
+  id,
+  label,
+  value: getAmountLabel(value),
+  tone: 'amount',
+  numericValue: value,
+  ...options,
+});
+
+const plainAmountMetric = (
+  id: string,
+  label: string,
+  value: number | null | undefined,
+  options: Partial<MetricItem> = {},
+): MetricItem => ({
+  id,
+  label,
+  value: getPlainAmountLabel(value),
+  numericValue: value,
+  ...options,
+});
+
+const exitBreakdownMetric = (
+  id: string,
+  label: string,
+  bucket: AdvancedTradeMetrics['operational']['exitBreakdown']['takeProfit'],
+): MetricItem => ({
+  id,
+  label,
+  value: formatInteger(bucket.count),
+  detail: formatPercent(bucket.share),
+});
+
+const MetricCard = ({ item }: { item: MetricItem }) => {
+  const isPrimary = item.variant === 'primary';
+
+  return (
+    <Box
+      borderWidth="1px"
+      borderColor={isPrimary ? 'teal.900' : 'gray.800'}
+      borderRadius="md"
+      bg={isPrimary ? 'teal.950' : 'blackAlpha.200'}
+      minW="0"
+      px={4}
+      py={3}
+    >
+      <Text
+        color="gray.500"
+        fontSize="2xs"
+        fontWeight="bold"
+        textTransform="uppercase"
+        lineHeight="1.2"
+      >
+        {item.label}
+      </Text>
+      <Text
+        mt={2}
+        color={getMetricColor(item)}
+        fontSize={isPrimary ? 'xl' : 'lg'}
+        fontWeight="bold"
+        fontFamily="mono"
+        lineHeight="1"
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+      >
+        {item.value}
+      </Text>
+      {item.detail ? (
+        <Text
+          mt={2}
+          color="gray.500"
+          fontSize="xs"
+          lineHeight="1.25"
+          whiteSpace="nowrap"
+          overflow="hidden"
+          textOverflow="ellipsis"
+        >
+          {item.detail}
+        </Text>
+      ) : null}
+    </Box>
+  );
+};
+
+const MetricGroupBlock = ({ group }: { group: MetricGroup }) => (
+  <Box minW="0">
+    <Flex justify="space-between" align="baseline" gap={3} mb={3}>
+      <Text color="gray.300" fontSize="sm" fontWeight="semibold">
+        {group.title}
+      </Text>
+      {group.description ? (
+        <Text color="gray.600" fontSize="xs" textAlign="right">
+          {group.description}
+        </Text>
+      ) : null}
+    </Flex>
+    <SimpleGrid columns={{ base: 2, xl: 3 }} gap={3}>
+      {group.metrics.map((item) => (
+        <MetricCard key={item.id} item={item} />
+      ))}
+    </SimpleGrid>
+  </Box>
+);
+
+const QuarterlyPnlGrid = ({
+  quarterlyPnl,
+}: {
+  quarterlyPnl: AdvancedTradeMetrics['stability']['quarterlyPnl'];
+}) => {
+  if (!quarterlyPnl.length) {
+    return null;
+  }
+
+  return (
+    <Box mt={4}>
+      <Flex justify="space-between" align="baseline" gap={3} mb={3}>
+        <Text color="gray.300" fontSize="sm" fontWeight="semibold">
+          Quarterly P&L
+        </Text>
+        <Text color="gray.600" fontSize="xs" textAlign="right">
+          grouped by calendar quarter
+        </Text>
+      </Flex>
+      <Grid templateColumns={{ base: '1fr 1fr', xl: 'repeat(3, 1fr)' }} gap={2}>
+        {quarterlyPnl.map((quarter) => (
+          <Flex
+            key={quarter.quarter}
+            align="center"
+            justify="space-between"
+            gap={2}
+            borderWidth="1px"
+            borderColor="gray.800"
+            borderRadius="md"
+            bg="blackAlpha.200"
+            minW="0"
+            px={3}
+            py={2}
+          >
+            <Text color="gray.400" fontSize="xs" fontWeight="semibold">
+              {quarter.quarter}
+            </Text>
+            <Text
+              color={getPnlColor(quarter.pnl)}
+              fontSize="sm"
+              fontWeight="bold"
+              fontFamily="mono"
+              whiteSpace="nowrap"
+            >
+              {getAmountLabel(quarter.pnl)}
+            </Text>
+          </Flex>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+const MetricsSection = ({ section }: { section: MetricSection }) => (
+  <Box
+    borderWidth="1px"
+    borderColor="gray.800"
+    borderRadius="md"
+    bg="gray.900"
+    p={4}
+  >
+    <Flex justify="space-between" align="baseline" gap={4}>
+      <Text fontSize="md" fontWeight="semibold" color="gray.100">
+        {section.title}
+      </Text>
+      <Text color="gray.600" fontSize="xs" textAlign="right">
+        {section.subtitle}
+      </Text>
+    </Flex>
+    <Flex direction="column" gap={5} mt={4}>
+      {section.groups.map((group) => (
+        <MetricGroupBlock key={group.id} group={group} />
+      ))}
+    </Flex>
+    <QuarterlyPnlGrid quarterlyPnl={section.quarterlyPnl ?? []} />
+  </Box>
+);
+
+const buildMetricSections = (
+  metrics: AdvancedTradeMetrics,
+): MetricSection[] => [
+  {
+    id: 'overview',
+    title: 'Overview',
+    subtitle: 'result, quality and trade frequency',
+    groups: [
+      {
+        id: 'result',
+        title: 'Result',
+        description: 'net outcome of approved trades',
+        metrics: [
+          amountMetric('totalPnl', 'Total P&L', metrics.core.totalPnl, {
+            variant: 'primary',
+          }),
+          {
+            id: 'winrate',
+            label: 'Winrate',
+            value: formatPercent(metrics.core.winRate),
+            variant: 'primary',
+          },
+          amountMetric('avgTrade', 'Avg trade', metrics.core.avgTrade),
+          amountMetric('expectancy', 'Expectancy', metrics.core.expectancy),
+        ],
+      },
+      {
+        id: 'edge',
+        title: 'Edge quality',
+        description: 'profitability per winner vs loser',
+        metrics: [
+          {
+            id: 'profitFactor',
+            label: 'Profit factor',
+            value: getRatioLabel(metrics.core.profitFactor),
+            detail: 'gross profit / gross loss',
+          },
+          {
+            id: 'payoffRatio',
+            label: 'Payoff ratio',
+            value: getRatioLabel(metrics.core.payoffRatio),
+            detail: 'avg win / avg loss',
+          },
+          plainAmountMetric(
+            'grossProfit',
+            'Gross profit',
+            metrics.core.grossProfit,
+            {
+              tone: 'positive',
+            },
+          ),
+          plainAmountMetric('grossLoss', 'Gross loss', metrics.core.grossLoss, {
+            tone: 'negative',
+          }),
+        ],
+      },
+      {
+        id: 'cadence',
+        title: 'Cadence',
+        description: 'how often strategy trades',
+        metrics: [
+          {
+            id: 'trades',
+            label: 'Trades',
+            value: formatInteger(metrics.core.trades),
+          },
+          {
+            id: 'tradesPerDay',
+            label: 'Trades/day',
+            value: getNumberLabel(metrics.core.tradesPerDay),
+          },
+          {
+            id: 'tradesPerWeek',
+            label: 'Trades/week',
+            value: getNumberLabel(metrics.core.tradesPerWeek),
+          },
+          {
+            id: 'winsLosses',
+            label: 'Wins / Losses',
+            value: `${formatInteger(metrics.core.wins)} / ${formatInteger(metrics.core.losses)}`,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'risk',
+    title: 'Risk',
+    subtitle: 'drawdown depth, recovery and worst periods',
+    groups: [
+      {
+        id: 'drawdown',
+        title: 'Drawdown',
+        description: 'peak-to-trough pressure',
+        metrics: [
+          plainAmountMetric('maxDrawdown', 'MaxDD', metrics.risk.maxDrawdown, {
+            detail: formatPercent(metrics.risk.maxDrawdownPercent),
+            tone: 'warning',
+            variant: 'primary',
+          }),
+          {
+            id: 'recoveryFactor',
+            label: 'Recovery factor',
+            value: getRatioLabel(metrics.risk.recoveryFactor),
+            detail: 'total P&L / MaxDD',
+          },
+          {
+            id: 'maxDrawdownToTotalProfit',
+            label: 'MaxDD / Total profit',
+            value: getRatioLabel(metrics.risk.maxDrawdownToTotalProfit),
+          },
+          {
+            id: 'maxDrawdownToGrossProfit',
+            label: 'MaxDD / Gross profit',
+            value: getRatioLabel(metrics.risk.maxDrawdownToGrossProfit),
+          },
+        ],
+      },
+      {
+        id: 'loss-pressure',
+        title: 'Loss pressure',
+        description: 'how losses cluster',
+        metrics: [
+          {
+            id: 'maxLossStreak',
+            label: 'Max loss streak',
+            value: formatInteger(metrics.risk.maxLossStreak),
+            tone: metrics.risk.maxLossStreak > 0 ? 'warning' : 'neutral',
+          },
+          {
+            id: 'losingMonthsCount',
+            label: 'Losing months',
+            value: formatInteger(metrics.risk.losingMonthsCount),
+            tone: metrics.risk.losingMonthsCount > 0 ? 'warning' : 'neutral',
+          },
+          amountMetric(
+            'worstMonthPnl',
+            'Worst month',
+            metrics.risk.worstMonthPnl,
+          ),
+          amountMetric(
+            'worstRolling30dPnl',
+            'Worst rolling 30d',
+            metrics.risk.worstRolling30dPnl,
+          ),
+          amountMetric(
+            'worstRolling90dPnl',
+            'Worst rolling 90d',
+            metrics.risk.worstRolling90dPnl,
+          ),
+        ],
+      },
+    ],
+  },
+  {
+    id: 'stability',
+    title: 'Stability',
+    subtitle: 'month-to-month consistency and concentration',
+    quarterlyPnl: metrics.stability.quarterlyPnl,
+    groups: [
+      {
+        id: 'calendar',
+        title: 'Calendar stability',
+        description: 'month and year behavior',
+        metrics: [
+          {
+            id: 'monthlyWinRate',
+            label: 'Monthly winrate',
+            value: formatPercent(metrics.stability.monthlyWinRate),
+          },
+          {
+            id: 'positiveMonthsPercent',
+            label: 'Positive months',
+            value: formatPercent(metrics.stability.positiveMonthsPercent),
+          },
+          amountMetric(
+            'rolling365Pnl',
+            'YoY rolling 365',
+            metrics.stability.rolling365Pnl,
+          ),
+        ],
+      },
+      {
+        id: 'monthly-spread',
+        title: 'Monthly spread',
+        description: 'typical month and dispersion',
+        metrics: [
+          amountMetric(
+            'medianMonthlyPnl',
+            'Median monthly P&L',
+            metrics.stability.medianMonthlyPnl,
+          ),
+          plainAmountMetric(
+            'iqrMonthlyPnl',
+            'IQR monthly P&L',
+            metrics.stability.iqrMonthlyPnl,
+          ),
+        ],
+      },
+      {
+        id: 'profit-concentration',
+        title: 'Profit concentration',
+        description: 'dependency on biggest winners',
+        metrics: [
+          {
+            id: 'top5ProfitShare',
+            label: 'Top 5 profit share',
+            value: formatPercent(metrics.stability.top5ProfitShare),
+          },
+          {
+            id: 'top10ProfitShare',
+            label: 'Top 10 profit share',
+            value: formatPercent(metrics.stability.top10ProfitShare),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'distribution',
+    title: 'Distribution',
+    subtitle: 'shape of individual trade outcomes',
+    groups: [
+      {
+        id: 'typical-trade',
+        title: 'Typical trade',
+        description: 'central result and quartiles',
+        metrics: [
+          amountMetric(
+            'medianTrade',
+            'Median trade',
+            metrics.distribution.medianTrade,
+            { variant: 'primary' },
+          ),
+          amountMetric('p25Trade', 'P25 trade', metrics.distribution.p25Trade),
+          amountMetric('p75Trade', 'P75 trade', metrics.distribution.p75Trade),
+        ],
+      },
+      {
+        id: 'tails',
+        title: 'Tails',
+        description: 'outliers and asymmetry',
+        metrics: [
+          amountMetric('p10Trade', 'P10 trade', metrics.distribution.p10Trade),
+          amountMetric('p90Trade', 'P90 trade', metrics.distribution.p90Trade),
+          amountMetric(
+            'largestWin',
+            'Largest win',
+            metrics.distribution.largestWin,
+          ),
+          amountMetric(
+            'largestLoss',
+            'Largest loss',
+            metrics.distribution.largestLoss,
+          ),
+          {
+            id: 'tailRatio',
+            label: 'Tail ratio',
+            value: getRatioLabel(metrics.distribution.tailRatio),
+            detail: 'p95 win / abs(p5 loss)',
+          },
+          {
+            id: 'skewness',
+            label: 'Skewness',
+            value: getNumberLabel(metrics.distribution.skewness),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'riskAdjusted',
+    title: 'Risk-adjusted',
+    subtitle: 'return normalized by volatility and drawdown',
+    groups: [
+      {
+        id: 'daily-pnl',
+        title: 'Daily approved P&L',
+        description: 'daily series, not trade-level series',
+        metrics: [
+          {
+            id: 'sharpeDaily',
+            label: 'Sharpe',
+            value: getNumberLabel(metrics.riskAdjusted.sharpeDaily),
+          },
+          {
+            id: 'sortinoDaily',
+            label: 'Sortino',
+            value: getNumberLabel(metrics.riskAdjusted.sortinoDaily),
+          },
+        ],
+      },
+      {
+        id: 'drawdown-adjusted',
+        title: 'Drawdown-adjusted',
+        description: 'annualized P&L / MaxDD',
+        metrics: [
+          {
+            id: 'calmar',
+            label: 'Calmar',
+            value: getRatioLabel(metrics.riskAdjusted.calmar),
+          },
+          {
+            id: 'mar',
+            label: 'MAR',
+            value: getRatioLabel(metrics.riskAdjusted.mar),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'operational',
+    title: 'Operational',
+    subtitle: 'execution quality, approvals and exposure split',
+    groups: [
+      {
+        id: 'execution',
+        title: 'Execution',
+        description: 'slippage impact on net P&L',
+        metrics: [
+          {
+            id: 'avgSlippageCost',
+            label: 'Avg slippage cost',
+            value: formatFee(metrics.operational.avgSlippageCost),
+            tone: metrics.operational.avgSlippageCost ? 'warning' : 'neutral',
+          },
+          amountMetric(
+            'pnlBeforeSlippage',
+            'P&L before slippage',
+            metrics.operational.pnlBeforeSlippage,
+          ),
+          amountMetric(
+            'pnlAfterSlippage',
+            'P&L after slippage',
+            metrics.operational.pnlAfterSlippage,
+          ),
+        ],
+      },
+      {
+        id: 'approval',
+        title: 'Approval quality',
+        description: 'gate decisions and misses',
+        metrics: [
+          {
+            id: 'approvalRate',
+            label: 'Approval rate',
+            value: formatPercent(metrics.operational.approvalRate),
+          },
+          {
+            id: 'blockedProfitableTrades',
+            label: 'Blocked profitable',
+            value: formatInteger(metrics.operational.blockedProfitableTrades),
+          },
+          {
+            id: 'approvedLosingTrades',
+            label: 'Approved losing',
+            value: formatInteger(metrics.operational.approvedLosingTrades),
+            tone:
+              metrics.operational.approvedLosingTrades > 0
+                ? 'warning'
+                : 'neutral',
+          },
+        ],
+      },
+      {
+        id: 'close-reasons',
+        title: 'Close reasons',
+        description: 'closed trade outcomes by exit path',
+        metrics: [
+          exitBreakdownMetric(
+            'takeProfitExits',
+            'TP closes',
+            metrics.operational.exitBreakdown.takeProfit,
+          ),
+          exitBreakdownMetric(
+            'stopLossExits',
+            'SL closes',
+            metrics.operational.exitBreakdown.stopLoss,
+          ),
+          exitBreakdownMetric(
+            'signalExits',
+            'EXIT closes',
+            metrics.operational.exitBreakdown.exit,
+          ),
+          ...(metrics.operational.exitBreakdown.unknown.count > 0
+            ? [
+                exitBreakdownMetric(
+                  'unknownExits',
+                  'Unknown closes',
+                  metrics.operational.exitBreakdown.unknown,
+                ),
+              ]
+            : []),
+        ],
+      },
+      {
+        id: 'concentration',
+        title: 'Concentration',
+        description: 'where absolute P&L comes from',
+        metrics: [
+          {
+            id: 'symbolConcentrationTop1',
+            label: 'Symbol top 1',
+            value: formatPercent(metrics.operational.symbolConcentrationTop1),
+          },
+          {
+            id: 'symbolConcentrationTop5',
+            label: 'Symbol top 5',
+            value: formatPercent(metrics.operational.symbolConcentrationTop5),
+          },
+          {
+            id: 'sessionConcentrationTop1',
+            label: 'Session top 1',
+            value: formatPercent(metrics.operational.sessionConcentrationTop1),
+          },
+        ],
+      },
+      {
+        id: 'direction',
+        title: 'Direction split',
+        description: 'LONG / SHORT trade count and P&L',
+        metrics: [
+          {
+            id: 'longTrades',
+            label: 'LONG trades',
+            value: formatInteger(metrics.operational.longTrades),
+            detail: getAmountLabel(metrics.operational.longPnl),
+            tone: 'positive',
+          },
+          {
+            id: 'shortTrades',
+            label: 'SHORT trades',
+            value: formatInteger(metrics.operational.shortTrades),
+            detail: getAmountLabel(metrics.operational.shortPnl),
+            tone: 'negative',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const AdvancedMetricsPanel = ({
+  metrics,
+}: {
+  metrics: AdvancedTradeMetrics;
+}) => (
+  <Flex direction="column" gap={4}>
+    {buildMetricSections(metrics).map((section) => (
+      <MetricsSection key={section.id} section={section} />
+    ))}
+  </Flex>
+);