Ana Sofia Marin Alexandre
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>
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { useGraphData } from '@/analytics/hooks/useGraphData';
|
|
import { analyticsGraphDataComponentState } from '@/analytics/states/analyticsGraphDataComponentState';
|
|
import { AnalyticsComponentProps as AnalyticsGraphEffectProps } from '@/analytics/types/AnalyticsComponentProps';
|
|
import { computeAnalyticsGraphDataFunction } from '@/analytics/utils/computeAnalyticsGraphDataFunction';
|
|
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
|
import { useState } from 'react';
|
|
|
|
export const AnalyticsGraphEffect = ({
|
|
recordId,
|
|
endpointName,
|
|
}: AnalyticsGraphEffectProps) => {
|
|
const setAnalyticsGraphData = useSetRecoilComponentStateV2(
|
|
analyticsGraphDataComponentState,
|
|
);
|
|
|
|
const transformDataFunction = computeAnalyticsGraphDataFunction(endpointName);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
const { fetchGraphData } = useGraphData({
|
|
recordId,
|
|
endpointName,
|
|
});
|
|
|
|
if (!isLoaded) {
|
|
fetchGraphData('7D').then((graphInput) => {
|
|
setAnalyticsGraphData(transformDataFunction(graphInput));
|
|
});
|
|
setIsLoaded(true);
|
|
}
|
|
|
|
return <></>;
|
|
};
|