@tradejs/app 1.0.9 → 1.0.10

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

@@ -0,0 +1,94 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import { Chart, useChart } from '@chakra-ui/charts';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { format } from 'date-fns';
+import type { SimpleOrderLogData } from '@tradejs/types';
+
+export const StrategySnapshotChart = ({
+  orderLog,
+  height = '350px',
+  emptyText = 'No chart data for the selected run.',
+}: {
+  orderLog: SimpleOrderLogData;
+  height?: string | number;
+  emptyText?: string;
+}) => {
+  const chartData = useMemo(
+    () => ({
+      data: orderLog.map(([timestamp, amount]) => ({
+        timestamp: format(timestamp, 'dd.MM'),
+        equity: amount,
+      })),
+      series: [
+        {
+          name: 'equity',
+          color: 'teal.solid',
+        },
+      ],
+    }),
+    [orderLog],
+  );
+
+  const chart = useChart(chartData as any);
+
+  if (!orderLog.length) {
+    return (
+      <Box
+        w="100%"
+        minW="600px"
+        h={height}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Text color="gray.500">{emptyText}</Text>
+      </Box>
+    );
+  }
+
+  const values = orderLog.map(([, amount]) => amount);
+  const minValue = Math.min(...values);
+
+  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} />
+            <XAxis dataKey="timestamp" />
+            <YAxis
+              tickCount={10}
+              domain={[Math.min(minValue - 10, 0), '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/Strategies/StrategySnapshotList.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useCallback } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList, type ListChildComponentProps } from 'react-window';
+import { Box } from '@chakra-ui/react';
+import type { StrategyChartSnapshot } from '@tradejs/types';
+import { StrategySnapshotCard } from './StrategySnapshotCard';
+
+const SNAPSHOT_CARD_ROW_HEIGHT = 620;
+
+interface StrategySnapshotListProps {
+  strategies: StrategyChartSnapshot[];
+  mode: 'replay' | 'ai';
+  selectedCardIds: ReadonlySet<string>;
+  emptyText: string;
+  onDeleted: (cardId: string) => void;
+  onToggleSelection: (cardId: string, checked: boolean) => void;
+  overscan?: number;
+}
+
+export const StrategySnapshotList = ({
+  strategies,
+  mode,
+  selectedCardIds,
+  emptyText,
+  onDeleted,
+  onToggleSelection,
+  overscan = 1,
+}: StrategySnapshotListProps) => {
+  const itemKey = useCallback(
+    (index: number) => strategies[index]?.cardId ?? String(index),
+    [strategies],
+  );
+
+  const Row = useCallback(
+    ({ index, style }: ListChildComponentProps) => {
+      const strategy = strategies[index];
+      if (!strategy) {
+        return null;
+      }
+
+      return (
+        <Box style={style}>
+          <StrategySnapshotCard
+            snapshot={strategy}
+            mode={mode}
+            onDeleted={onDeleted}
+            selected={selectedCardIds.has(strategy.cardId)}
+            onToggleSelection={onToggleSelection}
+            emptyText={emptyText}
+          />
+        </Box>
+      );
+    },
+    [
+      emptyText,
+      mode,
+      onDeleted,
+      onToggleSelection,
+      selectedCardIds,
+      strategies,
+    ],
+  );
+
+  return (
+    <AutoSizer>
+      {({ height, width }) => (
+        <FixedSizeList
+          height={height}
+          width={width}
+          itemCount={strategies.length}
+          itemSize={SNAPSHOT_CARD_ROW_HEIGHT}
+          overscanCount={overscan}
+          itemKey={itemKey}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+    </AutoSizer>
+  );
+};

package/src/app/components/UI/Segment/index.tsx

@@ -5,14 +5,21 @@ import { Items } from '@tradejs/types';
 
 interface SegmentProps {
   defaultValue: string;
+  value?: string;
   items: Items;
   onChange?: (value: string | null) => void;
 }
 
-export const Segment = ({ defaultValue, items, onChange }: SegmentProps) => {
+export const Segment = ({
+  defaultValue,
+  value,
+  items,
+  onChange,
+}: SegmentProps) => {
   return (
     <SegmentGroup.Root
       size="md"
+      value={value}
       defaultValue={defaultValue}
       onValueChange={(e) => onChange?.(e.value)}
     >

package/src/app/components/UI/Select/index.tsx

@@ -15,8 +15,10 @@ interface SelectProps {
   value?: string[];
   items: Items;
   placeholder?: string;
+  emptyState?: string;
   width?: string | number;
   multiple?: boolean;
+  disabled?: boolean;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   onChange?: (value: string[]) => void;
   onOpenChange?: (open: boolean) => void;
@@ -28,7 +30,9 @@ export const Select = ({
   items,
   multiple = false,
   placeholder = 'Select',
+  emptyState = 'No items found',
   width = '320px',
+  disabled = false,
   size = 'sm',
   onChange,
   onOpenChange,
@@ -50,6 +54,7 @@ export const Select = ({
       size={size}
       multiple={multiple}
       width={width}
+      disabled={disabled}
     >
       <UISelect.HiddenSelect />
       <UISelect.Control>
@@ -63,19 +68,25 @@ export const Select = ({
       <Portal>
         <UISelect.Positioner>
           <UISelect.Content>
-            {collection.items.map((item) => (
-              <UISelect.Item item={item} key={item.value}>
-                <Stack gap="0">
-                  <UISelect.ItemText>{item.label}</UISelect.ItemText>
-                  {item.description && (
-                    <Span color="fg.muted" textStyle="xs">
-                      {item.description}
-                    </Span>
-                  )}
-                </Stack>
-                <UISelect.ItemIndicator />
-              </UISelect.Item>
-            ))}
+            {collection.items.length === 0 ? (
+              <Span color="fg.muted" px="3" py="2" textStyle="sm">
+                {emptyState}
+              </Span>
+            ) : (
+              collection.items.map((item) => (
+                <UISelect.Item item={item} key={item.value}>
+                  <Stack gap="0">
+                    <UISelect.ItemText>{item.label}</UISelect.ItemText>
+                    {item.description && (
+                      <Span color="fg.muted" textStyle="xs">
+                        {item.description}
+                      </Span>
+                    )}
+                  </Stack>
+                  <UISelect.ItemIndicator />
+                </UISelect.Item>
+              ))
+            )}
           </UISelect.Content>
         </UISelect.Positioner>
       </Portal>

package/src/app/components/UI/SelectWithSearch/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   Portal,
   Stack,
@@ -15,12 +15,14 @@ import { Items } from '@tradejs/types';
 
 interface SelectWithSearchProps {
   defaultValue: string[];
+  value?: string[];
   defaultInputValue?: string;
   items: Items;
   placeholder?: string;
   emptyState?: string;
   width?: string | number;
   multiple?: boolean;
+  disabled?: boolean;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   onChange?: (value: string[]) => void;
   onOpenChange?: (open: boolean) => void;
@@ -28,9 +30,11 @@ interface SelectWithSearchProps {
 
 export const SelectWithSearch = ({
   defaultValue,
+  value,
   defaultInputValue,
   items,
   multiple = false,
+  disabled = false,
   placeholder = 'Select',
   emptyState = 'No items found',
   width = '320px',
@@ -39,8 +43,29 @@ export const SelectWithSearch = ({
   onOpenChange,
 }: SelectWithSearchProps) => {
   const { contains } = useFilter({ sensitivity: 'base' });
-  const [inputValue, setInputValue] = useState(
-    defaultInputValue ?? defaultValue?.[0],
+  const defaultSelectedValue = defaultValue[0];
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const [isOpen, setIsOpen] = useState(false);
+  const currentValue = value ?? selectedValue;
+  const getSelectedInputValue = useCallback(
+    (selected: string[]) => {
+      if (multiple) return '';
+
+      const selectedItem = selected[0];
+      if (!selectedItem) return '';
+
+      return (
+        items.find((item) => item.value === selectedItem)?.label ??
+        (selectedItem === defaultSelectedValue
+          ? defaultInputValue
+          : undefined) ??
+        selectedItem
+      );
+    },
+    [defaultInputValue, defaultSelectedValue, items, multiple],
+  );
+  const [inputValue, setInputValue] = useState(() =>
+    getSelectedInputValue(currentValue),
   );
 
   const { collection, filter, set } = useListCollection({
@@ -52,26 +77,42 @@ export const SelectWithSearch = ({
     set(items);
   }, [items, set]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      setInputValue(getSelectedInputValue(currentValue));
+    }
+  }, [currentValue, getSelectedInputValue, isOpen]);
+
   return (
     <Combobox.Root
       collection={collection}
-      defaultValue={defaultValue}
+      {...(value ? { value } : { defaultValue })}
       inputValue={inputValue}
-      onValueChange={(details) => onChange?.(details.value)}
+      onValueChange={(details) => {
+        if (!value) {
+          setSelectedValue(details.value);
+        }
+        setInputValue(getSelectedInputValue(details.value));
+        onChange?.(details.value);
+      }}
       onInputValueChange={(e) => {
         filter(e.inputValue);
         setInputValue(e.inputValue);
       }}
       onOpenChange={(details) => {
+        setIsOpen(details.open);
         onOpenChange?.(details.open);
         if (details.open) {
           filter('');
           setInputValue('');
+        } else {
+          setInputValue(getSelectedInputValue(currentValue));
         }
       }}
       width={width}
       multiple={multiple}
       size={size}
+      disabled={disabled}
       openOnClick
     >
       <Combobox.Control>

package/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { AppShell } from '@shared/AppShell';
+import { AppShell } from '#shared/AppShell';
 import Provider from './provider';
 import './globals.css';