# WidgetBookingVSTargetTodayComponent

**Kind:** Class

**Source:** `Pams/Web/Pams.Web/Client/app/components/dashboard/dashboard-libary/widgets/widget-booking-vstarget-today/widget-booking-vstarget-today.component.ts` (line 21)

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

`WidgetBookingVSTargetTodayComponent` renders the dashboard widget that compares today’s bookings with target values. It loads dashboard data, initializes chart state, handles planned-visit chart interactions, and releases resources when the component is destroyed.

**Implements:** `OnInit`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `getDashboardData` | `getDashboardData()` | `void` |
| `insializeWidget` | `insializeWidget(value: any[])` | `void` |
| `sortingByIndex` | `sortingByIndex(index: number)` | `void` |
| `ngOnInit` | `ngOnInit()` | `void` |
| `onChartInit` | `onChartInit(e: any)` | `void` |
| `onPlannedVisitsChartClick` | `onPlannedVisitsChartClick(e: undefined)` | `void` |
| `ngOnDestroy` | `ngOnDestroy()` | `void` |

## Properties

| Property | Type |
|---|---|
| `_widget` | `Widget` |
| `todayWidgetsEnum` | `any` |
| `subscription` | `Subscription` |
| `sortingByEnum` | `any` |
| `sortingDirectionEnum` | `any` |
| `requestSortingDirection` | `number` |
| `sortingArray` | `SortingArray[]` |
| `propertyName` | `string` |
| `data` | `any[]` |
| `originalData` | `any[]` |
| `initOpts` | `any` |
| `series` | `any[]` |
| `headerData` | `any` |
| `echartsIntance` | `any` |
| `options` | `any` |

## Where it refuses work

- `WidgetBookingVSTargetTodayComponent` stops the work with an early return when `a[this.propertyName] < b[this.propertyName]`, in 2 places.
- `WidgetBookingVSTargetTodayComponent` stops the work with an early return when `a[this.propertyName] > b[this.propertyName]`, in 2 places.

## Diagram

```mermaid
graph LR
    Init[ngOnInit] --> Setup[insializeWidget]
    Setup --> Data[getDashboardData]
    Data --> Sort[sortingByIndex]
    Sort --> Chart[onChartInit]
    Chart --> Click[onPlannedVisitsChartClick]
    Destroy[ngOnDestroy] --> Cleanup[Release subscriptions and chart resources]
```

## Usage

```ts
import { Component, ViewChild } from '@angular/core';
import { WidgetBookingVSTargetTodayComponent } from './widget-booking-vstarget-today.component';

@Component({
  selector: 'app-dashboard-host',
  template: `
    <app-widget-booking-vstarget-today
      #bookingTargetWidget>
    </app-widget-booking-vstarget-today>

    <button type="button" (click)="refreshWidget()">
      Refresh
    </button>
  `
})
export class DashboardHostComponent {
  @ViewChild('bookingTargetWidget')
  bookingTargetWidget?: WidgetBookingVSTargetTodayComponent;

  refreshWidget(): void {
    this.bookingTargetWidget?.getDashboardData();
  }
}
```

## AI Coding Instructions

- Keep data loading inside `getDashboardData()` so widget refresh behavior remains in one place.
- Preserve the initialization flow from `ngOnInit()` through `insializeWidget()` before creating or updating chart state.
- Apply `sortingByIndex()` before binding data to the chart when chart ordering depends on source indexes.
- Route planned-visit chart events through `onPlannedVisitsChartClick()` rather than adding click handling in parent dashboard components.
- Clean up subscriptions, chart instances, and event handlers in `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