feat(delta): add support for custom templates and absolute value

hjalmers · Nov 8, 2022 · 7db47ed · 7db47ed
1 parent 5a8cbcf
commit 7db47ed
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 41 deletions.
diff --git a/projects/core/src/lib/gt-delta/gt-delta.component.ts b/projects/core/src/lib/gt-delta/gt-delta.component.ts
@@ -1,42 +1,41 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core';
 import { TableRow } from '../models/table-row.interface';
-import { NgIf, PercentPipe } from '@angular/common';
+import { NgIf, NgTemplateOutlet, PercentPipe } from '@angular/common';
 
+export interface GtDelta {
+  relative: number | string;
+  absolute: number;
+}
 @Component({
   selector: 'gt-delta',
   template: `<span
-    *ngIf="{
-      value:
-        index === 0
-          ? initialValue
-          : ((baseIndex === undefined
-              ? data[index - 1][key]
-              : data[baseIndex][key]) -
-              data[index][key]) /
-            -Math.abs(
-              baseIndex === undefined
-                ? data[index - 1][key]
-                : data[baseIndex][key]
-            )
-    } as delta"
-    [class]="[
-      classes.span,
-      !delta.value || !Number.isFinite(delta.value)
-        ? null
-        : delta.value > 0
-        ? classes.positive
-        : classes.negative
-    ]"
-    [class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
-    [class.gt-delta-negative]="delta.value < 0"
-    >{{
-      Number.isFinite(delta.value)
-        ? (delta.value | percent)
-        : delta.value === initialValue
-        ? initialValue
-        : notApplicableValue
-    }}</span
-  >`,
+      *ngIf="value as delta"
+      [class]="[
+        classes.span,
+        delta.absolute > 0
+          ? classes.positive
+          : delta.absolute < 0
+          ? classes.negative
+          : null
+      ]"
+      [class.gt-delta-positive]="delta.absolute > 0"
+      [class.gt-delta-negative]="delta.absolute < 0"
+      ><ng-container
+        *ngTemplateOutlet="deltaTemplate || defaultTemplate; context: { delta }"
+      ></ng-container>
+    </span>
+    <ng-template #defaultTemplate let-delta="delta">
+      <span *ngIf="delta.relative">{{
+        delta.relative | percent: '1.0-2'
+      }}</span>
+    </ng-template>`,
   styles: [
     `
       :host {
@@ -46,10 +45,23 @@ import { NgIf, PercentPipe } from '@angular/common';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [PercentPipe, NgIf],
+  imports: [PercentPipe, NgIf, NgTemplateOutlet],
 })
-export class GtDeltaComponent {
+export class GtDeltaComponent implements OnChanges {
+  get value() {
+    return this._value;
+  }
+
+  set value(value) {
+    this._value = value;
+  }
+  get deltaTemplate(): TemplateRef<any> {
+    return this._deltaTemplate;
+  }
   constructor() {}
+  @Input() set deltaTemplate(deltaTemplate: TemplateRef<any>) {
+    this._deltaTemplate = deltaTemplate;
+  }
   Math = Math;
   Number = Number;
   @Input() data: Array<TableRow> = [];
@@ -61,6 +73,47 @@ export class GtDeltaComponent {
     negative: 'text-danger',
   };
   @Input() key: string = 'value';
-  @Input() notApplicableValue: string = 'n/a';
-  @Input() initialValue: string = '-';
+  @Input() notApplicableValue: string | null = null;
+  @Input() initialValue: string | number | null = null;
+  private _value?: GtDelta;
+  private _deltaTemplate?: any;
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes.data.currentValue) {
+      return;
+    }
+    const data = changes.data?.currentValue;
+    const index = changes.index?.currentValue || this.index;
+    const baseIndex = changes.baseIndex?.currentValue;
+    const key = changes.key?.currentValue || this.key;
+    const initialValue =
+      changes.initialValue?.currentValue || this.initialValue;
+
+    const deltaValue =
+      index === 0
+        ? initialValue
+        : data[index][key] -
+          (baseIndex === undefined
+            ? data[index - 1][key]
+            : data[baseIndex][key]);
+    const baseValue =
+      index === 0
+        ? 1
+        : baseIndex === undefined
+        ? data[index - 1][key]
+        : data[baseIndex][key];
+
+    const relative =
+      index === 0
+        ? initialValue
+        : Math.sign(deltaValue) * Math.abs(deltaValue / baseValue);
+
+    this.value = {
+      relative: Number.isFinite(relative)
+        ? relative
+        : index === 0
+        ? initialValue
+        : changes.notApplicableValue?.currentValue || this.notApplicableValue,
+      absolute: deltaValue,
+    };
+  }
 }
diff --git a/projects/core/src/lib/scss/index.scss b/projects/core/src/lib/scss/index.scss
@@ -234,9 +234,12 @@ $skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2
 @mixin delta-style() {
   .gt-delta {
     display: flex;
-    &.gt-delta-positive::before {
-      display: block;
-      content: $delta-positive-prefix;
+    &.gt-delta-positive > span {
+      display: inline-flex;
+      &::before {
+        display: block;
+        content: $delta-positive-prefix;
+      }
     }
   }
 }