57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
|
|
import { ChartViewType } from '@/hooks/use-chart-views';
|
|
import { cn } from '@/lib/utils';
|
|
import { BarChart3, Percent, TrendingUp } from 'lucide-react';
|
|
|
|
interface ChartViewToggleProps {
|
|
value: ChartViewType;
|
|
onValueChange: (value: ChartViewType) => void;
|
|
availableViews: ChartViewType[];
|
|
className?: string;
|
|
}
|
|
|
|
const viewConfig: Record<
|
|
ChartViewType,
|
|
{ icon: React.ElementType; label: string }
|
|
> = {
|
|
stacked: { icon: BarChart3, label: 'Accounts' },
|
|
mom: { icon: TrendingUp, label: 'MoM' },
|
|
mom_percent: { icon: Percent, label: 'MoM%' },
|
|
};
|
|
|
|
export function ChartViewToggle({
|
|
value,
|
|
onValueChange,
|
|
availableViews,
|
|
className,
|
|
}: ChartViewToggleProps) {
|
|
return (
|
|
<ToggleGroup
|
|
type="single"
|
|
value={value}
|
|
onValueChange={(v) => {
|
|
if (v) onValueChange(v as ChartViewType);
|
|
}}
|
|
variant="outline"
|
|
size="sm"
|
|
className={cn('', className)}
|
|
>
|
|
{availableViews.map((view) => {
|
|
const config = viewConfig[view];
|
|
const Icon = config.icon;
|
|
return (
|
|
<ToggleGroupItem
|
|
key={view}
|
|
value={view}
|
|
aria-label={config.label}
|
|
className="gap-1.5 px-2"
|
|
>
|
|
<Icon className="size-3.5" />
|
|
<span className="hidden sm:inline">{config.label}</span>
|
|
</ToggleGroupItem>
|
|
);
|
|
})}
|
|
</ToggleGroup>
|
|
);
|
|
}
|