Data Visualization Principles

// Vaadin Chart.js integration
@Route("dashboard/risk")
public class RiskDashboardView extends VerticalLayout {
    
    public RiskDashboardView() {
        // KPI Cards at top
        HorizontalLayout kpis = createKPICards();
        
        // Main charts grid
        HorizontalLayout chartsRow1 = new HorizontalLayout();
        chartsRow1.add(
            createRiskDistributionChart(),
            createRiskTrendChart()
        );
        
        HorizontalLayout chartsRow2 = new HorizontalLayout();
        chartsRow2.add(
            createPartyComparisonChart(),
            createTopRisksTable()
        );
        
        add(kpis, chartsRow1, chartsRow2);
    }
    
    private Component createRiskDistributionChart() {
        Chart chart = new Chart(ChartType.BAR);
        chart.getConfiguration().setTitle("Risk Score Distribution");
        
        Configuration config = chart.getConfiguration();
        
        // Data
        DataSeries series = new DataSeries("Politicians");
        series.add(new DataSeriesItem("0-20", 45));
        series.add(new DataSeriesItem("21-40", 89));
        series.add(new DataSeriesItem("41-60", 134));
        series.add(new DataSeriesItem("61-80", 67));
        series.add(new DataSeriesItem("81-100", 14));
        
        // Color scheme - traffic light semantics
        PlotOptionsSeries options = new PlotOptionsSeries();
        options.setColorByPoint(true);
        series.setPlotOptions(options);
        
        // Accessible colors
        config.setColors(
            new SolidColor("#2e7d32"),  // Green (low risk)
            new SolidColor("#689f38"),  // Light green
            new SolidColor("#f57c00"),  // Orange (medium)
            new SolidColor("#e64a19"),  // Dark orange
            new SolidColor("#c62828")   // Red (high risk)
        );
        
        config.addSeries(series);
        
        // Axis labels
        XAxis x = new XAxis();
        x.setTitle("Risk Score Range");
        config.addxAxis(x);
        
        YAxis y = new YAxis();
        y.setTitle("Number of Politicians");
        config.addyAxis(y);
        
        return chart;
    }
}

/* CIA Platform Color System */

/* Primary Semantic Colors */
:root {
  /* Risk levels - WCAG AA compliant */
  --risk-critical: #b71c1c;  /* Red - High contrast */
  --risk-high: #d32f2f;
  --risk-medium: #f57c00;     /* Orange */
  --risk-low: #388e3c;        /* Green */
  --risk-minimal: #1976d2;    /* Blue */
  
  /* Political party colors (Sweden) */
  --party-s: #ed1b34;         /* Social Democrats - Red */
  --party-m: #52bdec;         /* Moderates - Light Blue */
  --party-sd: #dddd00;        /* Sweden Democrats - Yellow */
  --party-c: #009933;         /* Centre - Green */
  --party-v: #da291c;         /* Left - Dark Red */
  --party-kd: #000077;        /* Christian Democrats - Blue */
  --party-l: #006ab3;         /* Liberals - Blue */
  --party-mp: #83cf39;        /* Green Party - Light Green */
  
  /* Data visualization scale */
  --viz-gradient-start: #e3f2fd;
  --viz-gradient-mid: #1976d2;
  --viz-gradient-end: #0d47a1;
  
  /* Neutral palette for secondary data */
  --neutral-1: #f5f5f5;
  --neutral-2: #e0e0e0;
  --neutral-3: #9e9e9e;
  --neutral-4: #616161;
  --neutral-5: #212121;
}

/* Chart.js custom color scheme */
.political-chart {
  --chart-primary: #1976d2;
  --chart-secondary: #388e3c;
  --chart-tertiary: #f57c00;
  --chart-quaternary: #7b1fa2;
}

## F-Pattern Layout (Eye Tracking)

┌─────────────────────────────────────────┐
│  Logo    Navigation           User      │  ← Primary scan (horizontal)
├─────────────────────────────────────────┤
│  KPI 1    KPI 2    KPI 3    KPI 4      │  ← Key metrics (horizontal)
├─────────────────────────────────────────┤
│                                         │
│  ┌───────────────┐  ┌───────────────┐  │
│  │               │  │               │  │
│  │  Main Chart   │  │  Trend Line   │  │  ← Primary content
│  │               │  │               │  │
│  └───────────────┘  └───────────────┘  │
│                                         │
│  ┌───────────────┐  ┌───────────────┐  │
│  │  Comparison   │  │  Top List     │  │  ← Secondary content
│  │  Bar Chart    │  │  Table        │  │
│  └───────────────┘  └───────────────┘  │
└─────────────────────────────────────────┘

### Dashboard Best Practices:
✅ Most important info top-left
✅ KPIs in horizontal row
✅ Primary chart larger than secondary
✅ Related charts adjacent
✅ Consistent spacing (8px grid)
✅ Responsive breakpoints (mobile-first)

❌ Don't overcrowd (max 6 charts)
❌ Don't use 3D effects
❌ Don't mix too many chart types
❌ Don't use decorative elements