evidence-scale-card.tsx)¶

Overview¶

A React component that displays evidence scale metrics in a card format with a pie chart visualization. The component combines responsive charts with color-coded metrics display for easy data interpretation.

Features¶

Pie chart visualization
Responsive layout
Color-coded metrics
Percentage labels
Gradient header
Metric summaries
Data visualization
Custom labels
Flexible sizing
Mobile optimization

Implementation¶

type renderCustomizedLabelProps = {
  cx: number;
  cy: number;
  midAngle: number;
  innerRadius: number;
  outerRadius: number;
  percent: number;
};

const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
  cx,
  cy,
  midAngle,
  innerRadius,
  outerRadius,
  percent,
}: renderCustomizedLabelProps) => {
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);

  return (
    <text
      x={x}
      y={y}
      fill="white"
      textAnchor={x > cx ? "start" : "end"}
      dominantBaseline="central"
      className="text-xs font-medium"
    >
      {`${(percent * 100).toFixed(0)}%`}
    </text>
  );
};

type EvidenceScaleCardProps = {
  data: EvidenceScaleData;
};

export function EvidenceScaleCardComponent({ data }: EvidenceScaleCardProps) {
  return (
    <Card className="w-full">
      <CardHeader className="bg-gradient-to-r from-[#072F75] to-[#2381FB] text-white rounded-t-lg">
        <CardTitle className="text-2xl font-bold">Evidence Scale</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
          <ResponsiveContainer width="100%" height={200} className="max-w-[200px]">
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={renderCustomizedLabel}
                outerRadius={80}
                fill="#8884d8"
                dataKey="value"
              >
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
          <div className="space-y-4 w-full sm:w-1/2">
            {data.map((item) => (
              <div
                key={item.name}
                className="flex items-center justify-between p-3 rounded-lg text-white"
                style={{ backgroundColor: item.color }}
              >
                <span className="font-semibold">{item.name}</span>
                <span className="text-2xl font-bold">{item.value}</span>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

Dependencies¶

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts"
import { EvidenceScaleData } from "./evidenceScaleData"

Components Used¶

Notes¶

Uses Recharts for visualization
Implements responsive design
Handles percentage calculations
Manages label positioning
Supports color coding
Provides metric summaries
Ensures accessibility
Maintains data consistency
Optimizes for mobile
Handles data validation

Props Description¶

interface EvidenceScaleData {
  name: string;
  value: number;
  color: string;
}

Components Using This¶

Chart Configuration¶

Pie chart with custom labels
Responsive container (200px height)
Centered positioning
80px outer radius
No label lines
Custom color cells
Percentage display

Notes¶

Supports dynamic data updates
Implements responsive design
Uses mathematical calculations for label positioning
Features accessible text elements
Maintains consistent color scheme
Handles various screen sizes
Supports touch interactions
Implements smooth animations