@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-charts/WakaAreaChart.tsx

@@ -0,0 +1,251 @@
+"use client"
+
+/**
+ * WakaAreaChart - Graphique en aire
+ */
+
+import * as React from "react"
+import { WakaChart } from "./WakaChart"
+import { useChartTheme } from "./hooks/useChartTheme"
+import type { AreaChartProps, ChartSeries } from "./types"
+
+export interface WakaAreaChartProps extends AreaChartProps {}
+
+/**
+ * Graphique en aire avec support multi-séries, empilé, gradients, et animations
+ */
+export const WakaAreaChart = React.forwardRef<HTMLDivElement, WakaAreaChartProps>(
+  (
+    {
+      data,
+      dataKeys,
+      series,
+      variant = "default",
+      size = "md",
+      height,
+      width,
+      animation = true,
+      animationDuration = 500,
+      grid = true,
+      tooltip = true,
+      legend,
+      axis,
+      theme: customTheme,
+      className,
+      style,
+      title,
+      description,
+      loading,
+      error,
+      onClick,
+      responsive = true,
+      // Line/Area specific
+      curve = "monotone",
+      dots = false,
+      dotSize = 4,
+      activeDot = true,
+      strokeWidth = 2,
+      // Area specific
+      stacked = false,
+      fillOpacity = 0.3,
+      gradientDirection = "vertical",
+    },
+    ref
+  ) => {
+    const { theme, getColor, tooltipStyles } = useChartTheme(customTheme, variant)
+
+    // Déterminer les séries à afficher
+    const chartSeries = React.useMemo<ChartSeries[]>(() => {
+      if (series && series.length > 0) return series
+
+      if (dataKeys && dataKeys.length > 0) {
+        return dataKeys.map((key, index) => ({
+          dataKey: key,
+          label: key,
+          color: getColor(index),
+          strokeWidth,
+          fillOpacity,
+        }))
+      }
+
+      // Default: utiliser "value" si présent
+      if (data.length > 0 && "value" in data[0]) {
+        return [{ dataKey: "value", label: "Value", color: getColor(0), strokeWidth, fillOpacity }]
+      }
+
+      // Sinon, utiliser toutes les clés numériques
+      const sampleItem = data[0]
+      if (!sampleItem) return []
+
+      return Object.keys(sampleItem)
+        .filter((key) => key !== "name" && typeof sampleItem[key] === "number")
+        .map((key, index) => ({
+          dataKey: key,
+          label: key,
+          color: getColor(index),
+          strokeWidth,
+          fillOpacity,
+        }))
+    }, [series, dataKeys, data, getColor, strokeWidth, fillOpacity])
+
+    // Configuration de la légende
+    const legendConfig = React.useMemo(() => {
+      if (!legend) return null
+      if (typeof legend === "boolean") {
+        return { enabled: legend, position: "bottom" as const, align: "center" as const }
+      }
+      return legend
+    }, [legend])
+
+    // Configuration du tooltip
+    const tooltipConfig = React.useMemo(() => {
+      if (!tooltip) return null
+      if (typeof tooltip === "boolean") {
+        return { enabled: tooltip }
+      }
+      return tooltip
+    }, [tooltip])
+
+    return (
+      <WakaChart
+        ref={ref}
+        variant={variant}
+        size={size}
+        height={height}
+        width={width}
+        theme={customTheme}
+        className={className}
+        style={style}
+        title={title}
+        description={description}
+        loading={loading}
+        error={error}
+        responsive={responsive}
+      >
+        {(components) => {
+          if (!components) return null
+
+          const {
+            AreaChart,
+            Area,
+            XAxis,
+            YAxis,
+            CartesianGrid,
+            Tooltip,
+            Legend,
+          } = components
+
+          return (
+            <AreaChart data={data}>
+              {/* Gradients */}
+              <defs>
+                {chartSeries.map((s, index) => {
+                  const color = s.color || getColor(index)
+                  const gradientId = `gradient-${s.dataKey}-${index}`
+                  return (
+                    <linearGradient
+                      key={gradientId}
+                      id={gradientId}
+                      x1={gradientDirection === "horizontal" ? "0" : "0"}
+                      y1={gradientDirection === "horizontal" ? "0" : "0"}
+                      x2={gradientDirection === "horizontal" ? "1" : "0"}
+                      y2={gradientDirection === "horizontal" ? "0" : "1"}
+                    >
+                      <stop offset="5%" stopColor={color} stopOpacity={0.8} />
+                      <stop offset="95%" stopColor={color} stopOpacity={0.1} />
+                    </linearGradient>
+                  )
+                })}
+              </defs>
+
+              {grid && (
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  stroke={theme.gridColor}
+                  horizontal={true}
+                  vertical={false}
+                />
+              )}
+
+              {axis?.showXAxis !== false && (
+                <XAxis
+                  dataKey="name"
+                  axisLine={{ stroke: theme.axisColor }}
+                  tickLine={{ stroke: theme.axisColor }}
+                  tick={{ fill: theme.textColor, fontSize: 12 }}
+                  tickFormatter={axis?.xAxisFormatter}
+                />
+              )}
+
+              {axis?.showYAxis !== false && (
+                <YAxis
+                  axisLine={{ stroke: theme.axisColor }}
+                  tickLine={{ stroke: theme.axisColor }}
+                  tick={{ fill: theme.textColor, fontSize: 12 }}
+                  tickFormatter={axis?.yAxisFormatter}
+                  domain={axis?.yAxisDomain}
+                  unit={axis?.yAxisUnit}
+                />
+              )}
+
+              {tooltipConfig?.enabled !== false && tooltip && (
+                <Tooltip
+                  {...tooltipStyles}
+                  formatter={
+                    tooltipConfig && typeof tooltipConfig !== "boolean" && tooltipConfig.formatter
+                      ? (value: unknown, name: string) => {
+                          const formatted = tooltipConfig.formatter!(
+                            value as number,
+                            name,
+                            data[0]
+                          )
+                          return formatted as unknown as [string, string]
+                        }
+                      : (value: unknown) => {
+                          const prefix = tooltipConfig && typeof tooltipConfig !== "boolean" ? tooltipConfig.valuePrefix || "" : ""
+                          const suffix = tooltipConfig && typeof tooltipConfig !== "boolean" ? tooltipConfig.valueSuffix || "" : ""
+                          return `${prefix}${value}${suffix}`
+                        }
+                  }
+                />
+              )}
+
+              {legendConfig?.enabled && (
+                <Legend
+                  align={legendConfig.align}
+                  verticalAlign={legendConfig.position === "top" ? "top" : "bottom"}
+                  wrapperStyle={{ paddingTop: legendConfig.position === "bottom" ? 16 : 0 }}
+                />
+              )}
+
+              {chartSeries.map((s, index) => {
+                const color = s.color || getColor(index)
+                const gradientId = `gradient-${s.dataKey}-${index}`
+                return (
+                  <Area
+                    key={s.dataKey}
+                    dataKey={s.dataKey}
+                    name={s.label}
+                    stroke={color}
+                    strokeWidth={s.strokeWidth || strokeWidth}
+                    fill={`url(#${gradientId})`}
+                    fillOpacity={s.fillOpacity ?? fillOpacity}
+                    type={curve}
+                    dot={dots ? { r: dotSize, fill: color } : false}
+                    stackId={stacked ? "stack" : undefined}
+                    animationDuration={animationDuration}
+                    isAnimationActive={animation}
+                  />
+                )
+              })}
+            </AreaChart>
+          )
+        }}
+      </WakaChart>
+    )
+  }
+)
+
+WakaAreaChart.displayName = "WakaAreaChart"
+
+export default WakaAreaChart

package/src/components/waka-charts/WakaBarChart.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+/**
+ * WakaBarChart - Graphique à barres
+ */
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { WakaChart } from "./WakaChart"
+import { useChartTheme } from "./hooks/useChartTheme"
+import type { BarChartProps, ChartDataPoint, ChartSeries } from "./types"
+
+export interface WakaBarChartProps extends BarChartProps {}
+
+/**
+ * Graphique à barres avec support multi-séries, empilé, et animations
+ */
+export const WakaBarChart = React.forwardRef<HTMLDivElement, WakaBarChartProps>(
+  (
+    {
+      data,
+      dataKeys,
+      series,
+      variant = "default",
+      size = "md",
+      height,
+      width,
+      animation = true,
+      animationDuration = 500,
+      grid = true,
+      tooltip = true,
+      legend,
+      axis,
+      theme: customTheme,
+      className,
+      style,
+      title,
+      description,
+      loading,
+      error,
+      onClick,
+      responsive = true,
+      // Bar specific
+      layout = "vertical",
+      stacked = false,
+      radius = 4,
+      barSize,
+      barGap = 4,
+      barCategoryGap = "20%",
+    },
+    ref
+  ) => {
+    const { theme, getColor, tooltipStyles } = useChartTheme(customTheme, variant)
+
+    // Déterminer les séries à afficher
+    const chartSeries = React.useMemo<ChartSeries[]>(() => {
+      if (series && series.length > 0) return series
+
+      if (dataKeys && dataKeys.length > 0) {
+        return dataKeys.map((key, index) => ({
+          dataKey: key,
+          label: key,
+          color: getColor(index),
+        }))
+      }
+
+      // Default: utiliser "value" si présent
+      if (data.length > 0 && "value" in data[0]) {
+        return [{ dataKey: "value", label: "Value", color: getColor(0) }]
+      }
+
+      // Sinon, utiliser toutes les clés numériques
+      const sampleItem = data[0]
+      if (!sampleItem) return []
+
+      return Object.keys(sampleItem)
+        .filter((key) => key !== "name" && typeof sampleItem[key] === "number")
+        .map((key, index) => ({
+          dataKey: key,
+          label: key,
+          color: getColor(index),
+        }))
+    }, [series, dataKeys, data, getColor])
+
+    // Configuration de la légende
+    const legendConfig = React.useMemo(() => {
+      if (!legend) return null
+      if (typeof legend === "boolean") {
+        return { enabled: legend, position: "bottom" as const, align: "center" as const }
+      }
+      return legend
+    }, [legend])
+
+    // Configuration du tooltip
+    const tooltipConfig = React.useMemo(() => {
+      if (!tooltip) return null
+      if (typeof tooltip === "boolean") {
+        return { enabled: tooltip }
+      }
+      return tooltip
+    }, [tooltip])
+
+    return (
+      <WakaChart
+        ref={ref}
+        variant={variant}
+        size={size}
+        height={height}
+        width={width}
+        theme={customTheme}
+        className={className}
+        style={style}
+        title={title}
+        description={description}
+        loading={loading}
+        error={error}
+        responsive={responsive}
+      >
+        {(components) => {
+          if (!components) return null
+
+          const {
+            BarChart,
+            Bar,
+            XAxis,
+            YAxis,
+            CartesianGrid,
+            Tooltip,
+            Legend,
+          } = components
+
+          return (
+            <BarChart
+              data={data}
+              layout={layout === "horizontal" ? "vertical" : "horizontal"}
+              barGap={barGap}
+              barCategoryGap={barCategoryGap}
+            >
+              {grid && (
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  stroke={theme.gridColor}
+                  horizontal={true}
+                  vertical={false}
+                />
+              )}
+
+              {axis?.showXAxis !== false && (
+                <XAxis
+                  dataKey="name"
+                  axisLine={{ stroke: theme.axisColor }}
+                  tickLine={{ stroke: theme.axisColor }}
+                  tick={{ fill: theme.textColor, fontSize: 12 }}
+                  tickFormatter={axis?.xAxisFormatter}
+                />
+              )}
+
+              {axis?.showYAxis !== false && (
+                <YAxis
+                  axisLine={{ stroke: theme.axisColor }}
+                  tickLine={{ stroke: theme.axisColor }}
+                  tick={{ fill: theme.textColor, fontSize: 12 }}
+                  tickFormatter={axis?.yAxisFormatter}
+                  domain={axis?.yAxisDomain}
+                  unit={axis?.yAxisUnit}
+                />
+              )}
+
+              {tooltipConfig?.enabled !== false && tooltip && (
+                <Tooltip
+                  {...tooltipStyles}
+                  formatter={
+                    tooltipConfig && typeof tooltipConfig !== "boolean" && tooltipConfig.formatter
+                      ? (value: unknown, name: string) => {
+                          const formatted = tooltipConfig.formatter!(
+                            value as number,
+                            name,
+                            data[0]
+                          )
+                          return formatted as unknown as [string, string]
+                        }
+                      : (value: unknown) => {
+                          const prefix = tooltipConfig && typeof tooltipConfig !== "boolean" ? tooltipConfig.valuePrefix || "" : ""
+                          const suffix = tooltipConfig && typeof tooltipConfig !== "boolean" ? tooltipConfig.valueSuffix || "" : ""
+                          return `${prefix}${value}${suffix}`
+                        }
+                  }
+                />
+              )}
+
+              {legendConfig?.enabled && (
+                <Legend
+                  align={legendConfig.align}
+                  verticalAlign={legendConfig.position === "top" ? "top" : "bottom"}
+                  wrapperStyle={{ paddingTop: legendConfig.position === "bottom" ? 16 : 0 }}
+                />
+              )}
+
+              {chartSeries.map((s, index) => (
+                <Bar
+                  key={s.dataKey}
+                  dataKey={s.dataKey}
+                  name={s.label}
+                  fill={s.color || getColor(index)}
+                  radius={radius}
+                  stackId={stacked ? "stack" : undefined}
+                  barSize={barSize}
+                  animationDuration={animationDuration}
+                  isAnimationActive={animation}
+                />
+              ))}
+            </BarChart>
+          )
+        }}
+      </WakaChart>
+    )
+  }
+)
+
+WakaBarChart.displayName = "WakaBarChart"
+
+export default WakaBarChart

package/src/components/waka-charts/WakaChart.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+/**
+ * WakaChart - Container de base pour les graphiques
+ * Gère le chargement dynamique de Recharts et les états loading/error
+ */
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { useRechartsLoader } from "./hooks/useRechartsLoader"
+import { useChartTheme } from "./hooks/useChartTheme"
+import { Skeleton } from "../skeleton"
+import type { BaseChartProps, ChartSize, CHART_SIZE_MAP } from "./types"
+
+const SIZE_MAP: typeof CHART_SIZE_MAP = {
+  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 },
+}
+
+export interface WakaChartProps extends Omit<BaseChartProps, "data"> {
+  /** Contenu du graphique (rendu par les composants enfants) */
+  children: (components: ReturnType<typeof useRechartsLoader>["components"]) => React.ReactNode
+}
+
+/**
+ * Container de base pour les graphiques
+ * Gère le chargement de Recharts, les états, et le responsive
+ */
+export const WakaChart = React.forwardRef<HTMLDivElement, WakaChartProps>(
+  (
+    {
+      children,
+      variant = "default",
+      size = "md",
+      height: customHeight,
+      width: customWidth,
+      theme: customTheme,
+      className,
+      style,
+      title,
+      description,
+      loading: externalLoading,
+      error: externalError,
+      responsive = true,
+    },
+    ref
+  ) => {
+    const { components, loading: rechartsLoading, error: rechartsError, isAvailable } = useRechartsLoader()
+    const { containerClasses } = useChartTheme(customTheme, variant)
+
+    const isLoading = externalLoading || rechartsLoading
+    const errorMessage = externalError || (rechartsError ? "Recharts non disponible. Installez recharts pour utiliser les graphiques." : null)
+
+    // Dimensions
+    const sizeConfig = SIZE_MAP[size]
+    const chartWidth = customWidth ?? sizeConfig.width
+    const chartHeight = customHeight ?? sizeConfig.height
+
+    // État de chargement
+    if (isLoading) {
+      return (
+        <div ref={ref} className={cn(containerClasses, className)} style={style}>
+          {title && <ChartTitle title={title} description={description} />}
+          <Skeleton className="w-full" style={{ height: chartHeight }} />
+        </div>
+      )
+    }
+
+    // Erreur
+    if (errorMessage || !isAvailable) {
+      return (
+        <div ref={ref} className={cn(containerClasses, className)} style={style}>
+          {title && <ChartTitle title={title} description={description} />}
+          <div
+            className="flex items-center justify-center text-muted-foreground text-sm border border-dashed border-border rounded-lg"
+            style={{ height: chartHeight }}
+          >
+            <div className="text-center p-4">
+              <p>{errorMessage || "Graphique non disponible"}</p>
+              <p className="text-xs mt-1">Installez recharts: pnpm add recharts</p>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    // ResponsiveContainer wrapper
+    const { ResponsiveContainer } = components!
+
+    return (
+      <div ref={ref} className={cn(containerClasses, className)} style={style}>
+        {title && <ChartTitle title={title} description={description} />}
+        {responsive ? (
+          <ResponsiveContainer width={chartWidth} height={chartHeight}>
+            {children(components) as React.ReactElement}
+          </ResponsiveContainer>
+        ) : (
+          <div style={{ width: chartWidth, height: chartHeight }}>
+            {children(components)}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+WakaChart.displayName = "WakaChart"
+
+/**
+ * Titre du graphique
+ */
+function ChartTitle({ title, description }: { title: string; description?: string }) {
+  return (
+    <div className="mb-4">
+      <h3 className="text-lg font-semibold">{title}</h3>
+      {description && <p className="text-sm text-muted-foreground">{description}</p>}
+    </div>
+  )
+}
+
+export default WakaChart