Add untracked chart and schema files

components/charts/hooks/use-chart-export.ts

@@ -0,0 +1,38 @@
+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 };
+}

components/charts/hooks/use-chart-zoom.ts

@@ -0,0 +1,44 @@
+import { useState, useCallback } from 'react';
+import type { ChartZoomState } from '@/lib/types';
+
+export function useChartZoom(dataLength: number) {
+  const [zoomState, setZoomState] = useState<ChartZoomState>({
+    startIndex: 0,
+    endIndex: Math.max(0, dataLength - 1),
+    isZoomed: false
+  });
+
+  const handleZoomChange = useCallback(
+    (brushData: { startIndex?: number; endIndex?: number }) => {
+      if (
+        brushData.startIndex === undefined ||
+        brushData.endIndex === undefined
+      ) {
+        return;
+      }
+
+      setZoomState({
+        startIndex: brushData.startIndex,
+        endIndex: brushData.endIndex,
+        isZoomed:
+          brushData.startIndex !== 0 ||
+          brushData.endIndex !== dataLength - 1
+      });
+    },
+    [dataLength]
+  );
+
+  const resetZoom = useCallback(() => {
+    setZoomState({
+      startIndex: 0,
+      endIndex: Math.max(0, dataLength - 1),
+      isZoomed: false
+    });
+  }, [dataLength]);
+
+  return {
+    zoomState,
+    handleZoomChange,
+    resetZoom
+  };
+}