שיפור visualization generator - הוספת תמיכה אמיתית בגרפיקות עם Chart.js (bar, line, scatter, histogram)

app/sql_service.py

@@ -347,16 +347,42 @@ class SQLFeedbackService:
             # Determine visualization type based on result structure
             result = qr.result
             
-            # If result has 2 columns, might be a bar chart
+            # If result has 2 columns, might be a bar chart or line chart
             if len(result.columns) == 2:
                 col1, col2 = result.columns
                 # If first column is categorical and second is numeric
                 if result[col2].dtype in ['int64', 'float64']:
+                    # Check if it's a time series (col1 looks like date/time)
+                    if 'date' in col1.lower() or 'time' in col1.lower() or 'תאריך' in col1.lower():
+                        visualizations.append({
+                            "type": "line",
+                            "title": f"תוצאה של שאילתה {i}",
+                            "x": col1,
+                            "y": col2,
+                            "x_label": col1,
+                            "y_label": col2,
+                            "data": result.to_dict('records')
+                        })
+                    else:
+                        # Bar chart for categorical data
+                        visualizations.append({
+                            "type": "bar",
+                            "title": f"תוצאה של שאילתה {i}",
+                            "x": col1,
+                            "y": col2,
+                            "x_label": col1,
+                            "y_label": col2,
+                            "data": result.to_dict('records')
+                        })
+                # If both are numeric, might be a scatter plot
+                elif result[col1].dtype in ['int64', 'float64'] and result[col2].dtype in ['int64', 'float64']:
                     visualizations.append({
-                        "type": "bar",
+                        "type": "scatter",
                         "title": f"תוצאה של שאילתה {i}",
                         "x": col1,
                         "y": col2,
+                        "x_label": col1,
+                        "y_label": col2,
                         "data": result.to_dict('records')
                     })
             
@@ -368,8 +394,29 @@ class SQLFeedbackService:
                         "type": "histogram",
                         "title": f"תוצאה של שאילתה {i}",
                         "x": col,
+                        "x_label": col,
                         "data": result[col].tolist()
                     })
+            
+            # If result has 3+ columns, try to find the best visualization
+            elif len(result.columns) >= 3:
+                # Look for numeric columns
+                numeric_cols = [c for c in result.columns if result[c].dtype in ['int64', 'float64']]
+                categorical_cols = [c for c in result.columns if result[c].dtype == 'object']
+                
+                # If we have one categorical and one numeric, use bar chart
+                if len(categorical_cols) >= 1 and len(numeric_cols) >= 1:
+                    cat_col = categorical_cols[0]
+                    num_col = numeric_cols[0]
+                    visualizations.append({
+                        "type": "bar",
+                        "title": f"תוצאה של שאילתה {i}",
+                        "x": cat_col,
+                        "y": num_col,
+                        "x_label": cat_col,
+                        "y_label": num_col,
+                        "data": result.to_dict('records')
+                    })
         
         return visualizations if visualizations else None
 

app/static/app.js

@@ -201,8 +201,9 @@ function showVisualizations(visualizations) {
     document.getElementById('last-response').appendChild(vizContainer);
   }
   
-  vizContainer.style.display = 'block';
+  // Clear previous visualizations
   vizContainer.innerHTML = '<h4 style="color: #1976d2; margin-bottom: 12px;">📊 גרפיקות:</h4>';
+  vizContainer.style.display = 'block';
   
   visualizations.forEach((viz, idx) => {
     const vizDiv = document.createElement('div');
@@ -211,22 +212,230 @@ function showVisualizations(visualizations) {
     vizDiv.style.background = '#f8f9fa';
     vizDiv.style.borderRadius = '8px';
     
-    vizDiv.innerHTML = `<h5 style="margin-top: 0; color: #1976d2;">${viz.title}</h5>`;
-    vizDiv.innerHTML += `<div id="viz-${idx}" style="height: 300px;"></div>`;
+    vizDiv.innerHTML = `<h5 style="margin-top: 0; color: #1976d2;">${escapeHtml(viz.title)}</h5>`;
+    const canvasDiv = document.createElement('div');
+    canvasDiv.style.position = 'relative';
+    canvasDiv.style.height = '300px';
+    canvasDiv.innerHTML = `<canvas id="chart-${idx}"></canvas>`;
+    vizDiv.appendChild(canvasDiv);
     
     vizContainer.appendChild(vizDiv);
     
-    // Use Chart.js or similar for visualization
-    // For now, just show a placeholder
-    document.getElementById(`viz-${idx}`).innerHTML = `
-      <div style="text-align: center; padding: 40px; color: #666;">
-        📊 גרפיקה מסוג ${viz.type}<br>
-        <small>תמיכה בגרפיקות תתווסף בקרוב</small>
-      </div>
-    `;
+    // Create chart using Chart.js
+    setTimeout(() => {
+      const canvas = document.getElementById(`chart-${idx}`);
+      if (!canvas) return;
+      
+      const ctx = canvas.getContext('2d');
+      const config = getChartConfig(viz, idx);
+      if (config) {
+        new Chart(ctx, config);
+      }
+    }, 100);
   });
 }
 
+function getChartConfig(viz, idx) {
+  if (!viz.data || viz.data.length === 0) return null;
+  
+  const xLabel = viz.x_label || viz.x || 'X';
+  const yLabel = viz.y_label || viz.y || 'Y';
+  
+  switch (viz.type) {
+    case 'bar':
+      return {
+        type: 'bar',
+        data: {
+          labels: viz.data.map(d => String(d[viz.x])),
+          datasets: [{
+            label: yLabel,
+            data: viz.data.map(d => d[viz.y]),
+            backgroundColor: 'rgba(25, 118, 210, 0.6)',
+            borderColor: 'rgba(25, 118, 210, 1)',
+            borderWidth: 1
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: true,
+              position: 'top'
+            },
+            title: {
+              display: false
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              title: {
+                display: true,
+                text: yLabel
+              }
+            },
+            x: {
+              title: {
+                display: true,
+                text: xLabel
+              }
+            }
+          }
+        }
+      };
+    
+    case 'line':
+      return {
+        type: 'line',
+        data: {
+          labels: viz.data.map(d => String(d[viz.x])),
+          datasets: [{
+            label: yLabel,
+            data: viz.data.map(d => d[viz.y]),
+            borderColor: 'rgba(25, 118, 210, 1)',
+            backgroundColor: 'rgba(25, 118, 210, 0.1)',
+            borderWidth: 2,
+            fill: true,
+            tension: 0.4
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: true,
+              position: 'top'
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              title: {
+                display: true,
+                text: yLabel
+              }
+            },
+            x: {
+              title: {
+                display: true,
+                text: xLabel
+              }
+            }
+          }
+        }
+      };
+    
+    case 'scatter':
+      return {
+        type: 'scatter',
+        data: {
+          datasets: [{
+            label: `${xLabel} vs ${yLabel}`,
+            data: viz.data.map(d => ({
+              x: d[viz.x],
+              y: d[viz.y]
+            })),
+            backgroundColor: 'rgba(25, 118, 210, 0.6)',
+            borderColor: 'rgba(25, 118, 210, 1)',
+            borderWidth: 1
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: true,
+              position: 'top'
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              title: {
+                display: true,
+                text: yLabel
+              }
+            },
+            x: {
+              beginAtZero: true,
+              title: {
+                display: true,
+                text: xLabel
+              }
+            }
+          }
+        }
+      };
+    
+    case 'histogram':
+      // For histogram, we need to create bins
+      const values = viz.data.filter(v => v != null && !isNaN(v));
+      if (values.length === 0) return null;
+      
+      const min = Math.min(...values);
+      const max = Math.max(...values);
+      const binCount = Math.min(20, Math.ceil(Math.sqrt(values.length)));
+      const binSize = (max - min) / binCount;
+      
+      const bins = Array(binCount).fill(0);
+      const binLabels = [];
+      
+      for (let i = 0; i < binCount; i++) {
+        binLabels.push((min + i * binSize).toFixed(1));
+      }
+      
+      values.forEach(v => {
+        const binIndex = Math.min(Math.floor((v - min) / binSize), binCount - 1);
+        bins[binIndex]++;
+      });
+      
+      return {
+        type: 'bar',
+        data: {
+          labels: binLabels,
+          datasets: [{
+            label: xLabel,
+            data: bins,
+            backgroundColor: 'rgba(25, 118, 210, 0.6)',
+            borderColor: 'rgba(25, 118, 210, 1)',
+            borderWidth: 1
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: true,
+              position: 'top'
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              title: {
+                display: true,
+                text: 'תדירות'
+              }
+            },
+            x: {
+              title: {
+                display: true,
+                text: xLabel
+              }
+            }
+          }
+        }
+      };
+    
+    default:
+      return null;
+  }
+}
+
 function formatResponse(text) {
   // Format markdown-like text (bold, lists, etc.)
   let formatted = escapeHtml(text);

app/static/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Feedback RAG — Frontend</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
   <style>
     * { box-sizing: border-box; }
     body {