# WidgetTopOffersByMarketSegmentsLastNyearsComponent

**Kind:** Class

**Source:** `Frontend/src/app/components/dashboard/dashboard-libary/widgets/widget-top-offers-by-market-segments-last-nyears/widget-top-offers-by-market-segments-last-nyears.component.ts` (line 21)

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

`WidgetTopOffersByMarketSegmentsLastNyearsComponent` is an Angular dashboard widget that retrieves and presents top offers grouped by market segments across recent years. It coordinates dashboard data loading, chart initialization, feature-subscription checks, chart styling, and chart interaction handling.

**Extends:** `BaseWidgetComponent`

**Implements:** `OnInit`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `viewData` | `viewData()` | `void` |
| `getDashboardData` | `getDashboardData()` | `void` |
| `initializeChart` | `initializeChart(seriesData: undefined, headerData: undefined)` | `void` |
| `afterResponse` | `afterResponse(Data: any[])` | `void` |
| `checkFeatureSubscription` | `checkFeatureSubscription()` | `boolean` |
| `ngOnChanges` | `ngOnChanges()` | `void` |
| `ngOnInit` | `ngOnInit()` | `void` |
| `setYearColor` | `setYearColor(year: number)` | `string` |
| `onChartInit` | `onChartInit(e: any)` | `void` |
| `onPlannedVisitsChartClick` | `onPlannedVisitsChartClick(e: undefined)` | `void` |
| `setChaching` | `setChaching()` | `void` |
| `getChaching` | `getChaching()` | `void` |
| `onValueChanged` | `onValueChanged(e: undefined)` | `void` |
| `switchChartTypeHandler` | `switchChartTypeHandler()` | `void` |
| `switchChartRefernceCommissionHandler` | `switchChartRefernceCommissionHandler()` | `void` |
| `toggoleOnlyCurrentOffers` | `toggoleOnlyCurrentOffers()` | `void` |
| `toggoleBudgetOffers` | `toggoleBudgetOffers()` | `void` |
| `toggoleFirmOffers` | `toggoleFirmOffers()` | `void` |
| `switchFirmOffers` | `switchFirmOffers()` | `void` |
| `switchBudgetOffers` | `switchBudgetOffers()` | `void` |
| `nextPage` | `nextPage()` | `void` |
| `prevPage` | `prevPage()` | `void` |

## Properties

| Property | Type |
|---|---|
| `_widget` | `Widget` |
| `meAsVendor` | `boolean` |
| `isRefernceCommission` | `boolean` |
| `withoutOptionBar` | `boolean` |
| `onlyCurrentOffers` | `boolean` |
| `numYears` | `number` |
| `_FirmOffers` | `boolean` |
| `_BudgetOffers` | `boolean` |
| `numYearsDatasource` | `any[]` |
| `todayWidgetsEnum` | `any` |
| `branchName` | `string` |
| `maxValueForYaxis` | `number` |
| `initOpts` | `any` |
| `series` | `any[]` |
| `header` | `any[]` |
| `echartsIntance` | `any` |
| `cachingWidgetData` | `CachingWidgetData` |
| `originalDatasource` | `WidgetTopOffers[]` |
| `datasource` | `WidgetTopOffers[]` |
| `originalHeader` | `any[]` |
| `options` | `any` |
| `skip` | `number` |
| `currenFeature` | `number` |
| `seriesData` | `any` |
| `headerData` | `any[]` |
| `showDataOnChart` | `boolean` |

## Where it refuses work

- `WidgetTopOffersByMarketSegmentsLastNyearsComponent` stops the work with an early return when `this.dashboardLibraryService.checkFeatureSubscription(this.widget.chartEnumId)`.

## Diagram

```mermaid
graph LR
  A[ngOnInit / ngOnChanges] --> B[checkFeatureSubscription]
  B -->|Subscribed| C[getDashboardData]
  B -->|Not subscribed| D[viewData]
  C --> E[afterResponse]
  E --> F[initializeChart]
  F --> G[onChartInit]
  G --> H[setYearColor]
  G --> I[onPlannedVisitsChartClick]
```

## Usage

```ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { WidgetTopOffersByMarketSegmentsLastNyearsComponent } from './widget-top-offers-by-market-segments-last-nyears.component';

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

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [WidgetTopOffersByMarketSegmentsLastNyearsComponent],
  });

  fixture = TestBed.createComponent(
    WidgetTopOffersByMarketSegmentsLastNyearsComponent,
  );

  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('loads dashboard data when the feature is available', () => {
  if (component.checkFeatureSubscription()) {
    component.getDashboardData();
  }

  expect(component).toBeTruthy();
});
```

## AI Coding Instructions

- Call `checkFeatureSubscription()` before requesting or rendering dashboard data that depends on the related feature.
- Keep data-response processing in `afterResponse()` and chart setup in `initializeChart()` rather than mixing them into lifecycle methods.
- Handle input-driven refresh behavior through `ngOnChanges()` and initial loading through `ngOnInit()`.
- Use `setYearColor()` for year-based chart colors so chart styling remains consistent.
- Route chart click behavior through `onPlannedVisitsChartClick()` instead of attaching duplicate click handling outside the component.

## Used by

2 references from 2 files. Each is a place in this repository where the symbol is actually used — go read one rather than trusting an example.

### Imported by (2)

- `WidgetTopOffersByVariantsComponent` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/widget-top-offers-by-variants/widget-top-offers-by-variants.component.ts`:1
- `DashboardWidgetsModule` — `Frontend/src/app/components/dashboard/dashboard-widgets.module.ts`:1