@wakastellar/ui 2.0.0 → 2.1.0

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

@@ -0,0 +1,219 @@
+"use client"
+
+/**
+ * WakaLineChart - Graphique en ligne
+ */
+
+import * as React from "react"
+import { WakaChart } from "./WakaChart"
+import { useChartTheme } from "./hooks/useChartTheme"
+import type { LineChartProps, ChartSeries } from "./types"
+
+export interface WakaLineChartProps extends LineChartProps {}
+
+/**
+ * Graphique en ligne avec support multi-séries, courbes, et animations
+ */
+export const WakaLineChart = React.forwardRef<HTMLDivElement, WakaLineChartProps>(
+  (
+    {
+      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 specific
+      curve = "monotone",
+      dots = true,
+      dotSize = 4,
+      activeDot = true,
+      strokeWidth = 2,
+    },
+    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,
+        }))
+      }
+
+      // Default: utiliser "value" si présent
+      if (data.length > 0 && "value" in data[0]) {
+        return [{ dataKey: "value", label: "Value", color: getColor(0), strokeWidth }]
+      }
+
+      // 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,
+        }))
+    }, [series, dataKeys, data, getColor, strokeWidth])
+
+    // 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 {
+            LineChart,
+            Line,
+            XAxis,
+            YAxis,
+            CartesianGrid,
+            Tooltip,
+            Legend,
+          } = components
+
+          return (
+            <LineChart data={data}>
+              {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) => (
+                <Line
+                  key={s.dataKey}
+                  dataKey={s.dataKey}
+                  name={s.label}
+                  stroke={s.color || getColor(index)}
+                  strokeWidth={s.strokeWidth || strokeWidth}
+                  strokeDasharray={s.strokeDasharray}
+                  type={curve}
+                  dot={dots ? { r: dotSize, fill: s.color || getColor(index) } : false}
+                  activeDot={activeDot ? { r: dotSize + 2 } : false}
+                  animationDuration={animationDuration}
+                  isAnimationActive={animation}
+                />
+              ))}
+            </LineChart>
+          )
+        }}
+      </WakaChart>
+    )
+  }
+)
+
+WakaLineChart.displayName = "WakaLineChart"
+
+export default WakaLineChart

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

@@ -0,0 +1,133 @@
+"use client"
+
+/**
+ * WakaMiniChart - Mini graphique pour DataTable
+ */
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { WakaSparkline } from "./WakaSparkline"
+import { TrendingUp, TrendingDown, Minus } from "lucide-react"
+import type { MiniChartProps, ChartDataPoint } from "./types"
+
+export interface WakaMiniChartProps extends MiniChartProps {}
+
+/**
+ * Mini graphique optimisé pour les cellules DataTable
+ * Affiche une tendance avec sparkline et indicateur de direction
+ */
+export const WakaMiniChart = React.forwardRef<HTMLDivElement, WakaMiniChartProps>(
+  (
+    {
+      data,
+      type = "sparkline",
+      width = 80,
+      height = 24,
+      color,
+      showTrend = true,
+      valueFormatter,
+      className,
+    },
+    ref
+  ) => {
+    // Normaliser les données en tableau de nombres
+    const numericData = React.useMemo((): number[] => {
+      if (!data || data.length === 0) return []
+
+      if (typeof data[0] === "number") {
+        return data as number[]
+      }
+
+      return (data as ChartDataPoint[]).map((d) => {
+        const val = d.value ?? (Object.values(d).find((v) => typeof v === "number") as number)
+        return typeof val === "number" ? val : 0
+      })
+    }, [data])
+
+    // Calculer la tendance
+    const { trend, trendPercent, currentValue } = React.useMemo(() => {
+      if (numericData.length < 2) {
+        return {
+          trend: "neutral" as const,
+          trendPercent: 0,
+          currentValue: numericData[0] ?? 0,
+        }
+      }
+
+      const first = numericData[0]
+      const last = numericData[numericData.length - 1]
+      const diff = last - first
+      const percent = first !== 0 ? (diff / first) * 100 : 0
+
+      return {
+        trend: diff > 0 ? "up" : diff < 0 ? "down" : "neutral",
+        trendPercent: percent,
+        currentValue: last,
+      }
+    }, [numericData])
+
+    // Couleur par défaut selon la tendance
+    const chartColor = React.useMemo(() => {
+      if (color) return color
+      if (trend === "up") return "hsl(var(--chart-2, 142 76% 36%))"
+      if (trend === "down") return "hsl(var(--destructive, 0 84% 60%))"
+      return "hsl(var(--muted-foreground, 220 9% 46%))"
+    }, [color, trend])
+
+    // Pas de données
+    if (numericData.length === 0) {
+      return (
+        <div ref={ref} className={cn("flex items-center gap-1 text-muted-foreground", className)}>
+          <Minus className="h-3 w-3" />
+        </div>
+      )
+    }
+
+    // Formater la valeur
+    const formattedValue = valueFormatter
+      ? valueFormatter(currentValue)
+      : currentValue.toLocaleString()
+
+    return (
+      <div ref={ref} className={cn("flex items-center gap-2", className)}>
+        <WakaSparkline
+          data={numericData}
+          type={type === "sparkline" ? "line" : type}
+          width={width}
+          height={height}
+          color={chartColor}
+          animation={false}
+        />
+
+        {showTrend && (
+          <div className="flex items-center gap-1">
+            {trend === "up" && (
+              <TrendingUp className="h-3 w-3 text-green-600 dark:text-green-400" />
+            )}
+            {trend === "down" && (
+              <TrendingDown className="h-3 w-3 text-red-600 dark:text-red-400" />
+            )}
+            {trend === "neutral" && (
+              <Minus className="h-3 w-3 text-muted-foreground" />
+            )}
+            <span
+              className={cn(
+                "text-xs font-medium",
+                trend === "up" && "text-green-600 dark:text-green-400",
+                trend === "down" && "text-red-600 dark:text-red-400",
+                trend === "neutral" && "text-muted-foreground"
+              )}
+            >
+              {trend !== "neutral" && (trendPercent > 0 ? "+" : "")}
+              {trendPercent.toFixed(1)}%
+            </span>
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+WakaMiniChart.displayName = "WakaMiniChart"
+
+export default WakaMiniChart

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

@@ -0,0 +1,214 @@
+"use client"
+
+/**
+ * WakaPieChart - Graphique camembert/donut
+ */
+
+import * as React from "react"
+import { WakaChart } from "./WakaChart"
+import { useChartTheme } from "./hooks/useChartTheme"
+import type { PieChartProps } from "./types"
+
+export interface WakaPieChartProps extends PieChartProps {}
+
+/**
+ * Graphique camembert/donut avec labels, animations, et interactivité
+ */
+export const WakaPieChart = React.forwardRef<HTMLDivElement, WakaPieChartProps>(
+  (
+    {
+      data,
+      variant = "default",
+      size = "md",
+      height,
+      width,
+      animation = true,
+      animationDuration = 500,
+      tooltip = true,
+      legend = true,
+      theme: customTheme,
+      className,
+      style,
+      title,
+      description,
+      loading,
+      error,
+      onClick,
+      responsive = true,
+      // Pie specific
+      dataKey = "value",
+      nameKey = "name",
+      innerRadius = 0,
+      outerRadius = "80%",
+      startAngle = 90,
+      endAngle = -270,
+      paddingAngle = 2,
+      label = false,
+      labelPosition = "outside",
+    },
+    ref
+  ) => {
+    const { theme, getColor, tooltipStyles } = useChartTheme(customTheme, variant)
+
+    // 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])
+
+    // Fonction de rendu des labels
+    const renderLabel = React.useCallback(
+      (props: {
+        cx: number
+        cy: number
+        midAngle: number
+        innerRadius: number
+        outerRadius: number
+        percent: number
+        value: number
+        name: string
+        index: number
+      }) => {
+        if (!label) return null
+
+        const RADIAN = Math.PI / 180
+        const radius = labelPosition === "inside"
+          ? props.innerRadius + (props.outerRadius - props.innerRadius) * 0.5
+          : props.outerRadius * 1.1
+        const x = props.cx + radius * Math.cos(-props.midAngle * RADIAN)
+        const y = props.cy + radius * Math.sin(-props.midAngle * RADIAN)
+
+        let text = ""
+        if (label === "percent") {
+          text = `${(props.percent * 100).toFixed(0)}%`
+        } else if (label === "value") {
+          text = String(props.value)
+        } else if (label === "name") {
+          text = props.name
+        } else {
+          text = `${(props.percent * 100).toFixed(0)}%`
+        }
+
+        return (
+          <text
+            x={x}
+            y={y}
+            fill={labelPosition === "inside" ? "#fff" : theme.textColor}
+            textAnchor={x > props.cx ? "start" : "end"}
+            dominantBaseline="central"
+            fontSize={12}
+          >
+            {text}
+          </text>
+        )
+      },
+      [label, labelPosition, theme.textColor]
+    )
+
+    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 {
+            PieChart,
+            Pie,
+            Cell,
+            Tooltip,
+            Legend,
+          } = components
+
+          return (
+            <PieChart>
+              {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"}
+                  layout={legendConfig.position === "left" || legendConfig.position === "right" ? "vertical" : "horizontal"}
+                  wrapperStyle={{ paddingTop: legendConfig.position === "bottom" ? 16 : 0 }}
+                />
+              )}
+
+              <Pie
+                data={data}
+                dataKey={dataKey}
+                nameKey={nameKey}
+                cx="50%"
+                cy="50%"
+                innerRadius={innerRadius}
+                outerRadius={outerRadius}
+                startAngle={startAngle}
+                endAngle={endAngle}
+                paddingAngle={paddingAngle}
+                animationDuration={animationDuration}
+                isAnimationActive={animation}
+                label={label ? renderLabel : false}
+                labelLine={label && labelPosition === "outside"}
+              >
+                {data.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={getColor(index)}
+                    stroke="transparent"
+                  />
+                ))}
+              </Pie>
+            </PieChart>
+          )
+        }}
+      </WakaChart>
+    )
+  }
+)
+
+WakaPieChart.displayName = "WakaPieChart"
+
+export default WakaPieChart