Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +02:00
Code Issues Projects Releases Wiki Activity

chore: timeline plausible tracking (#8338)

Browse Source
This commit is contained in:
David Leek 2024-10-03 07:58:58 +02:00 committed by GitHub
parent c1dde7691b
commit 9b1d9f57d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventGroup.tsx
View File

@ -3,6 +3,7 @@ import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
import { EventTimelineEventTooltip } from './EventTimelineEventTooltip/EventTimelineEventTooltip'; import { EventTimelineEventTooltip } from './EventTimelineEventTooltip/EventTimelineEventTooltip';
import type { TimelineEventGroup } from '../EventTimeline'; import type { TimelineEventGroup } from '../EventTimeline';
import { EventTimelineEventCircle } from './EventTimelineEventCircle'; import { EventTimelineEventCircle } from './EventTimelineEventCircle';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
const StyledEvent = styled('div', { const StyledEvent = styled('div', {
shouldForwardProp: (prop) => prop !== 'position', shouldForwardProp: (prop) => prop !== 'position',
@ -27,13 +28,17 @@ export const EventTimelineEventGroup = ({
startTime, startTime,
endTime, endTime,
}: IEventTimelineEventProps) => { }: IEventTimelineEventProps) => {
const { trackEvent } = usePlausibleTracker();
const timelineDuration = endTime - startTime; const timelineDuration = endTime - startTime;
const eventTime = group[0].timestamp; const eventTime = group[0].timestamp;
const position = `${((eventTime - startTime) / timelineDuration) * 100}%`; const position = `${((eventTime - startTime) / timelineDuration) * 100}%`;
const trackHover = () => {
trackEvent('event-timeline-event-hover');
};
return ( return (
<StyledEvent position={position}> <StyledEvent position={position} onMouseEnter={trackHover}>
<HtmlTooltip <HtmlTooltip
title={<EventTimelineEventTooltip group={group} />} title={<EventTimelineEventTooltip group={group} />}
maxWidth={350} maxWidth={350}

7
frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
View File

@ -11,6 +11,7 @@ import { useEffect, useMemo } from 'react';
import { timeSpanOptions } from '../EventTimelineProvider'; import { timeSpanOptions } from '../EventTimelineProvider';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import { useEventTimelineContext } from '../EventTimelineContext'; import { useEventTimelineContext } from '../EventTimelineContext';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { EventTimelineHeaderTip } from './EventTimelineHeaderTip'; import { EventTimelineHeaderTip } from './EventTimelineHeaderTip';
const StyledCol = styled('div')(({ theme }) => ({ const StyledCol = styled('div')(({ theme }) => ({
@ -50,6 +51,7 @@ export const EventTimelineHeader = ({
() => environments.filter(({ enabled }) => enabled), () => environments.filter(({ enabled }) => enabled),
[environments], [environments],
); );
const { trackEvent } = usePlausibleTracker();
useEffect(() => { useEffect(() => {
if (activeEnvironments.length > 0 && !environment) { if (activeEnvironments.length > 0 && !environment) {
@ -117,7 +119,10 @@ export const EventTimelineHeader = ({
<IconButton <IconButton
aria-label='close' aria-label='close'
size='small' size='small'
onClick={() => setOpen(false)} onClick={() => {
trackEvent('event-timeline-close');
setOpen(false);
}}
> >
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>

13
frontend/src/component/menu/Header/Header.tsx
View File

@ -35,6 +35,7 @@ import { useUiFlag } from 'hooks/useUiFlag';
import { CommandBar } from 'component/commandBar/CommandBar'; import { CommandBar } from 'component/commandBar/CommandBar';
import LinearScaleIcon from '@mui/icons-material/LinearScale'; import LinearScaleIcon from '@mui/icons-material/LinearScale';
import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext'; import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
const HeaderComponent = styled(AppBar)(({ theme }) => ({ const HeaderComponent = styled(AppBar)(({ theme }) => ({
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
@ -111,6 +112,7 @@ const Header = () => {
const eventTimeline = useUiFlag('eventTimeline') && !isOss(); const eventTimeline = useUiFlag('eventTimeline') && !isOss();
const { open: showTimeline, setOpen: setShowTimeline } = const { open: showTimeline, setOpen: setShowTimeline } =
useEventTimelineContext(); useEventTimelineContext();
const { trackEvent } = usePlausibleTracker();
const routes = getRoutes(); const routes = getRoutes();
const adminRoutes = useAdminRoutes(); const adminRoutes = useAdminRoutes();
@ -197,9 +199,14 @@ const Header = () => {
arrow arrow
> >
<StyledIconButton <StyledIconButton
onClick={() => onClick={() => {
setShowTimeline(!showTimeline) trackEvent(
} showTimeline
? 'event-timeline-close'
: 'event-timeline-open',
);
setShowTimeline(!showTimeline);
}}
size='large' size='large'
> >
<LinearScaleIcon /> <LinearScaleIcon />

5
frontend/src/hooks/usePlausibleTracker.ts
View File

@ -66,7 +66,10 @@ export type CustomEvents =
| 'new-in-unleash-click' | 'new-in-unleash-click'
| 'new-in-unleash-dismiss' | 'new-in-unleash-dismiss'
| 'search-opened' | 'search-opened'
| 'events-exported'; | 'events-exported'
| 'event-timeline-open'
| 'event-timeline-close'
| 'event-timeline-event-hover';
export const usePlausibleTracker = () => { export const usePlausibleTracker = () => {
const plausible = useContext(PlausibleContext); const plausible = useContext(PlausibleContext);