// ui import { ProfileEmptyState, PieGraph } from "components/ui"; // image import stateGraph from "public/empty-state/state_graph.svg"; // types import { IUserProfileData, IUserStateDistribution } from "types"; // constants import { STATE_GROUP_COLORS } from "constants/state"; type Props = { stateDistribution: IUserStateDistribution[]; userProfile: IUserProfileData | undefined; }; export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, userProfile }) => { if (!userProfile) return null; return ( <div className="flex flex-col space-y-2"> <h3 className="text-lg font-medium">Issues by State</h3> <div className="flex-grow border border-custom-border-100 rounded p-7"> {userProfile.state_distribution.length > 0 ? ( <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6"> <div> <PieGraph data={ userProfile.state_distribution.map((group) => ({ id: group.state_group, label: group.state_group, value: group.state_count, color: STATE_GROUP_COLORS[group.state_group], })) ?? [] } height="250px" innerRadius={0.6} cornerRadius={5} padAngle={2} enableArcLabels arcLabelsTextColor="#000000" enableArcLinkLabels={false} activeInnerRadiusOffset={5} colors={(datum) => datum.data.color} tooltip={(datum) => ( <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 p-2 text-xs"> <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "} {datum.datum.value} </div> )} margin={{ top: 32, right: 0, bottom: 32, left: 0, }} /> </div> <div className="flex items-center"> <div className="space-y-4 w-full"> {stateDistribution.map((group) => ( <div key={group.state_group} className="flex items-center justify-between gap-2 text-xs"> <div className="flex items-center gap-1.5"> <div className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: STATE_GROUP_COLORS[group.state_group], }} /> <div className="capitalize whitespace-nowrap">{group.state_group}</div> </div> <div>{group.state_count}</div> </div> ))} </div> </div> </div> ) : ( <ProfileEmptyState title="No Data yet" description="Create issues to view the them by states in the graph for better analysis." image={stateGraph} /> )} </div> </div> ); };