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

web improvements

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2023-12-11 10:40:15 +01:00
parent b81d6823dd
commit e727109235
8 changed files with 143 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
const { editMode } = useChartContext();
const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
const formatDate = useFormatDateInterval(interval);
console.log(JSON.stringify(data.series[0]?.data, null, 2));
const ref = useRef(false);
useEffect(() => {

150
apps/web/src/components/report/chart/ReportTable.tsx
View File

@@ -39,73 +39,99 @@ export function ReportTable({
const total =
'bg-gray-50 text-emerald-600 font-medium border-r border-border';
return (
<div className="flex w-fit max-w-full rounded-md border border-border">
{/* Labels */}
<div className="border-r border-border">
<div className={cn(header, row, cell)}>Name</div>
{data.series.map((serie, index) => {
const checked = visibleSeries.includes(serie.name);
<>
<div className="flex w-fit max-w-full rounded-md border border-border">
{/* Labels */}
<div className="border-r border-border">
<div className={cn(header, row, cell)}>Name</div>
{/* <div
className={cn(
'flex max-w-[200px] w-full min-w-full items-center gap-2',
row,
cell
)}
>
<div className="font-medium min-w-0 overflow-scroll whitespace-nowrap scrollbar-hide">
Summary
</div>
</div> */}
{data.series.map((serie, index) => {
const checked = visibleSeries.includes(serie.name);
return (
<div
key={serie.name}
className={cn('flex max-w-[200px] items-center gap-2', row, cell)}
>
<Checkbox
onCheckedChange={(checked) =>
handleChange(serie.name, !!checked)
}
style={
checked
? {
background: getChartColor(index),
borderColor: getChartColor(index),
}
: undefined
}
checked={checked}
/>
<div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
{getLabel(serie.name)}
return (
<div
key={serie.name}
className={cn(
'flex max-w-[200px] w-full min-w-full items-center gap-2',
row,
cell
)}
>
<Checkbox
onCheckedChange={(checked) =>
handleChange(serie.name, !!checked)
}
style={
checked
? {
background: getChartColor(index),
borderColor: getChartColor(index),
}
: undefined
}
checked={checked}
/>
<div
title={getLabel(serie.name)}
className="min-w-0 overflow-scroll whitespace-nowrap scrollbar-hide"
>
{getLabel(serie.name)}
</div>
</div>
</div>
);
})}
</div>
{/* ScrollView for all values */}
<div className="w-full overflow-auto">
{/* Header */}
<div className={cn('w-max', row)}>
<div className={cn(header, value, cell, total)}>Total</div>
{data.series[0]?.data.map((serie) => (
<div
key={serie.date.toString()}
className={cn(header, value, cell)}
>
{formatDate(serie.date)}
</div>
))}
);
})}
</div>
{/* Values */}
{data.series.map((serie) => {
return (
<div className={cn('w-max', row)} key={serie.name}>
<div className={cn(header, value, cell, total)}>
{serie.totalCount}
{/* ScrollView for all values */}
<div className="w-full overflow-auto">
{/* Header */}
<div className={cn('w-max', row)}>
<div className={cn(header, value, cell, total)}>Total</div>
{data.series[0]?.data.map((serie) => (
<div
key={serie.date.toString()}
className={cn(header, value, cell)}
>
{formatDate(serie.date)}
</div>
{serie.data.map((item) => {
return (
<div key={item.date} className={cn(value, cell)}>
{item.count}
</div>
);
})}
</div>
);
})}
))}
</div>
{/* Values */}
{data.series.map((serie) => {
return (
<div className={cn('w-max', row)} key={serie.name}>
<div className={cn(header, value, cell, total)}>
{serie.totalCount}
</div>
{serie.data.map((item) => {
return (
<div key={item.date} className={cn(value, cell)}>
{item.count}
</div>
);
})}
</div>
);
})}
</div>
</div>
</div>
<div className="flex gap-2">
<div>Summary</div>
<div>
{data.series.reduce((acc, serie) => serie.totalCount + acc, 0)}
</div>
</div>
</>
);
}

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

@@ -40,6 +40,8 @@ export const Chart = memo(
}
);
console.log(chart.data);
const anyData = Boolean(chart.data?.series?.[0]?.data);
if (chart.isFetching && !anyData) {

2
apps/web/src/components/report/sidebar/ReportEventFilters.tsx
View File

@@ -15,7 +15,7 @@ import {
import { RenderDots } from '@/components/ui/RenderDots';
import { useMappings } from '@/hooks/useMappings';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useDispatch } from '@/redux';
import { useDispatch, useSelector } from '@/redux';
import type {
IChartEvent,
IChartEventFilter,