executive-dashboard

仓库: dengineproblem/agents-monorepo
安装量: 53
排名: #13963

安装

npx skills add https://github.com/dengineproblem/agents-monorepo --skill executive-dashboard

Executive Dashboard Expert Expert in designing and building executive dashboards that deliver actionable insights to C-level executives and senior leadership. Core Dashboard Principles Strategic Focus Lead with business outcomes, not data points Align KPIs directly to company objectives and strategic initiatives Prioritize forward-looking metrics over historical reporting Enable drill-down capabilities without overwhelming the main view Design for mobile and presentation contexts Information Hierarchy Follow the "5-second rule" - key insights visible immediately Use progressive disclosure: summary → trends → details Implement the "traffic light" system for status indicators Group related metrics into coherent business themes Maintain consistent terminology across all metrics Essential KPI Categories Financial Performance const financialKPIs = { revenue : { current : 'Monthly Recurring Revenue (MRR)' , trend : 'Revenue Growth Rate (YoY)' , health : 'Revenue per Employee' , forecast : 'Pipeline Value & Conversion Rate' } , profitability : { margin : 'Gross Margin %' , efficiency : 'Operating Expense Ratio' , cash : 'Cash Flow & Burn Rate' , roi : 'Return on Investment by Initiative' } , unit_economics : { cac : 'Customer Acquisition Cost' , ltv : 'Customer Lifetime Value' , ltv_cac_ratio : 'LTV:CAC Ratio (target: 3:1)' , payback : 'CAC Payback Period' } } ; Operational Excellence const operationalKPIs = { customers : { acquisition : 'Customer Acquisition Cost (CAC)' , retention : 'Net Revenue Retention (NRR)' , satisfaction : 'Net Promoter Score (NPS)' , lifetime : 'Customer Lifetime Value (CLV)' , churn : 'Monthly/Annual Churn Rate' } , performance : { quality : 'Defect Rate & SLA Performance' , speed : 'Time to Market & Cycle Time' , capacity : 'Utilization Rates & Capacity Planning' } , growth : { pipeline : 'Sales Pipeline Coverage' , conversion : 'Stage Conversion Rates' , velocity : 'Deal Velocity' } } ; Dashboard Layout Patterns Executive Summary Layout

< div class = " executive-dashboard "

< section class = " hero-metrics "

< div class = " primary-kpi "

Revenue: $2.3M ↗️ 12% </ div

< div class = " status-indicators "

< span class = " green "

Growth </ span

< span class = " yellow "

Margins </ span

< span class = " red "

Churn </ span

</ div

</ section

< section class = " trend-charts "

< div class = " chart-grid "

< chart type = " line " data = " revenue-trend " period = " 12mo " /> < chart type = " gauge " data = " nps-score " target = " 50 " /> < chart type = " funnel " data = " sales-pipeline " /> < chart type = " heatmap " data = " regional-performance " /> </ div

</ section

< section class = " action-items "

< alert type = " critical "

Customer churn up 3% - immediate action required </ alert

< insight

Marketing ROI improved 24% - scale successful campaigns </ insight

</ section

</ div

CSS Grid Layout .executive-dashboard { display : grid ; grid-template-areas : "hero hero hero hero" "chart1 chart1 chart2 chart2" "chart3 chart4 chart5 chart6" "alerts alerts insights insights" ; grid-template-columns : repeat ( 4 , 1 fr ) ; grid-template-rows : auto 1 fr 1 fr auto ; gap : 24 px ; padding : 24 px ; min-height : 100 vh ; } .hero-metrics { grid-area : hero ; display : flex ; justify-content : space-between ; align-items : center ; background : linear-gradient ( 135 deg ,

1a365d

0 % ,

2d3748

100 % ) ; border-radius : 12 px ; padding : 32 px ; } .primary-kpi { font-size : 48 px ; font-weight : 700 ; color : white ; } .status-indicator { padding : 8 px 16 px ; border-radius : 20 px ; font-weight : 600 ; } .status-indicator .green { background :

48bb78

; } .status-indicator .yellow { background :

ecc94b

; color :

1a202c

; } .status-indicator .red { background :

f56565

; } Data Visualization Best Practices Chart Selection Guidelines def select_chart_type ( data_type , purpose ) : chart_mapping = { ( 'trend' , 'time_series' ) : 'line_chart' , ( 'comparison' , 'categories' ) : 'bar_chart' , ( 'part_to_whole' , 'composition' ) : 'donut_chart' , ( 'performance' , 'target' ) : 'gauge_chart' , ( 'correlation' , 'scatter' ) : 'scatter_plot' , ( 'geographic' , 'regional' ) : 'choropleth_map' , ( 'process' , 'conversion' ) : 'funnel_chart' , ( 'distribution' , 'variance' ) : 'box_plot' , ( 'ranking' , 'top_n' ) : 'horizontal_bar' , ( 'change' , 'waterfall' ) : 'waterfall_chart' } return chart_mapping . get ( ( data_type , purpose ) , 'table' )

Executive dashboard color palette

EXEC_COLORS

{ 'success' : '#00A86B' ,

Green - targets met/exceeded

'warning' : '#FFB000' ,

Amber - attention needed

'critical' : '#D2222D' ,

Red - immediate action required

'neutral' : '#708090' ,

Gray - informational

'primary' : '#1f4e79' ,

Navy - brand/emphasis

'secondary' : '#4a5568' ,

Dark gray - secondary elements

'background' : '#f7fafc'

Light gray - backgrounds

} Interactive Elements class ExecutiveDashboard { constructor ( ) { this . filters = { timeframe : 'YTD' , region : 'All' , business_unit : 'All' } ; this . alertThresholds = { revenue_variance : 0.05 , customer_churn : 0.02 , margin_decline : 0.03 } ; } // Auto-refresh critical metrics setupRealTimeUpdates ( ) { setInterval ( ( ) => { this . updateMetrics ( [ 'revenue' , 'active_users' , 'system_health' ] ) ; this . checkAlertConditions ( ) ; } , 300000 ) ; // 5-minute intervals } // Contextual drill-downs enableDrillDown ( metric , level = 'summary' ) { const drillPaths = { 'revenue' : [ 'total' , 'by_product' , 'by_region' , 'by_customer' ] , 'churn' : [ 'rate' , 'by_segment' , 'by_reason' , 'cohort_analysis' ] , 'pipeline' : [ 'total' , 'by_stage' , 'by_rep' , 'by_source' ] } ; return drillPaths [ metric ] || [ 'summary' ] ; } // Export for board presentations exportToPDF ( ) { return { format : 'landscape' , pages : [ 'executive_summary' , 'financial' , 'operational' ] , branding : true , timestamp : new Date ( ) . toISOString ( ) } ; } } Executive Communication Features Automated Insights def generate_executive_insights ( metrics_data ) : insights = [ ]

Trend analysis

if metrics_data [ 'revenue_growth' ]

0.15 : insights . append ( { 'type' : 'opportunity' , 'message' : f"Revenue accelerating at { metrics_data [ 'revenue_growth' ] : .1% } - consider scaling successful initiatives" , 'action' : 'Review top-performing channels for expansion' } )

Anomaly detection

if abs ( metrics_data [ 'current_vs_forecast' ] )

0.1 : insights . append ( { 'type' : 'alert' , 'message' : 'Significant variance from forecast detected' , 'impact' : 'May affect quarterly targets' , 'next_steps' : 'Schedule forecast review meeting' } )

Churn warning

if
metrics_data
[
'churn_rate'
]
>
metrics_data
[
'churn_threshold'
]
:
insights
.
append
(
{
'type'
:
'critical'
,
'message'
:
f"Churn rate at
{
metrics_data
[
'churn_rate'
]
:
.1%
}
exceeds threshold"
,
'impact'
:
f"Potential ARR loss: $
{
metrics_data
[
'at_risk_arr'
]
:
,.0f
}
"
,
'next_steps'
:
'Activate retention playbook'
}
)
return
sorted
(
insights
,
key
=
lambda
x
:
{
'critical'
:
0
,
'alert'
:
1
,
'opportunity'
:
2
}
[
x
[
'type'
]
]
)
Board Presentation Export
// Board presentation export
function
exportToBoardDeck
(
)
{
const
slideTemplates
=
{
'executive_summary'
:
{
layout
:
'hero_metrics_with_trend'
,
charts
:
[
'revenue_trend'
,
'key_kpis_table'
]
,
insights
:
'auto_generated'
}
,
'financial_performance'
:
{
layout
:
'financial_grid'
,
charts
:
[
'revenue_waterfall'
,
'margin_analysis'
,
'cash_flow'
]
,
commentary
:
'variance_explanation'
}
,
'operational_highlights'
:
{
layout
:
'balanced_scorecard'
,
charts
:
[
'customer_metrics'
,
'efficiency_trends'
]
,
actions
:
'priority_initiatives'
}
,
'forward_look'
:
{
layout
:
'forecast_view'
,
charts
:
[
'pipeline_coverage'
,
'growth_projections'
]
,
risks
:
'risk_register_summary'
}
}
;
return
generatePresentation
(
slideTemplates
)
;
}
Performance and Scalability
Data Refresh Strategy
-- Executive dashboard data mart optimization
CREATE
MATERIALIZED
VIEW
executive_kpis_daily
AS
SELECT
date_key
,
SUM
(
revenue
)
as
total_revenue
,
COUNT
(
DISTINCT
customer_id
)
as
active_customers
,
AVG
(
satisfaction_score
)
as
avg_nps
,
SUM
(
revenue
)
/
COUNT
(
DISTINCT
customer_id
)
as
revenue_per_customer
,
SUM
(
CASE
WHEN
is_churned
THEN
arr
ELSE
0
END
)
as
churned_arr
,
SUM
(
CASE
WHEN
is_new
THEN
arr
ELSE
0
END
)
as
new_arr
FROM
fact_daily_metrics
WHERE
date_key
>=
CURRENT_DATE
-
INTERVAL
'2 years'
GROUP
BY
date_key
;
-- Create index for fast filtering
CREATE
INDEX
idx_exec_kpis_date
ON
executive_kpis_daily
(
date_key
)
;
-- Refresh every 4 hours for near real-time executive view
SELECT
cron
.
schedule
(
'refresh-exec-dashboard'
,
'0 /4 * * '
,
'REFRESH MATERIALIZED VIEW CONCURRENTLY executive_kpis_daily;'
)
;
Caching Strategy
const
cacheConfig
=
{
// Hero metrics - most viewed, short cache
heroMetrics
:
{
ttl
:
300
,
// 5 minutes
preload
:
true
}
,
// Trend charts - moderate cache
trendCharts
:
{
ttl
:
900
,
// 15 minutes
preload
:
false
}
,
// Historical data - long cache
historicalData
:
{
ttl
:
3600
,
// 1 hour
preload
:
false
}
,
// Real-time metrics - no cache
realTimeMetrics
:
{
ttl
:
0
,
streaming
:
true
}
}
;
Mobile Optimization
/ Mobile-first executive dashboard /
@media
(
max-width
:
768
px
)
{
.executive-dashboard
{
grid-template-areas
:
"hero"
"chart1"
"chart2"
"alerts"
;
grid-template-columns
:
1
fr
;
padding
:
16
px
;
}
.primary-kpi
{
font-size
:
32
px
;
}
.chart-container
{
min-height
:
200
px
;
}
/ Touch-friendly controls /
.filter-button
{
min-height
:
44
px
;
min-width
:
44
px
;
}
}
Testing and Validation
Dashboard Quality Checklist
5-Second Test
Key insights visible immediately upon load
Mobile Compatibility
Readable on executive mobile devices
Data Accuracy
Automated validation against source systems
Performance
< 3 second load times for all views
Accessibility
Color-blind friendly palette and screen reader support
Stakeholder Validation
Monthly review sessions with dashboard users Automated Testing def test_dashboard_accuracy ( ) : """Compare dashboard values to source systems.""" dashboard_revenue = get_dashboard_metric ( 'total_revenue' ) source_revenue = query_source_system ( 'SELECT SUM(amount) FROM orders' ) variance = abs ( dashboard_revenue - source_revenue ) / source_revenue assert variance < 0.001 , f"Revenue variance { variance : .2% } exceeds threshold" Лучшие практики 5-second rule — ключевые метрики видны сразу Progressive disclosure — от общего к деталям Mobile-first — работает на телефоне CEO Real-time where needed — критичные метрики обновляются часто Actionable insights — не просто данные, а рекомендации Consistent design — единый визуальный язык
← 返回排行榜