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

ability to use custom dates everywhere

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-02-26 16:40:09 +01:00
parent 94a0ac7bd0
commit 6a8656da3d
19 changed files with 254 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
View File

@@ -1,9 +1,8 @@
'use client';
import { useState } from 'react';
import { StickyBelowHeader } from '@/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header';
import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
import { LazyChart } from '@/components/report/chart/LazyChart';
import { ReportRange } from '@/components/report/ReportRange';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
@@ -18,9 +17,13 @@ import { ChevronRight, MoreHorizontal, PlusIcon, Trash } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { getDefaultIntervalByRange } from '@mixan/constants';
import {
getDefaultIntervalByDates,
getDefaultIntervalByRange,
} from '@mixan/constants';
import type { getReportsByDashboardId } from '@mixan/db';
import type { IChartRange } from '@mixan/validation';
import { OverviewReportRange } from '../../overview-sticky-header';
interface ListReportsProps {
reports: Awaited<ReturnType<typeof getReportsByDashboardId>>;
@@ -29,16 +32,12 @@ interface ListReportsProps {
export function ListReports({ reports }: ListReportsProps) {
const router = useRouter();
const params = useAppParams<{ dashboardId: string }>();
const [range, setRange] = useState<null | IChartRange>(null);
const { range, startDate, endDate } = useOverviewOptions();
return (
<>
<StickyBelowHeader className="p-4 items-center justify-between flex">
<ReportRange
placeholder="Override range"
value={range}
onChange={(value) => setRange((p) => (p === value ? null : value))}
/>
<OverviewReportRange />
<Button
icon={PlusIcon}
onClick={() => {
@@ -72,10 +71,20 @@ export function ListReports({ reports }: ListReportsProps) {
<div className="font-medium">{report.name}</div>
{chartRange !== null && (
<div className="mt-2 text-sm flex gap-2">
<span className={range !== null ? 'line-through' : ''}>
<span
className={
range !== null || (startDate && endDate)
? 'line-through'
: ''
}
>
{chartRange}
</span>
{range !== null && <span>{range}</span>}
{startDate && endDate ? (
<span>Custom dates</span>
) : (
range !== null && <span>{range}</span>
)}
</div>
)}
</div>
@@ -116,8 +125,11 @@ export function ListReports({ reports }: ListReportsProps) {
<LazyChart
{...report}
range={range ?? report.range}
startDate={startDate}
endDate={endDate}
interval={
range ? getDefaultIntervalByRange(range) : report.interval
getDefaultIntervalByDates(startDate, endDate) ||
(range ? getDefaultIntervalByRange(range) : report.interval)
}
editMode={false}
/>

15
apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx
View File

@@ -14,13 +14,16 @@ interface OverviewMetricsProps {
}
export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
const { previous, range, interval, metric, setMetric } = useOverviewOptions();
const { previous, range, interval, metric, setMetric, startDate, endDate } =
useOverviewOptions();
const [filters] = useEventQueryFilters();
const reports = [
{
id: 'Visitors',
projectId,
startDate,
endDate,
events: [
{
segment: 'user',
@@ -42,6 +45,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
{
id: 'Sessions',
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -63,6 +68,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
{
id: 'Pageviews',
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -84,6 +91,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
{
id: 'Views per session',
projectId,
startDate,
endDate,
events: [
{
segment: 'user_average',
@@ -105,6 +114,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
{
id: 'Bounce rate',
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -143,6 +154,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
{
id: 'Visit duration',
projectId,
startDate,
endDate,
events: [
{
segment: 'property_average',

32
apps/web/src/app/(app)/[organizationId]/[projectId]/overview-sticky-header.tsx
View File

@@ -2,8 +2,36 @@
import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
import { ReportRange } from '@/components/report/ReportRange';
import { endOfDay, startOfDay } from 'date-fns';
export function OverviewReportRange() {
const { range, setRange } = useOverviewOptions();
return <ReportRange value={range} onChange={(value) => setRange(value)} />;
const { range, setRange, setEndDate, setStartDate, startDate, endDate } =
useOverviewOptions();
return (
<ReportRange
range={range}
onRangeChange={(value) => {
setRange(value);
setStartDate(null);
setEndDate(null);
}}
dates={{
startDate,
endDate,
}}
onDatesChange={(val) => {
if (!val) return;
if (val.from && val.to) {
setRange(null);
setStartDate(startOfDay(val.from).toISOString());
setEndDate(endOfDay(val.to).toISOString());
} else if (val.from) {
setStartDate(startOfDay(val.from).toISOString());
} else if (val.to) {
setEndDate(endOfDay(val.to).toISOString());
}
}}
/>
);
}

1
apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx
View File

@@ -9,7 +9,6 @@ import OverviewTopEvents from '@/components/overview/overview-top-events';
import OverviewTopGeo from '@/components/overview/overview-top-geo';
import OverviewTopPages from '@/components/overview/overview-top-pages';
import OverviewTopSources from '@/components/overview/overview-top-sources';
import { Dialog } from '@/components/ui/dialog';
import { getExists } from '@/server/pageExists';
import { db } from '@mixan/db';

18
apps/web/src/app/(app)/[organizationId]/[projectId]/profiles/[profileId]/page.tsx
View File

@@ -1,10 +1,8 @@
import PageLayout from '@/app/(app)/[organizationId]/[projectId]/page-layout';
import { ListProperties } from '@/components/events/ListProperties';
import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
import { ProfileAvatar } from '@/components/profiles/ProfileAvatar';
import { ChartSwitch } from '@/components/report/chart';
import { GradientBackground } from '@/components/ui/gradient-background';
import { KeyValue } from '@/components/ui/key-value';
import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
import {
@@ -12,25 +10,21 @@ import {
eventQueryNamesFilter,
} from '@/hooks/useEventQueryFilters';
import { getExists } from '@/server/pageExists';
import { formatDateTime } from '@/utils/date';
import { getProfileName } from '@/utils/getters';
import { notFound } from 'next/navigation';
import { parseAsInteger } from 'nuqs';
import { parseAsInteger, parseAsString } from 'nuqs';
import type { GetEventListOptions } from '@mixan/db';
import {
getConversionEventNames,
getEventList,
getEventMeta,
getEventsCount,
getProfileById,
getProfilesByExternalId,
} from '@mixan/db';
import type { IChartInput } from '@mixan/validation';
import type { IChartEvent, IChartInput } from '@mixan/validation';
import { EventList } from '../../events/event-list';
import { StickyBelowHeader } from '../../layout-sticky-below-header';
import ListProfileEvents from './list-profile-events';
interface PageProps {
params: {
@@ -42,6 +36,8 @@ interface PageProps {
events?: string;
cursor?: string;
f?: string;
startDate: string;
endDate: string;
};
}
@@ -57,6 +53,8 @@ export default async function Page({
events: eventQueryNamesFilter.parse(searchParams.events ?? ''),
filters: eventQueryFiltersParser.parse(searchParams.f ?? '') ?? undefined,
};
const startDate = parseAsString.parse(searchParams.startDate);
const endDate = parseAsString.parse(searchParams.endDate);
const [profile, events, count, conversions] = await Promise.all([
getProfileById(profileId),
getEventList(eventListOptions),
@@ -65,7 +63,7 @@ export default async function Page({
getExists(organizationId, projectId),
]);
const chartSelectedEvents = [
const chartSelectedEvents: IChartEvent[] = [
{
segment: 'event',
filters: [
@@ -107,6 +105,8 @@ export default async function Page({
const profileChart: IChartInput = {
projectId,
startDate,
endDate,
chartType: 'histogram',
events: chartSelectedEvents,
breakdowns: [],

28
apps/web/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx
View File

@@ -10,6 +10,9 @@ import { ReportRange } from '@/components/report/ReportRange';
import { ReportSaveButton } from '@/components/report/ReportSaveButton';
import {
changeDateRanges,
changeDates,
changeEndDate,
changeStartDate,
ready,
reset,
setReport,
@@ -19,6 +22,7 @@ import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { useAppParams } from '@/hooks/useAppParams';
import { useDispatch, useSelector } from '@/redux';
import { endOfDay, startOfDay } from 'date-fns';
import { GanttChartSquareIcon } from 'lucide-react';
import type { IServiceReport } from '@mixan/db';
@@ -61,10 +65,30 @@ export default function ReportEditor({
<ReportChartType className="min-w-0 flex-1" />
<ReportRange
className="min-w-0 flex-1"
value={report.range}
onChange={(value) => {
range={report.range}
onRangeChange={(value) => {
dispatch(changeDateRanges(value));
}}
dates={{
startDate: report.startDate,
endDate: report.endDate,
}}
onDatesChange={(val) => {
if (!val) return;
if (val.from && val.to) {
dispatch(
changeDates({
startDate: startOfDay(val.from).toISOString(),
endDate: endOfDay(val.to).toISOString(),
})
);
} else if (val.from) {
dispatch(changeStartDate(startOfDay(val.from).toISOString()));
} else if (val.to) {
dispatch(changeEndDate(endOfDay(val.to).toISOString()));
}
}}
/>
<ReportInterval className="min-w-0 flex-1" />
<ReportLineType className="min-w-0 flex-1" />

13
apps/web/src/components/overview/overview-top-devices.tsx
View File

@@ -15,7 +15,8 @@ interface OverviewTopDevicesProps {
export default function OverviewTopDevices({
projectId,
}: OverviewTopDevicesProps) {
const { interval, range, previous } = useOverviewOptions();
const { interval, range, previous, startDate, endDate } =
useOverviewOptions();
const [filters, setFilter] = useEventQueryFilters();
const [widget, setWidget, widgets] = useOverviewWidget('tech', {
devices: {
@@ -23,6 +24,8 @@ export default function OverviewTopDevices({
btn: 'Devices',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'user',
@@ -51,6 +54,8 @@ export default function OverviewTopDevices({
btn: 'Browser',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'user',
@@ -79,6 +84,8 @@ export default function OverviewTopDevices({
btn: 'Browser Version',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'user',
@@ -107,6 +114,8 @@ export default function OverviewTopDevices({
btn: 'OS',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'user',
@@ -135,6 +144,8 @@ export default function OverviewTopDevices({
btn: 'OS Version',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'user',

5
apps/web/src/components/overview/overview-top-events.tsx
View File

@@ -15,7 +15,8 @@ interface OverviewTopEventsProps {
export default function OverviewTopEvents({
projectId,
}: OverviewTopEventsProps) {
const { interval, range, previous } = useOverviewOptions();
const { interval, range, previous, startDate, endDate } =
useOverviewOptions();
const [filters] = useEventQueryFilters();
const [widget, setWidget, widgets] = useOverviewWidget('ev', {
all: {
@@ -23,6 +24,8 @@ export default function OverviewTopEvents({
btn: 'All',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',

11
apps/web/src/components/overview/overview-top-geo.tsx
View File

@@ -13,7 +13,8 @@ interface OverviewTopGeoProps {
projectId: string;
}
export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
const { interval, range, previous } = useOverviewOptions();
const { interval, range, previous, startDate, endDate } =
useOverviewOptions();
const [filters, setFilter] = useEventQueryFilters();
const [widget, setWidget, widgets] = useOverviewWidget('geo', {
map: {
@@ -21,6 +22,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
btn: 'Map',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -49,6 +52,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
btn: 'Countries',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -77,6 +82,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
btn: 'Regions',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -105,6 +112,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
btn: 'Cities',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',

9
apps/web/src/components/overview/overview-top-pages.tsx
View File

@@ -13,7 +13,8 @@ interface OverviewTopPagesProps {
projectId: string;
}
export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
const { interval, range, previous } = useOverviewOptions();
const { interval, range, previous, startDate, endDate } =
useOverviewOptions();
const [filters, setFilter] = useEventQueryFilters();
const [widget, setWidget, widgets] = useOverviewWidget('pages', {
top: {
@@ -21,6 +22,8 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
btn: 'Top pages',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -49,6 +52,8 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
btn: 'Entries',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -77,6 +82,8 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
btn: 'Exits',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',

19
apps/web/src/components/overview/overview-top-sources.tsx
View File

@@ -15,7 +15,8 @@ interface OverviewTopSourcesProps {
export default function OverviewTopSources({
projectId,
}: OverviewTopSourcesProps) {
const { interval, range, previous } = useOverviewOptions();
const { interval, range, previous, startDate, endDate } =
useOverviewOptions();
const [filters, setFilter] = useEventQueryFilters();
const [widget, setWidget, widgets] = useOverviewWidget('sources', {
all: {
@@ -23,6 +24,8 @@ export default function OverviewTopSources({
btn: 'All',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -51,6 +54,8 @@ export default function OverviewTopSources({
btn: 'URLs',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -79,6 +84,8 @@ export default function OverviewTopSources({
btn: 'Types',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -107,6 +114,8 @@ export default function OverviewTopSources({
btn: 'Source',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -135,6 +144,8 @@ export default function OverviewTopSources({
btn: 'Medium',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -163,6 +174,8 @@ export default function OverviewTopSources({
btn: 'Campaign',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -191,6 +204,8 @@ export default function OverviewTopSources({
btn: 'Term',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
@@ -219,6 +234,8 @@ export default function OverviewTopSources({
btn: 'Content',
chart: {
projectId,
startDate,
endDate,
events: [
{
segment: 'event',

26
apps/web/src/components/overview/useOverviewOptions.ts
View File

@@ -1,11 +1,17 @@
import { useEffect } from 'react';
import {
parseAsBoolean,
parseAsInteger,
parseAsString,
parseAsStringEnum,
useQueryState,
} from 'nuqs';
import { getDefaultIntervalByRange, timeRanges } from '@mixan/constants';
import {
getDefaultIntervalByDates,
getDefaultIntervalByRange,
timeRanges,
} from '@mixan/constants';
import { mapKeys } from '@mixan/validation';
const nuqsOptions = { history: 'push' } as const;
@@ -15,13 +21,25 @@ export function useOverviewOptions() {
'compare',
parseAsBoolean.withDefault(true).withOptions(nuqsOptions)
);
const [startDate, setStartDate] = useQueryState(
'start',
parseAsString.withOptions(nuqsOptions)
);
const [endDate, setEndDate] = useQueryState(
'end',
parseAsString.withOptions(nuqsOptions)
);
const [range, setRange] = useQueryState(
'range',
parseAsStringEnum(mapKeys(timeRanges))
.withDefault('7d')
.withOptions(nuqsOptions)
);
const interval = getDefaultIntervalByRange(range);
const interval =
getDefaultIntervalByDates(startDate, endDate) ||
getDefaultIntervalByRange(range);
const [metric, setMetric] = useQueryState(
'metric',
parseAsInteger.withDefault(0).withOptions(nuqsOptions)
@@ -40,6 +58,10 @@ export function useOverviewOptions() {
setRange,
metric,
setMetric,
startDate,
setStartDate,
endDate,
setEndDate,
// Computed
interval,

65
apps/web/src/components/report/ReportRange.tsx
View File

@@ -7,48 +7,32 @@ import {
PopoverTrigger,
} from '@/components/ui/popover';
import { useBreakpoint } from '@/hooks/useBreakpoint';
import { pushModal } from '@/modals';
import { useDispatch, useSelector } from '@/redux';
import { cn } from '@/utils/cn';
import { addDays, endOfDay, format, startOfDay, subDays } from 'date-fns';
import { endOfDay, format, startOfDay } from 'date-fns';
import { CalendarIcon, ChevronsUpDownIcon } from 'lucide-react';
import type { DateRange, SelectRangeEventHandler } from 'react-day-picker';
import type { SelectRangeEventHandler } from 'react-day-picker';
import { timeRanges } from '@mixan/constants';
import type { IChartRange } from '@mixan/validation';
import type { ExtendedComboboxProps } from '../ui/combobox';
import { Combobox } from '../ui/combobox';
import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
import { changeDates, changeEndDate, changeStartDate } from './reportSlice';
export function ReportRange({
onChange,
value,
range,
onRangeChange,
onDatesChange,
dates,
className,
...props
}: ExtendedComboboxProps<IChartRange>) {
const dispatch = useDispatch();
const startDate = useSelector((state) => state.report.startDate);
const endDate = useSelector((state) => state.report.endDate);
const setDate: SelectRangeEventHandler = (val) => {
if (!val) return;
if (val.from && val.to) {
dispatch(
changeDates({
startDate: startOfDay(val.from).toISOString(),
endDate: endOfDay(val.to).toISOString(),
})
);
} else if (val.from) {
dispatch(changeStartDate(startOfDay(val.from).toISOString()));
} else if (val.to) {
dispatch(changeEndDate(endOfDay(val.to).toISOString()));
}
};
}: {
range: IChartRange;
onRangeChange: (range: IChartRange) => void;
onDatesChange: SelectRangeEventHandler;
dates: { startDate: string | null; endDate: string | null };
} & Omit<ExtendedComboboxProps<string>, 'value' | 'onChange'>) {
const { isBelowSm } = useBreakpoint('sm');
return (
@@ -63,16 +47,17 @@ export function ReportRange({
{...props}
>
<span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
{startDate ? (
endDate ? (
{dates.startDate ? (
dates.endDate ? (
<>
{format(startDate, 'LLL dd')} - {format(endDate, 'LLL dd')}
{format(dates.startDate, 'LLL dd')} -{' '}
{format(dates.endDate, 'LLL dd')}
</>
) : (
format(startDate, 'LLL dd, y')
format(dates.startDate, 'LLL dd, y')
)
) : (
<span>{value}</span>
<span>{range}</span>
)}
</span>
<ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
@@ -81,9 +66,9 @@ export function ReportRange({
<PopoverContent className="w-auto p-0" align="start">
<div className="p-4 border-b border-border">
<ToggleGroup
value={value}
value={range}
onValueChange={(value) => {
if (value) onChange(value);
if (value) onRangeChange(value as IChartRange);
}}
type="single"
variant="outline"
@@ -99,12 +84,14 @@ export function ReportRange({
<Calendar
initialFocus
mode="range"
defaultMonth={startDate ? new Date(startDate) : new Date()}
defaultMonth={
dates.startDate ? new Date(dates.startDate) : new Date()
}
selected={{
from: startDate ? new Date(startDate) : undefined,
to: endDate ? new Date(endDate) : undefined,
from: dates.startDate ? new Date(dates.startDate) : undefined,
to: dates.endDate ? new Date(dates.endDate) : undefined,
}}
onSelect={setDate}
onSelect={onDatesChange}
numberOfMonths={isBelowSm ? 1 : 2}
className="[&_table]:mx-auto [&_table]:w-auto"
/>

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

@@ -5,6 +5,7 @@ import { isSameDay, isSameMonth } from 'date-fns';
import {
alphabetIds,
getDefaultIntervalByDates,
getDefaultIntervalByRange,
isHourIntervalEnabledByRange,
isMinuteIntervalEnabledByRange,
@@ -39,8 +40,8 @@ const initialState: InitialState = {
breakdowns: [],
events: [],
range: '1m',
startDate: new Date('2024-02-24 00:00:00').toISOString(),
endDate: new Date('2024-02-24 23:59:59').toISOString(),
startDate: null,
endDate: null,
previous: false,
formula: undefined,
unit: undefined,
@@ -205,14 +206,12 @@ export const reportSlice = createSlice({
state.dirty = true;
state.startDate = action.payload;
if (state.startDate && state.endDate) {
if (isSameDay(state.startDate, state.endDate)) {
state.interval = 'hour';
} else if (isSameMonth(state.startDate, state.endDate)) {
state.interval = 'day';
} else {
state.interval = 'month';
}
const interval = getDefaultIntervalByDates(
state.startDate,
state.endDate
);
if (interval) {
state.interval = interval;
}
},
@@ -221,14 +220,12 @@ export const reportSlice = createSlice({
state.dirty = true;
state.endDate = action.payload;
if (state.startDate && state.endDate) {
if (isSameDay(state.startDate, state.endDate)) {
state.interval = 'hour';
} else if (isSameMonth(state.startDate, state.endDate)) {
state.interval = 'day';
} else {
state.interval = 'month';
}
const interval = getDefaultIntervalByDates(
state.startDate,
state.endDate
);
if (interval) {
state.interval = interval;
}
},

11
apps/web/src/components/ui/key-value.tsx
View File

@@ -1,9 +1,10 @@
import { isValidElement } from 'react';
import { cn } from '@/utils/cn';
import Link from 'next/link';
interface KeyValueProps {
name: string;
value: string | number | undefined;
value: unknown;
onClick?: () => void;
href?: string;
}
@@ -11,6 +12,10 @@ interface KeyValueProps {
export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
const clickable = href || onClick;
const Component = href ? (Link as any) : onClick ? 'button' : 'div';
if (!isValidElement(value)) {
return null;
}
return (
<Component
className={cn(
@@ -35,6 +40,10 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
export function KeyValueSubtle({ href, onClick, name, value }: KeyValueProps) {
const clickable = href || onClick;
const Component = href ? (Link as any) : onClick ? 'button' : 'div';
if (!isValidElement(value)) {
return null;
}
return (
<Component
className="group flex text-[10px] sm:text-xs gap-2 font-medium self-start min-w-0 max-w-full items-center"

18
packages/constants/index.ts
View File

@@ -1,3 +1,5 @@
import { isSameDay, isSameMonth } from 'date-fns';
export const NOT_SET_VALUE = '(not set)';
export const operators = {
@@ -100,3 +102,19 @@ export function getDefaultIntervalByRange(
}
return 'month';
}
export function getDefaultIntervalByDates(
startDate: string | null,
endDate: string | null
): null | keyof typeof intervals {
if (startDate && endDate) {
if (isSameDay(startDate, endDate)) {
return 'hour';
} else if (isSameMonth(startDate, endDate)) {
return 'day';
}
return 'month';
}
return null;
}

1
packages/constants/package.json
View File

@@ -11,6 +11,7 @@
"@mixan/eslint-config": "workspace:*",
"@mixan/prettier-config": "workspace:*",
"@mixan/tsconfig": "workspace:*",
"date-fns": "^3.3.1",
"eslint": "^8.48.0",
"prettier": "^3.0.3",
"prisma": "^5.1.1",

2
packages/db/clickhouse_tables.sql
View File

@@ -40,7 +40,7 @@ CREATE TABLE openpanel.events_bots (
ORDER BY
(project_id, created_at) SETTINGS index_granularity = 8192;
CREATE TABLE profiles (
CREATE TABLE openpanel.profiles (
`id` String,
`external_id` String,
`first_name` String,

4
pnpm-lock.yaml generated
View File

@@ -716,6 +716,9 @@ importers:
'@mixan/tsconfig':
specifier: workspace:*
version: link:../../tooling/typescript
date-fns:
specifier: ^3.3.1
version: 3.3.1
eslint:
specifier: ^8.48.0
version: 8.56.0
@@ -7947,7 +7950,6 @@ packages:
/date-fns@3.3.1:
resolution: {integrity: sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==}
dev: false
/dayjs@1.11.10:
resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}