@tradejs/app 1.0.0

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

@@ -0,0 +1,118 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Box } from '@chakra-ui/react';
+import { Chart, useChart } from '@chakra-ui/charts';
+import {
+  LineChart,
+  CartesianGrid,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ReferenceLine,
+  ResponsiveContainer,
+} from 'recharts';
+import { useTestsCompare } from '@store';
+import { useTestContext } from '../context';
+import { TestCompareList } from '@tradejs/types';
+import { mapOrderLogToChartData, getChartData } from './utils';
+import { getFormatted, getTimeline } from '@tradejs/core/backtest';
+
+interface TestCardChartProps {
+  height?: string | number;
+}
+
+export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
+  const { testResult } = useTestContext();
+  const { test, stat } = testResult;
+  const { compareList } = useTestsCompare();
+
+  const chartData = useMemo(() => {
+    if (!compareList.length) {
+      return mapOrderLogToChartData(testResult);
+    }
+
+    const timeline = getTimeline(test.options.start, test.options.end);
+
+    const testList: TestCompareList = [
+      ...compareList.filter(
+        ({ testResult }) => testResult.test.testId !== test.testId,
+      ),
+      {
+        testResult,
+        color: 'teal',
+      },
+    ];
+
+    return getChartData(testList, timeline);
+  }, [
+    compareList,
+    test.options.end,
+    test.options.start,
+    test.testId,
+    testResult,
+  ]);
+
+  const chart = useChart(chartData as any);
+
+  const { formatted: maxAmount } = getFormatted(stat, 'maxAmount');
+  const { formatted: minAmount } = getFormatted(stat, 'minAmount');
+
+  return (
+    <Box w="100%" minW="600px" h={height} pr={2}>
+      <ResponsiveContainer width="100%" height="100%">
+        <Chart.Root maxH="md" chart={chart}>
+          <LineChart data={chart.data}>
+            <CartesianGrid stroke={chart.color('border')} vertical={false} />
+            <ReferenceLine
+              stroke={chart.color('gray.600')}
+              strokeDasharray="5 5"
+              y={stat.maxAmount}
+              label={{
+                value: `Max: ${maxAmount}`,
+                offset: 10,
+                fill: chart.color('gray.600'),
+                position: 'top',
+              }}
+            />
+            <ReferenceLine
+              stroke={chart.color('gray.600')}
+              strokeDasharray="8 8"
+              y={100}
+            />
+            <ReferenceLine
+              stroke={chart.color('gray.600')}
+              strokeDasharray="5 5"
+              y={stat.minAmount}
+              label={{
+                value: `Min: ${minAmount}`,
+                offset: 10,
+                fill: chart.color('gray.600'),
+                position: 'bottom',
+              }}
+            />
+            <XAxis dataKey="timestamp" />
+            <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
+            <Tooltip
+              animationDuration={100}
+              cursor={false}
+              content={<Chart.Tooltip />}
+            />
+
+            {chart.series.map((item) => (
+              <Line
+                key={item.name as string}
+                isAnimationActive={false}
+                dataKey={chart.key(item.name) as string}
+                stroke={chart.color(item.color)}
+                strokeWidth={2}
+                dot={false}
+              />
+            ))}
+          </LineChart>
+        </Chart.Root>
+      </ResponsiveContainer>
+    </Box>
+  );
+};

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

@@ -0,0 +1,81 @@
+import { format } from 'date-fns';
+import {
+  SimpleOrderLogData,
+  TestResult,
+  TestCompareList,
+} from '@tradejs/types';
+
+const getLineName = (testResult: TestResult) =>
+  `${testResult.test.symbol}-${testResult.test.testId}`;
+
+export const mapOrderLogToChartData = (testResult: TestResult) => {
+  const data = testResult.orderLog.map(([timestamp, amount]) => ({
+    [getLineName(testResult)]: amount,
+    timestamp: format(timestamp, 'dd.MM'),
+  }));
+
+  const series = [
+    {
+      name: getLineName(testResult),
+      color: 'teal.solid',
+    },
+  ];
+
+  return {
+    data,
+    series,
+  };
+};
+
+const getAmountFromOrderLog = (
+  ind: number,
+  timeline: number[],
+  orderLog: SimpleOrderLogData,
+  fallback: number,
+) => {
+  if (ind < 1) {
+    return fallback;
+  }
+
+  const order = orderLog.findLast(
+    (log) => log[0] <= timeline[ind] && log[0] > timeline[ind - 1],
+  );
+
+  if (!order) {
+    return fallback;
+  }
+
+  return order[1];
+};
+
+export const getChartData = (testList: TestCompareList, timeline: number[]) => {
+  const values: Record<string, number> = {};
+
+  const data = timeline.map((timestamp, ind) => {
+    const formattedTimestamp = format(timestamp, 'dd.MM');
+
+    testList.forEach(({ testResult }) => {
+      values[getLineName(testResult)] = getAmountFromOrderLog(
+        ind,
+        timeline,
+        testResult.orderLog,
+        values[getLineName(testResult)] || 100,
+      );
+    });
+
+    return {
+      ...values,
+      timestamp: formattedTimestamp,
+    };
+  });
+
+  const series = testList.map(({ testResult, color }) => ({
+    name: getLineName(testResult),
+    color: `${color}.solid`,
+  }));
+
+  return {
+    data,
+    series,
+  };
+};

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

@@ -0,0 +1,21 @@
+import { IconButton } from '@chakra-ui/react';
+import { TbArrowsLeftRight } from 'react-icons/tb';
+import { useTestsCompare } from '@store';
+import { useTestContext } from '../context';
+
+export const TestCardCompareButton = () => {
+  const { testResult } = useTestContext();
+  const { checkIsCompared, onChangeCompare } = useTestsCompare();
+  const isCompared = checkIsCompared(testResult.test.name);
+
+  return (
+    <IconButton
+      size="xs"
+      colorPalette="teal"
+      variant={isCompared ? 'solid' : 'outline'}
+      onClick={() => onChangeCompare(testResult.test.name)}
+    >
+      <TbArrowsLeftRight />
+    </IconButton>
+  );
+};

package/src/app/components/Backtest/TestCard/ConfigDrawer/JsonCodeBlock.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { CodeBlock, createShikiAdapter, IconButton } from '@chakra-ui/react';
+import type { HighlighterGeneric } from 'shiki';
+import { useMemo } from 'react';
+
+interface JsonCodeBlockProps {
+  tab: string;
+  code: string;
+}
+
+const JsonCodeBlock = ({ code, tab }: JsonCodeBlockProps) => {
+  const adapter = useMemo(() => {
+    return createShikiAdapter<HighlighterGeneric<any, any>>({
+      async load() {
+        const { createHighlighter } = await import('shiki');
+        return createHighlighter({
+          langs: ['json'],
+          themes: ['github-dark'],
+        });
+      },
+    });
+  }, []);
+
+  return (
+    <CodeBlock.AdapterProvider value={adapter}>
+      <CodeBlock.Root code={code} language={'json'}>
+        <CodeBlock.Header>
+          <CodeBlock.Title>{tab}</CodeBlock.Title>
+          <CodeBlock.CopyTrigger asChild>
+            <IconButton variant="ghost" size="2xs">
+              <CodeBlock.CopyIndicator />
+            </IconButton>
+          </CodeBlock.CopyTrigger>
+        </CodeBlock.Header>
+        <CodeBlock.Content>
+          <CodeBlock.Code>
+            <CodeBlock.CodeText />
+          </CodeBlock.Code>
+        </CodeBlock.Content>
+      </CodeBlock.Root>
+    </CodeBlock.AdapterProvider>
+  );
+};
+
+export default JsonCodeBlock;

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

@@ -0,0 +1,94 @@
+'use client';
+
+import { useState } from 'react';
+import _ from 'lodash';
+import {
+  IconButton,
+  CloseButton,
+  Drawer,
+  Portal,
+  Tabs,
+} from '@chakra-ui/react';
+import dynamic from 'next/dynamic';
+import { FiSettings } from 'react-icons/fi';
+import { useTestContext } from '../context';
+
+const JsonCodeBlock = dynamic(() => import('./JsonCodeBlock'), { ssr: false });
+
+type TabType = 'test' | 'bot';
+
+export const TestCardConfigDrawer = () => {
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState<TabType>('test');
+  const { testResult } = useTestContext();
+
+  const getTestConf = () => JSON.stringify(testResult.test, null, 2);
+  const getBotConf = () =>
+    JSON.stringify(
+      _.omit(
+        { ...testResult.test, disabled: false },
+        'name',
+        'testSuiteId',
+        'options',
+      ),
+      null,
+      2,
+    );
+
+  return (
+    <Tabs.Root
+      value={tab}
+      onValueChange={(e) => setTab(e.value as TabType)}
+      variant={'line'}
+    >
+      <Drawer.Root
+        open={open}
+        onOpenChange={(e) => setOpen(e.open)}
+        size={'lg'}
+      >
+        <Drawer.Trigger asChild>
+          <IconButton
+            colorPalette="teal"
+            size="xs"
+            variant={open ? 'surface' : 'outline'}
+          >
+            <FiSettings />
+          </IconButton>
+        </Drawer.Trigger>
+        <Portal>
+          <Drawer.Backdrop />
+          <Drawer.Positioner>
+            <Drawer.Content display="flex" flexDirection="column">
+              <Drawer.Header>
+                <Drawer.Title>
+                  Configuration
+                  <Tabs.List mt={2}>
+                    <Tabs.Trigger colorPalette={'teal'} value="test">
+                      Test
+                    </Tabs.Trigger>
+                    <Tabs.Trigger colorPalette={'teal'} value="bot">
+                      Bot
+                    </Tabs.Trigger>
+                  </Tabs.List>
+                </Drawer.Title>
+
+                <Drawer.CloseTrigger asChild>
+                  <CloseButton position="absolute" right="3" top="3" />
+                </Drawer.CloseTrigger>
+              </Drawer.Header>
+
+              <Drawer.Body overflowY="auto" flex="1">
+                <Tabs.Content value="test">
+                  <JsonCodeBlock tab={tab} code={getTestConf()} />
+                </Tabs.Content>
+                <Tabs.Content value="bot">
+                  <JsonCodeBlock tab={tab} code={getBotConf()} />
+                </Tabs.Content>
+              </Drawer.Body>
+            </Drawer.Content>
+          </Drawer.Positioner>
+        </Portal>
+      </Drawer.Root>
+    </Tabs.Root>
+  );
+};

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

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Button,
+  CloseButton,
+  Dialog,
+  IconButton,
+  Portal,
+  Text,
+} from '@chakra-ui/react';
+import { FiTrash2 } from 'react-icons/fi';
+import { deleteBacktest } from '@actions/backtest';
+import { useBacktestMutations } from '@store';
+import { toaster } from '@UI';
+import { useTestContext } from '../context';
+
+export const TestCardDeleteButton = () => {
+  const [open, setOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { removeBacktestTest } = useBacktestMutations();
+  const { testResult } = useTestContext();
+
+  const handleDelete = async () => {
+    if (isDeleting) {
+      return;
+    }
+
+    setIsDeleting(true);
+    setError(null);
+
+    try {
+      const isDeleted = await deleteBacktest(
+        testResult.test.name,
+        testResult.test.strategyName,
+      );
+
+      if (!isDeleted) {
+        setError('Failed to delete backtest.');
+        toaster.error({
+          title: 'Delete failed',
+          description: 'Backtest was not deleted.',
+        });
+        return;
+      }
+
+      await removeBacktestTest(testResult.test.name);
+      setOpen(false);
+      toaster.success({
+        title: 'Backtest deleted',
+        description: testResult.test.name,
+      });
+    } catch {
+      setError('Failed to delete backtest.');
+      toaster.error({
+        title: 'Delete failed',
+        description: 'Unexpected error while deleting backtest.',
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={(e) => {
+        setOpen(e.open);
+        if (!e.open) {
+          setError(null);
+        }
+      }}
+    >
+      <Dialog.Trigger asChild>
+        <IconButton
+          size="xs"
+          colorPalette="red"
+          variant="outline"
+          aria-label="Delete backtest"
+        >
+          <FiTrash2 />
+        </IconButton>
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Delete test</Dialog.Title>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton position="absolute" right="3" top="3" />
+              </Dialog.CloseTrigger>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Text fontSize="sm" color="gray.200">
+                Delete backtest <b>{testResult.test.name}</b>?
+              </Text>
+              <Text fontSize="sm" color="gray.400" mt={2}>
+                This action cannot be undone.
+              </Text>
+              {error ? (
+                <Text fontSize="sm" color="red.400" mt={3}>
+                  {error}
+                </Text>
+              ) : null}
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.ActionTrigger asChild>
+                <Button variant="outline" size="sm" disabled={isDeleting}>
+                  Cancel
+                </Button>
+              </Dialog.ActionTrigger>
+              <Button
+                colorPalette="red"
+                size="sm"
+                onClick={handleDelete}
+                loading={isDeleting}
+              >
+                Delete
+              </Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { FavoriteButton } from '@shared/FavoriteButton';
+import { useFavoriteTests } from '@store';
+import { useTestContext } from '../context';
+
+export const TestCardFavoriteIndicator = () => {
+  const { testResult } = useTestContext();
+  const { checkIsFavorite, toggleFavorite } = useFavoriteTests();
+  const isFavorite = checkIsFavorite(testResult.test.name);
+
+  return (
+    <FavoriteButton
+      isFavorite={isFavorite}
+      onChangeFavorite={() =>
+        toggleFavorite(testResult.test.name, testResult.stat.netProfit)
+      }
+    />
+  );
+};

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

@@ -0,0 +1,40 @@
+import { IconButton } from '@chakra-ui/react';
+import { FiBarChart2 } from 'react-icons/fi';
+import { useTestContext } from '../context';
+
+const connectorNameToProvider: Record<
+  string,
+  'bybit' | 'binance' | 'coinbase'
+> = {
+  bybit: 'bybit',
+  binance: 'binance',
+  coinbase: 'coinbase',
+};
+
+export const TestCardOpenDashboardButton = () => {
+  const { testResult } = useTestContext();
+  const provider =
+    connectorNameToProvider[testResult.test.connectorName.toLowerCase()] ||
+    'bybit';
+  const params = new URLSearchParams();
+
+  params.set('backtestId', testResult.test.name);
+  params.set('backtestStrategy', testResult.test.strategyName);
+
+  return (
+    <IconButton
+      size="xs"
+      colorPalette="teal"
+      variant="outline"
+      onClick={() =>
+        window.open(
+          `/routes/dashboard/${provider}/${testResult.test.symbol}/15?${params.toString()}`,
+          '_blank',
+          'noopener,noreferrer',
+        )
+      }
+    >
+      <FiBarChart2 />
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { IconButton } from '@chakra-ui/react';
+import { FiExternalLink } from 'react-icons/fi';
+import { useTestContext } from '../context';
+
+export const TestCardOpenReportButton = () => {
+  const { testResult } = useTestContext();
+
+  return (
+    <IconButton
+      size="xs"
+      colorPalette="teal"
+      variant="outline"
+      onClick={() =>
+        window.open(
+          `/routes/backtest/${testResult.test.name}`,
+          '_blank',
+          'noopener,noreferrer',
+        )
+      }
+    >
+      <FiExternalLink />
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import _ from 'lodash';
+import { Box } from '@chakra-ui/react';
+import { TestResultContext } from '../context';
+import { TestCardSkeleton } from '../Skeleton';
+import { useTest, useFavoriteTests } from '@store';
+
+interface TestRootProps {
+  testName: string;
+  noWrapper?: boolean;
+}
+
+export const TestCardRoot = ({
+  testName,
+  noWrapper,
+  children,
+}: PropsWithChildren<TestRootProps>) => {
+  const testResult = useTest(testName);
+  const { checkIsFavorite } = useFavoriteTests();
+
+  if (_.isEmpty(testResult)) {
+    return <TestCardSkeleton />;
+  }
+
+  const isFavorite = checkIsFavorite(testResult.test.name);
+
+  const getBorderColor = () => {
+    if (noWrapper) {
+      return 'transparent';
+    }
+    if (isFavorite) {
+      return 'yellow.800';
+    }
+    return 'gray.800';
+  };
+
+  return (
+    <TestResultContext.Provider value={{ testResult: testResult }}>
+      <Box
+        p={2}
+        mb={4}
+        maxW="1400px"
+        borderRadius="md"
+        shadow={noWrapper ? undefined : 'sm'}
+        borderWidth="1px"
+        borderColor={getBorderColor()}
+        overflowX="auto"
+      >
+        {children}
+      </Box>
+    </TestResultContext.Provider>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { Box, SkeletonText, Skeleton, Stack } from '@chakra-ui/react';
+
+export const TestCardSkeleton = () => (
+  <Box
+    p={2}
+    mb={4}
+    width="1400px"
+    height="628px"
+    bg="gray.900"
+    borderRadius="md"
+    shadow="sm"
+    borderWidth="1px"
+    overflowX="auto"
+  >
+    <Stack gap="6">
+      <SkeletonText noOfLines={2} gap="6" />
+      <Skeleton height="400px" />
+      <SkeletonText noOfLines={3} gap="6" />
+    </Stack>
+  </Box>
+);