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

improve overview metrics cards

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-04-02 11:36:40 +02:00
parent 9545a6eb01
commit e518df7cc4
4 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -191,14 +191,14 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
const selectedMetric = reports[metric]!;
return (
<>
<div className="col-span-6 flex flex-wrap gap-4">
<div className="card col-span-6 p-4">
<div className="mb-2 grid grid-cols-6 gap-2">
{reports.map((report, index) => (
<button
key={index}
className={cn(
'group relative col-span-3 min-w-[170px] transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-sm',
index === metric && 'z-10 scale-[101%] rounded-xl shadow-md'
'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'
)}
onClick={() => {
setMetric(index);
@@ -209,19 +209,12 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
</button>
))}
</div>
<Widget className="col-span-6">
<WidgetHead>
<div className="title">{selectedMetric.events[0]?.displayName}</div>
</WidgetHead>
<WidgetBody>
<ChartSwitch
key={selectedMetric.id}
hideID
{...selectedMetric}
chartType="linear"
/>
</WidgetBody>
</Widget>
</>
<ChartSwitch
key={selectedMetric.id}
hideID
{...selectedMetric}
chartType="linear"
/>
</div>
);
}

2
apps/dashboard/src/components/overview/overview-widget.tsx
View File

@@ -85,7 +85,7 @@ export function WidgetButtons({
<div
ref={container}
className={cn(
'-mt-2 flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b-2 [&_button.active]:border-black [&_button.active]:opacity-100 [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
'-mb-px -mt-2 flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b-2 [&_button.active]:border-black [&_button.active]:opacity-100 dark:[&_button.active]:border-white [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
className
)}
style={{ gap }}