diff --git a/src/Managing.WebApp/src/components/organism/Backtest/backtestTable.tsx b/src/Managing.WebApp/src/components/organism/Backtest/backtestTable.tsx index a112737..fe4568d 100644 --- a/src/Managing.WebApp/src/components/organism/Backtest/backtestTable.tsx +++ b/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 {BacktestClient} from '../../../generated/ManagingApi' +import type {Backtest, Indicator, IndicatorType} 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 = ({list, isFetching}) => { const [rows, setRows] = useState([]) const {apiUrl} = useApiUrlStore() @@ -159,9 +203,41 @@ const BacktestTable: React.FC = ({list, isFetching}) => { disableSortBy: true, }, { - Filter: SelectColumnFilter, - Header: 'Scenario', - accessor: 'config.scenarioName', + Header: 'Indicators', + accessor: 'config.scenario.indicators', + Cell: ({cell}: any) => { + const backtest = cell.row.original as Backtest; + const indicators = getScenarioIndicators(backtest); + + return ( +
+ {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 ( +
+
+ {formatIndicatorType(indicator.type)} +
+
+ ); + })} +
+ ); + }, + disableFilters: true, disableSortBy: true, }, { diff --git a/src/Managing.WebApp/src/components/organism/Trading/TradeChart/TradeChart.tsx b/src/Managing.WebApp/src/components/organism/Trading/TradeChart/TradeChart.tsx index f2f556b..5e9c4b8 100644 --- a/src/Managing.WebApp/src/components/organism/Trading/TradeChart/TradeChart.tsx +++ b/src/Managing.WebApp/src/components/organism/Trading/TradeChart/TradeChart.tsx @@ -66,6 +66,7 @@ const TradeChart = ({ const chart = useRef() const {themeProperty} = useTheme() const theme = themeProperty() + console.log(theme) const series1 = useRef>() const [timeDiff, setTimeDiff] = useState(0) const [candleCount, setCandleCount] = useState(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, diff --git a/src/Managing.WebApp/src/hooks/useTheme.tsx b/src/Managing.WebApp/src/hooks/useTheme.tsx index 257190a..ce0ac81 100644 --- a/src/Managing.WebApp/src/hooks/useTheme.tsx +++ b/src/Managing.WebApp/src/hooks/useTheme.tsx @@ -1,5 +1,5 @@ -import { useAtom } from 'jotai' -import { useEffect } from 'react' +import {useAtom} from 'jotai' +import {useEffect} from 'react' import * as atoms from '../stores/store' @@ -83,18 +83,23 @@ const themes: ThemesInterface = { success: '#9DB787', warning: '#FFD25F', }, - // '[data-theme=cyberpunk]': { - // '--rounded-badge': '0', - // '--rounded-box': '0', - // '--rounded-btn': '0', - // '--tab-radius': '0', - // accent: '#c07eec', - // 'base-100': '#ffee00', - // neutral: '#423f00', - // 'neutral-content': '#ffee00', - // primary: '#ff7598', - // secondary: '#75d1f0', - // }, + '[data-theme=cyberpunk]': { + '--rounded-badge': '0', + '--rounded-box': '0', + '--rounded-btn': '0', + '--tab-radius': '0', + accent: '#c07eec', + 'base-100': '#ffee00', + neutral: '#423f00', + 'neutral-content': '#ffee00', + primary: '#ff7598', + secondary: '#75d1f0', + error: '#FF5340', + info: '#B0DB43', + 'neutral-focus': '#343232', + success: '#08C25F', + warning: '#EB6F22', + }, '[data-theme=lofi]': { '--animation-btn': '0', '--animation-input': '0',