= ({ initialise }) => {
onClick={handleClick}
selectedKeys={[current]}
mode="horizontal"
- items={isMobile ? getMobileItems() : getItems()}
+ items={isMobile ? mobileItems : desktopItems}
overflowedIndicator={('2');
const [breakdowns, setBreakdowns] = useState([]);
const [loading, setLoading] = useState(false);
+ const seriesName = useMemo(
+ () => ({
+ 'Power Channel': '#c7b283',
+ 'Balancer Weighted': '#528aae',
+ HODL: '#52ad80',
+ }),
+ []
+ );
+ const seriesStrokeColor = useMemo(
+ () => ({
+ 'Power Channel': 'ARBITRUM MACRO BTF',
+ 'Balancer Weighted': 'Traditional DEX',
+ }),
+ []
+ );
// Function to load breakdowns based on the selected tab
const loadBreakdowns = async (poolNames: Pool[]) => {
@@ -56,15 +71,6 @@ export default function ArbitrumMacroSimulatorExample() {
}); // Trigger loading of breakdowns
}, [key]); // Dependency array ensures that effect runs when `key` changes
- const seriesName = {
- 'Power Channel': '#c7b283',
- 'Balancer Weighted': '#528aae',
- HODL: '#52ad80',
- };
- const seriesStrokeColor = {
- 'Power Channel': 'ARBITRUM MACRO BTF',
- 'Balancer Weighted': 'Traditional DEX',
- };
return (
diff --git a/src/features/documentation/factSheets/baseMacro/baseMacroSimView.tsx b/src/features/documentation/factSheets/baseMacro/baseMacroSimView.tsx
index 5dd05f8..5a71e75 100644
--- a/src/features/documentation/factSheets/baseMacro/baseMacroSimView.tsx
+++ b/src/features/documentation/factSheets/baseMacro/baseMacroSimView.tsx
@@ -1,5 +1,5 @@
import { Col, Row, Tabs, Spin } from 'antd';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
import { SimulationResultsSummaryStep } from '../../../simulationResults/simulationResultsSummaryStep';
import { getBreakdown, Pool } from '../../../../services/breakdownService';
import { SimulationRunBreakdown } from '../../../simulationResults/simulationResultSummaryModels';
@@ -11,6 +11,21 @@ export default function BaseMacroSimulatorExample() {
const [key, setKey] = useState('2');
const [breakdowns, setBreakdowns] = useState([]);
const [loading, setLoading] = useState(false);
+ const seriesName = useMemo(
+ () => ({
+ 'Power Channel': '#c7b283',
+ 'Balancer Weighted': '#528aae',
+ HODL: '#52ad80',
+ }),
+ []
+ );
+ const seriesStrokeColor = useMemo(
+ () => ({
+ 'Power Channel': 'BASE MACRO BTF',
+ 'Balancer Weighted': 'Traditional DEX',
+ }),
+ []
+ );
// Function to load breakdowns based on the selected tab
const loadBreakdowns = async (poolNames: Pool[]) => {
@@ -56,15 +71,6 @@ export default function BaseMacroSimulatorExample() {
}); // Trigger loading of breakdowns
}, [key]); // Dependency array ensures that effect runs when `key` changes
- const seriesName = {
- 'Power Channel': '#c7b283',
- 'Balancer Weighted': '#528aae',
- HODL: '#52ad80',
- };
- const seriesStrokeColor = {
- 'Power Channel': 'BASE MACRO BTF',
- 'Balancer Weighted': 'Traditional DEX',
- };
return (
diff --git a/src/features/documentation/factSheets/desktop/factsheetDesktop.tsx b/src/features/documentation/factSheets/desktop/factsheetDesktop.tsx
index 595210e..65d1073 100644
--- a/src/features/documentation/factSheets/desktop/factsheetDesktop.tsx
+++ b/src/features/documentation/factSheets/desktop/factsheetDesktop.tsx
@@ -159,6 +159,26 @@ export function FactSheetDesktop(props: FactsheetDesktopProps) {
return props.model.xAxisIntervals.get(period);
}, [period, props.model.xAxisIntervals]);
+ const testMarketValueBreakdowns = useMemo(
+ () =>
+ [breakdowns[btf], breakdowns[cfmm], breakdowns[hodl]].filter(
+ (
+ breakdown
+ ): breakdown is SimulationRunBreakdown => breakdown !== undefined
+ ),
+ [breakdowns, btf, cfmm, hodl]
+ );
+
+ const trainMarketValueBreakdowns = useMemo(
+ () =>
+ [breakdowns[btfTrain], breakdowns[cfmmTrain], breakdowns[hodlTrain]].filter(
+ (
+ breakdown
+ ): breakdown is SimulationRunBreakdown => breakdown !== undefined
+ ),
+ [breakdowns, btfTrain, cfmmTrain, hodlTrain]
+ );
+
return (
diff --git a/src/features/documentation/factSheets/mobile/factsheetMobile.tsx b/src/features/documentation/factSheets/mobile/factsheetMobile.tsx
index ee57fda..e66ac5c 100644
--- a/src/features/documentation/factSheets/mobile/factsheetMobile.tsx
+++ b/src/features/documentation/factSheets/mobile/factsheetMobile.tsx
@@ -123,6 +123,21 @@ export function FactSheetMobile(props: FactsheetDesktopProps) {
[period, props.model.poolPrefix]
);
+ const btfTrain = useMemo(
+ () => props.model.poolPrefix + `BTF${props.model.trainPeriod}`,
+ [props.model.poolPrefix, props.model.trainPeriod]
+ );
+
+ const cfmmTrain = useMemo(
+ () => props.model.poolPrefix + `CFMM${props.model.trainPeriod}`,
+ [props.model.poolPrefix, props.model.trainPeriod]
+ );
+
+ const hodlTrain = useMemo(
+ () => props.model.poolPrefix + `Hodl${props.model.trainPeriod}`,
+ [props.model.poolPrefix, props.model.trainPeriod]
+ );
+
const trainXAxisMonthInterval = useMemo(() => {
return props.model.xAxisIntervals.get(props.model.trainPeriod);
}, [props.model.trainPeriod, props.model.xAxisIntervals]);
@@ -185,6 +200,26 @@ export function FactSheetMobile(props: FactsheetDesktopProps) {
return props.model.xAxisIntervals.get(period);
}, [period, props.model.xAxisIntervals]);
+ const testMarketValueBreakdowns = useMemo(
+ () =>
+ [breakdowns[btf], breakdowns[cfmm], breakdowns[hodl]].filter(
+ (
+ breakdown
+ ): breakdown is SimulationRunBreakdown => breakdown !== undefined
+ ),
+ [breakdowns, btf, cfmm, hodl]
+ );
+
+ const trainMarketValueBreakdowns = useMemo(
+ () =>
+ [breakdowns[btfTrain], breakdowns[cfmmTrain], breakdowns[hodlTrain]].filter(
+ (
+ breakdown
+ ): breakdown is SimulationRunBreakdown => breakdown !== undefined
+ ),
+ [breakdowns, btfTrain, cfmmTrain, hodlTrain]
+ );
+
return (
diff --git a/src/features/documentation/factSheets/safeHaven/safeHavenSimView.tsx b/src/features/documentation/factSheets/safeHaven/safeHavenSimView.tsx
index 18439ff..b1cbf10 100644
--- a/src/features/documentation/factSheets/safeHaven/safeHavenSimView.tsx
+++ b/src/features/documentation/factSheets/safeHaven/safeHavenSimView.tsx
@@ -1,5 +1,5 @@
import { Col, Row, Tabs, Spin } from 'antd';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
import { SimulationResultsSummaryStep } from '../../../simulationResults/simulationResultsSummaryStep';
import { getBreakdown, Pool } from '../../../../services/breakdownService';
import { SimulationRunBreakdown } from '../../../simulationResults/simulationResultSummaryModels';
@@ -11,6 +11,21 @@ export default function SafeHavenSimulatorExample() {
const [key, setKey] = useState('2');
const [breakdowns, setBreakdowns] = useState([]);
const [loading, setLoading] = useState(false);
+ const seriesName = useMemo(
+ () => ({
+ 'Power Channel': '#c7b283',
+ 'Balancer Weighted': '#528aae',
+ HODL: '#52ad80',
+ }),
+ []
+ );
+ const seriesStrokeColor = useMemo(
+ () => ({
+ 'Power Channel': 'SAFE HAVEN BTF',
+ 'Balancer Weighted': 'Traditional DEX',
+ }),
+ []
+ );
// Function to load breakdowns based on the selected tab
const loadBreakdowns = async (poolNames: Pool[]) => {
@@ -56,15 +71,6 @@ export default function SafeHavenSimulatorExample() {
}); // Trigger loading of breakdowns
}, [key]); // Dependency array ensures that effect runs when `key` changes
- const seriesName = {
- 'Power Channel': '#c7b283',
- 'Balancer Weighted': '#528aae',
- HODL: '#52ad80',
- };
- const seriesStrokeColor = {
- 'Power Channel': 'SAFE HAVEN BTF',
- 'Balancer Weighted': 'Traditional DEX',
- };
return (
diff --git a/src/features/documentation/factSheets/truflationBitcoin/customTruflationFactsheetDesktop.tsx b/src/features/documentation/factSheets/truflationBitcoin/customTruflationFactsheetDesktop.tsx
index 51f4407..cb415bf 100644
--- a/src/features/documentation/factSheets/truflationBitcoin/customTruflationFactsheetDesktop.tsx
+++ b/src/features/documentation/factSheets/truflationBitcoin/customTruflationFactsheetDesktop.tsx
@@ -191,6 +191,26 @@ export function TruflationFactSheetDesktop(props: FactsheetDesktopProps) {
const xAxisMonthInterval = useMemo(() => {
return props.model.xAxisIntervals.get(testPeriod);
}, [testPeriod, props.model.xAxisIntervals]);
+
+ const testComparisonBreakdowns = useMemo(
+ () =>
+ [breakdowns[btf], breakdowns[hodl]].filter(
+ (
+ breakdown
+ ): breakdown is SimulationRunBreakdown => breakdown !== undefined
+ ),
+ [breakdowns, btf, hodl]
+ );
+
+ const trainingComparisonBreakdowns = useMemo(
+ () =>
+ [breakdowns[btfTrain], breakdowns[hodlTrain]].filter(
+ (
+ breakdown
+ ): breakdown is SimulationRunBreakdown => breakdown !== undefined
+ ),
+ [breakdowns, btfTrain, hodlTrain]
+ );
console.log(breakdowns[btf]);
return (
-
+
+ Metric:{' '}
+
+
+
+ )}
+
+
+ {/* Benchmark-relative metric (product only) */}
+
+ Benchmark metric:
+
+ }
+ >
+ {isLoading ? (
+
+
-
- Product: {format2(productReturnValue)}
-
+
- Benchmark:{' '}
- {format2(benchmarkReturnValue)}
+ {selectedBenchmarkRelThreshold?.tooltipDescription}
-
-
-
-
- )}
-
-
- {/* Benchmark-relative metric (product only) */}
-
- Benchmark metric:
-
- }
- >
- {isLoading ? (
-
-
- )}
-
-
- )}
-
-
+
+
+
+ )}
+
+
+ )}
+
+
+
+
+
);
};
diff --git a/src/features/productDetail/productDetailContent/summary/productDetailSummaryMobile.tsx b/src/features/productDetail/productDetailContent/summary/productDetailSummaryMobile.tsx
index f716565..473d530 100644
--- a/src/features/productDetail/productDetailContent/summary/productDetailSummaryMobile.tsx
+++ b/src/features/productDetail/productDetailContent/summary/productDetailSummaryMobile.tsx
@@ -2,6 +2,7 @@
import { useMemo, useState } from 'react';
import { Card, Collapse, Divider, Tooltip, Typography } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { GqlChain } from '../../../../__generated__/graphql-types';
import { FinancialMetricThresholds, Product } from '../../../../models';
import { SimulationRunMetric } from '../../../simulationResults/simulationResultSummaryModels';
import {
@@ -9,9 +10,15 @@ import {
ReturnDistributionGraph,
} from '../../../shared/graphs';
import { ComparableProductSelector } from '../comparableProduct/comparableProductSelector';
+import { ProductDetailEvents } from '../events/productDetailEvents';
+import { ProductDetailSidebarStrategySummary } from '../../productDetailSidebar/productDetailSidebarStrategySummary';
import { getThresholdColor, getThresholdPostscript } from './utils';
const { Text } = Typography;
+const WEIGHT_CHART_Y_AXIS_OVERRIDE = { label: { enabled: false } };
+const LEGEND_DISABLED_OVERRIDE = { enabled: false };
+const RETURN_DISTRIBUTION_Y_AXIS_OVERRIDE = { title: { enabled: false } };
+const SHOW_COMPARE_PRODUCT_PANEL = false;
interface ProductDetailSummaryMobileProps {
product: Product;
@@ -181,6 +188,18 @@ export const ProductDetailSummaryMobile = ({
'Annualized Jensen’s Alpha (%)',
[selectedBenchmarkReturnAnalysis]
);
+ const productMarketValues = useMemo(
+ () => product.timeSeries?.map((x) => x.sharePrice) ?? [],
+ [product.timeSeries]
+ );
+ const benchmarkMarketValues = useMemo(
+ () => product.timeSeries?.map((x) => x.hodlSharePrice) ?? [],
+ [product.timeSeries]
+ );
+ const comparingProductMarketValues = useMemo(
+ () => comparingProduct?.timeSeries?.map((x) => x.sharePrice) ?? [],
+ [comparingProduct?.timeSeries]
+ );
// Colors + grade text for the three entities per card
const repr = (
@@ -192,8 +211,8 @@ export const ProductDetailSummaryMobile = ({
grade: getThresholdPostscript(thresholds, metricName, v), // "(VERY GOOD)" etc.
});
- const CompareProductPanel = () => (
-
+ {!loading && (
+ )}
+ {!loading && (
+ <>
Cumulative performance over time
+
+ )}
Constituent weights over time
+ {!loading && (
+ )}
+ {!loading && (
+ <>
Cumulative performance over time
+
+ )}
Constituent weights over time
@@ -282,9 +302,7 @@ export function TruflationFactSheetDesktop(props: FactsheetDesktopProps) {
diff --git a/src/features/documentation/factSheets/truflationBitcoin/customTruflationFactsheetMobile.tsx b/src/features/documentation/factSheets/truflationBitcoin/customTruflationFactsheetMobile.tsx
index 725c327..ded8908 100644
--- a/src/features/documentation/factSheets/truflationBitcoin/customTruflationFactsheetMobile.tsx
+++ b/src/features/documentation/factSheets/truflationBitcoin/customTruflationFactsheetMobile.tsx
@@ -176,6 +176,26 @@ export function TruflationFactSheetMobile(props: FactsheetDesktopProps) {
[poolKeyFor, metricsPeriod]
);
+ const testComparisonBreakdowns = useMemo(
+ () =>
+ [breakdowns[btfTest], breakdowns[hodlTest]].filter(
+ (
+ breakdown
+ ): breakdown is SimulationRunBreakdown => breakdown !== undefined
+ ),
+ [breakdowns, btfTest, hodlTest]
+ );
+
+ const trainingComparisonBreakdowns = useMemo(
+ () =>
+ [breakdowns[btfTrain], breakdowns[hodlTrain]].filter(
+ (
+ breakdown
+ ): breakdown is SimulationRunBreakdown => breakdown !== undefined
+ ),
+ [breakdowns, btfTrain, hodlTrain]
+ );
+
const renderPeriodSelector = (
includeTrainPeriod: boolean,
value: string,
@@ -337,9 +357,7 @@ export function TruflationFactSheetMobile(props: FactsheetDesktopProps) {
diff --git a/src/features/documentation/landing/desktop/strategySummary.tsx b/src/features/documentation/landing/desktop/strategySummary.tsx
index a653587..17ee141 100644
--- a/src/features/documentation/landing/desktop/strategySummary.tsx
+++ b/src/features/documentation/landing/desktop/strategySummary.tsx
@@ -1,6 +1,6 @@
import { Button, Col, Row, Tooltip, Typography } from 'antd';
import { ProductItemBackground } from '../../../productExplorer/productItem/productItemBackground';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { SimulationRunBreakdown } from '../../../simulationResults/simulationResultSummaryModels';
import { getBreakdown, Pool } from '../../../../services/breakdownService';
import { WeightChangeOverTimeGraph } from '../../../shared';
@@ -10,78 +10,6 @@ import styles from './landingDesktop.module.css';
const { Title } = Typography;
export function StrategySummary() {
- const [breakdowns, setBreakdowns] = useState([]);
- const [loading, setLoading] = useState(true);
- const [strategy, setStrategy] = useState('Momentum');
-
- const [autoCycle, setAutoCycle] = useState(true);
-
- useEffect(() => {
- let interval: NodeJS.Timeout | null = null;
-
- if (autoCycle) {
- const allStrageies = [
- 'Momentum',
- 'AntiMomentum',
- 'Channel Following',
- 'Power Channel',
- ];
-
- interval = setInterval(() => {
- setStrategy((prevStrategy) => {
- const currentIndex = allStrageies.indexOf(prevStrategy);
- const nextIndex = (currentIndex + 1) % allStrageies.length;
- return allStrageies[nextIndex];
- });
- }, 5000); // Change strategy every 5 seconds
- }
-
- return () => {
- if (interval) {
- clearInterval(interval);
- }
- };
- }, [autoCycle]);
-
- // Effect to load breakdowns whenever the tab key changes
- useEffect(() => {
- // Function to load breakdowns based on the selected tab
- const loadBreakdowns = async (
- poolNames: Pool[]
- ): Promise => {
- setLoading(true); // Start loading
- const fetchedBreakdowns = await Promise.all(
- poolNames.map((poolName) => getBreakdown(poolName))
- );
- setBreakdowns(fetchedBreakdowns);
- return fetchedBreakdowns;
- };
-
- const loadData = async (): Promise => {
- // Load breakdowns for the selected tab
- return await loadBreakdowns([
- 'solExampleWeighted',
- 'solExampleMomentum',
- 'solExampleAntimomentum',
- 'solExamplePowerChannel',
- 'solExampleChannelFollowing',
- 'solExampleHodl',
- ] as Pool[]); // Awaiting the asynchronous function here
- };
-
- if (loading) {
- loadData()
- .then((fetchedBreakdowns) => {
- setBreakdowns(fetchedBreakdowns);
- })
- .catch((error) => {
- console.error('Failed to load breakdowns:', error);
- })
- .finally(() => {
- setLoading(false);
- });
- }
- }, [setBreakdowns, setLoading, breakdowns, loading]);
const strategies = [
{
title: 'Momentum',
@@ -117,14 +45,122 @@ export function StrategySummary() {
},
];
- const traditionalDexBreakdown = breakdowns.find(
- (x) => x.simulationRun.updateRule.updateRuleName === 'Balancer Weighted'
+ const [breakdowns, setBreakdowns] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [strategy, setStrategy] = useState('Momentum');
+
+ const [autoCycle, setAutoCycle] = useState(true);
+ const overrideSeriesStrokeColor = useMemo(
+ () => ({
+ Momentum: '#c7b283',
+ AntiMomentum: '#c7b283',
+ 'Channel Following': '#c7b283',
+ 'Power Channel': '#c7b283',
+ 'Balancer Weighted': '#528aae',
+ }),
+ []
+ );
+
+ const overrideSeriesName = useMemo(
+ () => ({
+ Momentum: 'QuantAMM',
+ AntiMomentum: 'QuantAMM',
+ 'Channel Following': 'QuantAMM',
+ 'Power Channel': 'QuantAMM',
+ 'Balancer Weighted': 'Traditional DEX',
+ }),
+ []
);
- const selectedStrategyBreakdown = breakdowns.find(
- (x) => x.simulationRun.updateRule.updateRuleName === strategy
+
+ useEffect(() => {
+ let interval: NodeJS.Timeout | null = null;
+ const autoCycleStrategies = [
+ 'Momentum',
+ 'AntiMomentum',
+ 'Channel Following',
+ 'Power Channel',
+ ];
+
+ if (autoCycle) {
+ interval = setInterval(() => {
+ setStrategy((prevStrategy) => {
+ const currentIndex = autoCycleStrategies.indexOf(prevStrategy);
+ const nextIndex = (currentIndex + 1) % autoCycleStrategies.length;
+ return autoCycleStrategies[nextIndex];
+ });
+ }, 5000); // Change strategy every 5 seconds
+ }
+
+ return () => {
+ if (interval) {
+ clearInterval(interval);
+ }
+ };
+ }, [autoCycle]);
+
+ useEffect(() => {
+ let isMounted = true;
+
+ const loadData = async () => {
+ setLoading(true);
+
+ try {
+ const fetchedBreakdowns = await Promise.all(
+ (
+ [
+ 'solExampleWeighted',
+ 'solExampleMomentum',
+ 'solExampleAntimomentum',
+ 'solExamplePowerChannel',
+ 'solExampleChannelFollowing',
+ 'solExampleHodl',
+ ] as Pool[]
+ ).map((poolName) => getBreakdown(poolName))
+ );
+ if (isMounted) {
+ setBreakdowns(fetchedBreakdowns);
+ }
+ } catch (error) {
+ console.error('Failed to load breakdowns:', error);
+ } finally {
+ if (isMounted) {
+ setLoading(false);
+ }
+ }
+ };
+
+ void loadData();
+
+ return () => {
+ isMounted = false;
+ };
+ }, []);
+
+ const traditionalDexBreakdown = useMemo(
+ () =>
+ breakdowns.find(
+ (x) => x.simulationRun.updateRule.updateRuleName === 'Balancer Weighted'
+ ),
+ [breakdowns]
+ );
+
+ const selectedStrategyBreakdown = useMemo(
+ () =>
+ breakdowns.find((x) => x.simulationRun.updateRule.updateRuleName === strategy),
+ [breakdowns, strategy]
+ );
+
+ const marketValueBreakdowns = useMemo(
+ () =>
+ breakdowns.filter(
+ (x) =>
+ x.simulationRun.updateRule.updateRuleName === strategy ||
+ x.simulationRun.updateRule.updateRuleName === 'Balancer Weighted'
+ ),
+ [breakdowns, strategy]
);
- const StrategySelectorPanel = () => (
+ const strategySelectorPanel = (
);
- const HoldingsChartsSection = () => (
+ const holdingsChartsSection = (
- x.simulationRun.updateRule.updateRuleName === strategy ||
- x.simulationRun.updateRule.updateRuleName ===
- 'Balancer Weighted'
- )}
+ breakdowns={marketValueBreakdowns}
forceViewResults={true}
overrideXAxisInterval={24}
- overrideSeriesStrokeColor={{
- Momentum: '#c7b283',
- AntiMomentum: '#c7b283',
- 'Channel Following': '#c7b283',
- 'Power Channel': '#c7b283',
- 'Balancer Weighted': '#528aae',
- }}
- overrideSeriesName={{
- Momentum: 'QuantAMM',
- AntiMomentum: 'QuantAMM',
- 'Channel Following': 'QuantAMM',
- 'Power Channel': 'QuantAMM',
- 'Balancer Weighted': 'Traditional DEX',
- }}
+ overrideSeriesStrokeColor={overrideSeriesStrokeColor}
+ overrideSeriesName={overrideSeriesName}
/>
diff --git a/src/features/documentation/landing/mobile/strategySummaryMobile.tsx b/src/features/documentation/landing/mobile/strategySummaryMobile.tsx
index efacf6e..8df2cf2 100644
--- a/src/features/documentation/landing/mobile/strategySummaryMobile.tsx
+++ b/src/features/documentation/landing/mobile/strategySummaryMobile.tsx
@@ -12,23 +12,34 @@ export function StrategySummaryMobile() {
const [loading, setLoading] = useState(true);
useEffect(() => {
- const loadBreakdowns = async (
- poolNames: Pool[]
- ): Promise => {
+ let isMounted = true;
+
+ const loadBreakdowns = async () => {
setLoading(true);
- const fetchedBreakdowns = await Promise.all(
- poolNames.map((poolName) => getBreakdown(poolName))
- );
- setBreakdowns(fetchedBreakdowns);
- return fetchedBreakdowns;
+ try {
+ const fetchedBreakdowns = await Promise.all(
+ (['balancerWeighted', 'quantAMMAntiMomentum'] as Pool[]).map(
+ (poolName) => getBreakdown(poolName)
+ )
+ );
+ if (isMounted) {
+ setBreakdowns(fetchedBreakdowns);
+ }
+ } catch (error) {
+ console.error(error);
+ } finally {
+ if (isMounted) {
+ setLoading(false);
+ }
+ }
};
- if (loading) {
- loadBreakdowns(['balancerWeighted', 'quantAMMAntiMomentum'] as Pool[])
- .catch(console.error)
- .finally(() => setLoading(false));
- }
- }, [loading]);
+ void loadBreakdowns();
+
+ return () => {
+ isMounted = false;
+ };
+ }, []);
return (
+
+
+
);
diff --git a/src/features/productDetail/productDetailContent/events/productDetailEventsGrid.tsx b/src/features/productDetail/productDetailContent/events/productDetailEventsGrid.tsx
index 9a6f6ca..255798f 100644
--- a/src/features/productDetail/productDetailContent/events/productDetailEventsGrid.tsx
+++ b/src/features/productDetail/productDetailContent/events/productDetailEventsGrid.tsx
@@ -39,6 +39,17 @@ export const ProductDetailEventsGrid = forwardRef<
AgGridReact,
EventsGridProps
>(function EventsGrid({ rowData, explorerBase, thresholds }, ref) {
+ const usdFormatter = useMemo(
+ () =>
+ new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ }),
+ []
+ );
+
const columnDefs = useMemo(
() => [
{
@@ -107,21 +118,14 @@ export const ProductDetailEventsGrid = forwardRef<
enableRowGroup: true,
type: 'number',
valueFormatter: (p: ValueFormatterParams) =>
- p.value
- ? new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: 'USD',
- minimumFractionDigits: 2,
- maximumFractionDigits: 2,
- }).format(Number(p.value))
- : '',
+ p.value ? usdFormatter.format(Number(p.value)) : '',
cellStyle: { textAlign: 'right' as const },
},
{
colId: 'sender',
field: 'sender',
headerName: 'Sender',
- width: 160,
+ width: 145,
enableRowGroup: true,
cellRenderer: (p: ICellRendererParams) => {
const url = `${explorerBase}/address/${p.value}`;
@@ -143,7 +147,7 @@ export const ProductDetailEventsGrid = forwardRef<
colId: 'tx',
field: 'tx',
headerName: 'Tx',
- width: 160,
+ width: 145,
enableRowGroup: true,
cellRenderer: (p: ICellRendererParams) => {
const url = `${explorerBase}/tx/${p.value}`;
@@ -176,6 +180,7 @@ export const ProductDetailEventsGrid = forwardRef<
thresholds.goldThreshold,
thresholds.silverThreshold,
thresholds.srcPrefix,
+ usdFormatter,
]
);
@@ -183,6 +188,7 @@ export const ProductDetailEventsGrid = forwardRef<
() => ({
columnDefs,
rowHeight: 26,
+ getRowId: (params) => String(params.data?.id ?? ''),
defaultColDef: {
filter: 'agTextColumnFilter',
sortable: true,
@@ -197,6 +203,35 @@ export const ProductDetailEventsGrid = forwardRef<
}),
[columnDefs]
);
+ const sideBar = useMemo(
+ () => ({
+ toolPanels: [
+ {
+ id: 'columns',
+ labelDefault: 'Columns',
+ labelKey: 'columns',
+ iconKey: 'columns',
+ toolPanel: 'agColumnsToolPanel',
+ minWidth: 100,
+ maxWidth: 300,
+ width: 200,
+ },
+ {
+ id: 'filters',
+ labelDefault: 'Filters',
+ labelKey: 'filters',
+ iconKey: 'filter',
+ toolPanel: 'agFiltersToolPanel',
+ minWidth: 100,
+ maxWidth: 300,
+ width: 200,
+ },
+ ],
+ position: 'right' as const,
+ defaultToolPanel: 'none',
+ }),
+ []
+ );
return (
= memo(
- function EventsHeader({ isMobile, onCsv }) {
+ function EventsHeader({ isMobile, onCsv, showTitle = true }) {
return (
<Row>
<Col span={20}>
- <h4 hidden={isMobile}>Events</h4>
+ <h4 hidden={isMobile || !showTitle}>Events</h4>
</Col>
{!isMobile && (
<Col span={4} className={styles.actionsCol}>
<Button
type="primary"
size="small"
- onClick={onCsv}
+ onClick={(e) => {
+ e.stopPropagation();
+ onCsv();
+ }}
className={styles.csvButton}
>
Download CSV
diff --git a/src/features/productDetail/productDetailContent/productDetailContent.tsx b/src/features/productDetail/productDetailContent/productDetailContent.tsx
index be286c8..dbadd6a 100644
--- a/src/features/productDetail/productDetailContent/productDetailContent.tsx
+++ b/src/features/productDetail/productDetailContent/productDetailContent.tsx
@@ -5,13 +5,10 @@ import { selectProductById } from '../../productExplorer/productExplorerSlice';
import { ProductDetailPoolGraph } from './productDetailPoolGraph';
import { ProductDetailStats } from './productDetailStats';
import { ProductDetailNav } from './productDetailNav';
-import { ProductDetailEvents } from './events/productDetailEvents';
import sharedStyles from '../../../shared.module.scss';
import { ProductDetailInfo } from '../productDetailSidebar/productDetailInfo';
-import { GqlChain } from '../../../__generated__/graphql-types';
import { ProductDetailSidebarSocials } from '../productDetailSidebar/productDetailSidebarSocials';
-import { ProductDetailSidebarStrategySummary } from '../productDetailSidebar/productDetailSidebarStrategySummary';
import { ProductDetailTable } from './components/productDetailTable';
import styles from './productDetailContent.module.scss';
@@ -33,8 +30,14 @@ export const ProductDetailContent: FC<ProductDetailContentProps> = ({
<Content>
{product?.id && product.id !== '' && (
<>
- <ProductDetailNav productId={product.id} chain={product.chain} />
- <div className={sharedStyles.scrollable}>
+ <ProductDetailNav
+ productId={product.id}
+ chain={product.chain}
+ />
+ <div
+ id="product-detail-scroll-container"
+ className={sharedStyles.scrollable}
+ >
<ProductDetailPoolGraph productId={product.id} />
{isMobile ? (
<ProductDetailInfo product={product} isMobile={isMobile} />
@@ -49,25 +52,11 @@ export const ProductDetailContent: FC<ProductDetailContentProps> = ({
) : (
<></>
)}
- <Row>
- <Col span={24} className={styles.strategyCol}>
- <ProductDetailSidebarStrategySummary product={product} />
- </Col>
- </Row>
<Row>
<Col span={24}>
<ProductDetailStats productId={product.id} />
</Col>
</Row>
- <Row>
- <Col span={24}>
- <ProductDetailEvents
- productId={product.id}
- chain={product.chain as GqlChain}
- isMobile={isMobile}
- />
- </Col>
- </Row>
{isMobile ? (
<Row id="details" className={styles.detailsRow}>
<Col span={24} className={styles.detailsCol}>
diff --git a/src/features/productDetail/productDetailContent/productDetailNav.tsx b/src/features/productDetail/productDetailContent/productDetailNav.tsx
index 6995e45..04c5f6e 100644
--- a/src/features/productDetail/productDetailContent/productDetailNav.tsx
+++ b/src/features/productDetail/productDetailContent/productDetailNav.tsx
@@ -1,4 +1,5 @@
-import { memo, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import type { MouseEvent as ReactMouseEvent } from 'react';
import { Affix, Anchor, Button } from 'antd';
import { getBalancerPoolUrl } from '../../../utils';
import { ProductModal } from '../modal/productModal';
@@ -7,6 +8,8 @@ import styles from './productDetailNav.module.scss';
import { useAppSelector } from '../../../app/hooks';
import { selectAcceptedTermsAndConditions } from '../../productExplorer/productExplorerSlice';
+const PRODUCT_DETAIL_SCROLL_CONTAINER_ID = 'product-detail-scroll-container';
+
interface ProductDetailNavProps {
productId: string;
chain: string;
@@ -16,8 +19,9 @@ function ProductDetailNavInternal({ productId, chain }: ProductDetailNavProps) {
const acceptedTermsAndConditions = useAppSelector(
selectAcceptedTermsAndConditions
);
- const [targetOffset, setTargetOffset] = useState<number | undefined>(
- undefined
+ const [targetOffset, setTargetOffset] = useState<number | undefined>(120);
+ const [anchorContainer, setAnchorContainer] = useState<HTMLElement | null>(
+ null
);
const [productModalUrl, setProductModalUrl] = useState<string | undefined>(
undefined
@@ -25,8 +29,12 @@ function ProductDetailNavInternal({ productId, chain }: ProductDetailNavProps) {
const [isWithdraw, setIsWithdraw] = useState(false);
useEffect(() => {
- setTargetOffset(window.innerHeight / 2);
- }, []);
+ // Track sections relative to the product detail scroll container.
+ setAnchorContainer(
+ document.getElementById(PRODUCT_DETAIL_SCROLL_CONTAINER_ID)
+ );
+ setTargetOffset(120);
+ }, [productId]);
const showProductModal = (url: string) => {
setProductModalUrl(url);
@@ -39,40 +47,66 @@ function ProductDetailNavInternal({ productId, chain }: ProductDetailNavProps) {
const baseBalancerUrl = getBalancerPoolUrl(chain, productId);
const addLiquidityBalancerPoolUrl = `${baseBalancerUrl}/add-liquidity`;
const removeLiquidityBalancerPoolUrl = `${baseBalancerUrl}/remove-liquidity`;
+ const getAnchorContainer = useCallback(() => {
+ return anchorContainer ?? document.documentElement;
+ }, [anchorContainer]);
+ const anchorItems = useMemo(
+ () => [
+ {
+ key: 'graph',
+ href: '#graph',
+ title: 'Graph',
+ },
+ {
+ key: 'summary',
+ href: '#summary',
+ title: 'Summary',
+ },
+ {
+ key: 'metrics',
+ href: '#metrics',
+ title: 'Metrics',
+ },
+ {
+ key: 'events',
+ href: '#events',
+ title: 'Events',
+ },
+ {
+ key: 'distribution',
+ href: '#distribution',
+ title: 'Distribution',
+ },
+ ],
+ []
+ );
+ const handleAnchorClick = useCallback(
+ (_event: ReactMouseEvent<HTMLElement>, link: any) => {
+ window.dispatchEvent(
+ new CustomEvent('product-detail-nav-select', {
+ detail: { href: link?.href },
+ })
+ );
+ },
+ []
+ );
return (
<>
<Affix>
<div className={styles['product-detail-nav__container']}>
<div className={styles['product-detail-nav__anchor-container']}>
- <Anchor
- targetOffset={targetOffset}
- direction="horizontal"
- affix
- className={styles['product-detail-nav__anchor']}
- items={[
- {
- key: 'graph',
- href: '#graph',
- title: 'Graph',
- },
- {
- key: 'summary',
- href: '#summary',
- title: 'Summary',
- },
- {
- key: 'details',
- href: '#details',
- title: 'Details',
- },
- {
- key: 'events',
- href: '#events',
- title: 'Events',
- },
- ]}
- />
+ {anchorContainer && (
+ <Anchor
+ targetOffset={targetOffset}
+ direction="horizontal"
+ affix={false}
+ className={styles['product-detail-nav__anchor']}
+ getContainer={getAnchorContainer}
+ items={anchorItems}
+ onClick={handleAnchorClick}
+ />
+ )}
</div>
<div className={styles['product-detail-nav__buttons-container']}>
diff --git a/src/features/productDetail/productDetailContent/summary/productDetailSummary.module.scss b/src/features/productDetail/productDetailContent/summary/productDetailSummary.module.scss
index e51bf05..71dcfef 100644
--- a/src/features/productDetail/productDetailContent/summary/productDetailSummary.module.scss
+++ b/src/features/productDetail/productDetailContent/summary/productDetailSummary.module.scss
@@ -1,9 +1,7 @@
.product-detail-summary__title {
- display: flex;
- flex-direction: row;
- justify-content: start;
- padding-left: 8px;
- border-bottom: 1px solid var(--primary-lighter);
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
}
.product-detail-summary__container {
diff --git a/src/features/productDetail/productDetailContent/summary/productDetailSummaryDesktop.tsx b/src/features/productDetail/productDetailContent/summary/productDetailSummaryDesktop.tsx
index 7c704db..c129d72 100644
--- a/src/features/productDetail/productDetailContent/summary/productDetailSummaryDesktop.tsx
+++ b/src/features/productDetail/productDetailContent/summary/productDetailSummaryDesktop.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import {
Card,
Collapse,
@@ -21,6 +21,7 @@ import {
TableOutlined,
BoxPlotOutlined,
} from '@ant-design/icons';
+import { GqlChain } from '../../../../__generated__/graphql-types';
import { FinancialMetricThresholds, Product } from '../../../../models';
import {
@@ -29,17 +30,22 @@ import {
} from '../../../shared/graphs';
import { SimulationRunMetric } from '../../../simulationResults/simulationResultSummaryModels';
import { ProductDetailDropdown } from '../components/productDetailDropdown';
+import { ProductDetailEvents } from '../events/productDetailEvents';
+import { ProductDetailSidebarStrategySummary } from '../../productDetailSidebar/productDetailSidebarStrategySummary';
import { CURRENT_LIVE_FACTSHEETS } from '../../../documentation/factSheets/liveFactsheets';
import styles from './productDetailSummary.module.scss';
import { getMax, getMin } from './utils';
-import Title from 'antd/es/typography/Title';
import { StrategyWorkflowCard } from './strategyWorkflowCard';
import { AnalysisSimplifiedBreakdownTable } from '../../../simulationResults/breakdowns/simulationRunPerformanceSimpleTable';
const { Text } = Typography;
const { Panel } = Collapse;
+const METRICS_PANEL_KEY = 'metrics';
+const WEIGHT_CHART_Y_AXIS_OVERRIDE = { label: { enabled: false } };
+const RETURN_DISTRIBUTION_Y_AXIS_OVERRIDE = { title: { enabled: false } };
+const SHOW_STRATEGY_WORKFLOW_SECTION = false;
interface ProductDetailSummaryDesktopProps {
product: Product;
@@ -147,6 +153,7 @@ export const ProductDetailSummaryDesktop: FC<
);
const [metricsView, setMetricsView] = useState<'gauge' | 'table'>('gauge');
+ const [isMetricsPanelOpen, setIsMetricsPanelOpen] = useState(true);
const [selectedReturnMetricName, setSelectedReturnMetricName] = useState<
string | undefined
>(initialSelectedReturnAnalysis?.metricName);
@@ -308,7 +315,7 @@ export const ProductDetailSummaryDesktop: FC<
];
}, [simulationRunBreakdown]);
- const MetricsToggle = () => (
+ const metricsToggle = (
<div
onClick={(e) => {
e.stopPropagation();
@@ -318,7 +325,7 @@ export const ProductDetailSummaryDesktop: FC<
}}
>
<Segmented
- size="large"
+ size="small"
value={metricsView}
onChange={(v) => setMetricsView(v as 'gauge' | 'table')}
options={[
@@ -343,7 +350,47 @@ export const ProductDetailSummaryDesktop: FC<
</div>
);
- const PoolWeightsCard = () => (
+ const handleMetricsCollapseChange = useCallback(
+ (activeKey: string | string[]) => {
+ const isOpen = Array.isArray(activeKey)
+ ? activeKey.includes(METRICS_PANEL_KEY)
+ : activeKey === METRICS_PANEL_KEY;
+ setIsMetricsPanelOpen(isOpen);
+ },
+ []
+ );
+
+ useEffect(() => {
+ const maybeOpenForTarget = (target?: string) => {
+ if (target === '#metrics') {
+ setIsMetricsPanelOpen(true);
+ }
+ };
+
+ maybeOpenForTarget(window.location.hash);
+
+ const onHashChange = () => maybeOpenForTarget(window.location.hash);
+ const onNavSelect = (event: Event) => {
+ const detail = (event as CustomEvent<{ href?: string }>).detail;
+ maybeOpenForTarget(detail?.href);
+ };
+
+ window.addEventListener('hashchange', onHashChange);
+ window.addEventListener(
+ 'product-detail-nav-select',
+ onNavSelect as EventListener
+ );
+
+ return () => {
+ window.removeEventListener('hashchange', onHashChange);
+ window.removeEventListener(
+ 'product-detail-nav-select',
+ onNavSelect as EventListener
+ );
+ };
+ }, []);
+
+ const poolWeightsCard = (
<Card
className={styles['product-detail-summary__cardDesktop']}
title="Pool weights"
@@ -362,268 +409,263 @@ export const ProductDetailSummaryDesktop: FC<
<ProductTokenWeightChangeOverTimeGraph
product={product}
isBenchmark={weightsView === 'benchmark'}
- yAxisOverride={{ label: { enabled: false } }}
+ yAxisOverride={WEIGHT_CHART_Y_AXIS_OVERRIDE}
/>
</div>
</Card>
);
- const ReturnDistributionCard = () => (
- <Card
- className={styles['product-detail-summary__cardDesktop']}
- title="Return distribution"
- extra={
- <Segmented
- value={returnsView}
- onChange={(v) => setReturnsView(v as 'product' | 'benchmark')}
- options={[
- { label: 'Product', value: 'product' },
- { label: 'Benchmark', value: 'benchmark' },
- ]}
- />
- }
- >
- <div className={styles['product-detail-summary__chart']}>
- {ts.length > 0 ? (
- <ReturnDistributionGraph
- yAxisOverride={{ title: { enabled: false } }}
- marketValues={
- returnsView === 'benchmark'
- ? marketValuesBenchmark
- : marketValuesProduct
- }
+ const returnDistributionCard = (
+ <div id="distribution">
+ <Card
+ className={styles['product-detail-summary__cardDesktop']}
+ title="Return distribution"
+ extra={
+ <Segmented
+ value={returnsView}
+ onChange={(v) => setReturnsView(v as 'product' | 'benchmark')}
+ options={[
+ { label: 'Product', value: 'product' },
+ { label: 'Benchmark', value: 'benchmark' },
+ ]}
/>
- ) : (
- <Text type="secondary">No Data</Text>
- )}
- </div>
- </Card>
+ }
+ >
+ <div className={styles['product-detail-summary__chart']}>
+ {ts.length > 0 ? (
+ <ReturnDistributionGraph
+ yAxisOverride={RETURN_DISTRIBUTION_Y_AXIS_OVERRIDE}
+ marketValues={
+ returnsView === 'benchmark'
+ ? marketValuesBenchmark
+ : marketValuesProduct
+ }
+ />
+ ) : (
+ <Text type="secondary">No Data</Text>
+ )}
+ </div>
+ </Card>
+ </div>
);
return (
<div className={styles['product-detail-summary__desktop']}>
- <PoolWeightsCard />
-
- {
- /* hidden as the subgraph has still not been pushed to prod*/
- <div hidden>
- <Collapse
- defaultActiveKey={[]}
- className={styles['product-detail-summary__collapse']}
- bordered={false}
+ {poolWeightsCard}
+ <ProductDetailSidebarStrategySummary product={product} />
+
+ {SHOW_STRATEGY_WORKFLOW_SECTION && (
+ <Collapse
+ defaultActiveKey={[]}
+ className={styles['product-detail-summary__collapse']}
+ bordered={false}
+ >
+ <Panel
+ key="strategy-workflow"
+ header={
+ <div className={styles['product-detail-summary__collapseHeader']}>
+ <span className={styles['product-detail-summary__stepNumber']}>
+ 2
+ </span>
+ <Text strong>Strategy workflow</Text>
+ <Text
+ type="secondary"
+ className={styles['product-detail-summary__collapseHint']}
+ ></Text>
+ </div>
+ }
>
- <Panel
- key="strategy-workflow"
- header={
- <div
- className={styles['product-detail-summary__collapseHeader']}
- >
- <span
- className={styles['product-detail-summary__stepNumber']}
- >
- 2
- </span>
- <Text strong>Strategy workflow</Text>
- <Text
- type="secondary"
- className={styles['product-detail-summary__collapseHint']}
- ></Text>
- </div>
- }
- >
- <StrategyWorkflowCard product={product} factsheet={factsheet} />
- </Panel>
- </Collapse>
- </div>
- }
+ <StrategyWorkflowCard product={product} factsheet={factsheet} />
+ </Panel>
+ </Collapse>
+ )}
{/* Collapsible metrics section with icon toggle */}
- <Collapse
- defaultActiveKey={['metrics']}
- className={styles['product-detail-summary__collapse']}
- bordered={false}
- >
- <Panel
- key="metrics"
- header={
- <div className={styles['product-detail-summary__title']}>
- <Tooltip title="This pool is new and does not have enough data for live financial metrics. This is a simulated performance metric analysis based on the test period (see factsheet). Once the pool has been running for a while it will become live metrics">
- <Title level={4} style={{ margin: 0 }}>
- Simulated HODL Performance Metric Analysis {' '}
- <WarningOutlined
- type="warning"
- style={{ color: 'orange' }}
- />{' '}
-
-
-
- }
- extra={
+ {!loading && (
+ )}
- {trainingView === 'drawdowns' && (
- <>
-
+ {trainingView === 'weightChange' && (
+ <>
+ Drawdowns
-Drawdowns
+Cumulative performance over time
-Cumulative performance over time
+Constituent weights over time
-Constituent weights over time
+
+ {!loading && (
+ )}
- {trainingView === 'drawdowns' && (
- <>
-
+ {trainingView === 'weightChange' && (
+ <>
+ Drawdowns
-Drawdowns
+Cumulative performance over time
-Cumulative performance over time
+Constituent weights over time
-Constituent weights over time
+ADAPTIVE STRATEGIES
@@ -176,7 +212,7 @@ export function StrategySummary() {
Traditional DEX Pool Holdings
@@ -241,36 +277,19 @@ export function StrategySummary() {
diff --git a/src/features/productDetail/productDetailContent/events/productDetailEvents.module.scss b/src/features/productDetail/productDetailContent/events/productDetailEvents.module.scss
index eaba09c..256c9f7 100644
--- a/src/features/productDetail/productDetailContent/events/productDetailEvents.module.scss
+++ b/src/features/productDetail/productDetailContent/events/productDetailEvents.module.scss
@@ -1,20 +1,16 @@
.eventsRow {
- margin-top: 20px;
+ margin-top: 0;
}
-.headerCol {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- padding-left: 8px;
- border-bottom: 1px solid var(--primary-lighter);
+.eventsCollapse {
+ width: 100%;
}
.contentCol {
display: flex;
justify-content: center;
align-items: center;
- margin-top: 20px;
+ margin-top: 0;
padding-left: 12px;
padding-right: 12px;
width: 100%;
diff --git a/src/features/productDetail/productDetailContent/events/productDetailEvents.tsx b/src/features/productDetail/productDetailContent/events/productDetailEvents.tsx
index eff8672..f14a49c 100644
--- a/src/features/productDetail/productDetailContent/events/productDetailEvents.tsx
+++ b/src/features/productDetail/productDetailContent/events/productDetailEvents.tsx
@@ -1,5 +1,13 @@
-import { FC, memo, useMemo, useRef } from 'react';
-import { Col, Empty, Row, Spin } from 'antd';
+import {
+ FC,
+ memo,
+ MouseEvent,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { Button, Col, Collapse, Empty, Row, Spin } from 'antd';
import { AgGridReact } from 'ag-grid-react';
import {
GqlChain,
@@ -14,7 +22,6 @@ import {
import { selectProductById } from '../../../productExplorer/productExplorerSlice';
import { CURRENT_LIVE_FACTSHEETS } from '../../../documentation/factSheets/liveFactsheets';
-import { ProductDetailEventsHeader } from './productDetailEventsHeader';
import { ProductDetailEventsGrid } from './productDetailEventsGrid';
import { ProductDetailEventsHeatmap } from './productDetailEventsHeatmap';
import { useExplorerBase } from '../productDetailUseExplorerBase';
@@ -27,6 +34,8 @@ export interface ProductDetailEventsProps {
chain: GqlChain;
isMobile?: boolean;
}
+const EVENTS_PANEL_KEY = 'events-panel';
+const { Panel } = Collapse;
export const ProductDetailEvents: FC = memo(
function ProductDetailEventsImpl({
@@ -34,6 +43,8 @@ export const ProductDetailEvents: FC = memo(
chain,
isMobile,
}: ProductDetailEventsProps) {
+ const [isPanelOpen, setIsPanelOpen] = useState(false);
+ const [hasRequestedData, setHasRequestedData] = useState(false);
const darkThemeAg = useAppSelector(selectAgGridTheme);
const chartTheme = useAppSelector(selectAgChartTheme);
@@ -46,72 +57,140 @@ export const ProductDetailEvents: FC = memo(
skip: undefined,
poolId: productId,
chain,
+ enabled: hasRequestedData,
});
const explorerBase = useExplorerBase(chain);
const thresholds = useBadgeThresholds(productAddress, livePools);
const gridRef = useRef>(null);
- const rowData = useMemo(
- () =>
- (poolEvents ?? []).map(
- ({ blockNumber, id, sender, timestamp, tx, type, valueUSD }) => ({
- id,
- blockNumber,
- type,
- sender,
- tx,
- timestamp,
- valueUSD,
- })
- ),
- [poolEvents]
- );
+ const rowData = poolEvents;
+ const isDesktop = !isMobile;
const showSpinner = loading && !error && rowData.length === 0;
- const heatmap = useHeatmapData(product, poolEvents);
+ const heatmap = useHeatmapData(
+ isMobile ? product : undefined,
+ isMobile ? poolEvents : undefined
+ );
+ const handleCollapseChange = useCallback((activeKey: string | string[]) => {
+ const isOpen = Array.isArray(activeKey)
+ ? activeKey.includes(EVENTS_PANEL_KEY)
+ : activeKey === EVENTS_PANEL_KEY;
+ setIsPanelOpen(isOpen);
+ if (isOpen) {
+ setHasRequestedData(true);
+ }
+ }, []);
+ const handleCsvExport = useCallback((event?: MouseEvent) => {
+ event?.stopPropagation();
+ gridRef.current?.api?.exportDataAsCsv();
+ }, []);
- return (
-
- gridRef.current?.api?.exportDataAsCsv()}
- />
-
+ useEffect(() => {
+ const maybeOpenForTarget = (target?: string) => {
+ if (target === '#events') {
+ setIsPanelOpen(true);
+ setHasRequestedData(true);
+ }
+ };
+
+ maybeOpenForTarget(window.location.hash);
-
+
+ {
+ e.stopPropagation();
+ }}
+ onMouseDown={(e) => {
+ e.stopPropagation();
+ }}
+ >
+
+
+ ) : null
+ }
+ >
+ Failed to load events.
- ) : isMobile ? (
-
- {!heatmap.heatmapData.length ? (
-
+ const onHashChange = () => maybeOpenForTarget(window.location.hash);
+ const onNavSelect = (event: Event) => {
+ const detail = (event as CustomEvent<{ href?: string }>).detail;
+ maybeOpenForTarget(detail?.href);
+ };
+
+ window.addEventListener('hashchange', onHashChange);
+ window.addEventListener(
+ 'product-detail-nav-select',
+ onNavSelect as EventListener
+ );
+
+ return () => {
+ window.removeEventListener('hashchange', onHashChange);
+ window.removeEventListener(
+ 'product-detail-nav-select',
+ onNavSelect as EventListener
+ );
+ };
+ }, []);
+
+ const content =
+ !hasRequestedData && isPanelOpen ? (
+ Failed to load events.
+ ) : !isDesktop ? (
+
+ {!heatmap.heatmapData.length ? (
+
+ ) : (
+
-
+
-
-
+
+ );
+
+ return (
+
+
+
+
- {metricsView === 'table' ? (
- isLoading ? (
-
+ Simulated HODL Performance Metric Analysis
+
+
+
+ }
+ extra={metricsToggle}
+ >
+ {metricsView === 'table' ? (
+ isLoading ? (
+ No Data
+ )
) : (
- No Data
- )
- ) : (
- <>
-
- Metric:{' '}
-
- }
- >
- {isLoading ? (
-
-
- Delta (Product − Benchmark)
-
+
+ }
+ >
+ {isLoading ? (
+
- {deltaTag}
+
+ Delta (Product − Benchmark)
+
+
+
+ Product: {format2(productReturnValue)}
+
+
+ Benchmark:{' '}
+ {format2(benchmarkReturnValue)}
+
+
-
+ {deltaTag}
+
+
-
- {selectedBenchmarkRelThreshold?.tooltipDescription}
-
-
-
-
+ const compareProductPanel = SHOW_COMPARE_PRODUCT_PANEL ? (
+
@@ -252,18 +271,16 @@ export const ProductDetailSummaryMobile = ({
);
- const ReturnDistributionCard = () => (
-
@@ -222,8 +241,8 @@ export const ProductDetailSummaryMobile = ({
{product.name}
@@ -231,8 +250,8 @@ export const ProductDetailSummaryMobile = ({
{comparingProduct && (
@@ -241,8 +260,8 @@ export const ProductDetailSummaryMobile = ({
+ const returnDistributionCard = (
+
{product.name}
diff --git a/src/features/productExplorer/productExplorer.tsx b/src/features/productExplorer/productExplorer.tsx
index 492461e..a7dd4a4 100644
--- a/src/features/productExplorer/productExplorer.tsx
+++ b/src/features/productExplorer/productExplorer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { startTransition, useCallback, useEffect, useState } from 'react';
import { Layout } from 'antd';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import { useRetrieveFiltersQuery } from '../../services/productRetrievalService';
@@ -20,6 +20,11 @@ import TermsOfServiceGateModal from '../documentation/landing/termsOfServiceModa
export default function ProductExplorer() {
const dispatch = useAppDispatch();
const [horizontalView, setHorizontalView] = useState(true);
+ const handleHorizontalViewChange = useCallback((checked: boolean) => {
+ startTransition(() => {
+ setHorizontalView(checked);
+ });
+ }, []);
const handleGateClose = () => dispatch(setAcceptedTermsAndConditions(true));
@@ -74,7 +79,7 @@ export default function ProductExplorer() {
<>
+>();
+
+export const selectReturnAnalysisByProductId = (state: RootState, id: string) => {
+ let selector = returnAnalysisSelectorCache.get(id);
+ if (!selector) {
+ selector = createSelector(
+ [(rootState: RootState) => getProductById(rootState, id)],
+ (targetProduct) => filterReturnAnalysis(targetProduct)
+ );
+ returnAnalysisSelectorCache.set(id, selector);
+ }
+ return selector(state);
+};
+
+const benchmarkAnalysisSelectorCache = new Map<
+ string,
+ (state: RootState) => ReturnType
+>();
+
+export const selectBenchmarkAnalysisByProductId = (
+ state: RootState,
+ id: string,
+ benchmarkName: string | null
+) => {
+ const cacheKey = `${id}::${benchmarkName ?? '__default__'}`;
+ let selector = benchmarkAnalysisSelectorCache.get(cacheKey);
+ if (!selector) {
+ selector = createSelector(
+ [(rootState: RootState) => getProductById(rootState, id)],
+ (targetProduct) => filterBenchmarkAnalysis(targetProduct, benchmarkName)
+ );
+ benchmarkAnalysisSelectorCache.set(cacheKey, selector);
+ }
+ return selector(state);
+};
+
const getMetricKey = (metricName: string) => {
return metricName.toLowerCase().replace(/ /g, '_');
};
+const timeseriesAnalysisSelectorCache = new Map<
+ string,
+ (state: RootState) => ReturnType
+>();
+
export const selectTimeseriesAnalysisByProductId = (
state: RootState,
id: string
) => {
- const targetProduct = state.productExplorer.productMap[id];
-
- if (targetProduct) {
- const result =
- targetProduct.simulationRunBreakdown?.simulationRunResultAnalysis?.return_timeseries_analysis.map(
- (element) => {
- return {
- ...element,
- metricKey: getMetricKey(element.metricName),
- };
- }
- );
-
- return result;
+ let selector = timeseriesAnalysisSelectorCache.get(id);
+ if (!selector) {
+ selector = createSelector(
+ [(rootState: RootState) => getProductById(rootState, id)],
+ (targetProduct) => mapTimeseriesAnalysis(targetProduct)
+ );
+ timeseriesAnalysisSelectorCache.set(id, selector);
}
-
- return null;
+ return selector(state);
};
export const selectPageSize = (state: RootState) =>
diff --git a/src/features/productExplorer/productItem/card/productItem.tsx b/src/features/productExplorer/productItem/card/productItem.tsx
index 114384f..2343025 100644
--- a/src/features/productExplorer/productItem/card/productItem.tsx
+++ b/src/features/productExplorer/productItem/card/productItem.tsx
@@ -15,6 +15,7 @@ import { ProductItemPerformanceAreaGraph } from './productItemPerformanceAreaGra
import { ProductItemBottom } from './productItemBottom';
import { ProductItemBackground } from '../productItemBackground';
import { getTvl } from '../productItemHelpers';
+import { ProductItemWide } from '../wide/productItemWide';
import styles from './productItem.module.scss';
const DEFAULT_ACTIVE_KEY = '1';
@@ -23,9 +24,10 @@ const { Text } = Typography;
interface ProductItemProps {
product: Product;
+ wide?: boolean;
}
-export const ProductItem: FC = ({ product }) => {
+const ProductItemCard: FC> = ({ product }) => {
const dispatch = useAppDispatch();
const overrideTab = useAppSelector(selectOverrideTab);
const isDarkTheme = useAppSelector(selectTheme);
@@ -134,7 +136,17 @@ export const ProductItem: FC = ({ product }) => {
= ({ product }) => {
);
};
+
+export const ProductItem: FC = ({ product, wide }) => {
+ if (wide) {
+ return ();
+ const mappedData = useMemo(() => mapPerformanceData(data), [data]);
const chartTheme = useAppSelector(selectAgChartTheme);
+ const chartWidth = wide ? 100 : 288;
+ const chartHeight = wide ? 100 : 240;
const performanceList = useMemo(
() => mappedData.map((item) => item.absReturn),
@@ -155,33 +160,42 @@ export const ProductItemPerformanceAreaGraph: FC<
];
}, [mappedData, interval, min, max, wide]);
- return (
- ({
+ width: chartWidth,
+ height: chartHeight,
+ data: mappedData,
+ series,
+ axes,
+ legend: {
+ enabled: false,
+ },
+ overlays: {
+ noData: {
+ text: 'No data',
},
- theme: {
- baseTheme: chartTheme,
- overrides: {
- common: {
- background: {
- fill: 'transparent',
- },
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
},
},
},
- }}
- />
+ },
+ }),
+ [axes, chartHeight, chartTheme, chartWidth, mappedData, series]
+ );
+
+ return (
+ = ({ wide }) => {
() => Object.keys(products).length > 0,
[products]
);
+ const sortedProducts = useMemo(
+ () => sort(Object.values(products)),
+ [products, sort]
+ );
+ const showLoadingProducts = loading && !areProductsLoaded;
useEffect(() => {
if (parent.current) {
@@ -95,25 +99,20 @@ export const ProductItemGrid: FC = ({ wide }) => {
}}
>
{wide &&
diff --git a/src/features/productExplorer/productItem/wide/productItemPerformanceLineGraph.tsx b/src/features/productExplorer/productItem/wide/productItemPerformanceLineGraph.tsx
index de07b7a..7a18e93 100644
--- a/src/features/productExplorer/productItem/wide/productItemPerformanceLineGraph.tsx
+++ b/src/features/productExplorer/productItem/wide/productItemPerformanceLineGraph.tsx
@@ -12,6 +12,7 @@ import { CURRENT_PERFORMANCE_PERIOD, Product } from '../../../../models';
import { selectAgChartTheme } from '../../../themes/themeSlice';
import { filterByTimeRange } from '../../../productDetail/productDetailContent/helpers';
import { getCurrentPerformanceComponent } from '../shared/CurrentPerformance';
+import { useHasEnteredViewport } from '../../../../hooks/useHasEnteredViewport';
import styles from './productItemPerformanceLineGraph.module.scss';
@@ -45,9 +46,13 @@ const mapPerformanceData = (product: Product) => {
export const ProductItemPerformanceLineGraph: FC<
ProductItemPerformanceGraphProps
> = ({ product, wide }) => {
- const mappedData = mapPerformanceData(product);
+ const { containerRef, hasEnteredViewport } =
+ useHasEnteredViewport();
+ const mappedData = useMemo(() => mapPerformanceData(product), [product]);
const chartTheme = useAppSelector(selectAgChartTheme);
+ const chartWidth = wide ? 100 : 288;
+ const chartHeight = wide ? 100 : 240;
const series: AgCartesianSeriesOptions[] = useMemo(() => {
return [
@@ -105,43 +110,50 @@ export const ProductItemPerformanceLineGraph: FC<
];
}, []);
+ const chartOptions = useMemo(
+ () => ({
+ width: chartWidth,
+ height: chartHeight,
+ data: mappedData,
+ series,
+ axes,
+ legend: {
+ enabled: false,
+ },
+ overlays: {
+ noData: {
+ text: 'No data',
+ },
+ },
+ animation: {
+ enabled: false,
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
+ },
+ },
+ },
+ },
+ }),
+ [axes, chartHeight, chartTheme, chartWidth, mappedData, series]
+ );
+
return (
-
{(product.timeSeries?.length ?? 0) > 0 && (
x.sharePrice) ?? []
- }
- yAxisOverride={{ title: { enabled: false } }}
+ marketValues={productMarketValues}
+ yAxisOverride={RETURN_DISTRIBUTION_Y_AXIS_OVERRIDE}
/>
)}
@@ -275,10 +292,8 @@ export const ProductDetailSummaryMobile = ({
{(product.timeSeries?.length ?? 0) > 0 && (
x.hodlSharePrice) ?? []
- }
- yAxisOverride={{ title: { enabled: false } }}
+ marketValues={benchmarkMarketValues}
+ yAxisOverride={RETURN_DISTRIBUTION_Y_AXIS_OVERRIDE}
/>
)}
@@ -289,11 +304,8 @@ export const ProductDetailSummaryMobile = ({
{(comparingProduct?.timeSeries?.length ?? 0) > 0 && (
x.sharePrice) ??
- []
- }
- yAxisOverride={{ title: { enabled: false } }}
+ marketValues={comparingProductMarketValues}
+ yAxisOverride={RETURN_DISTRIBUTION_Y_AXIS_OVERRIDE}
/>
)}
@@ -307,90 +319,95 @@ export const ProductDetailSummaryMobile = ({
return (
{/* Hidden because currently live analytics is turned off, comparing factsheet with live is not great */}
-
);
};
diff --git a/src/features/productDetail/productDetailSidebar/productDetailSidebarStrategySummary.tsx b/src/features/productDetail/productDetailSidebar/productDetailSidebarStrategySummary.tsx
index bd61221..95aeb9e 100644
--- a/src/features/productDetail/productDetailSidebar/productDetailSidebarStrategySummary.tsx
+++ b/src/features/productDetail/productDetailSidebar/productDetailSidebarStrategySummary.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
import { Product } from '../../../models';
import { Eli5 } from '../../shared';
import { ProductDetailSidebarElement } from './productDetailSidebarElement';
@@ -8,10 +8,12 @@ import { Collapse } from 'antd';
interface ProductDetailSidebarStrategySummaryProps {
product: Product;
}
+const STRATEGY_PANEL_KEY = 'strategy';
export const ProductDetailSidebarStrategySummary: FC<
ProductDetailSidebarStrategySummaryProps
> = ({ product }) => {
+ const [isPanelOpen, setIsPanelOpen] = useState(false);
const livePools = CURRENT_LIVE_FACTSHEETS;
const liveProduct = livePools.factsheets.find(
(p) => p.poolId.toLowerCase() == product.address.toLowerCase()
@@ -19,12 +21,52 @@ export const ProductDetailSidebarStrategySummary: FC<
const strategyName = liveProduct?.fixedSettings.find(
(x) => x[0] == 'Strategy'
)?.[1];
+
+ const handleCollapseChange = useCallback((activeKey: string | string[]) => {
+ const isOpen = Array.isArray(activeKey)
+ ? activeKey.includes(STRATEGY_PANEL_KEY)
+ : activeKey === STRATEGY_PANEL_KEY;
+ setIsPanelOpen(isOpen);
+ }, []);
+
+ useEffect(() => {
+ const maybeOpenForTarget = (target?: string) => {
+ if (target === '#summary') {
+ setIsPanelOpen(true);
+ }
+ };
+
+ maybeOpenForTarget(window.location.hash);
+
+ const onHashChange = () => maybeOpenForTarget(window.location.hash);
+ const onNavSelect = (event: Event) => {
+ const detail = (event as CustomEvent<{ href?: string }>).detail;
+ maybeOpenForTarget(detail?.href);
+ };
+
+ window.addEventListener('hashchange', onHashChange);
+ window.addEventListener(
+ 'product-detail-nav-select',
+ onNavSelect as EventListener
+ );
+
+ return () => {
+ window.removeEventListener('hashchange', onHashChange);
+ window.removeEventListener(
+ 'product-detail-nav-select',
+ onNavSelect as EventListener
+ );
+ };
+ }, []);
+
return (
<>
- {/* Product */}
-
+
+
+ x.metricName == selectedReturnAnalysis?.metricName
+ )?.metricValue ?? 0
+ }
+ gradeColor={
+ repr(
+ returnAnalysisThresholds,
+ currentReturnAnalysisLabel,
+ comparingProductReturnAnalysis?.find(
+ (x) => x.metricName == selectedReturnAnalysis?.metricName
+ )?.metricValue ?? 0
+ ).color
+ }
+ gradeText={
+ repr(
+ returnAnalysisThresholds,
+ currentReturnAnalysisLabel,
+ comparingProductReturnAnalysis?.find(
+ (x) => x.metricName == selectedReturnAnalysis?.metricName
+ )?.metricValue ?? 0
+ ).grade
+ }
+ />
+ )}
+
+
+
+ {/* Product */}
x.metricName == selectedReturnAnalysis?.metricName
- )?.metricValue ?? 0
+ label={product.name}
+ value={selectedReturnAnalysis?.metricValue ?? 0}
+ gradeColor={
+ repr(
+ returnAnalysisThresholds,
+ currentReturnAnalysisLabel,
+ selectedBenchmarkReturnAnalysis?.metricValue ?? 0
+ ).color
}
+ gradeText={
+ repr(
+ returnAnalysisThresholds,
+ currentReturnAnalysisLabel,
+ selectedBenchmarkReturnAnalysis?.metricValue ?? 0
+ ).grade
+ }
+ />
+
+ {/* HODL */}
+ x.metricName == selectedReturnAnalysis?.metricName
- )?.metricValue ?? 0
+ selectedReturnAnalysis?.metricValue ?? 0
).color
}
gradeText={
repr(
returnAnalysisThresholds,
currentReturnAnalysisLabel,
- comparingProductReturnAnalysis?.find(
- (x) => x.metricName == selectedReturnAnalysis?.metricName
- )?.metricValue ?? 0
+ selectedReturnAnalysis?.metricValue ?? 0
).grade
}
/>
- )}
-
-
+
+ {/* Comparing product (optional) */}
+ {comparingProduct && (
+
+
+
- {product.name}
+
+ {product.name}
+
+ {hasEnteredViewport ? (
+
);
};
diff --git a/src/features/productExplorer/productItem/productItemGrid.tsx b/src/features/productExplorer/productItem/productItemGrid.tsx
index 73b1341..0c39279 100644
--- a/src/features/productExplorer/productItem/productItemGrid.tsx
+++ b/src/features/productExplorer/productItem/productItemGrid.tsx
@@ -12,7 +12,6 @@ import { ProductExplorerSort } from '../productExplorerSort/productExplorerSort'
import { ProductExplorerTabOverride } from '../productExplorerTabOverride/productExplorerTabOverride';
import { ProductExplorerPagination } from '../ProductExplorerPagination';
import { useSort } from './useSort';
-import { ProductItemWide } from './wide/productItemWide';
import { ProductItemGridHeader } from './productItemGridHeader';
import { ProductItemLoading } from './card/productItemLoading';
import { ProductItemWideLoading } from './wide/productItemWideLoading';
@@ -38,6 +37,11 @@ export const ProductItemGrid: FC
+
{getCurrentPerformanceComponent(product)}
- = ({ product }) => {
return !!product.timeSeries && product.timeSeries.length > 0;
}, [product.timeSeries]);
- const LoadingGraph = () => (
+ const renderLoadingGraph = () => (
- (
-
-
- )}
-
- );
-
- const ChartsAndTokensColumns = () => (
- <>
-
-
- ) : (
-
-
- ) : (
- = ({ product }) => {
>
{product.name}
@@ -213,8 +131,88 @@ export const ProductItemWide: FC = ({ product }) => {
)}
-
);
}
+
+export const SimulationResultWeightChart = memo(SimulationResultWeightChartComponent);
diff --git a/src/features/simulationRunner/sections/simulationRunnerImportResultsModal.tsx b/src/features/simulationRunner/sections/simulationRunnerImportResultsModal.tsx
index 75813d3..c4f139f 100644
--- a/src/features/simulationRunner/sections/simulationRunnerImportResultsModal.tsx
+++ b/src/features/simulationRunner/sections/simulationRunnerImportResultsModal.tsx
@@ -1,29 +1,153 @@
-import { Button, Col, Modal } from 'antd';
-import { ChangeEvent, RefObject } from 'react';
+import {
+ Button,
+ Col,
+ InputNumber,
+ Modal,
+ Select,
+ Spin,
+ Typography,
+} from 'antd';
+import {
+ ChangeEvent,
+ RefObject,
+ memo,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import {
+ GetPoolsSummaryQueryVariables,
+ GqlChain,
+ GqlPoolType,
+} from '../../../__generated__/graphql-types';
+import { useFetchPoolsSummaryByParams } from '../../../hooks/useFetchPoolsSummaryByParams';
+import { poolTypes } from '../../productDetail/productDetailContent/comparableProduct/comparableProductFormHelper';
import styles from '../../simulationResults/simulationResultSummary.module.css';
import runnerStyles from '../simulationRunnerCommon.module.css';
+const { Text } = Typography;
+const DEFAULT_MIN_TVL = 10000;
+const MIN_ALLOWED_TVL = 1000;
+
+export interface LivePoolSelection {
+ id: string;
+ chain: GqlChain;
+ name: string;
+}
+
+interface LivePoolSelectOption extends LivePoolSelection {
+ value: string;
+ label: string;
+}
+
interface ImportResultsModalProps {
isOpen: boolean;
+ runStatusIndex: number;
+ importingLivePool: boolean;
onClose: () => void;
paramsFileInputRef: RefObject;
resultsFileInputRef: RefObject;
onParamsImportClick: () => void;
onResultsImportClick: () => void;
+ onLivePoolImport: (pool: LivePoolSelection) => Promise | void;
onParamsFileChange: (event: ChangeEvent) => void;
onResultsFileChange: (event: ChangeEvent) => void;
}
-export function SimulationRunnerImportResultsModal({
+function SimulationRunnerImportResultsModalComponent({
isOpen,
+ runStatusIndex,
+ importingLivePool,
onClose,
paramsFileInputRef,
resultsFileInputRef,
onParamsImportClick,
onResultsImportClick,
+ onLivePoolImport,
onParamsFileChange,
onResultsFileChange,
}: ImportResultsModalProps) {
+ const [selectedPoolType, setSelectedPoolType] = useState<
+ GqlPoolType | undefined
+ >(undefined);
+ const [selectedPoolValue, setSelectedPoolValue] = useState<
+ string | undefined
+ >(undefined);
+ const [minTvl, setMinTvl] = useState(DEFAULT_MIN_TVL);
+
+ const poolParams = useMemo(
+ () => ({
+ first: 100,
+ where: {
+ minTvl,
+ tagNotIn: ['BLACK_LISTED'],
+ ...(selectedPoolType ? { poolTypeIn: [selectedPoolType] } : {}),
+ },
+ }),
+ [minTvl, selectedPoolType]
+ );
+
+ const { data, loading: loadingPools } = useFetchPoolsSummaryByParams(
+ poolParams,
+ {
+ skip: !isOpen,
+ }
+ );
+
+ const poolOptions = useMemo(
+ () =>
+ data?.poolGetPools.map((pool) => ({
+ value: `${pool.chain}:${pool.id}`,
+ label: `${pool.name} (${pool.chain})`,
+ id: pool.id,
+ chain: pool.chain,
+ name: pool.name,
+ })) ?? [],
+ [data?.poolGetPools]
+ );
+
+ const selectedLivePool = useMemo(
+ () => poolOptions.find((option) => option.value === selectedPoolValue),
+ [poolOptions, selectedPoolValue]
+ );
+
+ useEffect(() => {
+ if (selectedPoolValue && !selectedLivePool) {
+ setSelectedPoolValue(undefined);
+ }
+ }, [selectedPoolValue, selectedLivePool]);
+
+ useEffect(() => {
+ if (!isOpen) {
+ setSelectedPoolValue(undefined);
+ }
+ }, [isOpen]);
+
+ const canImportLivePool = runStatusIndex === 2 && !!selectedLivePool;
+
+ const handleMinTvlChange = (value: number | null) => {
+ const nextMinTvl = Math.max(value ?? MIN_ALLOWED_TVL, MIN_ALLOWED_TVL);
+ setMinTvl(nextMinTvl);
+ setSelectedPoolValue(undefined);
+ };
+
+ const handlePoolTypeChange = (value: GqlPoolType | undefined) => {
+ setSelectedPoolType(value);
+ setSelectedPoolValue(undefined);
+ };
+
+ const handleImportLivePoolClick = () => {
+ if (!selectedLivePool) {
+ return;
+ }
+
+ void onLivePoolImport({
+ id: selectedLivePool.id,
+ chain: selectedLivePool.chain,
+ name: selectedLivePool.name,
+ });
+ };
+
return (
Pool Type
+
+ allowClear
+ showSearch
+ optionFilterProp="label"
+ options={poolTypes}
+ placeholder="Any pool type"
+ value={selectedPoolType}
+ onChange={handlePoolTypeChange}
+ />
+
+ Min TVL
+
+ `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+ }
+ />
+
+ Pool Name
+ {loadingPools ? (
+
- (
+
+ {renderLoadingGraph()}
+
+ )}
+
+
+
+ ) : (
+ renderLoadingGraph()
+ )}
+
+
+
+ ) : (
+ renderLoadingGraph()
+ )}
+
+
diff --git a/src/features/shared/graphs/productItemOverviewGraph.tsx b/src/features/shared/graphs/productItemOverviewGraph.tsx
index 626737d..411d60d 100644
--- a/src/features/shared/graphs/productItemOverviewGraph.tsx
+++ b/src/features/shared/graphs/productItemOverviewGraph.tsx
@@ -10,6 +10,7 @@ import {
import 'ag-charts-enterprise';
import { Typography } from 'antd';
import { useAppSelector } from '../../../app/hooks';
+import { useHasEnteredViewport } from '../../../hooks/useHasEnteredViewport';
import { selectAgChartTheme } from '../../themes/themeSlice';
import { productExplorerTranslation } from '../../productExplorer/translations';
import {
@@ -51,8 +52,12 @@ export const ProductItemOverviewGraph: FC = ({
widthOverride,
}) => {
const chartTheme = useAppSelector(selectAgChartTheme);
+ const { containerRef, hasEnteredViewport } =
+ useHasEnteredViewport();
const totalScore = getTotalScore(data.map((item) => item.value ?? 0));
+ const chartWidth = widthOverride ?? (wide ? 100 : 288);
+ const chartHeight = heightOverride ?? (wide ? 100 : 240);
const radarColor = useMemo(() => {
return getTotalScoreColor(totalScore);
@@ -118,8 +123,58 @@ export const ProductItemOverviewGraph: FC = ({
];
}, [intervalStepOverride, fontSizeOverride, orientationOverride, wide]);
+ const chartOptions = useMemo(
+ () => ({
+ width: chartWidth,
+ height: chartHeight,
+ data,
+ series,
+ axes,
+ legend: {
+ enabled: false,
+ },
+ overlays: {
+ noData: {
+ text: 'No data',
+ },
+ },
+ animation: {
+ enabled: !wide,
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
+ },
+ },
+ 'radar-area': {
+ axes: {
+ 'angle-category': {
+ label: {
+ color: isDarkTheme ? '#FFFFEF' : '#0B1827',
+ },
+ },
+ },
+ },
+ },
+ },
+ }),
+ [
+ axes,
+ chartHeight,
+ chartTheme,
+ chartWidth,
+ data,
+ isDarkTheme,
+ series,
+ wide,
+ ]
+ );
+
return (
-
@@ -193,12 +209,9 @@ export function SimulationResultsSummaryStep(props: BreakdownProps) {
width: 200,
fontSize: 10,
}}
- defaultSelectedKeys={[chartSelection]}
- items={getGraphMenuItems()}
- activeKey={chartSelection}
- onClick={(x) => {
- dispatch(changeChartSelected(x.key));
- }}
+ items={graphMenuItems}
+ activeKey={resultChartSelection}
+ onClick={handleChartSelection}
/>
@@ -213,7 +226,7 @@ export function SimulationResultsSummaryStep(props: BreakdownProps) {
);
- const BreakdownTab = () => (
+ const breakdownTab = (
@@ -223,11 +236,8 @@ export function SimulationResultsSummaryStep(props: BreakdownProps) {
width: 200,
fontSize: 10,
}}
- defaultSelectedKeys={[resultBreakdownSelection]}
- items={getBreakdownMenuItems()}
- onClick={(x) => {
- dispatch(changeBreakdownSelected(x.key));
- }}
+ items={breakdownMenuItems}
+ onClick={handleBreakdownSelection}
activeKey={resultBreakdownSelection}
/>
@@ -242,13 +252,17 @@ export function SimulationResultsSummaryStep(props: BreakdownProps) {
-
-
);
}
+
+export const SimulationResultsSummaryStep = memo(
+ SimulationResultsSummaryStepComponent
+);
diff --git a/src/features/simulationResults/visualisations/simulationResultAmountChart.tsx b/src/features/simulationResults/visualisations/simulationResultAmountChart.tsx
index eeee5b6..4cd8df8 100644
--- a/src/features/simulationResults/visualisations/simulationResultAmountChart.tsx
+++ b/src/features/simulationResults/visualisations/simulationResultAmountChart.tsx
@@ -1,7 +1,7 @@
import { AgCharts } from 'ag-charts-react';
import * as agCharts from 'ag-charts-community';
-import { AgTimeAxisOptions } from 'ag-charts-community';
-import { useMemo, useState } from 'react';
+import { AgChartOptions, AgTimeAxisOptions } from 'ag-charts-community';
+import { memo, useMemo, useState } from 'react';
import styles from '../simulationResultSummary.module.css';
import { useAppSelector } from '../../../app/hooks';
@@ -30,125 +30,240 @@ export interface FlatAmountTimeStep {
type VolumeType = 'tradingVolume' | 'reserveQuantity';
-export function SimulationResultAmountChart(props: BreakdownProps) {
- const simulationBreakdownResults = props.breakdowns;
- const simulationTimeRangeSelected = useAppSelector(
- selectSimulationResultTimeRangeSelection
- );
- const chartTheme = useAppSelector(selectAgChartTheme);
+const normalisedTokenName = (token: string) => token.replace(/\./g, '-');
- const [volumeType, setVolumeType] = useState('tradingVolume');
+function getAmountDeltaData(breakdown: SimulationRunBreakdown): FlatAmountTimeStep[] {
+ const result: FlatAmountTimeStep[] = [];
+ const data = getChartTimeSteps(breakdown);
- // function amountFormatter(amount: number) {
- // var sansDec = amount.toFixed(0);
- // var formatted = sansDec.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
- // return `${formatted}`;
- // }
+ for (const [index, current] of data.entries()) {
+ const prev = data[index - 1];
- const normalisedTokenName = (token: string) => {
- return token.replace(/\./g, '-');
- };
+ const timeStep: FlatAmountTimeStep = {
+ date: current.date,
+ unix: current.unix,
+ };
- function getAmountDeltaData(
- breakdown: SimulationRunBreakdown
- ): FlatAmountTimeStep[] {
- const result: FlatAmountTimeStep[] = [];
- const data = getChartTimeSteps(breakdown);
+ current.coinsHeld.forEach((coinHeld) => {
+ const lowerCode = coinHeld.coin.coinCode.toLowerCase();
+ if (coinHeld.amount !== undefined && coinHeld.amount !== null) {
+ timeStep[normalisedTokenName(lowerCode)] = Math.abs(
+ coinHeld.amount -
+ (prev?.coinsHeld.find(
+ (z) => z.coin.coinCode === coinHeld.coin.coinCode
+ )?.amount ?? 0)
+ );
+ }
+ });
- for (const [index, current] of data.entries()) {
- const prev = data[index - 1];
+ result.push(timeStep);
+ }
- const timeStep: FlatAmountTimeStep = {
- date: current.date,
- unix: current.unix,
- };
+ return result;
+}
- current.coinsHeld.forEach((coinHeld) => {
- const lowerCode = coinHeld.coin.coinCode.toLowerCase();
- if (coinHeld.amount !== undefined && coinHeld.amount !== null) {
- timeStep[normalisedTokenName(lowerCode)] = Math.abs(
- coinHeld.amount -
- (prev?.coinsHeld.find(
- (z) => z.coin.coinCode === coinHeld.coin.coinCode
- )?.amount ?? 0)
- );
- }
- });
+function getAmountData(breakdown: SimulationRunBreakdown): FlatAmountTimeStep[] {
+ const result: FlatAmountTimeStep[] = [];
+ let data = getChartTimeSteps(breakdown);
- result.push(timeStep);
- }
+ if (data.length > 500) {
+ // stacked chart is cpu intensive; reduce points to keep UI responsive
+ const proportion = Math.ceil(data.length / 500);
+ data = data.filter((_, index) => index % proportion === 0);
+ }
+ for (const current of data) {
+ const timeStep: FlatAmountTimeStep = {
+ date: current.date,
+ unix: current.unix,
+ };
+
+ current.coinsHeld.forEach((coinHeld) => {
+ const lowerCode = coinHeld.coin.coinCode.toLowerCase();
+ timeStep[normalisedTokenName(lowerCode)] = coinHeld.amount;
+ });
- return result;
+ result.push(timeStep);
}
+ return result;
+}
- function getAmountData(breakdown: SimulationRunBreakdown) {
- const result: FlatAmountTimeStep[] = [];
- let data = getChartTimeSteps(breakdown);
+function getAmountSeries(
+ breakdown: SimulationRunBreakdown
+): agCharts.AgCartesianSeriesOptions[] {
+ return breakdown.simulationRun.poolConstituents.map((x) => ({
+ type: 'line',
+ xKey: 'unix',
+ yKey: normalisedTokenName(x.coin.coinCode.toLowerCase()),
+ yName: x.coin.coinCode.toLowerCase(),
+ marker: { enabled: false },
+ }));
+}
- if (data.length > 500) {
- //stacked chart is more cpu intensive, ~500 points is a good balance
- const proportion = Math.ceil(data.length / 500);
- data = data.filter((_, index) => index % proportion === 0);
- }
- for (const current of data) {
- const timeStep: FlatAmountTimeStep = {
- date: current.date,
- unix: current.unix,
- };
+function getTimeAxisOption(dataLength: number): AgTimeAxisOptions {
+ return {
+ type: 'time',
+ interval: {
+ step:
+ dataLength > 350
+ ? agCharts.time.month.every(6)
+ : dataLength > 150
+ ? agCharts.time.month.every(3)
+ : agCharts.time.month.every(1),
+ },
+ label: {
+ format: '%m/%y',
+ },
+ };
+}
- current.coinsHeld.forEach((coinHeld) => {
- const lowerCode = coinHeld.coin.coinCode.toLowerCase();
- timeStep[normalisedTokenName(lowerCode)] = coinHeld.amount;
- });
+const AmountBreakdownRow = memo(function AmountBreakdownRow({
+ breakdown,
+ volumeType,
+}: {
+ breakdown: SimulationRunBreakdown;
+ volumeType: VolumeType;
+}) {
+ const chartTheme = useAppSelector(selectAgChartTheme);
- result.push(timeStep);
- }
- return result;
- }
+ const amountDeltaData = useMemo(
+ () => getAmountDeltaData(breakdown),
+ [breakdown]
+ );
+ const amountData = useMemo(() => getAmountData(breakdown), [breakdown]);
+ const amountSeries = useMemo(() => getAmountSeries(breakdown), [breakdown]);
- function getAmountSeries(
- breakdown: SimulationRunBreakdown
- ): agCharts.AgCartesianSeriesOptions[] {
- const series: agCharts.AgCartesianSeriesOptions[] = [];
- breakdown.simulationRun.poolConstituents.forEach((x) => {
- series.push({
- type: 'line',
- xKey: 'unix',
- yKey: normalisedTokenName(x.coin.coinCode.toLowerCase()),
- yName: x.coin.coinCode.toLowerCase(),
- marker: { enabled: false },
- });
- });
- return series;
- }
+ const tradingVolumeOptions = useMemo(
+ () => ({
+ height: 350,
+ data: amountDeltaData,
+ navigator: {
+ enabled: true,
+ height: 5,
+ spacing: 6,
+ },
+ axes: [
+ getTimeAxisOption(amountDeltaData.length),
+ {
+ type: 'log',
+ position: 'left',
+ base: 2,
+ label: {
+ format: '~s',
+ },
+ },
+ ],
+ series: amountSeries,
+ legend: {
+ position: 'bottom',
+ },
+ overlays: {
+ noData: {
+ text: 'No data',
+ },
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
+ },
+ },
+ },
+ },
+ }),
+ [amountDeltaData, amountSeries, chartTheme]
+ );
- function getTimeAxisOption(dataLength: number): AgTimeAxisOptions {
- return {
- type: 'time',
- interval: {
- step:
- dataLength > 350
- ? agCharts.time.month.every(6)
- : dataLength > 150
- ? agCharts.time.month.every(3)
- : agCharts.time.month.every(1),
+ const reserveQuantityOptions = useMemo(
+ () => ({
+ height: 350,
+ data: amountData,
+ navigator: {
+ enabled: true,
+ height: 5,
+ spacing: 6,
},
- label: {
- format: '%m/%y',
+ axes: [
+ getTimeAxisOption(amountData.length),
+ {
+ type: 'log',
+ position: 'left',
+ base: 2,
+ label: {
+ format: '~s',
+ },
+ },
+ ],
+ series: amountSeries,
+ legend: {
+ position: 'bottom',
},
- };
- }
+ overlays: {
+ noData: {
+ text: 'No data',
+ },
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
+ },
+ },
+ },
+ },
+ }),
+ [amountData, amountSeries, chartTheme]
+ );
+
+ return (
+
+
+ );
+});
+
+function SimulationResultAmountChartComponent(props: BreakdownProps) {
+ const simulationTimeRangeSelected = useAppSelector(
+ selectSimulationResultTimeRangeSelection
+ );
+ const [volumeType, setVolumeType] = useState('tradingVolume');
const visibleBreakdowns = useMemo(
() =>
- simulationBreakdownResults
+ props.breakdowns
.filter((x) => x.simulationRun.updateRule.updateRuleName !== 'HODL')
.filter((x) => x.simulationRunStatus === 'Complete')
.filter((x) => x.timeRange.name === simulationTimeRangeSelected),
- [simulationBreakdownResults, simulationTimeRangeSelected]
+ [props.breakdowns, simulationTimeRangeSelected]
);
- const ChartDataTypeSelector = () => (
+ const chartDataTypeSelector = (
Amount Changes
@@ -169,131 +284,22 @@ export function SimulationResultAmountChart(props: BreakdownProps) {
);
- const BreakdownAmountRows = () => (
-
-
-
- );
- })}
-
-
- );
-
return (
);
}
+
+export const SimulationResultDrawdownChart = memo(
+ SimulationResultDrawdownChartComponent
+);
diff --git a/src/features/simulationResults/visualisations/simulationResultMarketValueChart.tsx b/src/features/simulationResults/visualisations/simulationResultMarketValueChart.tsx
index 958d1fa..56c440d 100644
--- a/src/features/simulationResults/visualisations/simulationResultMarketValueChart.tsx
+++ b/src/features/simulationResults/visualisations/simulationResultMarketValueChart.tsx
@@ -1,7 +1,7 @@
import { AgCharts } from 'ag-charts-react';
import * as agCharts from 'ag-charts-community';
import { AgTimeAxisOptions } from 'ag-charts-community';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
import styles from '../simulationResultSummary.module.css';
import { useAppSelector } from '../../../app/hooks';
@@ -24,7 +24,7 @@ export interface SeriesConfig {
stroke: string | undefined;
}
-export function SimulationResultMarketValueChart(props: BreakdownProps) {
+function SimulationResultMarketValueChartComponent(props: BreakdownProps) {
const simulationBreakdownResults = props.breakdowns;
const simulationTimeRangeSelected = useAppSelector(
selectSimulationResultTimeRangeSelection
@@ -99,27 +99,96 @@ export function SimulationResultMarketValueChart(props: BreakdownProps) {
visibleBreakdowns,
]);
- function getTimeAxisOption(dataLength: number): AgTimeAxisOptions {
- return {
+ const visibleBreakdownStepsLength =
+ visibleBreakdowns[0]?.timeSteps.length ?? 1;
+
+ const timeAxisOption = useMemo(
+ () => ({
type: 'time',
interval: {
step:
props.overrideXAxisInterval !== undefined
? agCharts.time.month.every(props.overrideXAxisInterval)
- : dataLength > 350
+ : visibleBreakdownStepsLength > 350
? agCharts.time.month.every(6)
- : dataLength > 150
+ : visibleBreakdownStepsLength > 150
? agCharts.time.month.every(3)
: agCharts.time.month.every(1),
},
label: {
format: '%Y-%m',
},
- };
- }
+ }),
+ [props.overrideXAxisInterval, visibleBreakdownStepsLength]
+ );
- const visibleBreakdownStepsLength =
- visibleBreakdowns[0]?.timeSteps.length ?? 1;
+ const chartOptions = useMemo(
+ () => ({
+ height: props.overrideHeight ?? 500,
+ navigator: {
+ enabled: props.overrideNagivagtion ?? true,
+ height: 5,
+ spacing: 6,
+ },
+ padding: {
+ right: 40,
+ },
+ axes: [
+ timeAxisOption,
+ {
+ type: 'number' as const,
+ position: 'left' as const,
+ label: {
+ format: '$~s',
+ },
+ max: props.overrideYAxisMax ?? undefined,
+ min: props.overrideYAxisMin ?? undefined,
+ interval: props.overrideYAxisInterval
+ ? {
+ values: props.overrideYAxisInterval,
+ }
+ : undefined,
+ },
+ ],
+ series,
+ legend: {
+ position: 'top' as const,
+ },
+ overlays: {
+ noData: {
+ text: 'No data',
+ },
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
+ },
+ },
+ line: {
+ series: {
+ cursor: 'crosshair',
+ marker: {
+ enabled: false,
+ },
+ },
+ },
+ },
+ },
+ }),
+ [
+ chartTheme,
+ props.overrideHeight,
+ props.overrideNagivagtion,
+ props.overrideYAxisInterval,
+ props.overrideYAxisMax,
+ props.overrideYAxisMin,
+ series,
+ timeAxisOption,
+ ]
+ );
return (
+
+
+
+
+ );
+});
+
+function SimulationResultReturnChartComponent(props: BreakdownProps) {
const simulationBreakdownResults = props.breakdowns;
const simulationTimeRangeSelected = useAppSelector(
selectSimulationResultTimeRangeSelection
);
- function getMetricName(
- metric: SimulationRunMetric[],
- metricName: string | string[],
- percentage = false
- ) {
- const metricNames = Array.isArray(metricName) ? metricName : [metricName];
- const selected = metric.find((x) => metricNames.includes(x.metricName));
- if (selected?.metricValue == null) {
- return '-';
- }
-
- return percentage
- ? (selected.metricValue * 100).toFixed(4)
- : selected.metricValue.toFixed(4);
- }
-
const visibleBreakdowns = useMemo(
() =>
simulationBreakdownResults
@@ -50,83 +131,16 @@ export function SimulationResultReturnChart(props: BreakdownProps) {
- x.totalPoolMarketValue
- )}
- />
-
-
-
-
-
+ {visibleBreakdowns.map((result) => (
+
);
}
+
+export const SimulationResultReturnChart = memo(SimulationResultReturnChartComponent);
diff --git a/src/features/simulationResults/visualisations/simulationResultVaRGraph.tsx b/src/features/simulationResults/visualisations/simulationResultVaRGraph.tsx
index eda9162..bed3863 100644
--- a/src/features/simulationResults/visualisations/simulationResultVaRGraph.tsx
+++ b/src/features/simulationResults/visualisations/simulationResultVaRGraph.tsx
@@ -9,7 +9,7 @@ import { selectSimulationResultTimeRangeSelection } from '../../simulationRunner
import { VaRTimestep } from '../simulationResultSummaryModels';
import { selectAgChartTheme } from '../../themes/themeSlice';
import { BreakdownProps } from '../simulationResultsSummaryStep';
-import { useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { SimulationResultTimestepDto } from '../../simulationRunner/simulationRunnerDtos';
@@ -26,7 +26,12 @@ export interface VaRSeriesConfig {
marker: Marker;
}
-export function SimulationResultVaRChart(props: BreakdownProps) {
+function SimulationResultVaRChartComponent(props: BreakdownProps) {
+ const varItems = [
+ { label: 'Weekly CDaR', key: 'Weekly CDaR' },
+ { label: 'Monthly CDaR', key: 'Monthly CDaR' },
+ ];
+
const simulationTimeRangeSelected = useAppSelector(
selectSimulationResultTimeRangeSelection
);
@@ -34,14 +39,9 @@ export function SimulationResultVaRChart(props: BreakdownProps) {
const [varType, setVarType] = useState('Weekly CDaR');
- const onClick = ({ key }: { key: string }) => {
+ const onClick = useCallback(({ key }: { key: string }) => {
setVarType(key);
- };
-
- const items = [
- { label: 'Weekly CDaR', key: 'Weekly CDaR' },
- { label: 'Monthly CDaR', key: 'Monthly CDaR' },
- ];
+ }, []);
const visibleBreakdowns = useMemo(
() =>
@@ -106,6 +106,52 @@ export function SimulationResultVaRChart(props: BreakdownProps) {
};
}, [visibleBreakdowns]);
+ const chartOptions = useMemo(
+ () => ({
+ height: 400,
+ navigator: {
+ enabled: true,
+ height: 5,
+ spacing: 6,
+ },
+ axes: [
+ timeAxisOption,
+ {
+ type: 'number' as const,
+ position: 'left' as const,
+ },
+ ],
+ series,
+ legend: {
+ position: 'bottom' as const,
+ },
+ overlays: {
+ noData: {
+ text: 'No data',
+ },
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
+ },
+ },
+ line: {
+ series: {
+ cursor: 'crosshair',
+ marker: {
+ enabled: false,
+ },
+ },
+ },
+ },
+ },
+ }),
+ [chartTheme, series, timeAxisOption]
+ );
+
return (
+ = ({
+const ReturnDistributionGraphComponent: FC = ({
marketValues = [],
xAxisOverride,
yAxisOverride,
@@ -42,74 +44,82 @@ export const ReturnDistributionGraph: FC = ({
);
}, [marketValues]);
- return (
- (
+ () => [
+ {
+ type: 'number',
+ position: 'left',
+ title: {
+ text: 'Daily Return Count',
},
- data,
- series: distributionBarSeries,
- axes: [
- {
- type: 'number',
- position: 'left',
- title: {
- text: 'Daily Return Count',
- },
- ...yAxisOverride,
- },
- {
- type: 'number',
- position: 'bottom',
- title: {
- text: 'Daily Return (%)',
- },
- ...xAxisOverride,
- },
- ],
- legend: {
- enabled: false,
+ ...yAxisOverride,
+ },
+ {
+ type: 'number',
+ position: 'bottom',
+ title: {
+ text: 'Daily Return (%)',
},
- overlays: {
- noData: {
- text: 'No data to display',
- },
+ ...xAxisOverride,
+ },
+ ],
+ [xAxisOverride, yAxisOverride]
+ );
+
+ const chartOptions = useMemo(
+ () => ({
+ height: 230,
+ padding: {
+ left: 20,
+ right: 20,
+ top: 20,
+ bottom: 20,
+ },
+ data,
+ series: distributionBarSeries,
+ axes,
+ legend: {
+ enabled: false,
+ },
+ overlays: {
+ noData: {
+ text: 'No data to display',
},
- theme: {
- baseTheme: chartTheme,
- overrides: {
- common: {
- background: {
- fill: 'transparent',
- },
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
},
- line: {
- series: {
- stroke: '#DAAB43',
- cursor: 'crosshair',
- marker: {
- fill: '#DAAB43',
- enabled: false,
- },
+ },
+ line: {
+ series: {
+ stroke: '#DAAB43',
+ cursor: 'crosshair',
+ marker: {
+ fill: '#DAAB43',
+ enabled: false,
},
},
- histogram: {
- axes: {
- number: {
- gridLine: {
- enabled: false,
- },
+ },
+ histogram: {
+ axes: {
+ number: {
+ gridLine: {
+ enabled: false,
},
},
},
},
},
- }}
- />
+ },
+ }),
+ [axes, chartTheme, data]
);
+
+ return = ({
+function WeightChangeOverTimeGraphComponent({
simulationRunBreakdown,
yAxisOverride,
legendOverride,
tickIntervalInMonths = 6,
overrideChartTheme,
overrideXAxisInterval,
-}) => {
+}: WeightChangeOverTimeGraphProps) {
const chartTheme = useAppSelector(selectAgChartTheme);
const normalisedAreaData = useMemo(() => {
@@ -46,7 +49,7 @@ export const WeightChangeOverTimeGraph: FC = ({
let data = getChartTimeSteps(simulationRunBreakdown);
if (data.length > 200) {
- //stacked chart is more cpu intensive, ~500 points is a good balance
+ // stacked chart is cpu intensive; reduce points to keep UI responsive
const proportion = Math.ceil(data.length / 200);
data = data.filter((_, index) => index % proportion === 0);
}
@@ -92,8 +95,8 @@ export const WeightChangeOverTimeGraph: FC = ({
return series;
}, [simulationRunBreakdown]);
- const timeAxisOption: AgTimeAxisOptions = useMemo(() => {
- return {
+ const timeAxisOption = useMemo(
+ () => ({
type: 'time',
interval: {
step: time.month.every(overrideXAxisInterval ?? tickIntervalInMonths),
@@ -101,53 +104,68 @@ export const WeightChangeOverTimeGraph: FC = ({
label: {
format: '%Y-%m',
},
- };
- }, [tickIntervalInMonths, overrideXAxisInterval]);
-
- return (
- {
- return params.value.toFixed(2) + '%';
- },
- },
- ...yAxisOverride,
- },
- ],
- series: normalisedAreaSeries,
- legend: {
- ...legendOverride,
+ }),
+ [tickIntervalInMonths, overrideXAxisInterval]
+ );
+
+ const axes = useMemo(
+ () => [
+ { ...timeAxisOption },
+ {
+ type: 'number',
+ position: 'left',
+ label: {
+ formatter: (params: AgAxisLabelFormatterParams) =>
+ params.value.toFixed(2) + '%',
},
- overlays: {
- noData: {
- text: 'No data',
- },
+ ...yAxisOverride,
+ },
+ ],
+ [timeAxisOption, yAxisOverride]
+ );
+
+ const chartOptions = useMemo(
+ () => ({
+ height: 230,
+ padding: {
+ right: 40,
+ top: 20,
+ bottom: 20,
+ left: 0,
+ },
+ data: normalisedAreaData,
+ axes,
+ series: normalisedAreaSeries as AgCartesianSeriesOptions[],
+ legend: {
+ ...legendOverride,
+ },
+ overlays: {
+ noData: {
+ text: 'No data',
},
- theme: {
- baseTheme: overrideChartTheme ? overrideChartTheme : chartTheme,
- overrides: {
- common: {
- background: {
- fill: 'transparent',
- },
+ },
+ theme: {
+ baseTheme: overrideChartTheme ? overrideChartTheme : chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
},
},
},
- }}
- />
+ },
+ }),
+ [
+ axes,
+ chartTheme,
+ legendOverride,
+ normalisedAreaData,
+ normalisedAreaSeries,
+ overrideChartTheme,
+ ]
);
-};
+
+ return No charts selected
;
- }
+ };
- function getBreakdown(): JSX.Element {
+ const getBreakdown = (): JSX.Element => {
if (resultBreakdownSelection === 'MvSummary') {
return (
{showScoreOverall && (
@@ -130,45 +185,11 @@ export const ProductItemOverviewGraph: FC = ({
)}
-
);
};
diff --git a/src/features/shared/graphs/returnDistributionGraph.tsx b/src/features/shared/graphs/returnDistributionGraph.tsx
index 27bd95c..0f8a125 100644
--- a/src/features/shared/graphs/returnDistributionGraph.tsx
+++ b/src/features/shared/graphs/returnDistributionGraph.tsx
@@ -1,5 +1,7 @@
-import { FC, useMemo } from 'react';
+import { FC, memo, useMemo } from 'react';
import {
+ AgCartesianAxisOptions,
+ AgChartOptions,
AgHistogramSeriesOptions,
AgCategoryAxisOptions,
AgNumberAxisOptions,
@@ -29,7 +31,7 @@ const distributionBarSeries: AgHistogramSeriesOptions[] = [
},
];
-export const ReturnDistributionGraph: FCNo Breakdown
;
- }
+ };
+
+ const handleChartSelection = useCallback(
+ (menuItem: { key: string }) => {
+ dispatch(changeChartSelected(menuItem.key));
+ },
+ [dispatch]
+ );
+
+ const handleBreakdownSelection = useCallback(
+ (menuItem: { key: string }) => {
+ dispatch(changeBreakdownSelected(menuItem.key));
+ },
+ [dispatch]
+ );
- const VisualisationTab = () => (
+ const visualisationTab = (
+
+
+ {breakdown.simulationRun.updateRule.updateRuleName}
+For time period: {breakdown.timeRange.name}
+start date: {breakdown.timeRange.startDate}
+end date: {breakdown.timeRange.endDate}
+
-
-
- {x.simulationRun.updateRule.updateRuleName}
-For time period: {x.timeRange.name}
-start date: {x.timeRange.startDate}
-end date: {x.timeRange.endDate}
-
-
+
);
}
+
+export const SimulationResultAmountChart = memo(SimulationResultAmountChartComponent);
diff --git a/src/features/simulationResults/visualisations/simulationResultDrawdownGraph.tsx b/src/features/simulationResults/visualisations/simulationResultDrawdownGraph.tsx
index c184280..010390f 100644
--- a/src/features/simulationResults/visualisations/simulationResultDrawdownGraph.tsx
+++ b/src/features/simulationResults/visualisations/simulationResultDrawdownGraph.tsx
@@ -8,32 +8,11 @@ import { DownOutlined } from '@ant-design/icons';
import { selectSimulationResultTimeRangeSelection } from '../../simulationRunner/simulationRunnerSlice';
import { selectAgChartTheme } from '../../themes/themeSlice';
import { BreakdownProps } from '../simulationResultsSummaryStep';
-import { useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
import { SimulationResultTimestepDto } from '../../simulationRunner/simulationRunnerDtos';
-export function SimulationResultDrawdownChart(props: BreakdownProps) {
- const simulationTimeRangeSelected = useAppSelector(
- selectSimulationResultTimeRangeSelection
- );
- const chartTheme = useAppSelector(selectAgChartTheme);
-
- const [drawdownType, setDrawdownType] = useState(
- 'Avg Daily Drawdown per week'
- );
-
- const onClick = ({ key }: { key: string }) => {
- setDrawdownType(key);
- };
-
- const visibleBreakdowns = useMemo(
- () =>
- props.breakdowns.filter(
- (x) => x.timeRange.name === simulationTimeRangeSelected
- ),
- [props.breakdowns, simulationTimeRangeSelected]
- );
-
- const items = [
+function SimulationResultDrawdownChartComponent(props: BreakdownProps) {
+ const drawdownItems = [
{
label: 'Avg Daily Drawdown per week',
key: 'Avg Daily Drawdown per week',
@@ -58,6 +37,27 @@ export function SimulationResultDrawdownChart(props: BreakdownProps) {
{ label: 'Monthly CDaR', key: 'Monthly CDaR' },
];
+ const simulationTimeRangeSelected = useAppSelector(
+ selectSimulationResultTimeRangeSelection
+ );
+ const chartTheme = useAppSelector(selectAgChartTheme);
+
+ const [drawdownType, setDrawdownType] = useState(
+ 'Avg Daily Drawdown per week'
+ );
+
+ const onClick = useCallback(({ key }: { key: string }) => {
+ setDrawdownType(key);
+ }, []);
+
+ const visibleBreakdowns = useMemo(
+ () =>
+ props.breakdowns.filter(
+ (x) => x.timeRange.name === simulationTimeRangeSelected
+ ),
+ [props.breakdowns, simulationTimeRangeSelected]
+ );
+
const series = useMemo((): agCharts.AgCartesianSeriesOptions[] => {
const seriesArray: agCharts.AgCartesianSeriesOptions[] = [];
visibleBreakdowns.forEach((x) => {
@@ -113,6 +113,52 @@ export function SimulationResultDrawdownChart(props: BreakdownProps) {
};
}, [visibleBreakdowns]);
+ const chartOptions = useMemo(
+ () => ({
+ height: 400,
+ navigator: {
+ enabled: true,
+ height: 5,
+ spacing: 6,
+ },
+ axes: [
+ timeAxisOption,
+ {
+ type: 'number' as const,
+ position: 'left' as const,
+ },
+ ],
+ series,
+ legend: {
+ position: 'bottom' as const,
+ },
+ overlays: {
+ noData: {
+ text: 'No data',
+ },
+ },
+ theme: {
+ baseTheme: chartTheme,
+ overrides: {
+ common: {
+ background: {
+ fill: 'transparent',
+ },
+ },
+ line: {
+ series: {
+ cursor: 'crosshair',
+ marker: {
+ enabled: false,
+ },
+ },
+ },
+ },
+ },
+ }),
+ [chartTheme, series, timeAxisOption]
+ );
+
return (
@@ -125,7 +171,7 @@ export function SimulationResultDrawdownChart(props: BreakdownProps) {
@@ -144,7 +190,7 @@ export function SimulationResultDrawdownChart(props: BreakdownProps) {
@@ -160,52 +206,13 @@ export function SimulationResultDrawdownChart(props: BreakdownProps) {
@@ -132,63 +201,7 @@ export function SimulationResultMarketValueChart(props: BreakdownProps) {
@@ -196,3 +209,7 @@ export function SimulationResultMarketValueChart(props: BreakdownProps) {
);
}
+
+export const SimulationResultMarketValueChart = memo(
+ SimulationResultMarketValueChartComponent
+);
diff --git a/src/features/simulationResults/visualisations/simulationResultReturnChart.tsx b/src/features/simulationResults/visualisations/simulationResultReturnChart.tsx
index 2376c24..6a993eb 100644
--- a/src/features/simulationResults/visualisations/simulationResultReturnChart.tsx
+++ b/src/features/simulationResults/visualisations/simulationResultReturnChart.tsx
@@ -1,38 +1,119 @@
import { useAppSelector } from '../../../app/hooks';
import { Row, Col, Divider } from 'antd';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
import { ReturnDistributionGraph } from '../../shared/graphs';
import { selectSimulationResultTimeRangeSelection } from '../../simulationRunner/simulationRunnerSlice';
import { BreakdownProps } from '../simulationResultsSummaryStep';
import styles from '../simulationResultSummary.module.css';
-import { SimulationRunMetric } from '../simulationResultSummaryModels';
+import {
+ SimulationRunBreakdown,
+ SimulationRunMetric,
+} from '../simulationResultSummaryModels';
export interface Marker {
enabled: boolean;
}
-export function SimulationResultReturnChart(props: BreakdownProps) {
+function getMetricName(
+ metric: SimulationRunMetric[],
+ metricName: string | string[],
+ percentage = false
+) {
+ const metricNames = Array.isArray(metricName) ? metricName : [metricName];
+ const selected = metric.find((x) => metricNames.includes(x.metricName));
+ if (selected?.metricValue == null) {
+ return '-';
+ }
+
+ return percentage
+ ? (selected.metricValue * 100).toFixed(4)
+ : selected.metricValue.toFixed(4);
+}
+
+const ReturnBreakdownRow = memo(function ReturnBreakdownRow({
+ result,
+}: {
+ result: SimulationRunBreakdown;
+}) {
+ const marketValues = useMemo(
+ () => result.timeSteps.map((x) => x.totalPoolMarketValue),
+ [result.timeSteps]
+ );
+
+ return (
+
+
+
+ {result.simulationRun.updateRule.updateRuleName}
+For time period: {result.timeRange.name}
+start date: {result.timeRange.startDate}
+end date: {result.timeRange.endDate}
++ mean:{' '} + {getMetricName( + result.simulationRunResultAnalysis?.return_analysis ?? [], + 'mean', + true + )} +
+ ++ std:{' '} + {getMetricName( + result.simulationRunResultAnalysis?.return_analysis ?? [], + 'std', + true + )} +
+ ++ skewness:{' '} + {getMetricName( + result.simulationRunResultAnalysis?.return_analysis ?? [], + 'skewness' + )} +
+ ++ Kurtosis:{' '} + {getMetricName( + result.simulationRunResultAnalysis?.return_analysis ?? [], + 'kurtosis' + )} +
+ ++ Jaque Bera:{' '} + {getMetricName( + result.simulationRunResultAnalysis?.return_analysis ?? [], + ['jarqueBera', 'jarque_bera', 'jaqueBera'] + )} +
+ +
-
-
- {result.simulationRun.updateRule.updateRuleName}
-For time period: {result.timeRange.name}
-start date: {result.timeRange.startDate}
-end date: {result.timeRange.endDate}
-- mean:{' '} - {getMetricName( - result.simulationRunResultAnalysis?.return_analysis ?? - [], - 'mean', - true - )} -
- -- std:{' '} - {getMetricName( - result.simulationRunResultAnalysis?.return_analysis ?? - [], - 'std', - true - )} -
- -- skewness:{' '} - {getMetricName( - result.simulationRunResultAnalysis?.return_analysis ?? - [], - 'skewness' - )} -
- -- Kurtosis:{' '} - {getMetricName( - result.simulationRunResultAnalysis?.return_analysis ?? - [], - 'kurtosis' - )} -
- -- Jaque Bera:{' '} - {getMetricName( - result.simulationRunResultAnalysis?.return_analysis ?? - [], - ['jarqueBera', 'jarque_bera', 'jaqueBera'] - )} -
- -
+
+
+ {result.simulationRun.updateRule.updateRuleName}
+start date: {result.timeRange.startDate}
+end date: {result.timeRange.endDate}
+
-
-
- {result.simulationRun.updateRule.updateRuleName}
-start date: {result.timeRange.startDate}
-end date: {result.timeRange.endDate}
-OR
+
+