// 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 = ({ stateDistribution, userProfile }) => { if (!userProfile) return null; return (

Issues by State

{userProfile.state_distribution.length > 0 ? (
({ 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) => (
{datum.datum.label} issues: {" "} {datum.datum.value}
)} margin={{ top: 32, right: 0, bottom: 32, left: 0, }} />
{stateDistribution.map((group) => (
{group.state_group}
{group.state_count}
))}
) : ( )}
); };