14d2d69120
* chore: added code split for the analytics store * chore: done some refactor * refactor: update entity keys in analytics and translations * chore: updated the translations * refactor: simplify AnalyticsStoreV2 class by removing unnecessary constructor * feat: add AnalyticsStoreV2 class and interface for enhanced analytics functionality * feat: enhance WorkItemsModal and analytics store with isEpic functionality * feat: integrate isEpic state into TotalInsights and WorkItemsModal components * refactor: remove isEpic state from WorkItemsModalMainContent component * refactor: removed old analytics components and related services * refactor: new analytics * refactor: removed all nivo chart dependencies * chore: resolved coderabbit comments * fix: update processUrl to handle custom-work-items in peek view * feat: implement CSV export functionality in InsightTable component * feat: enhance analytics service with filter parameters and improve data handling in InsightTable * feat: add new translation keys for various statuses across multiple languages * [WEB-4246] fix: enhance analytics components to include 'isEpic' parameter for improved data fetching * chore: update yarn.lock to remove deprecated @nivo packages and clean up unused dependencies
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
// plane package imports
|
|
import React, { useMemo } from "react";
|
|
import { IAnalyticsResponseFields } from "@plane/types";
|
|
import { Loader } from "@plane/ui";
|
|
// components
|
|
import TrendPiece from "./trend-piece";
|
|
|
|
export type InsightCardProps = {
|
|
data?: IAnalyticsResponseFields;
|
|
label: string;
|
|
isLoading?: boolean;
|
|
versus?: string | null;
|
|
};
|
|
|
|
const InsightCard = (props: InsightCardProps) => {
|
|
const { data, label, isLoading, versus } = props;
|
|
const { count, filter_count } = data || {};
|
|
const percentage = useMemo(() => {
|
|
if (count != null && filter_count != null) {
|
|
const result = ((count - filter_count) / count) * 100;
|
|
const isFiniteAndNotNaNOrZero = Number.isFinite(result) && !Number.isNaN(result) && result !== 0;
|
|
return isFiniteAndNotNaNOrZero ? result : null;
|
|
}
|
|
return null;
|
|
}, [count, filter_count]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="text-sm text-custom-text-300">{label}</div>
|
|
{!isLoading ? (
|
|
<div className="flex flex-col gap-1">
|
|
<div className="text-2xl font-bold text-custom-text-100">{count}</div>
|
|
{/* {percentage && (
|
|
<div className="flex gap-1 text-xs text-custom-text-300">
|
|
<TrendPiece percentage={percentage} size="xs" />
|
|
{versus && <div>vs {versus}</div>}
|
|
</div>
|
|
)} */}
|
|
</div>
|
|
) : (
|
|
<Loader.Item height="50px" width="100%" />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InsightCard;
|