@@ -176,7 +179,7 @@ const ChartTooltipContent = React.forwardRef<
svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+ "flex w-full [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground gap-4 px-4",
indicator === "dot" && "items-center",
)}
>
@@ -210,21 +213,26 @@ const ChartTooltipContent = React.forwardRef<
)}
-
+
{nestLabel ? tooltipLabel : null}
-
+
+ {itemConfig?.subLabel}
+
+
{itemConfig?.label || item.name}
- {item.value && (
-
- {item.value.toLocaleString()}
-
- )}
+
+ {item.value && (
+
+ {item.value.toLocaleString()}
+
+ )}
+
)}
@@ -232,6 +240,7 @@ const ChartTooltipContent = React.forwardRef<
);
})}
+ {bottomExplainer}
);
},
diff --git a/apps/dashboard/components/virtual-table.tsx b/apps/dashboard/components/virtual-table.tsx
deleted file mode 100644
index ec0cb6363e..0000000000
--- a/apps/dashboard/components/virtual-table.tsx
+++ /dev/null
@@ -1,338 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { cn, throttle } from "@/lib/utils";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { ScrollText } from "lucide-react";
-import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useScrollLock } from "usehooks-ts";
-
-export type Column
= {
- key: string;
- header: string;
- width: string;
- render: (item: T) => React.ReactNode;
-};
-
-export type VirtualTableProps = {
- data: T[];
- columns: Column[];
- isLoading?: boolean;
- rowHeight?: number;
- onRowClick?: (item: T | null) => void;
- onLoadMore?: () => void;
- emptyState?: React.ReactNode;
- loadingRows?: number;
- overscanCount?: number;
- keyExtractor: (item: T) => string | number;
- rowClassName?: (item: T) => string;
- selectedClassName?: (item: T, isSelected: boolean) => string;
- selectedItem?: T | null;
- isFetchingNextPage?: boolean;
- renderDetails?: (item: T, onClose: () => void, distanceToTop: number) => React.ReactNode;
-};
-
-const DEFAULT_ROW_HEIGHT = 26;
-const DEFAULT_LOADING_ROWS = 50;
-const DEFAULT_OVERSCAN = 5;
-const TABLE_BORDER_THICKNESS = 1;
-const THROTTLE_DELAY = 350;
-const HEADER_HEIGHT = 40; // Approximate height of the header
-
-export function VirtualTable({
- data,
- columns,
- isLoading = false,
- rowHeight = DEFAULT_ROW_HEIGHT,
- onRowClick,
- onLoadMore,
- emptyState,
- loadingRows = DEFAULT_LOADING_ROWS,
- overscanCount = DEFAULT_OVERSCAN,
- keyExtractor,
- rowClassName,
- selectedClassName,
- selectedItem,
- renderDetails,
- isFetchingNextPage,
-}: VirtualTableProps) {
- const parentRef = useRef(null);
- const tableRef = useRef(null);
- const containerRef = useRef(null);
- const [tableDistanceToTop, setTableDistanceToTop] = useState(0);
- const [fixedHeight, setFixedHeight] = useState(0);
-
- // We have to lock the wrapper div at layout, otherwise causes weird scrolling issues.
- useScrollLock({
- autoLock: true,
- lockTarget:
- typeof window !== "undefined"
- ? (document.querySelector("#layout-wrapper") as HTMLElement)
- : undefined,
- });
-
- // Calculate and set fixed height on mount and resize
- useEffect(() => {
- const calculateHeight = () => {
- if (!containerRef.current) {
- return;
- }
-
- const rect = containerRef.current.getBoundingClientRect();
- const headerHeight = HEADER_HEIGHT + TABLE_BORDER_THICKNESS;
- const availableHeight = window.innerHeight - rect.top - headerHeight;
-
- setFixedHeight(Math.max(availableHeight, 0));
- };
-
- calculateHeight();
-
- const resizeObserver = new ResizeObserver(calculateHeight);
- window.addEventListener("resize", calculateHeight);
-
- if (containerRef.current) {
- resizeObserver.observe(containerRef.current);
- }
-
- return () => {
- resizeObserver.disconnect();
- window.removeEventListener("resize", calculateHeight);
- };
- }, []);
-
- // biome-ignore lint/correctness/useExhaustiveDependencies: No need to add more deps
- const throttledLoadMore = useCallback(
- throttle(
- () => {
- if (onLoadMore) {
- onLoadMore();
- }
- },
- THROTTLE_DELAY,
- { leading: true, trailing: false },
- ),
- [onLoadMore],
- );
-
- useEffect(() => {
- return () => {
- throttledLoadMore.cancel();
- };
- }, [throttledLoadMore]);
-
- const virtualizer = useVirtualizer({
- count: isLoading ? loadingRows : data.length,
- getScrollElement: () => parentRef.current,
- estimateSize: () => rowHeight,
- overscan: overscanCount,
- onChange: (instance) => {
- const lastItem = instance.getVirtualItems().at(-1);
- if (!lastItem || !onLoadMore) {
- return;
- }
-
- const scrollElement = instance.scrollElement;
- if (!scrollElement) {
- return;
- }
-
- const scrollOffset = scrollElement.scrollTop + scrollElement.clientHeight;
- const scrollThreshold = scrollElement.scrollHeight - rowHeight * 3;
-
- if (
- !isLoading &&
- !isFetchingNextPage &&
- lastItem.index >= data.length - 1 - instance.options.overscan &&
- scrollOffset >= scrollThreshold
- ) {
- throttledLoadMore();
- }
- },
- });
-
- const handleRowClick = (item: T) => {
- if (onRowClick) {
- onRowClick(item);
- setTableDistanceToTop(
- (tableRef.current?.getBoundingClientRect().top ?? 0) +
- window.scrollY -
- TABLE_BORDER_THICKNESS,
- );
- }
- };
-
- const LoadingRow = () => (
- col.width).join(" ") }}
- >
- {columns.map((column) => (
-
- ))}
-
col.width).join(" "),
- }}
- >
- {columns.map((column) => (
-
- ))}
-
-
-
- {emptyState || (
-
-
-
- No data available
-
-
- )}
-
-
-
-
{
- if (el) {
- //@ts-expect-error safe to bypass
- parentRef.current = el;
- //@ts-expect-error safe to bypass
- tableRef.current = el;
- }
- }}
- data-table-container="true"
- className="overflow-auto pb-10"
- style={{ height: `${fixedHeight}px` }}
- >
-
- {virtualizer.getVirtualItems().map((virtualRow) => {
- if (isLoading) {
- return (
-
-
-
- );
- }
-
- const item = data[virtualRow.index];
- if (!item) {
- return null;
- }
-
- const isSelected = selectedItem
- ? keyExtractor(selectedItem) === keyExtractor(item)
- : false;
-
- return (
-
handleRowClick(item)}
- tabIndex={virtualRow.index}
- aria-selected={isSelected}
- onKeyDown={(event) => {
- if (event.key === "Escape" && onRowClick) {
- onRowClick(null);
- }
- if (event.key === "Enter" || event.key === " ") {
- event.preventDefault();
- handleRowClick(item);
- }
- if (event.key === "ArrowDown") {
- event.preventDefault();
- const nextElement = document.querySelector(
- `[data-index="${virtualRow.index + 1}"]`,
- ) as HTMLElement;
- nextElement?.focus();
- }
- if (event.key === "ArrowUp") {
- event.preventDefault();
- const prevElement = document.querySelector(
- `[data-index="${virtualRow.index - 1}"]`,
- ) as HTMLElement;
- prevElement?.focus();
- }
- }}
- className={cn(
- "grid text-[13px] leading-[14px] mb-[1px] rounded-[5px] cursor-pointer absolute top-0 left-0 w-full hover:bg-accent-3 pl-1 group",
- rowClassName?.(item),
- selectedItem && {
- "opacity-50": !isSelected,
- "opacity-100": isSelected,
- },
- selectedClassName?.(item, isSelected),
- )}
- style={{
- gridTemplateColumns: columns.map((col) => col.width).join(" "),
- height: `${rowHeight}px`,
- top: `${virtualRow.start}px`,
- }}
- >
- {columns.map((column) => (
-
-
{column.render(item)}
-
- ))}
-
- );
- })}
-
-
- {isFetchingNextPage && (
-
- )}
-
- {selectedItem &&
- renderDetails &&
- renderDetails(selectedItem, () => onRowClick?.(null as any), tableDistanceToTop)}
-
-
+ {content || (
+
+
+
+ No data available
+
+
+ )}
+
col.width).join(" ") }}
+ >
+ {columns.map((column) => (
+
+ ))}
+
col.width).join(" "),
+ }}
+ >
+ {columns.map((column) => (
+
+ ))}
+
{
+ if (event.key === "Escape") {
+ event.preventDefault();
+ onRowClick?.(null);
+ const activeElement = document.activeElement as HTMLElement;
+ activeElement?.blur();
+ }
+
+ if (event.key === "ArrowDown" || event.key === "j") {
+ event.preventDefault();
+ const nextElement = document.querySelector(
+ `[data-index="${virtualRow.index + 1}"]`,
+ ) as HTMLElement;
+ if (nextElement) {
+ nextElement.focus();
+ nextElement.click(); // This will trigger onClick which calls handleRowClick
+ }
+ }
+ if (event.key === "ArrowUp" || event.key === "k") {
+ event.preventDefault();
+ const prevElement = document.querySelector(
+ `[data-index="${virtualRow.index - 1}"]`,
+ ) as HTMLElement;
+ if (prevElement) {
+ prevElement.focus();
+ prevElement.click(); // This will trigger onClick which calls handleRowClick
+ }
+ }
+ }}
+ ref={measureRef}
+ onClick={onClick}
+ className={cn(
+ "grid text-xs cursor-pointer absolute top-0 left-0 w-full",
+ "transition-all duration-75 ease-in-out",
+ "hover:bg-accent-3 ",
+ "group rounded-md",
+ rowClassName?.(item),
+ selectedClassName?.(item, isSelected),
+ )}
+ style={{
+ gridTemplateColumns: columns.map((col) => col.width).join(" "),
+ height: `${rowHeight}px`,
+ top: `${virtualRow.start}px`,
+ }}
+ >
+ {columns.map((column) => (
+
+ {column.render(item)}
+
+ ))}
+
+
+
+
+ {virtualizer.getVirtualItems().map((virtualRow) => {
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ const item = data[virtualRow.index];
+ if (!item) {
+ return null;
+ }
+
+ const isSelected = selectedItem
+ ? keyExtractor(selectedItem) === keyExtractor(item)
+ : false;
+
+ return (
+
handleRowClick(item)}
+ measureRef={virtualizer.measureElement}
+ onRowClick={onRowClick}
+ />
+ );
+ })}
+
+
+ {isFetchingNextPage &&
}
+
+ {selectedItem &&
+ renderDetails &&
+ renderDetails(selectedItem, () => onRowClick?.(null as any), tableDistanceToTop)}
+
+
-
-
-
-
+`}
+>
+
+
+
+
+
## Icons
These are all the icons available to import.
+
```tsx
-import { IconName } from "@unkey/icons"
+import { IconName } from "@unkey/icons";
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+