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

fix: timezone issue + improvements for funnel and conversion charts

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2025-10-30 11:04:41 +01:00
parent ddc99e9850
commit 931188a8ab
15 changed files with 128 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/start/package.json
View File

@@ -163,6 +163,7 @@
"@types/ramda": "^0.31.0",
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"@types/react-grid-layout": "^1.3.5",
"@types/react-simple-maps": "^3.0.4",
"@types/react-syntax-highlighter": "^15.5.11",
"@vitejs/plugin-react": "^4.3.4",

3
apps/start/src/components/color-square.tsx
View File

@@ -3,13 +3,14 @@ import { cn } from '@/utils/cn';
type ColorSquareProps = HtmlProps<HTMLDivElement>;
export function ColorSquare({ children, className }: ColorSquareProps) {
export function ColorSquare({ children, className, color }: ColorSquareProps) {
return (
<div
className={cn(
'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-blue-600 text-sm font-medium text-white [.mini_&]:h-4 [.mini_&]:w-4 [.mini_&]:text-[0.6rem] font-mono',
className,
)}
style={{ backgroundColor: color }}
>
{children}
</div>

7
apps/start/src/components/profiles/profile-metrics.tsx
View File

@@ -92,11 +92,10 @@ export const ProfileMetrics = ({ data }: Props) => {
label={metric.title}
metric={{
current:
metric.unit === 'timeAgo' &&
typeof data[metric.key] === 'string'
? new Date(data[metric.key] as string).getTime()
metric.unit === 'timeAgo'
? new Date(data[metric.key]).getTime()
: (data[metric.key] as number) || 0,
previous: null, // Profile metrics don't have previous period comparison
previous: null,
}}
unit={metric.unit}
data={[]}

18
apps/start/src/components/report-chart/conversion/chart.tsx
View File

@@ -191,14 +191,16 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
<span>{item.total}</span>
</div>
<div className="col gap-1">
<PreviousDiffIndicatorPure
{...getPreviousMetric(item.rate, prevItem?.rate)}
/>
<span className="text-muted-foreground">
({prevItem?.total})
</span>
</div>
{!!prevItem && (
<div className="col gap-1">
<PreviousDiffIndicatorPure
{...getPreviousMetric(item.rate, prevItem?.rate)}
/>
<span className="text-muted-foreground">
({prevItem?.total})
</span>
</div>
)}
</div>
</div>
</div>

37
apps/start/src/components/report-chart/funnel/chart.tsx
View File

@@ -6,15 +6,17 @@ import { ChevronRightIcon, InfoIcon } from 'lucide-react';
import { alphabetIds } from '@openpanel/constants';
import { createChartTooltip } from '@/components/charts/chart-tooltip';
import { BarShapeBlue } from '@/components/charts/common-bar';
import { Tooltiper } from '@/components/ui/tooltip';
import { WidgetTable } from '@/components/widget-table';
import { useNumber } from '@/hooks/use-numer-formatter';
import { getChartColor } from '@/utils/theme';
import { getPreviousMetric } from '@openpanel/common';
import {
Bar,
BarChart,
CartesianGrid,
Line,
LineChart,
Cell,
ResponsiveContainer,
XAxis,
YAxis,
@@ -205,8 +207,10 @@ export function Tables({
{
name: 'Event',
render: (item, index) => (
<div className="row items-center gap-2 row min-w-0 relative">
<ColorSquare>{alphabetIds[index]}</ColorSquare>
<div className="row items-center gap-2 min-w-0 relative">
<ColorSquare color={getChartColor(index)}>
{alphabetIds[index]}
</ColorSquare>
<span className="truncate">{item.event.displayName}</span>
</div>
),
@@ -265,6 +269,7 @@ const useRechartData = ({
return (
firstFunnel?.steps.map((step, stepIndex) => {
return {
id: step?.event.id ?? '',
name: step?.event.displayName ?? '',
...current.reduce((acc, item, index) => {
const diff = previous?.[index];
@@ -299,7 +304,7 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
<TooltipProvider data={data.current}>
<div className="aspect-video max-h-[250px] w-full p-4 card pb-1">
<ResponsiveContainer>
<LineChart data={rechartData}>
<BarChart data={rechartData}>
<CartesianGrid
strokeDasharray="3 3"
horizontal={true}
@@ -308,7 +313,7 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
/>
<XAxis
{...xAxisProps}
dataKey="name"
dataKey="id"
allowDuplicatedCategory={false}
type={'category'}
scale="auto"
@@ -316,19 +321,19 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
interval="preserveStartEnd"
tickSize={0}
tickMargin={4}
tickFormatter={(id) =>
data.current[0].steps.find((step) => step.event.id === id)
?.event.displayName ?? ''
}
/>
<YAxis {...yAxisProps} />
{data.current.map((item, index) => (
<Line
stroke={getChartColor(index)}
key={`step:percent:${item.id}`}
dataKey={`step:percent:${index}`}
type="linear"
strokeWidth={2}
/>
))}
<Bar data={rechartData} dataKey="step:percent:0">
{rechartData.map((item, index) => (
<Cell key={item.name} fill={getChartColor(index)} />
))}
</Bar>
<Tooltip />
</LineChart>
</BarChart>
</ResponsiveContainer>
</div>
</TooltipProvider>

2
apps/start/src/components/report-chart/funnel/index.tsx
View File

@@ -44,7 +44,7 @@ export function ReportFunnelChart() {
const trpc = useTRPC();
const res = useQuery(
trpc.chart.funnel.queryOptions(input, {
enabled: !isLazyLoading,
enabled: !isLazyLoading && input.events.length > 0,
}),
);

7
apps/start/src/components/widget-table.tsx
View File

@@ -85,12 +85,15 @@ export function WidgetTable<T>({
)}
>
{eachRow?.(item, index)}
<div className="grid" style={{ gridTemplateColumns }}>
<div
className="grid h-8 items-center"
style={{ gridTemplateColumns }}
>
{columns.map((column) => (
<div
key={column.name?.toString()}
className={cn(
'p-2 relative cell',
'px-2 relative cell',
columns.length > 1 && column !== columns[0]
? 'text-right'
: 'text-left',

6
apps/start/src/routes/_app.$organizationId.$projectId_.dashboards_.$dashboardId.tsx
View File

@@ -12,7 +12,6 @@ import {
import { cn } from '@/utils/cn';
import { createProjectTitle } from '@/utils/title';
import {
ChevronRight,
LayoutPanelTopIcon,
MoreHorizontal,
PlusIcon,
@@ -30,16 +29,13 @@ import { OverviewRange } from '@/components/overview/overview-range';
import { PageContainer } from '@/components/page-container';
import { PageHeader } from '@/components/page-header';
import { handleErrorToastOptions, useTRPC } from '@/integrations/trpc/react';
import { showConfirm } from '@/modals';
import { useMutation, useQuery } from '@tanstack/react-query';
import { createFileRoute, useRouter } from '@tanstack/react-router';
import { useCallback, useEffect, useMemo, useState } from 'react';
// @ts-ignore - types will be installed separately
import { Responsive, WidthProvider } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import { ReportChartLoading } from '@/components/report-chart/common/loading';
import { ReportChartProvider } from '@/components/report-chart/context';
import { showConfirm } from '@/modals';
const ResponsiveGridLayout = WidthProvider(Responsive);

5
packages/db/src/clickhouse/query-builder.ts
View File

@@ -508,7 +508,10 @@ export class Query<T = any> {
// Execution methods
async execute(): Promise<T[]> {
const query = this.buildQuery();
console.log('query', query);
console.log(
'query',
`${query} SETTINGS session_timezone = '${this.timezone}'`,
);
const result = await this.client.query({
query,

19
packages/db/src/services/conversion.service.ts
View File

@@ -20,7 +20,10 @@ export class ConversionService {
events,
breakdowns = [],
interval,
}: Omit<IChartInput, 'range' | 'previous' | 'metric' | 'chartType'>) {
timezone,
}: Omit<IChartInput, 'range' | 'previous' | 'metric' | 'chartType'> & {
timezone: string;
}) {
const group = funnelGroup === 'profile_id' ? 'profile_id' : 'session_id';
const breakdownColumns = breakdowns.map(
(b, index) => `${getSelectPropertyKey(b.name)} as b_${index}`,
@@ -44,7 +47,7 @@ export class ConversionService {
getEventFiltersWhereClause(eventB.filters),
).join(' AND ');
const eventACte = clix(this.client)
const eventACte = clix(this.client, timezone)
.select([
`DISTINCT ${group}`,
'created_at AS a_time',
@@ -56,22 +59,22 @@ export class ConversionService {
.where('name', '=', eventA.name)
.rawWhere(whereA)
.where('created_at', 'BETWEEN', [
clix.datetime(startDate),
clix.datetime(endDate),
clix.datetime(startDate, 'toDateTime'),
clix.datetime(endDate, 'toDateTime'),
]);
const eventBCte = clix(this.client)
const eventBCte = clix(this.client, timezone)
.select([group, 'created_at AS b_time'])
.from(TABLE_NAMES.events)
.where('project_id', '=', projectId)
.where('name', '=', eventB.name)
.rawWhere(whereB)
.where('created_at', 'BETWEEN', [
clix.datetime(startDate),
clix.datetime(endDate),
clix.datetime(startDate, 'toDateTime'),
clix.datetime(endDate, 'toDateTime'),
]);
const query = clix(this.client)
const query = clix(this.client, timezone)
.with('event_a', eventACte)
.with('event_b', eventBCte)
.select<{

42
packages/db/src/services/funnel.service.ts
View File

@@ -1,6 +1,6 @@
import { ifNaN } from '@openpanel/common';
import type { IChartEvent, IChartInput } from '@openpanel/validation';
import { last, reverse } from 'ramda';
import { last, reverse, uniq } from 'ramda';
import sqlstring from 'sqlstring';
import { ch } from '../clickhouse/client';
import { TABLE_NAMES } from '../clickhouse/client';
@@ -98,6 +98,14 @@ export class FunnelService {
return Object.values(series);
}
getProfileFilters(events: IChartEvent[]) {
return events.flatMap((e) =>
e.filters
?.filter((f) => f.name.startsWith('profile.'))
.map((f) => f.name.replace('profile.', '')),
);
}
async getFunnel({
projectId,
startDate,
@@ -106,7 +114,8 @@ export class FunnelService {
funnelWindow = 24,
funnelGroup,
breakdowns = [],
}: IChartInput) {
timezone = 'UTC',
}: IChartInput & { timezone: string }) {
if (!startDate || !endDate) {
throw new Error('startDate and endDate are required');
}
@@ -118,9 +127,14 @@ export class FunnelService {
const funnelWindowSeconds = funnelWindow * 3600;
const group = this.getFunnelGroup(funnelGroup);
const funnels = this.getFunnelConditions(events);
const profileFilters = this.getProfileFilters(events);
const anyFilterOnProfile = profileFilters.length > 0;
const anyBreakdownOnProfile = breakdowns.some((b) =>
b.name.startsWith('profile.'),
);
// Create the funnel CTE
const funnelCte = clix(this.client)
const funnelCte = clix(this.client, timezone)
.select([
`${group[0]} AS ${group[1]}`,
...breakdowns.map(
@@ -131,8 +145,8 @@ export class FunnelService {
.from(TABLE_NAMES.events, false)
.where('project_id', '=', projectId)
.where('created_at', 'BETWEEN', [
clix.datetime(startDate),
clix.datetime(endDate),
clix.datetime(startDate, 'toDateTime'),
clix.datetime(endDate, 'toDateTime'),
])
.where(
'name',
@@ -141,21 +155,29 @@ export class FunnelService {
)
.groupBy([group[1], ...breakdowns.map((b, index) => `b_${index}`)]);
if (anyFilterOnProfile || anyBreakdownOnProfile) {
funnelCte.leftJoin(
`(SELECT id, ${uniq(profileFilters.map((f) => f.split('.')[0]))} FROM ${TABLE_NAMES.profiles} FINAL
WHERE project_id = ${sqlstring.escape(projectId)}) as profile`,
'profile.id = profile_id',
);
}
// Create the sessions CTE if needed
const sessionsCte =
group[0] !== 'session_id'
? clix(this.client)
? clix(this.client, timezone)
.select(['profile_id', 'id'])
.from(TABLE_NAMES.sessions)
.where('project_id', '=', projectId)
.where('created_at', 'BETWEEN', [
clix.datetime(startDate),
clix.datetime(endDate),
clix.datetime(startDate, 'toDateTime'),
clix.datetime(endDate, 'toDateTime'),
])
: null;
// Base funnel query with CTEs
const funnelQuery = clix(this.client);
const funnelQuery = clix(this.client, timezone);
if (sessionsCte) {
funnelCte.leftJoin('sessions s', 's.id = session_id');
@@ -202,7 +224,7 @@ export class FunnelService {
{
event: {
...event,
displayName: event.displayName ?? event.name,
displayName: event.displayName || event.name,
},
count: item.count,
percent: (item.count / totalSessions) * 100,

24
packages/db/src/services/profile.service.ts
View File

@@ -10,13 +10,14 @@ import {
TABLE_NAMES,
ch,
chQuery,
convertClickhouseDateToJs,
formatClickhouseDate,
} from '../clickhouse/client';
import { createSqlBuilder } from '../sql-builder';
export type IProfileMetrics = {
lastSeen: string;
firstSeen: string;
lastSeen: Date;
firstSeen: Date;
screenViews: number;
sessions: number;
durationAvg: number;
@@ -29,7 +30,12 @@ export type IProfileMetrics = {
avgTimeBetweenSessions: number;
};
export function getProfileMetrics(profileId: string, projectId: string) {
return chQuery<IProfileMetrics>(`
return chQuery<
Omit<IProfileMetrics, 'lastSeen' | 'firstSeen'> & {
lastSeen: string;
firstSeen: string;
}
>(`
WITH lastSeen AS (
SELECT max(created_at) as lastSeen FROM ${TABLE_NAMES.events} WHERE profile_id = ${sqlstring.escape(profileId)} AND project_id = ${sqlstring.escape(projectId)}
),
@@ -84,7 +90,15 @@ export function getProfileMetrics(profileId: string, projectId: string) {
(SELECT avgEventsPerSession FROM avgEventsPerSession) as avgEventsPerSession,
(SELECT conversionEvents FROM conversionEvents) as conversionEvents,
(SELECT avgTimeBetweenSessions FROM avgTimeBetweenSessions) as avgTimeBetweenSessions
`).then((data) => data[0]!);
`)
.then((data) => data[0]!)
.then((data) => {
return {
...data,
lastSeen: convertClickhouseDateToJs(data.lastSeen),
firstSeen: convertClickhouseDateToJs(data.firstSeen),
};
});
}
export async function getProfileById(id: string, projectId: string) {
@@ -259,7 +273,7 @@ export function transformProfile({
lastName: last_name,
isExternal: profile.is_external,
properties: toObject(profile.properties),
createdAt: new Date(created_at),
createdAt: convertClickhouseDateToJs(created_at),
projectId: profile.project_id,
id: profile.id,
email: profile.email,

38
packages/db/test.ts
View File

@@ -1,38 +0,0 @@
import { conversionService } from './src/services/conversion.service';
// 68/37
async function main() {
const conversion = await conversionService.getConversion({
projectId: 'kiddokitchen-app',
startDate: '2025-02-01',
endDate: '2025-03-01',
funnelGroup: 'session_id',
breakdowns: [
{
name: 'os',
},
],
interval: 'day',
events: [
{
segment: 'event',
name: 'screen_view',
filters: [
{
name: 'path',
operator: 'is',
value: ['Start'],
},
],
},
{
segment: 'event',
name: 'sign_up',
filters: [],
},
],
});
console.dir(conversion, { depth: null });
}
main();

12
packages/trpc/src/routers/chart.ts
View File

@@ -322,9 +322,9 @@ export const chartRouter = createTRPCRouter({
const previousPeriod = getChartPrevStartEndDate(currentPeriod);
const [current, previous] = await Promise.all([
funnelService.getFunnel({ ...input, ...currentPeriod }),
funnelService.getFunnel({ ...input, ...currentPeriod, timezone }),
input.previous
? funnelService.getFunnel({ ...input, ...previousPeriod })
? funnelService.getFunnel({ ...input, ...previousPeriod, timezone })
: Promise.resolve(null),
]);
@@ -340,9 +340,13 @@ export const chartRouter = createTRPCRouter({
const previousPeriod = getChartPrevStartEndDate(currentPeriod);
const [current, previous] = await Promise.all([
conversionService.getConversion({ ...input, ...currentPeriod }),
conversionService.getConversion({ ...input, ...currentPeriod, timezone }),
input.previous
? conversionService.getConversion({ ...input, ...previousPeriod })
? conversionService.getConversion({
...input,
...previousPeriod,
timezone,
})
: Promise.resolve(null),
]);

10
pnpm-lock.yaml generated
View File

@@ -767,6 +767,9 @@ importers:
'@types/react-dom':
specifier: 'catalog:'
version: 19.1.8(@types/react@19.1.11)
'@types/react-grid-layout':
specifier: ^1.3.5
version: 1.3.5
'@types/react-simple-maps':
specifier: ^3.0.4
version: 3.0.4
@@ -8617,6 +8620,9 @@ packages:
peerDependencies:
'@types/react': ^19.0.0
'@types/react-grid-layout@1.3.5':
resolution: {integrity: sha512-WH/po1gcEcoR6y857yAnPGug+ZhkF4PaTUxgAbwfeSH/QOgVSakKHBXoPGad/sEznmkiaK3pqHk+etdWisoeBQ==}
'@types/react-simple-maps@3.0.4':
resolution: {integrity: sha512-U9qnX0wVhxldrTpsase44fIoLpyO1OT/hgNMRoJTixj1qjpMRdSRIfih93mR3D/Tss/8CmM7dPwKMjtaGkDpmw==}
@@ -24161,6 +24167,10 @@ snapshots:
dependencies:
'@types/react': 19.1.11
'@types/react-grid-layout@1.3.5':
dependencies:
'@types/react': 19.1.11
'@types/react-simple-maps@3.0.4':
dependencies:
'@types/d3-geo': 2.0.7