Ajout de visuels sur la matrice pour sélection

src/components/matrix/ViewSwitcher.jsx

@@ -0,0 +1,37 @@
+import { Button } from '@/components/ui/button'
+import {
+  Table2, Palette, ScatterChart, Share2, Grid3x3, Radar, BarChart3,
+} from 'lucide-react'
+
+const views = [
+  { id: 'table',  icon: Table2,  label: 'Tableau' },
+  { id: 'heat',   icon: Palette, label: 'Matrice thermique' },
+  { id: 'scatter', icon: ScatterChart, label: 'Nuage de points' },
+  { id: 'graph',  icon: Share2,  label: 'Graphe' },
+  { id: 'treemap', icon: Grid3x3, label: 'Treemap' },
+  { id: 'radar',  icon: Radar,   label: 'Radar' },
+  { id: 'bars',   icon: BarChart3, label: 'Barres' },
+]
+
+export function ViewSwitcher({ active, onChange }) {
+  return (
+    <div className="flex gap-1" role="group" aria-label="Mode d'affichage">
+      {views.map((v) => {
+        const Icon = v.icon
+        const isActive = active === v.id
+        return (
+          <Button
+            key={v.id}
+            variant={isActive ? 'default' : 'outline'}
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => onChange(v.id)}
+            title={v.label}
+          >
+            <Icon className="h-4 w-4" />
+          </Button>
+        )
+      })}
+    </div>
+  )
+}