Dashboard Customization

# Line Chart - Trends over time
- id: "compliance_trend"
  type: "line_chart"
  config:
    x_axis: "date"
    y_axis: "compliance_score"
    multiple_series: true
    smooth_curves: true

# Bar Chart - Category comparisons
- id: "violations_by_severity"
  type: "bar_chart"
  config:
    x_axis: "severity"
    y_axis: "count"
    orientation: "vertical"
    stacked: false

# Pie Chart - Proportional data
- id: "resource_distribution"
  type: "pie_chart"
  config:
    value_field: "count"
    label_field: "resource_type"
    show_percentages: true

# Heatmap - Multi-dimensional data
- id: "policy_coverage_matrix"
  type: "heatmap"
  config:
    x_axis: "service"
    y_axis: "compliance_framework"
    value: "coverage_percentage"
    color_scale: "green_to_red"

# Metric Cards - Key performance indicators
- id: "active_violations"
  type: "metric_card"
  config:
    title: "Active Violations"
    value_field: "count"
    trend_field: "change_percentage"
    format: "number"
    color_by_trend: true

# Data Table - Detailed listings
- id: "top_violations"
  type: "data_table"
  config:
    columns:
      - field: "policy_name"
        title: "Policy"
        sortable: true
      - field: "count"
        title: "Violations"
        format: "number"
      - field: "trend"
        title: "Trend"
        format: "percentage"
    pagination: true
    max_rows: 20

# Progress Bar - Goal tracking
- id: "remediation_progress"
  type: "progress_bar"
  config:
    current_value: "remediated_count"
    target_value: "total_violations"
    show_percentage: true
    color_segments:
      - threshold: 25
        color: "red"
      - threshold: 75
        color: "yellow"
      - threshold: 100
        color: "green"

# Custom API data source
data_sources:
  - name: "jira_tickets"
    type: "rest_api"
    endpoint: "https://company.atlassian.net/rest/api/3/search"
    authentication:
      type: "bearer_token"
      token_env: "JIRA_API_TOKEN"
    query_params:
      jql: "project = SEC AND status != Done"
    transform: |
      return {
        "open_security_tickets": data.total,
        "tickets": data.issues.map(issue => ({
          "key": issue.key,
          "summary": issue.fields.summary,
          "priority": issue.fields.priority.name,
          "created": issue.fields.created
        }))
      }

  # Database integration
  - name: "risk_assessments"
    type: "postgresql"
    connection: "risk_db"
    query: |
      SELECT
        risk_category,
        avg(risk_score) as avg_score,
        count(*) as assessment_count
      FROM risk_assessments
      WHERE assessment_date >= CURRENT_DATE - INTERVAL '30 days'
      GROUP BY risk_category

# Custom dashboard theme
theme:
  name: "company_branded"
  colors:
    primary: "#1e40af"
    secondary: "#0ea5e9"
    success: "#10b981"
    warning: "#f59e0b"
    danger: "#dc2626"
    background: "#0f172a"
    surface: "#1e293b"
    text_primary: "#f8fafc"
    text_secondary: "#94a3b8"

  typography:
    font_family: "Inter, sans-serif"
    heading_sizes:
      h1: "2.25rem"
      h2: "1.875rem"
      h3: "1.5rem"
    font_weights:
      normal: 400
      bold: 600

  layout:
    grid_gap: "1rem"
    border_radius: "0.5rem"
    shadow: "0 10px 25px rgba(0,0,0,0.1)"

# Custom CSS for advanced styling
custom_css: |
  .metric-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  .compliance-score.high {
    animation: pulse 2s infinite;
  }