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

improvement

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-02-13 19:03:51 +01:00
parent 69523bc0d7
commit 2572da3456
10 changed files with 116 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
apps/web/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-[400px] min-h-[200px]',
'aspect-video w-full bg-slate-200 animate-pulse rounded max-h-[300px] min-h-[200px]',
className
)}
/>

4
apps/web/src/components/report/chart/ReportAreaChart.tsx
View File

@@ -41,7 +41,7 @@ export function ReportAreaChart({
<>
<div
className={cn(
'max-sm:-mx-3 aspect-video w-full max-h-[400px] min-h-[200px]',
'max-sm:-mx-3 aspect-video w-full max-h-[300px] min-h-[200px]',
editMode && 'border border-border bg-white rounded-md p-4'
)}
>
@@ -49,7 +49,7 @@ export function ReportAreaChart({
{({ width }) => (
<AreaChart
width={width}
height={Math.min(Math.max(width * 0.5625, 250), 400)}
height={Math.min(Math.max(width * 0.5625, 250), 300)}
data={rechartData}
>
<Tooltip content={<ReportChartTooltip />} />

10
apps/web/src/components/report/chart/ReportBarChart.tsx
View File

@@ -20,15 +20,15 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
const { editMode, metric, onClick } = useChartContext();
const number = useNumber();
const series = useMemo(
() => (editMode ? data.series : data.series.slice(0, 20)),
[data]
() => (editMode ? data.series : data.series.slice(0, 10)),
[data, editMode]
);
const maxCount = Math.max(...series.map((serie) => serie.metrics[metric]));
return (
<div
className={cn(
'flex flex-col w-full divide-y text-xs',
'flex flex-col w-full text-xs -mx-2',
editMode &&
'text-base bg-white border border-border rounded-md p-4 pt-2'
)}
@@ -45,8 +45,8 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
<div
key={serie.name}
className={cn(
'py-2 flex flex-1 w-full gap-4 items-center',
isClickable && 'cursor-pointer hover:bg-gray-100'
'py-2 px-2 flex flex-1 w-full gap-4 items-center even:bg-slate-50 [&_[role=progressbar]]:even:bg-white [&_[role=progressbar]]:shadow-sm rounded',
isClickable && 'cursor-pointer hover:!bg-slate-100'
)}
{...(isClickable ? { onClick: () => onClick(serie) } : {})}
>

4
apps/web/src/components/report/chart/ReportHistogramChart.tsx
View File

@@ -45,7 +45,7 @@ export function ReportHistogramChart({
<>
<div
className={cn(
'max-sm:-mx-3 aspect-video w-full max-h-[400px] min-h-[200px]',
'max-sm:-mx-3 aspect-video w-full max-h-[300px] min-h-[200px]',
editMode && 'border border-border bg-white rounded-md p-4'
)}
>
@@ -53,7 +53,7 @@ export function ReportHistogramChart({
{({ width }) => (
<BarChart
width={width}
height={Math.min(Math.max(width * 0.5625, 250), 400)}
height={Math.min(Math.max(width * 0.5625, 250), 300)}
data={rechartData}
>
<CartesianGrid strokeDasharray="3 3" vertical={false} />

4
apps/web/src/components/report/chart/ReportLineChart.tsx
View File

@@ -43,7 +43,7 @@ export function ReportLineChart({
<>
<div
className={cn(
'max-sm:-mx-3 aspect-video w-full max-h-[400px] min-h-[200px]',
'max-sm:-mx-3 aspect-video w-full max-h-[300px] min-h-[200px]',
editMode && 'border border-border bg-white rounded-md p-4'
)}
>
@@ -51,7 +51,7 @@ export function ReportLineChart({
{({ width }) => (
<LineChart
width={width}
height={Math.min(Math.max(width * 0.5625, 250), 400)}
height={Math.min(Math.max(width * 0.5625, 250), 300)}
data={rechartData}
>
<CartesianGrid

5
apps/web/src/components/report/chart/SerieIcon.tsx
View File

@@ -47,7 +47,10 @@ export function SerieIcon({ name, ...props }: SerieIconProps) {
if (name.includes('http')) {
Icon = ((_props) => (
<SocialIcon network={networkFor(name)} />
<img
className="w-4 h-4 object-cover"
src={`${String(process.env.NEXT_PUBLIC_API_URL)}/misc/favicon?url=${encodeURIComponent(name)}`}
/>
)) as LucideIcon;
}