// ==UserScript== // @name Karbon Card - Employee Expense Visualization // @namespace web.nextbyte.ai // @version 1.0 // @description Visualize employee expenses with Venn diagram and expense type breakdown charts // @author NextByte // @match https://app.karboncard.com/dashboard/transaction* // @grant none // @require https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js // @require https://cdn.jsdelivr.net/npm/venn.js@0.2.20/build/venn.min.js // @require https://d3js.org/d3.v7.min.js // ==/UserScript== (function() { 'use strict'; console.log('Karbon Card - Employee Expense Visualization loaded'); // Wait for the page to load function waitForElement(selector, callback, maxAttempts = 50) { let attempts = 0; const interval = setInterval(() => { const element = document.querySelector(selector); if (element || attempts >= maxAttempts) { clearInterval(interval); if (element) callback(element); } attempts++; }, 200); } // Parse amount from text (e.g., "₹ 15000.00Cr" -> 15000.00) function parseAmount(amountText) { if (!amountText) return 0; // Remove currency symbol, "Cr" (credit), "Dr" (debit), and spaces const cleaned = amountText.replace(/[₹\s]/g, '').replace(/Cr|Dr/g, ''); const amount = parseFloat(cleaned); // If it's a credit (refund/top-up), we'll treat it as negative for expense calculation // But for visualization, we want absolute values return isNaN(amount) ? 0 : Math.abs(amount); } // Extract transaction data from the table function extractTransactionData() { const transactions = []; const rows = document.querySelectorAll('.ant-table-tbody tr.ant-table-row'); rows.forEach(row => { const cells = row.querySelectorAll('td.ant-table-cell'); if (cells.length >= 5) { const date = cells[0].textContent.trim(); const type = cells[1].textContent.trim(); const user = cells[2].textContent.trim(); const card = cells[3].textContent.trim(); const amountText = cells[4].textContent.trim(); const amount = parseAmount(amountText); // Include all transactions with valid users and amounts // We'll include all types to show complete spending patterns if (user && user !== '-' && amount > 0) { transactions.push({ date, type, user, card, amount }); } } }); return transactions; } // Aggregate data by employee function aggregateByEmployee(transactions) { const employeeData = {}; transactions.forEach(t => { if (!employeeData[t.user]) { employeeData[t.user] = { total: 0, types: {} }; } employeeData[t.user].total += t.amount; if (!employeeData[t.user].types[t.type]) { employeeData[t.user].types[t.type] = 0; } employeeData[t.user].types[t.type] += t.amount; }); return employeeData; } // Aggregate data by expense type function aggregateByType(transactions) { const typeData = {}; transactions.forEach(t => { if (!typeData[t.type]) { typeData[t.type] = { total: 0, employees: {} }; } typeData[t.type].total += t.amount; if (!typeData[t.type].employees[t.user]) { typeData[t.type].employees[t.user] = 0; } typeData[t.type].employees[t.user] += t.amount; }); return typeData; } // Create the visualization container function createVisualizationContainer() { const container = document.createElement('div'); container.id = 'expense-visualization-container'; container.style.cssText = ` position: fixed; top: 80px; right: 20px; width: 600px; max-height: 80vh; background: white; border: 2px solid #1890ff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000; overflow-y: auto; padding: 20px; `; container.innerHTML = `

Employee Expense Analytics

Total Transactions

Total Amount

Employees

Employee Expense Distribution

Expense by Type

Who Spent on What

`; document.body.appendChild(container); // Close button handler document.getElementById('close-visualization').addEventListener('click', () => { container.remove(); }); return container; } // Update summary statistics function updateSummaryStats(transactions, employeeData, typeData) { const totalTransactions = transactions.length; const totalAmount = transactions.reduce((sum, t) => sum + t.amount, 0); const totalEmployees = Object.keys(employeeData).length; document.getElementById('total-transactions').textContent = totalTransactions; document.getElementById('total-amount').textContent = `₹${totalAmount.toFixed(2)}`; document.getElementById('total-employees').textContent = totalEmployees; } // Create Venn diagram for employee expenses function createVennDiagram(employeeData) { const vennDiv = document.getElementById('venn-diagram'); if (!vennDiv) return; // Clear previous content vennDiv.innerHTML = ''; const employees = Object.keys(employeeData); if (employees.length === 0) { vennDiv.innerHTML = '

No expense data available

'; return; } // Create bubble chart visualization using D3 const width = vennDiv.clientWidth; const height = 300; const svg = d3.select('#venn-diagram') .append('svg') .attr('width', width) .attr('height', height); const colors = ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2', '#eb2f96', '#fa8c16']; // Calculate circle positions and sizes const maxAmount = Math.max(...employees.map(emp => employeeData[emp].total)); const minAmount = Math.min(...employees.map(emp => employeeData[emp].total)); const padding = 20; const maxRadius = Math.min(width / (employees.length + 1), height / 3) - padding; const minRadius = 30; // Position circles in a row or wrap if too many const circlesPerRow = Math.min(employees.length, 4); const rows = Math.ceil(employees.length / circlesPerRow); employees.forEach((emp, i) => { // Scale radius based on amount const radius = minRadius + ((employeeData[emp].total - minAmount) / (maxAmount - minAmount || 1)) * (maxRadius - minRadius); const row = Math.floor(i / circlesPerRow); const col = i % circlesPerRow; const x = (width / (circlesPerRow + 1)) * (col + 1); const y = (height / (rows + 1)) * (row + 1); // Draw circle with hover effect const circle = svg.append('circle') .attr('cx', x) .attr('cy', y) .attr('r', radius) .attr('fill', colors[i % colors.length]) .attr('opacity', 0.7) .attr('stroke', colors[i % colors.length]) .attr('stroke-width', 2) .style('cursor', 'pointer'); // Add hover effect circle.on('mouseover', function() { d3.select(this).attr('opacity', 0.9).attr('stroke-width', 3); }).on('mouseout', function() { d3.select(this).attr('opacity', 0.7).attr('stroke-width', 2); }); // Add employee name svg.append('text') .attr('x', x) .attr('y', y - 5) .attr('text-anchor', 'middle') .attr('fill', 'white') .attr('font-weight', 'bold') .attr('font-size', '12px') .style('pointer-events', 'none') .text(emp.length > 15 ? emp.substring(0, 12) + '...' : emp); // Add amount svg.append('text') .attr('x', x) .attr('y', y + 10) .attr('text-anchor', 'middle') .attr('fill', 'white') .attr('font-size', '11px') .style('pointer-events', 'none') .text(`₹${employeeData[emp].total.toFixed(2)}`); }); } // Create pie chart for expense types function createTypeChart(typeData) { const canvas = document.getElementById('type-chart'); if (!canvas) return; const ctx = canvas.getContext('2d'); const types = Object.keys(typeData); const amounts = types.map(type => typeData[type].total); new Chart(ctx, { type: 'pie', data: { labels: types, datasets: [{ data: amounts, backgroundColor: [ '#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2', '#eb2f96', '#fa8c16' ] }] }, options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { position: 'right' }, tooltip: { callbacks: { label: function(context) { const label = context.label || ''; const value = context.parsed || 0; return `${label}: ₹${value.toFixed(2)}`; } } } } } }); } // Create stacked bar chart for employee-type breakdown function createEmployeeTypeChart(employeeData, typeData) { const canvas = document.getElementById('employee-type-chart'); if (!canvas) return; const ctx = canvas.getContext('2d'); const employees = Object.keys(employeeData); const types = Object.keys(typeData); // Prepare datasets for each expense type const datasets = types.map((type, index) => { const colors = [ '#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2', '#eb2f96', '#fa8c16' ]; return { label: type, data: employees.map(emp => employeeData[emp].types[type] || 0), backgroundColor: colors[index % colors.length] }; }); new Chart(ctx, { type: 'bar', data: { labels: employees, datasets: datasets }, options: { responsive: true, maintainAspectRatio: true, scales: { x: { stacked: true }, y: { stacked: true, ticks: { callback: function(value) { return '₹' + value.toFixed(0); } } } }, plugins: { legend: { position: 'top' }, tooltip: { callbacks: { label: function(context) { const label = context.dataset.label || ''; const value = context.parsed.y || 0; return `${label}: ₹${value.toFixed(2)}`; } } } } } }); } // Create a button to trigger visualization function createTriggerButton() { const button = document.createElement('button'); button.id = 'show-expense-viz'; button.textContent = '📊 Show Expense Analytics'; button.style.cssText = ` position: fixed; top: 20px; right: 20px; z-index: 9999; background: #1890ff; color: white; border: none; border-radius: 6px; padding: 12px 20px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: all 0.3s; `; button.addEventListener('mouseenter', () => { button.style.background = '#40a9ff'; button.style.transform = 'translateY(-2px)'; button.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)'; }); button.addEventListener('mouseleave', () => { button.style.background = '#1890ff'; button.style.transform = 'translateY(0)'; button.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)'; }); button.addEventListener('click', () => { // Remove existing visualization if present const existing = document.getElementById('expense-visualization-container'); if (existing) { existing.remove(); return; } // Extract and process data const transactions = extractTransactionData(); console.log('Extracted transactions:', transactions); if (transactions.length === 0) { alert('No transaction data found on this page. Please make sure the transaction table is loaded.'); return; } const employeeData = aggregateByEmployee(transactions); const typeData = aggregateByType(transactions); console.log('Employee data:', employeeData); console.log('Type data:', typeData); // Create visualization container createVisualizationContainer(); // Update summary statistics updateSummaryStats(transactions, employeeData, typeData); // Create visualizations createVennDiagram(employeeData); createTypeChart(typeData); createEmployeeTypeChart(employeeData, typeData); }); document.body.appendChild(button); } // Initialize the script function init() { // Wait for the transaction table to load waitForElement('.ant-table-tbody', () => { console.log('Transaction table found, adding visualization button'); createTriggerButton(); }); } // Start the script if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();