Added new warning icon for missing data

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.1.0.0
+### New feature
+* Add new option "Data Gaps" to detect missing days in time-series data and display a warning icon when gaps are found.
+* Add Data Gaps controls to toggle the icon, adjust its colors, and set a custom message.
+
 ## 3.0.1.0
 ### Fixes
 * Add bold, italic and underline to sparkline value

capabilities.json

@@ -908,6 +908,38 @@
         }
       }
     },
+    "dataGap": {
+      "properties": {
+        "isShown": {
+          "type": {
+            "bool": true
+          }
+        },
+        "gapMessage": {
+          "type": {
+            "text": true
+          }
+        },
+        "color": {
+          "type": {
+            "fill": {
+              "solid": {
+                "color": true
+              }
+            }
+          }
+        },
+        "backgroundColor": {
+          "type": {
+            "fill": {
+              "solid": {
+                "color": true
+              }
+            }
+          }
+        }
+      }
+    },
     "printMode": {
       "properties": {
         "show": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/powerbi-visuals-multikpi",
-  "version": "3.0.1.0",
+  "version": "3.1.0.0",
   "private": true,
   "description": "Shows a KPI metric along with other metrics as sparklines",
   "scripts": {

pbiviz.json

@@ -1,10 +1,10 @@
 {
   "visual": {
     "name": "MultiKpi",
-    "displayName": "Multi KPI 3.0.1.0",
+    "displayName": "Multi KPI 3.1.0.0",
     "guid": "multiKpiEA8DA325489E436991F0E411F2D85FF3",
     "visualClassName": "MultiKpi",
-    "version": "3.0.1.0",
+    "version": "3.1.0.0",
     "description": "Shows a KPI metric along with other metrics as sparklines",
     "supportUrl": "https://aka.ms/customvisualscommunity",
     "gitHubUrl": "https://github.com/Microsoft/PowerBI-visuals-MultiKPI"

specs/common.spec.ts

@@ -51,6 +51,7 @@ import {
 } from "../src/converter/data/dataRepresentation";
 
 import { isValueValid } from "../src/utils/isValueValid";
+import { DataGapDetector, IDataGapResult } from "../src/utils/dataGapDetector";
 
 import { DataConverter } from "../src/converter/data/dataConverter";
 import { getFormattedValueWithFallback } from "../src/converter/data/dataFormatter";
@@ -63,6 +64,115 @@ import { SubtitleWarningComponent } from "../src/visualComponent/subtitleWarning
 import { MultiKpiBuilder } from "./multiKpiBuilder";
 
 describe("Multi KPI", () => {
+      describe("Version 2.4.0 Changes", () => {
+        describe("DataGapDetector", () => {
+            describe("detectGaps", () => {
+                it("should return no gaps for single point", () => {
+                    const points: IDataRepresentationPoint[] = [
+                        { x: new Date(2023, 0, 1), y: 100, index: 0 }
+                    ];
+
+                    const result: IDataGapResult = DataGapDetector.detectGaps(points);
+
+                    expect(result.hasGaps).toBeFalsy();
+                    expect(result.totalMissingDays).toBe(0);
+                    expect(result.gaps).toEqual([]);
+                });
+
+                it("should return no gaps for consecutive days with valid values", () => {
+                    const points: IDataRepresentationPoint[] = [
+                        { x: new Date(2023, 0, 1), y: 100, index: 0 },
+                        { x: new Date(2023, 0, 2), y: 200, index: 1 },
+                        { x: new Date(2023, 0, 3), y: 300, index: 2 }
+                    ];
+
+                    const result: IDataGapResult = DataGapDetector.detectGaps(points);
+
+                    expect(result.hasGaps).toBeFalsy();
+                    expect(result.totalMissingDays).toBe(0);
+                    expect(result.gaps).toEqual([]);
+                });
+
+                it("should detect gap with missing day between valid points", () => {
+                    const points: IDataRepresentationPoint[] = [
+                        { x: new Date(2023, 0, 1), y: 100, index: 0 },
+                        { x: new Date(2023, 0, 3), y: 300, index: 1 }
+                    ];
+
+                    const result: IDataGapResult = DataGapDetector.detectGaps(points);
+
+                    expect(result.hasGaps).toBeTruthy();
+                    expect(result.totalMissingDays).toBe(1);
+                    expect(result.gaps.length).toBe(1);
+                    expect(result.gaps[0].missingDays).toBe(1);
+                });
+
+                it("should detect multiple days gap", () => {
+                    const points: IDataRepresentationPoint[] = [
+                        { x: new Date(2023, 0, 1), y: 100, index: 0 },
+                        { x: new Date(2023, 0, 5), y: 500, index: 1 }
+                    ];
+
+                    const result: IDataGapResult = DataGapDetector.detectGaps(points);
+
+                    expect(result.hasGaps).toBeTruthy();
+                    expect(result.totalMissingDays).toBe(3);
+                    expect(result.gaps.length).toBe(1);
+                    expect(result.gaps[0].missingDays).toBe(3);
+                });
+
+                it("should handle invalid values as gaps", () => {
+                    const points: IDataRepresentationPoint[] = [
+                        { x: new Date(2023, 0, 1), y: 100, index: 0 },
+                        { x: new Date(2023, 0, 2), y: NaN, index: 1 },
+                        { x: new Date(2023, 0, 3), y: 300, index: 2 }
+                    ];
+
+                    const result: IDataGapResult = DataGapDetector.detectGaps(points);
+
+                    expect(result.hasGaps).toBeTruthy();
+                    expect(result.totalMissingDays).toBeGreaterThan(0);
+                });
+
+                it("should handle points with zero values as valid", () => {
+                    const points: IDataRepresentationPoint[] = [
+                        { x: new Date(2023, 0, 1), y: 100, index: 0 },
+                        { x: new Date(2023, 0, 2), y: 0, index: 1 },
+                        { x: new Date(2023, 0, 3), y: 300, index: 2 }
+                    ];
+
+                    const result: IDataGapResult = DataGapDetector.detectGaps(points);
+
+                    expect(result.hasGaps).toBeFalsy();
+                    expect(result.totalMissingDays).toBe(0);
+                    expect(result.gaps).toEqual([]);
+                });
+
+                it("should handle large gaps correctly", () => {
+                    const points: IDataRepresentationPoint[] = [
+                        { x: new Date(2023, 0, 1), y: 100, index: 0 },
+                        { x: new Date(2023, 1, 1), y: 200, index: 1 } // About 31 days gap
+                    ];
+
+                    const result: IDataGapResult = DataGapDetector.detectGaps(points);
+
+                    expect(result.hasGaps).toBeTruthy();
+                    expect(result.totalMissingDays).toBeGreaterThan(25); // Allow some tolerance
+                    expect(result.gaps.length).toBe(1);
+                });
+            });
+
+            describe("formatGapMessage", () => {
+                it("should format message with placeholder replacement", () => {
+                    const template: string = "Warning: ${1} days of data are missing";
+                    const result: string = DataGapDetector.formatGapMessage(template, 5);
+
+                    expect(result).toBe("Warning: 5 days of data are missing");
+                });
+            });
+        });
+    });
+
     describe("Version 2.3.0 Changes", () => {
         describe("DataFormatter", () => {
             it("should return N/A if a variance is not valid", () => {

src/converter/data/dataConverter.ts

@@ -71,6 +71,8 @@ import {
     getFormattedValueWithFallback,
 } from "../data/dataFormatter";
 
+import { DataGapDetector, IDataGapResult } from "../../utils/dataGapDetector";
+
 export interface IColumnGroup {
     name: string;
     values: PrimitiveValue[];
@@ -410,6 +412,11 @@ export class DataConverter implements IConverter<IDataConverterOptions, IDataRep
 
     private postProcessData(dataRepresentation: IDataRepresentation, settings: Settings): void {
         dataRepresentation.staleDateDifference = 0;
+        dataRepresentation.dataGapInfo = {
+            hasGaps: false,
+            totalMissingDays: 0,
+            seriesGaps: {}
+        };
 
         dataRepresentation.series.forEach((series: IDataRepresentationSeries) => {
             if (series?.current?.x) {
@@ -418,6 +425,19 @@ export class DataConverter implements IConverter<IDataConverterOptions, IDataRep
                     dataRepresentation.staleDateDifference = series.staleDateDifference;
                 }
             }
+            if (series.points.length > 1) {                
+                const gapResult: IDataGapResult = DataGapDetector.detectGaps(series.points);
+
+                dataRepresentation.dataGapInfo.seriesGaps[series.name] = {
+                    hasGaps: gapResult.hasGaps,
+                    totalMissingDays: gapResult.totalMissingDays
+                };
+
+                if (gapResult.hasGaps) {
+                    dataRepresentation.dataGapInfo.hasGaps = true;
+                    dataRepresentation.dataGapInfo.totalMissingDays += gapResult.totalMissingDays;
+                }
+            }
 
             series.x.initialMin = series.x.min;
             series.x.initialMax = series.x.max;

src/converter/data/dataRepresentation.ts

@@ -103,4 +103,11 @@ export interface IDataRepresentation {
     subtitle?: string;
     viewport: IViewport;
     viewportSize: ViewportSize;
+    dataGapInfo?: IDataGapInfo;
+}
+
+export interface IDataGapInfo {
+    hasGaps: boolean;
+    totalMissingDays: number;
+    seriesGaps: { [seriesName: string]: { hasGaps: boolean; totalMissingDays: number; } };
 }

src/settings/descriptors/dataGapDescriptor.ts

@@ -0,0 +1,81 @@
+/**
+ *  Power BI Visualizations
+ *
+ *  Copyright (c) Microsoft Corporation
+ *  All rights reserved.
+ *  MIT License
+ *
+ *  Permission is hereby granted, free of charge, to any person obtaining a copy
+ *  of this software and associated documentation files (the ""Software""), to deal
+ *  in the Software without restriction, including without limitation the rights
+ *  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ *  copies of the Software, and to permit persons to whom the Software is
+ *  furnished to do so, subject to the following conditions:
+ *
+ *  The above copyright notice and this permission notice shall be included in
+ *  all copies or substantial portions of the Software.
+ *
+ *  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ *  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ *  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ *  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ *  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ *  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ *  THE SOFTWARE.
+ */
+import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
+import ToggleSwitch = formattingSettings.ToggleSwitch;
+import FormattingSettingsSlice = formattingSettings.Slice;
+import TextInput = formattingSettings.TextInput;
+import ColorPicker = formattingSettings.ColorPicker;
+
+import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
+
+import { BaseDescriptor } from "./baseDescriptor";
+
+export class DataGapDescriptor extends BaseDescriptor {
+    public name: string = "dataGap";
+    public displayNameKey: string = "Visual_DataGap";
+    public descriptionKey: string = "Visual_DataGapDescription";
+
+    public defaultColorValue: string = "#ffeb3b";
+    public defaultBackgroundValue: string = "";
+
+    public gapMessage: TextInput = new TextInput({
+        name: "gapMessage",
+        displayNameKey: "Visual_DataGapMessage",
+        descriptionKey: "Visual_DataGapMessageDescription",
+        value: "⚠️ ${1} missing days detected",
+        placeholder: "Enter gap message template"
+    });
+
+    public backgroundColor: ColorPicker = new ColorPicker({
+        name: "backgroundColor",
+        displayNameKey: "Visual_BackgroundColor",
+        value: {value: this.defaultBackgroundValue}
+    });
+
+    public color: ColorPicker = new ColorPicker({
+        name: "color",
+        displayNameKey: "Visual_Color",
+        value: { value: this.defaultColorValue }
+    });
+
+    public slices: FormattingSettingsSlice[] = [
+        this.gapMessage,
+        this.backgroundColor,
+        this.color
+    ];
+
+    topLevelSlice: ToggleSwitch = this.isShown;
+
+    public processHighContrastMode(colorPalette: ISandboxExtendedColorPalette): void {
+        const isHighContrast: boolean = colorPalette.isHighContrast;
+
+        this.color.visible = isHighContrast ? false : this.color.visible;
+        this.color.value = isHighContrast ? colorPalette.foreground : this.color.value;
+
+        this.backgroundColor.visible = isHighContrast ? false : this.backgroundColor.visible;
+        this.backgroundColor.value = isHighContrast ? colorPalette.foreground : this.backgroundColor.value;
+    }
+}

src/settings/settings.ts

@@ -36,6 +36,7 @@ import FormattingSettingsCard = formattingSettings.Cards;
 import { AxisDescriptor } from "./descriptors/axisDescriptor";
 import { PrintDescriptor } from "./descriptors/printDescriptor";
 import { ChartDescriptor } from "./descriptors/chartDescriptor";
+import { DataGapDescriptor } from "./descriptors/dataGapDescriptor";
 import { DateDescriptor } from "./descriptors/dateDescriptor";
 import { GridDescriptor } from "./descriptors/gridDescriptor";
 import { KpiDescriptor } from "./descriptors/kpi/kpiDescriptor";
@@ -71,6 +72,7 @@ export class Settings extends FormattingSettingsModel {
     public sparklineValue: SparklineValueDescriptor = new SparklineValueDescriptor();
     public subtitle: SubtitleContainerItem = new SubtitleContainerItem();
     public staleData: StaleDataDescriptor = new StaleDataDescriptor();
+    public dataGap: DataGapDescriptor = new DataGapDescriptor();
     public printMode: PrintDescriptor = new PrintDescriptor();
 
     public cards: FormattingSettingsCard[] = [
@@ -79,7 +81,7 @@ export class Settings extends FormattingSettingsModel {
         this.kpi, this.kpiOnHover, this.grid, this.sparkline,
         this.sparklineLabel, this.sparklineChart,
         this.sparklineValue, this.sparklineYAxis,
-        this.subtitle, this.staleData, this.printMode
+        this.subtitle, this.staleData, this.dataGap, this.printMode
     ]
 
     public parse(colorPalette: ISandboxExtendedColorPalette, localizationManager: ILocalizationManager): void {
@@ -89,6 +91,7 @@ export class Settings extends FormattingSettingsModel {
 
         if (!this.subtitle.show.value) {
             this.staleData.isShown.value = false;
+            this.dataGap.isShown.value = false;
         }
 
         this.cards.forEach((card) => {