@tradejs/app 2.0.11 → 2.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradejs/app",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "description": "Installable Next.js UI for the TradeJS TypeScript framework: dashboards, backtests, charts, and runtime data.",
   "keywords": [
     "tradejs",
@@ -51,12 +51,12 @@
     "@emotion/react": "^11.14.0",
     "@langchain/core": "^1.2.3",
     "@langchain/openai": "^1.5.5",
-    "@tradejs/connectors": "^2.0.11",
-    "@tradejs/core": "^2.0.11",
-    "@tradejs/indicators": "^2.0.11",
-    "@tradejs/infra": "^2.0.11",
-    "@tradejs/node": "^2.0.11",
-    "@tradejs/types": "^2.0.11",
+    "@tradejs/connectors": "^2.0.13",
+    "@tradejs/core": "^2.0.13",
+    "@tradejs/indicators": "^2.0.13",
+    "@tradejs/infra": "^2.0.13",
+    "@tradejs/node": "^2.0.13",
+    "@tradejs/types": "^2.0.13",
     "@types/bcryptjs": "2.4.6",
     "@types/lodash": "4.17.24",
     "@types/node": "24.13.3",

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

@@ -7,7 +7,6 @@ import {
   LineChart,
   CartesianGrid,
   Line,
-  XAxis,
   YAxis,
   Tooltip,
   ReferenceLine,
@@ -18,6 +17,8 @@ import { useTestContext } from '../context';
 import { TestCompareList } from '@tradejs/types';
 import { mapOrderLogToChartData, getChartData } from './utils';
 import { getFormatted, getTimeline } from '@tradejs/core/backtest';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
 
 interface TestCardChartProps {
   height?: string | number;
@@ -58,6 +59,9 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
 
   const { formatted: maxAmount } = getFormatted(stat, 'maxAmount');
   const { formatted: minAmount } = getFormatted(stat, 'minAmount');
+  const startTimestamp = test.options.start ?? testResult.orderLog[0]?.[0] ?? 0;
+  const endTimestamp =
+    test.options.end ?? testResult.orderLog.at(-1)?.[0] ?? startTimestamp;
 
   return (
     <Box w="100%" minW="600px" h={height} pr={2}>
@@ -92,12 +96,19 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
                 position: 'bottom',
               }}
             />
-            <XAxis dataKey="timestamp" />
+            <TimeSeriesXAxis
+              startTimestamp={startTimestamp}
+              endTimestamp={endTimestamp}
+            />
             <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
             <Tooltip
               animationDuration={100}
               cursor={false}
-              content={<Chart.Tooltip />}
+              content={
+                <Chart.Tooltip
+                  labelFormatter={formatTimeSeriesTooltipTimestamp}
+                />
+              }
             />
 
             {chart.series.map((item) => (
@@ -108,6 +119,7 @@ export const TestCardChart = ({ height = '350px' }: TestCardChartProps) => {
                 stroke={chart.color(item.color)}
                 strokeWidth={2}
                 dot={false}
+                activeDot={{ r: 5, strokeWidth: 2 }}
               />
             ))}
           </LineChart>

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

@@ -1,4 +1,3 @@
-import { format } from 'date-fns';
 import {
   SimpleOrderLogData,
   TestResult,
@@ -11,7 +10,7 @@ const getLineName = (testResult: TestResult) =>
 export const mapOrderLogToChartData = (testResult: TestResult) => {
   const data = testResult.orderLog.map(([timestamp, amount]) => ({
     [getLineName(testResult)]: amount,
-    timestamp: format(timestamp, 'dd.MM'),
+    timestamp,
   }));
 
   const series = [
@@ -52,8 +51,6 @@ 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,
@@ -65,7 +62,7 @@ export const getChartData = (testList: TestCompareList, timeline: number[]) => {
 
     return {
       ...values,
-      timestamp: formattedTimestamp,
+      timestamp,
     };
   });
 

package/src/app/components/Shared/Charts/TimeSeriesXAxis.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useMemo } from 'react';
+import { XAxis } from 'recharts';
+import {
+  buildTimeSeriesTicks,
+  formatTimeSeriesAxisTimestamp,
+} from '#app/lib/timeSeriesChart';
+
+export const TimeSeriesXAxis = ({
+  startTimestamp,
+  endTimestamp,
+  tickCount = 7,
+  minTickGap = 24,
+  includeTime,
+}: {
+  startTimestamp: number;
+  endTimestamp: number;
+  tickCount?: number;
+  minTickGap?: number;
+  includeTime?: boolean;
+}) => {
+  const start = Math.min(startTimestamp, endTimestamp);
+  const end = Math.max(startTimestamp, endTimestamp);
+  const ticks = useMemo(
+    () => buildTimeSeriesTicks(start, end, tickCount),
+    [end, start, tickCount],
+  );
+
+  return (
+    <XAxis
+      dataKey="timestamp"
+      type="number"
+      scale="time"
+      domain={[start, end]}
+      ticks={ticks}
+      tickFormatter={(timestamp) =>
+        formatTimeSeriesAxisTimestamp({
+          timestamp,
+          startTimestamp: start,
+          endTimestamp: end,
+          includeTime,
+        })
+      }
+      tickCount={tickCount}
+      interval="preserveStartEnd"
+      minTickGap={minTickGap}
+      allowDataOverflow
+    />
+  );
+};

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

@@ -1434,10 +1434,14 @@ const mapRuntimeOrder = (order: RuntimeOrderView): OrdersDrawerOrder => {
 export const RuntimeStrategyCard = ({
   strategy,
   provider,
+  startTimestamp,
+  endTimestamp,
   onUpdated,
 }: {
   strategy: RuntimeStrategyView;
   provider: string;
+  startTimestamp: number;
+  endTimestamp: number;
   onUpdated: () => Promise<void> | void;
 }) => {
   const [configOpen, setConfigOpen] = useState(false);
@@ -2179,6 +2183,8 @@ export const RuntimeStrategyCard = ({
         orderLog={strategy.orderLog}
         stat={strategy.stat}
         aiGateChanges={strategy.aiGateChanges}
+        startTimestamp={startTimestamp}
+        endTimestamp={endTimestamp}
       />
 
       <SimpleGrid columns={{ base: 4, md: 8 }} p={4}>

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

@@ -10,18 +10,20 @@ import {
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
-  XAxis,
   YAxis,
 } from 'recharts';
-import { format } from 'date-fns';
 import { getFormatted } from '@tradejs/core/backtest';
 import type { SimpleOrderLogData, TestStat } from '@tradejs/types';
 import type { RuntimeStrategyAiGateChange } from '#app/lib/runtimeStrategies';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
 
 interface RuntimeStrategyChartProps {
   orderLog: SimpleOrderLogData;
   stat: TestStat;
   aiGateChanges: RuntimeStrategyAiGateChange[];
+  startTimestamp: number;
+  endTimestamp: number;
   height?: string | number;
 }
 
@@ -29,6 +31,8 @@ export const RuntimeStrategyChart = ({
   orderLog,
   stat,
   aiGateChanges,
+  startTimestamp,
+  endTimestamp,
   height = '350px',
 }: RuntimeStrategyChartProps) => {
   const chartData = useMemo(
@@ -116,12 +120,9 @@ export const RuntimeStrategyChart = ({
                 }}
               />
             ))}
-            <XAxis
-              dataKey="timestamp"
-              type="number"
-              scale="time"
-              domain={['dataMin', 'dataMax']}
-              tickFormatter={(timestamp) => format(timestamp, 'dd.MM')}
+            <TimeSeriesXAxis
+              startTimestamp={startTimestamp}
+              endTimestamp={endTimestamp}
             />
             <YAxis tickCount={10} domain={[stat.minAmount - 10, 'auto']} />
             <Tooltip
@@ -129,9 +130,7 @@ export const RuntimeStrategyChart = ({
               cursor={false}
               content={
                 <Chart.Tooltip
-                  labelFormatter={(timestamp) =>
-                    format(Number(timestamp), 'dd.MM.yyyy HH:mm')
-                  }
+                  labelFormatter={formatTimeSeriesTooltipTimestamp}
                 />
               }
             />

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

@@ -9,11 +9,11 @@ import {
   LineChart,
   ResponsiveContainer,
   Tooltip,
-  XAxis,
   YAxis,
 } from 'recharts';
-import { format } from 'date-fns';
 import type { SimpleOrderLogData } from '@tradejs/types';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
 
 export const StrategySnapshotChart = ({
   orderLog,
@@ -27,7 +27,7 @@ export const StrategySnapshotChart = ({
   const chartData = useMemo(
     () => ({
       data: orderLog.map(([timestamp, amount]) => ({
-        timestamp: format(timestamp, 'dd.MM'),
+        timestamp,
         equity: amount,
       })),
       series: [
@@ -59,6 +59,8 @@ export const StrategySnapshotChart = ({
 
   const values = orderLog.map(([, amount]) => amount);
   const minValue = Math.min(...values);
+  const startTimestamp = orderLog[0][0];
+  const endTimestamp = orderLog[orderLog.length - 1][0];
 
   return (
     <Box w="100%" minW="600px" h={height} pr={2}>
@@ -66,7 +68,10 @@ export const StrategySnapshotChart = ({
         <Chart.Root maxH="md" chart={chart}>
           <LineChart data={chart.data}>
             <CartesianGrid stroke={chart.color('border')} vertical={false} />
-            <XAxis dataKey="timestamp" />
+            <TimeSeriesXAxis
+              startTimestamp={startTimestamp}
+              endTimestamp={endTimestamp}
+            />
             <YAxis
               tickCount={10}
               domain={[Math.min(minValue - 10, 0), 'auto']}
@@ -74,7 +79,11 @@ export const StrategySnapshotChart = ({
             <Tooltip
               animationDuration={100}
               cursor={false}
-              content={<Chart.Tooltip />}
+              content={
+                <Chart.Tooltip
+                  labelFormatter={formatTimeSeriesTooltipTimestamp}
+                />
+              }
             />
             {chart.series.map((item) => (
               <Line
@@ -84,6 +93,7 @@ export const StrategySnapshotChart = ({
                 stroke={chart.color(item.color)}
                 strokeWidth={2}
                 dot={false}
+                activeDot={{ r: 5, strokeWidth: 2 }}
               />
             ))}
           </LineChart>

package/src/app/lib/timeSeriesChart.ts

@@ -0,0 +1,100 @@
+import { format } from 'date-fns';
+
+const SHORT_TIME_RANGE_MS = 48 * 60 * 60 * 1000;
+
+type TooltipPayloadEntry = {
+  payload?: unknown;
+};
+
+const getValidDate = (value: unknown) => {
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value === 'boolean' ||
+    (typeof value === 'string' && value.trim() === '')
+  ) {
+    return null;
+  }
+
+  let timestamp: number;
+  try {
+    timestamp = Number(value);
+  } catch {
+    return null;
+  }
+
+  if (!Number.isFinite(timestamp)) {
+    return null;
+  }
+
+  const date = new Date(timestamp);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+export const buildTimeSeriesTicks = (
+  startTimestamp: number,
+  endTimestamp: number,
+  tickCount = 7,
+) => {
+  if (!getValidDate(startTimestamp) || !getValidDate(endTimestamp)) {
+    return [];
+  }
+
+  const start = Math.min(startTimestamp, endTimestamp);
+  const end = Math.max(startTimestamp, endTimestamp);
+  if (start === end) {
+    return [start];
+  }
+
+  const count = Math.max(2, Math.trunc(tickCount));
+  const ticks = Array.from({ length: count }, (_, index) =>
+    index === count - 1
+      ? end
+      : Math.round(start + ((end - start) * index) / (count - 1)),
+  );
+
+  return [...new Set(ticks)];
+};
+
+export const formatTimeSeriesAxisTimestamp = ({
+  timestamp,
+  startTimestamp,
+  endTimestamp,
+  includeTime,
+}: {
+  timestamp: number;
+  startTimestamp: number;
+  endTimestamp: number;
+  includeTime?: boolean;
+}) => {
+  const date = getValidDate(timestamp);
+  if (!date) {
+    return String(timestamp);
+  }
+
+  return format(
+    date,
+    includeTime ?? endTimestamp - startTimestamp <= SHORT_TIME_RANGE_MS
+      ? 'dd.MM HH:mm'
+      : 'dd.MM',
+  );
+};
+
+export const formatTimeSeriesTooltipTimestamp = (
+  value: unknown,
+  payload: ReadonlyArray<TooltipPayloadEntry> = [],
+) => {
+  const payloadTimestamp = payload.reduce<unknown>((timestamp, item) => {
+    if (timestamp !== undefined) {
+      return timestamp;
+    }
+
+    const row = item.payload;
+    return row && typeof row === 'object' && 'timestamp' in row
+      ? row.timestamp
+      : undefined;
+  }, undefined);
+  const date = getValidDate(value) ?? getValidDate(payloadTimestamp);
+
+  return date ? format(date, 'dd.MM.yyyy HH:mm') : String(value ?? '');
+};

package/src/app/routes/derivatives/page.tsx

@@ -33,13 +33,14 @@ import {
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
-  XAxis,
   YAxis,
 } from 'recharts';
 import { format } from 'date-fns';
 import { FiBarChart2 } from 'react-icons/fi';
 import { API } from '@tradejs/core/api';
 import { buildKlinePath } from '#app/lib/marketRoutes';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
 import { EmptyState, Segment, Select, toaster } from '#ui';
 
 type SummaryItem = {
@@ -91,6 +92,11 @@ type PriceResponse = {
   data?: PriceRow[];
 };
 
+type ChartWindow = {
+  startTimestamp: number;
+  endTimestamp: number;
+};
+
 type BiasTone = 'teal' | 'green' | 'red' | 'orange' | 'gray';
 
 type SymbolMetrics = {
@@ -224,12 +230,6 @@ const getChartDomain = (
   return [min - basePadding, max + basePadding];
 };
 
-const formatTimeLabel = (value: string) => {
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return value;
-  return format(parsed, 'dd.MM HH:mm');
-};
-
 const formatFullTime = (value: string | null | undefined) => {
   if (!value) return 'n/a';
   const parsed = new Date(value);
@@ -572,7 +572,7 @@ const ChartCard = ({
 
 const mapRowsToChartRows = (rows: DetailRow[]) =>
   rows.map((row) => ({
-    timestamp: formatTimeLabel(row.ts),
+    timestamp: new Date(row.ts).getTime(),
     openInterest: toFiniteNumber(row.open_interest) ?? 0,
     funding: (toFiniteNumber(row.funding_rate) ?? 0) * 10_000,
     longLiquidations: -(toFiniteNumber(row.liq_long) ?? 0),
@@ -582,15 +582,17 @@ const mapRowsToChartRows = (rows: DetailRow[]) =>
 const mapPriceRowsToChartRows = (rows: PriceRow[]) =>
   rows.map((row) => ({
     price: toFiniteNumber(row.close) ?? 0,
-    timestamp: formatTimeLabel(new Date(row.timestamp).toISOString()),
+    timestamp: row.timestamp,
   }));
 
 const SymbolPriceCard = ({
   symbol,
   rows,
+  window,
 }: {
   symbol: string;
   rows: PriceRow[];
+  window: ChartWindow;
 }) => {
   const theme = SYMBOL_THEMES[symbol];
   const symbolLabel = getSymbolLabel(symbol);
@@ -644,9 +646,21 @@ const SymbolPriceCard = ({
                 stroke={priceChart.color('border')}
                 vertical={false}
               />
-              <XAxis dataKey="timestamp" minTickGap={36} />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
               <YAxis domain={priceDomain} tickFormatter={formatPrice} />
-              <Tooltip cursor={false} content={<Chart.Tooltip />} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
               <Area
                 type="monotone"
                 dataKey={priceChart.key('price') as string}
@@ -667,9 +681,11 @@ const SymbolPriceCard = ({
 const SymbolOpenInterestCard = ({
   symbol,
   rows,
+  window,
 }: {
   symbol: string;
   rows: DetailRow[];
+  window: ChartWindow;
 }) => {
   const theme = SYMBOL_THEMES[symbol];
   const symbolLabel = getSymbolLabel(symbol);
@@ -722,9 +738,21 @@ const SymbolOpenInterestCard = ({
                 stroke={oiChart.color('border')}
                 vertical={false}
               />
-              <XAxis dataKey="timestamp" minTickGap={36} />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
               <YAxis domain={oiDomain} tickFormatter={formatAxisCompact} />
-              <Tooltip cursor={false} content={<Chart.Tooltip />} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
               <Area
                 type="monotone"
                 dataKey={oiChart.key('openInterest') as string}
@@ -745,9 +773,11 @@ const SymbolOpenInterestCard = ({
 const SymbolFundingCard = ({
   symbol,
   rows,
+  window,
 }: {
   symbol: string;
   rows: DetailRow[];
+  window: ChartWindow;
 }) => {
   const theme = SYMBOL_THEMES[symbol];
   const symbolLabel = getSymbolLabel(symbol);
@@ -781,9 +811,21 @@ const SymbolFundingCard = ({
                 stroke={fundingChart.color('gray.600')}
                 strokeDasharray="4 4"
               />
-              <XAxis dataKey="timestamp" minTickGap={36} />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
               <YAxis tickFormatter={(value) => `${value} bps`} />
-              <Tooltip cursor={false} content={<Chart.Tooltip />} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
               <Bar
                 dataKey={fundingChart.key('funding') as string}
                 isAnimationActive={false}
@@ -810,9 +852,11 @@ const SymbolFundingCard = ({
 const SymbolLiquidationCard = ({
   symbol,
   rows,
+  window,
 }: {
   symbol: string;
   rows: DetailRow[];
+  window: ChartWindow;
 }) => {
   const theme = SYMBOL_THEMES[symbol];
   const symbolLabel = getSymbolLabel(symbol);
@@ -849,9 +893,21 @@ const SymbolLiquidationCard = ({
                 stroke={liquidationChart.color('gray.600')}
                 strokeDasharray="4 4"
               />
-              <XAxis dataKey="timestamp" minTickGap={28} />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={28}
+              />
               <YAxis tickFormatter={formatAxisCompact} />
-              <Tooltip cursor={false} content={<Chart.Tooltip />} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
               <Legend />
               <Bar
                 dataKey={liquidationChart.key('longLiquidations') as string}
@@ -883,6 +939,13 @@ const DerivativesPage = () => {
   const [pricesBySymbol, setPricesBySymbol] = useState<
     Record<string, PriceRow[]>
   >({});
+  const [chartWindow, setChartWindow] = useState<ChartWindow>(() => {
+    const endTimestamp = Date.now();
+    return {
+      startTimestamp: endTimestamp - 24 * 60 * 60 * 1000,
+      endTimestamp,
+    };
+  });
   const [summaryLoading, setSummaryLoading] = useState(false);
   const [detailLoading, setDetailLoading] = useState(false);
   const [summaryError, setSummaryError] = useState('');
@@ -959,6 +1022,7 @@ const DerivativesPage = () => {
           responses.map(([symbol, payload]) => [symbol, payload.priceRows]),
         ),
       );
+      setChartWindow({ startTimestamp: from, endTimestamp: now });
     } catch (err) {
       const message =
         (err as Error)?.message ||
@@ -1101,6 +1165,7 @@ const DerivativesPage = () => {
                         key={`${symbol}:price`}
                         symbol={symbol}
                         rows={pricesBySymbol[symbol] ?? []}
+                        window={chartWindow}
                       />
                     ))}
                   </SimpleGrid>
@@ -1111,6 +1176,7 @@ const DerivativesPage = () => {
                         key={`${symbol}:oi`}
                         symbol={symbol}
                         rows={detailsBySymbol[symbol] ?? []}
+                        window={chartWindow}
                       />
                     ))}
                   </SimpleGrid>
@@ -1121,6 +1187,7 @@ const DerivativesPage = () => {
                         key={`${symbol}:funding`}
                         symbol={symbol}
                         rows={detailsBySymbol[symbol] ?? []}
+                        window={chartWindow}
                       />
                     ))}
                   </SimpleGrid>
@@ -1131,6 +1198,7 @@ const DerivativesPage = () => {
                         key={`${symbol}:liq`}
                         symbol={symbol}
                         rows={detailsBySymbol[symbol] ?? []}
+                        window={chartWindow}
                       />
                     ))}
                   </SimpleGrid>

package/src/app/routes/strategies/StrategiesPageClient.tsx

@@ -89,6 +89,17 @@ const RuntimeStrategiesContent = () => {
   const isSnapshotMode = mode === 'replay' || mode === 'ai';
   const snapshotModeLabel = mode === 'replay' ? 'Replay' : 'AI';
   const snapshotModeLabelLower = snapshotModeLabel.toLowerCase();
+  const runtimeChartWindow = useMemo(() => {
+    if (!runtimeData) {
+      return null;
+    }
+
+    return {
+      startTimestamp:
+        runtimeData.generatedAt - runtimeData.hours * 60 * 60 * 1000,
+      endTimestamp: runtimeData.generatedAt,
+    };
+  }, [runtimeData]);
 
   useEffect(() => {
     setMode(routeMode);
@@ -557,11 +568,14 @@ const RuntimeStrategiesContent = () => {
 
               {!loading &&
                 mode === 'runtime' &&
+                runtimeChartWindow &&
                 filteredRuntimeStrategies.map((strategy) => (
                   <RuntimeStrategyCard
                     key={strategy.runtimeKey}
                     strategy={strategy}
                     provider={runtimeData?.provider || 'bybit'}
+                    startTimestamp={runtimeChartWindow.startTimestamp}
+                    endTimestamp={runtimeChartWindow.endTimestamp}
                     onUpdated={load}
                   />
                 ))}