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

add bar chart support and other fixes

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2023-10-27 20:37:08 +02:00
parent d8c587ef90
commit ed7ed2ab24
26 changed files with 713 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -13,7 +13,7 @@ Mixan is a simple analytics tool for logging events on web and react-native. My
* [ ] Drag n Drop reports on dashboard
* [ ] Manage dashboards
* [ ] Support more chart types
* [ ] Bar
* [X] Bar
* [ ] Pie
* [ ] Area
* [ ] Support funnels

17
apps/web/src/components/ColorSquare.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { type HtmlProps } from "@/types";
import { cn } from "@/utils/cn";
type ColorSquareProps = HtmlProps<HTMLDivElement>;
export function ColorSquare({ children, className }: ColorSquareProps) {
return (
<div
className={cn(
"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-purple-500 text-xs font-medium text-white [.mini_&]:h-4 [.mini_&]:w-4 [.mini_&]:text-[0.6rem]",
className,
)}
>
{children}
</div>
);
}

33
apps/web/src/components/report/ReportChartType.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { useDispatch, useSelector } from "@/redux";
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
import {
changeChartType,
changeDateRanges,
changeInterval,
} from "./reportSlice";
import { Combobox } from "../ui/combobox";
import { type IChartType } from "@/types";
import { chartTypes } from "@/utils/constants";
export function ReportChartType() {
const dispatch = useDispatch();
const type = useSelector((state) => state.report.chartType);
return (
<>
<div className="w-full max-w-[200px]">
<Combobox
placeholder="Chart type"
onChange={(value) => {
dispatch(changeChartType(value as IChartType));
}}
value={type}
items={Object.entries(chartTypes).map(([key, value]) => ({
label: value,
value: key,
}))}
/>
</div>
</>
);
}

53
apps/web/src/components/report/ReportDateRange.tsx
View File

@@ -7,13 +7,14 @@ import { type IInterval } from "@/types";
export function ReportDateRange() {
const dispatch = useDispatch();
const interval = useSelector((state) => state.report.interval);
const chartType = useSelector((state) => state.report.chartType);
return (
<>
<RadioGroup>
<RadioGroupItem
onClick={() => {
dispatch(changeDateRanges('today'));
dispatch(changeDateRanges("today"));
}}
>
Today
@@ -68,29 +69,31 @@ export function ReportDateRange() {
1 year
</RadioGroupItem>
</RadioGroup>
<div className="w-full max-w-[200px]">
<Combobox
placeholder="Interval"
onChange={(value) => {
dispatch(changeInterval(value as IInterval));
}}
value={interval}
items={[
{
label: "Hour",
value: "hour",
},
{
label: "Day",
value: "day",
},
{
label: "Month",
value: "month",
},
]}
></Combobox>
</div>
{chartType === "linear" && (
<div className="w-full max-w-[200px]">
<Combobox
placeholder="Interval"
onChange={(value) => {
dispatch(changeInterval(value as IInterval));
}}
value={interval}
items={[
{
label: "Hour",
value: "hour",
},
{
label: "Day",
value: "day",
},
{
label: "Month",
value: "month",
},
]}
/>
</div>
)}
</>
);
}

47
apps/web/src/components/report/chart/ChartProvider.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { pick } from "ramda";
import { createContext, memo, useContext, useMemo } from "react";
type ChartContextType = {
editMode: boolean;
};
type ChartProviderProps = {
children: React.ReactNode;
} & ChartContextType;
const ChartContext = createContext<ChartContextType>({
editMode: false,
});
export function ChartProvider({ children, editMode }: ChartProviderProps) {
return (
<ChartContext.Provider
value={useMemo(
() => ({
editMode,
}),
[editMode],
)}
>
{children}
</ChartContext.Provider>
);
}
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'})`
return memo(WithChartProvider)
}
export function useChartContext() {
return useContext(ChartContext);
}

191
apps/web/src/components/report/chart/ReportBarChart.tsx Normal file
View File

@@ -0,0 +1,191 @@
import { ColorSquare } from "@/components/ColorSquare";
import { type IChartData } from "@/types";
import { type RouterOutputs } from "@/utils/api";
import { getChartColor } from "@/utils/theme";
import {
useReactTable,
getCoreRowModel,
flexRender,
createColumnHelper,
getSortedRowModel,
type SortingState,
} from "@tanstack/react-table";
import { memo, useEffect, useMemo, useState } from "react";
import { useElementSize } from "usehooks-ts";
import { useChartContext } from "./ChartProvider";
import { ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "@/utils/cn";
const columnHelper =
createColumnHelper<RouterOutputs["chart"]["chart"]["series"][number]>();
type ReportBarChartProps = {
data: IChartData;
};
export function ReportBarChart({ data }: ReportBarChartProps) {
const { editMode } = useChartContext();
const [ref, { width }] = useElementSize();
const [sorting, setSorting] = useState<SortingState>([]);
const table = useReactTable({
data: useMemo(
() => (editMode ? data.series : data.series.slice(0, 20)),
[editMode, data],
),
columns: useMemo(() => {
return [
columnHelper.accessor((row) => row.name, {
id: "label",
header: () => "Label",
cell(info) {
return (
<div className="flex items-center gap-2">
<ColorSquare>{info.row.original.event.id}</ColorSquare>
{info.getValue()}
</div>
);
},
footer: (info) => info.column.id,
size: width ? width * 0.3 : undefined,
}),
columnHelper.accessor((row) => row.totalCount, {
id: "totalCount",
cell: (info) => (
<div className="text-right font-medium">{info.getValue()}</div>
),
header: () => "Count",
footer: (info) => info.column.id,
size: width ? width * 0.1 : undefined,
enableSorting: true,
}),
columnHelper.accessor((row) => row.totalCount, {
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",
footer: (info) => info.column.id,
size: width ? width * 0.6 : undefined,
}),
];
}, [width]),
columnResizeMode: "onChange",
state: {
sorting,
},
getCoreRowModel: getCoreRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
debugTable: true,
debugHeaders: true,
debugColumns: true,
});
return (
<div ref={ref}>
{editMode && (
<div className="mb-8 flex flex-wrap gap-4">
{data.events.map((event) => {
return (
<div className="border border-border p-4" key={event.id}>
<div className="flex items-center gap-2 text-lg font-medium">
<ColorSquare>{event.id}</ColorSquare> {event.name}
</div>
<div className="mt-6 font-mono text-5xl font-light">
{new Intl.NumberFormat("en-IN", {
maximumSignificantDigits: 20,
}).format(event.count)}
</div>
</div>
);
})}
</div>
)}
<div className="overflow-x-auto">
<table
{...{
className: editMode ? '' : 'mini',
style: {
width: table.getTotalSize(),
},
}}
>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
{...{
colSpan: header.colSpan,
style: {
width: header.getSize(),
},
}}
>
<div
{...{
className: cn(
"flex items-center gap-2",
header.column.getCanSort() &&
"cursor-pointer select-none",
),
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{{
asc: <ChevronUp className="ml-auto" size={14} />,
desc: <ChevronDown className="ml-auto" size={14} />,
}[header.column.getIsSorted() as string] ?? null}
</div>
<div
{...(editMode
? {
onMouseDown: header.getResizeHandler(),
onTouchStart: header.getResizeHandler(),
className: `resizer ${
header.column.getIsResizing() ? "isResizing" : ""
}`,
style: {},
}
: {})}
/>
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td
key={cell.id}
{...{
style: {
width: cell.column.getSize(),
},
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}

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

@@ -1,4 +1,3 @@
import { api } from "@/utils/api";
import {
CartesianGrid,
Line,
@@ -7,114 +6,86 @@ import {
XAxis,
YAxis,
} from "recharts";
import { ReportLineChartTooltip } from "./ReportLineChartTooltop";
import { ReportLineChartTooltip } from "./ReportLineChartTooltip";
import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
import { type IChartInput } from "@/types";
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";
type ReportLineChartProps = IChartInput & {
showTable?: boolean;
type ReportLineChartProps = {
data: IChartData;
interval: IInterval;
};
export function ReportLineChart({
interval,
startDate,
endDate,
events,
breakdowns,
showTable,
chartType,
name,
}: ReportLineChartProps) {
export function ReportLineChart({ interval, data }: ReportLineChartProps) {
const { editMode } = useChartContext();
const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
const chart = api.chart.chart.useQuery(
{
interval,
chartType,
startDate,
endDate,
events,
breakdowns,
name,
},
{
enabled: events.length > 0 && !hasEmptyFilters,
},
);
const formatDate = useFormatDateInterval(interval);
const ref = useRef(false);
useEffect(() => {
if (!ref.current && chart.data) {
if (!ref.current && data) {
const max = 20;
setVisibleSeries(
chart.data?.series?.slice(0, max).map((serie) => serie.name) ?? [],
data?.series?.slice(0, max).map((serie) => serie.name) ?? [],
);
// ref.current = true;
}
}, [chart.data]);
}, [data]);
return (
<>
{chart.isSuccess && chart.data?.series?.[0]?.data && (
<>
<AutoSizer disableHeight>
{({ width }) => (
<LineChart width={width} height={Math.min(width * 0.5, 400)}>
<YAxis dataKey={"count"} width={30} fontSize={12}></YAxis>
<Tooltip content={<ReportLineChartTooltip />} />
<CartesianGrid strokeDasharray="3 3" />
<XAxis
fontSize={12}
dataKey="date"
tickFormatter={(m: Date) => {
return formatDate(m);
}}
tickLine={false}
allowDuplicatedCategory={false}
/>
{chart.data?.series
.filter((serie) => {
return visibleSeries.includes(serie.name);
})
.map((serie) => {
const realIndex = chart.data?.series.findIndex(
(item) => item.name === serie.name,
);
const key = serie.name;
const strokeColor = getChartColor(realIndex);
return (
<Line
type="monotone"
key={key}
isAnimationActive={false}
strokeWidth={2}
dataKey="count"
stroke={strokeColor}
data={serie.data}
name={serie.name}
/>
);
})}
</LineChart>
)}
</AutoSizer>
{showTable && (
<ReportTable
data={chart.data}
visibleSeries={visibleSeries}
setVisibleSeries={setVisibleSeries}
<AutoSizer disableHeight>
{({ width }) => (
<LineChart width={width} height={Math.min(width * 0.5, 400)}>
<YAxis dataKey={"count"} width={30} fontSize={12}></YAxis>
<Tooltip content={<ReportLineChartTooltip />} />
<CartesianGrid strokeDasharray="3 3" />
<XAxis
fontSize={12}
dataKey="date"
tickFormatter={(m: string) => {
return formatDate(m);
}}
tickLine={false}
allowDuplicatedCategory={false}
/>
)}
</>
{data?.series
.filter((serie) => {
return visibleSeries.includes(serie.name);
})
.map((serie) => {
const realIndex = data?.series.findIndex(
(item) => item.name === serie.name,
);
const key = serie.name;
const strokeColor = getChartColor(realIndex);
return (
<Line
type="monotone"
key={key}
isAnimationActive={false}
strokeWidth={2}
dataKey="count"
stroke={strokeColor}
data={serie.data}
name={serie.name}
/>
);
})}
</LineChart>
)}
</AutoSizer>
{editMode && (
<ReportTable
data={data}
visibleSeries={visibleSeries}
setVisibleSeries={setVisibleSeries}
/>
)}
</>
);

3
apps/web/src/components/report/chart/ReportLineChartTooltop.tsx → apps/web/src/components/report/chart/ReportLineChartTooltip.tsx
View File

@@ -1,5 +1,6 @@
import { useMappings } from "@/hooks/useMappings";
import { type IToolTipProps } from "@/types";
import { formatDate } from "@/utils/date";
type ReportLineChartTooltipProps = IToolTipProps<{
color: string;
@@ -29,9 +30,11 @@ export function ReportLineChartTooltip({
const sorted = payload.slice(0).sort((a, b) => b.value - a.value);
const visible = sorted.slice(0, limit);
const hidden = sorted.slice(limit);
const first = visible[0]!;
return (
<div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
{formatDate(new Date(first.payload.date))}
{visible.map((item) => {
return (
<div key={item.payload.label} className="flex gap-2">

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

@@ -1,15 +1,15 @@
import * as React from "react";
import { type RouterOutputs } from "@/utils/api";
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";
type ReportTableProps = {
data: RouterOutputs["chart"]["chart"];
data: IChartData;
visibleSeries: string[];
setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
};

64
apps/web/src/components/report/chart/index.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { api } from "@/utils/api";
import { type IChartInput } from "@/types";
import { ReportBarChart } from "./ReportBarChart";
import { ReportLineChart } from "./ReportLineChart";
import { withChartProivder } from "./ChartProvider";
type ReportLineChartProps = IChartInput
export const Chart = withChartProivder(({
interval,
startDate,
endDate,
events,
breakdowns,
chartType,
name,
}: ReportLineChartProps) => {
const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
const chart = api.chart.chart.useQuery(
{
interval,
chartType,
startDate,
endDate,
events,
breakdowns,
name,
},
{
keepPreviousData: true,
enabled: events.length > 0 && !hasEmptyFilters,
},
);
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>
})

38
apps/web/src/components/report/reportSlice.ts
View File

@@ -3,7 +3,9 @@ import {
type IChartBreakdown,
type IChartEvent,
type IInterval,
type IChartType,
} from "@/types";
import { alphabetIds } from "@/utils/constants";
import { getDaysOldDate } from "@/utils/date";
import { type PayloadAction, createSlice } from "@reduxjs/toolkit";
@@ -13,15 +15,13 @@ type InitialState = IChartInput;
const initialState: InitialState = {
name: "screen_view",
chartType: "linear",
startDate: getDaysOldDate(7),
endDate: new Date(),
startDate: getDaysOldDate(7).toISOString(),
endDate: new Date().toISOString(),
interval: "day",
breakdowns: [],
events: [],
};
const IDS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"] as const;
export const reportSlice = createSlice({
name: "counter",
initialState,
@@ -29,13 +29,13 @@ export const reportSlice = createSlice({
reset() {
return initialState
},
setReport(state, action: PayloadAction<IChartInput>) {
return action.payload
setReport(state, action: PayloadAction<IChartInput>) {
return action.payload
},
// Events
addEvent: (state, action: PayloadAction<Omit<IChartEvent, "id">>) => {
state.events.push({
id: IDS[state.events.length]!,
id: alphabetIds[state.events.length]!,
...action.payload,
});
},
@@ -64,7 +64,7 @@ export const reportSlice = createSlice({
action: PayloadAction<Omit<IChartBreakdown, "id">>,
) => {
state.breakdowns.push({
id: IDS[state.breakdowns.length]!,
id: alphabetIds[state.breakdowns.length]!,
...action.payload,
});
},
@@ -91,28 +91,35 @@ export const reportSlice = createSlice({
changeInterval: (state, action: PayloadAction<IInterval>) => {
state.interval = action.payload;
},
// Chart type
changeChartType: (state, action: PayloadAction<IChartType>) => {
state.chartType = action.payload;
},
// Date range
changeStartDate: (state, action: PayloadAction<Date>) => {
changeStartDate: (state, action: PayloadAction<string>) => {
state.startDate = action.payload;
},
// Date range
changeEndDate: (state, action: PayloadAction<Date>) => {
changeEndDate: (state, action: PayloadAction<string>) => {
state.endDate = action.payload;
},
changeDateRanges: (state, action: PayloadAction<number | 'today'>) => {
if(action.payload === 'today') {
state.startDate = new Date();
state.endDate = new Date();
state.startDate.setHours(0,0,0,0)
const startDate = new Date()
startDate.setHours(0,0,0,0)
state.startDate = startDate.toISOString();
state.endDate = new Date().toISOString();
state.interval = 'hour'
return state
}
state.startDate = getDaysOldDate(action.payload);
state.endDate = new Date();
state.startDate = getDaysOldDate(action.payload).toISOString();
state.endDate = new Date().toISOString()
if (action.payload === 1) {
state.interval = "hour";
@@ -137,6 +144,7 @@ export const {
changeBreakdown,
changeInterval,
changeDateRanges,
changeChartType,
} = reportSlice.actions;
export default reportSlice.reducer;

5
apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
View File

@@ -6,6 +6,7 @@ import { type ReportEventMoreProps } from "./ReportEventMore";
import { type IChartBreakdown } from "@/types";
import { ReportBreakdownMore } from "./ReportBreakdownMore";
import { RenderDots } from "@/components/ui/RenderDots";
import { ColorSquare } from "@/components/ColorSquare";
export function ReportBreakdowns() {
const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
@@ -36,9 +37,9 @@ export function ReportBreakdowns() {
return (
<div key={item.name} className="rounded-lg border">
<div className="flex items-center gap-2 p-2 px-4">
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-purple-500 text-xs font-medium text-white">
<ColorSquare>
{index}
</div>
</ColorSquare>
<Combobox
value={item.name}
onChange={(value) => {

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

@@ -23,6 +23,7 @@ import { ComboboxMulti } from "@/components/ui/combobox-multi";
import { Dropdown } from "@/components/Dropdown";
import { operators } from "@/utils/constants";
import { useMappings } from "@/hooks/useMappings";
import { ColorSquare } from "@/components/ColorSquare";
type ReportEventFiltersProps = {
event: IChartEvent;
@@ -163,9 +164,9 @@ function Filter({ filter, event }: FilterProps) {
className="px-4 py-2 shadow-[inset_6px_0_0] shadow-slate-200 first:border-t"
>
<div className="mb-2 flex items-center gap-2">
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-emerald-600 text-xs font-medium text-white">
<ColorSquare className="bg-emerald-500">
<SlidersHorizontal size={10} />
</div>
</ColorSquare>
<div className="flex flex-1 text-sm">
<RenderDots truncate>{filter.name}</RenderDots>
</div>

5
apps/web/src/components/report/sidebar/ReportEvents.tsx
View File

@@ -8,6 +8,7 @@ import { ReportEventMore, type ReportEventMoreProps } from "./ReportEventMore";
import { type IChartEvent } from "@/types";
import { Filter, GanttChart, Users } from "lucide-react";
import { Dropdown } from "@/components/Dropdown";
import { ColorSquare } from "@/components/ColorSquare";
export function ReportEvents() {
const [isCreating, setIsCreating] = useState(false);
@@ -42,9 +43,9 @@ export function ReportEvents() {
return (
<div key={event.name} className="rounded-lg border">
<div className="flex items-center gap-2 p-2">
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-purple-500 text-xs font-medium text-white">
<ColorSquare>
{event.id}
</div>
</ColorSquare>
<Combobox
value={event.name}
onChange={(value) => {

2
apps/web/src/modals/AddClient.tsx
View File

@@ -123,8 +123,6 @@ export default function CreateProject() {
<Combobox
{...field}
onChange={(value) => {
console.log("wtf?", value);
field.onChange(value);
}}
items={

12
apps/web/src/pages/[organization]/[project]/[dashboard].tsx
View File

@@ -1,12 +1,12 @@
import { ReportLineChart } from "@/components/report/chart/ReportLineChart";
import { MainLayout } from "@/components/layouts/MainLayout";
import { Container } from "@/components/Container";
import { api } from "@/utils/api";
import Link from "next/link";
import { PageTitle } from "@/components/PageTitle";
import { useOrganizationParams } from "@/hooks/useOrganizationParams";
import { Suspense } from "react";
import { Suspense, useMemo } from "react";
import { createServerSideProps } from "@/server/getServerSideProps";
import { Chart } from "@/components/report/chart";
export const getServerSideProps = createServerSideProps()
@@ -19,7 +19,9 @@ export default function Dashboard() {
});
const dashboard = query.data?.dashboard ?? null;
const reports = query.data?.reports ?? [];
const reports = useMemo(() => {
return query.data?.reports ?? [];
}, [query])
return (
<MainLayout>
@@ -38,8 +40,8 @@ export default function Dashboard() {
>
{report.name}
</Link>
<div className="p-4 pl-2">
<ReportLineChart {...report} showTable={false} />
<div className="p-4 pl-2 aspect-[1.8/1] overflow-auto">
<Chart {...report} editMode={false} />
</div>
</div>
))}

8
apps/web/src/pages/[organization]/reports/index.tsx
View File

@@ -1,5 +1,5 @@
import { ReportSidebar } from "@/components/report/sidebar/ReportSidebar";
import { ReportLineChart } from "@/components/report/chart/ReportLineChart";
import { Chart } from "@/components/report/chart";
import { useDispatch, useSelector } from "@/redux";
import { MainLayout } from "@/components/layouts/MainLayout";
import { ReportDateRange } from "@/components/report/ReportDateRange";
@@ -9,6 +9,7 @@ import { useReportId } from "@/components/report/hooks/useReportId";
import { api } from "@/utils/api";
import { useRouterBeforeLeave } from "@/hooks/useRouterBeforeLeave";
import { createServerSideProps } from "@/server/getServerSideProps";
import { ReportChartType } from "@/components/report/ReportChartType";
export const getServerSideProps = createServerSideProps()
@@ -27,7 +28,7 @@ export default function Page() {
// Set report if reportId exists
useEffect(() => {
if(reportId && reportQuery.data) {
if(reportId && reportQuery.data) {
dispatch(setReport(reportQuery.data))
}
}, [reportId, reportQuery.data, dispatch])
@@ -40,9 +41,10 @@ export default function Page() {
<div className="flex flex-col gap-4 p-4">
<div className="flex gap-4">
<ReportDateRange />
<ReportChartType />
</div>
<ReportLineChart {...report} showTable />
<Chart {...report} editMode />
</div>
</MainLayout>
);

2
apps/web/src/pages/_app.tsx
View File

@@ -27,8 +27,6 @@ const MixanApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
console.log('session',session);
return (
<div className={font.className}>
<SessionProvider session={session}>

108
apps/web/src/server/api/routers/chart.ts
View File

@@ -1,7 +1,7 @@
import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "@/server/api/trpc";
import { db } from "@/server/db";
import { pipe, sort, uniq } from "ramda";
import { last, pipe, sort, uniq } from "ramda";
import { toDots } from "@/utils/object";
import { zChartInput } from "@/utils/validation";
import { type IChartInput, type IChartEvent } from "@/types";
@@ -13,15 +13,14 @@ export const config = {
};
export const chartRouter = createTRPCRouter({
events: protectedProcedure
.query(async () => {
const events = await db.event.findMany({
take: 500,
distinct: ["name"],
});
events: protectedProcedure.query(async () => {
const events = await db.event.findMany({
take: 500,
distinct: ["name"],
});
return events;
}),
return events;
}),
properties: protectedProcedure
.input(z.object({ event: z.string() }).optional())
@@ -106,12 +105,37 @@ export const chartRouter = createTRPCRouter({
);
}
return {
series: series.sort((a, b) => {
const sorted = [...series].sort((a, b) => {
if (input.chartType === "linear") {
const sumA = a.data.reduce((acc, item) => acc + item.count, 0);
const sumB = b.data.reduce((acc, item) => acc + item.count, 0);
return sumB - sumA;
}),
} else {
return b.totalCount - a.totalCount;
}
});
const meta = {
highest: sorted[0]?.totalCount ?? 0,
lowest: last(sorted)?.totalCount ?? 0,
};
return {
events: Object.entries(series.reduce((acc, item) => {
if(acc[item.event.id]) {
acc[item.event.id] += item.totalCount;
} else {
acc[item.event.id] = item.totalCount;
}
return acc
}, {} as Record<typeof series[number]['event']['id'], number>)).map(([id, count]) => ({
count,
...events.find((event) => event.id === id)!,
})),
series: sorted.map((item) => ({
...item,
meta,
})),
};
}),
});
@@ -169,7 +193,7 @@ async function getChartData({
endDate,
}: {
event: IChartEvent;
} & Omit<IChartInput, 'events'>) {
} & Omit<IChartInput, "events">) {
const select = [];
const where = [];
const groupBy = [];
@@ -259,30 +283,34 @@ async function getChartData({
}
if (startDate) {
where.push(`"createdAt" >= '${startDate.toISOString()}'`);
where.push(`"createdAt" >= '${startDate}'`);
}
if (endDate) {
where.push(`"createdAt" <= '${endDate.toISOString()}'`);
where.push(`"createdAt" <= '${endDate}'`);
}
const sql = `
SELECT ${select.join(", ")}
FROM events
WHERE ${where.join(" AND ")}
GROUP BY ${groupBy.join(", ")}
ORDER BY ${orderBy.join(", ")}
`;
const sql = [
`SELECT ${select.join(", ")}`,
`FROM events`,
`WHERE ${where.join(" AND ")}`,
];
const result = await db.$queryRawUnsafe<ResultItem[]>(sql);
if (groupBy.length) {
sql.push(`GROUP BY ${groupBy.join(", ")}`);
}
if (orderBy.length) {
sql.push(`ORDER BY ${orderBy.join(", ")}`);
}
const result = await db.$queryRawUnsafe<ResultItem[]>(sql.join("\n"));
// group by sql label
const series = result.reduce(
(acc, item) => {
// item.label can be null when using breakdowns on a property
// that doesn't exist on all events
// fallback on event legend
const label = item.label?.trim() ?? getEventLegend(event);
const label = item.label?.trim() ?? event.id;
if (label) {
if (acc[label]) {
acc[label]?.push(item);
@@ -301,18 +329,26 @@ async function getChartData({
return Object.keys(series).map((key) => {
const legend = breakdowns.length ? key : getEventLegend(event);
const data = series[key] ?? [];
return {
name: legend,
event: {
id: event.id,
name: event.name,
},
totalCount: getTotalCount(data),
data: fillEmptySpotsInTimeline(data, interval, startDate, endDate).map(
(item) => {
return {
label: legend,
count: item.count,
date: new Date(item.date).toISOString(),
};
},
),
data:
chartType === "linear"
? fillEmptySpotsInTimeline(data, interval, startDate, endDate).map(
(item) => {
return {
label: legend,
count: item.count,
date: new Date(item.date).toISOString(),
};
},
)
: [],
};
});
}
@@ -320,8 +356,8 @@ async function getChartData({
function fillEmptySpotsInTimeline(
items: ResultItem[],
interval: string,
startDate: Date,
endDate: Date,
startDate: string,
endDate: string,
) {
const result = [];
const clonedStartDate = new Date(startDate);

39
apps/web/src/server/api/routers/report.ts
View File

@@ -8,21 +8,42 @@ import {
type IChartInput,
type IChartBreakdown,
type IChartEvent,
type IChartEventFilter,
} from "@/types";
import { type Report as DbReport } from "@prisma/client";
import { getProjectBySlug } from "@/server/services/project.service";
import { getDashboardBySlug } from "@/server/services/dashboard.service";
import { alphabetIds } from "@/utils/constants";
function transform(report: DbReport): IChartInput & { id: string } {
function transformFilter(filter: Partial<IChartEventFilter>, index: number): IChartEventFilter {
return {
id: filter.id ?? alphabetIds[index]!,
name: filter.name ?? 'Unknown Filter',
operator: filter.operator ?? 'is',
value: typeof filter.value === 'string' ? [filter.value] : filter.value ?? [],
}
}
function transformEvent(event: Partial<IChartEvent>, index: number): IChartEvent {
return {
segment: event.segment ?? 'event',
filters: (event.filters ?? []).map(transformFilter),
id: event.id ?? alphabetIds[index]!,
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
name: event.name || 'Untitled',
}
}
function transformReport(report: DbReport): IChartInput & { id: string } {
return {
id: report.id,
events: report.events as IChartEvent[],
events: (report.events as IChartEvent[]).map(transformEvent),
breakdowns: report.breakdowns as IChartBreakdown[],
startDate: getDaysOldDate(report.range),
endDate: new Date(),
startDate: getDaysOldDate(report.range).toISOString(),
endDate: new Date().toISOString(),
chartType: report.chart_type,
interval: report.interval,
name: report.name,
name: report.name || 'Untitled',
};
}
@@ -40,7 +61,7 @@ export const reportRouter = createTRPCRouter({
id,
},
})
.then(transform);
.then(transformReport);
}),
list: protectedProcedure
.input(
@@ -60,7 +81,7 @@ export const reportRouter = createTRPCRouter({
});
return {
reports: reports.map(transform),
reports: reports.map(transformReport),
dashboard,
}
}),
@@ -82,7 +103,7 @@ export const reportRouter = createTRPCRouter({
interval: report.interval,
breakdowns: report.breakdowns,
chart_type: report.chartType,
range: dateDifferanceInDays(report.endDate, report.startDate),
range: dateDifferanceInDays(new Date(report.endDate), new Date(report.startDate)),
},
});
}),
@@ -108,7 +129,7 @@ export const reportRouter = createTRPCRouter({
interval: report.interval,
breakdowns: report.breakdowns,
chart_type: report.chartType,
range: dateDifferanceInDays(report.endDate, report.startDate),
range: dateDifferanceInDays(new Date(report.endDate), new Date(report.startDate)),
},
});
}),

2
apps/web/src/server/db.ts
View File

@@ -10,7 +10,7 @@ export const db =
globalForPrisma.prisma ??
new PrismaClient({
log:
env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
['error']
});
if (env.NODE_ENV !== "production") globalForPrisma.prisma = db;

114
apps/web/src/styles/globals.css
View File

@@ -1,7 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
@@ -9,63 +9,63 @@
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border;
@@ -81,12 +81,86 @@
.h2 {
@apply text-xl font-medium;
}
.h3 {
@apply text-lg font-medium;
}
.h4 {
@apply font-medium;
}
.ellipsis {
@apply overflow-hidden text-ellipsis whitespace-nowrap;
}
.shine {
background-repeat: no-repeat;
background-position:
-120px -120px,
0 0;
background-image: linear-gradient(
0 0,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.2) 37%,
rgba(255, 255, 255, 0.8) 45%,
rgba(255, 255, 255, 0) 50%
);
background-size:
250% 250%,
100% 100%;
transition: background-position 0s ease;
}
.shine:hover {
background-position:
0 0,
0 0;
transition-duration: 0.5s;
}
}
table {
@apply w-fit border border-border;
}
table.mini {
@apply text-xs;
}
th,
td {
@apply border border-border px-4 py-2;
}
th {
/* relative is for resizing */
@apply relative text-left font-medium;
}
.resizer {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 5px;
background: rgba(0, 0, 0, 0.1);
cursor: col-resize;
user-select: none;
touch-action: none;
}
.resizer.isResizing {
@apply bg-black;
opacity: 1;
}
@media (hover: hover) {
.resizer {
opacity: 0;
}
*:hover > .resizer {
opacity: 1;
}
}

9
apps/web/src/types/index.ts
View File

@@ -1,4 +1,5 @@
import { type zTimeInterval, type zChartBreakdown, type zChartEvent, type zChartInput } from "@/utils/validation";
import { type RouterOutputs } from "@/utils/api";
import { type zTimeInterval, type zChartBreakdown, type zChartEvent, type zChartInput, type zChartType } from "@/utils/validation";
import { type Client, type Project } from "@prisma/client";
import { type TooltipProps } from "recharts";
import { type z } from "zod";
@@ -11,14 +12,14 @@ export type IChartEventFilter = IChartEvent['filters'][number]
export type IChartEventFilterValue = IChartEvent['filters'][number]['value'][number]
export type IChartBreakdown = z.infer<typeof zChartBreakdown>
export type IInterval = z.infer<typeof zTimeInterval>
export type IChartType = z.infer<typeof zChartType>
export type IChartData = RouterOutputs["chart"]["chart"];
export type IToolTipProps<T> = Omit<TooltipProps<number, string>, 'payload'> & {
payload?: Array<T>
}
export type IProject = Project
export type IClientWithProject = Client & {
project: IProject
}
}

23
apps/web/src/utils/constants.ts
View File

@@ -1,7 +1,22 @@
export const operators = {
is: "Is",
isNot: "Is not",
contains: 'Contains',
doesNotContain: 'Not contains',
}
contains: "Contains",
doesNotContain: "Not contains",
};
export const chartTypes = {
linear: "Linear",
bar: "Bar",
pie: "Pie",
metric: "Metric",
area: "Area",
};
export const intervals = {
day: "Day",
hour: "Hour",
month: "Month",
};
export const alphabetIds = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"] as const;

10
apps/web/src/utils/validation.ts
View File

@@ -1,5 +1,5 @@
import { z } from "zod";
import { operators } from "./constants";
import { operators, chartTypes, intervals } from "./constants";
function objectToZodEnums<K extends string> ( obj: Record<K, any> ): [ K, ...K[] ] {
const [ firstKey, ...otherKeys ] = Object.keys( obj ) as K[]
@@ -33,14 +33,14 @@ export const zChartBreakdown = z.object({
export const zChartEvents = z.array(zChartEvent);
export const zChartBreakdowns = z.array(zChartBreakdown);
export const zChartType = z.enum(["linear", "bar", "pie", "metric", "area"]);
export const zChartType = z.enum(objectToZodEnums(chartTypes));
export const zTimeInterval = z.enum(["day", "hour", "month"]);
export const zTimeInterval = z.enum(objectToZodEnums(intervals));
export const zChartInput = z.object({
name: z.string(),
startDate: z.date(),
endDate: z.date(),
startDate: z.string(),
endDate: z.string(),
chartType: zChartType,
interval: zTimeInterval,
events: zChartEvents,

BIN
bun.lockb
View File

Binary file not shown.