import React from "react"; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, } from "recharts"; /** * ArchivalStorageChart * - Clean, accessible layout matching the tone of the toolkit pages * - Precomputes range values so Recharts uses simple dataKeys * - Custom tooltip that respects color-coded series */ const ArchivalStorageChart = () => { const raw = [ { material: "Paper & Books", tempMin: 65, tempMax: 70, humidityMin: 30, humidityMax: 50, color: "#8B4513", }, { material: "Photographs (B&W)", tempMin: 65, tempMax: 70, humidityMin: 30, humidityMax: 40, color: "#2C3E50", }, { material: "Photographs (Color)", // kept your values but computed ranges so chart rendering is stable tempMin: 35, tempMax: 40, humidityMin: 30, humidityMax: 40, color: "#E74C3C", }, { material: "Magnetic Media", tempMin: 60, tempMax: 70, humidityMin: 30, humidityMax: 50, color: "#3498DB", }, { material: "Film & Negatives", tempMin: 35, tempMax: 45, humidityMin: 30, humidityMax: 40, color: "#9B59B6", }, { material: "Textiles", tempMin: 65, tempMax: 70, humidityMin: 45, humidityMax: 55, color: "#16A085", }, ]; // compute range fields so Recharts can use simple dataKey strings const data = raw.map((d) => ({ ...d, tempRange: d.tempMax - d.tempMin, humidityRange: d.humidityMax - d.humidityMin, })); const CustomTooltip = ({ active, payload }) => { if (!active || !payload || !payload.length) return null; // payload[0] will contain the data item for the hovered row const item = payload[0].payload; return ( ); }; return (

Archival Storage Environment Standards

Recommended temperature and relative-humidity ranges for common archival materials. These ranges support long-term stability and slow chemical deterioration.

{/* Temperature chart */}

Temperature Ranges (°F)

} /> {/* base filler to offset the stacked bar */} {data.map((entry, idx) => ( ))}
{/* Humidity chart */}

Relative Humidity Ranges (% RH)

} /> {data.map((entry, idx) => ( ))}
{/* Key guidelines */}
); }; export default ArchivalStorageChart;