@etus/ui 0.1.0

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

@@ -0,0 +1,295 @@
+"use client"
+
+import type {
+  LineChartEventProps,
+  LineChartProps,
+  LineChartSeriesConfig,
+  LineChartTooltipCallbackProps,
+} from "./LineChart.types"
+
+import * as React from "react"
+import {
+  CartesianGrid,
+  Label,
+  Line,
+  LineChart as RechartsLineChart,
+  XAxis,
+  YAxis,
+} from "recharts"
+
+import { cn } from "../../../lib/utils"
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../Chart"
+
+/**
+ * Normalize series to LineChartSeriesConfig format
+ */
+function normalizeSeriesConfig(
+  series: (LineChartSeriesConfig | string)[]
+): LineChartSeriesConfig[] {
+  return series.map((s) =>
+    typeof s === "string" ? { dataKey: s } : s
+  )
+}
+
+/**
+ * Get stroke dash array based on variant
+ */
+function getVariantStrokeDasharray(variant: LineChartProps["variant"]): string | undefined {
+  switch (variant) {
+    case "dashed":
+      return "5 5"
+    case "dotted":
+      return "2 2"
+    default:
+      return undefined
+  }
+}
+
+/**
+ * LineChart - Data visualization component for trends and time series
+ *
+ * Connects data points with lines, ideal for showing trends and changes
+ * over a continuous axis (usually time). Supports multiple series for
+ * comparison.
+ *
+ * @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))" },
+ * }
+ *
+ * <LineChart
+ *   data={data}
+ *   config={config}
+ *   xAxisKey="month"
+ *   series={["desktop", "mobile"]}
+ * />
+ * ```
+ */
+export function LineChart({
+  activeDot = { r: 6 },
+  allowDecimals = true,
+  autoMinValue = false,
+  className,
+  config,
+  connectNulls = false,
+  customTooltip,
+  curveType = "monotone",
+  data,
+  dot = false,
+  enableLegendSlider = false,
+  gridDashArray = "3 3",
+  intervalType,
+  legendPosition = "bottom",
+  maxValue,
+  minValue,
+  onValueChange,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  strokeWidth = 2,
+  tickGap,
+  tooltipCallback,
+  tooltipIndicator = "dot",
+  variant = "default",
+  xAxisLabel,
+  xAxisKey,
+  xAxisTickFormatter,
+  yAxisLabel,
+  yAxisTickFormatter,
+  yAxisWidth,
+  ...props
+}: LineChartProps) {
+  const normalizedSeries = normalizeSeriesConfig(series)
+  const variantStrokeDasharray = getVariantStrokeDasharray(variant)
+  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="line-chart" {...props}>
+      <ChartContainer
+        className={cn(className)}
+        config={config}
+      >
+        <RechartsLineChart
+          accessibilityLayer
+          data={data}
+          margin={{ left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 }}
+        >
+          {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={yDomain}
+              tickFormatter={yAxisTickFormatter}
+              tickLine={false}
+              tickMargin={8}
+              width={yAxisWidth}
+            >
+              {yAxisLabel && (
+                <Label angle={-90} offset={-5} position="insideLeft" value={yAxisLabel} />
+              )}
+            </YAxis>
+          )}
+
+          {showTooltip && (
+            <ChartTooltip
+              content={
+                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 {
+              activeDot: seriesActiveDot,
+              dataKey,
+              dot: seriesDot,
+              strokeDasharray: seriesStrokeDasharray,
+              strokeOpacity,
+              strokeWidth: seriesStrokeWidth,
+            } = seriesConfig
+
+            const stroke = `var(--color-${dataKey})`
+            const finalStrokeDasharray = seriesStrokeDasharray ?? variantStrokeDasharray
+            const finalDot = seriesDot ?? dot
+            const finalStrokeWidth = seriesStrokeWidth ?? strokeWidth
+
+            // Merge activeDot config with click handler
+            const baseActiveDot = seriesActiveDot ?? activeDot
+            const finalActiveDot = onValueChange
+              ? typeof baseActiveDot === "object"
+                ? { ...baseActiveDot, onClick: handleDotClick(dataKey), style: { cursor: "pointer" } }
+                : baseActiveDot === false
+                  ? false
+                  : { r: 6, onClick: handleDotClick(dataKey), style: { cursor: "pointer" } }
+              : baseActiveDot
+
+            return (
+              <Line
+                key={dataKey}
+                activeDot={finalActiveDot}
+                connectNulls={connectNulls}
+                dataKey={dataKey}
+                dot={finalDot}
+                stroke={stroke}
+                strokeDasharray={finalStrokeDasharray}
+                strokeOpacity={strokeOpacity}
+                strokeWidth={finalStrokeWidth}
+                type={curveType}
+              />
+            )
+          })}
+        </RechartsLineChart>
+      </ChartContainer>
+    </div>
+  )
+}
+
+LineChart.displayName = "LineChart"

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

@@ -0,0 +1,168 @@
+import type { ChartConfig } from "../Chart"
+import type { ComponentPropsWithoutRef, ReactElement } from "react"
+
+/**
+ * Curve type for the line chart
+ */
+export type LineChartCurveType =
+  | "basis"
+  | "basisClosed"
+  | "basisOpen"
+  | "bump"
+  | "bumpX"
+  | "bumpY"
+  | "linear"
+  | "linearClosed"
+  | "monotone"
+  | "monotoneX"
+  | "monotoneY"
+  | "natural"
+  | "step"
+  | "stepAfter"
+  | "stepBefore"
+
+/**
+ * Visual variant for line chart rendering
+ */
+export type LineChartVariant = "dashed" | "default" | "dotted"
+
+/**
+ * Tooltip indicator style
+ */
+export type LineChartTooltipIndicator = "dashed" | "dot" | "line"
+
+/**
+ * Legend position
+ */
+export type LineChartLegendPosition = "bottom" | "left" | "right" | "top"
+
+/**
+ * X-axis interval type
+ */
+export type LineChartIntervalType = "equidistantPreserveStart" | "preserveEnd" | "preserveStart" | "preserveStartEnd" | number
+
+/**
+ * Event payload for onValueChange callback
+ */
+export interface LineChartEventProps {
+  /** 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 LineChartTooltipCallbackProps {
+  /** 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 line chart
+ */
+export interface LineChartSeriesConfig {
+  /** Active dot configuration or false to disable */
+  activeDot?: boolean | { r?: number; strokeWidth?: number }
+  /** Data key from the data array */
+  dataKey: string
+  /** Dot configuration or false to disable */
+  dot?: boolean | { fill?: string; r?: number }
+  /** Optional custom stroke color (defaults to config color) */
+  stroke?: string
+  /** Stroke dash array for dashed lines (e.g., "5 5") */
+  strokeDasharray?: string
+  /** Stroke opacity (0-1) */
+  strokeOpacity?: number
+  /** Stroke width for this series */
+  strokeWidth?: number
+}
+
+/**
+ * Props for the LineChart component
+ */
+export interface LineChartProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** Active dot configuration or false to disable (default for all series) */
+  activeDot?: boolean | { r?: number; strokeWidth?: number }
+  /** 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
+  /** Curve type for the line */
+  curveType?: LineChartCurveType
+  /** Data array for the chart */
+  data: Record<string, unknown>[]
+  /** Enable horizontal scroll/slider for legend with many items */
+  enableLegendSlider?: boolean
+  /** Dot configuration or false to disable (default for all series) */
+  dot?: boolean | { fill?: string; r?: number }
+  /** Grid stroke dash array (e.g., "3 3") */
+  gridDashArray?: string
+  /** X-axis interval type for tick display */
+  intervalType?: LineChartIntervalType
+  /** Legend position relative to chart */
+  legendPosition?: LineChartLegendPosition
+  /** 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: LineChartEventProps | null) => void
+  /** Array of data keys or series configs for Y-axis values */
+  series: (LineChartSeriesConfig | 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
+  /** Default stroke width for all series */
+  strokeWidth?: number
+  /** Minimum gap between X-axis ticks in pixels */
+  tickGap?: number
+  /** Callback when tooltip state changes */
+  tooltipCallback?: (props: LineChartTooltipCallbackProps) => void
+  /** Tooltip indicator style */
+  tooltipIndicator?: LineChartTooltipIndicator
+  /** Visual variant (default, dashed, dotted) */
+  variant?: LineChartVariant
+  /** 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/LineChart/LineChart.variants.ts

@@ -0,0 +1,52 @@
+// LineChart/LineChart.variants.ts
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * LineChart style variants using CVA
+ *
+ * Controls the line appearance and chart styling.
+ *
+ * @see https://cva.style/docs
+ */
+export const lineChartVariants = cva(
+  // Base styles (always applied)
+  "",
+  {
+    variants: {
+      variant: {
+        default: "",
+        dashed: "",
+        dotted: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * Line stroke dash array configuration by variant
+ */
+export const lineStrokeDashArray: Record<string, string | undefined> = {
+  default: undefined,
+  dashed: "5 5",
+  dotted: "2 2",
+}
+
+/**
+ * Line curve type configuration
+ */
+export const curveTypes = {
+  linear: "linear",
+  monotone: "monotone",
+  step: "step",
+  stepAfter: "stepAfter",
+  stepBefore: "stepBefore",
+  natural: "natural",
+} as const
+
+export type CurveType = keyof typeof curveTypes
+
+// Export variant prop types
+export type LineChartVariantProps = VariantProps<typeof lineChartVariants>