39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { useCallback, useRef } from 'react';
|
|
import { toPng } from 'html-to-image';
|
|
import { getChartColors, getComputedColors } from '../utils/chart-colors';
|
|
|
|
export function useChartExport() {
|
|
const chartRef = useRef<HTMLDivElement>(null);
|
|
|
|
const exportChart = useCallback(async (filename: string = 'chart.png') => {
|
|
if (!chartRef.current) {
|
|
console.error('Chart ref not available');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Get background color from CSS variable
|
|
const colors = getChartColors();
|
|
const computedColors = getComputedColors(colors);
|
|
const backgroundColor = computedColors.tooltipBg || colors.tooltipBg;
|
|
|
|
const dataUrl = await toPng(chartRef.current, {
|
|
quality: 1.0,
|
|
pixelRatio: 2, // High DPI export
|
|
backgroundColor: backgroundColor
|
|
});
|
|
|
|
// Create download link
|
|
const link = document.createElement('a');
|
|
link.download = filename;
|
|
link.href = dataUrl;
|
|
link.click();
|
|
} catch (error) {
|
|
console.error('Failed to export chart:', error);
|
|
throw error;
|
|
}
|
|
}, []);
|
|
|
|
return { chartRef, exportChart };
|
|
}
|