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

update dashboard metrics and move away from round corners

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-05-20 21:22:20 +02:00
parent 4350670bbc
commit 3ecdf54d5c
13 changed files with 125 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,9 +71,9 @@ export function MetricCard({
{({ width, height }) => (
<AreaChart
width={width}
height={height / 2.5}
height={height / 3}
data={serie.data}
style={{ marginTop: (height / 2.5) * 1.5 }}
style={{ marginTop: (height / 3) * 2 }}
>
<Area
dataKey="count"
@@ -89,12 +89,9 @@ export function MetricCard({
</div>
<div className="relative">
<div className="flex items-center justify-between gap-2">
<div className="flex min-w-0 items-center gap-2 text-left font-medium">
<div className="flex min-w-0 items-center gap-2 text-left font-semibold">
<ColorSquare>{serie.event.id}</ColorSquare>
<span
role="heading"
className="overflow-hidden text-ellipsis whitespace-nowrap"
>
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
{serie.name || serie.event.displayName || serie.event.name}
</span>
</div>

6
apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx
View File

@@ -25,7 +25,7 @@ function BarHover({ x, y, width, height, top, left, right, bottom }: any) {
return (
<rect
{...{ x, y, width, height, top, left, right, bottom }}
rx="8"
rx="3"
fill={bg}
fillOpacity={0.5}
/>
@@ -79,7 +79,7 @@ export function ReportHistogramChart({
dataKey={`${serie.id}:prev:count`}
fill={getChartColor(serie.index)}
fillOpacity={0.2}
radius={8}
radius={3}
/>
)}
<Bar
@@ -87,7 +87,7 @@ export function ReportHistogramChart({
name={serie.name}
dataKey={`${serie.id}:count`}
fill={getChartColor(serie.index)}
radius={8}
radius={3}
/>
</React.Fragment>
);