BeepDualPercentageControl

Overview

BeepDualPercentageControl provides a sophisticated split-layout control for displaying and comparing two percentage values side by side. It features rich visual elements including icons, labels, progress indicators, and customizable styling perfect for analytics dashboards and performance metrics.

Built on the BeepControl foundation, BeepDualPercentageControl features dual-section layout, visual dividers, icon integration, progress visualization, trend indicators, and comprehensive theming support. Perfect for comparison dashboards, analytics panels, performance metrics, and any application requiring side-by-side percentage comparisons.

Key Features

Visual Preview

Dual Percentage Control Variations

Basic Usage

// Create and configure a BeepDualPercentageControl
var dualPercentage = new BeepDualPercentageControl();
dualPercentage.Size = new Size(300, 100);

// Configure left section
dualPercentage.LeftIcon = Properties.Resources.SalesIcon;
dualPercentage.LeftLabel = "This Month";
dualPercentage.LeftPercentage = 85;
dualPercentage.LeftSubLabel = "Target Achievement";

// Configure right section
dualPercentage.RightIcon = Properties.Resources.TargetIcon;
dualPercentage.RightLabel = "Last Month";
dualPercentage.RightPercentage = 73;
dualPercentage.RightSubLabel = "Target Achievement";

// Set comparison context
dualPercentage.ShowTrendIndicator = true;
dualPercentage.ShowProgressBars = false;

// Handle value clicks
dualPercentage.LeftSectionClicked += (s, e) =>
{
    ShowDetailedReport("This Month Sales");
};

dualPercentage.RightSectionClicked += (s, e) =>
{
    ShowDetailedReport("Last Month Sales");
};

// Add to dashboard
dashboardPanel.Controls.Add(dualPercentage);

// Create performance monitoring control
var performanceMonitor = new BeepDualPercentageControl
{
    Size = new Size(350, 120),
    ShowProgressBars = true,
    ShowTrendIndicator = false,
    AutoRefresh = true,
    RefreshInterval = 5000 // 5 seconds
};

// Configure CPU monitoring
performanceMonitor.LeftIcon = Properties.Resources.CpuIcon;
performanceMonitor.LeftLabel = "CPU Usage";
performanceMonitor.LeftSubLabel = "Current Load";

// Configure memory monitoring  
performanceMonitor.RightIcon = Properties.Resources.MemoryIcon;
performanceMonitor.RightLabel = "Memory Usage";
performanceMonitor.RightSubLabel = "Available RAM";

// Set up real-time updates
var updateTimer = new Timer { Interval = 1000 };
updateTimer.Tick += (s, e) =>
{
    // Get current system metrics
    var cpuUsage = GetCpuUsage();
    var memoryUsage = GetMemoryUsage();
    
    performanceMonitor.LeftPercentage = cpuUsage;
    performanceMonitor.RightPercentage = memoryUsage;
    
    // Update styling based on thresholds
    performanceMonitor.LeftSectionStyle = cpuUsage > 80 ? SectionStyle.Warning : SectionStyle.Normal;
    performanceMonitor.RightSectionStyle = memoryUsage > 85 ? SectionStyle.Critical : SectionStyle.Normal;
};
updateTimer.Start();

Properties

Left Section Properties

Right Section Properties

Display Properties

Events

Examples

public partial class AnalyticsDashboard : UserControl
{
    private TableLayoutPanel metricsPanel;
    private List<BeepDualPercentageControl> metricControls;
    private IAnalyticsService analyticsService;

    public AnalyticsDashboard(IAnalyticsService analyticsService)
    {
        this.analyticsService = analyticsService;
        InitializeComponents();
        LoadMetrics();
    }

    private void InitializeComponents()
    {
        metricsPanel = new TableLayoutPanel
        {
            Dock = DockStyle.Fill,
            ColumnCount = 2,
            RowCount = 3,
            Padding = new Padding(10)
        };

        // Configure equal column widths
        metricsPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));
        metricsPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));

        metricControls = new List<BeepDualPercentageControl>();
        this.Controls.Add(metricsPanel);
    }

    private async void LoadMetrics()
    {
        try
        {
            var metrics = await analyticsService.GetDashboardMetricsAsync();
            CreateMetricControls(metrics);
        }
        catch (Exception ex)
        {
            ShowError($"Failed to load metrics: {ex.Message}");
        }
    }

    private void CreateMetricControls(DashboardMetrics metrics)
    {
        // Sales Performance
        var salesMetric = CreateMetricControl(
            "Sales Performance",
            "📈", "This Quarter", metrics.CurrentQuarterSales, "Sales Target",
            "📊", "Last Quarter", metrics.LastQuarterSales, "Sales Target",
            showTrend: true,
            showProgress: false
        );

        // Customer Satisfaction
        var satisfactionMetric = CreateMetricControl(
            "Customer Satisfaction",
            "😊", "Current Score", metrics.CurrentSatisfaction, "Rating",
            "📈", "Trend", metrics.SatisfactionTrend, "Improvement",
            showTrend: true,
            showProgress: true
        );

        // System Performance
        var performanceMetric = CreateMetricControl(
            "System Performance",
            "🖥️", "Response Time", metrics.AverageResponseTime, "Target: <2s",
            "⚡", "Uptime", metrics.SystemUptime, "Monthly Target",
            showTrend: false,
            showProgress: true
        );

        // Financial Metrics
        var financialMetric = CreateMetricControl(
            "Financial Health",
            "💰", "Revenue Growth", metrics.RevenueGrowth, "vs. Target",
            "💸", "Cost Efficiency", metrics.CostEfficiency, "vs. Budget",
            showTrend: true,
            showProgress: false
        );

        // Project Progress
        var projectMetric = CreateMetricControl(
            "Project Status",
            "🚀", "Development", metrics.DevelopmentProgress, "Complete",
            "🧪", "Testing", metrics.TestingProgress, "Complete",
            showTrend: false,
            showProgress: true
        );

        // Marketing ROI
        var marketingMetric = CreateMetricControl(
            "Marketing ROI",
            "📢", "Campaign ROI", metrics.CampaignROI, "vs. Target",
            "🎯", "Lead Conversion", metrics.LeadConversion, "Rate",
            showTrend: true,
            showProgress: false
        );

        // Add controls to layout
        var controls = new[] 
        { 
            salesMetric, satisfactionMetric, performanceMetric, 
            financialMetric, projectMetric, marketingMetric 
        };

        for (int i = 0; i < controls.Length; i++)
        {
            var row = i / 2;
            var col = i % 2;
            metricsPanel.Controls.Add(controls[i], col, row);
        }
    }

    private BeepDualPercentageControl CreateMetricControl(
        string title,
        string leftIcon, string leftLabel, int leftValue, string leftSubLabel,
        string rightIcon, string rightLabel, int rightValue, string rightSubLabel,
        bool showTrend, bool showProgress)
    {
        var control = new BeepDualPercentageControl
        {
            Size = new Size(280, 120),
            Margin = new Padding(5),
            ShowTrendIndicator = showTrend,
            ShowProgressBars = showProgress,
            Title = title
        };

        // Configure left section
        control.LeftIcon = GetIconImage(leftIcon);
        control.LeftLabel = leftLabel;
        control.LeftPercentage = leftValue;
        control.LeftSubLabel = leftSubLabel;

        // Configure right section
        control.RightIcon = GetIconImage(rightIcon);
        control.RightLabel = rightLabel;
        control.RightPercentage = rightValue;
        control.RightSubLabel = rightSubLabel;

        // Apply conditional styling
        ApplyMetricStyling(control, leftValue, rightValue);

        // Handle interactions
        control.LeftSectionClicked += (s, e) =>
        {
            ShowDetailedAnalytics(title, "left", leftLabel);
        };

        control.RightSectionClicked += (s, e) =>
        {
            ShowDetailedAnalytics(title, "right", rightLabel);
        };

        metricControls.Add(control);
        return control;
    }

    private void ApplyMetricStyling(BeepDualPercentageControl control, int leftValue, int rightValue)
    {
        // Apply styling based on performance thresholds
        if (leftValue >= 90)
            control.LeftSectionStyle = SectionStyle.Excellent;
        else if (leftValue >= 75)
            control.LeftSectionStyle = SectionStyle.Good;
        else if (leftValue >= 50)
            control.LeftSectionStyle = SectionStyle.Warning;
        else
            control.LeftSectionStyle = SectionStyle.Critical;

        // Similar logic for right section
        if (rightValue >= 90)
            control.RightSectionStyle = SectionStyle.Excellent;
        else if (rightValue >= 75)
            control.RightSectionStyle = SectionStyle.Good;
        else if (rightValue >= 50)
            control.RightSectionStyle = SectionStyle.Warning;
        else
            control.RightSectionStyle = SectionStyle.Critical;
    }

    private Image GetIconImage(string iconText)
    {
        // Convert emoji or text to image (implementation specific)
        return CreateIconFromText(iconText);
    }

    private void ShowDetailedAnalytics(string category, string section, string metric)
    {
        var detailForm = new DetailedAnalyticsForm(category, section, metric);
        detailForm.Show();
    }

    private void ShowError(string message)
    {
        MessageBox.Show(message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
    }

    // Helper methods
    private Image CreateIconFromText(string text) { return null; /* Implementation */ }
}

Theming

BeepDualPercentageControl provides comprehensive theming support with specialized styling for comparison scenarios:

var dualPercentage = new BeepDualPercentageControl
{
    Theme = "AnalyticsDark",
    UseThemeColors = true
};

// Theme automatically applies:
// - SectionBackColors: Background colors for left and right sections
// - DividerColor: Color of the section divider
// - TextColors: Label and percentage text colors
// - ProgressColors: Progress bar styling
// - TrendColors: Trend indicator colors
// - HighlightColors: Hover and selection states

Comparison-Specific Theming

• Performance-based colors - Automatic color coding based on performance thresholds
• Trend visualization - Theme-coordinated trend indicators and arrows
• Section differentiation - Subtle styling differences between comparison sections
• Progress integration - Consistent progress bar styling with theme colors

Best Practices

🎯 User Experience

• Clear labeling: Use descriptive labels that make the comparison context obvious
• Meaningful icons: Choose icons that immediately convey the metric type
• Consistent scaling: Ensure both sides use the same percentage scale for fair comparison
• Performance indicators: Use color coding to quickly communicate performance levels

📊 Data Presentation

• Appropriate comparisons: Only compare related metrics that make logical sense together
• Time context: Clearly indicate the time periods being compared
• Threshold awareness: Consider what constitutes good/bad performance for each metric
• Trend information: Include trend indicators when historical context is important

🔧 Implementation

• Real-time updates: Implement smooth value transitions for live data
• Error handling: Gracefully handle missing or invalid data
• Performance optimization: Use efficient update patterns for high-frequency data
• Responsive design: Ensure controls adapt well to different container sizes