b2fcb16d12
Reverting all my changes that broke the desktop layout. Starting fresh for mobile improvements.
58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
import React, { useRef } from 'react';
|
|
|
|
// Wrapper component that adds PNG export to any chart
|
|
export function ExportableChart({ children, filename = 'chart', className = '' }) {
|
|
const chartRef = useRef(null);
|
|
|
|
const exportAsPNG = () => {
|
|
const chartContainer = chartRef.current;
|
|
if (!chartContainer) return;
|
|
|
|
const canvas = chartContainer.querySelector('canvas');
|
|
if (!canvas) return;
|
|
|
|
// Create a new canvas with white background
|
|
const exportCanvas = document.createElement('canvas');
|
|
const ctx = exportCanvas.getContext('2d');
|
|
|
|
// Set dimensions with padding
|
|
const padding = 20;
|
|
exportCanvas.width = canvas.width + (padding * 2);
|
|
exportCanvas.height = canvas.height + (padding * 2);
|
|
|
|
// Fill white background
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
|
|
|
|
// Draw the chart
|
|
ctx.drawImage(canvas, padding, padding);
|
|
|
|
// Export
|
|
const link = document.createElement('a');
|
|
link.download = `${filename}-${new Date().toISOString().split('T')[0]}.png`;
|
|
link.href = exportCanvas.toDataURL('image/png', 1.0);
|
|
link.click();
|
|
};
|
|
|
|
return (
|
|
<div className={`exportable-chart ${className}`}>
|
|
<button
|
|
className="chart-export-btn"
|
|
onClick={exportAsPNG}
|
|
title="Download as PNG"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
|
<polyline points="7 10 12 15 17 10"/>
|
|
<line x1="12" y1="15" x2="12" y2="3"/>
|
|
</svg>
|
|
</button>
|
|
<div ref={chartRef} className="chart-canvas-wrapper">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ExportableChart;
|