diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json index 577258b3..372d9b18 100644 --- a/apps/dashboard/package.json +++ b/apps/dashboard/package.json @@ -81,7 +81,7 @@ "lodash.isequal": "^4.5.0", "lodash.throttle": "^4.1.1", "lottie-react": "^2.4.0", - "lucide-react": "^0.451.0", + "lucide-react": "^0.513.0", "mathjs": "^12.3.2", "mitt": "^3.0.1", "next": "14.2.1", diff --git a/apps/dashboard/src/components/report/ReportSegment.tsx b/apps/dashboard/src/components/report/ReportSegment.tsx new file mode 100644 index 00000000..e655bf8b --- /dev/null +++ b/apps/dashboard/src/components/report/ReportSegment.tsx @@ -0,0 +1,92 @@ +import { + ActivityIcon, + ClockIcon, + EqualApproximatelyIcon, + type LucideIcon, + SigmaIcon, + TrendingDownIcon, + TrendingUpIcon, + UserCheck2Icon, + UserCheckIcon, + UsersIcon, +} from 'lucide-react'; + +import { chartSegments } from '@openpanel/constants'; +import { type IChartEventSegment, mapKeys } from '@openpanel/validation'; + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { cn } from '@/utils/cn'; +import { Button } from '../ui/button'; + +interface ReportChartTypeProps { + className?: string; + value: IChartEventSegment; + onChange: (segment: IChartEventSegment) => void; +} +export function ReportSegment({ + className, + value, + onChange, +}: ReportChartTypeProps) { + const items = mapKeys(chartSegments).map((key) => ({ + label: chartSegments[key], + value: key, + })); + + const Icons: Record = { + event: ActivityIcon, + user: UsersIcon, + session: ClockIcon, + user_average: UserCheck2Icon, + one_event_per_user: UserCheckIcon, + property_sum: SigmaIcon, + property_average: EqualApproximatelyIcon, + property_max: TrendingUpIcon, + property_min: TrendingDownIcon, + }; + + return ( + + + + + + Available charts + + + + {items.map((item) => { + const Icon = Icons[item.value]; + return ( + onChange(item.value)} + className="group" + > + {item.label} + + + + + ); + })} + + + + ); +} diff --git a/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx b/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx index d98047ea..362c3362 100644 --- a/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx +++ b/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx @@ -3,7 +3,6 @@ import { ColorSquare } from '@/components/color-square'; import { Combobox } from '@/components/ui/combobox'; import { ComboboxAdvanced } from '@/components/ui/combobox-advanced'; -import { DropdownMenuComposed } from '@/components/ui/dropdown-menu'; import { Input } from '@/components/ui/input'; import { useAppParams } from '@/hooks/useAppParams'; import { useDebounceFn } from '@/hooks/useDebounceFn'; @@ -28,7 +27,8 @@ import { CSS } from '@dnd-kit/utilities'; import { shortId } from '@openpanel/common'; import { alphabetIds } from '@openpanel/constants'; import type { IChartEvent } from '@openpanel/validation'; -import { FilterIcon, GanttChartIcon, HandIcon, Users } from 'lucide-react'; +import { FilterIcon, GanttChartIcon, HandIcon } from 'lucide-react'; +import { ReportSegment } from '../ReportSegment'; import { addEvent, changeEvent, @@ -82,7 +82,8 @@ function SortableEvent({ {(showSegment || showAddFilter) && (
{showSegment && ( - { dispatch( changeEvent({ @@ -91,73 +92,7 @@ function SortableEvent({ }), ); }} - items={[ - { - value: 'event', - label: 'All events', - }, - { - value: 'user', - label: 'Unique users', - }, - { - value: 'session', - label: 'Unique sessions', - }, - { - value: 'user_average', - label: 'Average event per user', - }, - { - value: 'one_event_per_user', - label: 'One event per user', - }, - { - value: 'property_sum', - label: 'Sum of property', - }, - { - value: 'property_average', - label: 'Average of property', - }, - ]} - label="Segment" - > - - + /> )} {showAddFilter && ( & { previousIndicatorInverted?: boolean; }; export type IChartEvent = z.infer; +export type IChartEventSegment = z.infer; export type IChartEventFilter = IChartEvent['filters'][number]; export type IChartEventFilterValue = IChartEvent['filters'][number]['value'][number]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d02df427..5265b108 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -413,8 +413,8 @@ importers: specifier: ^2.4.0 version: 2.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) lucide-react: - specifier: ^0.451.0 - version: 0.451.0(react@18.2.0) + specifier: ^0.513.0 + version: 0.513.0(react@18.2.0) mathjs: specifier: ^12.3.2 version: 12.3.2 @@ -1072,40 +1072,6 @@ importers: specifier: ^5.2.2 version: 5.6.3 - packages/fire: - dependencies: - '@faker-js/faker': - specifier: ^9.0.1 - version: 9.0.1 - '@openpanel/common': - specifier: workspace:* - version: link:../common - '@openpanel/db': - specifier: workspace:* - version: link:../db - csv-parse: - specifier: ^5.6.0 - version: 5.6.0 - date-fns: - specifier: ^3.3.1 - version: 3.3.1 - devDependencies: - '@openpanel/tsconfig': - specifier: workspace:* - version: link:../../tooling/typescript - '@openpanel/validation': - specifier: workspace:* - version: link:../validation - '@types/node': - specifier: 20.14.8 - version: 20.14.8 - tsup: - specifier: ^7.2.0 - version: 7.3.0(postcss@8.5.3)(typescript@5.6.3) - typescript: - specifier: ^5.2.2 - version: 5.6.3 - packages/integrations: dependencies: '@slack/bolt': @@ -7526,9 +7492,6 @@ packages: csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} - csv-parse@5.6.0: - resolution: {integrity: sha512-l3nz3euub2QMg5ouu5U09Ew9Wf6/wQ8I++ch1loQ0ljmzhmfZYrH9fflS22i/PQEvsPvxCwxgz5q7UB8K1JO4Q==} - d3-array@2.12.1: resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} @@ -9630,16 +9593,16 @@ packages: resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} engines: {node: '>=10'} - lucide-react@0.451.0: - resolution: {integrity: sha512-OwQ3uljZLp2cerj8sboy5rnhtGTCl9UCJIhT1J85/yOuGVlEH+xaUPR7tvNdddPvmV5M5VLdr7cQuWE3hzA4jw==} - peerDependencies: - react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc - lucide-react@0.454.0: resolution: {integrity: sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==} peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc + lucide-react@0.513.0: + resolution: {integrity: sha512-CJZKq2g8Y8yN4Aq002GahSXbG2JpFv9kXwyiOAMvUBv7pxeOFHUWKB0mO7MiY4ZVFCV4aNjv2BJFq/z3DgKPQg==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + luxon@3.4.4: resolution: {integrity: sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==} engines: {node: '>=12'} @@ -19949,8 +19912,6 @@ snapshots: csstype@3.1.3: {} - csv-parse@5.6.0: {} - d3-array@2.12.1: dependencies: internmap: 1.0.1 @@ -22559,14 +22520,14 @@ snapshots: dependencies: yallist: 4.0.0 - lucide-react@0.451.0(react@18.2.0): - dependencies: - react: 18.2.0 - lucide-react@0.454.0(react@18.3.1): dependencies: react: 18.3.1 + lucide-react@0.513.0(react@18.2.0): + dependencies: + react: 18.2.0 + luxon@3.4.4: {} luxon@3.6.1: {}