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

update real time dashboard a bit

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-05-03 13:06:36 +02:00
parent 61d936d75a
commit d5cc2239ed
3 changed files with 16 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/dashboard/src/components/overview/overview-live-histogram.tsx
View File

@@ -135,18 +135,11 @@ interface WrapperProps {
function Wrapper({ open, children, count }: WrapperProps) {
return (
<AnimateHeight open={open}>
<div className="flex flex-col items-end md:flex-row">
<div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
<div className="text-sm max-md:mb-1">Last 30 minutes</div>
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{count}
</div>
<div className="flex flex-col">
<div className="relative -top-2 text-center text-xs font-medium text-muted-foreground">
{count} unique vistors last 30 minutes
</div>
<div className="relative flex aspect-[5/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:gap-2">
<div className="absolute -top-3 right-0 text-xs text-muted-foreground">
NOW
</div>
{/* <div className="md:absolute top-0 left-0 md:card md:p-4 mr-2 md:bg-background/90 z-50"> */}
<div className="relative flex aspect-[6/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:aspect-[10/1] md:gap-2">
{children}
</div>
</div>

6
apps/dashboard/src/components/overview/overview-metrics.tsx
View File

@@ -192,13 +192,13 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
return (
<div className="card col-span-6 p-4">
<div className="mb-2 grid grid-cols-6 gap-2">
<div className="-mx-2 -mt-2 mb-2 grid grid-cols-6 gap-2">
{reports.map((report, index) => (
<button
key={index}
className={cn(
'col-span-3 rounded p-2 transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-sm',
index === metric && 'border-l-4 border-blue-600 bg-slate-50'
'col-span-3 rounded-lg border border-background p-2 transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-xs',
index === metric && 'border-border'
)}
onClick={() => {
setMetric(index);

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

@@ -57,24 +57,23 @@ export function MetricCard({
return (
<div
className={cn(
'group relative h-[70px] overflow-hidden',
'[#report-editor_&&]:card [#report-editor_&&]:px-4 [#report-editor_&&]:py-2'
'group relative h-[70px] overflow-hidden'
// '[#report-editor_&&]:card [#report-editor_&&]:px-4 [#report-editor_&&]:py-2'
)}
key={serie.name}
>
<div
className={cn(
'absolute -right-1 bottom-2 top-0 z-0 rounded-md opacity-20 transition-opacity duration-300 group-hover:opacity-50',
previous ? 'left-[80px]' : '-left-1'
'pointer-events-none absolute -bottom-1 -left-1 -right-1 top-0 z-0 opacity-20 transition-opacity duration-300 group-hover:opacity-50'
)}
>
<AutoSizer>
{({ width, height }) => (
<AreaChart
width={width}
height={height / 3}
height={height / 2.5}
data={serie.data}
style={{ marginTop: (height / 3) * 2 }}
style={{ marginTop: (height / 2.5) * 1.5 }}
>
<Area
dataKey="count"
@@ -105,11 +104,11 @@ export function MetricCard({
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{renderValue(serie.metrics[metric], 'ml-1 font-light text-xl')}
</div>
<PreviousDiffIndicatorText
{...previous}
className="mb-0.5 text-xs font-medium"
/>
</div>
<PreviousDiffIndicatorText
{...previous}
className="mb-0.5 text-xs font-medium"
/>
</div>
</div>
);