Skip to content

Commit

Permalink
subido
Browse files Browse the repository at this point in the history
  • Loading branch information
JulianGP3 committed Jun 19, 2024
1 parent ff2c048 commit 4a7af00
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 4 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
ignorePatterns: ['*.test.ts', '*.spec.tsx', 'zustand.ts', 'sample/RegularTable.tsx'],
ignorePatterns: ['*.test.ts', '*.spec.tsx', 'zustand.ts'],
settings: {
'import/resolver': {
node: {
Expand Down
80 changes: 80 additions & 0 deletions sample/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,16 @@ export const defaultData = [
GrossProfit: { Amount: 250, Currency: USD },
GrossMargin: 50,
},
{
TotalDays: 1044.7475240028286,
TotalMonths: 34.321534954100805,
TotalYears: 2.8623219835693936,
Days: 1044,
Months: 34,
Years: 2,
StartDate: '2021-08-09T00:00:00',
EndDate: '2024-06-18T17:56:26.0738444',
},
{ Amount: 300.33, Currency: USD },
true,
'https://www.google.com',
Expand All @@ -35,6 +45,16 @@ export const defaultData = [
GrossProfit: { Amount: 250, Currency: USD },
GrossMargin: 50,
},
{
TotalDays: 1044.7475240028286,
TotalMonths: 34.321534954100805,
TotalYears: 2.8623219835693936,
Days: 1044,
Months: 34,
Years: 2,
StartDate: '2021-08-09T00:00:00',
EndDate: '2024-06-18T17:56:26.0738444',
},
{ Amount: 300.33, Currency: USD },
true,
'',
Expand All @@ -54,6 +74,16 @@ export const defaultData = [
GrossProfit: { Amount: 250, Currency: USD },
GrossMargin: 50,
},
{
TotalDays: 1044.7475240028286,
TotalMonths: 34.321534954100805,
TotalYears: 2.8623219835693936,
Days: 1044,
Months: 34,
Years: 2,
StartDate: '2021-08-09T00:00:00',
EndDate: '2024-06-18T17:56:26.0738444',
},
{ Amount: 300.33, Currency: USD },
true,
['https://www.google.com', 'Google'],
Expand All @@ -73,6 +103,16 @@ export const defaultData = [
GrossProfit: { Amount: 250, Currency: USD },
GrossMargin: 50,
},
{
TotalDays: 1044.7475240028286,
TotalMonths: 34.321534954100805,
TotalYears: 2.8623219835693936,
Days: 1044,
Months: 34,
Years: 2,
StartDate: '2021-08-09T00:00:00',
EndDate: '2024-06-18T17:56:26.0738444',
},
{ Amount: 300.33, Currency: USD },
false,
['https://www.unosquare.com', 'Unosquare'],
Expand All @@ -92,6 +132,16 @@ export const defaultData = [
GrossProfit: { Amount: 250, Currency: USD },
GrossMargin: 50,
},
{
TotalDays: 1044.7475240028286,
TotalMonths: 34.321534954100805,
TotalYears: 2.8623219835693936,
Days: 1044,
Months: 34,
Years: 2,
StartDate: '2021-08-09T00:00:00',
EndDate: '2024-06-18T17:56:26.0738444',
},
{ Amount: 300.33, Currency: USD },
false,
'',
Expand All @@ -111,6 +161,16 @@ export const defaultData = [
GrossProfit: { Amount: 250, Currency: USD },
GrossMargin: 50,
},
{
TotalDays: 1044.7475240028286,
TotalMonths: 34.321534954100805,
TotalYears: 2.8623219835693936,
Days: 1044,
Months: 34,
Years: 2,
StartDate: '2021-08-09T00:00:00',
EndDate: '2024-06-18T17:56:26.0738444',
},
{ Amount: 300.33, Currency: USD },
true,
'https://www.unosquare.com',
Expand All @@ -130,6 +190,16 @@ export const defaultData = [
GrossProfit: { Amount: 250, Currency: USD },
GrossMargin: 50,
},
{
TotalDays: 1044.7475240028286,
TotalMonths: 34.321534954100805,
TotalYears: 2.8623219835693936,
Days: 1044,
Months: 34,
Years: 2,
StartDate: '2021-08-09T00:00:00',
EndDate: '2024-06-18T17:56:26.0738444',
},
{ Amount: 300.33, Currency: USD },
true,
'https://www.google.com',
Expand All @@ -149,6 +219,16 @@ export const defaultData = [
GrossProfit: { Amount: 250, Currency: USD },
GrossMargin: 50,
},
{
TotalDays: 1044.7475240028286,
TotalMonths: 34.321534954100805,
TotalYears: 2.8623219835693936,
Days: 1044,
Months: 34,
Years: 2,
StartDate: '2021-08-09T00:00:00',
EndDate: '2024-06-18T17:56:26.0738444',
},
{ Amount: 300.33, Currency: USD },
true,
'https://www.google.com',
Expand Down
2 changes: 1 addition & 1 deletion sample/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const chartBarData = [
const Application = () => {
const setAlert = useAlertStore((st) => st.setAlert);
const [currentOption, setCurrentOption] = React.useState<string>(options.A);
const [virtualSelectOption, setVirtualSelectOption] = React.useState<string>(0);
const [virtualSelectOption, setVirtualSelectOption] = React.useState<string>('0');
const [openMenu, setOpenMenu] = useToggle();
const [loading, isLoading] = React.useState(true);
const [toggle, setToggle] = useToggle(true);
Expand Down
43 changes: 42 additions & 1 deletion src/TableCell/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
import { formatter, toMoney, toPercentage } from 'uno-js';
import { useToggle } from '../hooks';
import tw from 'tailwind-styled-components';
import { FinancialMetric, TableCellTypes, TableColumn } from '../constants';
import { FinancialMetric, TableCellTypes, TableColumn, Tenure } from '../constants';
import { twMerge } from 'tailwind-merge';
import { getAlignment, translateType } from '../utils';
import { BasicTooltip } from '../Tooltip';
Expand Down Expand Up @@ -104,6 +104,45 @@ const FinancialMetricCell = ({ data }: { data: FinancialMetric }) => {
);
};

const TenureCell = ({ data }: { data: Tenure }) => {
const id = uuidv4();
return (
<>
<BasicTooltip id={`tenure-${id}`}>
<List>
<ListItem className='text-xs/[13px]'>
<span>Total Days:</span>{' '}
<span>{formatter(String(Math.floor(Number(data.TotalDays) * 100) / 100), 'days')}</span>
</ListItem>
<ListItem className='text-xs/[13px]'>
<span>Total Months:</span>{' '}
<span>{formatter(String(Math.floor(Number(data.TotalMonths) * 100) / 100), 'months')}</span>
</ListItem>
<ListItem className='text-xs/[13px]'>
<span>Total Years:</span> <span>{Math.floor(Number(data.TotalYears) * 100) / 100}</span>
</ListItem>
<ListItem className='text-xs/[13px]'>
<span>Days:</span>{' '}
<span>{formatter(String(Math.floor(Number(data.Days) * 100) / 100), 'days')}</span>
</ListItem>
<ListItem className='text-xs/[13px]'>
<span>Years:</span> <span>{data.Years}</span>
</ListItem>
<ListItem className='text-xs/[13px]'>
<span>StartDate:</span> <span>{formatter(String(data.StartDate), 'date')}</span>
</ListItem>
<ListItem className='text-xs/[13px]'>
<span>EndDate:</span> <span>{formatter(String(data.EndDate), 'date')}</span>
</ListItem>
</List>
</BasicTooltip>
<span data-tooltip-id={`tenure-${id}`} className='cursor-pointer'>
{formatter(String(data.Months), 'months')}
</span>
</>
);
};

export const TableCellContent = ({ data, column }: { data: TableCellTypes; column: TableColumn | undefined }) => {
const { dataType, formatterOptions } = column ?? defaultColumn;
if (dataType !== 'money' && (data == null || data === ' ')) return formatterOptions?.nullValue ?? 'N/A';
Expand Down Expand Up @@ -138,6 +177,8 @@ export const TableCellContent = ({ data, column }: { data: TableCellTypes; colum
return <ListCount data={data as string[]} />;
case 'financial':
return <FinancialMetricCell data={data as FinancialMetric} />;
case 'tenure':
return <TenureCell data={data as Tenure} />;
default:
return formatter(String(data), translateType(column?.dataType), column?.formatterOptions);
}
Expand Down
15 changes: 14 additions & 1 deletion src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ export type DataTypes =
| 'bullet'
| 'paragraph'
| 'list'
| 'financial';
| 'financial'
| 'tenure';

export type SortDirection = 'asc' | 'desc';

Expand Down Expand Up @@ -61,6 +62,7 @@ export type TableCellTypes =
| null
| Money
| FinancialMetric
| Tenure
| undefined;

export type TableCoordinate = {
Expand Down Expand Up @@ -127,3 +129,14 @@ export type FinancialMetric = {
GrossProfit: Money;
GrossMargin: number;
};

export type Tenure = {
TotalDays: number;
TotalMonths: number;
TotalYears: number;
Days: number;
Months: number;
Years: number;
StartDate: string;
EndDate: string;
};

0 comments on commit 4a7af00

Please sign in to comment.