@ojiepermana/angular-chart 22.0.44 → 22.0.45

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, effect, Component } from '@angular/core';
 import { ChartContext, CartesianContext, CategoricalViewportContext, sliceByIndexRange, computeAreaLayout, provideCartesianFromLineLayout, elementClientCenter } from '@ojiepermana/angular-chart/core';
 import { ChartPointerTracker } from '@ojiepermana/angular-chart/primitives';
 
@@ -125,7 +125,8 @@ class AreaChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       @if (gradient()) {
         <svg:defs>
           @for (s of series(); track s.seriesKey) {
@@ -144,7 +145,8 @@ class AreaChart {
               class="chart-area"
               [attr.d]="s.areaPath"
               [attr.fill]="areaFill(s.seriesKey, s.color)"
-              stroke="none" />
+              stroke="none"
+            />
             <svg:path
               class="chart-area-stroke"
               [attr.d]="s.linePath"
@@ -152,7 +154,8 @@ class AreaChart {
               [attr.stroke-width]="strokeWidth()"
               fill="none"
               stroke-linecap="round"
-              stroke-linejoin="round" />
+              stroke-linejoin="round"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.datumIndex) {
                 <svg:circle
@@ -167,7 +170,8 @@ class AreaChart {
                   (blur)="clearActivePoint()"
                   (click)="emitClick(p)"
                   (keydown.enter)="emitClick(p)"
-                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                  (keydown.space)="emitClick(p); $event.preventDefault()"
+                />
               }
             }
           }
@@ -181,13 +185,12 @@ class AreaChart {
     <ng-content select="ChartTooltip" />
     <ng-content select="ChartLegend" />
     <ng-content select="ChartZoomControls" />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AreaChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartArea',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [CartesianContext, CategoricalViewportContext],
                     imports: [ChartPointerTracker],
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
@@ -198,7 +201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       @if (gradient()) {
         <svg:defs>
           @for (s of series(); track s.seriesKey) {
@@ -217,7 +221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               class="chart-area"
               [attr.d]="s.areaPath"
               [attr.fill]="areaFill(s.seriesKey, s.color)"
-              stroke="none" />
+              stroke="none"
+            />
             <svg:path
               class="chart-area-stroke"
               [attr.d]="s.linePath"
@@ -225,7 +230,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               [attr.stroke-width]="strokeWidth()"
               fill="none"
               stroke-linecap="round"
-              stroke-linejoin="round" />
+              stroke-linejoin="round"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.datumIndex) {
                 <svg:circle
@@ -240,7 +246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   (blur)="clearActivePoint()"
                   (click)="emitClick(p)"
                   (keydown.enter)="emitClick(p)"
-                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                  (keydown.space)="emitClick(p); $event.preventDefault()"
+                />
               }
             }
           }

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, effect, Component } from '@angular/core';
 import { seriesColorVar, ChartContext, CartesianContext, ChartThemeRadius, elementClientCenter } from '@ojiepermana/angular-chart/core';
 import { scaleBand, scaleLinear } from 'd3-scale';
 import { min, max } from 'd3-array';
@@ -414,7 +414,7 @@ class BarChart {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotLayout" }] : /* istanbul ignore next */ []));
-    dotTrackCells = computed(() => (this.showDotTrack() ? (this.dotLayout()?.track ?? []) : []), /* @ts-ignore */
+    dotTrackCells = computed(() => this.showDotTrack() ? (this.dotLayout()?.track ?? []) : [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotTrackCells" }] : /* istanbul ignore next */ []));
     dotValueCells = computed(() => this.dotLayout()?.values ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotValueCells" }] : /* istanbul ignore next */ []));
@@ -534,7 +534,8 @@ class BarChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <ng-content select="svg\\:g[ChartGrid]" />
         <svg:g class="chart-bars">
@@ -549,7 +550,8 @@ class BarChart {
                   [attr.height]="cell.height"
                   [attr.rx]="resolvedDotCornerRadius()"
                   [attr.ry]="resolvedDotCornerRadius()"
-                  fill="hsl(var(--muted))" />
+                  fill="hsl(var(--muted))"
+                />
               }
               @for (cell of dotValueCells(); track cell.key) {
                 <svg:rect
@@ -561,7 +563,8 @@ class BarChart {
                   [attr.rx]="resolvedDotCornerRadius()"
                   [attr.ry]="resolvedDotCornerRadius()"
                   [attr.fill]="cell.color"
-                  [attr.opacity]="dotCellOpacity(cell)" />
+                  [attr.opacity]="dotCellOpacity(cell)"
+                />
               }
             </svg:g>
           }
@@ -585,14 +588,16 @@ class BarChart {
               (click)="emitClick(bar)"
               (keydown.enter)="emitClick(bar)"
               (keydown.space)="emitClick(bar); $event.preventDefault()"
-              (keydown)="onKeydown($event, idx)" />
+              (keydown)="onKeydown($event, idx)"
+            />
             @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
               <svg:text
                 class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
                 [attr.x]="barLabelX(bar)"
                 [attr.y]="barLabelY(bar)"
                 [attr.text-anchor]="barLabelAnchor(bar)"
-                dominant-baseline="middle">
+                dominant-baseline="middle"
+              >
                 {{ formatValueLabel(bar) }}
               </svg:text>
             }
@@ -627,13 +632,12 @@ class BarChart {
         }
       </tbody>
     </table>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: BarChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartBar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [CartesianContext],
                     imports: [ChartPointerTracker],
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
@@ -644,7 +648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <ng-content select="svg\\:g[ChartGrid]" />
         <svg:g class="chart-bars">
@@ -659,7 +664,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   [attr.height]="cell.height"
                   [attr.rx]="resolvedDotCornerRadius()"
                   [attr.ry]="resolvedDotCornerRadius()"
-                  fill="hsl(var(--muted))" />
+                  fill="hsl(var(--muted))"
+                />
               }
               @for (cell of dotValueCells(); track cell.key) {
                 <svg:rect
@@ -671,7 +677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   [attr.rx]="resolvedDotCornerRadius()"
                   [attr.ry]="resolvedDotCornerRadius()"
                   [attr.fill]="cell.color"
-                  [attr.opacity]="dotCellOpacity(cell)" />
+                  [attr.opacity]="dotCellOpacity(cell)"
+                />
               }
             </svg:g>
           }
@@ -695,14 +702,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               (click)="emitClick(bar)"
               (keydown.enter)="emitClick(bar)"
               (keydown.space)="emitClick(bar); $event.preventDefault()"
-              (keydown)="onKeydown($event, idx)" />
+              (keydown)="onKeydown($event, idx)"
+            />
             @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
               <svg:text
                 class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
                 [attr.x]="barLabelX(bar)"
                 [attr.y]="barLabelY(bar)"
                 [attr.text-anchor]="barLabelAnchor(bar)"
-                dominant-baseline="middle">
+                dominant-baseline="middle"
+              >
                 {{ formatValueLabel(bar) }}
               </svg:text>
             }

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, ChangeDetectionStrategy, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender, Service } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender, Service } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { scalePoint, scaleLinear, scaleBand } from 'd3-scale';
 import { max } from 'd3-array';
@@ -140,13 +140,12 @@ class ChartStyle {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ChartStyle, isStandalone: true, selector: "ChartStyle", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ChartStyle, isStandalone: true, selector: "ChartStyle", ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartStyle, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartStyle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '',
                 }]
         }], ctorParameters: () => [] });
@@ -232,13 +231,12 @@ class ChartContainer {
       <ng-content />
     </div>
     <ng-content select="ChartLegend" />
-  `, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ChartStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ChartStyle" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'Chart',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [ChartContext],
                     imports: [ChartStyle],
                     host: {

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, effect, Component } from '@angular/core';
 import { ChartContext, CartesianContext, CategoricalViewportContext, sliceByIndexRange, computeLineLayout, provideCartesianFromLineLayout, elementClientCenter } from '@ojiepermana/angular-chart/core';
 export { buildCartesianScales, cloneLinear, computeAreaLayout, computeLineLayout, pointToBandAdapter, provideCartesianFromLineLayout } from '@ojiepermana/angular-chart/core';
 import { ChartPointerTracker } from '@ojiepermana/angular-chart/primitives';
@@ -146,7 +146,8 @@ class LineChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <ng-content select="svg\\:g[ChartGrid]" />
         <svg:g class="chart-lines">
@@ -158,7 +159,8 @@ class LineChart {
               stroke-linejoin="round"
               [attr.stroke]="s.color"
               [attr.stroke-width]="strokeWidth()"
-              [attr.d]="s.linePath" />
+              [attr.d]="s.linePath"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.datumIndex) {
                 <svg:circle
@@ -175,14 +177,16 @@ class LineChart {
                   (blur)="clearActivePoint()"
                   (click)="emitClick(p)"
                   (keydown.enter)="emitClick(p)"
-                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                  (keydown.space)="emitClick(p); $event.preventDefault()"
+                />
                 @if (showValueLabels()) {
                   <svg:text
                     class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
                     [attr.x]="labelX(p)"
                     [attr.y]="labelY(p)"
                     [attr.text-anchor]="labelAnchor()"
-                    dominant-baseline="middle">
+                    dominant-baseline="middle"
+                  >
                     {{ formatValueLabel(p) }}
                   </svg:text>
                 }
@@ -199,13 +203,12 @@ class LineChart {
     <ng-content select="ChartTooltip" />
     <ng-content select="ChartLegend" />
     <ng-content select="ChartZoomControls" />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LineChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartLine',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [CartesianContext, CategoricalViewportContext],
                     imports: [ChartPointerTracker],
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
@@ -216,7 +219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <ng-content select="svg\\:g[ChartGrid]" />
         <svg:g class="chart-lines">
@@ -228,7 +232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               stroke-linejoin="round"
               [attr.stroke]="s.color"
               [attr.stroke-width]="strokeWidth()"
-              [attr.d]="s.linePath" />
+              [attr.d]="s.linePath"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.datumIndex) {
                 <svg:circle
@@ -245,14 +250,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   (blur)="clearActivePoint()"
                   (click)="emitClick(p)"
                   (keydown.enter)="emitClick(p)"
-                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                  (keydown.space)="emitClick(p); $event.preventDefault()"
+                />
                 @if (showValueLabels()) {
                   <svg:text
                     class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
                     [attr.x]="labelX(p)"
                     [attr.y]="labelY(p)"
                     [attr.text-anchor]="labelAnchor()"
-                    dominant-baseline="middle">
+                    dominant-baseline="middle"
+                  >
                     {{ formatValueLabel(p) }}
                   </svg:text>
                 }

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

@@ -1,7 +1,7 @@
 import { pie, arc } from 'd3-shape';
 import { seriesColorVar, ChartContext, ChartThemeRadius } from '@ojiepermana/angular-chart/core';
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, Component } from '@angular/core';
 
 function computePieLayout(input) {
     const { data, valueKey, nameKey, seriesKeys, innerWidth, innerHeight, innerRadius, padAngle, cornerRadius, startAngle, endAngle, activeIndex, activeOffset = 12, } = input;
@@ -125,8 +125,12 @@ class PieChart {
         });
     }
     setActive(event, s) {
-        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: s.datumIndex,
             datumIndex: s.datumIndex,
@@ -145,7 +149,8 @@ class PieChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="xMidYMid meet"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
           @for (s of layout().slices; track s.seriesKey) {
@@ -163,7 +168,8 @@ class PieChart {
               (pointermove)="setActive($event, s)"
               (pointerleave)="clearActive()"
               (focus)="setActive($event, s)"
-              (blur)="clearActive()" />
+              (blur)="clearActive()"
+            />
           }
           @if (showLabels()) {
             @for (s of layout().slices; track s.seriesKey) {
@@ -172,7 +178,8 @@ class PieChart {
                 text-anchor="middle"
                 dominant-baseline="middle"
                 [attr.x]="s.centroid[0] + s.translateX"
-                [attr.y]="s.centroid[1] + s.translateY">
+                [attr.y]="s.centroid[1] + s.translateY"
+              >
                 {{ s.value }}
               </svg:text>
             }
@@ -185,13 +192,12 @@ class PieChart {
     </div>
     <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: PieChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartPie',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
                     template: `
     <svg:svg
@@ -199,7 +205,8 @@ 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 [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
           @for (s of layout().slices; track s.seriesKey) {
@@ -217,7 +224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               (pointermove)="setActive($event, s)"
               (pointerleave)="clearActive()"
               (focus)="setActive($event, s)"
-              (blur)="clearActive()" />
+              (blur)="clearActive()"
+            />
           }
           @if (showLabels()) {
             @for (s of layout().slices; track s.seriesKey) {
@@ -226,7 +234,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 text-anchor="middle"
                 dominant-baseline="middle"
                 [attr.x]="s.centroid[0] + s.translateX"
-                [attr.y]="s.centroid[1] + s.translateY">
+                [attr.y]="s.centroid[1] + s.translateY"
+              >
                 {{ s.value }}
               </svg:text>
             }

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
@@ -221,7 +239,8 @@ class RadarChart {
                   (pointermove)="setActive($event, s.seriesKey, i)"
                   (pointerleave)="clearActive()"
                   (focus)="setActive($event, s.seriesKey, i)"
-                  (blur)="clearActive()" />
+                  (blur)="clearActive()"
+                />
               }
             }
           }
@@ -231,13 +250,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 +263,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 +280,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 +323,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
@@ -307,7 +339,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   (pointermove)="setActive($event, s.seriesKey, i)"
                   (pointerleave)="clearActive()"
                   (focus)="setActive($event, s.seriesKey, i)"
-                  (blur)="clearActive()" />
+                  (blur)="clearActive()"
+                />
               }
             }
           }

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

@@ -2,7 +2,7 @@ import { arc } from 'd3-shape';
 import { max } from 'd3-array';
 import { seriesColorVar, ChartContext, ChartThemeRadius } from '@ojiepermana/angular-chart/core';
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, Component } from '@angular/core';
 
 function computeRadialLayout(input) {
     const { data, nameKey, valueKey, innerWidth, innerHeight, seriesKeys, trackPadding, startAngle, endAngle, cornerRadius, } = input;
@@ -132,8 +132,12 @@ class RadialChart {
         });
     }
     setActive(event, b) {
-        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: b.datumIndex,
             datumIndex: b.datumIndex,
@@ -152,7 +156,8 @@ class RadialChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="xMidYMid meet"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
           @for (b of layout().bars; track b.seriesKey) {
@@ -172,14 +177,16 @@ class RadialChart {
               (pointermove)="setActive($event, b)"
               (pointerleave)="clearActive()"
               (focus)="setActive($event, b)"
-              (blur)="clearActive()" />
+              (blur)="clearActive()"
+            />
             @if (showValueLabels()) {
               <svg:text
                 class="chart-radial-value pointer-events-none fill-muted-foreground text-2xs"
                 [attr.x]="barLabelX(b)"
                 [attr.y]="barLabelY(b)"
                 [attr.text-anchor]="barLabelAnchor(b)"
-                dominant-baseline="middle">
+                dominant-baseline="middle"
+              >
                 {{ formatValueLabel(b) }}
               </svg:text>
             }
@@ -192,13 +199,12 @@ class RadialChart {
     </div>
     <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: RadialChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartRadial',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
                     template: `
     <svg:svg
@@ -206,7 +212,8 @@ 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 [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
           @for (b of layout().bars; track b.seriesKey) {
@@ -226,14 +233,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               (pointermove)="setActive($event, b)"
               (pointerleave)="clearActive()"
               (focus)="setActive($event, b)"
-              (blur)="clearActive()" />
+              (blur)="clearActive()"
+            />
             @if (showValueLabels()) {
               <svg:text
                 class="chart-radial-value pointer-events-none fill-muted-foreground text-2xs"
                 [attr.x]="barLabelX(b)"
                 [attr.y]="barLabelY(b)"
                 [attr.text-anchor]="barLabelAnchor(b)"
-                dominant-baseline="middle">
+                dominant-baseline="middle"
+              >
                 {{ formatValueLabel(b) }}
               </svg:text>
             }

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

@@ -2,7 +2,7 @@ import { scaleLinear } from 'd3-scale';
 import { extent } from 'd3-array';
 import { seriesColorVar, ChartContext, ScatterViewportContext } from '@ojiepermana/angular-chart/core';
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, effect, Component } from '@angular/core';
 
 function nice(extent) {
     const [lo, hi] = extent;
@@ -172,7 +172,8 @@ class ScatterChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:defs>
         <svg:clipPath [attr.id]="clipPathId()">
           <svg:rect x="0" y="0" [attr.width]="innerWidth()" [attr.height]="innerHeight()" />
@@ -191,7 +192,8 @@ class ScatterChart {
               tabindex="0"
               (click)="emitClick(p)"
               (keydown.enter)="emitClick(p)"
-              (keydown.space)="emitClick(p); $event.preventDefault()" />
+              (keydown.space)="emitClick(p); $event.preventDefault()"
+            />
           }
         </svg:g>
         <ng-content select="svg:g[ChartBrush]" />
@@ -199,13 +201,12 @@ class ScatterChart {
     </svg:svg>
     <ng-content select="ChartLegend" />
     <ng-content select="ChartZoomControls" />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ScatterChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartScatter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [ScatterViewportContext],
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
                     template: `
@@ -214,7 +215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:defs>
         <svg:clipPath [attr.id]="clipPathId()">
           <svg:rect x="0" y="0" [attr.width]="innerWidth()" [attr.height]="innerHeight()" />
@@ -233,7 +235,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               tabindex="0"
               (click)="emitClick(p)"
               (keydown.enter)="emitClick(p)"
-              (keydown.space)="emitClick(p); $event.preventDefault()" />
+              (keydown.space)="emitClick(p); $event.preventDefault()"
+            />
           }
         </svg:g>
         <ng-content select="svg:g[ChartBrush]" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-chart",
-  "version": "22.0.44",
+  "version": "22.0.45",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -12,7 +12,7 @@
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
-    "@ojiepermana/angular-component": "^22.0.44"
+    "@ojiepermana/angular-component": "^22.0.45"
   },
   "dependencies": {
     "d3-array": "^3.2.4",