add csp revenue chart

hub/services/static/css/roi-calculator.css

@@ -124,7 +124,7 @@
 }
 
 /* Secondary charts get good height */
-#revenueChart, #cashFlowChart, #modelComparisonChart {
+#revenueChart, #cashFlowChart, #cspRevenueChart {
     height: 400px !important;
 }
 
@@ -169,7 +169,7 @@
         height: 350px !important;
     }
     
-    #revenueChart, #cashFlowChart, #modelComparisonChart {
+    #revenueChart, #cashFlowChart, #cspRevenueChart {
         height: 300px !important;
     }
     
@@ -183,7 +183,7 @@
         height: 250px !important;
     }
     
-    #revenueChart, #cashFlowChart, #modelComparisonChart {
+    #revenueChart, #cashFlowChart, #cspRevenueChart {
         height: 200px !important;
     }
 }

hub/services/static/js/roi-calculator/chart-manager.js

@@ -83,30 +83,98 @@ class ChartManager {
                 }
             });
 
-            // Model Comparison Chart (replaces generic Cash Flow Chart)
+            // CSP Revenue Breakdown Chart
-            const modelComparisonCanvas = document.getElementById('modelComparisonChart');
+            const cspRevenueCanvas = document.getElementById('cspRevenueChart');
-            if (!modelComparisonCanvas) {
+            if (!cspRevenueCanvas) {
-                console.error('Model comparison chart canvas not found');
+                console.error('CSP revenue breakdown chart canvas not found');
                 return;
             }
-            const modelComparisonCtx = modelComparisonCanvas.getContext('2d');
+            const cspRevenueCtx = cspRevenueCanvas.getContext('2d');
-            this.charts.modelComparison = new Chart(modelComparisonCtx, {
+            this.charts.cspRevenue = new Chart(cspRevenueCtx, {
-                type: 'bar',
+                type: 'line',
                 data: { labels: [], datasets: [] },
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
+                    layout: {
+                        padding: {
+                            left: 10,
+                            right: 200, // Add space for side legend
+                            top: 10,
+                            bottom: 10
+                        }
+                    },
                     plugins: {
-                        legend: { position: 'top' },
+                        legend: { 
-                        title: { display: true, text: 'Investment Model Comparison' }
+                            position: 'right',
+                            align: 'start',
+                            labels: {
+                                boxWidth: 12,
+                                padding: 15,
+                                font: {
+                                    size: 11
+                                },
+                                usePointStyle: true,
+                                generateLabels: function(chart) {
+                                    const original = Chart.defaults.plugins.legend.labels.generateLabels;
+                                    const labels = original.call(this, chart);
+                                    
+                                    // Group labels by scenario for better organization
+                                    return labels.map(label => {
+                                        // Shorten label text for better fit
+                                        if (label.text.includes('Service Revenue')) {
+                                            label.text = label.text.replace(' - Service Revenue', ' - Service');
+                                        }
+                                        if (label.text.includes('Core Service Revenue')) {
+                                            label.text = label.text.replace(' - Core Service Revenue', ' - Core');
+                                        }
+                                        if (label.text.includes('CSP Total')) {
+                                            label.text = label.text.replace(' - CSP Total', ' - Total');
+                                        }
+                                        if (label.text.includes('Servala Revenue')) {
+                                            label.text = label.text.replace(' - Servala Revenue', ' - Servala');
+                                        }
+                                        return label;
+                                    });
+                                }
+                            }
+                        },
+                        title: { 
+                            display: true, 
+                            text: 'CSP Revenue Growth - Direct Investment Only',
+                            font: {
+                                size: 14,
+                                weight: 'bold'
+                            }
+                        }
                     },
                     scales: {
                         y: {
                             beginAtZero: true,
-                            title: { display: true, text: 'Total Return (CHF)' }
+                            title: { display: true, text: 'Revenue Amount' },
+                            stacked: false,
+                            grid: {
+                                color: 'rgba(0,0,0,0.1)'
+                            }
                         },
                         x: {
-                            title: { display: true, text: 'Growth Scenario' }
+                            title: { display: true, text: 'Month' },
+                            grid: {
+                                color: 'rgba(0,0,0,0.05)'
+                            }
+                        }
+                    },
+                    interaction: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    elements: {
+                        point: {
+                            radius: 3,
+                            hoverRadius: 6
+                        },
+                        line: {
+                            tension: 0.1
                         }
                     }
                 }
@@ -148,7 +216,7 @@ class ChartManager {
 
     showChartError(message) {
         // Show error message in place of charts
-        const chartContainers = ['instanceGrowthChart', 'revenueChart', 'cashFlowChart', 'modelComparisonChart'];
+        const chartContainers = ['instanceGrowthChart', 'revenueChart', 'cashFlowChart', 'cspRevenueChart'];
         chartContainers.forEach(containerId => {
             const container = document.getElementById(containerId);
             if (container) {
@@ -242,35 +310,90 @@ class ChartManager {
             const comparisonLabels = baseScenarios.map(s => this.calculator.scenarios[s].name);
             
             // Get net profit data for both models
-            const directInvestmentData = baseScenarios.map(scenario => {
+            // Update CSP Revenue Breakdown Chart (Direct Investment Only)
-                const scenarioResult = this.calculator.results[scenario + '_direct'];
+            this.charts.cspRevenue.data.labels = monthLabels;
-                return scenarioResult ? scenarioResult.netPosition : 0;
+            this.charts.cspRevenue.data.datasets = [];
-            });
+
-            
+            // Filter to only direct investment scenarios
-            const loanInvestmentData = baseScenarios.map(scenario => {
+            const directScenarios = scenarios.filter(s => 
-                const scenarioResult = this.calculator.results[scenario + '_loan'];
+                this.calculator.results[s] && s.includes('_direct')
-                return scenarioResult ? scenarioResult.netPosition : 0;
+            );
-            });
+
-            
+            // Define revenue types and their styling
-            this.charts.modelComparison.data.labels = comparisonLabels;
+            const revenueTypes = [
-            this.charts.modelComparison.data.datasets = [
                 {
-                    label: 'Direct Investment Model',
+                    key: 'serviceRevenue',
-                    data: directInvestmentData,
+                    label: 'Service Revenue',
-                    backgroundColor: baseScenarios.map(scenario => colors[scenario] + '80'),
+                    borderWidth: 2,
-                    borderColor: baseScenarios.map(scenario => colors[scenario]),
+                    borderDash: [],
-                    borderWidth: 2
+                    opacity: '40'
                 },
                 {
-                    label: `Loan Model (${(inputs.loanInterestRate * 100).toFixed(1)}% fixed rate)`,
+                    key: 'coreRevenue', 
-                    data: loanInvestmentData,
+                    label: 'Core Service Revenue',
-                    backgroundColor: '#ffc10780',
+                    borderWidth: 2,
-                    borderColor: '#e0a800',
+                    borderDash: [3, 3],
-                    borderWidth: 2
+                    opacity: '60'
+                },
+                {
+                    key: 'cspRevenue',
+                    label: 'CSP Total',
+                    borderWidth: 3,
+                    borderDash: [],
+                    opacity: 'FF'
+                },
+                {
+                    key: 'servalaRevenue',
+                    label: 'Servala Revenue',
+                    borderWidth: 1,
+                    borderDash: [5, 5],
+                    opacity: '80',
+                    color: '#6c757d'
                 }
             ];
-            
+
-            this.charts.modelComparison.update();
+            // Add datasets organized by revenue type for better legend grouping
+            directScenarios.forEach(scenario => {
+                const scenarioBase = scenario.replace('_direct', '');
+                const scenarioName = this.calculator.scenarios[scenarioBase]?.name || scenarioBase;
+                const monthlyData = this.calculator.monthlyData[scenario];
+                const scenarioColor = colors[scenarioBase] || '#007bff';
+                
+                revenueTypes.forEach(type => {
+                    // Skip Servala revenue if it's zero (no revenue sharing)
+                    if (type.key === 'servalaRevenue') {
+                        const hasServalaRevenue = monthlyData.some(d => (d.servalaRevenue || 0) > 0);
+                        if (!hasServalaRevenue) return;
+                    }
+
+                    // Skip core revenue if it's zero
+                    if (type.key === 'coreRevenue') {
+                        const hasCoreRevenue = monthlyData.some(d => (d.coreRevenue || 0) > 0);
+                        if (!hasCoreRevenue) return;
+                    }
+
+                    const dataValues = monthlyData.map(d => {
+                        if (type.key === 'serviceRevenue') return d.serviceRevenue || d.monthlyRevenue || 0;
+                        return d[type.key] || 0;
+                    });
+
+                    this.charts.cspRevenue.data.datasets.push({
+                        label: `${scenarioName} - ${type.label}`,
+                        data: dataValues,
+                        borderColor: type.color || scenarioColor,
+                        backgroundColor: (type.color || scenarioColor) + type.opacity,
+                        borderWidth: type.borderWidth,
+                        borderDash: type.borderDash,
+                        fill: false,
+                        tension: 0.1,
+                        pointBackgroundColor: type.color || scenarioColor,
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 1
+                    });
+                });
+            });
+
+            this.charts.cspRevenue.update();
 
             // Update Performance Comparison Chart (ROI comparison for both models)
             this.charts.performance.data.labels = comparisonLabels;

hub/services/templates/calculator/csp_roi_calculator.html

@@ -584,16 +584,16 @@ document.addEventListener('DOMContentLoaded', function() {
             </div>
         </div>
 
-        <!-- TERTIARY CHART - Full Width -->
+        <!-- CSP REVENUE BREAKDOWN CHART - Full Width -->
         <div class="row mb-4">
             <div class="col-12">
                 <div class="card border-0 shadow-sm">
                     <div class="card-header bg-white border-0 pb-0">
-                        <h5 class="mb-1"><i class="bi bi-graph-up text-info"></i> Investment Model Comparison</h5>
+                        <h5 class="mb-1"><i class="bi bi-cash-stack text-success"></i> CSP Revenue Breakdown</h5>
-                        <p class="small text-muted mb-0">Net profit comparison: Fixed loan returns vs. performance-based direct investment across scenarios</p>
+                        <p class="small text-muted mb-0">Direct investment revenue breakdown: Service fees, core infrastructure sales, total CSP revenue, and Servala share over time</p>
                     </div>
                     <div class="card-body pt-3">
-                        <canvas id="modelComparisonChart" style="height: 400px; width: 100%;"></canvas>
+                        <canvas id="cspRevenueChart" style="height: 400px; width: 100%;"></canvas>
                     </div>
                 </div>
             </div>