Bar List

1import type * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5interface BarListItemBase {
6  color?: string;
7  href?: string;
8  icon?: React.ComponentType<{ className?: string }>;
9  key?: string;
10  name: string;
11  target?: React.HTMLAttributeAnchorTarget;
12  value: number;
13}
14 
15interface BarListProps<
16  T extends object = Record<string, never>,
17> extends React.ComponentProps<"div"> {
18  color?: string;
19  data?: (T & BarListItemBase)[];
20  labelFormatter?: (label: string) => React.ReactNode;
21  showAnimation?: boolean;
22  sortOrder?: "ascending" | "descending";
23  valueFormatter?: (value: number) => React.ReactNode;
24}
25 
26const EMPTY_BAR_LIST_DATA: never[] = [];
27 
28const defaultValueFormatter = (value: number): string => value.toLocaleString();
29 
30const defaultLabelFormatter = (label: string): string => label;
31 
32const BarList = <T extends object = Record<string, never>>({
33  className,
34  color = "hsl(var(--chart-1))",
35  data = EMPTY_BAR_LIST_DATA,
36  labelFormatter = defaultLabelFormatter,
37  showAnimation = false,
38  sortOrder = "descending",
39  valueFormatter = defaultValueFormatter,
40  ...props
41}: BarListProps<T>) => {
42  const sortedData = [...data].toSorted((a, b) =>
43    sortOrder === "ascending" ? a.value - b.value : b.value - a.value,
44  );
45 
46  const maxValue = Math.max(0, ...sortedData.map((item) => item.value));
47 
48  const widths = sortedData.map((item) => {
49    if (item.value === 0 || maxValue === 0) {
50      return 0;
51    }
52 
53    return Math.max((item.value / maxValue) * 100, 2);
54  });
55 
56  const rowHeight = "h-8";
57 
58  return (
59    <div
60      className={cn("flex justify-between space-x-6", className)}
61      data-slot="bar-list"
62      data-sort={sortOrder}
63      {...props}
64    >
65      <div className="relative w-full">
66        {sortedData.map((item, index) => {
67          const Icon = item.icon;
68 
69          return (
70            <div
71              className="group flex w-full items-center py-1"
72              data-slot="bar-list-row"
73              key={item.key ?? item.name}
74            >
75              <div
76                className={cn("relative flex items-center rounded-sm transition-all", rowHeight, {
77                  "duration-500": showAnimation,
78                  "mb-0": index === sortedData.length - 1,
79                })}
80                style={{
81                  transition: showAnimation ? "all 1s" : undefined,
82                  width: `${widths[index]}%`,
83                }}
84              >
85                <div
86// … truncated