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

oh lord. prettier eslint and all that

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2023-11-02 20:24:41 +01:00
parent e1f37b439e
commit 107feda4ad
121 changed files with 1856 additions and 1684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/src/components/report/chart/ChartProvider.tsx
View File

@@ -1,9 +1,9 @@
import { pick } from "ramda";
import { createContext, memo, useContext, useMemo } from "react";
import { createContext, memo, useContext, useMemo } from 'react';
import { pick } from 'ramda';
type ChartContextType = {
interface ChartContextType {
editMode: boolean;
};
}
type ChartProviderProps = {
children: React.ReactNode;
@@ -20,7 +20,7 @@ export function ChartProvider({ children, editMode }: ChartProviderProps) {
() => ({
editMode,
}),
[editMode],
[editMode]
)}
>
{children}
@@ -28,20 +28,24 @@ export function ChartProvider({ children, editMode }: ChartProviderProps) {
);
}
export function withChartProivder<ComponentProps>(WrappedComponent: React.FC<ComponentProps>) {
export function withChartProivder<ComponentProps>(
WrappedComponent: React.FC<ComponentProps>
) {
const WithChartProvider = (props: ComponentProps & ChartContextType) => {
return (
<ChartProvider {...props}>
<WrappedComponent {...props} />
</ChartProvider>
)
}
);
};
WithChartProvider.displayName = `WithChartProvider(${WrappedComponent.displayName ?? WrappedComponent.name ?? 'Component'})`
WithChartProvider.displayName = `WithChartProvider(${
WrappedComponent.displayName ?? WrappedComponent.name ?? 'Component'
})`;
return memo(WithChartProvider)
return memo(WithChartProvider);
}
export function useChartContext() {
return useContext(ChartContext);
}
}

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

@@ -1,28 +1,36 @@
import { ColorSquare } from "@/components/ColorSquare";
import { type IChartData } from "@/types";
import { type RouterOutputs } from "@/utils/api";
import { getChartColor } from "@/utils/theme";
import { useMemo, useState } from 'react';
import { ColorSquare } from '@/components/ColorSquare';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import type { IChartData } from '@/types';
import type { RouterOutputs } from '@/utils/api';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
import {
useReactTable,
getCoreRowModel,
flexRender,
createColumnHelper,
flexRender,
getCoreRowModel,
getSortedRowModel,
type SortingState,
} from "@tanstack/react-table";
import { useMemo, useState } from "react";
import { useElementSize } from "usehooks-ts";
import { useChartContext } from "./ChartProvider";
import { ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "@/utils/cn";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
useReactTable,
} from '@tanstack/react-table';
import type { SortingState } from '@tanstack/react-table';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { useElementSize } from 'usehooks-ts';
import { useChartContext } from './ChartProvider';
const columnHelper =
createColumnHelper<RouterOutputs["chart"]["chart"]["series"][number]>();
createColumnHelper<RouterOutputs['chart']['chart']['series'][number]>();
type ReportBarChartProps = {
interface ReportBarChartProps {
data: IChartData;
};
}
export function ReportBarChart({ data }: ReportBarChartProps) {
const { editMode } = useChartContext();
@@ -31,13 +39,13 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
const table = useReactTable({
data: useMemo(
() => (editMode ? data.series : data.series.slice(0, 20)),
[editMode, data],
[editMode, data]
),
columns: useMemo(() => {
return [
columnHelper.accessor((row) => row.name, {
id: "label",
header: () => "Label",
id: 'label',
header: () => 'Label',
cell(info) {
return (
<div className="flex items-center gap-2">
@@ -50,35 +58,35 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
size: width ? width * 0.3 : undefined,
}),
columnHelper.accessor((row) => row.totalCount, {
id: "totalCount",
id: 'totalCount',
cell: (info) => (
<div className="text-right font-medium">{info.getValue()}</div>
),
header: () => "Count",
header: () => 'Count',
footer: (info) => info.column.id,
size: width ? width * 0.1 : undefined,
enableSorting: true,
}),
columnHelper.accessor((row) => row.totalCount, {
id: "graph",
id: 'graph',
cell: (info) => (
<div
className="shine h-4 rounded [.mini_&]:h-3"
style={{
width:
(info.getValue() / info.row.original.meta.highest) * 100 +
"%",
'%',
background: getChartColor(info.row.index),
}}
/>
),
header: () => "Graph",
header: () => 'Graph',
footer: (info) => info.column.id,
size: width ? width * 0.6 : undefined,
}),
];
}, [width]),
columnResizeMode: "onChange",
columnResizeMode: 'onChange',
state: {
sorting,
},
@@ -100,7 +108,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
<ColorSquare>{event.id}</ColorSquare> {event.name}
</div>
<div className="mt-6 font-mono text-5xl font-light">
{new Intl.NumberFormat("en-IN", {
{new Intl.NumberFormat('en-IN', {
maximumSignificantDigits: 20,
}).format(event.count)}
</div>
@@ -134,16 +142,16 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
<div
{...{
className: cn(
"flex items-center gap-2",
'flex items-center gap-2',
header.column.getCanSort() &&
"cursor-pointer select-none",
'cursor-pointer select-none'
),
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
header.getContext()
)}
{{
asc: <ChevronUp className="ml-auto" size={14} />,
@@ -156,7 +164,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
onMouseDown: header.getResizeHandler(),
onTouchStart: header.getResizeHandler(),
className: `resizer ${
header.column.getIsResizing() ? "isResizing" : ""
header.column.getIsResizing() ? 'isResizing' : ''
}`,
style: {},
}

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

@@ -1,3 +1,8 @@
import { useEffect, useRef, useState } from 'react';
import { AutoSizer } from '@/components/AutoSizer';
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
import type { IChartData, IInterval } from '@/types';
import { getChartColor } from '@/utils/theme';
import {
CartesianGrid,
Line,
@@ -5,20 +10,16 @@ import {
Tooltip,
XAxis,
YAxis,
} from "recharts";
import { ReportLineChartTooltip } from "./ReportLineChartTooltip";
import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
import { type IChartData, type IInterval } from "@/types";
import { getChartColor } from "@/utils/theme";
import { ReportTable } from "./ReportTable";
import { useEffect, useRef, useState } from "react";
import { AutoSizer } from "@/components/AutoSizer";
import { useChartContext } from "./ChartProvider";
} from 'recharts';
type ReportLineChartProps = {
import { useChartContext } from './ChartProvider';
import { ReportLineChartTooltip } from './ReportLineChartTooltip';
import { ReportTable } from './ReportTable';
interface ReportLineChartProps {
data: IChartData;
interval: IInterval;
};
}
export function ReportLineChart({ interval, data }: ReportLineChartProps) {
const { editMode } = useChartContext();
@@ -31,7 +32,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
const max = 20;
setVisibleSeries(
data?.series?.slice(0, max).map((serie) => serie.name) ?? [],
data?.series?.slice(0, max).map((serie) => serie.name) ?? []
);
// ref.current = true;
}
@@ -42,7 +43,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
<AutoSizer disableHeight>
{({ width }) => (
<LineChart width={width} height={Math.min(width * 0.5, 400)}>
<YAxis dataKey={"count"} width={30} fontSize={12}></YAxis>
<YAxis dataKey={'count'} width={30} fontSize={12}></YAxis>
<Tooltip content={<ReportLineChartTooltip />} />
<CartesianGrid strokeDasharray="3 3" />
<XAxis
@@ -60,7 +61,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
})
.map((serie) => {
const realIndex = data?.series.findIndex(
(item) => item.name === serie.name,
(item) => item.name === serie.name
);
const key = serie.name;
const strokeColor = getChartColor(realIndex);

8
apps/web/src/components/report/chart/ReportLineChartTooltip.tsx
View File

@@ -1,7 +1,7 @@
import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
import { useMappings } from "@/hooks/useMappings";
import { useSelector } from "@/redux";
import { type IToolTipProps } from "@/types";
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
import { useMappings } from '@/hooks/useMappings';
import { useSelector } from '@/redux';
import type { IToolTipProps } from '@/types';
type ReportLineChartTooltipProps = IToolTipProps<{
color: string;

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

@@ -1,18 +1,17 @@
import * as React from "react";
import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
import { useSelector } from "@/redux";
import { Checkbox } from "@/components/ui/checkbox";
import { getChartColor } from "@/utils/theme";
import { cn } from "@/utils/cn";
import { useMappings } from "@/hooks/useMappings";
import { type IChartData } from "@/types";
import * as React from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
import { useMappings } from '@/hooks/useMappings';
import { useSelector } from '@/redux';
import type { IChartData } from '@/types';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
type ReportTableProps = {
interface ReportTableProps {
data: IChartData;
visibleSeries: string[];
setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
};
}
export function ReportTable({
data,
@@ -21,7 +20,7 @@ export function ReportTable({
}: ReportTableProps) {
const interval = useSelector((state) => state.report.interval);
const formatDate = useFormatDateInterval(interval);
const getLabel = useMappings()
const getLabel = useMappings();
function handleChange(name: string, checked: boolean) {
setVisibleSeries((prev) => {
@@ -33,11 +32,12 @@ export function ReportTable({
});
}
const row = "flex border-b border-border last:border-b-0 flex-1";
const cell = "p-2 last:pr-8 last:w-[8rem]";
const value = "min-w-[6rem] text-right";
const header = "text-sm font-medium";
const total = 'bg-gray-50 text-emerald-600 font-medium border-r border-border'
const row = 'flex border-b border-border last:border-b-0 flex-1';
const cell = 'p-2 last:pr-8 last:w-[8rem]';
const value = 'min-w-[6rem] text-right';
const header = 'text-sm font-medium';
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 */}
@@ -49,7 +49,7 @@ export function ReportTable({
return (
<div
key={serie.name}
className={cn("flex max-w-[200px] items-center gap-2", row, cell)}
className={cn('flex max-w-[200px] items-center gap-2', row, cell)}
>
<Checkbox
onCheckedChange={(checked) =>
@@ -76,7 +76,7 @@ export function ReportTable({
{/* ScrollView for all values */}
<div className="w-full overflow-auto">
{/* Header */}
<div className={cn("w-max", row)}>
<div className={cn('w-max', row)}>
<div className={cn(header, value, cell, total)}>Total</div>
{data.series[0]?.data.map((serie) => (
<div
@@ -91,8 +91,10 @@ export function ReportTable({
{/* 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>
<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)}>

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

@@ -1,64 +1,67 @@
import { api } from "@/utils/api";
import { type IChartInput } from "@/types";
import { ReportBarChart } from "./ReportBarChart";
import { ReportLineChart } from "./ReportLineChart";
import { withChartProivder } from "./ChartProvider";
import type { IChartInput } from '@/types';
import { api } from '@/utils/api';
type ReportLineChartProps = IChartInput
import { withChartProivder } from './ChartProvider';
import { ReportBarChart } from './ReportBarChart';
import { ReportLineChart } from './ReportLineChart';
export const Chart = withChartProivder(({
interval,
events,
breakdowns,
chartType,
name,
range,
}: ReportLineChartProps) => {
const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
const chart = api.chart.chart.useQuery(
{
interval,
chartType,
events,
breakdowns,
name,
range,
startDate: null,
endDate: null,
},
{
keepPreviousData: true,
enabled: events.length > 0 && !hasEmptyFilters,
},
);
type ReportLineChartProps = IChartInput;
const anyData = Boolean(chart.data?.series?.[0]?.data)
export const Chart = withChartProivder(
({
interval,
events,
breakdowns,
chartType,
name,
range,
}: ReportLineChartProps) => {
const hasEmptyFilters = events.some((event) =>
event.filters.some((filter) => filter.value.length === 0)
);
const chart = api.chart.chart.useQuery(
{
interval,
chartType,
events,
breakdowns,
name,
range,
startDate: null,
endDate: null,
},
{
keepPreviousData: true,
enabled: events.length > 0 && !hasEmptyFilters,
}
);
if(chart.isFetching && !anyData) {
return (<p>Loading...</p>)
const anyData = Boolean(chart.data?.series?.[0]?.data);
if (chart.isFetching && !anyData) {
return <p>Loading...</p>;
}
if (chart.isError) {
return <p>Error</p>;
}
if (!chart.isSuccess) {
return <p>Loading...</p>;
}
if (!anyData) {
return <p>No data</p>;
}
if (chartType === 'bar') {
return <ReportBarChart data={chart.data} />;
}
if (chartType === 'linear') {
return <ReportLineChart interval={interval} data={chart.data} />;
}
return <p>Chart type &quot;{chartType}&quot; is not supported yet.</p>;
}
if(chart.isError) {
return (<p>Error</p>)
}
if(!chart.isSuccess) {
return (<p>Loading...</p>)
}
if(!anyData) {
return (<p>No data</p>)
}
if(chartType === 'bar') {
return <ReportBarChart data={chart.data} />
}
if(chartType === 'linear') {
return <ReportLineChart interval={interval} data={chart.data} />
}
return <p>Chart type &quot;{chartType}&quot; is not supported yet.</p>
})
);