From 4fde07842db73c9a3350d7902226ffb4c7ad5569 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Tue, 2 Jul 2024 17:23:10 +0200
Subject: [PATCH] feat: add numberOfElements
---
.../CardToolTipVis/cardtooltipvis.stories.tsx | 2 ++
.../lib/components/CardToolTipVis/index.tsx | 28 ++++++++++++++++---
2 files changed, 26 insertions(+), 4 deletions(-)
diff --git a/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx b/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx
index c52d50edc..1bc4cef9b 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 fc13c8c63..e6cb7aa54 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>
--
GitLab