Format and transition numbers

CentreForDigitalHumanities · Sep 27, 2024 · aa3bcb9 · aa3bcb9
1 parent 903e69a
commit aa3bcb9
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 39 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -36,6 +36,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "balloon-css": "^0.5.2",
+    "bezier-easing": "^2.1.0",
     "bulma": "^0.5.1",
     "bulma-switch": "^2.0.0",
     "chart.js": "^4.4.2",

diff --git a/frontend/src/app/filter/range-filter/range-filter.component.html b/frontend/src/app/filter/range-filter/range-filter.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="min !== undefined && max !== undefined">
     <div class="range" *ngIf="(filter?.state$ | async).data as data">
-        <span>{{data.min}} - {{data.max}}</span>
+        <span>{{data.min | transitionNumbers}} - {{data.max | transitionNumbers}}</span>
         <p-slider [animate]="true" [ngModel]="[data.min, data.max]"
             [range]="true" [min]="min" [max]="max"
             (onChange)="sliderValue$.next($event.values)"></p-slider>

diff --git a/frontend/src/app/search/search-results.component.html b/frontend/src/app/search/search-results.component.html
@@ -1,13 +1,12 @@
 <ng-container *ngIf="pageResults?.result$ | async as page; else noResult">
     <div class="level">
-        <h2 class="subtitle" *ngIf="page.total <= 5">
-            {page.total, plural, =1 {1 hit} other {{{page.total}} hits}}
-        </h2>
-        <h2 class="subtitle" *ngIf="page.total > 5">
-            {{page.total}} results.
-            Showing results {{pageResults.from$ | async}}
+        <h2 class="subtitle">
+            {page.total, plural, =1 {1 result} other {{{page.total | transitionNumbers}} results}}
+            @if (page.total > 5) {
+            Showing results {{pageResults.from$ | async | transitionNumbers}}
             -
-            {{(pageResults.to$ | async)}}
+            {{(pageResults.to$ | async | transitionNumbers)}}
+            }
         </h2>
         <ia-highlight-selector *ngIf="!pageResults.highlightDisabled" [pageResults]="pageResults"></ia-highlight-selector>
     </div>

diff --git a/frontend/src/app/shared/pipes/transition-numbers.pipe.ts b/frontend/src/app/shared/pipes/transition-numbers.pipe.ts
@@ -0,0 +1,66 @@
+import { ChangeDetectorRef, Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
+import { formatNumber } from '@angular/common';
+import { animationFrames, map, takeWhile, endWith, Subscription, Observable } from 'rxjs';
+import bezier from 'bezier-easing';
+
+const animationTime = 200; // ms
+const easing = bezier(0.00, 0.67, 0.41, 1);
+
+@Pipe({
+    name: 'transitionNumbers',
+    pure: false,
+    standalone: true
+})
+export class TransitionNumbersPipe implements PipeTransform {
+    private current = 0;
+    private target = 0;
+    private subscription: Subscription = undefined;
+
+    constructor(private ref: ChangeDetectorRef, @Inject(LOCALE_ID) private locale: string) {
+    }
+
+    /**
+     * Transforms a number to smoothly transition between values.
+     */
+    transform(value?: number, transitionBackwards = true) {
+        if (value === undefined || value === null) {
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+                delete this.subscription;
+            }
+            return '';
+        }
+
+        if (this.target !== value) {
+            this.subscription?.unsubscribe();
+            this.target = value;
+
+            if (this.current == 0 || !transitionBackwards && this.current > this.target) {
+                // don't animate the first jump after loading
+                // jumping backwards?
+                // (query was updated, don't animate this jump either)
+                this.current = this.target;
+            } else {
+                this.subscription = transitionValue(this.current, this.target, animationTime, this.target).subscribe(
+                    value => {
+                        this.current = Math.round(value);
+                        this.ref.markForCheck();
+                    }
+                );
+            }
+        }
+
+        return formatNumber(this.current, this.locale);
+    }
+}
+
+export function transitionValue<T = number>(start: number, end: number, duration: number, endWithOther?: T): Observable<number | T> {
+    const diff = end - start;
+    return animationFrames().pipe(
+        // from 0 to 1
+        map(({ elapsed }) => elapsed / duration),
+        takeWhile(v => v < 1),
+        endWith(endWithOther ?? end),
+        map(v => v === endWithOther ? endWithOther : easing(<number>v) * diff + start)
+    );
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
@@ -18,6 +18,7 @@ import { TabsComponent } from './tabs/tabs.component';
 import { ToggleComponent } from './toggle/toggle.component';
 import { SlugifyPipe } from './pipes/slugify.pipe';
 import { ToggleButtonDirective } from './toggle-button.directive';
+import { TransitionNumbersPipe } from './pipes/transition-numbers.pipe';
 
 @NgModule({
     declarations: [
@@ -56,6 +57,7 @@ import { ToggleButtonDirective } from './toggle-button.directive';
 
         // Shared pipes
         SlugifyPipe,
+        TransitionNumbersPipe
     ],
     imports: [
         BrowserAnimationsModule,
@@ -71,8 +73,9 @@ import { ToggleButtonDirective } from './toggle-button.directive';
             cookieName: 'csrftoken',
             headerName: 'X-CSRFToken',
         }),
-        RouterModule,
+        TransitionNumbersPipe,
+        RouterModule
     ],
     providers: [SlugifyPipe],
 })
-export class SharedModule {}
+export class SharedModule { }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -22,6 +22,7 @@
           "@utils/*": ["app/utils/*"],
           "@environments/*": ["environments/*"]
       },
-      "useDefineForClassFields": false
+      "useDefineForClassFields": false,
+      "allowSyntheticDefaultImports": true
   }
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -3143,6 +3143,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
+bezier-easing@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+  integrity sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -8138,16 +8143,7 @@ streamroller@^3.0.2:
     debug "^4.1.1"
     fs-extra "^10.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8197,14 +8193,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9271,7 +9260,7 @@ wildcard@^2.0.0:
   resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.1.tgz#5ab10d02487198954836b6349f74fff961e10f67"
   integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -9289,15 +9278,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"