@ojiepermana/angular-chart 22.0.44 → 22.0.46

package/fesm2022/ojiepermana-angular-chart-primitives.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, viewChild, signal, Directive, ElementRef, contentChild, TemplateRef } from '@angular/core';
+import { inject, input, computed, Component, viewChild, signal, Directive, ElementRef, contentChild, TemplateRef } from '@angular/core';
 import { CartesianContext, linearTicks, bandTicks, ChartContext, CategoricalViewportContext, ScatterViewportContext, nearestCategoryIndex, normalizeIndexRange, panIndexRange, panNumericDomain, indexRangeSize, normalizeNumericDomain, zoomNumericDomain, zoomIndexRange, seriesColorVar } from '@ojiepermana/angular-chart/core';
 import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 
@@ -44,18 +44,18 @@ class ChartAxisX {
           class="fill-current"
           y="18"
           text-anchor="middle"
-          style="font-size: var(--text-xs); font-family: var(--font-sans)">
+          style="font-size: var(--text-xs); font-family: var(--font-sans)"
+        >
           {{ t.label }}
         </svg:text>
       </svg:g>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartAxisX, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ChartAxisX]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'chart-axis chart-axis-x text-muted-foreground',
                         '[attr.transform]': 'transform()',
@@ -71,7 +71,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           class="fill-current"
           y="18"
           text-anchor="middle"
-          style="font-size: var(--text-xs); font-family: var(--font-sans)">
+          style="font-size: var(--text-xs); font-family: var(--font-sans)"
+        >
           {{ t.label }}
         </svg:text>
       </svg:g>
@@ -117,18 +118,18 @@ class ChartAxisY {
           x="-8"
           dy="0.32em"
           text-anchor="end"
-          style="font-size: var(--text-xs); font-family: var(--font-sans)">
+          style="font-size: var(--text-xs); font-family: var(--font-sans)"
+        >
           {{ t.label }}
         </svg:text>
       </svg:g>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartAxisY, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ChartAxisY]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'chart-axis chart-axis-y text-muted-foreground',
                     },
@@ -144,7 +145,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           x="-8"
           dy="0.32em"
           text-anchor="end"
-          style="font-size: var(--text-xs); font-family: var(--font-sans)">
+          style="font-size: var(--text-xs); font-family: var(--font-sans)"
+        >
           {{ t.label }}
         </svg:text>
       </svg:g>
@@ -185,15 +187,15 @@ class ChartGrid {
         [attr.x1]="line(t.offset).x1"
         [attr.x2]="line(t.offset).x2"
         [attr.y1]="line(t.offset).y1"
-        [attr.y2]="line(t.offset).y2" />
+        [attr.y2]="line(t.offset).y2"
+      />
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartGrid, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ChartGrid]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'chart-grid text-border',
                     },
@@ -205,7 +207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [attr.x1]="line(t.offset).x1"
         [attr.x2]="line(t.offset).x2"
         [attr.y1]="line(t.offset).y1"
-        [attr.y2]="line(t.offset).y2" />
+        [attr.y2]="line(t.offset).y2"
+      />
     }
   `,
                 }]
@@ -245,15 +248,15 @@ class ChartCrosshair {
         [attr.x1]="l.x1"
         [attr.x2]="l.x2"
         [attr.y1]="l.y1"
-        [attr.y2]="l.y2" />
+        [attr.y2]="l.y2"
+      />
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartCrosshair, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ChartCrosshair]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'chart-crosshair' },
                     template: `
     @if (line(); as l) {
@@ -263,7 +266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [attr.x1]="l.x1"
         [attr.x2]="l.x2"
         [attr.y1]="l.y1"
-        [attr.y2]="l.y2" />
+        [attr.y2]="l.y2"
+      />
     }
   `,
                 }]
@@ -314,9 +318,19 @@ class ChartBrush {
         const first = scale(categories[startVisible]) ?? 0;
         const last = (scale(categories[endVisible]) ?? 0) + scale.bandwidth();
         if (cart.orientation() === 'vertical') {
-            return { x: Math.min(first, last), y: 0, width: Math.abs(last - first), height: cart.innerHeight() };
+            return {
+                x: Math.min(first, last),
+                y: 0,
+                width: Math.abs(last - first),
+                height: cart.innerHeight(),
+            };
         }
-        return { x: 0, y: Math.min(first, last), width: cart.innerWidth(), height: Math.abs(last - first) };
+        return {
+            x: 0,
+            y: Math.min(first, last),
+            width: cart.innerWidth(),
+            height: Math.abs(last - first),
+        };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "categoryPreview" }] : /* istanbul ignore next */ []));
     scatterPreviewRect = computed(() => {
@@ -368,7 +382,10 @@ class ChartBrush {
         const absoluteIndex = visibleStart + index;
         if (event.pointerType === 'touch' && this.categorical.hasZoom()) {
             this.mode.set('category-pan');
-            this.categoryPanStart.set({ coord: this.pointerAxis(local), range: this.categorical.zoomRange() });
+            this.categoryPanStart.set({
+                coord: this.pointerAxis(local),
+                range: this.categorical.zoomRange(),
+            });
             return;
         }
         this.mode.set('category-brush');
@@ -585,7 +602,8 @@ class ChartBrush {
       (pointerup)="onPointerUp($event)"
       (pointercancel)="onPointerCancel($event)"
       (wheel)="onWheel($event)"
-      (dblclick)="resetZoom()" />
+      (dblclick)="resetZoom()"
+    />
 
     @if (categoryPreview(); as rect) {
       <svg:rect
@@ -594,7 +612,8 @@ class ChartBrush {
         [attr.y]="rect.y"
         [attr.width]="rect.width"
         [attr.height]="rect.height"
-        stroke-dasharray="4 3" />
+        stroke-dasharray="4 3"
+      />
     }
 
     @if (scatterPreviewRect(); as rect) {
@@ -604,15 +623,15 @@ class ChartBrush {
         [attr.y]="rect.y"
         [attr.width]="rect.width"
         [attr.height]="rect.height"
-        stroke-dasharray="4 3" />
+        stroke-dasharray="4 3"
+      />
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartBrush, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ChartBrush]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'chart-brush',
                         '(window:pointermove)': 'onPointerMove($event)',
@@ -632,7 +651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       (pointerup)="onPointerUp($event)"
       (pointercancel)="onPointerCancel($event)"
       (wheel)="onWheel($event)"
-      (dblclick)="resetZoom()" />
+      (dblclick)="resetZoom()"
+    />
 
     @if (categoryPreview(); as rect) {
       <svg:rect
@@ -641,7 +661,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [attr.y]="rect.y"
         [attr.width]="rect.width"
         [attr.height]="rect.height"
-        stroke-dasharray="4 3" />
+        stroke-dasharray="4 3"
+      />
     }
 
     @if (scatterPreviewRect(); as rect) {
@@ -651,7 +672,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [attr.y]="rect.y"
         [attr.width]="rect.width"
         [attr.height]="rect.height"
-        stroke-dasharray="4 3" />
+        stroke-dasharray="4 3"
+      />
     }
   `,
                 }]
@@ -790,7 +812,9 @@ class ChartTooltip {
         const rows = this.data();
         if (!active || !rows)
             return null;
-        const dataIndex = active.datumIndex != null && active.datumIndex < rows.length ? active.datumIndex : active.index;
+        const dataIndex = active.datumIndex != null && active.datumIndex < rows.length
+            ? active.datumIndex
+            : active.index;
         if (dataIndex < 0 || dataIndex >= rows.length)
             return null;
         const cfg = this.root.config();
@@ -867,7 +891,8 @@ class ChartTooltip {
         role="tooltip"
         class="pointer-events-none absolute grid min-w-32 max-w-72 -translate-x-1/2 -translate-y-full gap-1.5 rounded-lg border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-3 py-1.5 text-xs shadow-md"
         [style.left.px]="position().x"
-        [style.top.px]="position().y">
+        [style.top.px]="position().y"
+      >
         @if (customTpl(); as tpl) {
           <ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }" />
         } @else {
@@ -883,15 +908,20 @@ class ChartTooltip {
                       <span
                         class="h-2.5 w-2.5 shrink-0 rounded-sm"
                         [style.background]="row.color"
-                        [style.borderColor]="row.color"></span>
+                        [style.borderColor]="row.color"
+                      ></span>
                     }
                     @case ('line') {
-                      <span class="h-full min-h-4 w-1 shrink-0 rounded-sm" [style.background]="row.color"></span>
+                      <span
+                        class="h-full min-h-4 w-1 shrink-0 rounded-sm"
+                        [style.background]="row.color"
+                      ></span>
                     }
                     @case ('dashed') {
                       <span
                         class="h-0 w-3 shrink-0 self-center border-t-2 border-dashed"
-                        [style.borderColor]="row.color"></span>
+                        [style.borderColor]="row.color"
+                      ></span>
                     }
                   }
                   @if (row.icon; as icon) {
@@ -917,13 +947,12 @@ class ChartTooltip {
         {{ p.category }}
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartTooltip, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartTooltip',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet, NgComponentOutlet],
                     host: {
                         class: 'pointer-events-none absolute inset-0 z-10',
@@ -935,7 +964,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         role="tooltip"
         class="pointer-events-none absolute grid min-w-32 max-w-72 -translate-x-1/2 -translate-y-full gap-1.5 rounded-lg border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-3 py-1.5 text-xs shadow-md"
         [style.left.px]="position().x"
-        [style.top.px]="position().y">
+        [style.top.px]="position().y"
+      >
         @if (customTpl(); as tpl) {
           <ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }" />
         } @else {
@@ -951,15 +981,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                       <span
                         class="h-2.5 w-2.5 shrink-0 rounded-sm"
                         [style.background]="row.color"
-                        [style.borderColor]="row.color"></span>
+                        [style.borderColor]="row.color"
+                      ></span>
                     }
                     @case ('line') {
-                      <span class="h-full min-h-4 w-1 shrink-0 rounded-sm" [style.background]="row.color"></span>
+                      <span
+                        class="h-full min-h-4 w-1 shrink-0 rounded-sm"
+                        [style.background]="row.color"
+                      ></span>
                     }
                     @case ('dashed') {
                       <span
                         class="h-0 w-3 shrink-0 self-center border-t-2 border-dashed"
-                        [style.borderColor]="row.color"></span>
+                        [style.borderColor]="row.color"
+                      ></span>
                     }
                   }
                   @if (row.icon; as icon) {
@@ -1019,7 +1054,10 @@ class ChartLegend {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartLegend, isStandalone: true, selector: "ChartLegend", host: { classAttribute: "block pt-3" }, ngImport: i0, template: `
-    <ul class="flex flex-wrap items-center justify-center gap-3 text-xs" aria-label="Toggle chart series visibility">
+    <ul
+      class="flex flex-wrap items-center justify-center gap-3 text-xs"
+      aria-label="Toggle chart series visibility"
+    >
       @for (item of items(); track item.seriesKey) {
         <li>
           <button
@@ -1028,23 +1066,29 @@ class ChartLegend {
             [class.opacity-50]="item.hidden"
             [attr.aria-pressed]="!item.hidden"
             [attr.aria-label]="(item.hidden ? 'Show ' : 'Hide ') + item.label"
-            (click)="toggle(item.seriesKey)">
-            <span class="inline-block h-2.5 w-2.5 rounded-sm" [style.background]="item.color"></span>
+            (click)="toggle(item.seriesKey)"
+          >
+            <span
+              class="inline-block h-2.5 w-2.5 rounded-sm"
+              [style.background]="item.color"
+            ></span>
             <span class="text-muted-foreground">{{ item.label }}</span>
           </button>
         </li>
       }
     </ul>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartLegend, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartLegend',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block pt-3' },
                     template: `
-    <ul class="flex flex-wrap items-center justify-center gap-3 text-xs" aria-label="Toggle chart series visibility">
+    <ul
+      class="flex flex-wrap items-center justify-center gap-3 text-xs"
+      aria-label="Toggle chart series visibility"
+    >
       @for (item of items(); track item.seriesKey) {
         <li>
           <button
@@ -1053,8 +1097,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             [class.opacity-50]="item.hidden"
             [attr.aria-pressed]="!item.hidden"
             [attr.aria-label]="(item.hidden ? 'Show ' : 'Hide ') + item.label"
-            (click)="toggle(item.seriesKey)">
-            <span class="inline-block h-2.5 w-2.5 rounded-sm" [style.background]="item.color"></span>
+            (click)="toggle(item.seriesKey)"
+          >
+            <span
+              class="inline-block h-2.5 w-2.5 rounded-sm"
+              [style.background]="item.color"
+            ></span>
             <span class="text-muted-foreground">{{ item.label }}</span>
           </button>
         </li>
@@ -1107,37 +1155,44 @@ class ChartZoomControls {
 
     @if (status(); as currentStatus) {
       <div class="flex flex-wrap items-center gap-2">
-        <span class="rounded-full border border-border bg-background px-2.5 py-1 font-medium text-foreground">
+        <span
+          class="rounded-full border border-border bg-background px-2.5 py-1 font-medium text-foreground"
+        >
           {{ currentStatus }}
         </span>
         <button
           type="button"
           class="inline-flex min-h-11 items-center rounded-md border border-border bg-background px-3 text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-          (click)="resetZoom()">
+          (click)="resetZoom()"
+        >
           Reset zoom
         </button>
       </div>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartZoomControls, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartZoomControls',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground' },
+                    host: {
+                        class: 'mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground',
+                    },
                     template: `
     <p>{{ hint() }}</p>
 
     @if (status(); as currentStatus) {
       <div class="flex flex-wrap items-center gap-2">
-        <span class="rounded-full border border-border bg-background px-2.5 py-1 font-medium text-foreground">
+        <span
+          class="rounded-full border border-border bg-background px-2.5 py-1 font-medium text-foreground"
+        >
           {{ currentStatus }}
         </span>
         <button
           type="button"
           class="inline-flex min-h-11 items-center rounded-md border border-border bg-background px-3 text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-          (click)="resetZoom()">
+          (click)="resetZoom()"
+        >
           Reset zoom
         </button>
       </div>
@@ -1148,13 +1203,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 
 class PieCenter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PieCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: PieCenter, isStandalone: true, selector: "ChartPieCenter", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: PieCenter, isStandalone: true, selector: "ChartPieCenter", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PieCenter, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartPieCenter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'flex max-w-[10rem] flex-col items-center justify-center text-center',
                     },
@@ -1164,13 +1218,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 
 class RadialCenter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: RadialCenter, isStandalone: true, selector: "ChartRadialCenter", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: RadialCenter, isStandalone: true, selector: "ChartRadialCenter", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialCenter, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartRadialCenter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'flex max-w-[10rem] flex-col items-center justify-center text-center',
                     },

package/fesm2022/ojiepermana-angular-chart-radar.mjs

@@ -2,7 +2,7 @@ import { curveCardinalClosed, curveLinearClosed, lineRadial } from 'd3-shape';
 import { max } from 'd3-array';
 import { seriesColorVar, ChartContext } from '@ojiepermana/angular-chart/core';
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, computed, Component } from '@angular/core';
 
 function computeRadarLayout(input) {
     const { data, axisKey, seriesKeys, innerWidth, innerHeight, levels, curve, grid } = input;
@@ -145,8 +145,12 @@ class RadarChart {
         return `${label} at ${p.axis}: ${p.value}`;
     }
     setActive(event, seriesKey, index) {
-        const clientX = event instanceof PointerEvent ? event.clientX : event.target.getBoundingClientRect().left;
-        const clientY = event instanceof PointerEvent ? event.clientY : event.target.getBoundingClientRect().top;
+        const clientX = event instanceof PointerEvent
+            ? event.clientX
+            : event.target.getBoundingClientRect().left;
+        const clientY = event instanceof PointerEvent
+            ? event.clientY
+            : event.target.getBoundingClientRect().top;
         this.root.activePoint.set({ index, datumIndex: index, seriesKey, clientX, clientY });
     }
     clearActive() {
@@ -159,9 +163,13 @@ class RadarChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="xMidYMid meet"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
-        <svg:g class="chart-radar" [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+        <svg:g
+          class="chart-radar"
+          [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'"
+        >
           @if (layout().grid !== 'none') {
             @for (level of layout().levels; track level.value; let levelIndex = $index) {
               @if (layout().grid === 'circle') {
@@ -172,27 +180,36 @@ class RadarChart {
                   stroke-dasharray="2 2"
                   cx="0"
                   cy="0"
-                  [attr.r]="level.radius" />
+                  [attr.r]="level.radius"
+                />
               } @else {
                 <svg:path
                   class="chart-radar-level stroke-border"
                   [attr.d]="level.path"
                   [attr.fill]="gridFill()"
                   [attr.fill-opacity]="gridFillOpacity(levelIndex)"
-                  stroke-dasharray="2 2" />
+                  stroke-dasharray="2 2"
+                />
               }
             }
           }
           @if (showAxes()) {
             @for (axis of layout().axes; track axis.name) {
-              <svg:line class="chart-radar-axis stroke-border" x1="0" y1="0" [attr.x2]="axis.x" [attr.y2]="axis.y" />
+              <svg:line
+                class="chart-radar-axis stroke-border"
+                x1="0"
+                y1="0"
+                [attr.x2]="axis.x"
+                [attr.y2]="axis.y"
+              />
               @if (showLabels()) {
                 <svg:text
                   class="chart-radar-axis-label fill-muted-foreground text-2xs"
                   text-anchor="middle"
                   dominant-baseline="middle"
                   [attr.x]="axis.x * 1.12"
-                  [attr.y]="axis.y * 1.12">
+                  [attr.y]="axis.y * 1.12"
+                >
                   {{ axis.name }}
                 </svg:text>
               }
@@ -206,7 +223,8 @@ class RadarChart {
               [attr.fill]="linesOnly() ? 'none' : s.color"
               [attr.fill-opacity]="linesOnly() ? null : fillOpacity()"
               [attr.stroke-width]="strokeWidth()"
-              stroke-linejoin="round" />
+              stroke-linejoin="round"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.axis; let i = $index) {
                 <svg:circle
@@ -217,11 +235,13 @@ class RadarChart {
                   [attr.fill]="s.color"
                   tabindex="0"
                   [attr.aria-label]="dotAriaLabel(s.seriesKey, p)"
+                  role="img"
                   (pointerenter)="setActive($event, s.seriesKey, i)"
                   (pointermove)="setActive($event, s.seriesKey, i)"
                   (pointerleave)="clearActive()"
                   (focus)="setActive($event, s.seriesKey, i)"
-                  (blur)="clearActive()" />
+                  (blur)="clearActive()"
+                />
               }
             }
           }
@@ -231,13 +251,12 @@ class RadarChart {
     </svg:svg>
     <ng-content select="ChartTooltip" />
     <ng-content select="ChartLegend" />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadarChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartRadar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
                     template: `
     <svg:svg
@@ -245,9 +264,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="xMidYMid meet"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
-        <svg:g class="chart-radar" [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+        <svg:g
+          class="chart-radar"
+          [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'"
+        >
           @if (layout().grid !== 'none') {
             @for (level of layout().levels; track level.value; let levelIndex = $index) {
               @if (layout().grid === 'circle') {
@@ -258,27 +281,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   stroke-dasharray="2 2"
                   cx="0"
                   cy="0"
-                  [attr.r]="level.radius" />
+                  [attr.r]="level.radius"
+                />
               } @else {
                 <svg:path
                   class="chart-radar-level stroke-border"
                   [attr.d]="level.path"
                   [attr.fill]="gridFill()"
                   [attr.fill-opacity]="gridFillOpacity(levelIndex)"
-                  stroke-dasharray="2 2" />
+                  stroke-dasharray="2 2"
+                />
               }
             }
           }
           @if (showAxes()) {
             @for (axis of layout().axes; track axis.name) {
-              <svg:line class="chart-radar-axis stroke-border" x1="0" y1="0" [attr.x2]="axis.x" [attr.y2]="axis.y" />
+              <svg:line
+                class="chart-radar-axis stroke-border"
+                x1="0"
+                y1="0"
+                [attr.x2]="axis.x"
+                [attr.y2]="axis.y"
+              />
               @if (showLabels()) {
                 <svg:text
                   class="chart-radar-axis-label fill-muted-foreground text-2xs"
                   text-anchor="middle"
                   dominant-baseline="middle"
                   [attr.x]="axis.x * 1.12"
-                  [attr.y]="axis.y * 1.12">
+                  [attr.y]="axis.y * 1.12"
+                >
                   {{ axis.name }}
                 </svg:text>
               }
@@ -292,7 +324,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               [attr.fill]="linesOnly() ? 'none' : s.color"
               [attr.fill-opacity]="linesOnly() ? null : fillOpacity()"
               [attr.stroke-width]="strokeWidth()"
-              stroke-linejoin="round" />
+              stroke-linejoin="round"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.axis; let i = $index) {
                 <svg:circle
@@ -303,11 +336,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   [attr.fill]="s.color"
                   tabindex="0"
                   [attr.aria-label]="dotAriaLabel(s.seriesKey, p)"
+                  role="img"
                   (pointerenter)="setActive($event, s.seriesKey, i)"
                   (pointermove)="setActive($event, s.seriesKey, i)"
                   (pointerleave)="clearActive()"
                   (focus)="setActive($event, s.seriesKey, i)"
-                  (blur)="clearActive()" />
+                  (blur)="clearActive()"
+                />
               }
             }
           }