Create app.py

app.py

@@ -0,0 +1,566 @@
+import React, { useState, useEffect } from 'react';
+import {
+  LineChart, Line, BarChart, Bar, PieChart, Pie, AreaChart, Area,
+  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+  ScatterChart, Scatter, Cell
+} from 'recharts';
+import Papa from 'papaparse';
+
+// 主色調
+const COLORS = ['#8884d8', '#82ca9d', '#ffc658', '#ff8042', '#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#a4de6c'];
+
+const App = () => {
+  const [data, setData] = useState([]);
+  const [headers, setHeaders] = useState([]);
+  const [chartType, setChartType] = useState('bar');
+  const [xAxis, setXAxis] = useState('');
+  const [yAxis, setYAxis] = useState('');
+  const [pieColumn, setPieColumn] = useState('');
+  const [tableData, setTableData] = useState([['', ''], ['', '']]);
+  const [customization, setCustomization] = useState({
+    chartWidth: 600,
+    chartHeight: 400,
+    fontSize: 12,
+    legendPosition: 'bottom',
+    colorScheme: COLORS,
+    showGrid: true,
+    showTooltip: true,
+    showLegend: true,
+  });
+
+  useEffect(() => {
+    // 表格發生變化時更新數據
+    processTableData();
+  }, [tableData]);
+
+  const processTableData = () => {
+    if (tableData.length <= 1) return;
+    
+    const headers = tableData[0].filter(h => h.trim() !== '');
+    if (headers.length < 1) return;
+    
+    setHeaders(headers);
+    
+    const processedData = [];
+    
+    for (let i = 1; i < tableData.length; i++) {
+      if (tableData[i].some(cell => cell.trim() !== '')) {
+        const rowData = {};
+        
+        tableData[i].forEach((cell, cellIndex) => {
+          if (cellIndex < headers.length) {
+            // 嘗試將數字字符串轉換為數字
+            const value = cell.trim();
+            const numValue = parseFloat(value);
+            rowData[headers[cellIndex]] = isNaN(numValue) ? value : numValue;
+          }
+        });
+        
+        processedData.push(rowData);
+      }
+    }
+    
+    setData(processedData);
+    
+    // 預設第一個列作為X軸，第二個列作為Y軸
+    if (headers.length >= 1 && !xAxis) {
+      setXAxis(headers[0]);
+    }
+    
+    if (headers.length >= 2 && !yAxis) {
+      setYAxis(headers[1]);
+    }
+    
+    if (headers.length >= 1 && !pieColumn) {
+      setPieColumn(headers[0]);
+    }
+  };
+
+  const addRow = () => {
+    setTableData([...tableData, Array(tableData[0].length).fill('')]);
+  };
+
+  const addColumn = () => {
+    setTableData(tableData.map(row => [...row, '']));
+  };
+
+  const handleCellChange = (rowIndex, colIndex, value) => {
+    const newData = [...tableData];
+    newData[rowIndex][colIndex] = value;
+    setTableData(newData);
+  };
+
+  const handleCustomizationChange = (key, value) => {
+    setCustomization({
+      ...customization,
+      [key]: value
+    });
+  };
+
+  const handlePasteData = (e) => {
+    e.preventDefault();
+    const clipboard = e.clipboardData.getData('text');
+    const rows = clipboard.split('\n').filter(row => row.trim());
+    
+    if (rows.length > 0) {
+      const pastedData = rows.map(row => row.split('\t'));
+      
+      // 確保所有行有相同的列數
+      const maxCols = Math.max(...pastedData.map(row => row.length));
+      const normalizedData = pastedData.map(row => {
+        while (row.length < maxCols) {
+          row.push('');
+        }
+        return row;
+      });
+      
+      setTableData(normalizedData);
+    }
+  };
+
+  const handleFileUpload = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      Papa.parse(file, {
+        complete: (results) => {
+          if (results.data && results.data.length > 0) {
+            setTableData(results.data);
+          }
+        }
+      });
+    }
+  };
+
+  const renderChart = () => {
+    if (data.length === 0) {
+      return <div className="p-4 text-center">請輸入或粘貼數據以生成圖表</div>;
+    }
+
+    const { chartWidth, chartHeight, fontSize, showGrid, showTooltip, showLegend, legendPosition, colorScheme } = customization;
+    
+    const style = {
+      fontSize: `${fontSize}px`
+    };
+
+    switch (chartType) {
+      case 'bar':
+        return (
+          <ResponsiveContainer width={chartWidth} height={chartHeight}>
+            <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+              {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+              <XAxis dataKey={xAxis} style={style} />
+              <YAxis style={style} />
+              {showTooltip && <Tooltip />}
+              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
+              <Bar dataKey={yAxis} fill={colorScheme[0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        );
+      
+      case 'line':
+        return (
+          <ResponsiveContainer width={chartWidth} height={chartHeight}>
+            <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+              {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+              <XAxis dataKey={xAxis} style={style} />
+              <YAxis style={style} />
+              {showTooltip && <Tooltip />}
+              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
+              <Line type="monotone" dataKey={yAxis} stroke={colorScheme[0]} activeDot={{ r: 8 }} />
+            </LineChart>
+          </ResponsiveContainer>
+        );
+      
+      case 'area':
+        return (
+          <ResponsiveContainer width={chartWidth} height={chartHeight}>
+            <AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+              {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+              <XAxis dataKey={xAxis} style={style} />
+              <YAxis style={style} />
+              {showTooltip && <Tooltip />}
+              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
+              <Area type="monotone" dataKey={yAxis} stroke={colorScheme[0]} fill={colorScheme[0]} />
+            </AreaChart>
+          </ResponsiveContainer>
+        );
+      
+      case 'pie':
+        // 對餅圖數據進行特殊處理
+        const pieData = data.map(item => ({
+          name: String(item[pieColumn]),
+          value: typeof item[yAxis] === 'number' ? item[yAxis] : 0
+        }));
+
+        return (
+          <ResponsiveContainer width={chartWidth} height={chartHeight}>
+            <PieChart margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+              {showTooltip && <Tooltip />}
+              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
+              <Pie
+                data={pieData}
+                cx="50%"
+                cy="50%"
+                labelLine={true}
+                outerRadius={chartHeight / 3}
+                fill="#8884d8"
+                dataKey="value"
+                nameKey="name"
+                label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+              >
+                {pieData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={colorScheme[index % colorScheme.length]} />
+                ))}
+              </Pie>
+            </PieChart>
+          </ResponsiveContainer>
+        );
+      
+      case 'scatter':
+        return (
+          <ResponsiveContainer width={chartWidth} height={chartHeight}>
+            <ScatterChart margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+              {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+              <XAxis dataKey={xAxis} name={xAxis} style={style} />
+              <YAxis dataKey={yAxis} name={yAxis} style={style} />
+              {showTooltip && <Tooltip cursor={{ strokeDasharray: '3 3' }} />}
+              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
+              <Scatter name={`${xAxis} vs ${yAxis}`} data={data} fill={colorScheme[0]} />
+            </ScatterChart>
+          </ResponsiveContainer>
+        );
+      
+      default:
+        return null;
+    }
+  };
+
+  const exportSvg = () => {
+    // 獲取SVG內容
+    const svgElement = document.querySelector('.recharts-wrapper svg');
+    if (svgElement) {
+      // 創建一個Blob對象
+      const svgData = new XMLSerializer().serializeToString(svgElement);
+      const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+      const svgUrl = URL.createObjectURL(svgBlob);
+      
+      // 創建下載鏈接
+      const downloadLink = document.createElement('a');
+      downloadLink.href = svgUrl;
+      downloadLink.download = `chart_export_${new Date().toISOString()}.svg`;
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+    }
+  };
+
+  const exportPng = () => {
+    // 將SVG轉換為Canvas，然後導出為PNG
+    const svgElement = document.querySelector('.recharts-wrapper svg');
+    if (svgElement) {
+      const svgData = new XMLSerializer().serializeToString(svgElement);
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      
+      // 設置Canvas大小
+      canvas.width = customization.chartWidth;
+      canvas.height = customization.chartHeight;
+      
+      const img = new Image();
+      img.onload = function() {
+        ctx.drawImage(img, 0, 0);
+        const pngUrl = canvas.toDataURL('image/png');
+        
+        const downloadLink = document.createElement('a');
+        downloadLink.href = pngUrl;
+        downloadLink.download = `chart_export_${new Date().toISOString()}.png`;
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+      };
+      
+      img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
+    }
+  };
+
+  const exportCsv = () => {
+    // 導出數據為CSV
+    const csvContent = Papa.unparse(tableData);
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    
+    const downloadLink = document.createElement('a');
+    downloadLink.href = url;
+    downloadLink.download = `data_export_${new Date().toISOString()}.csv`;
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+  };
+
+  return (
+    <div className="p-4 max-w-6xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6 text-center">數據可視化工具</h1>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* 數據輸入區 */}
+        <div className="p-4 border rounded shadow-sm">
+          <h2 className="text-lg font-semibold mb-3">數據輸入</h2>
+          
+          <div className="mb-4 flex gap-2">
+            <button 
+              onClick={addRow} 
+              className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+            >
+              添加行
+            </button>
+            <button 
+              onClick={addColumn} 
+              className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600"
+            >
+              添加列
+            </button>
+            <label className="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 cursor-pointer">
+              上傳CSV
+              <input 
+                type="file" 
+                accept=".csv" 
+                onChange={handleFileUpload} 
+                className="hidden"
+              />
+            </label>
+            <button 
+              onClick={exportCsv} 
+              className="px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600"
+            >
+              導出CSV
+            </button>
+          </div>
+          
+          <div className="mb-4 overflow-x-auto">
+            <div 
+              className="border rounded"
+              onPaste={handlePasteData}
+            >
+              <table className="min-w-full divide-y divide-gray-200">
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {tableData.map((row, rowIndex) => (
+                    <tr key={rowIndex}>
+                      {row.map((cell, colIndex) => (
+                        <td key={colIndex} className="px-2 py-1 border">
+                          <input
+                            type="text"
+                            value={cell}
+                            onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
+                            className="w-full border-0 focus:ring-0"
+                          />
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <p className="text-sm text-gray-500 mt-2">提示：您可以直接從Excel或其他表格軟件複製並粘貼數據</p>
+          </div>
+        </div>
+        
+        {/* 圖表區 */}
+        <div className="p-4 border rounded shadow-sm">
+          <h2 className="text-lg font-semibold mb-3">圖表預覽</h2>
+          
+          <div className="mb-4 grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">圖表類型</label>
+              <select 
+                value={chartType} 
+                onChange={(e) => setChartType(e.target.value)}
+                className="w-full p-2 border rounded"
+              >
+                <option value="bar">長條圖</option>
+                <option value="line">折線圖</option>
+                <option value="area">區域圖</option>
+                <option value="pie">圓餅圖</option>
+                <option value="scatter">散點圖</option>
+              </select>
+            </div>
+            
+            {chartType !== 'pie' && (
+              <div>
+                <label className="block text-sm font-medium mb-1">X軸</label>
+                <select 
+                  value={xAxis} 
+                  onChange={(e) => setXAxis(e.target.value)}
+                  className="w-full p-2 border rounded"
+                >
+                  {headers.map((header, index) => (
+                    <option key={index} value={header}>{header}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+            
+            <div>
+              <label className="block text-sm font-medium mb-1">
+                {chartType === 'pie' ? '數值列' : 'Y軸'}
+              </label>
+              <select 
+                value={yAxis} 
+                onChange={(e) => setYAxis(e.target.value)}
+                className="w-full p-2 border rounded"
+              >
+                {headers.map((header, index) => (
+                  <option key={index} value={header}>{header}</option>
+                ))}
+              </select>
+            </div>
+            
+            {chartType === 'pie' && (
+              <div>
+                <label className="block text-sm font-medium mb-1">類別列</label>
+                <select 
+                  value={pieColumn} 
+                  onChange={(e) => setPieColumn(e.target.value)}
+                  className="w-full p-2 border rounded"
+                >
+                  {headers.map((header, index) => (
+                    <option key={index} value={header}>{header}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
+          
+          <div className="mb-4 flex justify-center overflow-auto">
+            {renderChart()}
+          </div>
+          
+          <div className="flex gap-2 justify-center">
+            <button 
+              onClick={exportSvg} 
+              className="px-3 py-1 bg-indigo-500 text-white rounded hover:bg-indigo-600"
+            >
+              導出SVG
+            </button>
+            <button 
+              onClick={exportPng} 
+              className="px-3 py-1 bg-pink-500 text-white rounded hover:bg-pink-600"
+            >
+              導出PNG
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      {/* 自定義選項 */}
+      <div className="mt-6 p-4 border rounded shadow-sm">
+        <h2 className="text-lg font-semibold mb-3">自定義選項</h2>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">圖表寬度</label>
+            <input 
+              type="range" 
+              min="300" 
+              max="1200" 
+              value={customization.chartWidth} 
+              onChange={(e) => handleCustomizationChange('chartWidth', Number(e.target.value))} 
+              className="w-full"
+            />
+            <div className="text-xs text-center">{customization.chartWidth}px</div>
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium mb-1">圖表高度</label>
+            <input 
+              type="range" 
+              min="200" 
+              max="800" 
+              value={customization.chartHeight} 
+              onChange={(e) => handleCustomizationChange('chartHeight', Number(e.target.value))} 
+              className="w-full"
+            />
+            <div className="text-xs text-center">{customization.chartHeight}px</div>
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium mb-1">字體大小</label>
+            <input 
+              type="range" 
+              min="8" 
+              max="24" 
+              value={customization.fontSize} 
+              onChange={(e) => handleCustomizationChange('fontSize', Number(e.target.value))} 
+              className="w-full"
+            />
+            <div className="text-xs text-center">{customization.fontSize}px</div>
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium mb-1">圖例位置</label>
+            <select 
+              value={customization.legendPosition} 
+              onChange={(e) => handleCustomizationChange('legendPosition', e.target.value)}
+              className="w-full p-2 border rounded"
+            >
+              <option value="top">頂部</option>
+              <option value="bottom">底部</option>
+              <option value="left">左側</option>
+              <option value="right">右側</option>
+            </select>
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium mb-1">顯示網格線</label>
+            <input 
+              type="checkbox" 
+              checked={customization.showGrid} 
+              onChange={(e) => handleCustomizationChange('showGrid', e.target.checked)} 
+              className="mr-2"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium mb-1">顯示提示框</label>
+            <input 
+              type="checkbox" 
+              checked={customization.showTooltip} 
+              onChange={(e) => handleCustomizationChange('showTooltip', e.target.checked)} 
+              className="mr-2"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium mb-1">顯示圖例</label>
+            <input 
+              type="checkbox" 
+              checked={customization.showLegend} 
+              onChange={(e) => handleCustomizationChange('showLegend', e.target.checked)} 
+              className="mr-2"
+            />
+          </div>
+          
+          <div className="col-span-full">
+            <label className="block text-sm font-medium mb-1">顏色方案</label>
+            <div className="flex flex-wrap gap-2">
+              {customization.colorScheme.map((color, index) => (
+                <input 
+                  key={index}
+                  type="color" 
+                  value={color} 
+                  onChange={(e) => {
+                    const newColors = [...customization.colorScheme];
+                    newColors[index] = e.target.value;
+                    handleCustomizationChange('colorScheme', newColors);
+                  }} 
+                  className="w-8 h-8 p-0 border-0"
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;