Compare commits
2 Commits
f295e86fc2
...
8a4f6d31b8
| Author | SHA1 | Date | |
|---|---|---|---|
|
8a4f6d31b8 | ||
|
|
804b0f0aad |
@@ -74,6 +74,7 @@
|
||||
|
||||
/* Sidebar moderne avec glassmorphism très prononcé */
|
||||
--sidebar: oklch(1 0 0 / 0.5);
|
||||
--sidebar-opaque: oklch(1 0 0);
|
||||
--sidebar-foreground: oklch(0.2 0.015 280);
|
||||
--sidebar-primary: oklch(0.6 0.25 270);
|
||||
--sidebar-primary-foreground: oklch(0.99 0 0);
|
||||
@@ -157,6 +158,7 @@
|
||||
|
||||
/* Sidebar avec profondeur distincte */
|
||||
--sidebar: oklch(0.1 0.01 260);
|
||||
--sidebar-opaque: oklch(0.1 0.01 260);
|
||||
--sidebar-foreground: oklch(0.9 0.005 260);
|
||||
--sidebar-primary: oklch(0.72 0.19 220);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.008 260);
|
||||
@@ -207,6 +209,7 @@
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-opaque: var(--sidebar-opaque);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
@@ -378,6 +381,29 @@
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Forcer l'opacité sur les wrappers Radix Portal */
|
||||
[data-radix-portal],
|
||||
[data-radix-portal] > *,
|
||||
[data-radix-popper-content-wrapper],
|
||||
[data-radix-popper-content-wrapper] > * {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Forcer l'opacité sur les tooltips Recharts */
|
||||
.recharts-tooltip-wrapper,
|
||||
.recharts-tooltip-wrapper > *,
|
||||
.recharts-tooltip-wrapper > div,
|
||||
.recharts-tooltip-wrapper > div > *,
|
||||
.recharts-tooltip-cursor {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Forcer l'opacité et le background opaque sur le contenu du tooltip */
|
||||
.recharts-tooltip-wrapper > div {
|
||||
background-color: var(--background) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Glassmorphism effect très prononcé */
|
||||
.glass {
|
||||
background: var(--card);
|
||||
|
||||
@@ -168,7 +168,8 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent
|
||||
side="left"
|
||||
className="w-64 p-0 bg-sidebar text-sidebar-foreground border-sidebar-border"
|
||||
className="w-64 p-0 text-sidebar-foreground border-sidebar-border"
|
||||
style={{ backgroundColor: 'var(--sidebar-opaque)' }}
|
||||
>
|
||||
<SheetTitle className="sr-only">Navigation</SheetTitle>
|
||||
<div className="flex flex-col h-full">
|
||||
|
||||
@@ -166,11 +166,67 @@ export function CategoryTrendChart({
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) => formatCurrency(value)}
|
||||
contentStyle={{
|
||||
backgroundColor: "var(--card)",
|
||||
content={({ active, payload, label }) => {
|
||||
if (!active || !payload?.length) return null;
|
||||
|
||||
// Filtrer seulement les catégories qui ont une valeur
|
||||
const entriesWithValue = payload.filter(
|
||||
(entry) => entry.value !== undefined && entry.value !== null && Number(entry.value) !== 0
|
||||
);
|
||||
|
||||
if (entriesWithValue.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="px-2.5 py-2 rounded-lg shadow-lg"
|
||||
style={{
|
||||
backgroundColor: "var(--background)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
opacity: 1,
|
||||
}}
|
||||
>
|
||||
<div className="text-xs font-medium text-foreground mb-1.5 pb-1 border-b border-border/50">
|
||||
{label}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{entriesWithValue.map((entry, index) => {
|
||||
const categoryId = entry.dataKey as string;
|
||||
const categoryInfo = getCategoryInfo(categoryId);
|
||||
const categoryName = getCategoryName(categoryId);
|
||||
const value = entry.value as number;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`tooltip-${categoryId}-${index}`}
|
||||
className="flex items-center gap-1.5"
|
||||
>
|
||||
{categoryInfo ? (
|
||||
<CategoryIcon
|
||||
icon={categoryInfo.icon}
|
||||
color={categoryInfo.color}
|
||||
size={12}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="w-3 h-3 rounded-full shrink-0"
|
||||
style={{ backgroundColor: "#94a3b8" }}
|
||||
/>
|
||||
)}
|
||||
<span className="text-xs text-foreground flex-1 min-w-0 truncate">
|
||||
{categoryName}
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-foreground tabular-nums whitespace-nowrap">
|
||||
{formatCurrency(value)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
wrapperStyle={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
@@ -179,7 +235,8 @@ export function CategoryTrendChart({
|
||||
const allCategoryIds = Array.from(categoryTotals.keys());
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-2">
|
||||
<div className="max-h-[60px] overflow-y-auto overflow-x-hidden pr-2 mt-2">
|
||||
<div className="flex flex-wrap justify-center gap-x-4 gap-y-1">
|
||||
{allCategoryIds.map((categoryId) => {
|
||||
const categoryInfo = getCategoryInfo(categoryId);
|
||||
const categoryName = getCategoryName(categoryId);
|
||||
@@ -234,6 +291,7 @@ export function CategoryTrendChart({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
@@ -259,6 +317,7 @@ export function CategoryTrendChart({
|
||||
strokeWidth={isSelected ? 2 : 1}
|
||||
strokeOpacity={isSelected ? 1 : 0.3}
|
||||
dot={false}
|
||||
connectNulls={true}
|
||||
hide={!isSelected && selectedCategories.length > 0}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user