Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/charts/PieChart/template.tsx.j2 */}
import React from 'react';
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

interface DataPoint {
  label: string;
  value: number;
  color?: string;
}

interface PieChartProps {
  data?: Array<{ label: string; value: number; color?: string }>;
  title?: string;
  startFrame: number;
  durationInFrames: number;
}

export const PieChart: React.FC<PieChartProps> = ({
  data = [],
  title,
  startFrame,
  durationInFrames
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const relativeFrame = frame - startFrame;

  // Don't render if outside the time range
  if (durationInFrames > 0 && (frame < startFrame || frame >= startFrame + durationInFrames)) {
    return null;
  }

  if (data.length === 0) {
    return null;
  }

  // Calculate total
  const total = data.reduce((sum, item) => sum + item.value, 0);

  // Chart dimensions
  const chartSize = 500;
  const radius = 200;
  const centerX = chartSize / 2;
  const centerY = chartSize / 2;

  // Entrance animation
  const entranceProgress = spring({
    frame: relativeFrame,
    fps,
    config: { damping: 200, mass: 0.5, stiffness: 200 }
  });

  // Exit animation
  const exitDuration = 20;
  const exitProgress = interpolate(
    relativeFrame,
    [durationInFrames - exitDuration, durationInFrames],
    [1, 0],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }
  );

  const opacity = entranceProgress * exitProgress;
  const scale = interpolate(entranceProgress, [0, 1], [0.5, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp'
  });

  const titleTranslateY = interpolate(entranceProgress, [0, 1], [-30, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp'
  });

  // Default colors from theme
  const defaultColors = [
    '[[ colors.primary[0] ]]', '[[ colors.accent[0] ]]', '[[ colors.primary[1] if colors.primary|length > 1 else colors.accent[1] ]]', '[[ colors.accent[1] if colors.accent|length > 1 else colors.primary[0] ]]',
    '[[ colors.semantic.warning ]]', '[[ colors.semantic.success ]]', '[[ colors.semantic.error ]]', '[[ colors.primary[2] if colors.primary|length > 2 else colors.accent[0] ]]'
  ];

  // Calculate slice paths
  const slices = [];
  let currentAngle = -90; // Start at top

  data.forEach((item, idx) => {
    const percentage = (item.value / total);
    const sliceAngle = percentage * 360;

    slices.push({
      ...item,
      percentage,
      startAngle: currentAngle,
      endAngle: currentAngle + sliceAngle,
      color: item.color || defaultColors[idx % defaultColors.length]
    });

    currentAngle += sliceAngle;
  });

  // Function to create SVG arc path
  const createArcPath = (startAngle: number, endAngle: number, r: number) => {
    const startRad = (startAngle * Math.PI) / 180;
    const endRad = (endAngle * Math.PI) / 180;

    const x1 = centerX + r * Math.cos(startRad);
    const y1 = centerY + r * Math.sin(startRad);
    const x2 = centerX + r * Math.cos(endRad);
    const y2 = centerY + r * Math.sin(endRad);

    const largeArc = endAngle - startAngle > 180 ? 1 : 0;

    return `M ${centerX} ${centerY} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
  };

  return (
    <AbsoluteFill style={{ pointerEvents: 'none' }}>
      <div
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: `translate(-50%, -50%) scale(${scale})`,
          opacity,
          fontFamily: "'[[ "', '".join(typography.primary_font.fonts) ]]'",
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: parseInt('[[ spacing.spacing['2xl'] ]]')
        }}
      >
        {title && (
          <h3
            style={{
              fontSize: '[[ typography.font_sizes[typography.default_resolution].lg ]]',
              fontWeight: '[[ typography.font_weights.bold ]]',
              color: '[[ colors.text.on_dark ]]',
              textAlign: 'center',
              transform: `translateY(${titleTranslateY}px)`,
              textShadow: '0 2px 20px [[ colors.primary[0] ]]80',
              letterSpacing: '[[ typography.letter_spacing.tight ]]',
              margin: 0
            }}
          >
            {title}
          </h3>
        )}

        <div style={{ display: 'flex', alignItems: 'center', gap: parseInt('[[ spacing.spacing['3xl'] ]]') }}>
          {/* Pie chart */}
          <svg
            width={chartSize}
            height={chartSize}
            style={{
              filter: `drop-shadow(0 10px 30px [[ colors.shadow.dark ]])`
            }}
          >
            <defs>
              <filter id="glowPie">
                <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
                <feMerge>
                  <feMergeNode in="coloredBlur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>

            {slices.map((slice, idx) => {
              const sliceDelay = idx * 3;
              const sliceProgress = spring({
                frame: Math.max(0, relativeFrame - sliceDelay),
                fps,
                config: { damping: 150, mass: 0.5, stiffness: 200 }
              });

              const animatedEndAngle = slice.startAngle + (slice.endAngle - slice.startAngle) * sliceProgress;
              const path = createArcPath(slice.startAngle, animatedEndAngle, radius);

              // Label position
              const midAngle = (slice.startAngle + animatedEndAngle) / 2;
              const labelRadius = radius * 0.7;
              const labelX = centerX + labelRadius * Math.cos(midAngle * Math.PI / 180);
              const labelY = centerY + labelRadius * Math.sin(midAngle * Math.PI / 180);

              return (
                <g key={idx}>
                  <path
                    d={path}
                    fill={slice.color}
                    stroke="[[ colors.border.light ]]"
                    strokeWidth="[[ spacing.border_width.medium ]]"
                    filter="url(#glowPie)"
                    opacity={sliceProgress}
                  />
                  {sliceProgress > 0.5 && (
                    <text
                      x={labelX}
                      y={labelY}
                      textAnchor="middle"
                      dominantBaseline="middle"
                      fill="[[ colors.text.on_dark ]]"
                      fontSize="[[ typography.font_sizes[typography.default_resolution].xs ]]"
                      fontWeight="[[ typography.font_weights.bold ]]"
                      fontFamily="'[[ "', '".join(typography.primary_font.fonts) ]]'"
                      opacity={interpolate(sliceProgress, [0.5, 1], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' })}
                    >
                      {Math.round(slice.percentage * 100)}%
                    </text>
                  )}
                </g>
              );
            })}
          </svg>

          {/* Legend */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: parseInt('[[ spacing.spacing.sm ]]') }}>
            {slices.map((slice, idx) => {
              const legendDelay = idx * 3 + 10;
              const legendProgress = spring({
                frame: Math.max(0, relativeFrame - legendDelay),
                fps,
                config: { damping: 150, mass: 0.5, stiffness: 200 }
              });

              return (
                <div
                  key={idx}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: parseInt('[[ spacing.spacing.sm ]]'),
                    opacity: legendProgress,
                    transform: `translateX(${interpolate(legendProgress, [0, 1], [parseInt('[[ spacing.spacing.lg ]]'), 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' })}px)`
                  }}
                >
                  <div
                    style={{
                      width: parseInt('[[ spacing.spacing.lg ]]'),
                      height: parseInt('[[ spacing.spacing.lg ]]'),
                      borderRadius: parseInt('[[ spacing.border_radius.md ]]'),
                      backgroundColor: slice.color,
                      flexShrink: 0
                    }}
                  />
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <div
                      style={{
                        fontSize: '[[ typography.font_sizes[typography.default_resolution].xs ]]',
                        fontWeight: '[[ typography.font_weights.semibold ]]',
                        color: '[[ colors.text.on_dark ]]',
                        lineHeight: '[[ typography.line_heights.tight ]]'
                      }}
                    >
                      {slice.label}
                    </div>
                    <div
                      style={{
                        fontSize: '[[ typography.font_sizes[typography.default_resolution].xs ]]',
                        fontWeight: '[[ typography.font_weights.regular ]]',
                        color: '[[ colors.text.muted ]]'
                      }}
                    >
                      {slice.value} ({Math.round(slice.percentage * 100)}%)
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};