Rapid.SmartReport.Blazor 1.0.8

Rapid.SmartReport.Blazor

Blazor components and UI integration for the Rapid.SmartReport library.

Note: This package requires the Rapid.SmartReport.Core package to function. Make sure to install both packages when using Blazor.

Installation

# Install both required packages
dotnet add package Rapid.SmartReport.Core    # Required base package
dotnet add package Rapid.SmartReport.Blazor  # Blazor components

Features

• 🖥️ Interactive Components

  • ReportViewer component for displaying reports
  • Interactive table components with sorting and filtering
  • Dynamic chart components
  • Custom report controls

• 🎨 Real-time Preview

  • Live preview of report changes
  • Interactive parameter controls
  • Dynamic template switching
  • Real-time style customization

• 🔧 Easy Integration

  • Simple component-based API
  • Built-in themes
  • Customizable templates
  • Event handling for user interactions

Usage Examples

Basic Report Viewer

@page "/report-viewer"
@using Rapid.SmartReport.Blazor

<ReportViewer Report="@report" />

@code {
    private Report<SalesData> report;

    protected override void OnInitialized()
    {
        report = Report<SalesData>.Create()
            .WithTitle("Sales Report")
            .WithData(salesData);
    }
}

Interactive Table

<ReportTable Data="@salesData"
            TItem="SalesData"
            PageSize="10"
            Sortable="true"
            Filterable="true">
    <Columns>
        <Column Property="@(x => x.Date)" Title="Date" Format="d" />
        <Column Property="@(x => x.Product)" Title="Product" />
        <Column Property="@(x => x.Amount)" Title="Amount" Format="C2" />
    </Columns>
</ReportTable>

Dynamic Chart

<ReportChart Data="@salesData"
           Type="ChartType.Bar"
           Title="Monthly Sales"
           Labels="@(x => x.Month)"
           Values="@(x => x.Revenue)" />

Custom Report Template

<ReportViewer>
    <ReportTemplate>
        <div class="report-header">
            <h1>@Report.Title</h1>
            <p>Generated: @DateTime.Now</p>
        </div>
        
        <ReportTable Data="@Report.Data" />
        
        <ReportChart Data="@Report.Data"
                   Type="ChartType.Line" />
                   
        <div class="report-footer">
            <p>Page @Report.CurrentPage of @Report.TotalPages</p>
        </div>
    </ReportTemplate>
</ReportViewer>

Component Properties

ReportViewer

• Report: The report instance to display
• Theme: Optional theme customization
• ShowToolbar: Toggle toolbar visibility
• OnExport: Event callback for export actions

ReportTable

• Data: The data source for the table
• PageSize: Number of items per page
• Sortable: Enable column sorting
• Filterable: Enable column filtering
• OnPageChange: Page change callback
• OnSort: Sort callback
• OnFilter: Filter callback

ReportChart

• Data: The data source for the chart
• Type: Chart type (Bar, Line, Pie, etc.)
• Labels: Expression for data labels
• Values: Expression for data values
• Title: Chart title
• Options: Additional chart options

Customization

Themes

<ReportViewer Theme="@(new ReportTheme 
{
    Primary = "#007bff",
    Secondary = "#6c757d",
    FontFamily = "Roboto, sans-serif"
})" />

Custom Styles

/* custom-report-styles.css */
.report-viewer {
    --report-primary-color: #007bff;
    --report-font-family: 'Roboto', sans-serif;
}

Events and Interactivity

<ReportViewer 
    OnExport="HandleExport"
    OnPageChange="HandlePageChange"
    OnParameterChange="HandleParameterChange">
</ReportViewer>

@code {
    private async Task HandleExport(ExportEventArgs args)
    {
        // Handle export action
    }

    private void HandlePageChange(int newPage)
    {
        // Handle page change
    }

    private async Task HandleParameterChange(ParameterChangeEventArgs args)
    {
        // Handle parameter changes
    }
}

Best Practices

1. Performance

   • Use virtualization for large datasets
   • Enable lazy loading when appropriate
   • Implement proper data pagination

2. Responsiveness

   • Use responsive layouts
   • Test on different screen sizes
   • Implement mobile-friendly controls

3. Error Handling

   • Implement proper error boundaries
   • Provide user-friendly error messages
   • Handle network issues gracefully

4. Accessibility

   • Follow WCAG guidelines
   • Implement proper ARIA attributes
   • Ensure keyboard navigation

Contributing

We welcome contributions! Please see the main project's contributing guidelines.