# WidgetAgingReceivablesComponent

**Kind:** Class

**Source:** `Frontend/src/app/components/dashboard/dashboard-libary/widgets/widget-aging-receivables/widget-aging-receivables.component.ts` (line 32)

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

`WidgetAgingReceivablesComponent` renders the aging receivables widget within the dashboard widget library. It loads dashboard data, checks feature subscription access, formats displayed pricing, and initializes chart views during the component lifecycle.

**Extends:** `BaseWidgetComponent`

**Implements:** `OnInit`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `getpriceFormatted` | `getpriceFormatted(x: undefined)` | `string` |
| `getDashboardData` | `getDashboardData()` | `void` |
| `checkFeatureSubscription` | `checkFeatureSubscription()` | `boolean` |
| `ngOnInit` | `ngOnInit()` | `void` |
| `onChartInit` | `onChartInit(e: any)` | `void` |
| `onChartInit2` | `onChartInit2(e: any)` | `void` |

## Properties

| Property | Type |
|---|---|
| `_widget` | `Widget` |
| `todayWidgetsEnum` | `any` |
| `initOpts` | `any` |
| `initOpts2` | `any` |
| `chartsArr` | `any[]` |
| `series` | `any[]` |
| `headerData` | `any` |
| `headerData2` | `any` |
| `echartsIntance` | `any` |
| `echartsIntance2` | `any` |
| `options` | `any` |
| `UsedFacilityAmount` | `number` |
| `UsedFacilityAmountForExport` | `number` |
| `BankItemStyle` | `any` |
| `BidBondItemStyle` | `any` |
| `DownPaymentBondItemStyle` | `any` |
| `PerformanceBondItemStyle` | `any` |
| `WarantyBondItemStyle` | `any` |
| `RemainingItemStyle` | `any` |
| `CurrencySymbol` | `string` |
| `currenFeature` | `number` |

## Where it refuses work

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

## Diagram

```mermaid
graph LR
  Dashboard[Dashboard] --> WidgetAgingReceivablesComponent
  WidgetAgingReceivablesComponent --> Subscription[checkFeatureSubscription]
  WidgetAgingReceivablesComponent --> Data[getDashboardData]
  WidgetAgingReceivablesComponent --> Price[getpriceFormatted]
  WidgetAgingReceivablesComponent --> ChartA[onChartInit]
  WidgetAgingReceivablesComponent --> ChartB[onChartInit2]
  Data --> ChartA
  Data --> ChartB
```

## Usage

```ts
import { Component, ViewChild } from '@angular/core';
import { WidgetAgingReceivablesComponent } from './widget-aging-receivables.component';

@Component({
  selector: 'app-dashboard-page',
  template: `
    <app-widget-aging-receivables #agingReceivables />
    <button type="button" (click)="refreshReceivables()">
      Refresh
    </button>
  `
})
export class DashboardPageComponent {
  @ViewChild('agingReceivables')
  agingReceivables?: WidgetAgingReceivablesComponent;

  refreshReceivables(): void {
    if (this.agingReceivables?.checkFeatureSubscription()) {
      this.agingReceivables.getDashboardData();
    }
  }

  getFormattedPrice(): string {
    return this.agingReceivables?.getpriceFormatted() ?? '';
  }
}
```

## AI Coding Instructions

- Call `checkFeatureSubscription()` before requesting or displaying subscription-dependent receivables data.
- Keep data loading in `getDashboardData()` so refresh behavior follows the widget's existing data flow.
- Do not manually call `ngOnInit()`; Angular calls lifecycle hooks when it creates the component.
- Initialize chart integrations through `onChartInit()` and `onChartInit2()` after the related chart instances are available.

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