@tradejs/app 2.0.18 → 2.0.19

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

@@ -0,0 +1,419 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Box, Flex, SimpleGrid, Text } from '@chakra-ui/react';
+import {
+  formatInteger,
+  formatPercent,
+  formatSignedNumber,
+  getPnlColor,
+} from '#components/Shared/OrdersDrawer';
+import type {
+  DistributionBin,
+  DrawdownPoint,
+  HourlyPnlStat,
+  RollingPerformancePoint,
+  SessionPnlStat,
+  StrategyTradePoint,
+} from '#app/lib/strategyPerformance';
+
+const CHART_WIDTH = 640;
+const CHART_HEIGHT = 120;
+const CHART_PADDING = 10;
+const POSITIVE_CHART_COLOR = '#5eead4';
+const NEGATIVE_CHART_COLOR = '#f87171';
+const NEUTRAL_CHART_COLOR = '#6b7280';
+
+const getChartPnlColor = (value: number) =>
+  value > 0
+    ? POSITIVE_CHART_COLOR
+    : value < 0
+      ? NEGATIVE_CHART_COLOR
+      : NEUTRAL_CHART_COLOR;
+
+const buildPolylinePoints = (values: number[]) => {
+  if (!values.length) {
+    return '';
+  }
+
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  const drawableWidth = CHART_WIDTH - CHART_PADDING * 2;
+  const drawableHeight = CHART_HEIGHT - CHART_PADDING * 2;
+
+  return values
+    .map((value, index) => {
+      const x =
+        CHART_PADDING +
+        (values.length === 1
+          ? 0
+          : (index / (values.length - 1)) * drawableWidth);
+      const y = CHART_PADDING + ((max - value) / range) * drawableHeight;
+
+      return `${x.toFixed(2)},${y.toFixed(2)}`;
+    })
+    .join(' ');
+};
+
+export const ChartPanel = ({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+}) => (
+  <Box
+    p={4}
+    borderWidth="1px"
+    borderColor="gray.800"
+    borderRadius="md"
+    bg="gray.900"
+    minH="210px"
+  >
+    <Flex justify="space-between" align="baseline" gap={3} mb={3}>
+      <Text fontSize="sm" color="gray.300" fontWeight="semibold">
+        {title}
+      </Text>
+      {subtitle ? (
+        <Text fontSize="xs" color="gray.500" textAlign="right">
+          {subtitle}
+        </Text>
+      ) : null}
+    </Flex>
+    {children}
+  </Box>
+);
+
+const EmptyChart = () => (
+  <Flex h="140px" align="center" justify="center">
+    <Text fontSize="sm" color="gray.500">
+      No trade data
+    </Text>
+  </Flex>
+);
+
+export const DrawdownTimelineChart = ({
+  points,
+}: {
+  points: DrawdownPoint[];
+}) => {
+  if (points.length < 2) {
+    return <EmptyChart />;
+  }
+
+  const values = points.map((point) => -point.drawdownPercent);
+  const maxDrawdown = Math.max(...points.map((point) => point.drawdownPercent));
+  const linePoints = buildPolylinePoints(values);
+
+  return (
+    <Box>
+      <svg
+        width="100%"
+        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
+        role="img"
+        aria-label="Drawdown timeline"
+      >
+        <line
+          x1={CHART_PADDING}
+          x2={CHART_WIDTH - CHART_PADDING}
+          y1={CHART_PADDING}
+          y2={CHART_PADDING}
+          stroke="#374151"
+          strokeDasharray="4 4"
+        />
+        <polyline
+          points={linePoints}
+          fill="none"
+          stroke={NEGATIVE_CHART_COLOR}
+          strokeWidth="2"
+        />
+      </svg>
+      <Flex justify="space-between" align="center" mt={2}>
+        <Text fontSize="xs" color="gray.500">
+          max drawdown
+        </Text>
+        <Text
+          fontSize="sm"
+          color="orange.300"
+          fontFamily="mono"
+          fontWeight="bold"
+        >
+          {formatPercent(maxDrawdown)}
+        </Text>
+      </Flex>
+    </Box>
+  );
+};
+
+export const WinLossStreakTimelineChart = ({
+  trades,
+}: {
+  trades: StrategyTradePoint[];
+}) => {
+  if (!trades.length) {
+    return <EmptyChart />;
+  }
+
+  const maxAbsPnl = Math.max(...trades.map((trade) => Math.abs(trade.pnl)), 1);
+  const centerY = CHART_HEIGHT / 2;
+  const barWidth = CHART_WIDTH / trades.length;
+
+  return (
+    <Box>
+      <svg
+        width="100%"
+        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
+        role="img"
+        aria-label="Win loss streak timeline"
+      >
+        <line
+          x1="0"
+          x2={CHART_WIDTH}
+          y1={centerY}
+          y2={centerY}
+          stroke="#374151"
+        />
+        {trades.map((trade, index) => {
+          const height = Math.max(2, (Math.abs(trade.pnl) / maxAbsPnl) * 48);
+          const isWin = trade.pnl > 0;
+          const y = isWin ? centerY - height : centerY;
+
+          return (
+            <rect
+              key={`${trade.timestamp}-${index}`}
+              x={index * barWidth}
+              y={y}
+              width={Math.max(1, barWidth - 0.4)}
+              height={height}
+              fill={getChartPnlColor(trade.pnl)}
+              opacity="0.9"
+            />
+          );
+        })}
+      </svg>
+      <Flex justify="space-between" align="center" mt={2}>
+        <Text fontSize="xs" color="gray.500">
+          wins above line, losses below
+        </Text>
+        <Text
+          fontSize="sm"
+          color="gray.300"
+          fontFamily="mono"
+          fontWeight="bold"
+        >
+          {formatInteger(trades.length)} trades
+        </Text>
+      </Flex>
+    </Box>
+  );
+};
+
+export const PnlDistributionChart = ({ bins }: { bins: DistributionBin[] }) => {
+  if (!bins.length) {
+    return <EmptyChart />;
+  }
+
+  const maxCount = Math.max(...bins.map((bin) => bin.count), 1);
+  const barWidth = CHART_WIDTH / bins.length;
+
+  return (
+    <Box>
+      <svg
+        width="100%"
+        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
+        role="img"
+        aria-label="P and L distribution"
+      >
+        {bins.map((bin, index) => {
+          const height = Math.max(2, (bin.count / maxCount) * 92);
+          const x = index * barWidth + 2;
+          const y = CHART_HEIGHT - height - CHART_PADDING;
+          const midpoint = (bin.min + bin.max) / 2;
+
+          return (
+            <rect
+              key={bin.id}
+              x={x}
+              y={y}
+              width={Math.max(2, barWidth - 4)}
+              height={height}
+              fill={getChartPnlColor(midpoint)}
+            />
+          );
+        })}
+      </svg>
+      <Flex justify="space-between" align="center" mt={2}>
+        <Text fontSize="xs" color="gray.500">
+          trade P&L buckets
+        </Text>
+        <Text
+          fontSize="sm"
+          color="gray.300"
+          fontFamily="mono"
+          fontWeight="bold"
+        >
+          {formatInteger(bins.reduce((sum, bin) => sum + bin.count, 0))}
+        </Text>
+      </Flex>
+    </Box>
+  );
+};
+
+export const RollingPerformanceChart = ({
+  points,
+}: {
+  points: RollingPerformancePoint[];
+}) => {
+  if (points.length < 2) {
+    return <EmptyChart />;
+  }
+
+  const winRateLine = buildPolylinePoints(points.map((point) => point.winRate));
+  const pnlLine = buildPolylinePoints(points.map((point) => point.pnl));
+  const latest = points[points.length - 1];
+
+  return (
+    <Box>
+      <svg
+        width="100%"
+        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
+        role="img"
+        aria-label="Rolling win rate and rolling P and L"
+      >
+        <line
+          x1={CHART_PADDING}
+          x2={CHART_WIDTH - CHART_PADDING}
+          y1={CHART_HEIGHT / 2}
+          y2={CHART_HEIGHT / 2}
+          stroke="#374151"
+          strokeDasharray="4 4"
+        />
+        <polyline
+          points={pnlLine}
+          fill="none"
+          stroke={POSITIVE_CHART_COLOR}
+          strokeWidth="2"
+        />
+        <polyline
+          points={winRateLine}
+          fill="none"
+          stroke="#fbbf24"
+          strokeWidth="2"
+          opacity="0.9"
+        />
+      </svg>
+      <Flex justify="space-between" align="center" mt={2}>
+        <Text fontSize="xs" color="gray.500">
+          teal P&L, yellow win rate
+        </Text>
+        <Text
+          fontSize="sm"
+          color="gray.300"
+          fontFamily="mono"
+          fontWeight="bold"
+        >
+          {formatPercent(latest?.winRate)} /{' '}
+          {formatSignedNumber(latest?.pnl ?? null)}
+        </Text>
+      </Flex>
+    </Box>
+  );
+};
+
+export const TimeOfDaySessionChart = ({
+  sessions,
+  hours,
+}: {
+  sessions: SessionPnlStat[];
+  hours: HourlyPnlStat[];
+}) => {
+  if (!sessions.some((session) => session.orders > 0)) {
+    return <EmptyChart />;
+  }
+
+  const maxSessionAbsPnl = Math.max(
+    ...sessions.map((session) => Math.abs(session.pnl)),
+    1,
+  );
+  const maxHourAbsPnl = Math.max(...hours.map((hour) => Math.abs(hour.pnl)), 1);
+
+  return (
+    <Flex direction="column" gap={4}>
+      <SimpleGrid columns={3} gap={3}>
+        {sessions.map((session) => {
+          const width = Math.max(
+            4,
+            (Math.abs(session.pnl) / maxSessionAbsPnl) * 100,
+          );
+
+          return (
+            <Box key={session.session}>
+              <Flex justify="space-between" align="center" mb={1}>
+                <Text fontSize="xs" color="gray.400" fontWeight="semibold">
+                  {session.session}
+                </Text>
+                <Text
+                  fontSize="xs"
+                  color={getPnlColor(session.pnl)}
+                  fontFamily="mono"
+                  fontWeight="bold"
+                >
+                  {formatSignedNumber(session.pnl)}
+                </Text>
+              </Flex>
+              <Box h="8px" bg="gray.800">
+                <Box
+                  h="full"
+                  w={`${width}%`}
+                  bg={getChartPnlColor(session.pnl)}
+                />
+              </Box>
+              <Text mt={1} fontSize="xs" color="gray.500" fontFamily="mono">
+                {formatInteger(session.orders)} orders
+              </Text>
+            </Box>
+          );
+        })}
+      </SimpleGrid>
+
+      <svg
+        width="100%"
+        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
+        role="img"
+        aria-label="P and L by UTC hour"
+      >
+        <line
+          x1="0"
+          x2={CHART_WIDTH}
+          y1={CHART_HEIGHT / 2}
+          y2={CHART_HEIGHT / 2}
+          stroke="#374151"
+        />
+        {hours.map((hour) => {
+          const barWidth = CHART_WIDTH / 24;
+          const height = Math.max(1, (Math.abs(hour.pnl) / maxHourAbsPnl) * 46);
+          const isPositive = hour.pnl >= 0;
+          const y = isPositive ? CHART_HEIGHT / 2 - height : CHART_HEIGHT / 2;
+
+          return (
+            <rect
+              key={hour.hour}
+              x={hour.hour * barWidth + 2}
+              y={y}
+              width={Math.max(2, barWidth - 4)}
+              height={height}
+              fill={getChartPnlColor(hour.pnl)}
+              opacity={hour.orders > 0 ? 0.95 : 0.2}
+            />
+          );
+        })}
+      </svg>
+      <Text fontSize="xs" color="gray.500">
+        UTC hours, sessions: Asia 00-07, Europe 08-15, US 16-23
+      </Text>
+    </Flex>
+  );
+};