This document outlines the core frontend architecture of the application, focusing on the root Angular module configuration, the application initialization lifecycle, and the visualization factory pattern used for rendering charts.

[Unknown component: div]

Core Module Configuration

The AppModule serves as the root module of the application, bootstrapping the core components and registering global providers, interceptors, and third-party libraries.

Global UI Configuration

The module constructor enforces several global UI behaviors for NgBootstrap components to ensure consistent user experience across the application:

export class AppModule {
  constructor(private dpConfig: NgbDatepickerConfig, private config: NgbModalConfig, private tooltipConfig: NgbTooltipConfig) {
    // Restrict datepicker to 100 years in the past
    this.dpConfig.minDate = {year: moment().year() - 100, month: 1, day: 1};
    // Prevent modals from closing when clicking outside
    config.backdrop = 'static';
    // Append tooltips to the body to prevent z-index and overflow clipping issues
    this.tooltipConfig.container = 'body';
  }
}

Application Initialization Flow

Before the Angular application fully renders, it must verify API connectivity and load essential configuration data. This is handled via Angular's APP_INITIALIZER token, which executes the initTimezoneFormat factory function.

Initialization Sequence

HTTP Request Lifecycle

The application relies on a robust chain of HTTP interceptors to handle authentication, error management, and request state globally.

Chart Factory Implementation

To handle the diverse visualization requirements of the dashboard, the application implements a Factory Design Pattern for chart generation. This abstracts the complexity of ECharts configuration away from the components.

Architecture

The ChartFactory Class

The ChartFactory implements the Factory interface and routes incoming data to the appropriate chart builder class based on the ChartTypeEnum.

import {ChartTypeEnum} from '../../../enums/chart-type.enum';
import {VisualizationType} from '../../types/visualization.type';
import {ChartOption} from './chart-option';
import {Gauge, Heatmap, LineBar, Pie, ScatterMap, TagCloud} from './charts/*';
import {Factory} from './factory';

export class ChartFactory implements Factory {
  createChart(type?: string, data?: any[], visualization?: VisualizationType, toExport?: boolean): ChartOption {
    switch (type) {
      case ChartTypeEnum.PIE_CHART:
        return new Pie().buildChart(data, visualization, toExport);
      case ChartTypeEnum.GAUGE_CHART:
        return new Gauge().buildChart(data, visualization);
      case ChartTypeEnum.TAG_CLOUD_CHART:
        return new TagCloud().buildChart(data, visualization);
      case ChartTypeEnum.LINE_CHART:
      case ChartTypeEnum.AREA_LINE_CHART:
      case ChartTypeEnum.BAR_CHART:
      case ChartTypeEnum.BAR_HORIZONTAL_CHART:
        // LineBar handles multiple Cartesian coordinate charts
        return new LineBar().buildChart(data, visualization, toExport);
      case ChartTypeEnum.MARKER_CHART:
        return new ScatterMap().buildChart(data, visualization);
      case ChartTypeEnum.HEATMAP_CHART:
        return new Heatmap().buildChart(data, visualization);
    }
  }
}