91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { FormattedNumber } from 'react-intl';
|
|
|
|
import Text from '@/components/ui/text';
|
|
import { useDimensions } from '@/queries/admin/use-metrics';
|
|
|
|
import type { AdminDimensionKey, AdminGetDimensionsParams } from 'pl-api';
|
|
|
|
interface IDimension {
|
|
dimension: AdminDimensionKey;
|
|
startAt: string;
|
|
endAt: string;
|
|
label?: React.JSX.Element;
|
|
params: AdminGetDimensionsParams;
|
|
}
|
|
|
|
const Dimension: React.FC<IDimension> = ({ dimension, startAt, endAt, label, params }) => {
|
|
const { data } = useDimensions([dimension], { ...params, start_at: startAt, end_at: endAt });
|
|
|
|
let content;
|
|
|
|
if (!data) {
|
|
content = (
|
|
<table>
|
|
<tbody>
|
|
{Array.from(Array(params.limit)).map((_, i) => (
|
|
<tr key={i}>
|
|
<td>{/* <Skeleton width={100} /> */}</td>
|
|
|
|
<td>{/* <Skeleton width={60} /> */}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
} else {
|
|
const sum = data[0].data.reduce((sum, cur) => sum + +cur.value * 1, 0);
|
|
|
|
content = (
|
|
<table className='w-full'>
|
|
<tbody>
|
|
{data[0].data.map((item) => (
|
|
<tr
|
|
className='border-b border-primary-200 last:border-none dark:border-gray-800'
|
|
key={item.key}
|
|
>
|
|
<td className='p-2.5'>
|
|
<span
|
|
className='mr-2 inline-block size-2 rounded-full bg-green-500 shadow-sm'
|
|
style={{ opacity: +item.value / sum }}
|
|
/>
|
|
<Text title={item.key} weight='medium' size='xs' tag='span'>
|
|
{item.human_key}
|
|
</Text>
|
|
</td>
|
|
|
|
<td className='p-2.5 text-end'>
|
|
<Text size='xs'>
|
|
{typeof item.human_value !== 'undefined' ? (
|
|
item.human_value
|
|
) : (
|
|
<FormattedNumber value={+item.value} />
|
|
)}
|
|
</Text>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{label && (
|
|
<Text
|
|
className='border-b border-primary-200 pb-1 dark:border-gray-800'
|
|
weight='medium'
|
|
size='sm'
|
|
>
|
|
{label}
|
|
</Text>
|
|
)}
|
|
|
|
{content}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { Dimension };
|