@etus/ui 0.1.1 → 0.1.3

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

@@ -1,971 +0,0 @@
-"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"