feat(statistic): FLUI-127 Add StatisticIcon component (Ferlab-Ste-Jus…

…tine#408)
lflangis · Mar 15, 2024 · aa9fca8 · aa9fca8
1 parent 9af0798
commit aa9fca8
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 37 deletions.
diff --git a/packages/ui/Release.md b/packages/ui/Release.md
@@ -1,3 +1,6 @@
+### 9.8.0 2024-03-15
+- feat: FLUI-127 Add Statistic component
+
 ### 9.7.1 2024-03-13
 - fix: SJIP-712 Update CountCard style
 

diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "9.7.1",
+    "version": "9.8.0",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

diff --git a/...nents/Icons/FuturoSpot/FileSearchIcon.tsx → ...s/Icons/FuturoSpot/FileSearchSpotIcon.tsx b/...nents/Icons/FuturoSpot/FileSearchIcon.tsx → ...s/Icons/FuturoSpot/FileSearchSpotIcon.tsx
diff --git a/packages/ui/src/components/StatisticIcon/index.module.scss b/packages/ui/src/components/StatisticIcon/index.module.scss
@@ -0,0 +1,21 @@
+@import 'theme.template';
+
+.statisticWrapper {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .count {
+        font-weight: 600 !important;
+        font-size: 16px;
+        line-height: 24px;
+        color: $gray-8;
+    }
+
+    .label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: $gray-8;
+    }
+}
diff --git a/packages/ui/src/components/StatisticIcon/index.test.tsx b/packages/ui/src/components/StatisticIcon/index.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { TABLE_EMPTY_PLACE_HOLDER } from '../../common/constants';
+import FamilyIcon from '../Icons/Futuro/FamilyIcon';
+
+import StatisticIcon from '.';
+
+describe('StatisticIcon', () => {
+    it('should render statistic icon', () => {
+        render(<StatisticIcon count={23} icon={<FamilyIcon />} label="Families" />);
+        expect(screen.getByText('23')).toBeTruthy();
+        expect(screen.getByText('Families')).toBeTruthy();
+    });
+
+    it('should render - when count is not filled', () => {
+        render(<StatisticIcon icon={<FamilyIcon />} label="Families" />);
+        expect(screen.queryByText('23')).toBeFalsy();
+        expect(screen.getByText(TABLE_EMPTY_PLACE_HOLDER)).toBeTruthy();
+        expect(screen.getByText('Families')).toBeTruthy();
+    });
+});
diff --git a/packages/ui/src/components/StatisticIcon/index.tsx b/packages/ui/src/components/StatisticIcon/index.tsx
@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react';
+
+import { TABLE_EMPTY_PLACE_HOLDER } from '../../common/constants';
+import { numberFormat } from '../../utils/numberUtils';
+
+import styles from './index.module.scss';
+
+export type TStatisticIcon = {
+    count?: number;
+    icon: React.ReactNode;
+    label: string;
+};
+
+export const StatisticIcon = ({ count, icon, label }: TStatisticIcon): ReactElement => (
+    <div className={styles.statisticWrapper}>
+        {icon}
+        <div>
+            <div className={styles.count}>{count ? numberFormat(count) : TABLE_EMPTY_PLACE_HOLDER}</div>
+            <span className={styles.label}>{label}</span>
+        </div>
+    </div>
+);
+
+export default StatisticIcon;
diff --git a/packages/ui/src/pages/EntityPage/EntityDataset/index.module.scss b/packages/ui/src/pages/EntityPage/EntityDataset/index.module.scss
@@ -53,23 +53,6 @@
     }
 }
 
-.rowCountCard {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 0 0 24px 0;
-
-    .count {
-        font-weight: 600 !important;
-        font-size: 16px;
-        line-height: 24px;
-        color: $gray-8;
-    }
-
-    .name {
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 22px;
-        color: $gray-8;
-    }
+.rowCountCard:not(:last-child) {
+    padding-bottom: 24px;
 }
diff --git a/packages/ui/src/pages/EntityPage/EntityDataset/index.tsx b/packages/ui/src/pages/EntityPage/EntityDataset/index.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
-import { FileTextOutlined, UserOutlined } from '@ant-design/icons';
 import { Card, Descriptions, Typography } from 'antd';
 import cx from 'classnames';
 
 import { TABLE_EMPTY_PLACE_HOLDER } from '../../../common/constants';
 import Collapse, { CollapsePanel } from '../../../components/Collapse';
 import FamilyIcon from '../../../components/Icons/Futuro/FamilyIcon';
 import FileIcon from '../../../components/Icons/Futuro/FileIcon';
-import { numberFormat } from '../../../utils/numberUtils';
+import StatisticIcon from '../../../components/StatisticIcon';
 import { IEntityDescriptionsItem } from '../EntityDescriptions';
 
 import styles from './index.module.scss';
@@ -26,20 +25,14 @@ interface ICountCardProps {
 const CountCard = ({ dictionnary, file_count = 0, participant_count = 0 }: ICountCardProps) => (
     <Card className={styles.countCardContainer}>
         <div className={styles.rowCountCard}>
-            <FamilyIcon />
-            <div>
-                <div className={styles.count}>
-                    {participant_count ? numberFormat(participant_count) : TABLE_EMPTY_PLACE_HOLDER}
-                </div>
-                <span className={styles.name}>{dictionnary?.participants || 'Participants'}</span>
-            </div>
+            <StatisticIcon
+                count={participant_count}
+                icon={<FamilyIcon />}
+                label={dictionnary?.participants || 'Participants'}
+            />
         </div>
         <div className={styles.rowCountCard}>
-            <FileIcon />
-            <div>
-                <div className={styles.count}>{file_count ? numberFormat(file_count) : TABLE_EMPTY_PLACE_HOLDER}</div>
-                <span className={styles.name}>{dictionnary?.files || 'Files'}</span>
-            </div>
+            <StatisticIcon count={file_count} icon={<FileIcon />} label={dictionnary?.files || 'Files'} />
         </div>
     </Card>
 );

diff --git a/storybook/package-lock.json b/storybook/package-lock.json
diff --git a/storybook/stories/Components/Statistic/Statistic.stories.tsx b/storybook/stories/Components/Statistic/Statistic.stories.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import AnalyseIcon from '@ferlab/ui/core/components/Icons/Futuro/AnalyseIcon';
+import BiospecimenIcon from '@ferlab/ui/core/components/Icons/Futuro/BiospecimenIcon';
+import ChemistryIcon from '@ferlab/ui/core/components/Icons/Futuro/ChemistryIcon';
+import CloudArchitectureIcon from '@ferlab/ui/core/components/Icons/Futuro/CloudArchitectureIcon';
+import CloudComputingIcon from '@ferlab/ui/core/components/Icons/Futuro/CloudComputingIcon';
+import CloudDatabaseIcon from '@ferlab/ui/core/components/Icons/Futuro/CloudDatabaseIcon';
+import CloudFileAccessIcon from '@ferlab/ui/core/components/Icons/Futuro/CloudFileAccessIcon';
+import CloudReportingIcon from '@ferlab/ui/core/components/Icons/Futuro/CloudReportingIcon';
+import CloudSearchIcon from '@ferlab/ui/core/components/Icons/Futuro/CloudSearchIcon';
+import CloudSecurityIcon from '@ferlab/ui/core/components/Icons/Futuro/CloudSecurityIcon';
+import ExomesIcon from '@ferlab/ui/core/components/Icons/Futuro/ExomesIcon';
+import FamilyIcon from '@ferlab/ui/core/components/Icons/Futuro/FamilyIcon';
+import FileIcon from '@ferlab/ui/core/components/Icons/Futuro/FileIcon';
+import FileSearchIcon from '@ferlab/ui/core/components/Icons/Futuro/FileSearchIcon';
+import GeneIcon from '@ferlab/ui/core/components/Icons/Futuro/GeneIcon';
+import InformationIcon from '@ferlab/ui/core/components/Icons/Futuro/InformationIcon';
+import MetabolomeIcon from '@ferlab/ui/core/components/Icons/Futuro/MetabolomeIcon';
+import ParticipantIcon from '@ferlab/ui/core/components/Icons/Futuro/ParticipantIcon';
+import ProteomeIcon from '@ferlab/ui/core/components/Icons/Futuro/ProteomeIcon';
+import SampleIcon from '@ferlab/ui/core/components/Icons/Futuro/SampleIcon';
+import StudyIcon from '@ferlab/ui/core/components/Icons/Futuro/StudyIcon';
+import TranscriptomeIcon from '@ferlab/ui/core/components/Icons/Futuro/TranscriptomeIcon';
+import WebsiteIcon from '@ferlab/ui/core/components/Icons/Futuro/WebsiteIcon';
+import AnalyseSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/AnalyseSpotIcon';
+import BiospecimenSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/BiospecimenSpotIcon';
+import ChemistrySpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/ChemistrySpotIcon';
+import CloudArchitectureSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/CloudArchitectureSpotIcon';
+import CloudComputingSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/CloudComputingSpotIcon';
+import CloudDatabaseSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/CloudDatabaseSpotIcon';
+import CloudFileAccessSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/CloudFileAccessSpotIcon';
+import CloudReportingSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/CloudReportingSpotIcon';
+import CloudSearchSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/CloudSearchSpotIcon';
+import CloudSecuritySpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/CloudSecuritySpotIcon';
+import ExomesSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/ExomesSpotIcon';
+import FamilySpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/FamilySpotIcon';
+import FileSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/FileSpotIcon';
+import FileSearchSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/FileSearchSpotIcon';
+import GeneSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/GeneSpotIcon';
+import InformationSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/InformationSpotIcon';
+import MetabolomeSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/MetabolomeSpotIcon';
+import ParticipantSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/ParticipantSpotIcon';
+import ProteomeSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/ProteomeSpotIcon';
+import SampleSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/SampleSpotIcon';
+import StudySpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/StudySpotIcon';
+import TranscriptomeSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/TranscriptomeSpotIcon';
+import WebsiteSpotIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/WebsiteSpotIcon';
+import StatisticIcon from '@ferlab/ui/core/components/StatisticIcon';
+
+export default {
+    title: '@ferlab/Components/StatisticIcon',
+    component: StatisticIcon,
+    decorators: [
+        (Story) => (
+            <>
+                <h2>{Story}</h2>
+                <Story />
+            </>
+        ),
+    ],
+    argTypes: {
+        className: {
+            control: 'string',
+        },
+        dictionary: {
+            control: {
+                type: 'object',
+            },
+        },
+    },
+} as Meta;
+
+export const StatisticIconStory = () => (
+    <>
+        <h3>StatisticIcon</h3>
+        <div style={{ display: 'grid', gap: '24px', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' }}>
+            <StatisticIcon count={23} icon={<AnalyseIcon />} label="Analyses" />
+            <StatisticIcon count={35} icon={<BiospecimenIcon />} label="Biospecimens" />
+            <StatisticIcon count={126} icon={<ChemistryIcon />} label="Chemistries" />
+            <StatisticIcon count={234} icon={<CloudArchitectureIcon />} label="Archis" />
+            <StatisticIcon count={345} icon={<CloudComputingIcon />} label="Computing" />
+            <StatisticIcon count={456} icon={<CloudDatabaseIcon />} label="Database" />
+            <StatisticIcon count={567} icon={<CloudFileAccessIcon />} label="File Access" />
+            <StatisticIcon count={678} icon={<CloudReportingIcon />} label="Reporting" />
+            <StatisticIcon count={789} icon={<CloudSearchIcon />} label="Search" />
+            <StatisticIcon count={890} icon={<CloudSecurityIcon />} label="Security" />
+            <StatisticIcon count={901} icon={<ExomesIcon />} label="Exomes" />
+            <StatisticIcon count={519} icon={<FamilyIcon />} label="Families" />
+            <StatisticIcon count={620} icon={<FileIcon />} label="Files" />
+            <StatisticIcon count={721} icon={<FileSearchIcon />} label="Files Search" />
+            <StatisticIcon count={822} icon={<GeneIcon />} label="Genes" />
+            <StatisticIcon count={923} icon={<InformationIcon />} label="Infos" />
+            <StatisticIcon count={24} icon={<MetabolomeIcon />} label="Metabolomes" />
+            <StatisticIcon count={125} icon={<ParticipantIcon />} label="Participants" />
+            <StatisticIcon count={226} icon={<ProteomeIcon />} label="Proteomes" />
+            <StatisticIcon count={327} icon={<SampleIcon />} label="Samples" />
+            <StatisticIcon count={428} icon={<StudyIcon />} label="Studies" />
+            <StatisticIcon count={529} icon={<TranscriptomeIcon />} label="Transcriptomes" />
+            <StatisticIcon count={630} icon={<WebsiteIcon />} label="Websites" />
+        </div>
+    </>
+);
+
+export const StatisticIconWithoutCountStory = () => (
+    <>
+        <h3>StatisticIcon without count</h3>
+        <div style={{ display: 'grid', gap: '24px', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' }}>
+            <StatisticIcon icon={<AnalyseSpotIcon />} label="Analyses" />
+            <StatisticIcon icon={<BiospecimenSpotIcon />} label="Biospecimens" />
+            <StatisticIcon icon={<ChemistrySpotIcon />} label="Chemistries" />
+            <StatisticIcon icon={<CloudArchitectureSpotIcon />} label="Archis" />
+            <StatisticIcon icon={<CloudComputingSpotIcon />} label="Computing" />
+            <StatisticIcon icon={<CloudDatabaseSpotIcon />} label="Databases" />
+            <StatisticIcon icon={<CloudFileAccessSpotIcon />} label="File Access" />
+            <StatisticIcon icon={<CloudReportingSpotIcon />} label="Reporting" />
+            <StatisticIcon icon={<CloudSearchSpotIcon />} label="Search" />
+            <StatisticIcon icon={<CloudSecuritySpotIcon />} label="Security" />
+            <StatisticIcon icon={<ExomesSpotIcon />} label="Exomes" />
+            <StatisticIcon icon={<FamilySpotIcon />} label="Families" />
+            <StatisticIcon icon={<FileSpotIcon />} label="Files" />
+            <StatisticIcon icon={<FileSearchSpotIcon />} label="Files Search" />
+            <StatisticIcon icon={<GeneSpotIcon />} label="Genes" />
+            <StatisticIcon icon={<InformationSpotIcon />} label="Infos" />
+            <StatisticIcon icon={<MetabolomeSpotIcon />} label="Metabolomes" />
+            <StatisticIcon icon={<ParticipantSpotIcon />} label="Participants" />
+            <StatisticIcon icon={<ProteomeSpotIcon />} label="Proteomes" />
+            <StatisticIcon icon={<SampleSpotIcon />} label="Samples" />
+            <StatisticIcon icon={<StudySpotIcon />} label="Studies" />
+            <StatisticIcon icon={<TranscriptomeSpotIcon />} label="Transcriptomes" />
+            <StatisticIcon icon={<WebsiteSpotIcon />} label="Websites" />
+        </div>
+    </>
+);