Chaque tableau de bord a besoin de graphiques. Revenus dans le temps. Croissance des utilisateurs. Taux d'erreur. Entonnoirs de conversion. Les données sont déjà dans l'application -- entités, listes, agrégations -- mais les transformer en représentation visuelle nécessite traditionnellement l'import d'une bibliothèque lourde. Chart.js (200 Ko). Recharts (130 Ko). D3 (280 Ko).
La Session 039 a ajouté 25 composants de graphiques à FlinUI. Pas des wrappers autour d'une bibliothèque JavaScript de graphiques. Des composants FLIN natifs qui acceptent des données en props et rendent des visualisations basées sur SVG directement. Déclaratifs. Réactifs. Sans import. Quand les données changent, le graphique se met à jour automatiquement.
Le principe de conception : les graphiques sont des composants
flin<LineChart
data={monthly_revenue}
x="month"
y="revenue"
height={300}
/>Pas d'objets de configuration. Pas d'appels impératifs chart.update(). Pas de contexte canvas. Juste des props en entrée, visualisation en sortie.
Les composants de graphiques
LineChart, BarChart, PieChart, DonutChart, AreaChart, ScatterPlot, RadarChart, TreeMap, Histogram, BoxPlot, CandlestickChart, FunnelChart, GaugeChart, BubbleChart, WaterfallChart, Sparkline, MiniChart, ChartLegend, ChartTooltip, ChartAxis, ChartGrid, ChartAnnotation, ResponsiveChart, DashboardChart et SankeyDiagram.
Rendu SVG : pourquoi pas Canvas
FlinUI rend les graphiques en SVG, pas en Canvas. Avantages : basé sur le DOM (la réactivité de FLIN fonctionne naturellement), accessible, net à toute résolution, éléments individuels avec handlers d'événements, stylage CSS fonctionnel (incluant les transitions de mode sombre).
Vingt-cinq graphiques, zéro bibliothèque
Les composants de graphiques de FlinUI remplacent Chart.js, Recharts, D3, Victory, Nivo et toute autre bibliothèque de graphiques de l'écosystème JavaScript. Avec des composants FLIN natifs qui rendent du SVG à partir de données.
Ceci est la partie 84 de la série "How We Built FLIN".
Navigation de la série : - [83] FlinUI Complete: 365+ Components - [84] Charts and Data Visualization Components (vous êtes ici) - [85] Design Tokens and Theming System - [86] The Layout System