# MrmBacklogProductTypesComponent

**Kind:** Class

**Source:** `Pams/Web/Pams.Web/Client/app/components/dashboard/dashboard-libary/widgets/mrm-backlog-product-types/mrm-backlog-product-types.component.ts` (line 45)

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

`MrmBacklogProductTypesComponent` manages dashboard data for the MRM backlog product-types widget. It coordinates Angular lifecycle events, data initialization and retrieval, display formatting, resize handling, and caching behavior.

## Methods

| Method | Signature | Returns |
|---|---|---|
| `ngOnInit` | `ngOnInit()` | `void` |
| `ngOnChanges` | `ngOnChanges()` | `void` |
| `ngOnDestroy` | `ngOnDestroy()` | `void` |
| `getDashboardData` | `getDashboardData()` | `void` |
| `initalizingData` | `initalizingData(value: BranchData[])` | `void` |
| `calculatePerformancePer` | `calculatePerformancePer(month: MonthData)` | `number` |
| `translateMonthName` | `translateMonthName(month: MonthData)` | `string` |
| `getpriceFormatted` | `getpriceFormatted(x: undefined)` | `string` |
| `onResize` | `onResize()` | `void` |
| `setChaching` | `setChaching()` | `void` |
| `getChaching` | `getChaching()` | `void` |
| `onValueChanged` | `onValueChanged(e: undefined)` | `void` |
| `onChartInit` | `onChartInit(e: any, index: number)` | `void` |
| `switchChartTypeHandler` | `switchChartTypeHandler()` | `void` |
| `switchVendorTypeIdHandler` | `switchVendorTypeIdHandler(vendorTypeId: number)` | `void` |
| `comparingWithPrevMonth` | `comparingWithPrevMonth(month: MonthData, bIndex: number, index: number)` | `string` |
| `comparingBookingWithPrevSumm` | `comparingBookingWithPrevSumm(month: TotalBookingMonths, index: number)` | `string` |
| `comparingForecastWithPrevSumm` | `comparingForecastWithPrevSumm(month: TotalBookingMonths, index: number)` | `string` |
| `setValue` | `setValue(value: number)` | `void` |
| `setForecastValue` | `setForecastValue(value: number)` | `void` |
| `setMarginAvarage` | `setMarginAvarage(value: number)` | `void` |
| `isForecast` | `isForecast(month: MonthData)` | `boolean` |
| `isAchievedOrCurrent` | `isAchievedOrCurrent(month: MonthData)` | `boolean` |
| `getpriceForecastAmount` | `getpriceForecastAmount(month: MonthData)` | `number` |
| `expectedCurrencyChange` | `expectedCurrencyChange(e: undefined)` | `void` |

## Properties

| Property | Type |
|---|---|
| `_widget` | `Widget` |
| `_widgetType` | `string` |
| `withoutOptionBar` | `boolean` |
| `withNominal` | `boolean` |
| `allowedtoEdit` | `boolean` |
| `allowedtoEnableEdting` | `boolean` |
| `selectedYear` | `number` |
| `vendorTypeEnum` | `any` |
| `vendorTypeId` | `any` |
| `cachingWidgetData` | `CachingWidgetData` |
| `data` | `BranchData[]` |
| `originalData` | `BranchData[]` |
| `singleMonths` | `MonthData` |
| `branchName` | `string` |
| `branchCurrency` | `any` |
| `subscription` | `Subscription` |
| `SeriseRange` | `any[]` |
| `echartsIntance` | `any` |
| `totalBookingMonths` | `TotalBookingMonths[]` |
| `tempTotalMonth` | `TotalBookingMonths` |
| `totalTargets` | `number` |
| `yearBooking` | `number` |
| `totalForecasts` | `number` |
| `tempTotalTarget` | `TotalTargets` |

## Where it refuses work

- `MrmBacklogProductTypesComponent` stops the work with an early return when `month.MonthId == 12`.
- `MrmBacklogProductTypesComponent` stops the work with an early return when `month.TotalValue < this.data[bIndex].MrmBooking[index - 1].TotalValue`.
- `MrmBacklogProductTypesComponent` stops the work with an early return when `month.TotalBookingMonth < this.totalBookingMonths[index - 1].TotalBookingMonth`.
- `MrmBacklogProductTypesComponent` stops the work with an early return when `month.TotalForecastMonth < this.totalBookingMonths[index - 1].TotalForecastMonth`.
- `MrmBacklogProductTypesComponent` stops the work with an early return when `month.MonthId >= new Date().getMonth() + 1`.
- `MrmBacklogProductTypesComponent` stops the work with an early return when `month.MonthId <= new Date().getMonth() + 1`.

## Diagram

```mermaid
graph LR
    A[Angular lifecycle] --> B[ngOnInit]
    A --> C[ngOnChanges]
    A --> D[ngOnDestroy]

    B --> E[initalizingData]
    C --> E
    E --> F[getDashboardData]
    F --> G[Dashboard widget state]

    G --> H[calculatePerformancePer]
    G --> I[translateMonthName]
    G --> J[getpriceFormatted]

    K[Window resize] --> L[onResize]
    L --> G

    G --> M[setChaching]
```

## Usage

```ts
import { MrmBacklogProductTypesComponent } from './mrm-backlog-product-types.component';

function refreshProductTypesWidget(
  widget: MrmBacklogProductTypesComponent,
): void {
  widget.getDashboardData();

  const performance = widget.calculatePerformancePer();
  const monthName = widget.translateMonthName();
  const formattedPrice = widget.getpriceFormatted();

  console.log({
    performance,
    monthName,
    formattedPrice,
  });
}
```

## AI Coding Instructions

- Let Angular invoke `ngOnInit`, `ngOnChanges`, and `ngOnDestroy`; do not call lifecycle hooks directly from application code.
- Keep data loading flows centered on `initalizingData()` and `getDashboardData()` so widget state is updated through one path.
- Preserve the existing method names, including `initalizingData()` and `setChaching()`, when changing related call sites.
- Use `calculatePerformancePer()`, `translateMonthName()`, and `getpriceFormatted()` for display values instead of duplicating formatting logic in templates.
- Keep resize-related state updates inside `onResize()` and cleanup work inside `ngOnDestroy()`.

## 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