Financial Analytics Dashboard

A comprehensive financial data analysis platform built with React TypeScript frontend and ASP.NET Core backend, featuring advanced pivot table functionality and native Excel export capabilities powered by Syncfusion components.

Features

Interactive Pivot Analytics

• Server-side Processing: Handle 10,000+ records with optimal performance
• Drag-and-Drop Interface: Intuitive field arrangement and data exploration
• Real-time Aggregation: Dynamic calculations (sum, average, count, etc.)
• Advanced Filtering: Multi-level filtering with conditional formatting
• Drill-Through Capability: Deep-dive into specific data points

Data Visualization

• Integrated Charts: Column, bar, and other chart types within pivot view
• Dual View Mode: Switch between grid and chart representations
• Interactive Grouping Bar: Visual field management interface
• Field List Panel: Complete field configuration sidebar

Export Capabilities

• Native Excel Pivot Export: Preserve full interactivity in Excel files
• PDF Export: Professional reporting with custom formatting
• CSV Export: Standard data export for compatibility
• Export Status Tracking: Real-time export progress indicators

Advanced Features

• Virtualization: Smooth performance with large datasets
• Memory Caching: Server-side data caching for enhanced speed
• Responsive Design: Mobile-friendly dashboard interface
• Loading States: Professional loading animations and status updates

Technology Stack

Frontend (React)

• React 19.1.1 with TypeScript
• Syncfusion PivotView 30.2.4 - Advanced pivot table component
• Vite - Fast development and build tool
• ESLint - Code quality and consistency

Backend (ASP.NET Core)

• .NET 9.0 with C#
• Syncfusion Pivot Engine 30.1.42 - Server-side data processing
• Memory Caching - Performance optimization
• CORS Configuration - Cross-origin resource sharing

Key Syncfusion Components

• PivotViewComponent - Main pivot table interface
• PivotEngine<T> - Server-side data processing engine
• PivotExportEngine<T> - Native Excel pivot export functionality
• ExcelExport - Standard export capabilities

Project Structure

?? Analytics Dashboard
+-- ?? react-pivot-excel-export/          # React TypeScript Frontend
¦   +-- ?? src/
¦   ¦   +-- ?? App.tsx                     # Main dashboard component
¦   ¦   +-- ?? App.css                     # Dashboard styling
¦   ¦   +-- ?? main.tsx                    # Application entry point
¦   ¦   +-- ?? index.css                   # Global styles
¦   +-- ?? package.json                    # Frontend dependencies
¦   +-- ?? vite.config.ts                  # Vite configuration
¦   +-- ?? tsconfig.json                   # TypeScript configuration
+-- ?? PivotExportAPI/                     # ASP.NET Core Backend
¦   +-- ?? Controllers/
¦   ¦   +-- ?? PivotController.cs          # Main API controller
¦   +-- ?? Program.cs                      # Server configuration
¦   +-- ?? PivotExportAPI.csproj           # Backend dependencies
¦   +-- ?? Properties/
¦       +-- ?? launchSettings.json         # Development settings
+-- ?? README.md                          # This file

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• .NET 9.0 SDK
• Syncfusion License (Community or Commercial)

1. Clone the Repository

git clone <repository-url>
cd financial-analytics-dashboard

2. Backend Setup (ASP.NET Core API)

cd PivotExportAPI
dotnet restore
dotnet run

?? API will be available at: http://localhost:5276

3. Frontend Setup (React App)

cd react-pivot-excel-export
npm install
npm run dev

?? Frontend will be available at: http://localhost:5173

4. Register Syncfusion License

Add your Syncfusion license key to the React app:

import { registerLicense } from '@syncfusion/ej2-base';
registerLicense('YOUR-SYNCFUSION-LICENSE-KEY');

Data Model

The application uses a comprehensive SalesDataModel for analytics:

public class SalesDataModel
{
    public string ProductID { get; set; }    // Product identifier (PRO-10001 to PRO-11000)
    public string Country { get; set; }      // Geographic region (Canada, France, Australia, Germany)
    public string Product { get; set; }      // Product category (Car, Van, Bike, Flight, Bus)
    public double Sold { get; set; }         // Units sold (calculated metric)
    public double Price { get; set; }        // Price per unit (currency formatted)
    public string Year { get; set; }         // Fiscal year (FY 2015-2019)
}

Sample Data Generation

• 10,000 virtual records for comprehensive testing
• 5-year historical data (FY 2015-2019)
• Multi-region coverage (4 countries)
• Product diversification (5 categories)
• Realistic price ranges and sales volumes

Dashboard Components

Header Section

• Brand Identity: Logo and application title
• Export Controls: Excel and PDF export buttons
• Status Indicators: Real-time export progress

Main Pivot Interface

• Interactive Grid: Sortable, filterable data table
• Grouping Bar: Drag-and-drop field management
• Field List: Comprehensive field configuration panel
• Toolbar: Advanced operations (save, load, format, etc.)

Feature Cards

• Interactive Analysis: Drag-and-drop capabilities
• Advanced Filtering: Multi-criteria filtering options
• Real-time Data: Live synchronization indicators
• Export Options: Multiple format support

Configuration

Server-Side Settings (Program.cs)

// CORS Configuration
builder.Services.AddCors(options =>
{
    options.AddPolicy("ReactApp", builder =>
    {
        builder.WithOrigins("http://localhost:5173")
               .AllowAnyMethod()
               .AllowAnyHeader()
               .WithExposedHeaders("Content-Disposition");
    });
});

// Memory Caching
builder.Services.AddMemoryCache();

Client-Side Settings (App.tsx)

const dataSourceSettings = {
    url: 'http://localhost:5276/api/pivot/post',
    mode: 'Server',
    rows: [{ name: 'ProductID', caption: 'Product ID' }],
    columns: [{ name: 'Year', caption: 'Production Year' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }],
    formatSettings: [{ name: 'Price', format: 'C' }]
};

Key Functionalities

1. Native Excel Pivot Export

const btnClick = (): void => {
    if (pivotObj.current) {
        // Exports data as interactive Excel PivotTable
        (pivotObj.current as any).exportAsPivot();
    }
};

2. Server-Side Data Processing

[Route("/api/pivot/post")]
[HttpPost]
public async Task<object> Post([FromBody] object args)
{
    // Handle pivot operations server-side for optimal performance
    if (param.Action == "onPivotExcelExport") {
        return pivotExport.ExportAsPivot(ExportType.Excel, engine, param);
    }
}

3. Memory Caching Strategy

• 60-minute cache expiration for optimal performance
• Hash-based caching for unique data sessions
• Automatic cache invalidation for data updates

UI/UX Features

Professional Design

• Modern Dashboard Layout with card-based design
• Responsive Grid System for all screen sizes
• Loading Animations with branded spinner
• Status Indicators with emoji-based feedback

Accessibility

• Keyboard Navigation support
• Screen Reader compatibility
• High Contrast mode support
• Focus Management for interactive elements

Security & Performance

Security Measures

• CORS Policy configuration for secure cross-origin requests
• Input Validation on all API endpoints
• Error Handling with sanitized error messages
• Memory Management with automatic cache cleanup

Performance Optimizations

• Server-Side Processing for large datasets
• Virtualization for smooth UI rendering
• Memory Caching for repeated data requests
• Lazy Loading for component initialization

Development Guide

Adding New Data Sources

1. Extend the SalesDataModel class
2. Update the GetVirtualData() method
3. Modify dataSourceSettings in React component
4. Test with various data volumes

Customizing Export Formats

1. Modify PivotExportEngine configurations
2. Add new export actions in PivotController
3. Update frontend export buttons
4. Test export functionality

Extending UI Components

1. Add new Syncfusion services to Inject array
2. Configure component properties
3. Update TypeScript interfaces
4. Style with CSS modules

Troubleshooting

Common Issues

1. CORS Errors

• Verify backend is running on http://localhost:5276
• Check CORS policy in Program.cs
• Ensure frontend uses correct API URL

2. Export Failures

• Confirm Syncfusion license is registered
• Check browser console for JavaScript errors
• Verify server logs for backend exceptions

3. Performance Issues

• Monitor memory cache usage
• Check data volume in GetVirtualData()
• Enable virtualization for large datasets

License

This project uses Syncfusion components which require a valid license:

• Community License: Free for qualifying organizations
• Commercial License: For commercial applications

Visit Syncfusion Licensing for more information.

Future Enhancements

Planned Features

• [ ] Real-time Data Streaming with SignalR
• [ ] Advanced Charting with custom visualizations
• [ ] User Authentication with role-based access
• [ ] Data Source Connectors (SQL, MongoDB, APIs)
• [ ] Custom Themes with brand customization
• [ ] Mobile App with React Native
• [ ] Automated Testing with Jest and Cypress

Performance Improvements

• [ ] Redis Caching for distributed scenarios
• [ ] Database Integration with Entity Framework
• [ ] API Rate Limiting for production deployment
• [ ] CDN Integration for static assets

Support

For technical support and questions:

• Syncfusion Documentation: React PivotView Guide
• Community Forums: Syncfusion Community
• GitHub Issues: Report bugs and feature requests
• Email Support: Available with commercial license

Built with ?? using Syncfusion React Components

Transform your data into actionable insights with interactive analytics and seamless Excel integration.