components/ui/tradingPerformanceChart/TradingPerformanceChart

TradingPerformanceChart component renders a combined line and bar chart showing trading returns performance, either on a monthly or annual basis, with support for light and dark themes. The component reacts to changes in the `dark` CSS class on the document element to dynamically update chart colors. Users can switch between monthly and annual views via a select dropdown. Below the chart, a summary section displays detailed returns with positive values in green and negative values in red. Translations are supported via `react-i18nex
Description:
  • TradingPerformanceChart component renders a combined line and bar chart showing trading returns performance, either on a monthly or annual basis, with support for light and dark themes. The component reacts to changes in the `dark` CSS class on the document element to dynamically update chart colors. Users can switch between monthly and annual views via a select dropdown. Below the chart, a summary section displays detailed returns with positive values in green and negative values in red. Translations are supported via `react-i18nex
Source:
Parameters:
Name Type Description
props Object Component props.
Properties
Name Type Attributes Default Description
startYear number <optional>
 2022 The first year of the dataset.
monthlyReturns Array.<(number|null)> <optional>
 Array(12).fill(0) Array of monthly returns. Each entry represents the return for a month in percent. Use `null` for missing data.
Returns:
The trading performance chart section.
Type
JSX.Element