( export const HR = () => (
-) +); // All base html element components export const htmlElements = { @@ -132,7 +133,7 @@ export const htmlElements = { time: LocaleDateTime, ul: UnorderedList, ...mdxTableComponents, -} +}; /** * Custom React components @@ -144,27 +145,28 @@ export const Page = ({-) +); export const Title = (props: ChildOnlyProp) => ( -) +); export const ContentContainer = (props: ComponentProps<"article">) => { return ( - ) -} + ); +}; // All custom React components export const reactComponents = { BrowseApps, ButtonLink, Card, + ClientDiversityChart, ContentContainer, Contributors, ContributorsQuizBanner, @@ -176,13 +178,14 @@ export const reactComponents = { GlossaryTooltip, InfoBanner, Page, + PieChart, QuizWidget: StandaloneQuizWidget, IssuesList, Tag, Title, WhatAreAppsStories, YouTube, -} +}; /** * All base markdown components as default export @@ -190,6 +193,6 @@ export const reactComponents = { const MdComponents = { ...htmlElements, ...reactComponents, -} +}; -export default MdComponents +export default MdComponents; diff --git a/src/components/PieChart/PieChart.tsx b/src/components/PieChart/PieChart.tsx new file mode 100644 index 00000000000..43dbcc0a526 --- /dev/null +++ b/src/components/PieChart/PieChart.tsx @@ -0,0 +1,253 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +"use client"; +import { FaArrowTrendUp } from "react-icons/fa6"; +import { + Cell, + Legend, + Pie, + PieChart as RechartsPieChart, + ResponsiveContainer, +} from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, +} from "@/components/ui/chart"; + +type PieChartDataPoint = { name: string; value: number }; + +/** + * PieChartProps defines the properties for the PieChart component. + * + * @property {PieChartDataPoint[]} data - The data to be displayed in the chart. Each object should have a `name` and `value` property. + * @property {string} [title] - The title of the chart. + * @property {string} [description] - The description of the chart. + * @property {string} [footerText] - The footer text of the chart. + * @property {string} [footerSubText] - The footer subtext of the chart. + * @property {boolean} [showPercentage=true] - Whether to show percentage values in legend and tooltips. + * @property {number} [minSlicePercentage=1] - Minimum percentage to show individual slices (smaller values grouped as "Other"). + */ +type PieChartProps = { + data: PieChartDataPoint[]; + title?: string; + description?: string; + footerText?: string; + footerSubText?: string; + showPercentage?: boolean; + minSlicePercentage?: number; +}; + +const defaultChartConfig = { + value: { + label: "Value", + color: "hsl(var(--accent-a))", + }, +} satisfies ChartConfig; + +const COLORS = [ + "hsla(var(--accent-a))", + "hsla(var(--accent-b))", + "hsla(var(--accent-c))", + "hsla(var(--accent-a-hover))", + "hsla(var(--accent-b-hover))", + "hsla(var(--accent-c-hover))", +]; + +const generateColor = (index: number): string => { + if (index < COLORS.length) { + return COLORS[index]; + } + const hue = (index * 137.508) % 360; + const saturation = 70 + (index % 2) * 15; + const lightness = 50 + (index % 3) * 8; + return `hsl(${hue}, ${saturation}%, ${lightness}%)`; +}; + +// Utility function to validate and process data +const processData = ( + data: PieChartDataPoint[], + minSlicePercentage: number = 1, +): PieChartDataPoint[] => { + const nonZeroData = data.filter((item) => item.value > 0); + + const total = nonZeroData.reduce((sum, item) => sum + item.value, 0); + + if (total === 0) return []; + + const mainItems = nonZeroData.filter( + (item) => (item.value / total) * 100 >= minSlicePercentage, + ); + const smallItems = nonZeroData.filter( + (item) => (item.value / total) * 100 < minSlicePercentage, + ); + + // Group small items into "Other" if there are any + const processedData = [...mainItems]; + if (smallItems.length > 0) { + const otherValue = smallItems.reduce((sum, item) => sum + item.value, 0); + processedData.push({ name: "Other", value: otherValue }); + } + + return processedData; +}; + +export function PieChart({ + data, + title, + description, + footerText, + footerSubText, + showPercentage = true, + minSlicePercentage = 0, +}: PieChartProps) { + const processedData = processData(data, minSlicePercentage); + + if (processedData.length === 0) { + return ( + + + ); + } + + // Calculate total for percentage display + const total = processedData.reduce((sum, item) => sum + item.value, 0); + + // Function to calculate optimal chart dimensions based on data size and screen + const getChartDimensions = () => { + const dataCount = processedData.length; + const baseHeight = + dataCount <= 4 ? 320 : Math.min(380, 280 + dataCount * 15); + + return { + height: baseHeight, + outerRadius: Math.max(50, Math.min(80, 400 / Math.max(6, dataCount))), + cx: dataCount <= 3 ? "40%" : dataCount <= 5 ? "35%" : "30%", + }; + }; + + const dimensions = getChartDimensions(); + + const legendFormatter = (value: string, legendEntry: any) => { + const payload = legendEntry.payload as unknown as PieChartDataPoint; + const percentage = ((payload.value / total) * 100).toFixed(1); + + // Dynamic label truncation based on screen size + const maxLength = window.innerWidth < 640 ? 10 : 15; + const displayName = + value.length > maxLength ? `${value.substring(0, maxLength)}...` : value; + + return ( + + {displayName} {showPercentage && `(${percentage}%)`} + + ); + }; + + // Custom tooltip content + const customTooltipContent = ({ active, payload }: any) => { + if (active && payload && payload.length) { + const data = payload[0]; + const percentage = ((data.value / total) * 100).toFixed(1); + return ( ++ {title && +{title} } + {description &&{description} } ++ +No data available
+++ ); + } + return null; + }; + + return ( +{data.name}
++ {showPercentage ? `${percentage}%` : data.value} +
++ + ); +}+ {title && + +{title} } + {description &&{description} } ++ + + {(footerText || footerSubText) && ( ++ ++ ++ ++ + + + 1 ? 2 : 0} + label={false} + stroke="#fff" + strokeWidth={1} + > + {processedData.map((_, i) => ( + ++ ))} + | + + )} ++++ {footerText && ( +++ {footerText}+ )} + {footerSubText && ( ++ + {footerSubText} ++ )} +