React components to build charts and dashboardsReact components to build dashboards

// Tremor DonutChart [v0.0.0]
import React from "react"import {  Pie,  PieChart as ReChartsDonutChart,  ResponsiveContainer,  Sector,  Tooltip,} from "recharts"
import {  AvailableChartColors,  AvailableChartColorsKeys,  constructCategoryColors,  getColorClassName,} from "@/lib/chartUtils"import { cx } from "@/lib/utils"
const sumNumericArray = (arr: number[]): number =>  arr.reduce((sum, num) => sum + num, 0)
const parseData = (  data: Record<string, any>[],  categoryColors: Map<string, AvailableChartColorsKeys>,  category: string,) =>  data.map((dataPoint) => ({    ...dataPoint,    color: categoryColors.get(dataPoint[category]) || AvailableChartColors[0],    className: getColorClassName(      categoryColors.get(dataPoint[category]) || AvailableChartColors[0],      "fill",    ),  }))
const calculateDefaultLabel = (data: any[], valueKey: string): number =>  sumNumericArray(data.map((dataPoint) => dataPoint[valueKey]))
const parseLabelInput = (  labelInput: string | undefined,  valueFormatter: (value: number) => string,  data: any[],  valueKey: string,): string => labelInput || valueFormatter(calculateDefaultLabel(data, valueKey))
//#region Tooltip
type TooltipProps = Pick<ChartTooltipProps, "active" | "payload">
type PayloadItem = {  category: string  value: number  color: AvailableChartColorsKeys}
interface ChartTooltipProps {  active: boolean | undefined  payload: PayloadItem[]  valueFormatter: (value: number) => string}
const ChartTooltip = ({  active,  payload,  valueFormatter,}: ChartTooltipProps) => {  if (active && payload && payload.length) {    return (      <div        className={cx(          // base          "rounded-md border text-sm shadow-md",          // border color          "border-gray-200 dark:border-gray-800",          // background color          "bg-white dark:bg-gray-950",        )}      >        <div className={cx("space-y-1 px-4 py-2")}>          {payload.map(({ value, category, color }, index) => (            <div              key={`id-${index}`}              className="flex items-center justify-between space-x-8"            >              <div className="flex items-center space-x-2">                <span                  aria-hidden="true"                  className={cx(                    "size-2 shrink-0 rounded-full",                    getColorClassName(color, "bg"),                  )}                />                <p                  className={cx(                    // base                    "whitespace-nowrap text-right",                    // text col dark:text-gray-500or                    "text-gray-700 dark:text-gray-300",                  )}                >                  {category}                </p>              </div>              <p                className={cx(                  // base                  "whitespace-nowrap text-right font-medium tabular-nums",                  // text color                  "text-gray-900 dark:text-gray-50",                )}              >                {valueFormatter(value)}              </p>            </div>          ))}        </div>      </div>    )  }  return null}
const renderInactiveShape = (props: any) => {  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, className } =    props
  return (    <Sector      cx={cx}      cy={cy}      innerRadius={innerRadius}      outerRadius={outerRadius}      startAngle={startAngle}      endAngle={endAngle}      className={className}      fill=""      opacity={0.3}      style={{ outline: "none" }}    />  )}
type DonutChartVariant = "donut" | "pie"
type BaseEventProps = {  eventType: "sector"  categoryClicked: string  [key: string]: number | string}
type DonutChartEventProps = BaseEventProps | null | undefined
interface DonutChartProps extends React.HTMLAttributes<HTMLDivElement> {  data: Record<string, any>[]  category: string  value: string  colors?: AvailableChartColorsKeys[]  variant?: DonutChartVariant  valueFormatter?: (value: number) => string  label?: string  showLabel?: boolean  showTooltip?: boolean  onValueChange?: (value: DonutChartEventProps) => void  tooltipCallback?: (tooltipCallbackContent: TooltipProps) => void  customTooltip?: React.ComponentType<TooltipProps>}
const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(  (    {      data = [],      value,      category,      colors = AvailableChartColors,      variant = "donut",      valueFormatter = (value: number) => value.toString(),      label,      showLabel = false,      showTooltip = true,      onValueChange,      tooltipCallback,      customTooltip,      className,      ...other    },    forwardedRef,  ) => {    const CustomTooltip = customTooltip    const [activeIndex, setActiveIndex] = React.useState<number | undefined>(      undefined,    )    const isDonut = variant === "donut"    const parsedLabelInput = parseLabelInput(label, valueFormatter, data, value)
    const categories = Array.from(new Set(data.map((item) => item[category])))    const categoryColors = constructCategoryColors(categories, colors)
    const prevActiveRef = React.useRef<boolean | undefined>(undefined)    const prevCategoryRef = React.useRef<string | undefined>(undefined)
    const handleShapeClick = (      data: any,      index: number,      event: React.MouseEvent,    ) => {      event.stopPropagation()      if (!onValueChange) return
      if (activeIndex === index) {        setActiveIndex(undefined)        onValueChange(null)      } else {        setActiveIndex(index)        onValueChange({          eventType: "sector",          categoryClicked: data.payload[category],          ...data.payload,        })      }    }
    return (      <div ref={forwardedRef} className={cx("h-40 w-40", className)} {...other}>        <ResponsiveContainer className="size-full">          <ReChartsDonutChart            onClick={              onValueChange && activeIndex !== undefined                ? () => {                    setActiveIndex(undefined)                    onValueChange(null)                  }                : undefined            }            margin={{ top: 0, left: 0, right: 0, bottom: 0 }}          >            {showLabel && isDonut && (              <text                className="fill-gray-700 dark:fill-gray-300"                x="50%"                y="50%"                textAnchor="middle"                dominantBaseline="middle"              >                {parsedLabelInput}              </text>            )}            <Pie              className={cx(                "stroke-white dark:stroke-gray-950 [&_.recharts-pie-sector]:outline-hidden",                onValueChange ? "cursor-pointer" : "cursor-default",              )}              data={parseData(data, categoryColors, category)}              cx="50%"              cy="50%"              startAngle={90}              endAngle={-270}              innerRadius={isDonut ? "75%" : "0%"}              outerRadius="100%"              stroke=""              strokeLinejoin="round"              dataKey={value}              nameKey={category}              isAnimationActive={false}              onClick={handleShapeClick}              activeIndex={activeIndex}              inactiveShape={renderInactiveShape}              style={{ outline: "none" }}            />            {showTooltip && (              <Tooltip                wrapperStyle={{ outline: "none" }}                isAnimationActive={false}                content={({ active, payload }) => {                  const cleanPayload = payload                    ? payload.map((item: any) => ({                        category: item.payload[category],                        value: item.value,                        color: categoryColors.get(                          item.payload[category],                        ) as AvailableChartColorsKeys,                      }))                    : []
                  const payloadCategory: string = cleanPayload[0]?.category
                  if (                    tooltipCallback &&                    (active !== prevActiveRef.current ||                      payloadCategory !== prevCategoryRef.current)                  ) {                    tooltipCallback({                      active,                      payload: cleanPayload,                    })                    prevActiveRef.current = active                    prevCategoryRef.current = payloadCategory                  }
                  return showTooltip && active ? (                    CustomTooltip ? (                      <CustomTooltip active={active} payload={cleanPayload} />                    ) : (                      <ChartTooltip                        active={active}                        payload={cleanPayload}                        valueFormatter={valueFormatter}                      />                    )                  ) : null                }}              />            )}          </ReChartsDonutChart>        </ResponsiveContainer>      </div>    )  },)
DonutChart.displayName = "DonutChart"
export { DonutChart, type DonutChartEventProps, type TooltipProps }

import { DonutChart } from '@tremor/react';
export function DonutChartUsageExample() {  return (    <DonutChart      data={sales}      category="sales"      index="name"      valueFormatter={valueFormatter}      colors={['blue', 'cyan', 'indigo', 'violet', 'fuchsia']}      className="w-40"    />  );}