# WidgetTeamsBonusComponent

**Kind:** Class

**Source:** `Frontend/src/app/components/dashboard/dashboard-libary/widgets/widget-teams-bonus/widget-teams-bonus.component.ts` (line 19)

**Part of:** [Frontend](subsystem-frontend-src-app)

`WidgetTeamsBonusComponent` is an Angular dashboard widget that loads and displays team bonus data. It checks feature subscription access, manages cached widget state, responds to value and resize changes, and coordinates chart initialization and price formatting.

**Extends:** `BaseWidgetComponent`

**Implements:** `OnInit`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `getDashboardData` | `getDashboardData()` | `void` |
| `checkFeatureSubscription` | `checkFeatureSubscription()` | `boolean` |
| `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` |
| `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` |
| `initOpts` | `any` |
| `series` | `any[]` |
| `headerData` | `any` |
| `echartsIntance` | `any` |
| `options` | `any` |
| `TargetBooking` | `string | number` |
| `AchievedBooking` | `string | number` |
| `currenFeature` | `number` |

## Where it refuses work

- `WidgetTeamsBonusComponent` stops the work with an early return when `this.dashboardLibraryService.checkFeatureSubscription(this.widget.chartEnumId)`.
- `WidgetTeamsBonusComponent` stops the work with an early return when `!Number.isNaN(value)`.

## Diagram

```mermaid
graph LR
  Init[ngOnInit] --> Subscription[checkFeatureSubscription]
  Subscription --> Data[getDashboardData]
  Init --> CacheRead[getChaching]
  Data --> CacheWrite[setChaching]
  Data --> Chart[onChartInit]
  ValueChange[onValueChanged] --> Data
  Resize[onResize] --> Chart
  ChangeDetection[ngDoCheck] --> Data
  Data --> Price[getpriceFormatted]
```

## Usage

```ts
import { TestBed } from '@angular/core/testing';
import { WidgetTeamsBonusComponent } from './widget-teams-bonus.component';

const fixture = TestBed.createComponent(WidgetTeamsBonusComponent);
const component = fixture.componentInstance;

fixture.detectChanges();

if (component.checkFeatureSubscription()) {
  component.getDashboardData();
  component.onChartInit();

  const formattedPrice = component.getpriceFormatted();
  console.log(formattedPrice);
}

// Call when the widget container size changes.
component.onResize();
```

## AI Coding Instructions

- Let Angular create the component through its template or test fixture rather than instantiating it directly.
- Check `checkFeatureSubscription()` before requesting or rendering team bonus data.
- Keep cache reads and writes aligned with `getChaching()` and `setChaching()` so widget state remains consistent.
- Reinitialize or resize chart state through `onResize()` and `onChartInit()` rather than directly changing chart internals.
- Preserve the existing `getChaching` and `setChaching` method names when integrating with current callers.

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

- `DashboardWidgetsModule` — `Frontend/src/app/components/dashboard/dashboard-widgets.module.ts`:1