Cara Mengimplementasikan Excel-Powered Web Dashboard

Install-Package Aspose.Cells

using Aspose.Cells;
using Aspose.Cells.Rendering;
using System.IO;
using System.Text;

LowCodeLoadOptions loadOptions = new LowCodeLoadOptions();
loadOptions.InputFile = "dashboard-template.xlsx";

LowCodeHtmlSaveOptions htmlSaveOptions = new LowCodeHtmlSaveOptions();
HtmlSaveOptions options = new HtmlSaveOptions();

// Set custom cell attribute for easier CSS styling
options.CellNameAttribute = "data-cell";

// Control which worksheets to include
options.SheetSet = new Aspose.Cells.Rendering.SheetSet(new int[] { 0, 1 });

// Enable interactive features
options.ExportActiveWorksheetOnly = false;
options.ExportHiddenWorksheet = false;
options.ExportImagesAsBase64 = true;

htmlSaveOptions.HtmlOptions = options;

public void ConvertDashboardToHtml()
{
    string dashboardFile = "dashboard-template.xlsx";
    
    // Simple conversion with default options
    HtmlConverter.Process(dashboardFile, "output/dashboard-simple.html");
    
    // Advanced conversion with custom options
    LowCodeLoadOptions lclopts = new LowCodeLoadOptions();
    lclopts.InputFile = dashboardFile;
    
    LowCodeHtmlSaveOptions lcsopts = new LowCodeHtmlSaveOptions();
    HtmlSaveOptions htmlOpts = new HtmlSaveOptions();
    
    // Add data attributes for enhanced interactivity
    htmlOpts.CellNameAttribute = "dashboard-cell";
    
    // Only include dashboard sheets
    htmlOpts.SheetSet = new Aspose.Cells.Rendering.SheetSet(new int[] { 0, 1 });
    
    lcsopts.HtmlOptions = htmlOpts;
    
    // Output to memory stream (useful for web applications)
    MemoryStream ms = new MemoryStream();
    lcsopts.OutputStream = ms;
    
    HtmlConverter.Process(lclopts, lcsopts);
    
    // The HTML output is now available in the memory stream
    string htmlContent = Encoding.UTF8.GetString(ms.ToArray());
    
    // For debugging: verify specific elements are present
    Console.WriteLine(htmlContent.IndexOf("dashboard-cell=\"B2\"") > 0 
        ? "Dashboard cells properly tagged" 
        : "Cell attributes not found");
}

// Sample JavaScript to add after the HTML conversion
function enhanceDashboard() {
    // Add click handlers to cells with the dashboard-cell attribute
    document.querySelectorAll('[dashboard-cell]').forEach(cell => {
        cell.addEventListener('click', function() {
            const cellAddress = this.getAttribute('dashboard-cell');
            showDetailView(cellAddress);
        });
    });
    
    // Add filtering capabilities
    setupFilters();
    
    // Initialize dashboard update mechanism
    initializeDataRefresh();
}

function showDetailView(cellAddress) {
    // Display detailed information for the selected cell
    console.log(`Showing details for cell ${cellAddress}`);
    // Implementation would depend on your dashboard requirements
}

function setupFilters() {
    // Add filtering UI and logic
    // This would be customized based on your dashboard design
}

function initializeDataRefresh() {
    // Set up periodic data refresh mechanisms
    setInterval(() => refreshDashboardData(), 300000); // Refresh every 5 minutes
}

function refreshDashboardData() {
    // Fetch updated data and refresh relevant parts of the dashboard
    fetch('/api/dashboard-data')
        .then(response => response.json())
        .then(data => updateDashboardWithNewData(data));
}

function updateDashboardWithNewData(data) {
    // Update dashboard elements with new data
    // Implementation would depend on your dashboard structure
}

/* Sample CSS to enhance dashboard appearance */
.dashboard-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filter-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

[dashboard-cell] {
    cursor: pointer;
    transition: background-color 0.2s;
}

[dashboard-cell]:hover {
    background-color: rgba(0, 120, 215, 0.1);
}

.chart-container {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.kpi-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.kpi-card {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .kpi-section {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .kpi-section {
        grid-template-columns: 1fr;
    }
}

public class DashboardRefreshService
{
    private readonly string templatePath;
    private readonly string outputPath;
    
    public DashboardRefreshService(string templatePath, string outputPath)
    {
        this.templatePath = templatePath;
        this.outputPath = outputPath;
    }
    
    public void RefreshDashboard()
    {
        // Update data in the Excel file programmatically
        using (Workbook workbook = new Workbook(templatePath))
        {
            // Update cells with new data from your data source
            Worksheet dataSheet = workbook.Worksheets["Data"];
            
            // Example: Update sales data
            // In a real application, this would come from a database or API
            dataSheet.Cells["B2"].PutValue(GetLatestSalesData());
            
            // Save the updated workbook
            workbook.Save(templatePath);
        }
        
        // Re-convert the Excel file to HTML
        LowCodeLoadOptions lclopts = new LowCodeLoadOptions();
        lclopts.InputFile = templatePath;
        
        LowCodeHtmlSaveOptions lcsopts = new LowCodeHtmlSaveOptions();
        HtmlSaveOptions htmlOpts = new HtmlSaveOptions();
        htmlOpts.CellNameAttribute = "dashboard-cell";
        lcsopts.HtmlOptions = htmlOpts;
        lcsopts.OutputFile = outputPath;
        
        HtmlConverter.Process(lclopts, lcsopts);
    }
    
    private double GetLatestSalesData()
    {
        // In a real application, fetch this from your data source
        return 15478.25;
    }
}

public class DashboardDeploymentService
{
    public void DeployDashboard(string htmlPath, string deploymentPath)
    {
        // Read the generated HTML
        string htmlContent = File.ReadAllText(htmlPath);
        
        // Enhance with additional scripts and styles
        htmlContent = AddRequiredResources(htmlContent);
        
        // Write to the deployment location
        File.WriteAllText(deploymentPath, htmlContent);
        
        Console.WriteLine($"Dashboard successfully deployed to {deploymentPath}");
    }
    
    private string AddRequiredResources(string html)
    {
        // Add references to required JavaScript and CSS
        string scripts = "<script src=\"/js/dashboard-enhancements.js\"></script>\n";
        scripts += "<script src=\"/js/data-refresh.js\"></script>\n";
        
        string styles = "<link rel=\"stylesheet\" href=\"/css/dashboard-styles.css\">\n";
        
        // Insert before closing head tag
        html = html.Replace("</head>", styles + scripts + "</head>");
        
        return html;
    }
}