From c369578771fb353c2f6b590c3619a91a41f37a6b Mon Sep 17 00:00:00 2001
From: JamesCurtis <jamescurtis@foxmail.com>
Date: Sun, 19 Nov 2023 21:06:00 +0800
Subject: [PATCH 01/15] fix: use ViewContainerRef.createComponent get error

---
 .../swimlane/ngx-charts/src/lib/common/base-chart.component.ts   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
index 9b192809c..69e2e20a4 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
@@ -54,6 +54,7 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
     if (isPlatformServer(this.platformId)) {
       this.animations = false;
     }
+    this.update();
   }
 
   ngAfterViewInit(): void {

From 6cba216fa48aa83d11dc2f78657f1794af3dcaad Mon Sep 17 00:00:00 2001
From: JamesCurtis <jamescurtis@foxmail.com>
Date: Mon, 20 Nov 2023 15:21:36 +0800
Subject: [PATCH 02/15] fix: use ViewContainerRef.createComponent get error

ERROR TypeError: Cannot read properties of undefined (reading 'scaleType')
    at ChartComponent.getLegendType (swimlane-ngx-charts.mjs:965:35)
---
 .../ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts  | 1 +
 .../src/lib/bar-chart/bar-horizontal-normalized.component.ts     | 1 +
 .../src/lib/bar-chart/bar-horizontal-stacked.component.ts        | 1 +
 .../ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts    | 1 +
 .../src/lib/bar-chart/bar-vertical-normalized.component.ts       | 1 +
 .../src/lib/bar-chart/bar-vertical-stacked.component.ts          | 1 +
 .../ngx-charts/src/lib/bubble-chart/bubble-chart.component.ts    | 1 +
 .../ngx-charts/src/lib/line-chart/line-chart.component.ts        | 1 +
 .../ngx-charts/src/lib/polar-chart/polar-chart.component.ts      | 1 +
 9 files changed, 9 insertions(+)

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
index 1a2a604d8..df0afef66 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
@@ -213,6 +213,7 @@ export class BarHorizontal2DComponent extends BaseChartComponent {
   barOrientation = BarOrientation;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts
index ee86e60d0..556e6d2fc 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts
@@ -186,6 +186,7 @@ export class BarHorizontalNormalizedComponent extends BaseChartComponent {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts
index ab1350940..4dead0c3b 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts
@@ -200,6 +200,7 @@ export class BarHorizontalStackedComponent extends BaseChartComponent {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
index 56fddd87c..2af933789 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
@@ -206,6 +206,7 @@ export class BarVertical2DComponent extends BaseChartComponent {
   barOrientation = BarOrientation;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
index d1e9e1b2f..36e3df634 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
@@ -185,6 +185,7 @@ export class BarVerticalNormalizedComponent extends BaseChartComponent {
   barChartType = BarChartType;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
index c13c0b50b..0ac95121c 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
@@ -200,6 +200,7 @@ export class BarVerticalStackedComponent extends BaseChartComponent {
   barChartType = BarChartType;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/bubble-chart/bubble-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/bubble-chart/bubble-chart.component.ts
index 7b0864011..570d54227 100644
--- a/projects/swimlane/ngx-charts/src/lib/bubble-chart/bubble-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bubble-chart/bubble-chart.component.ts
@@ -223,6 +223,7 @@ export class BubbleChartComponent extends BaseChartComponent {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
index 3d714c233..f326458a4 100644
--- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
@@ -274,6 +274,7 @@ export class LineChartComponent extends BaseChartComponent implements OnInit {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
index b30548c7c..2752ab7cf 100644
--- a/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
@@ -225,6 +225,7 @@ export class PolarChartComponent extends BaseChartComponent implements OnInit {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

From ac092f0225e70a4a2c22105045321988ec2fa9bc Mon Sep 17 00:00:00 2001
From: Nancy Harris <jamescurtis@foxmail.com>
Date: Wed, 13 Mar 2024 00:25:18 +0800
Subject: [PATCH 03/15] feat: animate

---
 .../lib/bar-chart/bar-horizontal.component.ts | 15 +++++++++++++-
 .../lib/bar-chart/bar-vertical.component.ts   | 20 ++++++++++++++++++-
 .../src/lib/bar-chart/bar.component.ts        | 18 +++++++++++++++--
 .../bar-chart/series-horizontal.component.ts  |  9 +++++----
 .../bar-chart/series-vertical.component.ts    |  9 +++++----
 .../src/lib/common/axes/x-axis.component.ts   | 17 +++++++++++++++-
 src/app/app.component.html                    |  5 +++++
 src/app/app.component.ts                      | 18 +++++++++--------
 8 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
index 9b398f410..e5876d0ea 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
@@ -16,6 +16,7 @@ import { BaseChartComponent } from '../common/base-chart.component';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
+import {animate, style, transition, trigger} from "@angular/animations";
 
 @Component({
   selector: 'ngx-charts-bar-horizontal',
@@ -33,6 +34,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
       <svg:g [attr.transform]="transform" class="bar-chart chart">
         <svg:g
           ngx-charts-x-axis
+          @testHide
           *ngIf="xAxis"
           [xScale]="xScale"
           [dims]="dims"
@@ -49,6 +51,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
         ></svg:g>
         <svg:g
           ngx-charts-y-axis
+          @testHide
           *ngIf="yAxis"
           [yScale]="yScale"
           [dims]="dims"
@@ -88,7 +91,17 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['../common/base-chart.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  animations: [
+    trigger('testHide', [
+      transition(':leave', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms', style({ transform: '0' }))
+      ])
+    ])
+  ]
 })
 export class BarHorizontalComponent extends BaseChartComponent {
   @Input() legend = false;
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
index cf2e9e353..652f71592 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
@@ -17,6 +17,7 @@ import { DataItem } from '../models/chart-data.model';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
+import { animate, animateChild, query, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'ngx-charts-bar-vertical',
@@ -34,6 +35,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
       <svg:g [attr.transform]="transform" class="bar-chart chart">
         <svg:g
           ngx-charts-x-axis
+          @testHide
           *ngIf="xAxis"
           [xScale]="xScale"
           [dims]="dims"
@@ -51,6 +53,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
         ></svg:g>
         <svg:g
           ngx-charts-y-axis
+          @testHide
           *ngIf="yAxis"
           [yScale]="yScale"
           [dims]="dims"
@@ -90,7 +93,17 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['../common/base-chart.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  animations: [
+    trigger('testHide', [
+      transition(':leave', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms', style({ transform: '0' }))
+      ])
+    ])
+  ]
 })
 export class BarVerticalComponent extends BaseChartComponent {
   @Input() legend = false;
@@ -144,6 +157,11 @@ export class BarVerticalComponent extends BaseChartComponent {
   legendOptions: LegendOptions;
   dataLabelMaxHeight: any = { negative: 0, positive: 0 };
 
+  test(...args) {
+    console.log(args);
+    debugger;
+  }
+
   update(): void {
     super.update();
 
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
index 4330632df..b54234026 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
@@ -15,6 +15,7 @@ import { id } from '../utils/id';
 import { DataItem } from '../models/chart-data.model';
 import { BarOrientation } from '../common/types/bar-orientation.enum';
 import { Gradient } from '../common/types/gradient.interface';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'g[ngx-charts-bar]',
@@ -27,6 +28,7 @@ import { Gradient } from '../common/types/gradient.interface';
       stroke="none"
       role="img"
       tabIndex="-1"
+      @animationState
       [class.active]="isActive"
       [class.hidden]="hideBar"
       [attr.d]="path"
@@ -35,7 +37,17 @@ import { Gradient } from '../common/types/gradient.interface';
       (click)="select.emit(data)"
     />
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('animationState', [
+      transition(':enter', [
+        style({
+          opacity: 0
+        }),
+        animate('500ms 600ms ease-in', style({ opacity: 1 }))
+      ])
+    ])
+  ]
 })
 export class BarComponent implements OnChanges {
   @Input() fill: string;
@@ -101,7 +113,9 @@ export class BarComponent implements OnChanges {
     const node = select(this.element).select('.bar');
     const path = this.getPath();
     if (this.animations) {
-      node.transition().duration(500).attr('d', path);
+      setTimeout(() => {
+        node.transition().duration(500).attr('d', path);
+      }, 600);
     } else {
       node.attr('d', path);
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-horizontal.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-horizontal.component.ts
index f9a7e5d5c..bcc698069 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-horizontal.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-horizontal.component.ts
@@ -27,7 +27,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
     <svg:g
       ngx-charts-bar
       *ngFor="let bar of bars; trackBy: trackBy"
-      [@animationState]="'active'"
+      @scaleToHidden
       [width]="bar.width"
       [height]="bar.height"
       [x]="bar.x"
@@ -70,12 +70,13 @@ import { ScaleType } from '../common/types/scale-type.enum';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('animationState', [
+    trigger('scaleToHidden', [
       transition(':leave', [
         style({
-          opacity: 1
+          transformOrigin: 'left',
+          opacity: '1'
         }),
-        animate(500, style({ opacity: 0 }))
+        animate('500ms ease-out', style({ transform: 'scaleX(0)', opacity: '0' }))
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
index 6ddce3baf..110046082 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
@@ -30,7 +30,7 @@ import { isPlatformServer } from '@angular/common';
       <svg:g
         ngx-charts-bar
         *ngFor="let bar of bars; trackBy: trackBy"
-        [@animationState]="'active'"
+        @scaleToHidden
         [@.disabled]="!animations"
         [width]="bar.width"
         [height]="bar.height"
@@ -105,12 +105,13 @@ import { isPlatformServer } from '@angular/common';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('animationState', [
+    trigger('scaleToHidden', [
       transition(':leave', [
         style({
-          opacity: 1
+          transformOrigin: 'center',
+          opacity: '1'
         }),
-        animate(500, style({ opacity: 0 }))
+        animate('500ms ease-out', style({ transform: 'scaleY(0)', opacity: '0' }))
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts b/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
index d652c630c..7a47dfdd2 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
@@ -12,6 +12,7 @@ import {
 import { XAxisTicksComponent } from './x-axis-ticks.component';
 import { Orientation } from '../types/orientation.enum';
 import { ViewDimensions } from '../types/view-dimension.interface';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'g[ngx-charts-x-axis]',
@@ -46,9 +47,23 @@ import { ViewDimensions } from '../types/view-dimension.interface';
       ></svg:g>
     </svg:g>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('adsfadsfaasdf', [
+      transition(':leave', [
+        style({
+          transform: 'translate(-50px , 0)'
+        }),
+        animate('500ms', style({ transform: 'translate(-200px , 0)' }))
+      ])
+    ])
+  ]
 })
 export class XAxisComponent implements OnChanges {
+  test(e) {
+    console.log(e);
+    // debugger
+  }
   @Input() xScale;
   @Input() dims: ViewDimensions;
   @Input() trimTicks: boolean;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a68efd1e8..defd101a4 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,6 +4,7 @@
       <ngx-charts-bar-vertical
         *ngIf="chartType === 'bar-vertical'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -42,6 +43,7 @@
       <ngx-charts-bar-horizontal
         *ngIf="chartType === 'bar-horizontal'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -79,6 +81,7 @@
       <ngx-charts-bar-vertical-2d
         *ngIf="chartType === 'bar-vertical-2d'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -117,6 +120,7 @@
       <ngx-charts-bar-horizontal-2d
         *ngIf="chartType === 'bar-horizontal-2d'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -155,6 +159,7 @@
       <ngx-charts-bar-vertical-stacked
         *ngIf="chartType === 'bar-vertical-stacked'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3d06e3ff6..a3c486e2e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,21 +1,21 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { Location, LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { HashLocationStrategy, Location, LocationStrategy } from '@angular/common';
 import * as shape from 'd3-shape';
 import * as d3Array from 'd3-array';
 
 import { Color, colorSets } from '@swimlane/ngx-charts/utils/color-sets';
-import { formatLabel, escapeLabel } from '@swimlane/ngx-charts/common/label.helper';
+import { escapeLabel, formatLabel } from '@swimlane/ngx-charts/common/label.helper';
 import {
-  single,
-  multi,
   boxData,
   bubble,
-  sankeyData,
+  fiscalYearReport,
   generateData,
   generateGraph,
-  treemap,
+  multi,
+  sankeyData,
+  single,
   timelineFilterBarData,
-  fiscalYearReport
+  treemap
 } from './data';
 import { bubbleDemoData } from './custom-charts/bubble-chart-interactive/data';
 import { BubbleChartInteractiveServerDataModel } from './custom-charts/bubble-chart-interactive/models';
@@ -26,6 +26,7 @@ import pkg from '../../projects/swimlane/ngx-charts/package.json';
 import { InputTypes } from '@swimlane/ngx-ui';
 import { LegendPosition } from '@swimlane/ngx-charts/common/types/legend.model';
 import { ScaleType } from '@swimlane/ngx-charts/common/types/scale-type.enum';
+import { animateChild, query, transition, trigger } from '@angular/animations';
 
 const monthName = new Intl.DateTimeFormat('en-us', { month: 'short' });
 const weekdayName = new Intl.DateTimeFormat('en-us', { weekday: 'short' });
@@ -49,7 +50,8 @@ const getRandomInt = (min: number, max: number) => {
   providers: [Location, { provide: LocationStrategy, useClass: HashLocationStrategy }],
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['../../node_modules/@swimlane/ngx-ui/index.css', './app.component.scss'],
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  animations: [trigger('queryChildAnimations', [transition(':enter, :leave', [query('@*', animateChild())])])]
 })
 export class AppComponent implements OnInit {
   APP_VERSION = pkg.version;

From 92f25bbfe654d85159e844811e6921c5ffe21bf1 Mon Sep 17 00:00:00 2001
From: Nancy Harris <jamescurtis@foxmail.com>
Date: Mon, 18 Mar 2024 09:57:03 +0800
Subject: [PATCH 04/15] fix: appears to render animation misaligned

---
 .../src/lib/bar-chart/bar.component.ts        | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
index 4330632df..1ec6a393b 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
@@ -1,5 +1,6 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -65,16 +66,23 @@ export class BarComponent implements OnChanges {
   gradientStops: Gradient[];
   hasGradient: boolean = false;
   hideBar: boolean = false;
+  pathAnimationDebounceTimer = null;
 
-  constructor(element: ElementRef) {
+  constructor(private cdf: ChangeDetectorRef, element: ElementRef) {
     this.element = element.nativeElement;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.roundEdges) {
+    if (
+      changes.roundEdges ||
+      /* fix: appears to render animation misaligned */
+      changes.x ||
+      changes.y ||
+      changes.height ||
+      changes.width
+    ) {
       this.loadAnimation();
-    }
-    this.update();
+    } else this.update();
   }
 
   update(): void {
@@ -88,13 +96,20 @@ export class BarComponent implements OnChanges {
       this.hasGradient = false;
     }
 
-    this.updatePathEl();
     this.checkToHideBar();
+    if (this.pathAnimationDebounceTimer) {
+      clearTimeout(this.pathAnimationDebounceTimer);
+    }
+    this.pathAnimationDebounceTimer = setTimeout(() => {
+      this.updatePathEl();
+      this.pathAnimationDebounceTimer = null;
+    }, 100);
   }
 
   loadAnimation(): void {
     this.path = this.getStartingPath();
-    setTimeout(this.update.bind(this), 100);
+    this.cdf.markForCheck();
+    this.update();
   }
 
   updatePathEl(): void {

From 3417a0023c8d6590aa097a9457064cf0305f82af Mon Sep 17 00:00:00 2001
From: Nancy Harris <jamescurtis@foxmail.com>
Date: Tue, 19 Mar 2024 23:04:22 +0800
Subject: [PATCH 05/15] fix: improve animations

---
 .../lib/bar-chart/bar-horizontal.component.ts |  8 ++++++-
 .../lib/bar-chart/bar-vertical.component.ts   |  8 ++++++-
 .../src/lib/bar-chart/bar.component.ts        |  8 +++----
 .../bar-chart/series-vertical.component.ts    | 14 +++++------
 .../src/lib/common/axes/x-axis.component.ts   | 24 +++++++++----------
 5 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
index e5876d0ea..a65ed61e4 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
@@ -98,7 +98,13 @@ import {animate, style, transition, trigger} from "@angular/animations";
         style({
           opacity: '0'
         }),
-        animate('500ms', style({ transform: '0' }))
+        animate('500ms', style({ opacity: '0' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms 200ms', style({ opacity: '1' }))
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
index 652f71592..0c76c0ca4 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
@@ -100,7 +100,13 @@ import { animate, animateChild, query, style, transition, trigger } from '@angul
         style({
           opacity: '0'
         }),
-        animate('500ms', style({ transform: '0' }))
+        animate('500ms', style({ opacity: '0' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms 200ms', style({ opacity: '1' }))
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
index 62057cbd4..51b9bdf9e 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
@@ -29,7 +29,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
       stroke="none"
       role="img"
       tabIndex="-1"
-      @animationState
+      @enterAnimation
       [class.active]="isActive"
       [class.hidden]="hideBar"
       [attr.d]="path"
@@ -40,14 +40,14 @@ import { animate, style, transition, trigger } from '@angular/animations';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('animationState', [
+    trigger('enterAnimation', [
       transition(':enter', [
         style({
           opacity: 0
         }),
         animate('500ms 600ms ease-in', style({ opacity: 1 }))
       ])
-    ])
+    ]),
   ]
 })
 export class BarComponent implements OnChanges {
@@ -130,7 +130,7 @@ export class BarComponent implements OnChanges {
     if (this.animations) {
       setTimeout(() => {
         node.transition().duration(500).attr('d', path);
-      }, 600);
+      }, 500);
     } else {
       node.attr('d', path);
     }
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
index 110046082..ea13f4158 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
@@ -1,16 +1,16 @@
 import {
+  ChangeDetectionStrategy,
   Component,
-  Input,
-  Output,
   EventEmitter,
+  Inject,
+  Input,
   OnChanges,
-  ChangeDetectionStrategy,
-  TemplateRef,
+  Output,
   PLATFORM_ID,
-  Inject
+  TemplateRef
 } from '@angular/core';
-import { trigger, style, animate, transition } from '@angular/animations';
-import { formatLabel, escapeLabel } from '../common/label.helper';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { escapeLabel, formatLabel } from '../common/label.helper';
 import { DataItem, StringOrNumberOrDate } from '../models/chart-data.model';
 import { PlacementTypes } from '../common/tooltip/position';
 import { StyleTypes } from '../common/tooltip/style.type';
diff --git a/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts b/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
index 7a47dfdd2..e9fe668d8 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
@@ -49,21 +49,21 @@ import { animate, style, transition, trigger } from '@angular/animations';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('adsfadsfaasdf', [
-      transition(':leave', [
-        style({
-          transform: 'translate(-50px , 0)'
-        }),
-        animate('500ms', style({ transform: 'translate(-200px , 0)' }))
-      ])
-    ])
+    // trigger('testLeab', [
+    //   transition(':leave', [
+    //     style({
+    //       transform: 'translate(-50px , 0)'
+    //     }),
+    //     animate('500ms', style({ transform: 'translate(-200px , 0)' }))
+    //   ])
+    // ])
   ]
 })
 export class XAxisComponent implements OnChanges {
-  test(e) {
-    console.log(e);
-    // debugger
-  }
+  // test(e) {
+  //   console.trace(e);
+  //   // debugger
+  // }
   @Input() xScale;
   @Input() dims: ViewDimensions;
   @Input() trimTicks: boolean;

From 5d4c8b49e9982df5f017f340f4aab3cbb8483528 Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Mon, 25 Mar 2024 11:00:13 +0800
Subject: [PATCH 06/15] fix: axis animation moves down

---
 .../lib/bar-chart/bar-horizontal.component.ts | 31 ++++---------------
 .../lib/bar-chart/bar-vertical.component.ts   | 31 ++++---------------
 .../src/lib/common/axes/x-axis.component.ts   | 28 ++++++++++-------
 .../src/lib/common/axes/y-axis.component.ts   | 29 ++++++++++++++---
 4 files changed, 52 insertions(+), 67 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
index a65ed61e4..2aa50e4bf 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
@@ -1,12 +1,12 @@
 import {
+  ChangeDetectionStrategy,
   Component,
+  ContentChild,
+  EventEmitter,
   Input,
   Output,
-  EventEmitter,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ContentChild,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 import { scaleBand, scaleLinear } from 'd3-scale';
 
@@ -16,7 +16,6 @@ import { BaseChartComponent } from '../common/base-chart.component';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
-import {animate, style, transition, trigger} from "@angular/animations";
 
 @Component({
   selector: 'ngx-charts-bar-horizontal',
@@ -34,7 +33,6 @@ import {animate, style, transition, trigger} from "@angular/animations";
       <svg:g [attr.transform]="transform" class="bar-chart chart">
         <svg:g
           ngx-charts-x-axis
-          @testHide
           *ngIf="xAxis"
           [xScale]="xScale"
           [dims]="dims"
@@ -51,7 +49,6 @@ import {animate, style, transition, trigger} from "@angular/animations";
         ></svg:g>
         <svg:g
           ngx-charts-y-axis
-          @testHide
           *ngIf="yAxis"
           [yScale]="yScale"
           [dims]="dims"
@@ -91,23 +88,7 @@ import {animate, style, transition, trigger} from "@angular/animations";
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['../common/base-chart.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  animations: [
-    trigger('testHide', [
-      transition(':leave', [
-        style({
-          opacity: '0'
-        }),
-        animate('500ms', style({ opacity: '0' }))
-      ]),
-      transition(':enter', [
-        style({
-          opacity: '0'
-        }),
-        animate('500ms 200ms', style({ opacity: '1' }))
-      ])
-    ])
-  ]
+  encapsulation: ViewEncapsulation.None
 })
 export class BarHorizontalComponent extends BaseChartComponent {
   @Input() legend = false;
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
index 0c76c0ca4..6961f55c5 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
@@ -1,12 +1,12 @@
 import {
+  ChangeDetectionStrategy,
   Component,
+  ContentChild,
+  EventEmitter,
   Input,
-  ViewEncapsulation,
   Output,
-  EventEmitter,
-  ChangeDetectionStrategy,
-  ContentChild,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 import { scaleBand, scaleLinear } from 'd3-scale';
 
@@ -17,7 +17,6 @@ import { DataItem } from '../models/chart-data.model';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
-import { animate, animateChild, query, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'ngx-charts-bar-vertical',
@@ -35,7 +34,6 @@ import { animate, animateChild, query, style, transition, trigger } from '@angul
       <svg:g [attr.transform]="transform" class="bar-chart chart">
         <svg:g
           ngx-charts-x-axis
-          @testHide
           *ngIf="xAxis"
           [xScale]="xScale"
           [dims]="dims"
@@ -53,7 +51,6 @@ import { animate, animateChild, query, style, transition, trigger } from '@angul
         ></svg:g>
         <svg:g
           ngx-charts-y-axis
-          @testHide
           *ngIf="yAxis"
           [yScale]="yScale"
           [dims]="dims"
@@ -93,23 +90,7 @@ import { animate, animateChild, query, style, transition, trigger } from '@angul
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['../common/base-chart.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  animations: [
-    trigger('testHide', [
-      transition(':leave', [
-        style({
-          opacity: '0'
-        }),
-        animate('500ms', style({ opacity: '0' }))
-      ]),
-      transition(':enter', [
-        style({
-          opacity: '0'
-        }),
-        animate('500ms 200ms', style({ opacity: '1' }))
-      ])
-    ])
-  ]
+  encapsulation: ViewEncapsulation.None
 })
 export class BarVerticalComponent extends BaseChartComponent {
   @Input() legend = false;
diff --git a/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts b/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
index e9fe668d8..3d674474c 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
@@ -21,6 +21,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
       <svg:g
         ngx-charts-x-axis-ticks
         *ngIf="xScale"
+        @toggleHide
         [trimTicks]="trimTicks"
         [rotateTicks]="rotateTicks"
         [maxTickLength]="maxTickLength"
@@ -39,6 +40,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
       <svg:g
         ngx-charts-axis-label
         *ngIf="showLabel"
+        @toggleHide
         [label]="labelText"
         [offset]="labelOffset"
         [orient]="orientation.Bottom"
@@ -49,21 +51,23 @@ import { animate, style, transition, trigger } from '@angular/animations';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    // trigger('testLeab', [
-    //   transition(':leave', [
-    //     style({
-    //       transform: 'translate(-50px , 0)'
-    //     }),
-    //     animate('500ms', style({ transform: 'translate(-200px , 0)' }))
-    //   ])
-    // ])
+    trigger('toggleHide', [
+      transition(':leave', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms', style({ opacity: '0' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms 200ms', style({ opacity: '1' }))
+      ])
+    ])
   ]
 })
 export class XAxisComponent implements OnChanges {
-  // test(e) {
-  //   console.trace(e);
-  //   // debugger
-  // }
   @Input() xScale;
   @Input() dims: ViewDimensions;
   @Input() trimTicks: boolean;
diff --git a/projects/swimlane/ngx-charts/src/lib/common/axes/y-axis.component.ts b/projects/swimlane/ngx-charts/src/lib/common/axes/y-axis.component.ts
index 7fcad6e3b..fd94b7639 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/axes/y-axis.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/axes/y-axis.component.ts
@@ -1,16 +1,17 @@
 import {
+  ChangeDetectionStrategy,
   Component,
-  Input,
-  Output,
   EventEmitter,
+  Input,
   OnChanges,
-  ViewChild,
+  Output,
   SimpleChanges,
-  ChangeDetectionStrategy
+  ViewChild
 } from '@angular/core';
 import { YAxisTicksComponent } from './y-axis-ticks.component';
 import { Orientation } from '../types/orientation.enum';
 import { ViewDimensions } from '../types/view-dimension.interface';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'g[ngx-charts-y-axis]',
@@ -19,6 +20,7 @@ import { ViewDimensions } from '../types/view-dimension.interface';
       <svg:g
         ngx-charts-y-axis-ticks
         *ngIf="yScale"
+        @toggleHide
         [trimTicks]="trimTicks"
         [maxTickLength]="maxTickLength"
         [tickFormatting]="tickFormatting"
@@ -40,6 +42,7 @@ import { ViewDimensions } from '../types/view-dimension.interface';
       <svg:g
         ngx-charts-axis-label
         *ngIf="showLabel"
+        @toggleHide
         [label]="labelText"
         [offset]="labelOffset"
         [orient]="yOrient"
@@ -48,7 +51,23 @@ import { ViewDimensions } from '../types/view-dimension.interface';
       ></svg:g>
     </svg:g>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('toggleHide', [
+      transition(':leave', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms', style({ opacity: '0' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms 200ms', style({ opacity: '1' }))
+      ])
+    ])
+  ]
 })
 export class YAxisComponent implements OnChanges {
   @Input() yScale;

From ceb445e34de22f6f55d207d879473fa7cdc89ecf Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Mon, 25 Mar 2024 12:53:23 +0800
Subject: [PATCH 07/15] fix: grouped charts enter animation

---
 .../lib/common/grid-panel-series.component.ts | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/grid-panel-series.component.ts b/projects/swimlane/ngx-charts/src/lib/common/grid-panel-series.component.ts
index f3280cd86..286da7a53 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/grid-panel-series.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/grid-panel-series.component.ts
@@ -1,6 +1,7 @@
 import { Component, SimpleChanges, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 import { BarOrientation } from './types/bar-orientation.enum';
 import { ViewDimensions } from './types/view-dimension.interface';
+import {animate, style, transition, trigger} from "@angular/animations";
 
 interface GridPanel {
   class: ClassEnum;
@@ -22,6 +23,7 @@ enum ClassEnum {
     <svg:g
       ngx-charts-grid-panel
       *ngFor="let gridPanel of gridPanels"
+      @toggleHide
       [height]="gridPanel.height"
       [width]="gridPanel.width"
       [x]="gridPanel.x"
@@ -31,7 +33,23 @@ enum ClassEnum {
       [class.even]="gridPanel.class === 'even'"
     ></svg:g>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('toggleHide', [
+      transition(':leave', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms', style({ opacity: '0' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms 200ms', style({ opacity: '1' }))
+      ])
+    ])
+  ]
 })
 export class GridPanelSeriesComponent implements OnChanges {
   gridPanels: GridPanel[];

From 045c05003ed0408abc954f5fb320f7cccb8c001a Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Mon, 25 Mar 2024 12:53:46 +0800
Subject: [PATCH 08/15] fix: clear unused animations

---
 .../bar-chart/bar-horizontal-2d.component.ts  | 25 +++++--------------
 .../bar-chart/bar-vertical-2d.component.ts    | 25 +++++--------------
 2 files changed, 12 insertions(+), 38 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
index df0afef66..dff8aacab 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
@@ -1,16 +1,15 @@
 import {
+  ChangeDetectionStrategy,
   Component,
+  ContentChild,
+  EventEmitter,
   Input,
-  ViewEncapsulation,
   Output,
-  EventEmitter,
-  ChangeDetectionStrategy,
-  ContentChild,
   TemplateRef,
-  TrackByFunction
+  TrackByFunction,
+  ViewEncapsulation
 } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
-import { trigger, style, animate, transition } from '@angular/animations';
 
 import { scaleBand, scaleLinear } from 'd3-scale';
 
@@ -81,7 +80,6 @@ import { BarOrientation } from '../common/types/bar-orientation.enum';
         <svg:g *ngIf="!isSSR">
           <svg:g
             *ngFor="let group of results; let index = index; trackBy: trackBy"
-            [@animationState]="'active'"
             [attr.transform]="groupTransform(group)"
           >
             <svg:g
@@ -142,18 +140,7 @@ import { BarOrientation } from '../common/types/bar-orientation.enum';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['../common/base-chart.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  animations: [
-    trigger('animationState', [
-      transition(':leave', [
-        style({
-          opacity: 1,
-          transform: '*'
-        }),
-        animate(500, style({ opacity: 0, transform: 'scale(0)' }))
-      ])
-    ])
-  ]
+  encapsulation: ViewEncapsulation.None
 })
 export class BarHorizontal2DComponent extends BaseChartComponent {
   @Input() legend: boolean = false;
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
index 2af933789..95b2d2ad2 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
@@ -1,15 +1,14 @@
 import {
+  ChangeDetectionStrategy,
   Component,
+  ContentChild,
+  EventEmitter,
   Input,
   Output,
-  ViewEncapsulation,
-  EventEmitter,
-  ChangeDetectionStrategy,
-  ContentChild,
   TemplateRef,
-  TrackByFunction
+  TrackByFunction,
+  ViewEncapsulation
 } from '@angular/core';
-import { trigger, style, animate, transition } from '@angular/animations';
 import { scaleBand, scaleLinear } from 'd3-scale';
 
 import { calculateViewDimensions } from '../common/view-dimensions.helper';
@@ -80,7 +79,6 @@ import { isPlatformServer } from '@angular/common';
           <svg:g
             ngx-charts-series-vertical
             *ngFor="let group of results; let index = index; trackBy: trackBy"
-            [@animationState]="'active'"
             [attr.transform]="groupTransform(group)"
             [activeEntries]="activeEntries"
             [xScale]="innerScale"
@@ -134,18 +132,7 @@ import { isPlatformServer } from '@angular/common';
   `,
   styleUrls: ['../common/base-chart.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('animationState', [
-      transition(':leave', [
-        style({
-          opacity: 1,
-          transform: '*'
-        }),
-        animate(500, style({ opacity: 0, transform: 'scale(0)' }))
-      ])
-    ])
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BarVertical2DComponent extends BaseChartComponent {
   @Input() legend: boolean = false;

From a26237fb7cd1baf21b1adea6807cdfb310168761 Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Mon, 25 Mar 2024 13:06:30 +0800
Subject: [PATCH 09/15] fix: query children animations

---
 src/app/app.component.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index defd101a4..92f608e37 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -196,6 +196,7 @@
       <ngx-charts-bar-horizontal-stacked
         *ngIf="chartType === 'bar-horizontal-stacked'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -232,6 +233,7 @@
       <ngx-charts-bar-vertical-normalized
         *ngIf="chartType === 'bar-vertical-normalized'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -266,6 +268,7 @@
       <ngx-charts-bar-horizontal-normalized
         *ngIf="chartType === 'bar-horizontal-normalized'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -300,6 +303,7 @@
       <ngx-charts-pie-chart
         *ngIf="chartType === 'pie-chart'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [results]="single"
@@ -323,6 +327,7 @@
       <ngx-charts-advanced-pie-chart
         *ngIf="chartType === 'advanced-pie-chart'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [results]="single"
@@ -339,6 +344,7 @@
       <ngx-charts-pie-grid
         *ngIf="chartType === 'pie-grid'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [results]="single"
@@ -352,8 +358,9 @@
       </ngx-charts-pie-grid>
       <ngx-charts-line-chart
         *ngIf="chartType === 'line-chart'"
-        [view]="view"
         class="chart-container"
+        @queryChildAnimations
+        [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [results]="dateDataWithOrWithoutRange"
@@ -392,8 +399,9 @@
       </ngx-charts-line-chart>
       <ngx-charts-polar-chart
         *ngIf="chartType === 'polar-chart'"
-        [view]="view"
         class="chart-container"
+        @queryChildAnimations
+        [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [results]="multi"
@@ -424,8 +432,9 @@
       </ngx-charts-polar-chart>
       <ngx-charts-bubble-chart
         *ngIf="chartType === 'bubble-chart'"
-        [view]="view"
         class="chart-container"
+        @queryChildAnimations
+        [view]="view"
         [results]="bubble"
         [animations]="animations"
         [showGridLines]="showGridLines"
@@ -463,6 +472,7 @@
       <ngx-charts-area-chart
         *ngIf="chartType === 'area-chart'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -502,6 +512,7 @@
       <ngx-charts-area-chart-stacked
         *ngIf="chartType === 'area-chart-stacked'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -540,6 +551,7 @@
       <ngx-charts-area-chart-normalized
         *ngIf="chartType === 'area-chart-normalized'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
@@ -573,6 +585,7 @@
       <combo-chart-component
         *ngIf="chartType === 'combo-chart'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="comboBarScheme"
         [colorSchemeLine]="lineChartScheme"
@@ -605,6 +618,7 @@
       <ngx-charts-heat-map
         *ngIf="chartType === 'heat-map'"
         class="chart-container"
+        @queryChildAnimations
         [min]="heatmapMin"
         [max]="heatmapMax"
         [view]="view"
@@ -635,6 +649,7 @@
       <ngx-charts-heat-map
         *ngIf="chartType === 'calendar'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [results]="calendarData"
@@ -663,6 +678,7 @@
       <ngx-charts-tree-map
         *ngIf="chartType === 'tree-map'"
         class="chart-container"
+        @queryChildAnimations
         [view]="view"
         [scheme]="colorScheme"
         [results]="single"

From d050bb500107b3b412b4c9d9d21dbb172d957c4b Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Mon, 25 Mar 2024 17:56:59 +0800
Subject: [PATCH 10/15] fix: legend toggle animation

---
 .../src/lib/common/charts/chart.component.ts  | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/charts/chart.component.ts b/projects/swimlane/ngx-charts/src/lib/common/charts/chart.component.ts
index 3f31ae76e..d68db40b2 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/charts/chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/charts/chart.component.ts
@@ -10,6 +10,7 @@ import {
 import { TooltipService } from '../tooltip/tooltip.service';
 import { LegendOptions, LegendType, LegendPosition } from '../types/legend.model';
 import { ScaleType } from '../types/scale-type.enum';
+import {animate, style, transition, trigger} from "@angular/animations";
 
 @Component({
   providers: [TooltipService],
@@ -22,6 +23,7 @@ import { ScaleType } from '../types/scale-type.enum';
       <ngx-charts-scale-legend
         *ngIf="showLegend && legendType === LegendType.ScaleLegend"
         class="chart-legend"
+        @toggleAnimation
         [horizontal]="legendOptions && legendOptions.position === LegendPosition.Below"
         [valueRange]="legendOptions.domain"
         [colors]="legendOptions.colors"
@@ -32,6 +34,7 @@ import { ScaleType } from '../types/scale-type.enum';
       <ngx-charts-legend
         *ngIf="showLegend && legendType === LegendType.Legend"
         class="chart-legend"
+        @toggleAnimation
         [horizontal]="legendOptions && legendOptions.position === LegendPosition.Below"
         [data]="legendOptions.domain"
         [title]="legendOptions.title"
@@ -46,7 +49,23 @@ import { ScaleType } from '../types/scale-type.enum';
       </ngx-charts-legend>
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('toggleAnimation', [
+      transition(':leave', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms', style({ opacity: '0' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms 200ms', style({ opacity: '1' }))
+      ])
+    ])
+  ]
 })
 export class ChartComponent implements OnChanges {
   @Input() view: [number, number];

From 24806e99cdcbf96dd7fa5c7cf386e45aa4178de5 Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Mon, 25 Mar 2024 17:58:19 +0800
Subject: [PATCH 11/15] fix: line chart toggle animation

---
 .../lib/line-chart/line-chart.component.ts    | 19 ++-----------------
 .../src/lib/line-chart/line.component.ts      | 19 ++++++++++++++++---
 .../lib/polar-chart/polar-chart.component.ts  | 18 +++++++++++++++---
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
index f326458a4..5cab78259 100644
--- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
@@ -83,7 +83,7 @@ import { isPlatformServer } from '@angular/common';
         ></svg:g>
         <svg:g [attr.clip-path]="clipPath">
           <svg:g *ngIf="!isSSR">
-            <svg:g *ngFor="let series of results; trackBy: trackBy" [@animationState]="'active'">
+            <svg:g *ngFor="let series of results; trackBy: trackBy">
               <svg:g
                 ngx-charts-line-series
                 [xScale]="xScale"
@@ -182,22 +182,7 @@ import { isPlatformServer } from '@angular/common';
   `,
   styleUrls: ['../common/base-chart.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('animationState', [
-      transition(':leave', [
-        style({
-          opacity: 1
-        }),
-        animate(
-          500,
-          style({
-            opacity: 0
-          })
-        )
-      ])
-    ])
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LineChartComponent extends BaseChartComponent implements OnInit {
   @Input() legend: boolean;
diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
index 43d40f0dc..d5bc3ddcb 100644
--- a/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
@@ -21,7 +21,7 @@ import { isPlatformServer } from '@angular/common';
   template: `
     <svg:g *ngIf="!isSSR">
       <svg:path
-        [@animationState]="'active'"
+        @toggleAnimation
         class="line"
         [attr.d]="initialPath"
         [attr.fill]="fill"
@@ -35,18 +35,31 @@ import { isPlatformServer } from '@angular/common';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('animationState', [
+    trigger('toggleAnimation', [
       transition(':enter', [
         style({
           strokeDasharray: 2000,
           strokeDashoffset: 2000
         }),
         animate(
-          1000,
+          '800ms 300ms',
           style({
             strokeDashoffset: 0
           })
         )
+      ]),
+      transition(':leave', [
+        style({
+          strokeDasharray: 2000,
+          strokeDashoffset: 0
+        }),
+        animate(
+          '800ms',
+          style({
+            strokeDasharray: 2000,
+            strokeDashoffset: -2000
+          })
+        )
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
index 2752ab7cf..ac84a8cb6 100644
--- a/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
@@ -30,6 +30,7 @@ const twoPI = 2 * Math.PI;
   selector: 'ngx-charts-polar-chart',
   template: `
     <ngx-charts-chart
+      @animationState
       [view]="[width, height]"
       [showLegend]="legend"
       [legendOptions]="legendOptions"
@@ -92,7 +93,7 @@ const twoPI = 2 * Math.PI;
           [width]="dims.width"
         ></svg:g>
         <svg:g *ngIf="!isSSR" [attr.transform]="transformPlot">
-          <svg:g *ngFor="let series of results; trackBy: trackBy" [@animationState]="'active'">
+          <svg:g *ngFor="let series of results; trackBy: trackBy">
             <svg:g
               ngx-charts-polar-series
               [gradient]="gradient"
@@ -147,12 +148,23 @@ const twoPI = 2 * Math.PI;
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     trigger('animationState', [
+      transition(':enter', [
+        style({
+          opacity: 0
+        }),
+        animate(
+          '500ms 500ms',
+          style({
+            opacity: 0
+          })
+        )
+      ]),
       transition(':leave', [
         style({
-          opacity: 1
+          opacity: 0
         }),
         animate(
-          500,
+          '500ms',
           style({
             opacity: 0
           })

From 47c16ccd7bf1e79cabe51bb338acf0e98fc27037 Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Mon, 25 Mar 2024 18:02:06 +0800
Subject: [PATCH 12/15] fix: line chart toggle animation

---
 .../src/lib/line-chart/line-chart.component.ts  | 17 ++++++++---------
 .../src/lib/line-chart/line.component.ts        | 14 ++++++--------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
index 5cab78259..0cd8e1de5 100644
--- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
@@ -1,24 +1,23 @@
 import {
+  ChangeDetectionStrategy,
   Component,
-  Input,
-  Output,
+  ContentChild,
   EventEmitter,
-  ViewEncapsulation,
   HostListener,
-  ChangeDetectionStrategy,
-  ContentChild,
+  Input,
+  OnInit,
+  Output,
   TemplateRef,
-  OnInit
+  ViewEncapsulation
 } from '@angular/core';
-import { trigger, style, animate, transition } from '@angular/animations';
-import { scaleLinear, scaleTime, scalePoint } from 'd3-scale';
+import { scaleLinear, scalePoint, scaleTime } from 'd3-scale';
 import { curveLinear } from 'd3-shape';
 
 import { calculateViewDimensions } from '../common/view-dimensions.helper';
 import { ColorHelper } from '../common/color.helper';
 import { BaseChartComponent } from '../common/base-chart.component';
 import { id } from '../utils/id';
-import { getUniqueXDomainValues, getScaleType } from '../common/domain.helper';
+import { getScaleType, getUniqueXDomainValues } from '../common/domain.helper';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
index d5bc3ddcb..9eb975040 100644
--- a/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
@@ -1,17 +1,15 @@
 import {
+  ChangeDetectionStrategy,
   Component,
+  ElementRef,
+  Inject,
   Input,
-  Output,
-  EventEmitter,
   OnChanges,
-  ElementRef,
-  ChangeDetectionStrategy,
-  SimpleChanges,
+  OnInit,
   PLATFORM_ID,
-  Inject,
-  OnInit
+  SimpleChanges
 } from '@angular/core';
-import { trigger, style, animate, transition } from '@angular/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
 import { select } from 'd3-selection';
 import { Series } from '../models/chart-data.model';
 import { isPlatformServer } from '@angular/common';

From 216cc57936613a7e52de904340129ce40b099dbe Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Wed, 27 Mar 2024 11:19:39 +0800
Subject: [PATCH 13/15] fix: perform d3 animation during ng trigger animation

---
 .../src/lib/common/area.component.ts          | 36 ++++++++++++++++---
 .../src/lib/line-chart/line.component.ts      |  2 +-
 .../src/lib/pie-chart/pie-arc.component.ts    | 25 +++++++++----
 3 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/area.component.ts b/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
index 8e87ec010..5413b9e15 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
@@ -1,9 +1,12 @@
-import { Component, Input, Output, EventEmitter, ElementRef, OnChanges, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { select } from 'd3-selection';
 import { id } from '../utils/id';
 import { AreaChartSeries } from '../models/chart-data.model';
 import { BarOrientation } from './types/bar-orientation.enum';
 import { Gradient } from './types/gradient.interface';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { Platform } from '@angular/cdk/platform';
+import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'g[ngx-charts-area]',
@@ -16,9 +19,26 @@ import { Gradient } from './types/gradient.interface';
         [stops]="gradientStops"
       />
     </svg:defs>
-    <svg:path class="area" [attr.d]="areaPath" [attr.fill]="gradient ? gradientFill : fill" [style.opacity]="opacity" />
+    <svg:path
+      class="area"
+      @scaleToHidden
+      (@scaleToHidden.start)="onScaleToHidden($event)"
+      [attr.d]="areaPath"
+      [attr.fill]="gradient ? gradientFill : fill"
+      [style.opacity]="opacity"
+    />
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('scaleToHidden', [
+      transition(':leave', [
+        style({
+          opacity: '1'
+        }),
+        animate('750ms', style({ opacity: '1' }))
+      ])
+    ])
+  ]
 })
 export class AreaComponent implements OnChanges {
   @Input() data: AreaChartSeries;
@@ -44,7 +64,7 @@ export class AreaComponent implements OnChanges {
 
   barOrientation = BarOrientation;
 
-  constructor(element: ElementRef) {
+  constructor(element: ElementRef, private platformId: Platform) {
     this.element = element.nativeElement;
   }
 
@@ -86,6 +106,14 @@ export class AreaComponent implements OnChanges {
     }
   }
 
+  onScaleToHidden(event): void {
+    if (isPlatformServer(this.platformId)) return;
+    if (!event.fromState && event.toState === 'void') {
+      const node = select(this.element).select('.area');
+      node.transition().duration(750).attr('d', this.startingPath);
+    }
+  }
+
   getGradient(): Gradient[] {
     if (this.stops) {
       return this.stops;
diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
index 9eb975040..492c4ff59 100644
--- a/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
@@ -40,7 +40,7 @@ import { isPlatformServer } from '@angular/common';
           strokeDashoffset: 2000
         }),
         animate(
-          '800ms 300ms',
+          '800ms 500ms',
           style({
             strokeDashoffset: 0
           })
diff --git a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
index 8de464efd..0d6cdf9bb 100644
--- a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
@@ -1,12 +1,12 @@
 import {
+  ChangeDetectionStrategy,
   Component,
-  Input,
-  Output,
-  EventEmitter,
   ElementRef,
-  SimpleChanges,
+  EventEmitter,
+  Input,
   OnChanges,
-  ChangeDetectionStrategy
+  Output,
+  SimpleChanges
 } from '@angular/core';
 import { interpolate } from 'd3-interpolate';
 import { select } from 'd3-selection';
@@ -14,11 +14,17 @@ import { arc } from 'd3-shape';
 import { id } from '../utils/id';
 import { DataItem } from '../models/chart-data.model';
 import { BarOrientation } from '../common/types/bar-orientation.enum';
+import { animate, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'g[ngx-charts-pie-arc]',
   template: `
-    <svg:g class="arc-group">
+    <svg:g
+      class="arc-group"
+      @leaveAnimation
+      (@leaveAnimation.start)="test($event)"
+      (@leaveAnimation.done)="test($event)"
+    >
       <svg:defs *ngIf="gradient">
         <svg:g ngx-charts-svg-radial-gradient [color]="fill" [name]="radialGradientId" [startOpacity]="startOpacity" />
       </svg:defs>
@@ -35,9 +41,14 @@ import { BarOrientation } from '../common/types/bar-orientation.enum';
       />
     </svg:g>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [trigger('leaveAnimation', [transition(':leave', [animate('750ms')])])]
 })
 export class PieArcComponent implements OnChanges {
+  test(e) {
+    if (e.fromState || e.toState !== 'void') return;
+    console.log(e);
+  }
   @Input() fill: string;
   @Input() startAngle: number = 0;
   @Input() endAngle: number = Math.PI * 2;

From 6651a249246777ac04c89fe00268506525a4f18f Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Sat, 30 Mar 2024 20:33:05 +0800
Subject: [PATCH 14/15] fix: pie arc animation

---
 .../src/lib/common/area.component.ts          |  6 +--
 .../legend/advanced-legend.component.ts       | 37 ++++++++++++++++++-
 .../src/lib/pie-chart/pie-arc.component.ts    | 37 +++++++++++++------
 .../src/lib/pie-chart/pie-label.component.ts  | 33 ++++++++++++++---
 4 files changed, 91 insertions(+), 22 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/area.component.ts b/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
index 5413b9e15..f7efaf487 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
@@ -5,8 +5,6 @@ import { AreaChartSeries } from '../models/chart-data.model';
 import { BarOrientation } from './types/bar-orientation.enum';
 import { Gradient } from './types/gradient.interface';
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Platform } from '@angular/cdk/platform';
-import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'g[ngx-charts-area]',
@@ -64,7 +62,7 @@ export class AreaComponent implements OnChanges {
 
   barOrientation = BarOrientation;
 
-  constructor(element: ElementRef, private platformId: Platform) {
+  constructor(element: ElementRef) {
     this.element = element.nativeElement;
   }
 
@@ -107,7 +105,7 @@ export class AreaComponent implements OnChanges {
   }
 
   onScaleToHidden(event): void {
-    if (isPlatformServer(this.platformId)) return;
+    if (!this.animations) return;
     if (!event.fromState && event.toState === 'void') {
       const node = select(this.element).select('.area');
       node.transition().duration(750).attr('d', this.startingPath);
diff --git a/projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.ts b/projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.ts
index 6b17af9f4..0be7a3b65 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.ts
@@ -1,5 +1,6 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
@@ -12,6 +13,7 @@ import { trimLabel } from '../trim-label.helper';
 import { formatLabel } from '../label.helper';
 import { DataItem, StringOrNumberOrDate } from '../../models/chart-data.model';
 import { ColorHelper } from '../color.helper';
+import { animate, transition, trigger } from '@angular/animations';
 
 export interface AdvancedLegendItem {
   value: StringOrNumberOrDate;
@@ -27,7 +29,7 @@ export interface AdvancedLegendItem {
 @Component({
   selector: 'ngx-charts-advanced-legend',
   template: `
-    <div class="advanced-pie-legend" [style.width.px]="width">
+    <div class="advanced-pie-legend" [style.width.px]="width" @leaveAnimation (@leaveAnimation.start)="test($event)">
       <div
         *ngIf="animations"
         class="total-value"
@@ -78,9 +80,37 @@ export interface AdvancedLegendItem {
   `,
   styleUrls: ['./advanced-legend.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [trigger('leaveAnimation', [transition(':leave', [animate(1000)])])]
 })
 export class AdvancedLegendComponent implements OnChanges {
+  test(event) {
+    if (event.fromState || event.toState !== 'void') return;
+    this.test2();
+  }
+  test2() {
+    console.log(`test2`);
+    this.legendItems = (this.data as any).map(d => {
+      d.value = 1;
+      const label = formatLabel(d.name);
+      const value = 1;
+      const color = this.colors.getColor(label);
+      const percentage = this.total > 0 ? (value / this.total) * 100 : 0;
+      const formattedLabel = typeof this.labelFormatting === 'function' ? this.labelFormatting(label) : label;
+
+      return {
+        _value: value,
+        data: d,
+        value,
+        color,
+        label: formattedLabel,
+        displayLabel: trimLabel(formattedLabel, 20),
+        origialLabel: d.name,
+        percentage: this.percentageFormatting ? this.percentageFormatting(percentage) : percentage.toLocaleString()
+      };
+    });
+    this.cdf.markForCheck();
+  }
   @Input() width: number;
   @Input() data: DataItem[];
   @Input() colors: ColorHelper;
@@ -101,6 +131,9 @@ export class AdvancedLegendComponent implements OnChanges {
 
   defaultValueFormatting: (value: StringOrNumberOrDate) => string = value => value.toLocaleString();
 
+  constructor(private cdf: ChangeDetectorRef) {
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     this.update();
   }
diff --git a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
index 0d6cdf9bb..edd05984b 100644
--- a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
@@ -19,12 +19,7 @@ import { animate, transition, trigger } from '@angular/animations';
 @Component({
   selector: 'g[ngx-charts-pie-arc]',
   template: `
-    <svg:g
-      class="arc-group"
-      @leaveAnimation
-      (@leaveAnimation.start)="test($event)"
-      (@leaveAnimation.done)="test($event)"
-    >
+    <svg:g class="arc-group" @leaveAnimation (@leaveAnimation.start)="onScaleToHidden($event)">
       <svg:defs *ngIf="gradient">
         <svg:g ngx-charts-svg-radial-gradient [color]="fill" [name]="radialGradientId" [startOpacity]="startOpacity" />
       </svg:defs>
@@ -42,13 +37,9 @@ import { animate, transition, trigger } from '@angular/animations';
     </svg:g>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [trigger('leaveAnimation', [transition(':leave', [animate('750ms')])])]
+  animations: [trigger('leaveAnimation', [transition(':leave', [animate(750)])])]
 })
 export class PieArcComponent implements OnChanges {
-  test(e) {
-    if (e.fromState || e.toState !== 'void') return;
-    console.log(e);
-  }
   @Input() fill: string;
   @Input() startAngle: number = 0;
   @Input() endAngle: number = Math.PI * 2;
@@ -123,6 +114,30 @@ export class PieArcComponent implements OnChanges {
     return arc().innerRadius(this.innerRadius).outerRadius(outerRadius).cornerRadius(this.cornerRadius);
   }
 
+  onScaleToHidden(event): void {
+    if (!this.animate) return;
+    if (event.fromState || event.toState !== 'void') return;
+
+    const node = select(this.element)
+      .selectAll('.arc')
+      .data([{ startAngle: this.startAngle, endAngle: this.startAngle }]);
+
+    const calc = this.calculateArc();
+
+    node
+      .transition()
+      .duration(750)
+      .attrTween('d', function (d) {
+        (<any>this)._current = (<any>this)._current || d;
+        const interpolater = interpolate((<any>this)._current, d);
+        (<any>this)._current = interpolater(0);
+        console.log((<any>this)._current);
+        return function (t) {
+          return calc(interpolater(t));
+        };
+      });
+  }
+
   loadAnimation(): void {
     const node = select(this.element)
       .selectAll('.arc')
diff --git a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-label.component.ts b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-label.component.ts
index 35951d973..d85f9e681 100644
--- a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-label.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-label.component.ts
@@ -1,18 +1,19 @@
 import { isPlatformServer } from '@angular/common';
 import {
+  ChangeDetectionStrategy,
   Component,
+  Inject,
   Input,
   OnChanges,
-  SimpleChanges,
-  ChangeDetectionStrategy,
   PLATFORM_ID,
-  Inject
+  SimpleChanges
 } from '@angular/core';
 import { arc, DefaultArcObject } from 'd3-shape';
 
 import { trimLabel } from '../common/trim-label.helper';
 import { TextAnchor } from '../common/types/text-anchor.enum';
 import { DataItem } from '../models/chart-data.model';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 export interface PieData extends DefaultArcObject {
   data: DataItem;
@@ -25,7 +26,12 @@ export interface PieData extends DefaultArcObject {
   selector: 'g[ngx-charts-pie-label]',
   template: `
     <title>{{ label }}</title>
-    <svg:g [attr.transform]="attrTransform" [style.transform]="styleTransform" [style.transition]="textTransition">
+    <svg:g
+      [attr.transform]="attrTransform"
+      [style.transform]="styleTransform"
+      [style.transition]="textTransition"
+      @toggleHide
+    >
       <svg:text
         class="pie-label"
         [class.animation]="animations"
@@ -37,6 +43,7 @@ export interface PieData extends DefaultArcObject {
       </svg:text>
     </svg:g>
     <svg:path
+      @toggleHide
       [attr.d]="line"
       [attr.stroke]="color"
       fill="none"
@@ -44,7 +51,23 @@ export interface PieData extends DefaultArcObject {
       [class.animation]="animations"
     ></svg:path>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('toggleHide', [
+      transition(':leave', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms', style({ opacity: '0' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('500ms 200ms', style({ opacity: '1' }))
+      ])
+    ])
+  ]
 })
 export class PieLabelComponent implements OnChanges {
   @Input() data: PieData;

From d1fd87e883fe43646ae18330a72b6b9f754823d1 Mon Sep 17 00:00:00 2001
From: Eric Moore <eric.gitta.moore@outlook.com>
Date: Sun, 31 Mar 2024 02:49:32 +0800
Subject: [PATCH 15/15] fix: fix and adjust animation time

---
 .../bar-vertical-normalized.component.ts      | 14 +----
 .../bar-vertical-stacked.component.ts         | 14 +----
 .../src/lib/bar-chart/bar.component.ts        | 25 ++++++--
 .../bar-chart/series-horizontal.component.ts  | 14 +----
 .../bar-chart/series-vertical.component.ts    | 14 +----
 .../src/lib/common/area.component.ts          | 18 ++++--
 .../src/lib/common/axes/x-axis.component.ts   |  2 +-
 .../src/lib/common/axes/y-axis.component.ts   |  2 +-
 .../src/lib/common/charts/chart.component.ts  |  2 +-
 .../src/lib/common/count/count.directive.ts   | 18 +++++-
 .../lib/common/grid-panel-series.component.ts |  2 +-
 .../legend/advanced-legend.component.ts       | 57 ++++++++-----------
 .../src/lib/line-chart/line.component.ts      |  9 +--
 .../src/lib/pie-chart/pie-arc.component.ts    | 21 ++++++-
 .../src/lib/pie-chart/pie-grid.component.ts   | 23 +++++++-
 .../lib/polar-chart/polar-chart.component.ts  |  8 +--
 16 files changed, 129 insertions(+), 114 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
index 36e3df634..5fdfab82e 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
@@ -69,7 +69,6 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
         <svg:g *ngIf="!isSSR">
           <svg:g
             *ngFor="let group of results; trackBy: trackBy"
-            [@animationState]="'active'"
             [attr.transform]="groupTransform(group)"
           >
             <svg:g
@@ -121,18 +120,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   `,
   styleUrls: ['../common/base-chart.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('animationState', [
-      transition(':leave', [
-        style({
-          opacity: 1,
-          transform: '*'
-        }),
-        animate(500, style({ opacity: 0, transform: 'scale(0)' }))
-      ])
-    ])
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BarVerticalNormalizedComponent extends BaseChartComponent {
   @Input() legend: boolean = false;
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
index 0ac95121c..edb7bfd12 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
@@ -70,7 +70,6 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
         <svg:g *ngIf="!isSSR">
           <svg:g
             *ngFor="let group of results; let index = index; trackBy: trackBy"
-            [@animationState]="'active'"
             [attr.transform]="groupTransform(group)"
           >
             <svg:g
@@ -131,18 +130,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   `,
   styleUrls: ['../common/base-chart.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('animationState', [
-      transition(':leave', [
-        style({
-          opacity: 1,
-          transform: '*'
-        }),
-        animate(500, style({ opacity: 0, transform: 'scale(0)' }))
-      ])
-    ])
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BarVerticalStackedComponent extends BaseChartComponent {
   @Input() legend: boolean = false;
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
index 51b9bdf9e..d9c1297e1 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts
@@ -21,7 +21,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
 @Component({
   selector: 'g[ngx-charts-bar]',
   template: `
-    <svg:defs *ngIf="hasGradient">
+    <svg:defs *ngIf="hasGradient" @toggleAniamtion>
       <svg:g ngx-charts-svg-linear-gradient [orientation]="orientation" [name]="gradientId" [stops]="gradientStops" />
     </svg:defs>
     <svg:path
@@ -29,7 +29,8 @@ import { animate, style, transition, trigger } from '@angular/animations';
       stroke="none"
       role="img"
       tabIndex="-1"
-      @enterAnimation
+      @toggleAniamtion
+      (@toggleAniamtion.start)="onLeaveAnimation($event)"
       [class.active]="isActive"
       [class.hidden]="hideBar"
       [attr.d]="path"
@@ -40,14 +41,20 @@ import { animate, style, transition, trigger } from '@angular/animations';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('enterAnimation', [
+    trigger('toggleAniamtion', [
       transition(':enter', [
         style({
           opacity: 0
         }),
         animate('500ms 600ms ease-in', style({ opacity: 1 }))
+      ]),
+      transition(':leave', [
+        style({
+          opacity: 1
+        }),
+        animate('500ms', style({ opacity: 0 }))
       ])
-    ]),
+    ])
   ]
 })
 export class BarComponent implements OnChanges {
@@ -124,6 +131,16 @@ export class BarComponent implements OnChanges {
     this.update();
   }
 
+  onLeaveAnimation(event) {
+    if (event.fromState && event.toState !== 'void') return;
+    this.loadBackOffAnimation();
+  }
+
+  loadBackOffAnimation(): void {
+    const node = select(this.element).select('.bar');
+    node.transition().duration(500).attr('d', this.getStartingPath());
+  }
+
   updatePathEl(): void {
     const node = select(this.element).select('.bar');
     const path = this.getPath();
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-horizontal.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-horizontal.component.ts
index bcc698069..645f2c736 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-horizontal.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-horizontal.component.ts
@@ -27,7 +27,6 @@ import { ScaleType } from '../common/types/scale-type.enum';
     <svg:g
       ngx-charts-bar
       *ngFor="let bar of bars; trackBy: trackBy"
-      @scaleToHidden
       [width]="bar.width"
       [height]="bar.height"
       [x]="bar.x"
@@ -68,18 +67,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
       />
     </svg:g>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('scaleToHidden', [
-      transition(':leave', [
-        style({
-          transformOrigin: 'left',
-          opacity: '1'
-        }),
-        animate('500ms ease-out', style({ transform: 'scaleX(0)', opacity: '0' }))
-      ])
-    ])
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SeriesHorizontal implements OnChanges {
   @Input() dims: ViewDimensions;
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
index ea13f4158..e44cd408a 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/series-vertical.component.ts
@@ -30,7 +30,6 @@ import { isPlatformServer } from '@angular/common';
       <svg:g
         ngx-charts-bar
         *ngFor="let bar of bars; trackBy: trackBy"
-        @scaleToHidden
         [@.disabled]="!animations"
         [width]="bar.width"
         [height]="bar.height"
@@ -103,18 +102,7 @@ import { isPlatformServer } from '@angular/common';
       />
     </svg:g>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('scaleToHidden', [
-      transition(':leave', [
-        style({
-          transformOrigin: 'center',
-          opacity: '1'
-        }),
-        animate('500ms ease-out', style({ transform: 'scaleY(0)', opacity: '0' }))
-      ])
-    ])
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SeriesVerticalComponent implements OnChanges {
   @Input() dims: ViewDimensions;
diff --git a/projects/swimlane/ngx-charts/src/lib/common/area.component.ts b/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
index f7efaf487..5deb2ed5a 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/area.component.ts
@@ -19,8 +19,8 @@ import { animate, style, transition, trigger } from '@angular/animations';
     </svg:defs>
     <svg:path
       class="area"
-      @scaleToHidden
-      (@scaleToHidden.start)="onScaleToHidden($event)"
+      @toggleAnimation
+      (@toggleAnimation.start)="onToggle($event)"
       [attr.d]="areaPath"
       [attr.fill]="gradient ? gradientFill : fill"
       [style.opacity]="opacity"
@@ -28,12 +28,18 @@ import { animate, style, transition, trigger } from '@angular/animations';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('scaleToHidden', [
+    trigger('toggleAnimation', [
       transition(':leave', [
         style({
           opacity: '1'
         }),
         animate('750ms', style({ opacity: '1' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('750ms 400ms', style({ opacity: '1' }))
       ])
     ])
   ]
@@ -98,13 +104,15 @@ export class AreaComponent implements OnChanges {
     const node = select(this.element).select('.area');
 
     if (this.animations) {
-      node.transition().duration(750).attr('d', this.path);
+      setTimeout(() => {
+        node.transition().duration(750).attr('d', this.path);
+      }, 400);
     } else {
       node.attr('d', this.path);
     }
   }
 
-  onScaleToHidden(event): void {
+  onToggle(event): void {
     if (!this.animations) return;
     if (!event.fromState && event.toState === 'void') {
       const node = select(this.element).select('.area');
diff --git a/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts b/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
index 3d674474c..feb1c6075 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts
@@ -62,7 +62,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
         style({
           opacity: '0'
         }),
-        animate('500ms 200ms', style({ opacity: '1' }))
+        animate('500ms 300ms', style({ opacity: '1' }))
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/common/axes/y-axis.component.ts b/projects/swimlane/ngx-charts/src/lib/common/axes/y-axis.component.ts
index fd94b7639..08bae3a31 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/axes/y-axis.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/axes/y-axis.component.ts
@@ -64,7 +64,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
         style({
           opacity: '0'
         }),
-        animate('500ms 200ms', style({ opacity: '1' }))
+        animate('500ms 300ms', style({ opacity: '1' }))
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/common/charts/chart.component.ts b/projects/swimlane/ngx-charts/src/lib/common/charts/chart.component.ts
index d68db40b2..45d3675be 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/charts/chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/charts/chart.component.ts
@@ -62,7 +62,7 @@ import {animate, style, transition, trigger} from "@angular/animations";
         style({
           opacity: '0'
         }),
-        animate('500ms 200ms', style({ opacity: '1' }))
+        animate('500ms 300ms', style({ opacity: '1' }))
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/common/count/count.directive.ts b/projects/swimlane/ngx-charts/src/lib/common/count/count.directive.ts
index c93410473..82d5ce6b9 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/count/count.directive.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/count/count.directive.ts
@@ -1,4 +1,14 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectorRef, OnDestroy, ElementRef } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges
+} from '@angular/core';
 import { count, decimalChecker } from './count.helper';
 
 /**
@@ -14,7 +24,7 @@ import { count, decimalChecker } from './count.helper';
   selector: '[ngx-charts-count-up]',
   template: ` {{ value }} `
 })
-export class CountUpDirective implements OnDestroy {
+export class CountUpDirective implements OnDestroy, OnChanges {
   @Input() countDuration: number = 1;
   @Input() countPrefix: string = '';
   @Input() countSuffix: string = '';
@@ -87,4 +97,8 @@ export class CountUpDirective implements OnDestroy {
 
     this.animationReq = count(this.countFrom, this.countTo, this.countDecimals, this.countDuration, callback);
   }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(`ngOnChanges`, changes);
+  }
 }
diff --git a/projects/swimlane/ngx-charts/src/lib/common/grid-panel-series.component.ts b/projects/swimlane/ngx-charts/src/lib/common/grid-panel-series.component.ts
index 286da7a53..8ae7d7b36 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/grid-panel-series.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/grid-panel-series.component.ts
@@ -46,7 +46,7 @@ enum ClassEnum {
         style({
           opacity: '0'
         }),
-        animate('500ms 200ms', style({ opacity: '1' }))
+        animate('500ms 300ms', style({ opacity: '1' }))
       ])
     ])
   ]
diff --git a/projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.ts b/projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.ts
index 0be7a3b65..a6ee50edf 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.ts
@@ -1,6 +1,5 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
@@ -13,7 +12,7 @@ import { trimLabel } from '../trim-label.helper';
 import { formatLabel } from '../label.helper';
 import { DataItem, StringOrNumberOrDate } from '../../models/chart-data.model';
 import { ColorHelper } from '../color.helper';
-import { animate, transition, trigger } from '@angular/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 export interface AdvancedLegendItem {
   value: StringOrNumberOrDate;
@@ -29,7 +28,7 @@ export interface AdvancedLegendItem {
 @Component({
   selector: 'ngx-charts-advanced-legend',
   template: `
-    <div class="advanced-pie-legend" [style.width.px]="width" @leaveAnimation (@leaveAnimation.start)="test($event)">
+    <div class="advanced-pie-legend" [style.width.px]="width" @toggleAnimation>
       <div
         *ngIf="animations"
         class="total-value"
@@ -81,36 +80,29 @@ export interface AdvancedLegendItem {
   styleUrls: ['./advanced-legend.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [trigger('leaveAnimation', [transition(':leave', [animate(1000)])])]
+  animations: [
+    trigger('toggleAnimation', [
+      transition(':leave', [
+        style({
+          opacity: '1'
+        }),
+        animate(
+          '750ms',
+          style({
+            opacity: '0'
+          })
+        )
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('750ms 400ms', style({ opacity: 1 }))
+      ])
+    ])
+  ]
 })
 export class AdvancedLegendComponent implements OnChanges {
-  test(event) {
-    if (event.fromState || event.toState !== 'void') return;
-    this.test2();
-  }
-  test2() {
-    console.log(`test2`);
-    this.legendItems = (this.data as any).map(d => {
-      d.value = 1;
-      const label = formatLabel(d.name);
-      const value = 1;
-      const color = this.colors.getColor(label);
-      const percentage = this.total > 0 ? (value / this.total) * 100 : 0;
-      const formattedLabel = typeof this.labelFormatting === 'function' ? this.labelFormatting(label) : label;
-
-      return {
-        _value: value,
-        data: d,
-        value,
-        color,
-        label: formattedLabel,
-        displayLabel: trimLabel(formattedLabel, 20),
-        origialLabel: d.name,
-        percentage: this.percentageFormatting ? this.percentageFormatting(percentage) : percentage.toLocaleString()
-      };
-    });
-    this.cdf.markForCheck();
-  }
   @Input() width: number;
   @Input() data: DataItem[];
   @Input() colors: ColorHelper;
@@ -131,9 +123,6 @@ export class AdvancedLegendComponent implements OnChanges {
 
   defaultValueFormatting: (value: StringOrNumberOrDate) => string = value => value.toLocaleString();
 
-  constructor(private cdf: ChangeDetectorRef) {
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     this.update();
   }
diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
index 492c4ff59..af3548051 100644
--- a/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line.component.ts
@@ -37,25 +37,26 @@ import { isPlatformServer } from '@angular/common';
       transition(':enter', [
         style({
           strokeDasharray: 2000,
-          strokeDashoffset: 2000
+          strokeDashoffset: 2000,
         }),
         animate(
           '800ms 500ms',
           style({
-            strokeDashoffset: 0
+            strokeDasharray: 2000,
+            strokeDashoffset: 0,
           })
         )
       ]),
       transition(':leave', [
         style({
           strokeDasharray: 2000,
-          strokeDashoffset: 0
+          strokeDashoffset: 0,
         }),
         animate(
           '800ms',
           style({
             strokeDasharray: 2000,
-            strokeDashoffset: -2000
+            strokeDashoffset: -2000,
           })
         )
       ])
diff --git a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
index edd05984b..e3abcf074 100644
--- a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-arc.component.ts
@@ -14,12 +14,12 @@ import { arc } from 'd3-shape';
 import { id } from '../utils/id';
 import { DataItem } from '../models/chart-data.model';
 import { BarOrientation } from '../common/types/bar-orientation.enum';
-import { animate, transition, trigger } from '@angular/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'g[ngx-charts-pie-arc]',
   template: `
-    <svg:g class="arc-group" @leaveAnimation (@leaveAnimation.start)="onScaleToHidden($event)">
+    <svg:g class="arc-group" @toggleAnimation (@toggleAnimation.start)="onScaleToHidden($event)">
       <svg:defs *ngIf="gradient">
         <svg:g ngx-charts-svg-radial-gradient [color]="fill" [name]="radialGradientId" [startOpacity]="startOpacity" />
       </svg:defs>
@@ -37,7 +37,22 @@ import { animate, transition, trigger } from '@angular/animations';
     </svg:g>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [trigger('leaveAnimation', [transition(':leave', [animate(750)])])]
+  animations: [
+    trigger('toggleAnimation', [
+      transition(':leave', [
+        style({
+          opacity: 1
+        }),
+        animate('750ms', style({ opacity: 0 }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: 0
+        }),
+        animate('750ms 400ms', style({ opacity: 1 }))
+      ])
+    ])
+  ]
 })
 export class PieArcComponent implements OnChanges {
   @Input() fill: string;
diff --git a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-grid.component.ts b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-grid.component.ts
index 2f8bcb686..74d4dece1 100644
--- a/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-grid.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/pie-chart/pie-grid.component.ts
@@ -22,6 +22,7 @@ import { PlacementTypes } from '../common/tooltip/position';
 import { StyleTypes } from '../common/tooltip/style.type';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
 import { ScaleType } from '../common/types/scale-type.enum';
+import {animate, style, transition, trigger} from "@angular/animations";
 
 @Component({
   selector: 'ngx-charts-pie-grid',
@@ -50,6 +51,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
           <svg:text
             *ngIf="animations"
             class="label percent-label"
+            @toggleHide
             dy="-0.5em"
             x="0"
             y="5"
@@ -61,12 +63,13 @@ import { ScaleType } from '../common/types/scale-type.enum';
           <svg:text *ngIf="!animations" class="label percent-label" dy="-0.5em" x="0" y="5" text-anchor="middle">
             {{ series.percent.toLocaleString() }}
           </svg:text>
-          <svg:text class="label" dy="0.5em" x="0" y="5" text-anchor="middle">
+          <svg:text class="label" dy="0.5em" x="0" y="5" text-anchor="middle" @toggleHide>
             {{ series.label }}
           </svg:text>
           <svg:text
             *ngIf="animations"
             class="label"
+            @toggleHide
             dy="1.23em"
             x="0"
             [attr.y]="series.outerRadius"
@@ -91,7 +94,23 @@ import { ScaleType } from '../common/types/scale-type.enum';
   `,
   styleUrls: ['../common/base-chart.component.scss', './pie-grid.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('toggleHide', [
+      transition(':leave', [
+        style({
+          opacity: '1'
+        }),
+        animate('750ms ease-out', style({ opacity: '0' }))
+      ]),
+      transition(':enter', [
+        style({
+          opacity: '0'
+        }),
+        animate('750ms 400ms', style({ opacity: '1' }))
+      ])
+    ])
+  ]
 })
 export class PieGridComponent extends BaseChartComponent {
   @Input() designatedTotal: number;
diff --git a/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
index ac84a8cb6..6ce0fa908 100644
--- a/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts
@@ -153,18 +153,18 @@ const twoPI = 2 * Math.PI;
           opacity: 0
         }),
         animate(
-          '500ms 500ms',
+          '800ms 1000ms',
           style({
-            opacity: 0
+            opacity: 1
           })
         )
       ]),
       transition(':leave', [
         style({
-          opacity: 0
+          opacity: 1
         }),
         animate(
-          '500ms',
+          '700ms',
           style({
             opacity: 0
           })