diff --git a/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx b/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx index c52d50edc4463207c4bc6f0ffc62a423cfbea283..1bc4cef9b708d7f3983f81234ed8e7ce08e11aac 100644 --- a/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx +++ b/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx @@ -28,6 +28,7 @@ export const SchemaNode: Story = { description: 'string', }, colorHeader: '#fb7b04', + numberOfElements: 1000, }, }; @@ -52,6 +53,7 @@ export const SchemaRelationship: Story = { }, colorHeader: '#0676C1', connectedTo: 'Person', + numberOfElements: 231230, connectedFrom: 'Movie', }, }; diff --git a/libs/shared/lib/components/CardToolTipVis/index.tsx b/libs/shared/lib/components/CardToolTipVis/index.tsx index fc13c8c6305e47a362af1408ddda53aa1872d4a0..e6cb7aa54dca48c185713298708a70b08440e212 100644 --- a/libs/shared/lib/components/CardToolTipVis/index.tsx +++ b/libs/shared/lib/components/CardToolTipVis/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Icon } from '@graphpolaris/shared/lib/components/icon'; -import { AbcOutlined, Settings } from '@mui/icons-material'; +import { AbcOutlined, Settings, Numbers } from '@mui/icons-material'; import styles from './cardtooltipvis.module.scss'; import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip'; @@ -13,6 +13,11 @@ export type CardToolTipVisProps = { connectedTo?: string; connectedFrom?: string; maxVisibleItems?: number; + numberOfElements?: number; +}; + +const formatNumber = (number: number) => { + return number.toLocaleString('de-DE'); // Format number with dots as thousand separators }; export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({ @@ -24,6 +29,7 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({ connectedFrom, connectedTo, typeOfSchema, + numberOfElements, }) => { const itemsToShow = Object.entries(data).slice(0, maxVisibleItems); return ( @@ -32,6 +38,15 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({ <div className="h-9 w-2" style={{ backgroundColor: colorHeader }}></div> <span className="text-xl ml-2 font-semibold">{name}</span> </div> + + {type === 'schema' && numberOfElements && ( + <div className="px-4 py-1 border-b border-sec-200"> + <div className="flex flex-row gap-3 items-center justify-between"> + <Icon component={<Numbers />} size={24} /> <span className="ml-auto text-right">{formatNumber(numberOfElements)}</span> + </div> + </div> + )} + {type === 'schema' && typeOfSchema === 'relationship' && ( <div className="px-4 py-1 border-b border-sec-200"> <div className="flex flex-row gap-3 items-center justify-between"> @@ -56,11 +71,16 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({ <TooltipTrigger asChild> <span className="ml-auto text-right truncate w-[60%] min-h-[24px]"> {type === 'schema' ? ( - <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} color="hsl(var(--clr-sec--400))" size={24} /> + <Icon + className="ml-auto text-right" + component={v === 'int' ? <Settings /> : <AbcOutlined />} + color="hsl(var(--clr-sec--400))" + size={24} + /> ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? ( - <span>{v.toString()}</span> + <span className="ml-auto text-right truncate">{typeof v === 'number' ? formatNumber(v) : v.toString()}</span> ) : ( - <div className={`ml-auto h-4 w-12 ${styles['diagonal-lines']}`}></div> + <div className={`ml-auto mt-auto h-6 w-12 ${styles['diagonal-lines']}`}></div> )} </span> </TooltipTrigger>