ba158d5d6e
* chore: remove analytics duration filter * removed subtitle from title and date_filter from service call * chore: removed the date filter * bottom text of insight trend card * chore: changed issue manager * fix: limited items in table * fix: removed unnecessary props from data-table --------- Co-authored-by: JayashTripathy <jayashtripathy371@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
// plane package imports
|
|
import React, { useMemo } from "react";
|
|
import { IAnalyticsResponseFieldsV2 } from "@plane/types";
|
|
import { Loader } from "@plane/ui";
|
|
// components
|
|
import TrendPiece from "./trend-piece";
|
|
|
|
export type InsightCardProps = {
|
|
data?: IAnalyticsResponseFieldsV2;
|
|
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;
|