import React from "react"; // headless ui import { Tab } from "@headlessui/react"; // hooks import useLocalStorage from "hooks/use-local-storage"; import useIssuesView from "hooks/use-issues-view"; // components import { SingleProgressStats } from "components/core"; // ui import { Avatar } from "components/ui"; // types import { IModule, TAssigneesDistribution, TCompletionChartDistribution, TLabelsDistribution, } from "types"; // constants import { STATE_GROUP_COLORS } from "constants/state"; // types type Props = { distribution: { assignees: TAssigneesDistribution[]; completion_chart: TCompletionChartDistribution; labels: TLabelsDistribution[]; }; groupedIssues: { [key: string]: number; }; totalIssues: number; module?: IModule; roundedTab?: boolean; noBackground?: boolean; }; export const SidebarProgressStats: React.FC = ({ distribution, groupedIssues, totalIssues, module, roundedTab, noBackground, }) => { const { filters, setFilters } = useIssuesView(); const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees"); const currentValue = (tab: string | null) => { switch (tab) { case "Assignees": return 0; case "Labels": return 1; case "States": return 2; default: return 0; } }; return ( { switch (i) { case 0: return setTab("Assignees"); case 1: return setTab("Labels"); case 2: return setTab("States"); default: return setTab("Assignees"); } }} > `w-full ${ roundedTab ? "rounded-3xl border border-brand-base" : "rounded" } px-3 py-1 text-brand-base ${ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > Assignees `w-full ${ roundedTab ? "rounded-3xl border border-brand-base" : "rounded" } px-3 py-1 text-brand-base ${ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > Labels `w-full ${ roundedTab ? "rounded-3xl border border-brand-base" : "rounded" } px-3 py-1 text-brand-base ${ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > States {distribution.assignees.map((assignee, index) => { if (assignee.assignee_id) return ( {assignee.first_name} } completed={assignee.completed_issues} total={assignee.total_issues} onClick={() => { if (filters?.assignees?.includes(assignee.assignee_id ?? "")) setFilters({ assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id), }); else setFilters({ assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""], }); }} selected={filters?.assignees?.includes(assignee.assignee_id ?? "")} /> ); else return (
User
No assignee } completed={assignee.completed_issues} total={assignee.total_issues} /> ); })}
{distribution.labels.map((label, index) => ( {label.label_name ?? "No labels"} } completed={label.completed_issues} total={label.total_issues} onClick={() => { if (filters.labels?.includes(label.label_id ?? "")) setFilters({ labels: filters?.labels?.filter((l) => l !== label.label_id), }); else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] }); }} selected={filters?.labels?.includes(label.label_id ?? "")} /> ))} {Object.keys(groupedIssues).map((group, index) => ( {group} } completed={groupedIssues[group]} total={totalIssues} /> ))}
); };