BeepDashboardWidget

Overview

BeepDashboardWidget is a paint-based WinForms widget that inherits from BaseControl. It uses an IWidgetPainter pipeline to render rich visuals without child controls. The Style property selects one of 6 built-in render modes; changing it at runtime immediately swaps the painter and triggers a repaint.

Toolbox icon: 🗂️
Category: Beep Widgets → Dashboard
Default size: 400 × 300
Namespace: TheTechIdea.Beep.Winform.Controls.Widgets

Key Features

🗂️ Six Layouts

Grid, timeline, comparison, and analytics — all from one widget.

📊 DashboardMetric

Simple DashboardMetric model (Title, Value, Trend, Color) populates all styles.

🎨 Gradient Panels

Built-in LinearGradient support for the panel background.

🖱️ Card Click Events

MetricClicked fires with the specific DashboardMetric the user clicked.

📐 Configurable Grid

Columns and Rows properties control the metric/chart grid density.

🔄 Live Update

Update Metrics collection and call Invalidate() to refresh in place.

Style Variants (6)

Style Value	Description
`MultiMetric`	Grid of metric cards (Revenue, Users, Orders, Growth).
`ChartGrid`	Grid of small charts each representing a different metric.
`TimelineView`	Chronological event/activity timeline.
`ComparisonGrid`	Side-by-side metric comparisons with delta indicators.
`StatusOverview`	System-health style dashboard with service status indicators.
`AnalyticsPanel`	Complex analytics layout with chart + metric summary.

Properties

Property	Type	Default	Description
`Style`	DashboardWidgetStyle	MultiMetric	Selects the dashboard layout painter.
`Title`	string	"Dashboard"	Header text for the panel.
`Metrics`	List<DashboardMetric>	(4 sample)	Data items. Each DashboardMetric has Title, Value, Trend, Color.
`Columns`	int	2	Number of columns in metric/chart grid layouts.
`Rows`	int	2	Number of rows in metric/chart grid layouts.
`ShowTitle`	bool	true	Show/hide the panel title bar.
`GradientDirection`	LinearGradientMode	Vertical	Direction of the panel background gradient.
`AccentColor`	Color	(theme primary)	Primary accent colour used across metric cards.
`CardBackColor`	Color	(theme card)	Background colour for each inner metric card.

Inherits all BaseControl properties (Border, Padding, Theme colors, etc.).

Events

Event	Args Type	Description
`MetricClicked`	BeepEventDataArgs	Fired when a metric card is clicked. Data contains the DashboardMetric.
`PanelClicked`	BeepEventDataArgs	Fired when the dashboard panel background is clicked.

Basic Usage

var dash = new BeepDashboardWidget
{
    Style   = DashboardWidgetStyle.MultiMetric,
    Title   = "Q4 KPIs",
    Columns = 2,
    Metrics = new List
    {
        new DashboardMetric { Title = "Revenue", Value = "$127K",  Trend = "+12%", Color = Color.Green  },
        new DashboardMetric { Title = "Users",   Value = "23,456", Trend = "+8%",  Color = Color.Blue   },
        new DashboardMetric { Title = "Orders",  Value = "1,234",  Trend = "-2%",  Color = Color.Red    },
        new DashboardMetric { Title = "Growth",  Value = "15.7%",  Trend = "+5%",  Color = Color.Orange },
    },
    Size = new Size(420, 260)
};
this.Controls.Add(dash);

Event Handling

dash.MetricClicked += (s, e) =>
{
    var m = (DashboardMetric)e.Data;
    DrillDown(m.Title);
};

Best Practices

Set Style before adding the widget to the form to avoid double repaints.
Adjust Size to fit your layout — defaults are minimum comfortable sizes.
Read BeepEventDataArgs.Data in event handlers for context-specific click data.
Call Invalidate() after updating data properties to trigger a repaint.
Let theme colors flow from BeepStyling.CurrentTheme — avoid overriding color properties unless customization is explicitly desired.