+ {emptyMessage} +
+ ) + } + + const updateTooltipFromClientPosition = (clientX: number) => { + const svgElement = svgRef.current + if (!svgElement) { + return + } + const bounds = svgElement.getBoundingClientRect() + const relativeX = + ((clientX - bounds.left) / bounds.width) * width + const dataX = xScale.min + ((relativeX - CHART_PADDING.left) / plotWidth) * (xScale.max - xScale.min) + const nearestIndex = findNearestPointIndex(points, dataX) + if (nearestIndex === null) { + return + } + setTooltipState({ index: nearestIndex }) + } + + const tooltipContent = + tooltipState !== null && + activePoint !== null && + renderTooltip?.(activePoint, tooltipState.index) + + return ( ++ History unavailable in imported snapshot. +
+ ) + } + + if (isLoading) { + return ( ++ Failed to load portfolio history. +
+ ) + } + + return ( +| Asset | +Holdings | +{tooltip.valueColumnLabel} | +
|---|---|---|
| {assetRow.symbol} | +{assetRow.holdings} | +{assetRow.value} | +
No holdings breakdown.
+ )} ++ Accounts ({tabAccounts.length}) +
+ {tabAccounts.length === 0 ? ( ++ No {isSimulated ? "simulated" : "real"} accounts. +
+ ) : ( +