Fix ui

src/Managing.WebApp/src/components/organism/Backtest/backtestTable.tsx

@@ -3,8 +3,8 @@ import React, {useEffect, useState} from 'react'
 
 import useApiUrlStore from '../../../app/store/apiStore'
 import useBacktestStore from '../../../app/store/backtestStore'
-import type {Backtest} from '../../../generated/ManagingApi'
+import type {Backtest, Indicator, IndicatorType} from '../../../generated/ManagingApi'
-import {BacktestClient} from '../../../generated/ManagingApi'
+import {BacktestClient, SignalType} from '../../../generated/ManagingApi'
 import {CardText, ConfigDisplayModal, SelectColumnFilter, Table} from '../../mollecules'
 import {UnifiedTradingModal} from '../index'
 import Toast from '../../mollecules/Toast/Toast'
@@ -16,6 +16,50 @@ interface BacktestTableProps {
     isFetching?: boolean
 }
 
+// Helper function to get indicator parameters from scenario indicators
+const getIndicatorParameters = (indicator: Indicator) => {
+    if (!indicator) return null;
+    
+    return {
+        name: indicator.name || 'Unnamed Indicator',
+        type: indicator.type,
+        signalType: indicator.signalType,
+        period: indicator.period,
+        fastPeriods: indicator.fastPeriods,
+        slowPeriods: indicator.slowPeriods,
+        signalPeriods: indicator.signalPeriods,
+        multiplier: indicator.multiplier,
+        smoothPeriods: indicator.smoothPeriods,
+        stochPeriods: indicator.stochPeriods,
+        cyclePeriods: indicator.cyclePeriods
+    };
+};
+
+// Helper function to get indicators from scenario
+const getScenarioIndicators = (backtest: Backtest) => {
+    if (!backtest.config?.scenario?.indicators) return [];
+    return backtest.config.scenario.indicators.map(getIndicatorParameters).filter(Boolean);
+};
+
+// Helper function to get badge color based on signal type
+const getBadgeColor = (signalType: SignalType) => {
+    switch (signalType) {
+        case SignalType.Signal:
+            return 'badge-primary';
+        case SignalType.Trend:
+            return 'badge-secondary';
+        case SignalType.Context:
+            return 'badge-accent';
+        default:
+            return 'badge-neutral';
+    }
+};
+
+// Helper function to format indicator type for display
+const formatIndicatorType = (type: IndicatorType) => {
+    return type.replace(/([A-Z])/g, ' $1').trim();
+};
+
 const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching}) => {
     const [rows, setRows] = useState<Backtest[]>([])
     const {apiUrl} = useApiUrlStore()
@@ -159,9 +203,41 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching}) => {
                         disableSortBy: true,
                     },
                     {
-                        Filter: SelectColumnFilter,
+                        Header: 'Indicators',
-                        Header: 'Scenario',
+                        accessor: 'config.scenario.indicators',
-                        accessor: 'config.scenarioName',
+                        Cell: ({cell}: any) => {
+                            const backtest = cell.row.original as Backtest;
+                            const indicators = getScenarioIndicators(backtest);
+                            
+                            return (
+                                <div className="flex flex-wrap gap-1">
+                                    {indicators.map((indicator: any, index: number) => {
+                                        if (!indicator) return null;
+                                        
+                                        // Build tooltip content with indicator parameters
+                                        const tooltipContent = `
+                                            ${indicator.period ? `Period: ${indicator.period}` : ''}
+                                            ${indicator.fastPeriods ? `Fast: ${indicator.fastPeriods}` : ''}
+                                            ${indicator.slowPeriods ? `Slow: ${indicator.slowPeriods}` : ''}
+                                            ${indicator.signalPeriods ? `Signal: ${indicator.signalPeriods}` : ''}
+                                            ${indicator.multiplier ? `Multiplier: ${indicator.multiplier}` : ''}
+                                            ${indicator.smoothPeriods ? `Smooth: ${indicator.smoothPeriods}` : ''}
+                                            ${indicator.stochPeriods ? `Stoch: ${indicator.stochPeriods}` : ''}
+                                            ${indicator.cyclePeriods ? `Cycle: ${indicator.cyclePeriods}` : ''}
+                                        `.trim().replace(/\n\s+/g, '\n');
+                                        
+                                        return (
+                                            <div key={index} className="tooltip" data-tip={tooltipContent}>
+                                                <div className={`badge ${getBadgeColor(indicator.signalType)} badge-sm`}>
+                                                    {formatIndicatorType(indicator.type)}
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            );
+                        },
+                        disableFilters: true,
                         disableSortBy: true,
                     },
                     {

src/Managing.WebApp/src/components/organism/Trading/TradeChart/TradeChart.tsx

@@ -66,6 +66,7 @@ const TradeChart = ({
     const chart = useRef<IChartApi>()
     const {themeProperty} = useTheme()
     const theme = themeProperty()
+    console.log(theme)
     const series1 = useRef<ISeriesApi<'Candlestick'>>()
     const [timeDiff, setTimeDiff] = useState<number>(0)
     const [candleCount, setCandleCount] = useState<number>(candles.length)
@@ -162,7 +163,7 @@ const TradeChart = ({
     }
 
     const baselineOptions: BaselineSeriesOptions = {
-        bottomLineColor: theme.secondary,
+        bottomLineColor: theme?.secondary ?? theme.primary,
         topLineColor: theme.primary,
         lineWidth: 1,
         priceLineVisible: true,

src/Managing.WebApp/src/hooks/useTheme.tsx

@@ -1,5 +1,5 @@
-import { useAtom } from 'jotai'
+import {useAtom} from 'jotai'
-import { useEffect } from 'react'
+import {useEffect} from 'react'
 
 import * as atoms from '../stores/store'
 
@@ -83,18 +83,23 @@ const themes: ThemesInterface = {
     success: '#9DB787',
     warning: '#FFD25F',
   },
-  // '[data-theme=cyberpunk]': {
+  '[data-theme=cyberpunk]': {
-  //   '--rounded-badge': '0',
+    '--rounded-badge': '0',
-  //   '--rounded-box': '0',
+    '--rounded-box': '0',
-  //   '--rounded-btn': '0',
+    '--rounded-btn': '0',
-  //   '--tab-radius': '0',
+    '--tab-radius': '0',
-  //   accent: '#c07eec',
+    accent: '#c07eec',
-  //   'base-100': '#ffee00',
+    'base-100': '#ffee00',
-  //   neutral: '#423f00',
+    neutral: '#423f00',
-  //   'neutral-content': '#ffee00',
+    'neutral-content': '#ffee00',
-  //   primary: '#ff7598',
+    primary: '#ff7598',
-  //   secondary: '#75d1f0',
+    secondary: '#75d1f0',
-  // },
+    error: '#FF5340',
+    info: '#B0DB43',
+    'neutral-focus': '#343232',
+    success: '#08C25F',
+    warning: '#EB6F22',
+  },
   '[data-theme=lofi]': {
     '--animation-btn': '0',
     '--animation-input': '0',