@tradejs/app 1.0.0

package/src/app/components/Backtest/TestCard/Stat/index.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { SimpleGrid, Stat, Card, Heading } from '@chakra-ui/react';
+import { getFormatted } from '@tradejs/core/backtest';
+import { useTestContext } from '../context';
+import { ThresholdLevel, TestThresholdsKey } from '@tradejs/types';
+
+const getColorByLevel = (level: ThresholdLevel) => {
+  switch (level) {
+    case 'success':
+      return 'teal.500';
+    case 'warning':
+      return 'fg.warning';
+    case 'error':
+    default:
+      return 'fg.error';
+  }
+};
+
+interface StatItemProps {
+  id: TestThresholdsKey;
+  size?: 'sm' | 'md' | 'lg';
+  title: string;
+}
+
+const StatItem = ({ id, title, size = 'md' }: StatItemProps) => {
+  const {
+    testResult: { stat },
+  } = useTestContext();
+
+  const { formatted, level } = getFormatted(stat, id);
+
+  return (
+    <Stat.Root size={size}>
+      <Stat.Label>{title}</Stat.Label>
+      <Stat.ValueText color={getColorByLevel(level)}>
+        {formatted}
+      </Stat.ValueText>
+    </Stat.Root>
+  );
+};
+
+export const TestCardStatLine = () => {
+  return (
+    <SimpleGrid columns={{ base: 4, md: 8 }} p={4}>
+      <StatItem id="netProfit" title="P&L" />
+      <StatItem id="minAmount" title="Min Amount" />
+      <StatItem id="maxDrawdown" title="Drawdown" />
+      <StatItem id="orders" title="Orders" />
+      <StatItem id="winRate" title="Win Rate" />
+      <StatItem id="riskRewardRatio" title="Risk Ratio" />
+      <StatItem id="sharpeRatio" title="Sharpe" />
+      <StatItem id="exposure" title="Exposure" />
+    </SimpleGrid>
+  );
+};
+
+export const TestCardStatTable = () => {
+  return (
+    <>
+      <Card.Root bg="gray.900" mb={4} size="sm">
+        <Card.Header>
+          <Heading size="md">Period & Activity</Heading>
+        </Card.Header>
+        <Card.Body>
+          <SimpleGrid columns={{ base: 2, md: 5 }} p={4}>
+            <StatItem id="periodDays" title="Days" />
+            <StatItem id="periodMonths" title="Months" />
+            <StatItem id="orders" title="Orders" />
+            <StatItem id="ordersPerMonth" title="Orders / month" />
+            <StatItem id="exposure" title="Exposure" />
+          </SimpleGrid>
+        </Card.Body>
+      </Card.Root>
+
+      <Card.Root bg="gray.900" mb={4} size="sm">
+        <Card.Header>
+          <Heading size="md">Performance</Heading>
+        </Card.Header>
+        <Card.Body>
+          <SimpleGrid columns={{ base: 2, md: 5 }} p={4}>
+            <StatItem id="amount" title="Final amount" />
+            <StatItem id="netProfit" title="Net P&L" />
+            <StatItem id="totalReturn" title="Total return" />
+            <StatItem id="cagr" title="CAGR" />
+          </SimpleGrid>
+        </Card.Body>
+      </Card.Root>
+
+      <Card.Root bg="gray.900" mb={4} size="sm">
+        <Card.Header>
+          <Heading size="md">Risk & Risk-Adjusted</Heading>
+        </Card.Header>
+        <Card.Body>
+          <SimpleGrid columns={{ base: 2, md: 5 }} p={4}>
+            <StatItem id="maxDrawdown" title="Max drawdown" />
+            <StatItem id="calmar" title="Calmar" />
+            <StatItem id="sharpeRatio" title="Sharpe" />
+          </SimpleGrid>
+        </Card.Body>
+      </Card.Root>
+
+      <Card.Root bg="gray.900" mb={4} size="sm">
+        <Card.Header>
+          <Heading size="md">Trade Quality & Consistency</Heading>
+        </Card.Header>
+        <Card.Body>
+          <SimpleGrid columns={{ base: 2, md: 5 }} p={4}>
+            <StatItem id="winRate" title="Win rate" />
+            <StatItem id="riskRewardRatio" title="R/R (payoff)" />
+            <StatItem id="expectancy" title="Expectancy / trade" />
+            <StatItem id="maxConsecutiveWins" title="Win streak" />
+            <StatItem id="maxConsecutiveLosses" title="Loss streak" />
+          </SimpleGrid>
+        </Card.Body>
+      </Card.Root>
+    </>
+  );
+};

package/src/app/components/Backtest/TestCard/Title/index.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { PropsWithChildren, ReactNode } from 'react';
+import { Text, Flex } from '@chakra-ui/react';
+import { getBacktestScore } from '@tradejs/core/backtest';
+import { useTestContext } from '../context';
+
+interface TestCardTitleProps {
+  leftSlot?: ReactNode;
+}
+
+export const TestCardTitle = ({
+  children,
+  leftSlot,
+}: PropsWithChildren<TestCardTitleProps>) => {
+  const {
+    testResult: { stat, test },
+  } = useTestContext();
+  const score = getBacktestScore(stat);
+
+  return (
+    <Flex gap="4" p={4} mb={3}>
+      {leftSlot ? <Flex alignItems="center">{leftSlot}</Flex> : null}
+
+      <Text fontSize="lg" fontWeight="bold" color={'gray.200'}>
+        {test.symbol}
+      </Text>
+
+      <Flex gap="1">
+        <Text fontSize="sm" fontWeight="bold" color={'gray.400'} mt={1}>
+          score:
+        </Text>
+
+        <Text fontSize="lg" fontWeight="bold" color={'teal.500'}>
+          {score}
+        </Text>
+      </Flex>
+
+      <Flex gap="1">
+        <Text fontSize="sm" fontWeight="bold" color={'gray.400'} mt={1}>
+          strategy:
+        </Text>
+
+        <Text fontSize="lg" fontWeight="bold" color={'gray.200'}>
+          {test.strategyName}
+        </Text>
+      </Flex>
+
+      <Flex gap="1">
+        <Text fontSize="sm" fontWeight="bold" color={'gray.400'} mt={1}>
+          connector:
+        </Text>
+
+        <Text fontSize="lg" fontWeight="bold" color={'gray.200'}>
+          {test.connectorName}
+        </Text>
+      </Flex>
+
+      <Flex gap="1">
+        <Text fontSize="sm" fontWeight="bold" color={'gray.400'} mt={1}>
+          suite Id:
+        </Text>
+
+        <Text fontSize="lg" fontWeight="bold" color={'gray.200'}>
+          {test.testSuiteId}
+        </Text>
+      </Flex>
+
+      <Flex gap="1">
+        <Text fontSize="sm" fontWeight="bold" color={'gray.400'} mt={1}>
+          test Id:
+        </Text>
+
+        <Text fontSize="lg" fontWeight="bold" color={'gray.200'}>
+          {test.testId}
+        </Text>
+      </Flex>
+
+      <Flex gap="2" ml={'auto'} mt={-1}>
+        {children}
+      </Flex>
+    </Flex>
+  );
+};

package/src/app/components/Backtest/TestCard/context.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import { TestResult } from '@tradejs/types';
+
+interface TestResultContextProps {
+  testResult: TestResult;
+}
+
+export const TestResultContext = createContext<TestResultContextProps>(
+  {} as TestResultContextProps,
+);
+
+export const useTestContext = () => {
+  return useContext(TestResultContext);
+};

package/src/app/components/Backtest/TestCard/index.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { TestCardChart } from './Chart';
+import { TestCardRoot } from './Root';
+import { TestCardStatLine, TestCardStatTable } from './Stat';
+import { TestCardTitle } from './Title';
+import { TestCardSkeleton } from './Skeleton';
+import { TestCardConfigDrawer } from './ConfigDrawer';
+import { TestCardCompareButton } from './CompareButton';
+import { TestCardFavoriteIndicator } from './FavoriteIndicator';
+import { TestCardOpenReportButton } from './OpenReportButton';
+import { TestCardOpenDashboardButton } from './OpenDashboardButton';
+import { TestCardDeleteButton } from './DeleteButton';
+
+export const TestCard = {
+  Root: TestCardRoot,
+  Title: TestCardTitle,
+  StatLine: TestCardStatLine,
+  StatTable: TestCardStatTable,
+  Chart: TestCardChart,
+  Skeleton: TestCardSkeleton,
+  ConfigDrawer: TestCardConfigDrawer,
+  CompareButton: TestCardCompareButton,
+  FavoriteIndicator: TestCardFavoriteIndicator,
+  OpenDashboardButton: TestCardOpenDashboardButton,
+  OpenReportButton: TestCardOpenReportButton,
+  DeleteButton: TestCardDeleteButton,
+};

package/src/app/components/Backtest/TestList/index.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { FiFolder } from 'react-icons/fi';
+import { Box, Checkbox, Code } from '@chakra-ui/react';
+import { TestCard } from '@components/Backtest/TestCard';
+import { EmptyState } from '@UI';
+import { Items } from '@tradejs/types';
+
+interface ListProps {
+  tests: Items;
+  loadding: boolean;
+  fulFilled: boolean;
+  noData: boolean;
+  selectedTestNames: string[];
+  onToggleSelection: (testName: string, checked: boolean) => void;
+  overscan?: number;
+}
+
+const ITEM_HEIGHT = 548;
+
+export const TestList = ({
+  tests,
+  loadding,
+  fulFilled,
+  noData,
+  selectedTestNames,
+  onToggleSelection,
+  overscan = 2,
+}: ListProps) => {
+  const selectedTestSet = useMemo(
+    () => new Set(selectedTestNames),
+    [selectedTestNames],
+  );
+
+  const itemKey = useCallback(
+    (index: number) => tests[index]?.value ?? String(index),
+    [tests],
+  );
+
+  const Row = useCallback(
+    ({ index, style }: ListChildComponentProps) => {
+      const item = tests[index];
+      return (
+        <Box style={style} px={2}>
+          <TestCard.Root key={item.value} testName={item.value}>
+            <TestCard.Title
+              leftSlot={
+                <Checkbox.Root
+                  size="sm"
+                  colorPalette="teal"
+                  checked={selectedTestSet.has(item.value)}
+                  onCheckedChange={(details) =>
+                    onToggleSelection(item.value, details.checked === true)
+                  }
+                >
+                  <Checkbox.HiddenInput />
+                  <Checkbox.Control bg="gray.800" borderColor="gray.500" />
+                </Checkbox.Root>
+              }
+            >
+              <TestCard.CompareButton />
+              <TestCard.FavoriteIndicator />
+              <TestCard.ConfigDrawer />
+              <TestCard.OpenDashboardButton />
+              <TestCard.OpenReportButton />
+              <TestCard.DeleteButton />
+            </TestCard.Title>
+            <TestCard.Chart />
+            <TestCard.StatLine />
+          </TestCard.Root>
+        </Box>
+      );
+    },
+    [onToggleSelection, selectedTestSet, tests],
+  );
+
+  if (!fulFilled && loadding) {
+    return (
+      <>
+        <TestCard.Skeleton />
+        <TestCard.Skeleton />
+      </>
+    );
+  }
+
+  if (fulFilled && !loadding && noData) {
+    return (
+      <EmptyState
+        icon={FiFolder}
+        title="No tests found"
+        description={
+          <>
+            Please run
+            <Code ml={1} colorPalette="teal" variant="subtle">
+              yarn backtest --help
+            </Code>
+          </>
+        }
+      />
+    );
+  }
+
+  return (
+    <>
+      <AutoSizer>
+        {({ height: h, width }) => (
+          <FixedSizeList
+            height={h}
+            width={width}
+            itemCount={tests.length}
+            itemSize={ITEM_HEIGHT}
+            overscanCount={overscan}
+            itemKey={itemKey}
+          >
+            {Row}
+          </FixedSizeList>
+        )}
+      </AutoSizer>
+    </>
+  );
+};

package/src/app/components/Dashboard/AiDrawer/Message.tsx

@@ -0,0 +1,34 @@
+import { Timeline, Box, Text } from '@chakra-ui/react';
+import { PiRobotFill, PiUserFill } from 'react-icons/pi';
+import { AIChatMessage } from '@tradejs/types';
+
+interface MessageProps {
+  message: AIChatMessage;
+  index: number;
+}
+
+export const Message = ({ message, index }: MessageProps) => {
+  return (
+    <Timeline.Item>
+      <Timeline.Connector>
+        <Timeline.Separator />
+        <Timeline.Indicator>
+          {message.from === 'user' ? <PiUserFill /> : <PiRobotFill />}
+        </Timeline.Indicator>
+      </Timeline.Connector>
+
+      <Timeline.Content>
+        <Timeline.Title fontSize="sm" fontWeight="bold">
+          {message.from === 'user' ? 'User' : 'AI'}
+        </Timeline.Title>
+        <Timeline.Description fontSize="xs" color="gray.500">
+          {/* В будущем сюда можно вставить timestamp */}
+          Message #{index + 1}
+        </Timeline.Description>
+        <Box mt={1} py={2} borderRadius="lg" w="fit-content" maxW="full">
+          <Text fontSize="sm">{message.text}</Text>
+        </Box>
+      </Timeline.Content>
+    </Timeline.Item>
+  );
+};

package/src/app/components/Dashboard/AiDrawer/index.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  CloseButton,
+  Drawer,
+  Portal,
+  Icon,
+  Textarea,
+  Timeline,
+  HStack,
+  Stack,
+  Text,
+  SkeletonCircle,
+  SkeletonText,
+} from '@chakra-ui/react';
+import { AIChatMessage, AIChatHistory } from '@tradejs/types';
+import { GiArtificialHive } from 'react-icons/gi';
+import { useFilters } from '@store';
+import { sendMessage, getHistory } from '@actions/ai';
+import { Message } from './Message';
+
+export const AiDrawer = () => {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [input, setInput] = useState('');
+  const [messages, setMessages] = useState<AIChatHistory>([]);
+  const { filters } = useFilters();
+
+  const loadHistory = useCallback(async () => {
+    setLoading(true);
+
+    const history = await getHistory(filters.symbol);
+
+    setMessages(history);
+
+    setLoading(false);
+  }, [filters.symbol]);
+
+  useEffect(() => {
+    void loadHistory();
+  }, [loadHistory]);
+
+  const handleSend = async () => {
+    if (!input.trim()) return;
+
+    const message = {
+      from: 'user',
+      text: input,
+      command: 'prompt',
+    } as AIChatMessage;
+
+    setMessages((state) => [...state, message]);
+
+    const response = await sendMessage({ message, filters });
+
+    setMessages((state) => [...state, response]);
+
+    setInput('');
+  };
+
+  const handleQuick = async (command: string) => {
+    let message: AIChatMessage | null = null;
+
+    if (command === '/line') {
+      message = {
+        from: 'user',
+        text: 'Какие наклонные линии можно построить на данном графике',
+        command,
+      };
+    }
+
+    if (!message) {
+      return;
+    }
+
+    setMessages((state) => [...state, message as AIChatMessage]);
+
+    const response = await sendMessage({ message, filters });
+
+    setMessages((state) => [...state, response]);
+  };
+
+  return (
+    <Drawer.Root open={open} onOpenChange={(e) => setOpen(e.open)} size={'lg'}>
+      <Drawer.Trigger asChild>
+        <Button
+          colorPalette="teal"
+          size="sm"
+          variant={open ? 'surface' : 'outline'}
+        >
+          <Icon as={GiArtificialHive} boxSize={6} />
+          <Text>AI</Text>
+        </Button>
+      </Drawer.Trigger>
+      <Portal>
+        <Drawer.Backdrop />
+        <Drawer.Positioner>
+          <Drawer.Content display="flex" flexDirection="column">
+            <Drawer.Header>
+              <Drawer.Title>AI assistant</Drawer.Title>
+              <Drawer.CloseTrigger asChild>
+                <CloseButton position="absolute" right="3" top="3" />
+              </Drawer.CloseTrigger>
+            </Drawer.Header>
+
+            <Drawer.Body overflowY="auto" flex="1">
+              {loading ? (
+                <Stack gap="4" maxW="xs">
+                  <HStack width="full">
+                    <SkeletonCircle size="6" />
+                    <SkeletonText noOfLines={2} />
+                  </HStack>
+                  <SkeletonText ml="8" noOfLines={3} />
+                </Stack>
+              ) : (
+                <Timeline.Root>
+                  {messages.map((message, index) => (
+                    <Message key={index} message={message} index={index} />
+                  ))}
+                </Timeline.Root>
+              )}
+            </Drawer.Body>
+
+            <Drawer.Footer flexDirection="column" alignItems="stretch" gap={3}>
+              <HStack>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleQuick('/line')}
+                >
+                  /line
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleQuick('/analyze')}
+                >
+                  /analyze
+                </Button>
+              </HStack>
+
+              <Textarea
+                size="sm"
+                placeholder="Введите сообщение..."
+                autoresize
+                rows={3}
+                maxH="15lh"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+              />
+
+              <Button mt={2} size={'sm'} variant="subtle" onClick={handleSend}>
+                Send
+              </Button>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Positioner>
+      </Portal>
+    </Drawer.Root>
+  );
+};

package/src/app/components/Dashboard/KlineChart/figures/backtestFigureTypes.ts

@@ -0,0 +1,7 @@
+export type {
+  EntryLineExtendData,
+  EntryPointsExtendData,
+  EntryZoneExtendData,
+  MarkerMeta,
+  MarkerShape,
+} from '@tradejs/core/figures';

package/src/app/components/Dashboard/KlineChart/figures/backtestMarkersPointFigure.ts

@@ -0,0 +1,76 @@
+import { MarkerMeta } from './backtestFigureTypes';
+
+type Coordinate = { x: number; y: number };
+
+type CreatePointFiguresParams = {
+  coordinates: Coordinate[];
+  overlay: { extendData?: MarkerMeta[][] };
+};
+
+const green = '#84cc16';
+const red = '#dc2626';
+
+export const createBacktestMarkersPointFigure = ({
+  coordinates,
+  overlay,
+}: CreatePointFiguresParams) => {
+  const markerGroups = overlay.extendData ?? [];
+  const figures: any[] = [];
+
+  for (let coordIndex = 0; coordIndex < coordinates.length; coordIndex++) {
+    const coord = coordinates[coordIndex];
+    const group = markerGroups[coordIndex];
+    if (!coord || !group) continue;
+
+    group.forEach((meta, localIdx) => {
+      const { shape, color, type, profit } = meta;
+
+      const baseX = coord.x;
+      const baseY = coord.y - localIdx * 14;
+
+      const width = 10;
+      const height = 10;
+
+      let figureType: string;
+      switch (shape) {
+        case 'RECT':
+          figureType = 'btRect';
+          break;
+        case 'SQUARE':
+          figureType = 'btSquare';
+          break;
+        case 'DIAMOND':
+          figureType = 'btDiamond';
+          break;
+        case 'TRIANGLE':
+          figureType = 'btTriangle';
+          break;
+        case 'STAR':
+          figureType = 'btStar';
+          break;
+        case 'CIRCLE':
+        default:
+          figureType = 'btCircle';
+          break;
+      }
+
+      figures.push({
+        type: figureType,
+        attrs: { x: baseX, y: baseY, width, height, color },
+      });
+
+      const labelText = `${type} ${profit.toFixed(2)}`;
+      figures.push({
+        type: 'btLabel',
+        attrs: {
+          x: baseX + 8,
+          y: baseY,
+          text: labelText,
+          color: profit >= 0 ? green : red,
+        },
+      });
+    });
+  }
+
+  return figures;
+};

package/src/app/components/Dashboard/KlineChart/figures/circle.ts

@@ -0,0 +1,15 @@
+import { Figure } from '@tradejs/types';
+
+export const circle = ({ ctx, x, y, width, height, color }: Figure) => {
+  const radius = Math.min(width, height) / 2;
+  ctx.beginPath();
+  ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI);
+  ctx.fillStyle = color;
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI);
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'white';
+  ctx.stroke();
+};

package/src/app/components/Dashboard/KlineChart/figures/diamond.ts

@@ -0,0 +1,25 @@
+import { Figure } from '@tradejs/types';
+
+export const diamond = ({
+  ctx,
+  x,
+  y,
+  width: baseWidth,
+  height: baseHeight,
+  color,
+}: Figure) => {
+  const width = baseWidth * 1.5;
+  const height = baseHeight * 1.5;
+  ctx.beginPath();
+  ctx.moveTo(x - width / 2, y);
+  ctx.lineTo(x, y - height / 2);
+  ctx.lineTo(x + width / 2, y);
+  ctx.lineTo(x, y + height / 2);
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'white';
+  ctx.stroke();
+};