alexui 1.0.0

package/components/ChartShowcase.tsx

@@ -0,0 +1,700 @@
+import React, { useState, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface ChartDataItem {
+  label: string;
+  value: number;
+  secondary?: string;
+}
+
+export interface ChartShowcaseProps {
+  data?: ChartDataItem[];
+  type?: 'line' | 'bar' | 'pie' | 'all';
+  className?: string;
+}
+
+const DEFAULT_DATA: ChartDataItem[] = [
+  { label: 'Ene', value: 340, secondary: 'Registro Inicial' },
+  { label: 'Feb', value: 450, secondary: 'Crecimiento Orgánico' },
+  { label: 'Mar', value: 290, secondary: 'Ajuste de Mercado' },
+  { label: 'Abr', value: 580, secondary: 'Campaña Viral' },
+  { label: 'May', value: 710, secondary: 'Lanzamiento V2' },
+  { label: 'Jun', value: 640, secondary: 'Estabilidad de Temporada' },
+  { label: 'Jul', value: 890, secondary: 'Pico Histórico' }
+];
+
+export const ChartShowcase: React.FC<ChartShowcaseProps> = ({
+  data = DEFAULT_DATA,
+  type = 'all',
+  className = ''
+}) => {
+  const [activeChart, setActiveChart] = useState<'line' | 'bar' | 'pie'>(
+    type === 'all' ? 'line' : type
+  );
+
+  return (
+    <div className={`w-full bg-bg-card/30 border border-border-app/40 rounded-3xl p-6 ${className}`}>
+      
+      {/* Chart controls headers */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pb-6 border-b border-border-app/30">
+        <div>
+          <h3 className="text-sm font-black text-text-main font-display flex items-center gap-2">
+            <span className="w-2 h-4 bg-accent rounded-full inline-block" />
+            Estadísticas y Analíticas
+          </h3>
+          <p className="text-[11px] text-text-muted mt-0.5 font-medium">
+            Representación interactiva sin dependencias externas
+          </p>
+        </div>
+
+        {/* Tab Buttons to toggle between charts */}
+        {type === 'all' && (
+          <div className="flex bg-bg-app/40 border border-border-app/30 rounded-xl p-1 text-[11px] font-bold">
+            {(['line', 'bar', 'pie'] as const).map((mode) => (
+              <button
+                key={mode}
+                onClick={() => setActiveChart(mode)}
+                className={`px-3 py-1.5 rounded-lg capitalize transition-all cursor-pointer ${
+                  activeChart === mode
+                    ? 'bg-accent text-white shadow-sm'
+                    : 'text-text-muted hover:text-text-main'
+                }`}
+              >
+                {mode === 'line' ? 'Líneas' : mode === 'bar' ? 'Barras' : 'Torta'}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Render selected chart body */}
+      <div className="pt-6 min-h-[300px] flex items-center justify-center relative">
+        <AnimatePresence mode="wait">
+          {activeChart === 'line' && (
+            <motion.div
+              key="line"
+              initial={{ opacity: 0, scale: 0.98 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.3 }}
+              className="w-full h-full flex flex-col justify-end"
+            >
+              <LineChartComponent data={data} />
+            </motion.div>
+          )}
+
+          {activeChart === 'bar' && (
+            <motion.div
+              key="bar"
+              initial={{ opacity: 0, scale: 0.98 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.3 }}
+              className="w-full h-full"
+            >
+              <BarChartComponent data={data} />
+            </motion.div>
+          )}
+
+          {activeChart === 'pie' && (
+            <motion.div
+              key="pie"
+              initial={{ opacity: 0, scale: 0.98 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.3 }}
+              className="w-full h-full flex justify-center"
+            >
+              <PieChartComponent data={data} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+    </div>
+  );
+};
+
+// ==========================================
+// 1. LINE CHART COMPONENT WITH BEZIER CURVE
+// ==========================================
+const LineChartComponent: React.FC<{ data: ChartDataItem[] }> = ({ data }) => {
+  const containerRef = useRef<SVGSVGElement>(null);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+
+  const values = data.map((d) => d.value);
+  const maxValue = Math.max(...values, 100) * 1.15;
+  const minValue = Math.min(...values, 0) * 0.85;
+  const valueRange = maxValue - minValue;
+
+  const width = 600;
+  const height = 240;
+  const paddingLeft = 45;
+  const paddingRight = 20;
+  const paddingTop = 20;
+  const paddingBottom = 30;
+
+  const chartWidth = width - paddingLeft - paddingRight;
+  const chartHeight = height - paddingTop - paddingBottom;
+
+  // Calculate coordinates for points
+  const points = data.map((item, index) => {
+    const x = paddingLeft + (index / (data.length - 1)) * chartWidth;
+    const y = paddingTop + chartHeight - ((item.value - minValue) / valueRange) * chartHeight;
+    return { x, y, item, index };
+  });
+
+  // Calculate smooth Bezier Curve Path points (Catmull-Rom or cubic spline approximation)
+  const getBezierPath = () => {
+    if (points.length === 0) return '';
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 0; i < points.length - 1; i++) {
+      const curr = points[i];
+      const next = points[i + 1];
+      // Control points for curvature
+      const cpX1 = curr.x + (next.x - curr.x) / 2;
+      const cpY1 = curr.y;
+      const cpX2 = curr.x + (next.x - curr.x) / 2;
+      const cpY2 = next.y;
+      d += ` C ${cpX1} ${cpY1}, ${cpX2} ${cpY2}, ${next.x} ${next.y}`;
+    }
+    return d;
+  };
+
+  const getAreaPath = (linePath: string) => {
+    if (!linePath) return '';
+    return `${linePath} L ${points[points.length - 1].x} ${height - paddingBottom} L ${points[0].x} ${height - paddingBottom} Z`;
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const svgMouseX = (mouseX / rect.width) * width;
+
+    // Find nearest point
+    let nearestIdx = 0;
+    let minDistance = Infinity;
+
+    points.forEach((p, idx) => {
+      const dist = Math.abs(p.x - svgMouseX);
+      if (dist < minDistance) {
+        minDistance = dist;
+        nearestIdx = idx;
+      }
+    });
+
+    setHoveredIndex(nearestIdx);
+    setTooltipPos({
+      x: points[nearestIdx].x,
+      y: points[nearestIdx].y
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredIndex(null);
+  };
+
+  const linePathD = getBezierPath();
+  const areaPathD = getAreaPath(linePathD);
+
+  // Y-axis grid labels
+  const gridLinesCount = 4;
+  const gridValues = Array.from({ length: gridLinesCount + 1 }).map((_, idx) => {
+    const val = minValue + (idx / gridLinesCount) * valueRange;
+    const y = paddingTop + chartHeight - (idx / gridLinesCount) * chartHeight;
+    return { val: Math.round(val), y };
+  });
+
+  return (
+    <div className="relative w-full overflow-visible">
+      
+      {/* SVG Canvas Container */}
+      <svg
+        ref={containerRef}
+        viewBox={`0 0 ${width} ${height}`}
+        className="w-full h-auto overflow-visible select-none"
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+      >
+        <defs>
+          {/* Gradient for area under the line */}
+          <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--color-accent)" stopOpacity="0.28" />
+            <stop offset="100%" stopColor="var(--color-accent)" stopOpacity="0.0" />
+          </linearGradient>
+          {/* Line Stroke gradient */}
+          <linearGradient id="lineGradient" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="var(--color-accent)" />
+            <stop offset="100%" stopColor="#ec4899" />
+          </linearGradient>
+        </defs>
+
+        {/* Grid lines */}
+        {gridValues.map((g, idx) => (
+          <g key={idx}>
+            <line
+              x1={paddingLeft}
+              y1={g.y}
+              x2={width - paddingRight}
+              y2={g.y}
+              className="stroke-border-app/30"
+              strokeWidth="1"
+              strokeDasharray="4 4"
+            />
+            <text
+              x={paddingLeft - 8}
+              y={g.y + 3}
+              textAnchor="end"
+              className="fill-text-muted/70 text-[9px] font-mono"
+            >
+              {g.val}
+            </text>
+          </g>
+        ))}
+
+        {/* X-axis indicators */}
+        {points.map((p, idx) => (
+          <text
+            key={idx}
+            x={p.x}
+            y={height - 10}
+            textAnchor="middle"
+            className="fill-text-muted text-[10px] font-black"
+          >
+            {p.item.label}
+          </text>
+        ))}
+
+        {/* Area fill path with mount animation */}
+        <motion.path
+          initial={{ pathLength: 0, opacity: 0 }}
+          animate={{ pathLength: 1, opacity: 1 }}
+          transition={{ duration: 1.2, ease: 'easeOut' }}
+          d={areaPathD}
+          fill="url(#areaGradient)"
+        />
+
+        {/* Main Line path */}
+        <motion.path
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 1.2, ease: 'easeOut' }}
+          d={linePathD}
+          fill="none"
+          stroke="url(#lineGradient)"
+          strokeWidth="3.5"
+          strokeLinecap="round"
+        />
+
+        {/* Dot nodes on intersections */}
+        {points.map((p, idx) => {
+          const isHovered = hoveredIndex === idx;
+          return (
+            <motion.circle
+              key={idx}
+              cx={p.x}
+              cy={p.y}
+              r={3.5}
+              animate={{ scale: isHovered ? 1.7 : 1 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+              className="fill-bg-card stroke-accent"
+              strokeWidth={isHovered ? 2.5 : 2}
+              style={{
+                filter: isHovered ? 'drop-shadow(0 0 4px var(--color-accent))' : undefined
+              }}
+            />
+          );
+        })}
+
+        {/* Vertical hover marker guide line */}
+        {hoveredIndex !== null && (
+          <line
+            x1={tooltipPos.x}
+            y1={paddingTop}
+            x2={tooltipPos.x}
+            y2={height - paddingBottom}
+            className="stroke-accent/20"
+            strokeWidth="1.5"
+            strokeDasharray="2 2"
+          />
+        )}
+      </svg>
+
+      {/* Elastic floating tooltip popup */}
+      <AnimatePresence>
+        {hoveredIndex !== null && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{
+              opacity: 1,
+              y: 0,
+              scale: 1,
+              // Convert SVG coords to relative percentage values
+              left: `${(tooltipPos.x / width) * 100}%`,
+              top: `${(tooltipPos.y / height) * 100 - 30}%`
+            }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{ type: 'spring', stiffness: 400, damping: 28 }}
+            className="absolute transform -translate-x-1/2 -translate-y-full z-30 pointer-events-none"
+          >
+            <div className="glass border border-accent/30 rounded-xl px-3 py-1.5 shadow-lg flex flex-col items-center">
+              <span className="text-[10px] font-black text-text-main">
+                {data[hoveredIndex].label}
+              </span>
+              <span className="text-xs font-black text-accent">
+                {data[hoveredIndex].value} items
+              </span>
+              {data[hoveredIndex].secondary && (
+                <span className="text-[8px] text-text-muted font-bold font-mono">
+                  {data[hoveredIndex].secondary}
+                </span>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+    </div>
+  );
+};
+
+// ==========================================
+// 2. BAR CHART COMPONENT (VERTICAL BARS)
+// ==========================================
+const BarChartComponent: React.FC<{ data: ChartDataItem[] }> = ({ data }) => {
+  const containerRef = useRef<SVGSVGElement>(null);
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+
+  const values = data.map((d) => d.value);
+  const maxValue = Math.max(...values, 100) * 1.1;
+
+  const width = 600;
+  const height = 240;
+  const paddingLeft = 45;
+  const paddingRight = 20;
+  const paddingTop = 20;
+  const paddingBottom = 30;
+
+  const chartWidth = width - paddingLeft - paddingRight;
+  const chartHeight = height - paddingTop - paddingBottom;
+
+  const barWidth = (chartWidth / data.length) * 0.6;
+  const barGap = (chartWidth / data.length) * 0.4;
+
+  // Generate path with rounded top corners and a flat bottom
+  const getBarPath = (bx: number, by: number, bw: number, bh: number, r: number) => {
+    if (bh <= 0) return `M ${bx} ${by} V ${by} H ${bx + bw} V ${by} Z`;
+    const radius = Math.min(r, bh, bw / 2);
+    return `
+      M ${bx} ${by + bh}
+      V ${by + radius}
+      a ${radius} ${radius} 0 0 1 ${radius} -${radius}
+      H ${bx + bw - radius}
+      a ${radius} ${radius} 0 0 1 ${radius} ${radius}
+      V ${by + bh}
+      Z
+    `.replace(/\s+/g, ' ').trim();
+  };
+
+  return (
+    <div className="w-full relative overflow-visible">
+      
+      <svg
+        ref={containerRef}
+        viewBox={`0 0 ${width} ${height}`}
+        className="w-full h-auto overflow-visible select-none"
+      >
+        <defs>
+          <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--color-accent)" />
+            <stop offset="100%" stopColor="var(--color-accent)" stopOpacity="0.4" />
+          </linearGradient>
+          <linearGradient id="barHoverGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#ec4899" />
+            <stop offset="100%" stopColor="var(--color-accent)" />
+          </linearGradient>
+        </defs>
+
+        {/* Horizontal background lines */}
+        {[0, 1, 2, 3, 4].map((i) => {
+          const y = paddingTop + (i / 4) * chartHeight;
+          const val = Math.round(maxValue - (i / 4) * maxValue);
+          return (
+            <g key={i}>
+              <line
+                x1={paddingLeft}
+                y1={y}
+                x2={width - paddingRight}
+                y2={y}
+                className="stroke-border-app/30"
+                strokeWidth="1"
+              />
+              <text
+                x={paddingLeft - 8}
+                y={y + 3}
+                textAnchor="end"
+                className="fill-text-muted/70 text-[9px] font-mono"
+              >
+                {val}
+              </text>
+            </g>
+          );
+        })}
+
+        {/* Solid baseline on the X Axis */}
+        <line
+          x1={paddingLeft}
+          y1={paddingTop + chartHeight}
+          x2={width - paddingRight}
+          y2={paddingTop + chartHeight}
+          className="stroke-border-app/80"
+          strokeWidth="1.5"
+        />
+
+        {/* Bars drawing */}
+        {data.map((item, idx) => {
+          const x = paddingLeft + idx * (barWidth + barGap) + barGap / 2;
+          const barHeight = (item.value / maxValue) * chartHeight;
+          const y = paddingTop + chartHeight - barHeight;
+          const isHovered = hoveredIdx === idx;
+
+          const barD = getBarPath(x, y, barWidth, barHeight, 6);
+          const initialBarD = getBarPath(x, paddingTop + chartHeight, barWidth, 0, 6);
+
+          return (
+            <g
+              key={idx}
+              onMouseEnter={() => {
+                setHoveredIdx(idx);
+                setTooltipPos({
+                  x: x + barWidth / 2,
+                  y: y
+                });
+              }}
+              onMouseLeave={() => setHoveredIdx(null)}
+              className="cursor-pointer"
+            >
+              {/* Rounded-top path */}
+              <motion.path
+                initial={{ d: initialBarD }}
+                animate={{ d: barD }}
+                transition={{ type: 'spring', stiffness: 80, damping: 14, delay: idx * 0.03 }}
+                className="transition-all"
+                fill={isHovered ? 'url(#barHoverGradient)' : 'url(#barGradient)'}
+                style={{
+                  filter: isHovered ? 'drop-shadow(0 0 8px var(--color-accent))' : undefined
+                }}
+              />
+
+              {/* X Axis Labels */}
+              <text
+                x={x + barWidth / 2}
+                y={height - 10}
+                textAnchor="middle"
+                className={`text-[10px] font-black transition-colors duration-200 ${
+                  isHovered ? 'fill-accent font-extrabold' : 'fill-text-muted'
+                }`}
+              >
+                {item.label}
+              </text>
+            </g>
+          );
+        })}
+      </svg>
+
+      {/* Elastic floating tooltip popup */}
+      <AnimatePresence>
+        {hoveredIdx !== null && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{
+              opacity: 1,
+              y: 0,
+              scale: 1,
+              left: `${(tooltipPos.x / width) * 100}%`,
+              top: `${(tooltipPos.y / height) * 100 - 30}%`
+            }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{ type: 'spring', stiffness: 400, damping: 28 }}
+            className="absolute transform -translate-x-1/2 -translate-y-full z-30 pointer-events-none"
+          >
+            <div className="glass border border-accent/30 rounded-xl px-3 py-1.5 shadow-lg flex flex-col items-center">
+              <span className="text-[10px] font-black text-text-main">
+                {data[hoveredIdx].label}
+              </span>
+              <span className="text-xs font-black text-accent">
+                {data[hoveredIdx].value} items
+              </span>
+              {data[hoveredIdx].secondary && (
+                <span className="text-[8px] text-text-muted font-bold font-mono">
+                  {data[hoveredIdx].secondary}
+                </span>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+    </div>
+  );
+};
+
+// ==========================================
+// 3. PIE/DONUT CHART COMPONENT
+// ==========================================
+const PieChartComponent: React.FC<{ data: ChartDataItem[] }> = ({ data }) => {
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+
+  const total = data.reduce((acc, curr) => acc + curr.value, 0);
+
+  // Predefined colorful list of visual colors representing theme integration
+  const colors = [
+    'var(--color-accent)',
+    '#3b82f6', // blue
+    '#10b981', // green
+    '#f59e0b', // amber
+    '#ec4899', // pink
+    '#8b5cf6', // purple
+    '#ef4444'  // red
+  ];
+
+  const size = 220;
+  const radius = 90;
+  const center = size / 2;
+
+  let accumulatedAngle = -90; // Start at the top
+
+  const slices = data.map((item, idx) => {
+    const percentage = item.value / total;
+    const angle = percentage * 360;
+    const startAngle = accumulatedAngle;
+    const endAngle = accumulatedAngle + angle;
+    accumulatedAngle = endAngle;
+
+    const startRad = (startAngle * Math.PI) / 180;
+    const endRad = (endAngle * Math.PI) / 180;
+
+    const x1 = center + radius * Math.cos(startRad);
+    const y1 = center + radius * Math.sin(startRad);
+    const x2 = center + radius * Math.cos(endRad);
+    const y2 = center + radius * Math.sin(endRad);
+
+    const largeArcFlag = angle > 180 ? 1 : 0;
+
+    // Curved Wedge Path formula
+    const pathData = `M ${center} ${center} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`;
+
+    const midAngle = startAngle + angle / 2;
+    const midRad = (midAngle * Math.PI) / 180;
+
+    return {
+      pathData,
+      item,
+      percentage,
+      midRad,
+      color: colors[idx % colors.length],
+      index: idx
+    };
+  });
+
+  return (
+    <div className="flex flex-col sm:flex-row items-center gap-8 py-2 w-full max-w-[450px] justify-center select-none">
+      
+      {/* SVG Canvas for Donut */}
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg viewBox={`0 0 ${size} ${size}`} className="w-full h-full overflow-visible">
+          {slices.map((slice, idx) => {
+            const isHovered = hoveredIdx === idx;
+            // Pop out effect on hover (small translation along the wedge midangle vector)
+            const popOffset = isHovered ? 8 : 0;
+            const dx = popOffset * Math.cos(slice.midRad);
+            const dy = popOffset * Math.sin(slice.midRad);
+
+            return (
+              <g
+                key={idx}
+                onMouseEnter={() => setHoveredIdx(idx)}
+                onMouseLeave={() => setHoveredIdx(null)}
+                className="cursor-pointer"
+                style={{
+                  transform: `translate(${dx}px, ${dy}px)`,
+                  transition: 'transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)'
+                }}
+              >
+                <motion.path
+                  initial={{ scale: 0.9, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  transition={{ type: 'spring', stiffness: 100, damping: 15, delay: idx * 0.04 }}
+                  d={slice.pathData}
+                  fill={slice.color}
+                  stroke="var(--color-bg-card, #1c1917)"
+                  strokeWidth="2.5"
+                  className="transition-colors duration-200"
+                  style={{
+                    filter: isHovered ? `drop-shadow(0 0 10px ${slice.color}60)` : undefined,
+                    opacity: hoveredIdx !== null && !isHovered ? 0.6 : 1
+                  }}
+                />
+              </g>
+            );
+          })}
+
+          {/* Center mask circle to create Donut hole effect */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius * 0.52}
+            className="fill-bg-app border border-border-app"
+            style={{ fill: 'var(--color-bg-card)' }}
+          />
+        </svg>
+
+        {/* Center label statistics text */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+          <span className="text-[10px] font-black text-text-muted uppercase tracking-widest">
+            Total
+          </span>
+          <span className="text-xl font-black text-text-main font-mono">
+            {total}
+          </span>
+        </div>
+      </div>
+
+      {/* Interactive side Legend indicator list */}
+      <div className="flex flex-col gap-2 flex-grow min-w-[140px]">
+        {slices.map((slice, idx) => {
+          const isHovered = hoveredIdx === idx;
+          return (
+            <div
+              key={idx}
+              onMouseEnter={() => setHoveredIdx(idx)}
+              onMouseLeave={() => setHoveredIdx(null)}
+              className={`flex items-center justify-between p-2 rounded-xl border border-transparent cursor-pointer transition-all duration-200 ${
+                isHovered 
+                  ? 'bg-white/5 border-border-app/30 scale-105' 
+                  : 'hover:bg-white/5'
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <span
+                  className="w-3 h-3 rounded-md flex-shrink-0"
+                  style={{ backgroundColor: slice.color }}
+                />
+                <span className="text-xs font-bold text-text-main">
+                  {slice.item.label}
+                </span>
+              </div>
+              <span className="text-xs font-bold font-mono text-text-muted">
+                {Math.round(slice.percentage * 100)}%
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+    </div>
+  );
+};