# WidgetTeamsBonusComponent

**Kind:** Class

**Source:** `Pams/Web/Pams.Web/Client/app/components/dashboard/dashboard-libary/widgets/widget-teams-bonus/widget-teams-bonus.component.ts` (line 22)

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

`WidgetTeamsBonusComponent` is an Angular dashboard widget that retrieves and presents team bonus dashboard data, including formatted price output. It responds to value and resize changes, coordinates chart initialization, maintains its `Chaching` state, and performs cleanup during destruction.

**Implements:** `OnInit`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `getDashboardData` | `getDashboardData()` | `void` |
| `onResize` | `onResize()` | `void` |
| `setChaching` | `setChaching()` | `void` |
| `getChaching` | `getChaching()` | `void` |
| `onValueChanged` | `onValueChanged(e: undefined)` | `void` |
| `ngOnInit` | `ngOnInit()` | `void` |
| `getpriceFormatted` | `getpriceFormatted(x: undefined)` | `string` |
| `ngDoCheck` | `ngDoCheck()` | `void` |
| `onChartInit` | `onChartInit(e: any, index: number)` | `void` |
| `ngOnDestroy` | `ngOnDestroy()` | `void` |
| `switchChartTypeHandler` | `switchChartTypeHandler()` | `void` |
| `switchBasedOnTendencyHandler` | `switchBasedOnTendencyHandler()` | `void` |
| `setValue` | `setValue(value: number)` | `void` |

## Properties

| Property | Type |
|---|---|
| `triangleNeedle` | `DxCircularGaugeComponent` |
| `originalWidget` | `Widget` |
| `_widget` | `Widget` |
| `numYears` | `number` |
| `numYearsDatasource` | `any[]` |
| `todayWidgetsEnum` | `any` |
| `cachingWidgetData` | `CachingWidgetData` |
| `teams` | `TeamsTendancy[]` |
| `withNominal` | `boolean` |
| `basedOnTendency` | `boolean` |
| `subscription` | `Subscription` |
| `initOpts` | `any` |
| `series` | `any[]` |
| `headerData` | `any` |
| `echartsIntance` | `any` |
| `options` | `any` |
| `TargetBooking` | `string | number` |
| `AchievedBooking` | `string | number` |

## Where it refuses work

- `WidgetTeamsBonusComponent` stops the work with an early return when `isNumber(value)`.

## Diagram

```mermaid
graph LR
  Dashboard[Dashboard] --> WidgetTeamsBonusComponent
  WidgetTeamsBonusComponent --> Init[ngOnInit]
  Init --> Data[getDashboardData]
  WidgetTeamsBonusComponent --> ValueChange[onValueChanged]
  ValueChange --> Data
  WidgetTeamsBonusComponent --> Resize[onResize]
  Resize --> Chart[onChartInit]
  WidgetTeamsBonusComponent --> Cache[setChaching / getChaching]
  WidgetTeamsBonusComponent --> Format[getpriceFormatted]
  WidgetTeamsBonusComponent --> Destroy[ngOnDestroy]
```

## Usage

```ts
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { WidgetTeamsBonusComponent } from './widget-teams-bonus.component';

@Component({
  selector: 'app-dashboard-host',
  template: `
    <app-widget-teams-bonus></app-widget-teams-bonus>
  `,
})
export class DashboardHostComponent implements AfterViewInit {
  @ViewChild(WidgetTeamsBonusComponent)
  teamsBonusWidget?: WidgetTeamsBonusComponent;

  ngAfterViewInit(): void {
    this.teamsBonusWidget?.getDashboardData();
    this.teamsBonusWidget?.onResize();

    const formattedPrice = this.teamsBonusWidget?.getpriceFormatted();
    console.log(formattedPrice);
  }
}
```

## AI Coding Instructions

- Keep data refresh behavior in `getDashboardData()` and trigger it through existing lifecycle or value-change flows.
- Preserve the existing `setChaching()` and `getChaching()` method names unless all callers are updated together.
- Call `onChartInit()` only when the chart host and dashboard data are ready.
- Route resize-related chart updates through `onResize()` rather than duplicating resize handling in consumers.
- Keep cleanup logic in `ngOnDestroy()` aligned with any subscriptions, chart instances, or listeners added by the component.

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