@etus/ui 0.1.0

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

@@ -0,0 +1,971 @@
+"use client"
+
+import type { SparklineData, SparklineDataPoint, SparklineProps } from "./Sparkline.types"
+
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+
+/**
+ * Default colors for multi-series
+ */
+const DEFAULT_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+]
+
+/**
+ * Size dimensions mapping
+ */
+const SIZE_DIMENSIONS = {
+  lg: { height: 32, width: 120 },
+  md: { height: 24, width: 80 },
+  sm: { height: 20, width: 60 },
+  xs: { height: 16, width: 40 },
+} as const
+
+/**
+ * Check if data is multi-series (array of objects)
+ */
+function isMultiSeriesData(data: SparklineData): data is SparklineDataPoint[] {
+  return data.length > 0 && typeof data[0] === "object" && data[0] !== null
+}
+
+/**
+ * Extract numeric values for a category from multi-series data
+ */
+function extractCategoryValues(
+  data: SparklineDataPoint[],
+  category: string,
+  connectNulls: boolean
+): (number | null)[] {
+  return data.map((point) => {
+    const value = point[category]
+    if (value === null || value === undefined) {
+      return connectNulls ? null : null
+    }
+    return value
+  })
+}
+
+/**
+ * Calculate stacked values for multiple categories
+ */
+function calculateStackedValues(
+  data: SparklineDataPoint[],
+  categories: string[]
+): Map<string, number[]> {
+  const stackedMap = new Map<string, number[]>()
+
+  categories.forEach((category, categoryIndex) => {
+    const values = data.map((point, pointIndex) => {
+      let stackedValue = 0
+      for (let i = 0; i <= categoryIndex; i++) {
+        const cat = categories[i]
+        if (cat) {
+          const val = point[cat]
+          if (typeof val === "number") {
+            stackedValue += val
+          }
+        }
+      }
+      return stackedValue
+    })
+    stackedMap.set(category, values)
+  })
+
+  return stackedMap
+}
+
+/**
+ * Calculate trend based on first and last data points
+ */
+function getTrend(data: number[]): "negative" | "neutral" | "positive" {
+  if (data.length < 2) return "neutral"
+  const first = data[0] ?? 0
+  const last = data[data.length - 1] ?? 0
+  if (last > first) return "positive"
+  if (last < first) return "negative"
+  return "neutral"
+}
+
+/**
+ * Get color based on trend or explicit color prop
+ */
+function getTrendColor(
+  trend: "negative" | "neutral" | "positive",
+  showTrend: boolean,
+  explicitColor?: string
+): string {
+  if (explicitColor) return explicitColor
+  if (!showTrend) return "currentColor"
+
+  switch (trend) {
+    case "positive":
+      return "var(--color-success)"
+    case "negative":
+      return "var(--color-destructive)"
+    default:
+      return "var(--color-muted-foreground)"
+  }
+}
+
+/**
+ * Calculate domain bounds
+ */
+function getDomainBounds(
+  values: number[],
+  autoMinValue: boolean,
+  minValue?: number,
+  maxValue?: number
+): { min: number; max: number } {
+  const dataMin = Math.min(...values)
+  const dataMax = Math.max(...values)
+
+  const min = minValue ?? (autoMinValue ? dataMin : 0)
+  const max = maxValue ?? dataMax
+
+  return { min, max }
+}
+
+/**
+ * Get all numeric values from multi-series data (for domain calculation)
+ */
+function getAllValues(
+  data: SparklineDataPoint[],
+  categories: string[],
+  stack: boolean
+): number[] {
+  if (stack) {
+    // For stacked, get the max stacked values
+    const stackedMap = calculateStackedValues(data, categories)
+    const allStackedValues: number[] = []
+    stackedMap.forEach((values) => {
+      allStackedValues.push(...values)
+    })
+    return allStackedValues.filter((v) => !isNaN(v))
+  }
+
+  const values: number[] = []
+  data.forEach((point) => {
+    categories.forEach((category) => {
+      const value = point[category]
+      if (typeof value === "number" && !isNaN(value)) {
+        values.push(value)
+      }
+    })
+  })
+  return values
+}
+
+/**
+ * Convert data array to SVG path points
+ */
+function dataToPoints(
+  data: (number | null)[],
+  width: number,
+  height: number,
+  padding: number,
+  domainMin: number,
+  domainMax: number,
+  connectNulls: boolean
+): string {
+  if (data.length === 0) return ""
+
+  const range = domainMax - domainMin || 1
+  const effectiveHeight = height - padding * 2
+  const effectiveWidth = width - padding * 2
+
+  const validPoints: { x: number; y: number }[] = []
+
+  data.forEach((value, index) => {
+    if (value === null) {
+      if (!connectNulls) return
+      return // Skip null for connectNulls, but polyline handles gaps
+    }
+    const x = padding + (index / Math.max(data.length - 1, 1)) * effectiveWidth
+    const y = padding + effectiveHeight - ((value - domainMin) / range) * effectiveHeight
+    validPoints.push({ x, y })
+  })
+
+  return validPoints.map((p) => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ")
+}
+
+/**
+ * Generate segments for line with null handling
+ */
+function dataToSegments(
+  data: (number | null)[],
+  width: number,
+  height: number,
+  padding: number,
+  domainMin: number,
+  domainMax: number
+): string[][] {
+  if (data.length === 0) return []
+
+  const range = domainMax - domainMin || 1
+  const effectiveHeight = height - padding * 2
+  const effectiveWidth = width - padding * 2
+
+  const segments: string[][] = []
+  let currentSegment: string[] = []
+
+  data.forEach((value, index) => {
+    if (value === null) {
+      if (currentSegment.length > 0) {
+        segments.push(currentSegment)
+        currentSegment = []
+      }
+      return
+    }
+
+    const x = padding + (index / Math.max(data.length - 1, 1)) * effectiveWidth
+    const y = padding + effectiveHeight - ((value - domainMin) / range) * effectiveHeight
+    currentSegment.push(`${x.toFixed(2)},${y.toFixed(2)}`)
+  })
+
+  if (currentSegment.length > 0) {
+    segments.push(currentSegment)
+  }
+
+  return segments
+}
+
+/**
+ * Generate area path (closed polygon for fill)
+ */
+function dataToAreaPath(
+  data: (number | null)[],
+  width: number,
+  height: number,
+  padding: number,
+  domainMin: number,
+  domainMax: number,
+  bottomY?: number
+): string {
+  if (data.length === 0) return ""
+
+  const range = domainMax - domainMin || 1
+  const effectiveHeight = height - padding * 2
+  const effectiveWidth = width - padding * 2
+  const baseY = bottomY ?? height - padding
+
+  const points: { x: number; y: number }[] = []
+
+  data.forEach((value, index) => {
+    const x = padding + (index / Math.max(data.length - 1, 1)) * effectiveWidth
+    const y =
+      value !== null
+        ? padding + effectiveHeight - ((value - domainMin) / range) * effectiveHeight
+        : baseY
+    points.push({ x, y })
+  })
+
+  if (points.length === 0) return ""
+
+  const firstPoint = points[0]
+  const lastPoint = points[points.length - 1]
+
+  if (!firstPoint || !lastPoint) return ""
+
+  let path = `M ${firstPoint.x.toFixed(2)},${firstPoint.y.toFixed(2)}`
+  for (let i = 1; i < points.length; i++) {
+    const point = points[i]
+    if (point) {
+      path += ` L ${point.x.toFixed(2)},${point.y.toFixed(2)}`
+    }
+  }
+  path += ` L ${lastPoint.x.toFixed(2)},${baseY.toFixed(2)}`
+  path += ` L ${firstPoint.x.toFixed(2)},${baseY.toFixed(2)}`
+  path += " Z"
+
+  return path
+}
+
+/**
+ * Calculate dot positions
+ */
+function getDataPoints(
+  data: (number | null)[],
+  width: number,
+  height: number,
+  padding: number,
+  domainMin: number,
+  domainMax: number
+): { x: number; y: number }[] {
+  if (data.length === 0) return []
+
+  const range = domainMax - domainMin || 1
+  const effectiveHeight = height - padding * 2
+  const effectiveWidth = width - padding * 2
+
+  return data
+    .map((value, index) => {
+      if (value === null) return null
+      return {
+        x: padding + (index / Math.max(data.length - 1, 1)) * effectiveWidth,
+        y: padding + effectiveHeight - ((value - domainMin) / range) * effectiveHeight,
+      }
+    })
+    .filter((p): p is { x: number; y: number } => p !== null)
+}
+
+/**
+ * Sparkline - Minimal inline chart for trends
+ *
+ * A compact visualization designed to be displayed inline with text
+ * or in space-constrained areas. Shows trend shape without axes,
+ * labels, or legends.
+ *
+ * @example
+ * ```tsx
+ * // Basic single-series usage
+ * <Sparkline data={[4, 8, 15, 16, 23, 42]} />
+ *
+ * // With trend coloring
+ * <Sparkline data={[10, 15, 20, 25, 30]} showTrend />
+ *
+ * // Multi-series usage
+ * <Sparkline
+ *   data={[
+ *     { Revenue: 100, Expenses: 80 },
+ *     { Revenue: 120, Expenses: 90 },
+ *     { Revenue: 140, Expenses: 100 },
+ *   ]}
+ *   categories={["Revenue", "Expenses"]}
+ * />
+ *
+ * // Stacked multi-series area
+ * <Sparkline
+ *   data={multiSeriesData}
+ *   categories={["A", "B", "C"]}
+ *   variant="area"
+ *   stack
+ * />
+ * ```
+ */
+export function Sparkline({
+  autoMinValue = true,
+  categories,
+  className,
+  color,
+  colors = DEFAULT_COLORS,
+  connectNulls = false,
+  data,
+  fill = "solid",
+  height: heightProp,
+  maxValue,
+  minValue,
+  showDots = false,
+  showEndDot = false,
+  showTrend = false,
+  size = "sm",
+  stack = false,
+  strokeWidth = 1.5,
+  variant = "line",
+  width: widthProp,
+  ...props
+}: SparklineProps) {
+  // Handle empty data
+  if (data.length === 0) {
+    return null
+  }
+
+  // Get dimensions
+  const dimensions = SIZE_DIMENSIONS[size]
+  const width = widthProp ?? dimensions.width
+  const height = heightProp ?? dimensions.height
+
+  // Padding for dots to not get clipped
+  const padding = showDots || showEndDot ? 3 : 2
+
+  // Check if multi-series mode
+  const isMultiSeries = categories && categories.length > 0 && isMultiSeriesData(data)
+
+  // Generate unique ID for gradients
+  const gradientId = React.useId()
+
+  const viewBox = `0 0 ${String(width)} ${String(height)}`
+
+  // MULTI-SERIES MODE
+  if (isMultiSeries) {
+    const multiData = data as SparklineDataPoint[]
+    const effectiveCategories = categories
+
+    // Calculate domain bounds across all series
+    const allValues = getAllValues(multiData, effectiveCategories, stack)
+    const { max: domainMax, min: domainMin } = getDomainBounds(
+      allValues,
+      autoMinValue,
+      minValue,
+      maxValue
+    )
+
+    // Get stacked values if stacking
+    const stackedValues = stack
+      ? calculateStackedValues(multiData, effectiveCategories)
+      : null
+
+    // Generate aria-label
+    const ariaLabel = `Multi-series chart with ${effectiveCategories.length} series: ${effectiveCategories.join(", ")}`
+
+    // Render based on variant
+    if (variant === "bar") {
+      return (
+        <svg
+          aria-label={ariaLabel}
+          className={cn("overflow-visible", className)}
+          data-slot="sparkline"
+          height={height}
+          role="img"
+          viewBox={viewBox}
+          width={width}
+          {...props}
+        >
+          <MultiSeriesBarSparkline
+            categories={effectiveCategories}
+            colors={colors}
+            data={multiData}
+            domainMax={domainMax}
+            domainMin={domainMin}
+            height={height}
+            stack={stack}
+            width={width}
+          />
+        </svg>
+      )
+    }
+
+    // Line or Area variant
+    return (
+      <svg
+        aria-label={ariaLabel}
+        className={cn("overflow-visible", className)}
+        data-slot="sparkline"
+        height={height}
+        role="img"
+        viewBox={viewBox}
+        width={width}
+        {...props}
+      >
+        {/* Gradient definitions */}
+        {variant === "area" && fill === "gradient" && (
+          <defs>
+            {effectiveCategories.map((category, idx) => (
+              <linearGradient
+                key={`gradient-${category}`}
+                id={`${gradientId}-${category}`}
+                x1="0"
+                x2="0"
+                y1="0"
+                y2="1"
+              >
+                <stop
+                  offset="0%"
+                  stopColor={colors[idx % colors.length]}
+                  stopOpacity={0.4}
+                />
+                <stop
+                  offset="100%"
+                  stopColor={colors[idx % colors.length]}
+                  stopOpacity={0.05}
+                />
+              </linearGradient>
+            ))}
+          </defs>
+        )}
+
+        {/* Render each category - reverse for proper z-order in stacked mode */}
+        {(stack ? [...effectiveCategories].reverse() : effectiveCategories).map(
+          (category, reversedIdx) => {
+            const idx = stack
+              ? effectiveCategories.length - 1 - reversedIdx
+              : reversedIdx
+            const categoryColor = colors[idx % colors.length] ?? "currentColor"
+
+            const categoryValues = stack
+              ? (stackedValues?.get(category) ?? [])
+              : extractCategoryValues(multiData, category, connectNulls)
+
+            // For stacked area, we need the previous category's values as bottom
+            let bottomValues: number[] | undefined
+            if (stack && variant === "area" && idx > 0) {
+              const prevCategory = effectiveCategories[idx - 1]
+              if (prevCategory) {
+                bottomValues = stackedValues?.get(prevCategory)
+              }
+            }
+
+            // Generate area path for stacked
+            if (variant === "area" && fill !== "none" && stack) {
+              const areaPath = generateStackedAreaPath(
+                categoryValues as number[],
+                bottomValues,
+                width,
+                height,
+                padding,
+                domainMin,
+                domainMax
+              )
+
+              const areaFill =
+                fill === "gradient"
+                  ? `url(#${gradientId}-${category})`
+                  : categoryColor
+
+              return (
+                <g key={category}>
+                  <path
+                    d={areaPath}
+                    fill={areaFill}
+                    fillOpacity={fill === "solid" ? 0.3 : 1}
+                  />
+                  <polyline
+                    fill="none"
+                    points={dataToPoints(
+                      categoryValues,
+                      width,
+                      height,
+                      padding,
+                      domainMin,
+                      domainMax,
+                      connectNulls
+                    )}
+                    stroke={categoryColor}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={strokeWidth}
+                  />
+                </g>
+              )
+            }
+
+            // Non-stacked rendering
+            const segments = connectNulls
+              ? [
+                  dataToPoints(
+                    categoryValues,
+                    width,
+                    height,
+                    padding,
+                    domainMin,
+                    domainMax,
+                    true
+                  ),
+                ]
+              : dataToSegments(
+                  categoryValues,
+                  width,
+                  height,
+                  padding,
+                  domainMin,
+                  domainMax
+                ).map((seg) => seg.join(" "))
+
+            return (
+              <g key={category}>
+                {variant === "area" && fill !== "none" && (
+                  <path
+                    d={dataToAreaPath(
+                      categoryValues,
+                      width,
+                      height,
+                      padding,
+                      domainMin,
+                      domainMax
+                    )}
+                    fill={
+                      fill === "gradient"
+                        ? `url(#${gradientId}-${category})`
+                        : categoryColor
+                    }
+                    fillOpacity={fill === "solid" ? 0.2 : 1}
+                  />
+                )}
+                {segments.map((points, segIdx) => (
+                  <polyline
+                    key={`${category}-${segIdx}`}
+                    fill="none"
+                    points={points}
+                    stroke={categoryColor}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={strokeWidth}
+                  />
+                ))}
+                {showDots &&
+                  getDataPoints(
+                    categoryValues,
+                    width,
+                    height,
+                    padding,
+                    domainMin,
+                    domainMax
+                  ).map((point, dotIdx) => (
+                    <circle
+                      key={`dot-${category}-${dotIdx}`}
+                      cx={point.x}
+                      cy={point.y}
+                      fill={categoryColor}
+                      r={strokeWidth + 0.5}
+                    />
+                  ))}
+              </g>
+            )
+          }
+        )}
+      </svg>
+    )
+  }
+
+  // SINGLE-SERIES MODE (original behavior)
+  const singleData = data as number[]
+
+  // Calculate domain bounds
+  const { max: domainMax, min: domainMin } = getDomainBounds(
+    singleData,
+    autoMinValue,
+    minValue,
+    maxValue
+  )
+
+  // Calculate trend and color
+  const trend = getTrend(singleData)
+  const fillColor = getTrendColor(trend, showTrend, color)
+
+  // Generate aria-label
+  const trendText =
+    trend === "positive" ? "upward" : trend === "negative" ? "downward" : "stable"
+  const firstValue = String(singleData[0])
+  const lastValue = String(singleData[singleData.length - 1])
+  const ariaLabel = `Trend chart showing ${trendText} movement from ${firstValue} to ${lastValue}`
+
+  // Render based on variant
+  if (variant === "bar") {
+    return (
+      <svg
+        aria-label={ariaLabel}
+        className={cn("overflow-visible", className)}
+        data-slot="sparkline"
+        height={height}
+        role="img"
+        viewBox={viewBox}
+        width={width}
+        {...props}
+      >
+        <BarSparkline
+          color={fillColor}
+          data={singleData}
+          domainMax={domainMax}
+          domainMin={domainMin}
+          height={height}
+          width={width}
+        />
+      </svg>
+    )
+  }
+
+  const points = dataToPoints(
+    singleData,
+    width,
+    height,
+    padding,
+    domainMin,
+    domainMax,
+    false
+  )
+  const dataPoints = getDataPoints(
+    singleData,
+    width,
+    height,
+    padding,
+    domainMin,
+    domainMax
+  )
+
+  // Determine area fill value
+  const getAreaFill = () => {
+    if (fill === "none") return "none"
+    if (fill === "gradient") return `url(#${gradientId})`
+    return fillColor // solid
+  }
+
+  return (
+    <svg
+      aria-label={ariaLabel}
+      className={cn("overflow-visible", className)}
+      data-slot="sparkline"
+      height={height}
+      role="img"
+      viewBox={viewBox}
+      width={width}
+      {...props}
+    >
+      {/* Gradient definition for area fill */}
+      {variant === "area" && fill === "gradient" && (
+        <defs>
+          <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" stopColor={fillColor} stopOpacity={0.4} />
+            <stop offset="100%" stopColor={fillColor} stopOpacity={0.05} />
+          </linearGradient>
+        </defs>
+      )}
+
+      {variant === "area" && fill !== "none" && (
+        <path
+          d={dataToAreaPath(
+            singleData,
+            width,
+            height,
+            padding,
+            domainMin,
+            domainMax
+          )}
+          fill={getAreaFill()}
+          fillOpacity={fill === "solid" ? 0.2 : 1}
+        />
+      )}
+
+      <polyline
+        fill="none"
+        points={points}
+        stroke={fillColor}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+
+      {showDots &&
+        dataPoints.map((point) => (
+          <circle
+            key={`dot-${String(point.x)}-${String(point.y)}`}
+            cx={point.x}
+            cy={point.y}
+            fill={fillColor}
+            r={strokeWidth + 0.5}
+          />
+        ))}
+
+      {showEndDot &&
+        !showDots &&
+        dataPoints.length > 0 &&
+        (() => {
+          const lastPoint = dataPoints[dataPoints.length - 1]
+          return lastPoint ? (
+            <circle
+              cx={lastPoint.x}
+              cy={lastPoint.y}
+              fill={fillColor}
+              r={strokeWidth + 1}
+            />
+          ) : null
+        })()}
+    </svg>
+  )
+}
+
+/**
+ * Generate stacked area path between current and previous series
+ */
+function generateStackedAreaPath(
+  topValues: number[],
+  bottomValues: number[] | undefined,
+  width: number,
+  height: number,
+  padding: number,
+  domainMin: number,
+  domainMax: number
+): string {
+  if (topValues.length === 0) return ""
+
+  const range = domainMax - domainMin || 1
+  const effectiveHeight = height - padding * 2
+  const effectiveWidth = width - padding * 2
+
+  const topPoints = topValues.map((value, index) => ({
+    x: padding + (index / Math.max(topValues.length - 1, 1)) * effectiveWidth,
+    y: padding + effectiveHeight - ((value - domainMin) / range) * effectiveHeight,
+  }))
+
+  const bottomPoints = bottomValues
+    ? bottomValues.map((value, index) => ({
+        x: padding + (index / Math.max(bottomValues.length - 1, 1)) * effectiveWidth,
+        y: padding + effectiveHeight - ((value - domainMin) / range) * effectiveHeight,
+      }))
+    : topPoints.map((p) => ({ x: p.x, y: height - padding }))
+
+  if (topPoints.length === 0) return ""
+
+  // Start from first top point
+  let path = `M ${topPoints[0]?.x.toFixed(2)},${topPoints[0]?.y.toFixed(2)}`
+
+  // Draw top line
+  for (let i = 1; i < topPoints.length; i++) {
+    const point = topPoints[i]
+    if (point) {
+      path += ` L ${point.x.toFixed(2)},${point.y.toFixed(2)}`
+    }
+  }
+
+  // Draw bottom line in reverse
+  for (let i = bottomPoints.length - 1; i >= 0; i--) {
+    const point = bottomPoints[i]
+    if (point) {
+      path += ` L ${point.x.toFixed(2)},${point.y.toFixed(2)}`
+    }
+  }
+
+  path += " Z"
+  return path
+}
+
+/**
+ * Bar variant sub-component for single-series
+ */
+function BarSparkline({
+  color,
+  data,
+  domainMax,
+  domainMin,
+  height,
+  width,
+}: {
+  color: string
+  data: number[]
+  domainMax: number
+  domainMin: number
+  height: number
+  width: number
+}) {
+  const range = domainMax - domainMin || 1
+  const barWidth = (width - (data.length - 1) * 1) / data.length // 1px gap
+  const padding = 1
+
+  return (
+    <>
+      {data.map((value, index) => {
+        const barHeight = ((value - domainMin) / range) * (height - padding * 2)
+        const x = index * (barWidth + 1)
+        const y = height - padding - barHeight
+
+        return (
+          <rect
+            key={`bar-${String(index)}-${String(value)}`}
+            fill={color}
+            height={Math.max(barHeight, 1)}
+            rx={1}
+            width={Math.max(barWidth - 1, 1)}
+            x={x}
+            y={y}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+/**
+ * Bar variant sub-component for multi-series
+ */
+function MultiSeriesBarSparkline({
+  categories,
+  colors,
+  data,
+  domainMax,
+  domainMin,
+  height,
+  stack,
+  width,
+}: {
+  categories: string[]
+  colors: string[]
+  data: SparklineDataPoint[]
+  domainMax: number
+  domainMin: number
+  height: number
+  stack: boolean
+  width: number
+}) {
+  const range = domainMax - domainMin || 1
+  const padding = 1
+  const groupWidth = (width - (data.length - 1) * 2) / data.length // 2px gap between groups
+
+  if (stack) {
+    // Stacked bars
+    return (
+      <>
+        {data.map((point, pointIndex) => {
+          const x = pointIndex * (groupWidth + 2)
+          let currentY = height - padding
+
+          return (
+            <g key={`group-${pointIndex}`}>
+              {categories.map((category, catIndex) => {
+                const value = point[category]
+                if (typeof value !== "number") return null
+
+                const barHeight = (value / range) * (height - padding * 2)
+                const y = currentY - barHeight
+                currentY = y
+
+                return (
+                  <rect
+                    key={`bar-${pointIndex}-${category}`}
+                    fill={colors[catIndex % colors.length]}
+                    height={Math.max(barHeight, 1)}
+                    rx={1}
+                    width={Math.max(groupWidth - 1, 1)}
+                    x={x}
+                    y={y}
+                  />
+                )
+              })}
+            </g>
+          )
+        })}
+      </>
+    )
+  }
+
+  // Grouped bars
+  const barWidth = (groupWidth - (categories.length - 1) * 1) / categories.length
+
+  return (
+    <>
+      {data.map((point, pointIndex) => {
+        const groupX = pointIndex * (groupWidth + 2)
+
+        return (
+          <g key={`group-${pointIndex}`}>
+            {categories.map((category, catIndex) => {
+              const value = point[category]
+              if (typeof value !== "number") return null
+
+              const barHeight = ((value - domainMin) / range) * (height - padding * 2)
+              const x = groupX + catIndex * (barWidth + 1)
+              const y = height - padding - barHeight
+
+              return (
+                <rect
+                  key={`bar-${pointIndex}-${category}`}
+                  fill={colors[catIndex % colors.length]}
+                  height={Math.max(barHeight, 1)}
+                  rx={1}
+                  width={Math.max(barWidth - 1, 1)}
+                  x={x}
+                  y={y}
+                />
+              )
+            })}
+          </g>
+        )
+      })}
+    </>
+  )
+}
+
+Sparkline.displayName = "Sparkline"