feat: add numberOfElements

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',
   },
 };

libs/shared/lib/components/CardToolTipVis/index.tsx

 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>