f06cdbdfc6
**TLDR** Refactor WebhoonAnalytics Graph to a more abstract version AnalyticsGraph (in analytics module). Thus enabling the components to be used on different instances (ex: new endpoint, new kind of graph). **In order to test:** 1. Set ANALYTICS_ENABLED to true 2. Set TINYBIRD_JWT_TOKEN to the ADMIN token from the workspace twenty_analytics_playground 3. Set TINYBIRD_JWT_TOKEN to the datasource or your admin token from the workspace twenty_analytics_playground 4. Create a Webhook in twenty and set wich events it needs to track 5. Run twenty-worker in order to make the webhooks work. 6. Do your tasks in order to populate the data 7. Enter to settings> webhook>your webhook and the statistics section should be displayed. --------- Co-authored-by: Félix Malfait <felix@twenty.com>
90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import { formatDateISOStringToDateTimeSimplified } from '@/localization/utils/formatDateISOStringToDateTimeSimplified';
|
|
import { UserContext } from '@/users/contexts/UserContext';
|
|
import styled from '@emotion/styled';
|
|
import { Point } from '@nivo/line';
|
|
import { ReactElement, useContext } from 'react';
|
|
|
|
const StyledTooltipContainer = styled.div`
|
|
align-items: center;
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
|
display: flex;
|
|
width: 128px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background: ${({ theme }) => theme.background.transparent.secondary};
|
|
box-shadow: ${({ theme }) => theme.boxShadow.light};
|
|
backdrop-filter: ${({ theme }) => theme.blur.medium};
|
|
`;
|
|
|
|
const StyledTooltipDateContainer = styled.div`
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
color: ${({ theme }) => theme.font.color.secondary};
|
|
padding: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledTooltipDataRow = styled.div`
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: ${({ theme }) => theme.font.color.tertiary};
|
|
padding: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledLine = styled.div`
|
|
background-color: ${({ theme }) => theme.border.color.medium};
|
|
height: 1px;
|
|
width: 100%;
|
|
`;
|
|
const StyledColorPoint = styled.div<{ color: string }>`
|
|
background-color: ${({ color }) => color};
|
|
border-radius: 50%;
|
|
height: 8px;
|
|
width: 8px;
|
|
display: inline-block;
|
|
`;
|
|
const StyledDataDefinition = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
const StyledSpan = styled.span`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
`;
|
|
type WebhookAnalyticsTooltipProps = {
|
|
point: Point;
|
|
};
|
|
export const WebhookAnalyticsTooltip = ({
|
|
point,
|
|
}: WebhookAnalyticsTooltipProps): ReactElement => {
|
|
const { timeFormat, timeZone } = useContext(UserContext);
|
|
const windowInterval = new Date(point.data.x);
|
|
const windowIntervalDate = formatDateISOStringToDateTimeSimplified(
|
|
windowInterval,
|
|
timeZone,
|
|
timeFormat,
|
|
);
|
|
return (
|
|
<StyledTooltipContainer>
|
|
<StyledTooltipDateContainer>
|
|
{windowIntervalDate}
|
|
</StyledTooltipDateContainer>
|
|
<StyledLine />
|
|
<StyledTooltipDataRow>
|
|
<StyledDataDefinition>
|
|
<StyledColorPoint color={point.serieColor} />
|
|
{String(point.serieId)}
|
|
</StyledDataDefinition>
|
|
<StyledSpan>{String(point.data.y)}</StyledSpan>
|
|
</StyledTooltipDataRow>
|
|
</StyledTooltipContainer>
|
|
);
|
|
};
|