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/PreviousDiffIndicator.tsx
View File

@@ -95,7 +95,7 @@ export function PreviousDiffIndicatorText({
return (
<div
className={cn([
'flex gap-0.5 items-center',
'flex items-center gap-0.5',
getDiffIndicator(
previousIndicatorInverted,
state,

2
apps/dashboard/src/components/report/ReportRange.tsx
View File

@@ -62,7 +62,7 @@ export function ReportRange({
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<div className="p-4 border-b border-border">
<div className="border-b border-border p-4">
<ToggleGroup
value={range}
onValueChange={(value) => {

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;

26
apps/dashboard/src/components/report/funnel/Funnel.tsx
View File

@@ -94,7 +94,7 @@ export function FunnelSteps({
return (
<CarouselItem
className={cn(
'flex-[0_0_250px] max-w-full p-0 px-1',
'max-w-full flex-[0_0_250px] p-0 px-1',
editMode && 'flex-[0_0_320px]'
)}
key={step.event.id}
@@ -106,13 +106,13 @@ export function FunnelSteps({
{step.event.displayName || step.event.name}
</h3>
</div>
<div className="aspect-square relative">
<div className="relative aspect-square">
<FunnelChart from={step.prevPercent} to={step.percent} />
<div className="absolute top-0 left-0 right-0 p-4 flex flex-col bg-white/40">
<div className="uppercase font-medium text-muted-foreground">
<div className="absolute left-0 right-0 top-0 flex flex-col bg-white/40 p-4">
<div className="font-medium uppercase text-muted-foreground">
Sessions
</div>
<div className="uppercase text-3xl font-bold flex items-center">
<div className="flex items-center text-3xl font-bold uppercase">
<span className="text-muted-foreground">
{step.before}
</span>
@@ -130,34 +130,34 @@ export function FunnelSteps({
</div>
</div>
{finalStep ? (
<div className={cn('p-4 flex flex-col items-center')}>
<div className="uppercase text-xs font-medium">
<div className={cn('flex flex-col items-center p-4')}>
<div className="text-xs font-medium uppercase">
Conversion
</div>
<div
className={cn(
'uppercase text-3xl font-bold',
'text-3xl font-bold uppercase',
getDropoffColor(step.dropoff.percent)
)}
>
{round(step.percent, 1)}%
</div>
<div className="uppercase text-sm mt-0 font-medium text-muted-foreground">
<div className="mt-0 text-sm font-medium uppercase text-muted-foreground">
Converted {step.current} of {totalSessions} sessions
</div>
</div>
) : (
<div className={cn('p-4 flex flex-col items-center')}>
<div className="uppercase text-xs font-medium">Dropoff</div>
<div className={cn('flex flex-col items-center p-4')}>
<div className="text-xs font-medium uppercase">Dropoff</div>
<div
className={cn(
'uppercase text-3xl font-bold',
'text-3xl font-bold uppercase',
getDropoffColor(step.dropoff.percent)
)}
>
{round(step.dropoff.percent, 1)}%
</div>
<div className="uppercase text-sm mt-0 font-medium text-muted-foreground">
<div className="mt-0 text-sm font-medium uppercase text-muted-foreground">
Lost {step.dropoff.count} sessions
</div>
</div>

2
apps/dashboard/src/components/report/sidebar/EventPropertiesCombobox.tsx
View File

@@ -51,7 +51,7 @@ export function EventPropertiesCombobox({
>
<button
className={cn(
'flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs',
'flex items-center gap-1 rounded-md border border-border p-1 px-2 text-xs font-medium leading-none',
!event.property && 'border-destructive text-destructive'
)}
>

4
apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
View File

@@ -135,7 +135,7 @@ export function ReportEvents() {
]}
label="Segment"
>
<button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs bg-white">
<button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
{event.segment === 'user' ? (
<>
<Users size={12} /> Unique users
@@ -203,7 +203,7 @@ export function ReportEvents() {
/>
</div>
<label
className="flex items-center gap-2 cursor-pointer select-none text-sm font-medium mt-4"
className="mt-4 flex cursor-pointer select-none items-center gap-2 text-sm font-medium"
htmlFor="previous"
>
<Checkbox

2
apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
View File

@@ -54,7 +54,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
);
}}
>
<button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs bg-white">
<button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
<FilterIcon size={12} /> Add filter
</button>
</Combobox>