updated chart view

Author: yabebalFantaye

README.md

@@ -339,6 +339,7 @@ For support and questions:
 ## 🙏 Acknowledgments
 
 - [Database Toolbox](https://googleapis.github.io/genai-toolbox/) for multi-database tool integration
+
 - [LLM Sandbox](https://github.com/vndee/llm-sandbox) for secure code execution and agent tool orchestration
 - [MCP-UI Specification](https://github.com/idosal/mcp-ui) for unified tool and UI protocol 
 - [LangGraph](https://github.com/langchain-ai/langgraph) for agent orchestration

backend/composite_data_tools.py

@@ -130,7 +130,7 @@ async def fetch_data():
                 "y_axis": y_axis
             }
 
-            ui_resource = mcp_ui_generator.create_chart_ui_resource(vizro_config, title)
+            ui_resource = mcp_ui_generator.create_chart_ui_resource(vizro_config, title, x_axis, y_axis)
 
             # Return the complete result
             result = {
@@ -384,7 +384,7 @@ async def fetch_data():
                 "data": safe_data,
                 "x_axis": "bin",
                 "y_axis": "count"
-            }, title)
+            }, title, "bin", "count")
 
             # Return the complete result
             result = {

backend/langgraph_agent.py

@@ -555,7 +555,10 @@ def _get_system_prompt(self, iteration_count: int = 0, tool_results: List[Dict[s
   - **create_chart_from_data**: Creates chart from database query + optional code processing
   - **create_table_from_data**: Creates table from database query + optional code processing  
   - **create_histogram_from_data**: Creates histogram from database query + optional code processing
-- **NEVER use the basic create_chart, create_table, or create_histogram tools**
+- **FORBIDDEN: NEVER use these deprecated tools:**
+  - ❌ create_chart (DEPRECATED - requires pre-fetched data)
+  - ❌ create_table (DEPRECATED - requires pre-fetched data)  
+  - ❌ create_histogram (DEPRECATED - requires pre-fetched data)
 - ALWAYS query the database FIRST to get data, THEN create visualizations
 - NEVER provide final response without creating requested visualizations
 - These tools handle the complete workflow: Database Query → Code Processing → UIResource Generation

backend/langraph_multi_mcp_tools.py

@@ -13,7 +13,7 @@
 from langchain_core.callbacks import CallbackManagerForToolRun
 
 from mcp_multi_client import mcp_manager
-from visualization_tool import get_visualization_tools
+# from visualization_tool import get_visualization_tools  # DISABLED - using composite tools instead
 
 logger = logging.getLogger(__name__)
 
@@ -248,10 +248,10 @@ async def get_all_mcp_langraph_tools() -> List[BaseTool]:
 
         tools = []
 
-        # Add visualization tools
-        visualization_tools = get_visualization_tools()
-        tools.extend(visualization_tools)
-        logger.info(f"✅ Added {len(visualization_tools)} visualization tools")
+        # Add visualization tools (DISABLED - using composite tools instead)
+        # visualization_tools = get_visualization_tools()
+        # tools.extend(visualization_tools)
+        # logger.info(f"✅ Added {len(visualization_tools)} visualization tools")
 
         # Add composite data tools (data + code + UIResource)
         try:

backend/mcp_ui_generator.py

@@ -66,7 +66,7 @@ class MCPUIGenerator:
     def __init__(self):
         self.logger = logging.getLogger(__name__)
 
-    def create_chart_ui_resource(self, chart_config: Dict[str, Any], title: str = "Chart") -> Dict[str, Any]:
+    def create_chart_ui_resource(self, chart_config: Dict[str, Any], title: str = "Chart", x_axis: str = None, y_axis: str = None) -> Dict[str, Any]:
         """
         Create a chart UI resource from chart configuration.
         
@@ -79,7 +79,7 @@ def create_chart_ui_resource(self, chart_config: Dict[str, Any], title: str = "C
         """
         try:
             # Create a simple chart HTML
-            chart_html = self._generate_chart_html(chart_config, title)
+            chart_html = self._generate_chart_html(chart_config, title, x_axis, y_axis)
 
             return createUIResource({
                 "uri": f"ui://chart/{datetime.now().timestamp()}",
@@ -121,7 +121,7 @@ def create_data_table_ui_resource(self, data: List[Dict[str, Any]], columns: Lis
             self.logger.error(f"Failed to create table UI resource: {e}")
             return self._create_error_ui_resource(f"Table generation failed: {e}")
 
-    def _generate_chart_html(self, chart_config: Dict[str, Any], title: str) -> str:
+    def _generate_chart_html(self, chart_config: Dict[str, Any], title: str, x_axis: str = None, y_axis: str = None) -> str:
         """Generate HTML for chart visualization."""
         # Simple chart HTML using Chart.js or similar
         chart_id = f"chart_{datetime.now().timestamp()}"
@@ -132,6 +132,13 @@ def _generate_chart_html(self, chart_config: Dict[str, Any], title: str) -> str:
         if not data_points:
             return f"<div><h3>{title}</h3><p>No data available for chart</p></div>"
 
+        # Fallback to first two keys if x_axis/y_axis not provided
+        if not x_axis or not y_axis:
+            first_row = data_points[0] if data_points else {}
+            keys = list(first_row.keys())
+            x_axis = x_axis or (keys[0] if len(keys) > 0 else 'x')
+            y_axis = y_axis or (keys[1] if len(keys) > 1 else 'y')
+        
         # Simple HTML chart
         html = f"""
         <div style="padding: 20px;">
@@ -148,10 +155,10 @@ def _generate_chart_html(self, chart_config: Dict[str, Any], title: str) -> str:
                 new Chart(ctx, {{
                     type: 'bar',
                     data: {{
-                        labels: chartData.map(item => Object.keys(item)[0]),
+                        labels: chartData.map(item => item['{x_axis}']),
                         datasets: [{{
                             label: '{title}',
-                            data: chartData.map(item => Object.values(item)[0]),
+                            data: chartData.map(item => item['{y_axis}']),
                             backgroundColor: 'rgba(54, 162, 235, 0.2)',
                             borderColor: 'rgba(54, 162, 235, 1)',
                             borderWidth: 1

backend/visualization_tool.py

@@ -61,14 +61,11 @@ class CreateChartTool(BaseTool):
 
     name: str = "create_chart"
     description: str = """
+    DEPRECATED: Use create_chart_from_data instead.
     Create a chart visualization from data and generate a UIResource.
-    This tool takes data and creates an interactive chart with Chart.js.
+    This tool requires pre-fetched data and should NOT be used directly.
     
-    Use this when you have data and want to create:
-    - Bar charts for categorical data
-    - Line charts for time series
-    - Pie charts for proportional data
-    - Histograms for distribution data
+    Use create_chart_from_data for all chart creation needs.
     """
     args_schema: type[BaseModel] = CreateChartInput
 
@@ -119,10 +116,11 @@ class CreateTableTool(BaseTool):
 
     name: str = "create_table"
     description: str = """
+    DEPRECATED: Use create_table_from_data instead.
     Create a data table visualization from data and generate a UIResource.
-    This tool takes data and creates an interactive table with sorting and export capabilities.
+    This tool requires pre-fetched data and should NOT be used directly.
     
-    Use this when you have tabular data and want to display it in a structured format.
+    Use create_table_from_data for all table creation needs.
     """
     args_schema: type[BaseModel] = CreateTableInput
 
@@ -168,10 +166,11 @@ class CreateHistogramTool(BaseTool):
 
     name: str = "create_histogram"
     description: str = """
+    DEPRECATED: Use create_histogram_from_data instead.
     Create a histogram visualization from data and generate a UIResource.
-    This tool takes numerical data and creates a histogram showing the distribution.
+    This tool requires pre-fetched data and should NOT be used directly.
     
-    Use this when you have numerical data and want to show its distribution.
+    Use create_histogram_from_data for all histogram creation needs.
     """
     args_schema: type[BaseModel] = CreateHistogramInput
 

docker-compose.yml

@@ -1,14 +1,12 @@
-version: '3.8'
-
 services:
   # PostgreSQL Database
   postgres:
     image: postgres:15-alpine
     container_name: analytics-postgres
     environment:
-      POSTGRES_DB: analytics_db
-      POSTGRES_USER: analytics
-      POSTGRES_PASSWORD: password
+      POSTGRES_DB: loyalty_analytics
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
       POSTGRES_INITDB_ARGS: "--encoding=UTF-8 --lc-collate=C --lc-ctype=C"
     ports:
       - "5432:5432"