Fix bugs with click handler and selecting period (#148)

* Disable "Calendar" and "First day of week" settings when WeekStandard is set to IS0 8601

* Fix cell click handler (passed invalid selected index)

* Fix uninitialized start date when date from filters is less than date from DataView

* Increase font max size for range header to 40

* Update outdated packages

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.5.4
+* Disable "Calendar" and "First day of week" settings when WeekStandard is set to IS0 860
+* Fix uninitialized start date when date from filters is less than date from DataView
+* Fix cell click handler (passed invalid selected index)
+
 ## 2.5.3
 * Update API to 5.9.0
 * Fix npm vulnerabilities

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-timeline",
-  "version": "2.5.3.0",
+  "version": "2.5.4.0",
   "description": "Timeline slicer is a graphical date range selector used as a filtering component in the report canvas",
   "repository": {
     "type": "git",
@@ -34,8 +34,8 @@
     "@types/d3-shape": "^3.1.6",
     "@types/jasmine": "^5.1.4",
     "@types/karma": "^6.3.8",
-    "@types/node": "^20.11.30",
-    "css-loader": "^6.10.0",
+    "@types/node": "^20.12.7",
+    "css-loader": "^7.1.1",
     "jasmine": "^5.1.0",
     "karma": "^6.4.3",
     "karma-chrome-launcher": "^3.2.0",
@@ -46,30 +46,30 @@
     "karma-webpack": "^5.0.1",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
-    "playwright-chromium": "^1.42.1",
-    "powerbi-visuals-api": "~5.8.0",
-    "powerbi-visuals-tools": "^5.4.2",
-    "powerbi-visuals-utils-testutils": "^6.1.0",
-    "style-loader": "^3.3.4",
+    "playwright-chromium": "^1.43.1",
+    "powerbi-visuals-api": "~5.9.0",
+    "powerbi-visuals-tools": "^5.4.3",
+    "powerbi-visuals-utils-testutils": "^6.1.1",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.4.3",
+    "typescript": "^5.4.5",
     "webpack": "^5.91.0"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "d3-array": "^3.2.4",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-powerbi-visuals": "^0.8.1",
     "powerbi-models": "^1.15.2",
-    "powerbi-visuals-utils-chartutils": "^6.0.3",
-    "powerbi-visuals-utils-formattingmodel": "^6.0.1",
-    "powerbi-visuals-utils-formattingutils": "^6.1.0",
-    "powerbi-visuals-utils-interactivityutils": "^6.0.3",
-    "powerbi-visuals-utils-svgutils": "^6.0.3",
-    "powerbi-visuals-utils-typeutils": "^6.0.2"
+    "powerbi-visuals-utils-chartutils": "^6.0.4",
+    "powerbi-visuals-utils-formattingmodel": "^6.0.2",
+    "powerbi-visuals-utils-formattingutils": "^6.1.1",
+    "powerbi-visuals-utils-interactivityutils": "^6.0.4",
+    "powerbi-visuals-utils-svgutils": "^6.0.4",
+    "powerbi-visuals-utils-typeutils": "^6.0.3"
   }
 }

pbiviz.json

@@ -1,15 +1,15 @@
 {
   "visual": {
     "name": "Timeline",
-    "displayName": "Timeline 2.5.3.0",
+    "displayName": "Timeline 2.5.4.0",
     "guid": "Timeline1447991079100",
     "visualClassName": "Timeline",
-    "version": "2.5.3.0",
+    "version": "2.5.4.0",
     "description": "Timeline slicer is a graphical date range selector used as a filtering component in the report canvas",
     "supportUrl": "https://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-timeline"
   },
-  "apiVersion": "5.8.0",
+  "apiVersion": "5.9.0",
   "author": {
     "name": "Microsoft",
     "email": "[email protected]"

src/behavior.ts

@@ -1,5 +1,5 @@
 
-import { Selection as d3Selection } from "d3-selection";
+import { Selection as d3Selection, local as d3local } from "d3-selection";
 import {ICursorDataPoint, ITimelineDataPoint} from "./dataInterfaces";
 import ISelectionManager = powerbi.extensibility.ISelectionManager;
 import {D3DragEvent, drag as d3Drag} from "d3-drag";
@@ -36,25 +36,28 @@ export class Behavior {
 
                 return cursorDataPoint;
             })
-            .on("drag", null)
-            .on("end", null)
+            .on("drag end", null)
             .on("drag", options.cursors.onDrag)
             .on("end", options.cursors.onEnd);
 
         options.cursors.selection.call(dragBehavior);
     }
 
     private static handleCellsClick(options: BehaviorOptions) {
-        const clickHandler = (event: MouseEvent, dataPoint: ITimelineDataPoint) => {
-            event.stopPropagation();
-            options.cells.callback(dataPoint, dataPoint.index, event.ctrlKey || event.metaKey || event.altKey || event.shiftKey);
-        };
+        const local = d3local<number>();
+        let index = 0;
 
         options.cells.selection
-            .on("click", null)
-            .on("touchstart", null)
-            .on("click", clickHandler)
-            .on("touchstart", clickHandler);
+            .each(function () {
+                local.set(this, index);
+                index += 1;
+            })
+            .on("click touchstart", null)
+            .on("click touchstart", function (event: MouseEvent, dataPoint: ITimelineDataPoint) {
+                event.stopPropagation();
+                const index: number = local.get(this);
+                options.cells.callback(dataPoint, index, event.ctrlKey || event.metaKey || event.altKey || event.shiftKey);
+            })
     }
 
     private static clearCatcher(options: BehaviorOptions) {

src/timeLine.ts

@@ -1017,6 +1017,12 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
     }
 
     public getFormattingModel(): powerbi.visuals.FormattingModel {
+        // These options have no sense if ISO standard was picked
+        if (<WeekStandard>this.visualSettings.weeksDeterminationStandards.weekStandard.value.value === WeekStandard.ISO8061) {
+            this.visualSettings.weekDay.disabled = true;
+            this.visualSettings.calendar.disabled = true;
+        }
+
         return this.formattingSettingsService.buildFormattingModel(this.visualSettings);
     }
 
@@ -1129,7 +1135,7 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
             && this.datePeriod.startDate
             && filterDatePeriod.startDate.getTime() < this.datePeriod.startDate.getTime()
         ) {
-            filterDatePeriod.startDate = null;
+            filterDatePeriod.startDate = this.datePeriod.startDate;
         }
         // End date from data is always less than date from slicer filter.
         // This means that we need to correct it before check.

src/timeLineSettingsModel.ts

@@ -53,7 +53,7 @@ const granularityOptions: IEnumMember[] = [
 class TextSizeDefaults {
     public static readonly Default: number = 9;
     public static readonly Min: number = 7;
-    public static readonly Max: number = 24;
+    public static readonly Max: number = 40;
 }
 
 class CursorSettingsCard extends Card {
@@ -140,6 +140,7 @@ export class CalendarSettingsCard extends Card {
     name: string = "calendar";
     displayName: string = "Fiscal Year";
     displayNameKey: string = "Visual_FiscalYear";
+    descriptionKey: string = "Visual_FiscalYear_Description";
     slices = [this.month, this.day];
 }
 
@@ -163,6 +164,7 @@ class WeekDaySettingsCard extends Card {
     name: string = "weekDay";
     displayName: string = "First Day of Week";
     displayNameKey: string = "Visual_FirstDayOfWeek";
+    descriptionKey: string = "Visual_FirstDayOfWeek_Description";
     slices = [this.day];
 }
 
@@ -406,7 +408,7 @@ export class LabelsSettingsCard extends Card {
         value: TextSizeDefaults.Default,
         options: {
             minValue: { value: TextSizeDefaults.Min, type: ValidatorType.Min },
-            maxValue: { value: TextSizeDefaults.Max, type: ValidatorType.Max },
+            maxValue: { value: 24, type: ValidatorType.Max },
         }
     });
 

stringResources/en-US/resources.resjson

@@ -5,6 +5,7 @@
 	"Visual_Long_Description": "The Timeline slicer is a graphical date range selector used as a filtering component in Power BI. This makes filtering data by date dimension easy and fun.\nHow often do you have to filter your data for a date range or at higher level such as month or quarter? Every single time. Right? Filtering is pain when you have to click through large numbers of date values to select the range you want. Changing the filter granularity from months, the quarters and years on the fly is super tedious. Well, it used to be super tedious.\nThe Timeline slicer is going to make this experience a breeze. With this simple slider control for dates, all you need to do, is just click and drag to the range that you want. You can also switch to a Year, Quarter or Month view to select ranges even at a higher level than dates.\nYou can simply click on the slicer to select a single value or click the edge and drag it to the range that you want.\nYou can also change the background & selection color and number of other formatting options to control the look-n-feel. SHIFT+Click also works for selecting a range.",
 	"Visual_FiscalYearStart": "Fiscal Year Start",
 	"Visual_FiscalYear": "Fiscal Year",
+	"Visual_FiscalYear_Description": "This option have no sense if ISO 8601 standard was picked",
 	"Visual_Month": "Month",
 	"Visual_Month_January": "January",
 	"Visual_Month_February": "February",
@@ -53,6 +54,7 @@
 	"Visual_Labels": "Labels",
 	"Visual_ScaleSizeAdjustment": "Scale size auto adjustment",
 	"Visual_FirstDayOfWeek": "First Day of Week",
+	"Visual_FirstDayOfWeek_Description": "This option have no sense if ISO 8601 standard was picked",
 	"Visual_DisplayAll": "Display all",
 	"Visual_Cursor": "Cursor",
 	"Visual_CursorColor": "Cursor color",