import * as React from "react"

import { cn } from "@/lib/utils"

type BarChartSimpleOrientation = "vertical" | "horizontal"

type BarChartSimpleDatum = {
  label: string
  value: number
}

interface BarChartSimpleProps extends React.HTMLAttributes<HTMLDivElement> {
  data: BarChartSimpleDatum[]
  orientation?: BarChartSimpleOrientation
  maxValue?: number
  showValues?: boolean
}

function BarChartSimple({
  data,
  orientation = "vertical",
  maxValue,
  showValues = true,
  className,
  ...props
}: BarChartSimpleProps) {
  const safeMax = maxValue ?? Math.max(1, ...data.map((item) => item.value))

  return (
    <div
      className={cn(
        "rounded-xl border border-border bg-card p-4",
        className
      )}
      {...props}
    >
      {orientation === "vertical" ? (
        <div className="flex items-end gap-4">
          {data.map((item) => {
            const heightPercent = Math.min(
              100,
              Math.max(0, (item.value / safeMax) * 100)
            )

            return (
              <div key={item.label} className="flex w-10 flex-col items-center gap-2">
                <div className="flex h-28 w-full items-end rounded-full bg-muted/30">
                  <div
                    className="w-full rounded-full bg-muted"
                    style={{ height: `${heightPercent}%` }}
                  />
                </div>
                <span className="text-xs text-muted-foreground">
                  {item.label}
                </span>
                {showValues ? (
                  <span className="text-xs font-medium text-foreground tabular-nums">
                    {item.value}
                  </span>
                ) : null}
              </div>
            )
          })}
        </div>
      ) : (
        <div className="space-y-3">
          {data.map((item) => {
            const widthPercent = Math.min(
              100,
              Math.max(0, (item.value / safeMax) * 100)
            )

            return (
              <div key={item.label} className="grid grid-cols-[auto,1fr,auto] items-center gap-3">
                <span className="text-xs text-muted-foreground">
                  {item.label}
                </span>
                <div className="h-2 w-full rounded-full bg-muted/30">
                  <div
                    className="h-full rounded-full bg-muted"
                    style={{ width: `${widthPercent}%` }}
                  />
                </div>
                {showValues ? (
                  <span className="text-xs font-medium text-foreground tabular-nums">
                    {item.value}
                  </span>
                ) : null}
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}

export { BarChartSimple }
export type { BarChartSimpleProps, BarChartSimpleDatum, BarChartSimpleOrientation }
Bar Chart Simple

Dependencies

Files

Installation
