Phase 2: chart integration

frontend/package-lock.json

@@ -16,6 +16,8 @@
         "@angular/material": "^21.2.3",
         "@angular/platform-browser": "^21.2.0",
         "@angular/router": "^21.2.0",
+        "echarts": "^6.0.0",
+        "ngx-echarts": "^21.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
       },
@@ -4479,6 +4481,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5937,6 +5955,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ngx-echarts": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-21.0.0.tgz",
+      "integrity": "sha512-vivBRmGYMFlnPxK/uxliY+sexGwHqnFZ2pylGbIMF2wikt9RpZpGGSitLmuUXvzYwkVFGo6dQmiUQh1+6Pbfuw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=21.0.0",
+        "echarts": ">=5.0.0"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
@@ -7718,6 +7749,21 @@
       "peerDependencies": {
         "zod": "^3.25 || ^4"
       }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }

frontend/package.json

@@ -19,6 +19,8 @@
     "@angular/material": "^21.2.3",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
+    "echarts": "^6.0.0",
+    "ngx-echarts": "^21.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

frontend/src/app/core/mocks/charts.mock.ts

@@ -0,0 +1,48 @@
+export interface TrafficDataPoint {
+  time: string;
+  inbound: number;
+  outbound: number;
+  latency: number;
+}
+
+export const TRAFFIC_MOCK: TrafficDataPoint[] = [
+  { time: '00:00', inbound: 120, outbound: 95, latency: 12 },
+  { time: '01:00', inbound: 85, outbound: 70, latency: 10 },
+  { time: '02:00', inbound: 60, outbound: 52, latency: 8 },
+  { time: '03:00', inbound: 45, outbound: 38, latency: 7 },
+  { time: '04:00', inbound: 40, outbound: 35, latency: 6 },
+  { time: '05:00', inbound: 55, outbound: 42, latency: 8 },
+  { time: '06:00', inbound: 90, outbound: 78, latency: 11 },
+  { time: '07:00', inbound: 145, outbound: 120, latency: 15 },
+  { time: '08:00', inbound: 210, outbound: 180, latency: 22 },
+  { time: '09:00', inbound: 280, outbound: 245, latency: 28 },
+  { time: '10:00', inbound: 310, outbound: 270, latency: 32 },
+  { time: '11:00', inbound: 295, outbound: 260, latency: 30 },
+  { time: '12:00', inbound: 270, outbound: 235, latency: 27 },
+  { time: '13:00', inbound: 285, outbound: 250, latency: 29 },
+  { time: '14:00', inbound: 320, outbound: 280, latency: 35 },
+  { time: '15:00', inbound: 300, outbound: 265, latency: 31 },
+  { time: '16:00', inbound: 275, outbound: 240, latency: 26 },
+  { time: '17:00', inbound: 250, outbound: 215, latency: 24 },
+  { time: '18:00', inbound: 220, outbound: 190, latency: 20 },
+  { time: '19:00', inbound: 185, outbound: 160, latency: 18 },
+  { time: '20:00', inbound: 160, outbound: 138, latency: 16 },
+  { time: '21:00', inbound: 140, outbound: 118, latency: 14 },
+  { time: '22:00', inbound: 125, outbound: 105, latency: 13 },
+  { time: '23:00', inbound: 110, outbound: 90, latency: 11 },
+];
+
+export interface IncidentRegionData {
+  region: string;
+  critical: number;
+  warning: number;
+  info: number;
+}
+
+export const INCIDENT_REGION_MOCK: IncidentRegionData[] = [
+  { region: 'US-East', critical: 5, warning: 12, info: 8 },
+  { region: 'US-West', critical: 2, warning: 8, info: 15 },
+  { region: 'EU-West', critical: 7, warning: 10, info: 6 },
+  { region: 'AP-South', critical: 3, warning: 14, info: 11 },
+  { region: 'AP-East', critical: 1, warning: 6, info: 9 },
+];

frontend/src/app/dashboard/chart-config.factory.ts

@@ -0,0 +1,140 @@
+import type { EChartsOption } from 'echarts';
+import { TrafficDataPoint, IncidentRegionData } from '../core/mocks/charts.mock';
+
+/**
+ * Chart color palette aligned with Material 3 violet theme.
+ * Uses CSS variable fallbacks for runtime theme integration.
+ */
+const PALETTE = {
+  primary: '#7b1fa2',
+  secondary: '#9c27b0',
+  tertiary: '#42a5f5',
+  surface: '#f5f0ff',
+  onSurface: '#1c1b1f',
+  outline: '#79747e',
+  critical: '#d32f2f',
+  warning: '#ed6c02',
+  info: '#0288d1',
+} as const;
+
+const BASE_TEXT_STYLE = {
+  fontFamily: 'Roboto, sans-serif',
+  color: PALETTE.onSurface,
+} as const;
+
+function baseGrid(): EChartsOption['grid'] {
+  return { left: 48, right: 24, top: 40, bottom: 32, containLabel: true };
+}
+
+export function buildTrafficLatencyOption(data: TrafficDataPoint[]): EChartsOption {
+  const times = data.map((d) => d.time);
+
+  return {
+    textStyle: BASE_TEXT_STYLE,
+    tooltip: { trigger: 'axis' },
+    legend: { top: 0, textStyle: { fontSize: 12 } },
+    grid: baseGrid(),
+    xAxis: {
+      type: 'category',
+      data: times,
+      axisLine: { lineStyle: { color: PALETTE.outline } },
+      axisLabel: { fontSize: 11 },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: 'Mbps',
+        nameTextStyle: { fontSize: 11 },
+        axisLine: { show: false },
+        splitLine: { lineStyle: { color: PALETTE.surface } },
+      },
+      {
+        type: 'value',
+        name: 'ms',
+        nameTextStyle: { fontSize: 11 },
+        axisLine: { show: false },
+        splitLine: { show: false },
+      },
+    ],
+    series: [
+      {
+        name: 'Inbound',
+        type: 'line',
+        data: data.map((d) => d.inbound),
+        smooth: true,
+        symbol: 'none',
+        lineStyle: { width: 2 },
+        itemStyle: { color: PALETTE.primary },
+        areaStyle: { color: `${PALETTE.primary}18` },
+      },
+      {
+        name: 'Outbound',
+        type: 'line',
+        data: data.map((d) => d.outbound),
+        smooth: true,
+        symbol: 'none',
+        lineStyle: { width: 2 },
+        itemStyle: { color: PALETTE.secondary },
+        areaStyle: { color: `${PALETTE.secondary}18` },
+      },
+      {
+        name: 'Latency',
+        type: 'line',
+        yAxisIndex: 1,
+        data: data.map((d) => d.latency),
+        smooth: true,
+        symbol: 'none',
+        lineStyle: { width: 2, type: 'dashed' },
+        itemStyle: { color: PALETTE.tertiary },
+      },
+    ],
+  };
+}
+
+export function buildIncidentRegionOption(data: IncidentRegionData[]): EChartsOption {
+  const regions = data.map((d) => d.region);
+
+  return {
+    textStyle: BASE_TEXT_STYLE,
+    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+    legend: { top: 0, textStyle: { fontSize: 12 } },
+    grid: baseGrid(),
+    xAxis: {
+      type: 'category',
+      data: regions,
+      axisLine: { lineStyle: { color: PALETTE.outline } },
+      axisLabel: { fontSize: 11 },
+    },
+    yAxis: {
+      type: 'value',
+      name: 'Incidents',
+      nameTextStyle: { fontSize: 11 },
+      axisLine: { show: false },
+      splitLine: { lineStyle: { color: PALETTE.surface } },
+    },
+    series: [
+      {
+        name: 'Critical',
+        type: 'bar',
+        stack: 'severity',
+        data: data.map((d) => d.critical),
+        itemStyle: { color: PALETTE.critical, borderRadius: [0, 0, 0, 0] },
+      },
+      {
+        name: 'Warning',
+        type: 'bar',
+        stack: 'severity',
+        data: data.map((d) => d.warning),
+        itemStyle: { color: PALETTE.warning },
+      },
+      {
+        name: 'Info',
+        type: 'bar',
+        stack: 'severity',
+        data: data.map((d) => d.info),
+        itemStyle: { color: PALETTE.info, borderRadius: [4, 4, 0, 0] },
+        barWidth: '50%',
+      },
+    ],
+  };
+}

frontend/src/app/dashboard/chart-widget/chart-widget.html

@@ -0,0 +1,6 @@
+<mat-card class="chart-card" appearance="outlined">
+  <mat-card-content>
+    <h3 class="chart-title">{{ title() }}</h3>
+    <div class="chart-container" echarts [options]="options()"></div>
+  </mat-card-content>
+</mat-card>

frontend/src/app/dashboard/chart-widget/chart-widget.scss

@@ -0,0 +1,19 @@
+:host {
+  display: block;
+}
+
+.chart-card {
+  height: 100%;
+  border-radius: var(--pf-radius-md);
+}
+
+.chart-title {
+  font: var(--mat-sys-title-medium);
+  color: var(--mat-sys-on-surface);
+  margin: 0 0 var(--pf-spacing-md);
+}
+
+.chart-container {
+  width: 100%;
+  height: 300px;
+}

frontend/src/app/dashboard/chart-widget/chart-widget.ts

@@ -0,0 +1,35 @@
+import { Component, input } from '@angular/core';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+import * as echarts from 'echarts/core';
+import { LineChart, BarChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import type { EChartsOption } from 'echarts';
+
+echarts.use([
+  LineChart,
+  BarChart,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  CanvasRenderer,
+]);
+
+@Component({
+  selector: 'app-chart-widget',
+  imports: [MatCard, MatCardContent, NgxEchartsDirective],
+  providers: [provideEchartsCore({ echarts })],
+  templateUrl: './chart-widget.html',
+  styleUrl: './chart-widget.scss',
+})
+export class ChartWidget {
+  title = input.required<string>();
+  options = input.required<EChartsOption>();
+}

frontend/src/app/dashboard/dashboard.html

@@ -18,8 +18,8 @@
   </div>
 
   <div class="chart-grid">
-    <app-chart-placeholder title="Network Traffic (24h)" />
-    <app-chart-placeholder title="Incident Trend (7d)" />
+    <app-chart-widget title="24h Traffic / Latency Trend" [options]="trafficChartOptions" />
+    <app-chart-widget title="Incident Severity by Region" [options]="incidentChartOptions" />
   </div>
 
   <app-alert-list [alerts]="alerts" />

frontend/src/app/dashboard/dashboard.ts

@@ -1,17 +1,21 @@
 import { Component } from '@angular/core';
 import { KpiCard } from './kpi-card/kpi-card';
-import { ChartPlaceholder } from './chart-placeholder/chart-placeholder';
+import { ChartWidget } from './chart-widget/chart-widget';
 import { AlertList } from './alert-list/alert-list';
 import { KPI_MOCKS } from '../core/mocks/kpi.mock';
 import { ALERT_MOCKS } from '../core/mocks/alerts.mock';
+import { TRAFFIC_MOCK, INCIDENT_REGION_MOCK } from '../core/mocks/charts.mock';
+import { buildTrafficLatencyOption, buildIncidentRegionOption } from './chart-config.factory';
 
 @Component({
   selector: 'app-dashboard',
-  imports: [KpiCard, ChartPlaceholder, AlertList],
+  imports: [KpiCard, ChartWidget, AlertList],
   templateUrl: './dashboard.html',
   styleUrl: './dashboard.scss',
 })
 export class Dashboard {
   protected readonly kpis = KPI_MOCKS;
   protected readonly alerts = ALERT_MOCKS;
+  protected readonly trafficChartOptions = buildTrafficLatencyOption(TRAFFIC_MOCK);
+  protected readonly incidentChartOptions = buildIncidentRegionOption(INCIDENT_REGION_MOCK);
 }