@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/waka-charts/index.ts

@@ -0,0 +1,90 @@
+/**
+ * WakaCharts - Composants de visualisation de données
+ *
+ * @module waka-charts
+ * @description
+ * Composants de graphiques basés sur Recharts avec support de :
+ * - Graphiques à barres, lignes, aires, camembert
+ * - Sparklines et mini-graphiques
+ * - Intégration DataTable
+ * - Thème CSS variables
+ * - Chargement dynamique (peer dependency optionnel)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   WakaBarChart,
+ *   WakaLineChart,
+ *   WakaPieChart,
+ *   WakaSparkline,
+ * } from "@wakastellar/ui"
+ *
+ * // Graphique à barres
+ * <WakaBarChart
+ *   data={[
+ *     { name: "Jan", value: 100 },
+ *     { name: "Feb", value: 150 },
+ *   ]}
+ *   variant="gradient"
+ *   animation
+ *   tooltip
+ * />
+ *
+ * // Sparkline dans du texte
+ * <p>Ventes: <WakaSparkline data={[10, 15, 8, 20, 25]} /></p>
+ * ```
+ */
+
+// Composants principaux
+export { WakaChart } from "./WakaChart"
+export type { WakaChartProps } from "./WakaChart"
+
+export { WakaBarChart } from "./WakaBarChart"
+export type { WakaBarChartProps } from "./WakaBarChart"
+
+export { WakaLineChart } from "./WakaLineChart"
+export type { WakaLineChartProps } from "./WakaLineChart"
+
+export { WakaAreaChart } from "./WakaAreaChart"
+export type { WakaAreaChartProps } from "./WakaAreaChart"
+
+export { WakaPieChart } from "./WakaPieChart"
+export type { WakaPieChartProps } from "./WakaPieChart"
+
+export { WakaSparkline } from "./WakaSparkline"
+export type { WakaSparklineProps } from "./WakaSparkline"
+
+export { WakaMiniChart } from "./WakaMiniChart"
+export type { WakaMiniChartProps } from "./WakaMiniChart"
+
+// Hooks
+export { useRechartsLoader } from "./hooks/useRechartsLoader"
+export type { UseRechartsLoaderResult, RechartsComponents } from "./hooks/useRechartsLoader"
+
+export { useChartTheme } from "./hooks/useChartTheme"
+export type { UseChartThemeResult } from "./hooks/useChartTheme"
+
+// DataTable helpers
+export { createChartColumn, sparklineTemplate } from "./dataTableHelpers"
+
+// Types
+export type {
+  ChartDataPoint,
+  ChartSeries,
+  ChartVariant,
+  ChartSize,
+  ChartTheme,
+  ChartTooltipConfig,
+  ChartLegendConfig,
+  ChartAxisConfig,
+  BaseChartProps,
+  BarChartProps,
+  LineChartProps,
+  AreaChartProps,
+  PieChartProps,
+  SparklineProps,
+  MiniChartProps,
+  ChartColumnConfig,
+} from "./types"
+
+export { DEFAULT_CHART_COLORS, CHART_SIZE_MAP } from "./types"

package/src/components/waka-charts/types.ts

@@ -0,0 +1,330 @@
+/**
+ * Types pour les composants de graphiques
+ * @module waka-charts/types
+ */
+
+import { CSSProperties, ReactNode } from "react"
+
+/**
+ * Point de données pour un graphique
+ */
+export interface ChartDataPoint {
+  /** Nom/label de la donnée (axe X pour barres/lignes, légende pour pie) */
+  name: string
+  /** Valeur principale */
+  value?: number
+  /** Valeurs multiples pour les séries */
+  [key: string]: string | number | undefined
+}
+
+/**
+ * Configuration d'une série de données
+ */
+export interface ChartSeries {
+  /** Clé de l'accessor dans les données */
+  dataKey: string
+  /** Label pour la légende */
+  label?: string
+  /** Couleur de la série */
+  color?: string
+  /** Type de ligne (pour line/area charts) */
+  strokeDasharray?: string
+  /** Épaisseur du trait */
+  strokeWidth?: number
+  /** Opacité de remplissage (pour area charts) */
+  fillOpacity?: number
+}
+
+/**
+ * Variantes visuelles des graphiques
+ */
+export type ChartVariant = "default" | "gradient" | "outline" | "glass"
+
+/**
+ * Tailles des graphiques
+ */
+export type ChartSize = "sm" | "md" | "lg" | "xl" | "auto"
+
+/**
+ * Configuration du thème du graphique
+ */
+export interface ChartTheme {
+  /** Couleurs principales */
+  colors?: string[]
+  /** Couleur de la grille */
+  gridColor?: string
+  /** Couleur des axes */
+  axisColor?: string
+  /** Couleur du texte */
+  textColor?: string
+  /** Couleur de fond du tooltip */
+  tooltipBackground?: string
+  /** Couleur du texte du tooltip */
+  tooltipText?: string
+  /** Couleur de la bordure du tooltip */
+  tooltipBorder?: string
+  /** Font family */
+  fontFamily?: string
+}
+
+/**
+ * Configuration du tooltip
+ */
+export interface ChartTooltipConfig {
+  /** Afficher le tooltip */
+  enabled?: boolean
+  /** Format personnalisé du tooltip */
+  formatter?: (value: number, name: string, dataPoint: ChartDataPoint) => ReactNode
+  /** Préfixe des valeurs */
+  valuePrefix?: string
+  /** Suffixe des valeurs */
+  valueSuffix?: string
+}
+
+/**
+ * Configuration de la légende
+ */
+export interface ChartLegendConfig {
+  /** Afficher la légende */
+  enabled?: boolean
+  /** Position de la légende */
+  position?: "top" | "bottom" | "left" | "right"
+  /** Alignement */
+  align?: "left" | "center" | "right"
+}
+
+/**
+ * Configuration des axes
+ */
+export interface ChartAxisConfig {
+  /** Afficher l'axe X */
+  showXAxis?: boolean
+  /** Afficher l'axe Y */
+  showYAxis?: boolean
+  /** Format de l'axe X */
+  xAxisFormatter?: (value: unknown) => string
+  /** Format de l'axe Y */
+  yAxisFormatter?: (value: unknown) => string
+  /** Unité de l'axe Y */
+  yAxisUnit?: string
+  /** Domaine de l'axe Y [min, max] */
+  yAxisDomain?: [number | "auto" | "dataMin" | "dataMax", number | "auto" | "dataMin" | "dataMax"]
+}
+
+/**
+ * Props communes à tous les graphiques
+ */
+export interface BaseChartProps {
+  /** Données du graphique */
+  data: ChartDataPoint[]
+  /** Variante visuelle */
+  variant?: ChartVariant
+  /** Taille du graphique */
+  size?: ChartSize
+  /** Hauteur personnalisée en pixels */
+  height?: number
+  /** Largeur personnalisée en pixels ou pourcentage */
+  width?: number | string
+  /** Activer les animations */
+  animation?: boolean
+  /** Durée de l'animation en ms */
+  animationDuration?: number
+  /** Afficher la grille */
+  grid?: boolean
+  /** Configuration du tooltip */
+  tooltip?: boolean | ChartTooltipConfig
+  /** Configuration de la légende */
+  legend?: boolean | ChartLegendConfig
+  /** Configuration des axes */
+  axis?: ChartAxisConfig
+  /** Thème personnalisé */
+  theme?: ChartTheme
+  /** Classes CSS additionnelles */
+  className?: string
+  /** Style inline */
+  style?: CSSProperties
+  /** Titre du graphique */
+  title?: string
+  /** Description/sous-titre */
+  description?: string
+  /** État de chargement */
+  loading?: boolean
+  /** Message d'erreur */
+  error?: string
+  /** Callback au clic sur un élément */
+  onClick?: (data: ChartDataPoint, index: number) => void
+  /** Responsive */
+  responsive?: boolean
+}
+
+/**
+ * Props pour les graphiques à barres
+ */
+export interface BarChartProps extends BaseChartProps {
+  /** Clés des données à afficher */
+  dataKeys?: string[]
+  /** Séries configurées */
+  series?: ChartSeries[]
+  /** Disposition des barres */
+  layout?: "vertical" | "horizontal"
+  /** Barres empilées */
+  stacked?: boolean
+  /** Rayon des coins */
+  radius?: number
+  /** Largeur des barres (pourcentage) */
+  barSize?: number
+  /** Écart entre les groupes de barres */
+  barGap?: number
+  /** Écart entre les catégories */
+  barCategoryGap?: number | string
+}
+
+/**
+ * Props pour les graphiques en ligne
+ */
+export interface LineChartProps extends BaseChartProps {
+  /** Clés des données à afficher */
+  dataKeys?: string[]
+  /** Séries configurées */
+  series?: ChartSeries[]
+  /** Type de courbe */
+  curve?: "linear" | "monotone" | "step" | "basis" | "natural"
+  /** Afficher les points */
+  dots?: boolean
+  /** Taille des points */
+  dotSize?: number
+  /** Points actifs (hover) */
+  activeDot?: boolean
+  /** Épaisseur des lignes */
+  strokeWidth?: number
+}
+
+/**
+ * Props pour les graphiques en aire
+ */
+export interface AreaChartProps extends LineChartProps {
+  /** Aires empilées */
+  stacked?: boolean
+  /** Opacité du remplissage */
+  fillOpacity?: number
+  /** Type de gradient */
+  gradientDirection?: "vertical" | "horizontal"
+}
+
+/**
+ * Props pour les graphiques camembert/donut
+ */
+export interface PieChartProps extends BaseChartProps {
+  /** Clé de la valeur */
+  dataKey?: string
+  /** Clé du nom/label */
+  nameKey?: string
+  /** Rayon intérieur (0 = camembert, >0 = donut) */
+  innerRadius?: number | string
+  /** Rayon extérieur */
+  outerRadius?: number | string
+  /** Angle de départ (en degrés) */
+  startAngle?: number
+  /** Angle de fin */
+  endAngle?: number
+  /** Espacement entre les segments */
+  paddingAngle?: number
+  /** Afficher les labels */
+  label?: boolean | "percent" | "value" | "name"
+  /** Position des labels */
+  labelPosition?: "inside" | "outside"
+}
+
+/**
+ * Props pour les sparklines (mini graphiques inline)
+ */
+export interface SparklineProps {
+  /** Données (valeurs simples) */
+  data: number[]
+  /** Type de sparkline */
+  type?: "line" | "bar" | "area"
+  /** Largeur */
+  width?: number
+  /** Hauteur */
+  height?: number
+  /** Couleur */
+  color?: string
+  /** Couleur de remplissage (area) */
+  fillColor?: string
+  /** Opacité du remplissage */
+  fillOpacity?: number
+  /** Afficher le min/max */
+  showMinMax?: boolean
+  /** Afficher la valeur actuelle */
+  showValue?: boolean
+  /** Classes CSS */
+  className?: string
+  /** Animation */
+  animation?: boolean
+}
+
+/**
+ * Props pour les mini-graphiques DataTable
+ */
+export interface MiniChartProps {
+  /** Données */
+  data: number[] | ChartDataPoint[]
+  /** Type de graphique */
+  type?: "line" | "bar" | "area" | "sparkline"
+  /** Largeur */
+  width?: number
+  /** Hauteur */
+  height?: number
+  /** Couleur principale */
+  color?: string
+  /** Afficher la tendance (up/down) */
+  showTrend?: boolean
+  /** Format de la valeur */
+  valueFormatter?: (value: number) => string
+  /** Classes CSS */
+  className?: string
+}
+
+/**
+ * Configuration pour créer une colonne chart dans DataTable
+ */
+export interface ChartColumnConfig<TData> {
+  /** Clé d'accès aux données */
+  accessorKey: keyof TData
+  /** En-tête de colonne */
+  header?: string
+  /** Type de graphique */
+  chartType?: "sparkline" | "bar" | "line" | "area"
+  /** Largeur de la colonne */
+  width?: number
+  /** Hauteur du graphique */
+  height?: number
+  /** Couleur */
+  color?: string
+  /** Afficher la valeur */
+  showValue?: boolean
+  /** Format de la valeur */
+  valueFormatter?: (value: number) => string
+}
+
+/**
+ * Couleurs par défaut pour les graphiques
+ */
+export const DEFAULT_CHART_COLORS = [
+  "hsl(var(--chart-1))",
+  "hsl(var(--chart-2))",
+  "hsl(var(--chart-3))",
+  "hsl(var(--chart-4))",
+  "hsl(var(--chart-5))",
+]
+
+/**
+ * Tailles prédéfinies
+ */
+export const CHART_SIZE_MAP: Record<ChartSize, { width: number | string; height: number }> = {
+  sm: { width: "100%", height: 150 },
+  md: { width: "100%", height: 250 },
+  lg: { width: "100%", height: 350 },
+  xl: { width: "100%", height: 450 },
+  auto: { width: "100%", height: 300 },
+}