From ff2a4374af4d740beda8ca10f739b7cc62325c98 Mon Sep 17 00:00:00 2001 From: dvmartinweigl <martin.weigl@datavisyn.io> Date: Tue, 17 Oct 2023 14:43:47 +0200 Subject: [PATCH] add column description to correlation matrix --- src/vis/correlation/CorrelationMatrix.tsx | 31 ++++++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/vis/correlation/CorrelationMatrix.tsx b/src/vis/correlation/CorrelationMatrix.tsx index 11cbe75a1..115bcfe74 100644 --- a/src/vis/correlation/CorrelationMatrix.tsx +++ b/src/vis/correlation/CorrelationMatrix.tsx @@ -1,4 +1,4 @@ -import { Box, Center, Group, Loader, Stack, Text } from '@mantine/core'; +import { Box, Center, Group, Loader, Stack, Text, Tooltip } from '@mantine/core'; import { useResizeObserver } from '@mantine/hooks'; import * as d3 from 'd3v7'; import { scaleBand } from 'd3v7'; @@ -144,9 +144,32 @@ export function CorrelationMatrix({ config, columns }: { config: ICorrelationCon <rect stroke="lightgray" strokeWidth={1} fill="none" x={currentX} y={currentY} width={xScale.bandwidth()} height={yScale.bandwidth()} /> <foreignObject x={currentX} y={currentY} width={xScale.bandwidth()} height={yScale.bandwidth()}> <Center style={{ height: '100%' }} px={5}> - <Text size={14} weight={600} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}> - {col.info.name} - </Text> + <Tooltip + label={ + <Stack spacing={0}> + <Text>{col.info.name}</Text> + {col.info.description && ( + <Text size="xs" color="dimmed"> + {col.info.description} + </Text> + )} + </Stack> + } + arrowSize={6} + withinPortal + withArrow + > + <Stack spacing={0}> + <Text size={14} weight={600} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}> + {col.info.name} + </Text> + {col.info.description && ( + <Text size="sm" color="dimmed" style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}> + {col.info.description} + </Text> + )} + </Stack> + </Tooltip> </Center> </foreignObject> </g>