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; } /**