diff --git a/packages/dashboards/src/lib/components/kpi-widget/kpi.component.html b/packages/dashboards/src/lib/components/kpi-widget/kpi.component.html
index 1a37ecfa8..1e71a3fd6 100644
--- 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
}"
- >
-
-
-
-
+ >
+
+
+
- {{ widgetData?.value }}
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
index febbf2a26..7a43ca643 100644
--- 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
index 71aafe66d..23110956f 100644
--- 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;
}
/**