zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add tailwind prettier and some clean up

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-26 22:03:08 +01:00
parent d0079c8dc3
commit 44c66dbed4
118 changed files with 355 additions and 2045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dashboard/src/components/report/chart/ChartAnimation.tsx
View File

@@ -25,7 +25,7 @@ export const ChartAnimationContainer = (
<div
{...props}
className={cn(
'border border-border rounded-md p-8 bg-white',
'rounded-md border border-border bg-white p-8',
props.className
)}
/>

2
apps/dashboard/src/components/report/chart/ChartEmpty.tsx
View File

@@ -22,7 +22,7 @@ export function ChartEmpty() {
return (
<div
className={
'aspect-video w-full max-h-[300px] min-h-[200px] flex justify-center items-center'
'flex aspect-video max-h-[300px] min-h-[200px] w-full items-center justify-center'
}
>
No data

2
apps/dashboard/src/components/report/chart/ChartLoading.tsx
View File

@@ -7,7 +7,7 @@ export function ChartLoading({ className }: ChartLoadingProps) {
return (
<div
className={cn(
'aspect-video w-full bg-slate-200 animate-pulse rounded max-h-[300px] min-h-[200px]',
'aspect-video max-h-[300px] min-h-[200px] w-full animate-pulse rounded bg-slate-200',
className
)}
/>

24
apps/dashboard/src/components/report/chart/MetricCard.tsx
View File

@@ -56,10 +56,10 @@ export function MetricCard({
return (
<div
className="group relative card p-4 overflow-hidden h-24"
className="card group relative h-24 overflow-hidden p-4"
key={serie.name}
>
<div className="absolute inset-0 -left-1 -right-1 z-0 opacity-20 transition-opacity duration-300 group-hover:opacity-50 rounded-md">
<div className="absolute inset-0 -left-1 -right-1 z-0 rounded-md opacity-20 transition-opacity duration-300 group-hover:opacity-50">
<AutoSizer>
{({ width, height }) => (
<AreaChart
@@ -82,21 +82,21 @@ export function MetricCard({
</div>
<div className="relative">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 font-medium text-left min-w-0">
<div className="flex min-w-0 items-center gap-2 text-left font-medium">
<ColorSquare>{serie.event.id}</ColorSquare>
<span className="text-ellipsis overflow-hidden whitespace-nowrap">
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
{serie.name || serie.event.displayName || serie.event.name}
</span>
</div>
{/* <PreviousDiffIndicator {...serie.metrics.previous[metric]} /> */}
</div>
<div className="flex justify-between items-end mt-2">
<div className="text-2xl font-bold text-ellipsis overflow-hidden whitespace-nowrap">
<div className="mt-2 flex items-end justify-between">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{renderValue(serie.metrics[metric], 'ml-1 font-light text-xl')}
</div>
<PreviousDiffIndicatorText
{...serie.metrics.previous[metric]}
className="font-medium text-xs mb-0.5"
className="mb-0.5 text-xs font-medium"
/>
</div>
</div>
@@ -106,8 +106,8 @@ export function MetricCard({
export function MetricCardEmpty() {
return (
<div className="card p-4 h-24">
<div className="flex items-center justify-center h-full text-slate-600">
<div className="card h-24 p-4">
<div className="flex h-full items-center justify-center text-slate-600">
No data
</div>
</div>
@@ -116,9 +116,9 @@ export function MetricCardEmpty() {
export function MetricCardLoading() {
return (
<div className="h-24 p-4 py-5 flex flex-col card">
<div className="bg-slate-200 rounded animate-pulse h-4 w-1/2"></div>
<div className="bg-slate-200 rounded animate-pulse h-6 w-1/5 mt-auto"></div>
<div className="card flex h-24 flex-col p-4 py-5">
<div className="h-4 w-1/2 animate-pulse rounded bg-slate-200"></div>
<div className="mt-auto h-6 w-1/5 animate-pulse rounded bg-slate-200"></div>
</div>
);
}

12
apps/dashboard/src/components/report/chart/ReportBarChart.tsx
View File

@@ -29,8 +29,8 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
return (
<div
className={cn(
'flex flex-col w-full text-xs -mx-2',
editMode && 'text-base card p-4'
'-mx-2 flex w-full flex-col text-xs',
editMode && 'card p-4 text-base'
)}
>
{series.map((serie, index) => {
@@ -39,17 +39,17 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
<div
key={serie.name}
className={cn(
'relative py-3 px-2 flex flex-1 w-full gap-4 items-center even:bg-slate-50 rounded overflow-hidden',
'[&_[role=progressbar]]:even:bg-white [&_[role=progressbar]]:shadow-sm',
'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50',
'[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-white',
isClickable && 'cursor-pointer hover:!bg-slate-100'
)}
{...(isClickable ? { onClick: () => onClick(serie) } : {})}
>
<div className="flex-1 break-all flex items-center gap-2 font-medium">
<div className="flex flex-1 items-center gap-2 break-all font-medium">
<SerieIcon name={serie.name} />
{serie.name}
</div>
<div className="flex-shrink-0 flex w-1/4 gap-4 items-center justify-end">
<div className="flex w-1/4 flex-shrink-0 items-center justify-end gap-4">
<PreviousDiffIndicatorText
{...serie.metrics.previous[metric]}
className="text-xs font-medium"

4
apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
View File

@@ -39,7 +39,7 @@ export function ReportChartTooltip({
const hidden = sorted.slice(limit);
return (
<div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl min-w-[180px]">
<div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
{visible.map((item, index) => {
// If we have a <Cell /> component, payload can be nested
const payload = item.payload.payload ?? item.payload;
@@ -62,7 +62,7 @@ export function ReportChartTooltip({
className="w-[3px] rounded-full"
style={{ background: data.color }}
/>
<div className="flex flex-col flex-1">
<div className="flex flex-1 flex-col">
<div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
{getLabel(data.label)}
</div>

10
apps/dashboard/src/components/report/chart/ReportTable.tsx
View File

@@ -55,8 +55,8 @@ export function ReportTable({
return (
<>
<div className="grid grid-cols-[200px_1fr] border border-border rounded-md overflow-hidden">
<Table className="rounded-none border-t-0 border-l-0 border-b-0">
<div className="grid grid-cols-[200px_1fr] overflow-hidden rounded-md border border-border">
<Table className="rounded-none border-b-0 border-l-0 border-t-0">
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
@@ -88,7 +88,7 @@ export function ReportTable({
/>
<Tooltip delayDuration={200}>
<TooltipTrigger asChild>
<div className="min-w-0 overflow-hidden whitespace-nowrap text-ellipsis">
<div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
{getLabel(serie.name)}
</div>
</TooltipTrigger>
@@ -157,8 +157,8 @@ export function ReportTable({
</Table>
</div>
</div>
<div className="flex flex-col-reverse gap-4 md:flex-row md:justify-between md:items-center">
<div className="flex gap-1 flex-wrap">
<div className="flex flex-col-reverse gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex flex-wrap gap-1">
<Badge>Total: {number.format(data.metrics.sum)}</Badge>
<Badge>Average: {number.format(data.metrics.average)}</Badge>
<Badge>Min: {number.format(data.metrics.min)}</Badge>

2
apps/dashboard/src/components/report/chart/ResponsiveContainer.tsx
View File

@@ -17,7 +17,7 @@ export function ResponsiveContainer({ children }: ResponsiveContainerProps) {
maxHeight,
minHeight,
}}
className={cn('max-sm:-mx-3 aspect-video w-full', editMode && 'card p-4')}
className={cn('aspect-video w-full max-sm:-mx-3', editMode && 'card p-4')}
>
<AutoSizer disableHeight>
{({ width }) =>

2
apps/dashboard/src/components/report/chart/SerieIcon.flags.tsx
View File

@@ -4,7 +4,7 @@ const createFlagIcon = (url: string) => {
return function (_props: LucideProps) {
return (
<span
className={`rounded-[2px] overflow-hidden !block !leading-[1rem] fi fi-${url}`}
className={`fi !block overflow-hidden rounded-[2px] !leading-[1rem] fi-${url}`}
></span>
);
} as LucideIcon;

4
apps/dashboard/src/components/report/chart/SerieIcon.tsx
View File

@@ -29,7 +29,7 @@ function getProxyImage(url: string) {
const createImageIcon = (url: string) => {
return function (_props: LucideProps) {
return <img className="h-4 object-contain rounded-[2px]" src={url} />;
return <img className="h-4 rounded-[2px] object-contain" src={url} />;
} as LucideIcon;
};
@@ -81,7 +81,7 @@ export function SerieIcon({ name, ...props }: SerieIconProps) {
}, [name]);
return Icon ? (
<div className="h-4 flex-shrink-0 relative [&_a]:![&_a]:!h-4 [&_svg]:!rounded-[2px]">
<div className="[&_a]:![&_a]:!h-4 relative h-4 flex-shrink-0 [&_svg]:!rounded-[2px]">
<Icon size={16} {...props} />
</div>
) : null;