mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
c9337d4a41
* fix: created dashboard, widgets and dashboard widget model * fix: new user home dashboard * chore: recent projects list * chore: recent collaborators * chore: priority order change * chore: payload changes * chore: collaborator's active issue count * chore: all dashboard widgets added with services and typs * chore: centered metric for pie chart * chore: widget filters * chore: created issue filter * fix: created and assigned issues payload change * chore: created issue payload change * fix: date filter change * chore: implement filters * fix: added expansion fields * fix: changed issue structure with relation * chore: new issues response * fix: project member fix * chore: updated issue_relation structure * chore: code cleanup * chore: update issues response and added empty states * fix: button text wrap * chore: update empty state messages * fix: filters * chore: update dark mode empty states * build-error: Type check in the issue relation service * fix: issues redirection * fix: project empty state * chore: project member active check * chore: project member check in state and priority * chore: remove console logs and replace harcoded values with constants * fix: code refactoring * fix: key name changed * refactor: mapping through similar components using an array * fix: build errors --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com>
64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
// icons
|
|
import { Triangle } from "lucide-react";
|
|
// types
|
|
import { IDefaultAnalyticsResponse, TStateGroups } from "@plane/types";
|
|
// constants
|
|
import { STATE_GROUPS } from "constants/state";
|
|
|
|
type Props = {
|
|
defaultAnalytics: IDefaultAnalyticsResponse;
|
|
};
|
|
|
|
export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
|
|
<div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
|
|
<h5 className="text-xs text-red-500">DEMAND</h5>
|
|
<div>
|
|
<h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
|
|
<h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
|
|
</div>
|
|
<div className="space-y-6">
|
|
{defaultAnalytics?.open_issues_classified.map((group) => {
|
|
const percentage = ((group.state_count / defaultAnalytics.total_issues) * 100).toFixed(0);
|
|
|
|
return (
|
|
<div key={group.state_group} className="space-y-2">
|
|
<div className="flex items-center justify-between gap-2 text-xs">
|
|
<div className="flex items-center gap-1">
|
|
<span
|
|
className="h-2 w-2 rounded-full"
|
|
style={{
|
|
backgroundColor: STATE_GROUPS[group.state_group as TStateGroups].color,
|
|
}}
|
|
/>
|
|
<h6 className="capitalize">{group.state_group}</h6>
|
|
<span className="ml-1 rounded-3xl bg-custom-background-80 px-2 py-0.5 text-[0.65rem] text-custom-text-200">
|
|
{group.state_count}
|
|
</span>
|
|
</div>
|
|
<p className="text-custom-text-200">{percentage}%</p>
|
|
</div>
|
|
<div className="bar relative h-1 w-full rounded bg-custom-background-80">
|
|
<div
|
|
className="absolute left-0 top-0 h-1 rounded duration-300"
|
|
style={{
|
|
width: `${percentage}%`,
|
|
backgroundColor: STATE_GROUPS[group.state_group as TStateGroups].color,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
|
|
<p className="flex items-center gap-1 text-custom-text-200">
|
|
<Triangle className="h-4 w-4" />
|
|
<span>Estimate Demand:</span>
|
|
</p>
|
|
<p className="font-medium">
|
|
{defaultAnalytics.open_estimate_sum}/{defaultAnalytics.total_estimate_sum}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|