@etus/ui 0.1.0

package/src/components/data-display/AreaChart/AreaChart.tsx

@@ -0,0 +1,318 @@
+"use client"
+
+import type {
+  AreaChartEventProps,
+  AreaChartProps,
+  AreaChartSeriesConfig,
+  AreaChartTooltipCallbackProps,
+} from "./AreaChart.types"
+
+import * as React from "react"
+import {
+  Area,
+  CartesianGrid,
+  Label,
+  AreaChart as RechartsAreaChart,
+  XAxis,
+  YAxis,
+} from "recharts"
+
+import { cn } from "../../../lib/utils"
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../Chart"
+
+/**
+ * Normalize series to AreaChartSeriesConfig format
+ */
+function normalizeSeriesConfig(
+  series: (AreaChartSeriesConfig | string)[]
+): AreaChartSeriesConfig[] {
+  return series.map((s) =>
+    typeof s === "string" ? { dataKey: s } : s
+  )
+}
+
+/**
+ * Generate gradient defs for gradient variant
+ */
+function GradientDefs({
+  idPrefix,
+  series,
+}: {
+  idPrefix: string
+  series: AreaChartSeriesConfig[]
+}) {
+  return (
+    <defs>
+      {series.map((s) => (
+        <linearGradient
+          key={s.dataKey}
+          id={`${idPrefix}-${s.dataKey}`}
+          x1="0"
+          x2="0"
+          y1="0"
+          y2="1"
+        >
+          <stop
+            offset="5%"
+            stopColor={`var(--color-${s.dataKey})`}
+            stopOpacity={0.8}
+          />
+          <stop
+            offset="95%"
+            stopColor={`var(--color-${s.dataKey})`}
+            stopOpacity={0.1}
+          />
+        </linearGradient>
+      ))}
+    </defs>
+  )
+}
+
+/**
+ * AreaChart - Data visualization component for cumulative data
+ *
+ * Displays quantitative values along a continuous axis with filled area.
+ * Ideal for showing trends over time and comparing volumes between series.
+ *
+ * @example
+ * ```tsx
+ * const data = [
+ *   { month: "Jan", desktop: 186, mobile: 80 },
+ *   { month: "Feb", desktop: 305, mobile: 200 },
+ * ]
+ *
+ * const config = {
+ *   desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },
+ *   mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },
+ * }
+ *
+ * <AreaChart
+ *   data={data}
+ *   config={config}
+ *   xAxisKey="month"
+ *   series={["desktop", "mobile"]}
+ * />
+ * ```
+ */
+export function AreaChart({
+  allowDecimals = true,
+  autoMinValue = false,
+  className,
+  config,
+  connectNulls = false,
+  customTooltip,
+  enableLegendSlider = false,
+  curveType = "monotone",
+  data,
+  fill = "solid",
+  fillOpacity = 0.3,
+  gradientIdPrefix = "area-gradient",
+  gridDashArray = "3 3",
+  intervalType,
+  legendPosition = "bottom",
+  maxValue,
+  minValue,
+  onValueChange,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  tickGap,
+  tooltipCallback,
+  tooltipIndicator = "dot",
+  variant = "default",
+  xAxisLabel,
+  xAxisKey,
+  xAxisTickFormatter,
+  yAxisLabel,
+  yAxisTickFormatter,
+  yAxisWidth,
+  ...props
+}: AreaChartProps) {
+  const normalizedSeries = normalizeSeriesConfig(series)
+  const isStacked = variant === "stacked" || variant === "percent"
+  const isPercent = variant === "percent"
+  const isGradient = variant === "gradient" || fill === "gradient"
+  const isNoFill = fill === "none"
+  const chartId = React.useId().replaceAll(":", "")
+  const gradientPrefix = `${gradientIdPrefix}-${chartId}`
+  const prevTooltipStateRef = React.useRef<boolean>(false)
+
+  // Handle dot click for onValueChange
+  const handleDotClick = React.useCallback(
+    (dataKey: string) => (data: { payload: Record<string, unknown> }) => {
+      if (!onValueChange) return
+      const payload = data.payload
+      const value = payload[dataKey]
+      onValueChange({
+        category: payload[xAxisKey],
+        dataKey,
+        payload,
+        value: typeof value === "number" ? value : 0,
+      })
+    },
+    [onValueChange, xAxisKey]
+  )
+
+  // Custom tooltip content wrapper for tooltipCallback
+  const TooltipContentWithCallback = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (props: any) => {
+      const { active = false, label, payload } = props
+
+      // Call tooltipCallback when state changes
+      if (tooltipCallback && active !== prevTooltipStateRef.current) {
+        prevTooltipStateRef.current = active
+        tooltipCallback({
+          active,
+          label,
+          payload: payload?.map((p: { dataKey: string | number; value: number; payload: Record<string, unknown> }) => ({
+            dataKey: String(p.dataKey),
+            value: p.value,
+            payload: p.payload,
+          })),
+        })
+      }
+
+      return <ChartTooltipContent indicator={tooltipIndicator} {...props} />
+    },
+    [tooltipCallback, tooltipIndicator]
+  )
+
+  // Calculate Y-axis domain
+  const yDomain = React.useMemo(() => {
+    const min = minValue ?? (autoMinValue ? "auto" : 0)
+    const max = maxValue ?? "auto"
+    return [min, max] as const
+  }, [autoMinValue, maxValue, minValue])
+
+  // Calculate X-axis ticks for startEndOnly
+  const xAxisTicks = React.useMemo(() => {
+    if (!startEndOnly || data.length < 2) return undefined
+    const first = data[0]
+    const last = data[data.length - 1]
+    if (!first || !last) return undefined
+    return [first[xAxisKey], last[xAxisKey]] as string[]
+  }, [data, startEndOnly, xAxisKey])
+
+  return (
+    <div data-slot="area-chart" {...props}>
+      <ChartContainer
+        className={cn(className)}
+        config={config}
+      >
+      <RechartsAreaChart
+        accessibilityLayer
+        data={data}
+        margin={{ left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 }}
+        stackOffset={isPercent ? "expand" : undefined}
+      >
+        {isGradient && (
+          <GradientDefs idPrefix={gradientPrefix} series={normalizedSeries} />
+        )}
+
+        {showGrid && (
+          <CartesianGrid strokeDasharray={gridDashArray} vertical={false} />
+        )}
+
+        {showXAxis && (
+          <XAxis
+            axisLine={false}
+            dataKey={xAxisKey}
+            interval={intervalType}
+            minTickGap={tickGap}
+            tickFormatter={xAxisTickFormatter}
+            tickLine={false}
+            tickMargin={8}
+            ticks={xAxisTicks}
+          >
+            {xAxisLabel && (
+              <Label offset={-5} position="insideBottom" value={xAxisLabel} />
+            )}
+          </XAxis>
+        )}
+
+        {showYAxis && (
+          <YAxis
+            allowDecimals={allowDecimals}
+            axisLine={false}
+            domain={isPercent ? [0, 1] : yDomain}
+            tickFormatter={isPercent ? (value) => `${(value * 100).toFixed(0)}%` : yAxisTickFormatter}
+            tickLine={false}
+            tickMargin={8}
+            width={yAxisWidth}
+          >
+            {yAxisLabel && (
+              <Label angle={-90} offset={-5} position="insideLeft" value={yAxisLabel} />
+            )}
+          </YAxis>
+        )}
+
+        {showTooltip && (
+          <ChartTooltip
+            content={
+              customTooltip
+                ? customTooltip
+                : tooltipCallback
+                  ? <TooltipContentWithCallback />
+                  : <ChartTooltipContent indicator={tooltipIndicator} />
+            }
+            cursor={false}
+          />
+        )}
+
+        {showLegend && (
+          <ChartLegend
+            align={legendPosition === "left" ? "left" : legendPosition === "right" ? "right" : "center"}
+            content={<ChartLegendContent enableSlider={enableLegendSlider} />}
+            layout={legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal"}
+            verticalAlign={legendPosition === "top" ? "top" : legendPosition === "bottom" ? "bottom" : "middle"}
+          />
+        )}
+
+        {normalizedSeries.map((seriesConfig) => {
+          const { dataKey, fillOpacity: seriesFillOpacity, stackId } = seriesConfig
+
+          const areaFill = isGradient
+            ? `url(#${gradientPrefix}-${dataKey})`
+            : `var(--color-${dataKey})`
+
+          const stroke = `var(--color-${dataKey})`
+
+          // Calculate fill opacity: 0 for "none", otherwise use series or default
+          const computedFillOpacity = isNoFill ? 0 : (seriesFillOpacity ?? fillOpacity)
+
+          return (
+            <Area
+              key={dataKey}
+              activeDot={
+                onValueChange
+                  ? { onClick: handleDotClick(dataKey), r: 6, style: { cursor: "pointer" } }
+                  : { r: 6 }
+              }
+              connectNulls={connectNulls}
+              dataKey={dataKey}
+              fill={areaFill}
+              fillOpacity={computedFillOpacity}
+              stackId={isStacked ? "area-stack" : stackId}
+              stroke={stroke}
+              type={curveType}
+            />
+          )
+        })}
+      </RechartsAreaChart>
+      </ChartContainer>
+    </div>
+  )
+}
+
+AreaChart.displayName = "AreaChart"

package/src/components/data-display/AreaChart/AreaChart.types.ts

@@ -0,0 +1,169 @@
+import type { ChartConfig } from "../Chart"
+import type { ComponentPropsWithoutRef, ReactElement } from "react"
+
+/**
+ * Curve type for the area chart line
+ */
+export type AreaChartCurveType =
+  | "basis"
+  | "basisClosed"
+  | "basisOpen"
+  | "bump"
+  | "bumpX"
+  | "bumpY"
+  | "linear"
+  | "linearClosed"
+  | "monotone"
+  | "monotoneX"
+  | "monotoneY"
+  | "natural"
+  | "step"
+  | "stepAfter"
+  | "stepBefore"
+
+/**
+ * Visual variant for area chart rendering
+ */
+export type AreaChartVariant = "default" | "gradient" | "percent" | "stacked"
+
+/**
+ * Fill style for area chart
+ */
+export type AreaChartFill = "gradient" | "none" | "solid"
+
+/**
+ * Legend position
+ */
+export type AreaChartLegendPosition = "bottom" | "left" | "right" | "top"
+
+/**
+ * X-axis interval type
+ */
+export type AreaChartIntervalType = "equidistantPreserveStart" | "preserveEnd" | "preserveStart" | "preserveStartEnd" | number
+
+/**
+ * Tooltip indicator style
+ */
+export type AreaChartTooltipIndicator = "dashed" | "dot" | "line"
+
+/**
+ * Event payload for onValueChange callback
+ */
+export interface AreaChartEventProps {
+  /** The category value (x-axis) */
+  category: unknown
+  /** The series key that was clicked */
+  dataKey: string
+  /** The full data point */
+  payload: Record<string, unknown>
+  /** The value of the clicked series */
+  value: number
+}
+
+/**
+ * Tooltip callback props
+ */
+export interface AreaChartTooltipCallbackProps {
+  /** Whether the tooltip is active/visible */
+  active: boolean
+  /** The category label (x-axis value) */
+  label?: string
+  /** Array of series data in the tooltip */
+  payload?: Array<{
+    dataKey: string
+    value: number
+    payload: Record<string, unknown>
+  }>
+}
+
+/**
+ * Configuration for a single series in the area chart
+ */
+export interface AreaChartSeriesConfig {
+  /** Data key from the data array */
+  dataKey: string
+  /** Optional custom fill color (defaults to config color) */
+  fill?: string
+  /** Fill opacity for this series (0-1) */
+  fillOpacity?: number
+  /** Stack ID for stacked charts (all series with same stackId are stacked) */
+  stackId?: string
+  /** Optional custom stroke color (defaults to config color) */
+  stroke?: string
+}
+
+/**
+ * Props for the AreaChart component
+ */
+export interface AreaChartProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** Allow decimals on Y-axis ticks */
+  allowDecimals?: boolean
+  /** Automatically calculate minimum Y-axis value from data */
+  autoMinValue?: boolean
+  /** Additional CSS classes */
+  className?: string
+  /** Chart configuration with colors and labels */
+  config: ChartConfig
+  /** Connect data points through null/undefined values */
+  connectNulls?: boolean
+  /** Custom tooltip content (replaces default tooltip) */
+  customTooltip?: ReactElement
+  /** Enable horizontal scroll/slider for legend with many items */
+  enableLegendSlider?: boolean
+  /** Curve type for the area line */
+  curveType?: AreaChartCurveType
+  /** Data array for the chart */
+  data: Record<string, unknown>[]
+  /** Fill style: solid, gradient, or none (stroke only) */
+  fill?: AreaChartFill
+  /** Default fill opacity for all series (0-1) */
+  fillOpacity?: number
+  /** Gradient definition ID prefix for gradient variant */
+  gradientIdPrefix?: string
+  /** Grid stroke dash array (e.g., "3 3") */
+  gridDashArray?: string
+  /** X-axis interval type for tick display */
+  intervalType?: AreaChartIntervalType
+  /** Legend position relative to chart */
+  legendPosition?: AreaChartLegendPosition
+  /** Maximum Y-axis value (explicit domain upper bound) */
+  maxValue?: number
+  /** Minimum Y-axis value (explicit domain lower bound) */
+  minValue?: number
+  /** Callback when a data point is clicked. Pass null to clear selection. */
+  onValueChange?: (value: AreaChartEventProps | null) => void
+  /** Array of data keys or series configs for Y-axis values */
+  series: (AreaChartSeriesConfig | string)[]
+  /** Show cartesian grid */
+  showGrid?: boolean
+  /** Show legend */
+  showLegend?: boolean
+  /** Show tooltip on hover */
+  showTooltip?: boolean
+  /** Show X-axis */
+  showXAxis?: boolean
+  /** Show Y-axis */
+  showYAxis?: boolean
+  /** Show only first and last X-axis tick labels */
+  startEndOnly?: boolean
+  /** Minimum gap between X-axis ticks in pixels */
+  tickGap?: number
+  /** Callback when tooltip state changes */
+  tooltipCallback?: (props: AreaChartTooltipCallbackProps) => void
+  /** Tooltip indicator style */
+  tooltipIndicator?: AreaChartTooltipIndicator
+  /** Visual variant */
+  variant?: AreaChartVariant
+  /** Label for X-axis */
+  xAxisLabel?: string
+  /** Key from data to use for X-axis */
+  xAxisKey: string
+  /** Custom X-axis tick formatter */
+  xAxisTickFormatter?: (value: unknown) => string
+  /** Label for Y-axis */
+  yAxisLabel?: string
+  /** Custom Y-axis tick formatter */
+  yAxisTickFormatter?: (value: unknown) => string
+  /** Width of the Y-axis in pixels */
+  yAxisWidth?: number
+}

package/src/components/data-display/AreaChart/AreaChart.variants.ts

@@ -0,0 +1,45 @@
+// AreaChart/AreaChart.variants.ts
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * AreaChart style variants using CVA
+ *
+ * Controls the area fill and stroke appearance.
+ *
+ * @see https://cva.style/docs
+ */
+export const areaChartVariants = cva(
+  // Base styles (always applied)
+  "",
+  {
+    variants: {
+      fillStyle: {
+        solid: "",
+        gradient: "",
+      },
+      stackType: {
+        none: "",
+        stacked: "",
+        percent: "",
+      },
+    },
+    defaultVariants: {
+      fillStyle: "gradient",
+      stackType: "none",
+    },
+  }
+)
+
+/**
+ * Area fill opacity configuration
+ */
+export const areaFillOpacity = {
+  light: 0.2,
+  default: 0.4,
+  heavy: 0.6,
+} as const
+
+export type AreaFillOpacity = keyof typeof areaFillOpacity
+
+// Export variant prop types
+export type AreaChartVariantProps = VariantProps<typeof areaChartVariants>