feat: add small image export button (<50KB)

- Add exportChartSmallImage function that uses JPEG compression
- Iteratively reduces quality and scale to achieve <50KB file size
- Add Minimize2 icon button to chart panels (main and comparison)
- Add translations for zh and en locales

Author: claude

public/locales/en/translation.json

@@ -41,6 +41,7 @@
   "resize.drag": "Drag to resize chart height",
   "resize.adjust": "Adjust {{title}} chart height",
   "exportPNG": "Export PNG",
+  "exportSmallImage": "Export small image (<50KB)",
   "copyImage": "Copy image",
   "exportCSV": "Export CSV",
   "copyImageError": "Failed to copy image",

public/locales/zh/translation.json

@@ -41,6 +41,7 @@
   "resize.drag": "拖拽调整图表高度",
   "resize.adjust": "调整 {{title}} 图表高度",
   "exportPNG": "导出 PNG",
+  "exportSmallImage": "导出小图 (<50KB)",
   "copyImage": "复制图片",
   "exportCSV": "导出 CSV",
   "copyImageError": "复制图片失败",

src/components/ChartContainer.jsx

@@ -13,7 +13,7 @@ import {
   Legend,
 } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
-import { ImageDown, Copy, FileDown } from 'lucide-react';
+import { ImageDown, Copy, FileDown, Minimize2 } from 'lucide-react';
 import { getMinSteps } from "../utils/getMinSteps.js";
 import { useTranslation } from 'react-i18next';
 
@@ -118,6 +118,67 @@ export default function ChartContainer({
     link.click();
   }, []);
 
+  const exportChartSmallImage = useCallback((id) => {
+    const chart = chartRefs.current.get(id);
+    if (!chart) return;
+
+    const maxSize = 50 * 1024; // 50KB
+    const canvas = chart.canvas;
+
+    // Create a temporary canvas for resizing
+    const tempCanvas = document.createElement('canvas');
+    const ctx = tempCanvas.getContext('2d');
+
+    // Start with original size and reduce if needed
+    let scale = 1;
+    let quality = 0.8;
+    let dataUrl;
+    let attempts = 0;
+    const maxAttempts = 20;
+
+    // Try to get image under 50KB by adjusting quality and scale
+    while (attempts < maxAttempts) {
+      const width = Math.floor(canvas.width * scale);
+      const height = Math.floor(canvas.height * scale);
+
+      tempCanvas.width = width;
+      tempCanvas.height = height;
+
+      // Draw with white background (for JPEG)
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, width, height);
+      ctx.drawImage(canvas, 0, 0, width, height);
+
+      dataUrl = tempCanvas.toDataURL('image/jpeg', quality);
+
+      // Calculate approximate file size (base64 is ~33% larger than binary)
+      const base64Length = dataUrl.length - 'data:image/jpeg;base64,'.length;
+      const fileSize = Math.ceil(base64Length * 0.75);
+
+      if (fileSize <= maxSize) {
+        break;
+      }
+
+      // Reduce quality first, then scale
+      if (quality > 0.3) {
+        quality -= 0.1;
+      } else if (scale > 0.3) {
+        scale -= 0.1;
+        quality = 0.7; // Reset quality for new scale
+      } else {
+        // Can't reduce further, use what we have
+        break;
+      }
+
+      attempts++;
+    }
+
+    const link = document.createElement('a');
+    link.href = dataUrl;
+    link.download = `${id}-small.jpg`;
+    link.click();
+  }, []);
+
   const copyChartImage = useCallback(async (id) => {
     const chart = chartRefs.current.get(id);
     if (!chart || !navigator?.clipboard) return;
@@ -764,6 +825,15 @@ export default function ChartContainer({
           >
             <ImageDown size={16} />
           </button>
+          <button
+            type="button"
+            className="p-1 rounded-md text-gray-600 hover:text-green-600 hover:bg-gray-100"
+            onClick={() => exportChartSmallImage(`metric-comp-${idx}`)}
+            aria-label={t('exportSmallImage')}
+            title={t('exportSmallImage')}
+          >
+            <Minimize2 size={16} />
+          </button>
           <button
             type="button"
             className="p-1 rounded-md text-gray-600 hover:text-blue-600 hover:bg-gray-100"
@@ -814,6 +884,15 @@ export default function ChartContainer({
               >
                 <ImageDown size={16} />
               </button>
+              <button
+                type="button"
+                className="p-1 rounded-md text-gray-600 hover:text-green-600 hover:bg-gray-100"
+                onClick={() => exportChartSmallImage(`metric-${idx}`)}
+                aria-label={t('exportSmallImage')}
+                title={t('exportSmallImage')}
+              >
+                <Minimize2 size={16} />
+              </button>
               <button
                 type="button"
                 className="p-1 rounded-md text-gray-600 hover:text-blue-600 hover:bg-gray-100"