From bb02a1fa161286ee095c7d09baad6915e4b94910 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Tue, 12 Nov 2024 17:58:57 +0100
Subject: [PATCH] feat: more infromation custom tooltip
---
.../visualizations/vis1D/components/CustomChartPlotly.tsx | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx b/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
index 08c250fea..1a42de7e7 100644
--- a/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
+++ b/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
@@ -113,7 +113,7 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
}) => {
const internalRef = useRef<HTMLDivElement>(null);
const [divSize, setDivSize] = useState({ width: 0, height: 0 });
- const [hoveredPoint, setHoveredPoint] = useState<{ left: number; top: number; value: number } | null>(null);
+ const [hoveredPoint, setHoveredPoint] = useState<{ left: number; top: number; xValue: number; yValue: number } | null>(null);
useEffect(() => {
const handleResize = () => {
@@ -147,7 +147,8 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
setHoveredPoint({
left: plotRect.left + xIndex,
top: plotRect.top + yIndex,
- value: point.y,
+ xValue: point.x,
+ yValue: point.y,
});
}
}
@@ -218,7 +219,7 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
}}
>
<div>
- <strong>Value:</strong> {hoveredPoint.value} <br />
+ <strong>{hoveredPoint.xValue}</strong>: {hoveredPoint.yValue}
</div>
</TooltipContent>
</Tooltip>
--
GitLab