fix OO-31815 - kpi empty state

solarwinds · Aug 2, 2024 · 9588202 · 9588202
1 parent e4efe53
commit 9588202
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 8 deletions.
diff --git a/packages/dashboards/src/lib/components/kpi-widget/kpi.component.html b/packages/dashboards/src/lib/components/kpi-widget/kpi.component.html
@@ -19,11 +19,7 @@
         [ngStyle]="{
             'background-color': backgroundColor || widgetData?.backgroundColor
         }"
-    >
-        <div *ngIf="isEmpty" class="is-empty">
-            <nui-image image="no-data-to-show"></nui-image>
-        </div>
-    </div>
+    ></div>
     <div
         class="nui-kpi-indicator__text"
         [ngStyle]="{
@@ -100,13 +96,16 @@
         [style.font-size]="widgetData?.fontSize"
         [title]="widgetData?.value"
     >
+        <div *ngIf="showEmpty" class="is-empty">
+            <nui-image image="no-data-to-show"></nui-image>
+        </div>
         <span
             nuiZoomContent
             [useZoom]="false"
             [scaleIN$]="getScaleBroker('value')?.out$"
             [scaleOUT$]="getScaleBroker('value')?.in$"
         >
-            {{ widgetData?.value }}</span
+            {{ showEmpty ? "" : widgetData?.value }}</span
         >
     </div>
 </ng-template>
diff --git a/packages/dashboards/src/lib/components/kpi-widget/kpi.component.spec.ts b/packages/dashboards/src/lib/components/kpi-widget/kpi.component.spec.ts
@@ -106,6 +106,70 @@ describe("KpiComponent", () => {
         expect(component).toBeTruthy();
     });
 
+    describe("isEmpty", () => {
+        it("should return true when widgetData is null", () => {
+            // @ts-ignore: TypeScript error ignored for testing purposes
+            component.widgetData = null;
+            expect(component.showEmpty).toBeTrue();
+        });
+
+        it("should return true when widgetData is undefined", () => {
+            // @ts-ignore: TypeScript error ignored for testing purposes
+            component.widgetData = undefined;
+            expect(component.showEmpty).toBeTrue();
+        });
+
+        it("should return true when widgetData.value is null", () => {
+            component.widgetData = { value: null };
+            expect(component.showEmpty).toBeTrue();
+        });
+
+        it("should return true when widgetData.value is undefined", () => {
+            component.widgetData = { value: undefined };
+            expect(component.showEmpty).toBeTrue();
+        });
+
+        it("should return false when widgetData.value is false", () => {
+            component.widgetData = { value: false };
+            expect(component.showEmpty).toBeFalse();
+        });
+
+        it("should return false when widgetData.value is true", () => {
+            component.widgetData = { value: true };
+            expect(component.showEmpty).toBeFalse();
+        });
+
+        it("should return true when widgetData.value is []", () => {
+            component.widgetData = { value: [] };
+            expect(component.showEmpty).toBeTrue();
+        });
+
+        it("should return false when widgetData.value is non empty array", () => {
+            component.widgetData = { value: [21, 25] };
+            expect(component.showEmpty).toBeFalse();
+        });
+
+        it("should return true when widgetData.value is empty string", () => {
+            component.widgetData = { value: "" };
+            expect(component.showEmpty).toBeTrue();
+        });
+
+        it("should return false when widgetData.value is some string", () => {
+            component.widgetData = { value: "some string" };
+            expect(component.showEmpty).toBeFalse();
+        });
+
+        it("should return false when widgetData.value is 0", () => {
+            component.widgetData = { value: 0 };
+            expect(component.showEmpty).toBeFalse();
+        });
+
+        it("should return false when widgetData.value is a non-zero value", () => {
+            component.widgetData = { value: 10 };
+            expect(component.showEmpty).toBeFalse();
+        });
+    });
+
     describe("interactive", () => {
         it("is interactive when datasource is interactive with data", () => {
             expect(component.interactive).toBeFalsy();

diff --git a/packages/dashboards/src/lib/components/kpi-widget/kpi.component.ts b/packages/dashboards/src/lib/components/kpi-widget/kpi.component.ts
@@ -134,8 +134,19 @@ export class KpiComponent implements IHasChangeDetector, OnChanges {
         }
     }
 
-    public get isEmpty(): boolean {
-        return !this.widgetData?.value;
+    public get showEmpty(): boolean {
+        if (typeof this.widgetData?.value === "boolean") {
+            return false;
+        }
+
+        if (
+            Array.isArray(this.widgetData?.value) &&
+            this.widgetData?.value.length === 0
+        ) {
+            return true;
+        }
+
+        return !this.widgetData?.value && this.widgetData?.value !== 0;
     }
 
     /**