# WidgetForecastVsTargetThisYearComponent

**Kind:** Class

**Source:** `Pams/Web/Pams.Web/Client/app/components/dashboard/dashboard-libary/widgets/widget-forecast-vs-target-this-year/widget-forecast-vs-target-this-year.component.ts` (line 31)

**Part of:** [Pams](subsystem-pams)

`WidgetForecastVsTargetThisYearComponent` manages the dashboard widget that compares this year's forecast with its target. It loads dashboard data, prepares display values, calculates the forecast-versus-target result, and responds to forecast and chart-type switches.

**Implements:** `OnInit`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `ngOnInit` | `ngOnInit()` | `void` |
| `getDashboardData` | `getDashboardData()` | `void` |
| `initalizingData` | `initalizingData(value: MonthData[])` | `void` |
| `getpriceFormatted` | `getpriceFormatted(x: undefined)` | `string` |
| `calculatForecastVsTarget` | `calculatForecastVsTarget(value: MonthData)` | `number` |
| `switchIsForecastHandler` | `switchIsForecastHandler()` | `void` |
| `switchChartTypeHandler` | `switchChartTypeHandler()` | `void` |
| `onChartInit` | `onChartInit(e: any, index: number)` | `void` |
| `ngOnDestroy` | `ngOnDestroy()` | `void` |
| `setValue` | `setValue(value: number)` | `void` |

## Properties

| Property | Type |
|---|---|
| `_widget` | `Widget` |
| `withNominal` | `boolean` |
| `selectedYear` | `number` |
| `todayWidgetsEnum` | `any` |
| `Branches` | `BranchessTendancy[]` |
| `MonthData` | `MonthData[]` |
| `subscription` | `Subscription` |
| `IsForecast` | `boolean` |
| `initOpts` | `any` |
| `series` | `any[]` |
| `headerData` | `any` |
| `echartsIntance` | `any` |
| `options` | `any` |
| `TargetBooking` | `string | number` |
| `AchievedBooking` | `string | number` |

## Diagram

```mermaid
graph LR
    Dashboard[Dashboard data source] --> Load[getDashboardData]
    Load --> Init[initalizingData]
    Init --> Calculate[calculatForecastVsTarget]
    Init --> Format[getpriceFormatted]
    ToggleForecast[switchIsForecastHandler] --> Calculate
    ToggleChart[switchChartTypeHandler] --> Chart[Chart instance]
    ChartInit[onChartInit] --> Chart
    SetValue[setValue] --> Chart
    Destroy[ngOnDestroy] --> Chart
```

## Usage

```ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { WidgetForecastVsTargetThisYearComponent } from './widget-forecast-vs-target-this-year.component';

let fixture: ComponentFixture<WidgetForecastVsTargetThisYearComponent>;
let component: WidgetForecastVsTargetThisYearComponent;

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [WidgetForecastVsTargetThisYearComponent],
  }).compileComponents();

  fixture = TestBed.createComponent(WidgetForecastVsTargetThisYearComponent);
  component = fixture.componentInstance;

  fixture.detectChanges();
});

it('updates the forecast view', () => {
  component.ngOnInit();
  component.switchIsForecastHandler();
  component.switchChartTypeHandler();

  const formattedPrice = component.getpriceFormatted();
  const comparison = component.calculatForecastVsTarget();

  expect(formattedPrice).toBeDefined();
  expect(comparison).toBeDefined();
});
```

## AI Coding Instructions

- Call `getDashboardData()` and `initalizingData()` through the component lifecycle flow rather than duplicating dashboard-data preparation.
- Keep forecast comparison logic in `calculatForecastVsTarget()` so displayed values and chart values remain aligned.
- Update chart state through `onChartInit()` and `setValue()` after the chart instance is available.
- Preserve cleanup behavior in `ngOnDestroy()` when adding subscriptions, timers, or chart resources.
- Keep the existing `initalizingData` and `calculatForecastVsTarget` method names when calling them, including their current spelling.

## Used by

1 reference from 1 file. Each is a place in this repository where the symbol is actually used — go read one rather than trusting an example.

### Imported by (1)

- `TranslateHandler` — `Pams/Web/Pams.Web/Client/app/app.module.ts`:1