​

Dashboard Overview

​

Dashboard Homepage

​

Key Performance Indicators (KPIs)

​

1. Total Calls

• Description: Total number of API requests in the selected time period
• Use Case: Monitor application usage and growth trends
• Drill-down: Click to see daily breakdown

​

2. Average Latency

• Description: Mean response time across all requests
• Use Case: Identify performance degradation or improvements
• Benchmark:
  • Excellent: < 1000ms
  • Good: 1000-2000ms
  • Needs attention: > 2000ms

​

3. Total Cost

• Description: Cumulative spend in USD for the period
• Use Case: Track budget and ROI
• Features:
  • Projected month-end cost
  • Comparison to previous period
  • Savings vs GPT-4o baseline

​

4. Fallback Rate

• Description: Percentage of requests that required fallback to alternative model
• Use Case: Measure routing accuracy and reliability
• Benchmark:
  • Excellent: < 5%
  • Good: 5-10%
  • Needs attention: > 10%

​

Model Distribution Chart

• Pie chart: Shows percentage split by model
• Bar chart: Shows absolute request count
• Interactive: Click on a model to filter the view

gpt-4o-mini:       51.4% (23,456 calls)
claude-sonnet-4-5: 39.9% (18,234 calls)
gpt-4o:            8.7%  (3,988 calls)

​

Time Period Selector

• Last 24 hours: Real-time monitoring
• Last 7 days: Weekly review (default)
• Last 30 days: Monthly reporting
• Last 90 days: Quarterly analysis
• Custom range: Pick specific dates

​

Navigation

​

Main Menu

1. Overview - Homepage with KPIs
2. Analytics - Detailed performance metrics
3. Logs - Call-by-call inspection
4. Insights - AI-powered recommendations
5. Settings - Configuration and API keys
6. Team - User and access management
7. Billing - Invoices and payment methods

​

Overview Page Details

​

Request Volume Chart

• X-axis: Time (hourly/daily based on range)
• Y-axis: Number of requests
• Features:
  • Hover for exact counts
  • Identify peak usage times
  • Spot anomalies

​

Cost Breakdown

• X-axis: Date
• Y-axis: Cost in USD
• Colors: Different color per model
• Use Cases:
  • Identify cost spikes
  • Compare model costs
  • Track optimization impact

​

Success Rate Over Time

• X-axis: Time
• Y-axis: Success rate (0-100%)
• Threshold line: 95% target
• Alert: Highlights periods below 95%

​

Task Type Distribution

Extraction:      34% ████████████████████████████
Classification:  23% ████████████████████
Summarization:   18% ███████████████
Reasoning:       12% ██████████
Code:            8%  ██████
Writing:         5%  ████

• Understand workload composition
• Optimize routing rules per task type
• Plan capacity

​

Quick Actions

​

Generate API Key

• Click to create new test/production keys
• Automatically copied to clipboard
• Set optional expiration dates

​

View Documentation

• Quick links to:
  • Quickstart Guide
  • API Reference
  • Integration Examples

​

Download Report

• PDF: Executive summary with charts
• CSV: Raw data for analysis
• JSON: Programmatic access

​

Alerts & Notifications

​

Alert Types

​

Cost Alerts

• Budget threshold: 80% of monthly budget reached
• Spike detection: 50% daily increase vs. average
• Projected overage: Month-end projection exceeds budget

​

Performance Alerts

• Latency spike: > 50% increase in avg latency
• Error rate: Success rate drops below 95%
• Provider issues: Upstream provider degradation

​

Optimization Opportunities

• Model suggestion: Better model available for task type
• Cost savings: Potential to reduce spend by X%
• Quality improvement: Upgrade opportunity identified

​

Notification Settings

• Email: Receive alerts via email
• Slack: Post to Slack channel
• Webhook: POST to custom endpoint
• In-app: Dashboard notifications only

​

Customization

​

Dashboard Widgets

1. Click Customize Dashboard
2. Drag and drop widgets
3. Resize chart areas
4. Hide/show specific metrics
5. Save layout

• KPI cards
• Request volume chart
• Cost breakdown
• Model distribution
• Task type breakdown
• Latency trends
• Success rate trends
• Recent logs table

​

Saved Views

1. Configure filters (time range, model, task type)
2. Click “Save View”
3. Name your view (e.g., “Production Monitoring”, “Weekly Review”)
4. Access from dropdown in top navigation

• Cost Control: Focus on cost metrics and optimization
• Performance: Latency, success rate, provider health
• Quality: Validation rates, retry rates, fallback usage

​

Mobile Experience

• Mobile app: iOS and Android apps available
• Responsive web: Works on tablets and phones
• Touch-optimized: Tap to drill down into charts
• Push notifications: Get alerts on mobile

​

Keyboard Shortcuts

​

Embedded Dashboard

​

iframe Embedding

<iframe
  src="https://withperf.pro/embed/dashboard?api_key=pk_live_abc123"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

​

JavaScript SDK

import { PerfEmbed } from '@perf/embed';

const dashboard = new PerfEmbed({
  apiKey: 'pk_live_abc123',
  container: '#dashboard-container',
  widgets: ['kpis', 'model-distribution', 'cost-chart'],
  timeRange: '7d'
});

dashboard.render();

​

Data Refresh

• Real-time: KPIs update every 30 seconds
• Charts: Refresh every 2 minutes
• Manual: Click refresh button anytime
• Auto-refresh: Toggle in settings

​

Comparison Mode

1. Enable Comparison Mode
2. Select Base Period (e.g., last 7 days)
3. Select Comparison Period (e.g., previous 7 days)
4. View delta metrics:
   • Calls: ↑ 12.3%
   • Cost: ↓ 5.7%
   • Latency: ↓ 8.2%
   • Success Rate: ↑ 1.2%

​

Export Options

​

PDF Report

• Executive summary
• All KPIs with period-over-period comparison
• Key charts (model distribution, cost breakdown)
• Top insights and recommendations
• Customizable branding (Enterprise)

• Stakeholder presentations
• Monthly reviews
• Compliance documentation

​

CSV Export

• All raw data points
• Timestamp, model, cost, latency per call
• Filterable by current dashboard view
• Maximum 100,000 rows per export

• Custom analysis in Excel/Sheets
• Feed into BI tools (Tableau, Looker)
• Audit trails

​

API Access

​

Collaboration Features

​

Shared Dashboards

1. Configure view with desired filters
2. Click “Share”
3. Set permissions:
   • View-only
   • Time-limited access
   • Password-protected
4. Copy link to share with team

​

Comments & Annotations

1. Click on chart at relevant time
2. Add annotation: “Deployed new feature”
3. Team members can see context
4. Useful for: Correlating events with metric changes

​

Best Practices

​

Daily Monitoring

• Check Overview dashboard each morning
• Review alerts and notifications
• Verify success rate > 95%
• Scan for cost anomalies

​

Weekly Review

• Analyze 7-day trends
• Review optimization opportunities
• Check model distribution efficiency
• Validate budget tracking

​

Monthly Planning

• Export 30-day report
• Analyze task type evolution
• Plan capacity for next month
• Review and adjust budgets

​

Troubleshooting

​

Dashboard Not Loading

1. Check internet connection
2. Clear browser cache
3. Try incognito/private mode
4. Check status.withperf.pro

​

Data Seems Incorrect

1. Verify time range selection
2. Check for active filters
3. Confirm API key has access to data
4. Contact support if persistent

​

Charts Not Updating

1. Click manual refresh button
2. Disable browser extensions (ad blockers)
3. Check auto-refresh is enabled
4. Try different browser

​

Next Steps

• Explore Analytics Features
• View Detailed Logs
• Set Up Team Access
• Configure Alerts

​

Support

• Email: [email protected]
• Live Chat: Available in dashboard (bottom right)
• Documentation: docs.withperf.pro
• Video Tutorials: youtube.com/@perfai