@tradejs/app 1.0.9 → 1.0.11

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

@@ -0,0 +1,128 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { Button } from '@chakra-ui/react';
+import type { OrderLogData } from '@tradejs/types';
+import {
+  formatCompactNumber,
+  formatFee,
+  formatInteger,
+  formatPriceUsdt,
+  formatUsdt,
+  getPnlColor,
+  OrdersDrawerPanel,
+  type OrdersDrawerOrder,
+} from '#components/Shared/OrdersDrawer';
+import { useBacktest } from '#store';
+import { useTestContext } from '../context';
+
+const BACKTEST_ORDER_ROW_HEIGHT = 254;
+
+const backtestStatusFilterOptions = [
+  { label: 'All', value: 'all' },
+  { label: 'Open', value: 'active' },
+  { label: 'Closed', value: 'closed' },
+] as const;
+
+const getOrderStatus = (type: OrderLogData[number]['type']) => {
+  if (type.startsWith('OPEN')) {
+    return { label: 'OPEN', color: 'orange' };
+  }
+
+  if (type.startsWith('TAKE_PROFIT')) {
+    return { label: 'TP', color: 'teal' };
+  }
+
+  if (type.startsWith('STOP_LOSS')) {
+    return { label: 'SL', color: 'red' };
+  }
+
+  return { label: 'CLOSE', color: 'gray' };
+};
+
+const mapBacktestOrder = (order: OrderLogData[number]): OrdersDrawerOrder => {
+  const status = getOrderStatus(order.type);
+
+  return {
+    id: `${order.index}:${order.timestamp}:${order.type}`,
+    title: order.symbol,
+    period: {
+      start: order.timestamp,
+    },
+    direction: order.direction,
+    status: order.type.startsWith('OPEN') ? 'active' : 'closed',
+    statusLabel: status.label,
+    statusColor: status.color,
+    pnl: order.profit,
+    accentColor: order.type.startsWith('OPEN')
+      ? 'orange.300'
+      : getPnlColor(order.profit),
+    metrics: [
+      {
+        title: 'Price',
+        value: formatPriceUsdt(order.price),
+      },
+      {
+        title: 'Qty',
+        value: formatCompactNumber(order.qty),
+      },
+      {
+        title: 'Notional',
+        value: formatUsdt(order.price * order.qty),
+      },
+      {
+        title: 'Fee',
+        value: formatFee(order.fee ?? null),
+      },
+      {
+        title: 'Equity',
+        value: formatUsdt(order.amount),
+      },
+      {
+        title: 'Index',
+        value: formatInteger(order.index),
+      },
+    ],
+  };
+};
+
+interface TestCardOrdersDrawerPanelProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const TestCardOrdersDrawerPanel = ({
+  open,
+  onOpenChange,
+}: TestCardOrdersDrawerPanelProps) => {
+  const {
+    testResult: { test },
+  } = useTestContext();
+  const { backtest, loading } = useBacktest(open ? test.name : undefined);
+  const orders = useMemo(() => backtest.map(mapBacktestOrder), [backtest]);
+
+  return (
+    <OrdersDrawerPanel
+      title={`${test.symbol} orders`}
+      open={open}
+      orders={orders}
+      rowHeight={BACKTEST_ORDER_ROW_HEIGHT}
+      statusFilterOptions={backtestStatusFilterOptions}
+      emptyText={loading ? 'Loading orders...' : 'No orders for this backtest.'}
+      onOpenChange={onOpenChange}
+    />
+  );
+};
+
+export const TestCardOrdersDrawer = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button size="sm" variant="outline" onClick={() => setOpen(true)}>
+        Orders
+      </Button>
+      <TestCardOrdersDrawerPanel open={open} onOpenChange={setOpen} />
+    </>
+  );
+};

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

@@ -1,11 +1,10 @@
 'use client';
 
 import { PropsWithChildren } from 'react';
-import _ from 'lodash';
-import { Box } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { TestResultContext } from '../context';
 import { TestCardSkeleton } from '../Skeleton';
-import { useTest, useFavoriteTests } from '@store';
+import { useTest, useFavoriteTests } from '#store';
 
 interface TestRootProps {
   testName: string;
@@ -20,7 +19,22 @@ export const TestCardRoot = ({
   const testResult = useTest(testName);
   const { checkIsFavorite } = useFavoriteTests();
 
-  if (_.isEmpty(testResult)) {
+  if (testResult === null) {
+    return (
+      <Box
+        p={4}
+        mb={4}
+        borderRadius="md"
+        borderWidth="1px"
+        borderColor="gray.700"
+        color="gray.400"
+      >
+        <Text>Backtest data is no longer available.</Text>
+      </Box>
+    );
+  }
+
+  if (!testResult) {
     return <TestCardSkeleton />;
   }
 

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

@@ -11,6 +11,8 @@ const getColorByLevel = (level: ThresholdLevel) => {
       return 'teal.500';
     case 'warning':
       return 'fg.warning';
+    case 'neutral':
+      return 'gray.300';
     case 'error':
     default:
       return 'fg.error';

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

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from 'react';
+import { Button, CloseButton, Drawer, Portal } from '@chakra-ui/react';
+import { TestCardStatTable } from '../Stat';
+import { useTestContext } from '../context';
+
+interface TestCardStatDrawerPanelProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const TestCardStatDrawerPanel = ({
+  open,
+  onOpenChange,
+}: TestCardStatDrawerPanelProps) => {
+  const {
+    testResult: { test },
+  } = useTestContext();
+
+  return (
+    <Drawer.Root
+      size="xl"
+      open={open}
+      onOpenChange={(event) => onOpenChange(event.open)}
+    >
+      <Portal>
+        <Drawer.Backdrop />
+        <Drawer.Positioner>
+          <Drawer.Content
+            display="flex"
+            flexDirection="column"
+            w="50vw"
+            minW="640px"
+            maxW="50vw"
+            bg="gray.950"
+          >
+            <Drawer.Header>
+              <Drawer.Title>{test.symbol} stat</Drawer.Title>
+              <Drawer.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Drawer.CloseTrigger>
+            </Drawer.Header>
+
+            <Drawer.Body overflowY="auto" flex="1" minH="0" w="full">
+              <TestCardStatTable />
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Positioner>
+      </Portal>
+    </Drawer.Root>
+  );
+};
+
+export const TestCardStatDrawer = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button size="sm" variant="outline" onClick={() => setOpen(true)}>
+        Stat
+      </Button>
+      <TestCardStatDrawerPanel open={open} onOpenChange={setOpen} />
+    </>
+  );
+};

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

@@ -8,9 +8,11 @@ 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';
+import { TestCardOrdersDrawer } from './OrdersDrawer';
+import { TestCardStatDrawer } from './StatDrawer';
+import { TestCardActionsMenu } from './ActionsMenu';
 
 export const TestCard = {
   Root: TestCardRoot,
@@ -23,6 +25,8 @@ export const TestCard = {
   CompareButton: TestCardCompareButton,
   FavoriteIndicator: TestCardFavoriteIndicator,
   OpenDashboardButton: TestCardOpenDashboardButton,
-  OpenReportButton: TestCardOpenReportButton,
+  OrdersDrawer: TestCardOrdersDrawer,
+  StatDrawer: TestCardStatDrawer,
   DeleteButton: TestCardDeleteButton,
+  ActionsMenu: TestCardActionsMenu,
 };

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

@@ -5,8 +5,8 @@ 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 { TestCard } from '#components/Backtest/TestCard';
+import { EmptyState } from '#ui';
 import { Items } from '@tradejs/types';
 
 interface ListProps {
@@ -44,7 +44,7 @@ export const TestList = ({
     ({ index, style }: ListChildComponentProps) => {
       const item = tests[index];
       return (
-        <Box style={style} px={2}>
+        <Box style={style}>
           <TestCard.Root key={item.value} testName={item.value}>
             <TestCard.Title
               leftSlot={
@@ -61,12 +61,7 @@ export const TestList = ({
                 </Checkbox.Root>
               }
             >
-              <TestCard.CompareButton />
-              <TestCard.FavoriteIndicator />
-              <TestCard.ConfigDrawer />
-              <TestCard.OpenDashboardButton />
-              <TestCard.OpenReportButton />
-              <TestCard.DeleteButton />
+              <TestCard.ActionsMenu />
             </TestCard.Title>
             <TestCard.Chart />
             <TestCard.StatLine />

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

@@ -17,7 +17,7 @@ import {
   SkeletonText,
 } from '@chakra-ui/react';
 import { GiArtificialHive } from 'react-icons/gi';
-import { useAiChatStore, useFilters } from '@store';
+import { useAiChatStore, useFilters } from '#store';
 import { Message } from './Message';
 
 export const AiDrawer = () => {

package/src/app/components/Dashboard/KlineChart/hooks/useBacktest.ts

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import _ from 'lodash';
 import { registerOverlay, registerIndicator, Chart } from 'klinecharts';
 import { KlineChartItem, OrderLogData } from '@tradejs/types';
-import { useBacktest as useBacktestStore } from '@store';
+import { useBacktest as useBacktestStore } from '#store';
 import {
   TradeZoneMode,
   createTradeZonePointFigure,

package/src/app/components/Dashboard/KlineChart/hooks/useBbIndicator.ts

@@ -1,8 +1,10 @@
 import _ from 'lodash';
 import { useEffect } from 'react';
-import { BollingerBands } from 'technicalindicators';
 import { registerIndicator, Chart } from 'klinecharts';
 
+const { BollingerBands } =
+  require('fast-technical-indicators') as typeof import('fast-technical-indicators');
+
 export const useBbIndicator = (
   chart: Chart | null,
   enabled: boolean,
@@ -43,10 +45,13 @@ export const useBbIndicator = (
             const bb: Record<string, number> = {};
             periods.forEach((period, periodIndex) => {
               if (candleIndex >= period - 1) {
-                bb[`BBUpper${period}`] =
-                  values[periodIndex][candleIndex - (period - 1)].upper;
-                bb[`BBLower${period}`] =
-                  values[periodIndex][candleIndex - (period - 1)].lower;
+                const value = values[periodIndex][candleIndex - (period - 1)];
+                if (value.upper != null) {
+                  bb[`BBUpper${period}`] = value.upper;
+                }
+                if (value.lower != null) {
+                  bb[`BBLower${period}`] = value.lower;
+                }
               }
             });
 

package/src/app/components/Dashboard/KlineChart/hooks/useBtcCorrelation.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import _ from 'lodash';
 import { Chart } from 'klinecharts';
 import { Filters, Provider } from '@tradejs/types';
-import { useData } from '@store';
+import { useData } from '#store';
 import { CORRELATION_WINDOW } from '@tradejs/core/constants';
 import { getCloseAtOrBefore, grayDashedLineStyle } from './indicatorShared';
 import { useManagedIndicator } from './useManagedIndicator';

package/src/app/components/Dashboard/KlineChart/hooks/useBtcIndicator.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import _ from 'lodash';
 import { Chart } from 'klinecharts';
 import { Filters, Provider } from '@tradejs/types';
-import { useData } from '@store';
+import { useData } from '#store';
 import { getCloseAtOrBefore } from './indicatorShared';
 import { useManagedIndicator } from './useManagedIndicator';
 
@@ -62,16 +62,19 @@ export const useBtcIndicator = (
     () => ({
       bybit: {
         ...filters,
+        universe: 'crypto' as const,
         provider: 'bybit' as Provider,
         symbol: enabled ? 'BTCUSDT' : '',
       },
       binance: {
         ...filters,
+        universe: 'crypto' as const,
         provider: 'binance' as Provider,
         symbol: enabled ? 'BTCUSDT' : '',
       },
       coinbase: {
         ...filters,
+        universe: 'crypto' as const,
         provider: 'coinbase' as Provider,
         symbol: enabled ? 'BTCUSDT' : '',
       },

package/src/app/components/Dashboard/KlineChart/hooks/useEmaIndicator.ts

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
-import { EMA } from 'technicalindicators';
 import { registerIndicator, Chart } from 'klinecharts';
 
+const { EMA } =
+  require('fast-technical-indicators') as typeof import('fast-technical-indicators');
+
 export const useEmaIndicator = (
   chart: Chart | null,
   enabled: boolean,

package/src/app/components/Dashboard/KlineChart/hooks/usePluginIndicators.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { Chart, registerIndicator } from 'klinecharts';
 import { Indicator, KlineChartData } from '@tradejs/types';
-import { IndicatorRendererConfig } from '@store';
+import { IndicatorRendererConfig } from '#store';
 
 type RenderersMap = Record<string, IndicatorRendererConfig>;
 type RuntimeEntry = {

package/src/app/components/Dashboard/KlineChart/hooks/useSetup.ts

@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Chart, registerOverlay } from 'klinecharts';
-import { getSignal } from '@actions/signal';
+import { getSignal } from '#actions/signal';
 import { toMs } from '@tradejs/core/time';
 import { Signal } from '@tradejs/types';
 import { createTradeZonePointFigure } from '../figures/tradeZonePointFigure';

package/src/app/components/Dashboard/KlineChart/hooks/useSignal.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import _ from 'lodash';
 import { Chart } from 'klinecharts';
-import { getSignal } from '@actions/signal';
+import { getSignal } from '#actions/signal';
 import { Signal } from '@tradejs/types';
 import {
   drawSignalFigures,

package/src/app/components/Dashboard/KlineChart/hooks/useSpreadIndicator.ts

@@ -4,7 +4,7 @@ import { Chart } from 'klinecharts';
 import { Filters, Interval, Provider } from '@tradejs/types';
 import { smoothSpreadSeries } from '@tradejs/indicators';
 import { API } from '@tradejs/core/api';
-import { useData } from '@store';
+import { useData } from '#store';
 import { grayDashedLineStyle } from './indicatorShared';
 import { useManagedIndicator } from './useManagedIndicator';
 

package/src/app/components/Dashboard/KlineChart/hooks/useTrendLine.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import _ from 'lodash';
 import { Chart, registerOverlay } from 'klinecharts';
-import { getSignal } from '@actions/signal';
+import { getSignal } from '#actions/signal';
 import { toMs } from '@tradejs/core/time';
 import { createTrendlineEngine } from '@tradejs/core/indicators';
 import { Signal, TrendLine } from '@tradejs/types';

package/src/app/components/Dashboard/KlineChart/hooks/useWmaIndicator.ts

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
-import { WMA } from 'technicalindicators';
 import { registerIndicator, Chart } from 'klinecharts';
 
+const { WMA } =
+  require('fast-technical-indicators') as typeof import('fast-technical-indicators');
+
 export const useWmaIndicator = (
   chart: Chart | null,
   enabled: boolean,

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

@@ -8,7 +8,7 @@ import {
   dispose,
   DataLoaderSubscribeBarParams,
 } from 'klinecharts';
-import { OverlaySpinner } from '@UI';
+import { OverlaySpinner } from '#ui';
 import { Indicator, UIFilters } from '@tradejs/types';
 import {
   useBbIndicator,
@@ -27,7 +27,7 @@ import {
   useSetup,
 } from './hooks';
 import { usePluginIndicators } from './hooks/usePluginIndicators';
-import { IndicatorRendererConfig, useData } from '@store';
+import { IndicatorRendererConfig, useData } from '#store';
 import { darkTheme } from './styles';
 
 interface KlineChartProps {
@@ -35,6 +35,7 @@ interface KlineChartProps {
   filters: UIFilters;
   indicators: Record<string, Indicator>;
   indicatorRenderers: Record<string, IndicatorRendererConfig>;
+  live?: boolean;
 }
 
 export const KlineChart = ({
@@ -42,9 +43,10 @@ export const KlineChart = ({
   filters,
   indicators,
   indicatorRenderers,
+  live = true,
 }: KlineChartProps) => {
   const chartRef = useRef<Chart | null>(null);
-  const { data, key, fulfilled } = useData(filters);
+  const { data, key, fulfilled } = useData(filters, live);
   const updateDataCallback = useRef<
     DataLoaderSubscribeBarParams['callback'] | null
   >(null);
@@ -63,7 +65,7 @@ export const KlineChart = ({
   }, [id]);
 
   useEffect(() => {
-    if (!chartRef.current || _.isEmpty(data)) {
+    if (!chartRef.current || !fulfilled || _.isEmpty(data)) {
       return;
     }
 
@@ -152,8 +154,16 @@ export const KlineChart = ({
   useWmaIndicator(chart, indicators.wma.enabled, indicators.wma.periods || []);
   useVolIndicator(chart, indicators.vol.enabled);
   useBtcIndicator(chart, indicators.btc.enabled, filters);
-  useBtcCorrelation(chart, indicators.btcCorrelation?.enabled, filters);
-  useSpreadIndicator(chart, indicators.spread?.enabled, filters);
+  useBtcCorrelation(
+    chart,
+    indicators.btcCorrelation?.enabled && filters.universe !== 'tradfi',
+    filters,
+  );
+  useSpreadIndicator(
+    chart,
+    indicators.spread?.enabled && filters.universe !== 'tradfi',
+    filters,
+  );
   useBacktest(chart, filters.backtestId || undefined);
   useSupportResistanceLines(chart, indicators.resistant?.enabled);
   useSignal(chart, true);
@@ -162,7 +172,11 @@ export const KlineChart = ({
 
   return (
     <>
-      <div id={id} />
+      <div
+        id={id}
+        data-testid="market-chart"
+        data-chart-ready={fulfilled && !_.isEmpty(data) ? 'true' : 'false'}
+      />
       {!fulfilled && <OverlaySpinner />}
     </>
   );

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

@@ -1,43 +1,24 @@
 'use client';
 
 import _ from 'lodash';
-import { useEffect } from 'react';
-import { useFilters, useIndicators } from '@store';
-import { getTimestamp } from '@tradejs/core/time';
+import { useFilters, useIndicators } from '#store';
 import { KlineChart } from '../KlineChart';
 
-const DASHBOARD_REFRESH_DELAY = 10_000;
-
 interface MainChartProps {
   screenshotMode?: boolean;
 }
 
 export const MainChart = ({ screenshotMode = false }: MainChartProps) => {
-  const { filters, setFilters } = useFilters();
+  const { filters } = useFilters();
   const { indicatorsByKey, indicatorRenderers } = useIndicators();
 
-  useEffect(() => {
-    if (screenshotMode) {
-      return;
-    }
-
-    const intervalId = setInterval(() => {
-      setFilters({
-        end: getTimestamp(),
-      });
-    }, DASHBOARD_REFRESH_DELAY);
-
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, [screenshotMode, setFilters]);
-
   return (
     <KlineChart
       id="main-chart"
       filters={filters}
       indicators={indicatorsByKey}
       indicatorRenderers={indicatorRenderers}
+      live={!screenshotMode && !filters.backtestId}
     />
   );
 };

package/src/app/components/Shared/AppShell.tsx

@@ -2,9 +2,9 @@
 
 import { Box } from '@chakra-ui/react';
 import { usePathname } from 'next/navigation';
-import { Sidebar } from '@shared/Sidebar';
+import { Sidebar } from '#shared/Sidebar';
 
-const AUTH_ROUTES = ['/routes/signin'];
+const AUTH_ROUTES = ['/routes/signin', '/routes/install'];
 
 const isAuthRoute = (pathname: string) =>
   AUTH_ROUTES.some((route) => pathname.startsWith(route));