mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-28 19:06:12 +01:00
chore: timeline plausible tracking (#8338)
This commit is contained in:
parent
c1dde7691b
commit
9b1d9f57d3
@ -3,6 +3,7 @@ import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
|
||||
import { EventTimelineEventTooltip } from './EventTimelineEventTooltip/EventTimelineEventTooltip';
|
||||
import type { TimelineEventGroup } from '../EventTimeline';
|
||||
import { EventTimelineEventCircle } from './EventTimelineEventCircle';
|
||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||
|
||||
const StyledEvent = styled('div', {
|
||||
shouldForwardProp: (prop) => prop !== 'position',
|
||||
@ -27,13 +28,17 @@ export const EventTimelineEventGroup = ({
|
||||
startTime,
|
||||
endTime,
|
||||
}: IEventTimelineEventProps) => {
|
||||
const { trackEvent } = usePlausibleTracker();
|
||||
const timelineDuration = endTime - startTime;
|
||||
const eventTime = group[0].timestamp;
|
||||
|
||||
const position = `${((eventTime - startTime) / timelineDuration) * 100}%`;
|
||||
const trackHover = () => {
|
||||
trackEvent('event-timeline-event-hover');
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledEvent position={position}>
|
||||
<StyledEvent position={position} onMouseEnter={trackHover}>
|
||||
<HtmlTooltip
|
||||
title={<EventTimelineEventTooltip group={group} />}
|
||||
maxWidth={350}
|
||||
|
@ -11,6 +11,7 @@ import { useEffect, useMemo } from 'react';
|
||||
import { timeSpanOptions } from '../EventTimelineProvider';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { useEventTimelineContext } from '../EventTimelineContext';
|
||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||
import { EventTimelineHeaderTip } from './EventTimelineHeaderTip';
|
||||
|
||||
const StyledCol = styled('div')(({ theme }) => ({
|
||||
@ -50,6 +51,7 @@ export const EventTimelineHeader = ({
|
||||
() => environments.filter(({ enabled }) => enabled),
|
||||
[environments],
|
||||
);
|
||||
const { trackEvent } = usePlausibleTracker();
|
||||
|
||||
useEffect(() => {
|
||||
if (activeEnvironments.length > 0 && !environment) {
|
||||
@ -117,7 +119,10 @@ export const EventTimelineHeader = ({
|
||||
<IconButton
|
||||
aria-label='close'
|
||||
size='small'
|
||||
onClick={() => setOpen(false)}
|
||||
onClick={() => {
|
||||
trackEvent('event-timeline-close');
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
|
@ -35,6 +35,7 @@ import { useUiFlag } from 'hooks/useUiFlag';
|
||||
import { CommandBar } from 'component/commandBar/CommandBar';
|
||||
import LinearScaleIcon from '@mui/icons-material/LinearScale';
|
||||
import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
|
||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||
|
||||
const HeaderComponent = styled(AppBar)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
@ -111,6 +112,7 @@ const Header = () => {
|
||||
const eventTimeline = useUiFlag('eventTimeline') && !isOss();
|
||||
const { open: showTimeline, setOpen: setShowTimeline } =
|
||||
useEventTimelineContext();
|
||||
const { trackEvent } = usePlausibleTracker();
|
||||
|
||||
const routes = getRoutes();
|
||||
const adminRoutes = useAdminRoutes();
|
||||
@ -197,9 +199,14 @@ const Header = () => {
|
||||
arrow
|
||||
>
|
||||
<StyledIconButton
|
||||
onClick={() =>
|
||||
setShowTimeline(!showTimeline)
|
||||
}
|
||||
onClick={() => {
|
||||
trackEvent(
|
||||
showTimeline
|
||||
? 'event-timeline-close'
|
||||
: 'event-timeline-open',
|
||||
);
|
||||
setShowTimeline(!showTimeline);
|
||||
}}
|
||||
size='large'
|
||||
>
|
||||
<LinearScaleIcon />
|
||||
|
@ -66,7 +66,10 @@ export type CustomEvents =
|
||||
| 'new-in-unleash-click'
|
||||
| 'new-in-unleash-dismiss'
|
||||
| 'search-opened'
|
||||
| 'events-exported';
|
||||
| 'events-exported'
|
||||
| 'event-timeline-open'
|
||||
| 'event-timeline-close'
|
||||
| 'event-timeline-event-hover';
|
||||
|
||||
export const usePlausibleTracker = () => {
|
||||
const plausible = useContext(PlausibleContext);
|
||||
|
Loading…
Reference in New Issue
Block a user