Fix the issue with replacing old Timeline visual with newer version (m…

…icrosoft#138)

* Add "Visual_Short_Description", "Visual_Long_Description" localization keys

* Fix the issue with upgrading the visual version inside the report

When user replaces the visual with new version the visual didn't render because some ItemDropDown values were not set.

* Fix eslint errors

.github/workflows/build.yml

@@ -29,8 +29,7 @@ jobs:
     - run: npm ci
     - run: npm outdated
       continue-on-error: true
-    - run: npm run eslint --if-present
-    - run: npm run lint --if-present
+    - run: npm run eslint
     - run: npm run package
     - run: npm test
       env:

package.json

@@ -42,19 +42,19 @@
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webpack": "^5.0.0",
     "less": "^4.2.0",
-    "less-loader": "^12.0.0",
-    "playwright-chromium": "^1.41.0",
+    "less-loader": "^12.1.0",
+    "playwright-chromium": "^1.41.1",
     "powerbi-visuals-api": "~5.7.0",
-    "powerbi-visuals-tools": "^5.4.0",
+    "powerbi-visuals-tools": "^5.4.1",
     "powerbi-visuals-utils-testutils": "^6.0.3",
     "style-loader": "^3.3.4",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "d3-array": "^3.2.4",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",

src/granularity/granularityBase.ts

@@ -44,7 +44,6 @@ import {
     IExtendedLabel,
     ITimelineLabel,
 } from "../dataInterfaces";
-import {GranularitySettingsCard} from "../timeLineSettingsModel";
 import {GranularityType} from "./granularityType";
 
 export class GranularityBase implements IGranularity {
@@ -118,11 +117,16 @@ export class GranularityBase implements IGranularity {
             .attr("y", pixelConverter.toString(0 - this.textLabelYOffset))
             .attr("dx", this.textLabelDx);
 
+        const propsGranularity: GranularityType = props.granularSettings.granularity.value
+            ? GranularityType[props.granularSettings.granularity.value.value]
+            : GranularityType.month;
+
         // render slider
-        if (GranularityType[props.granularSettings.granularity.value.value] === this.granularityProps.granularityType) {
+        if (propsGranularity === this.granularityProps.granularityType) {
             this.renderSlider(
                 granularitySelection,
-                props.granularSettings,
+                props.granularSettings.sliderColor.value.value,
+                propsGranularity
             );
         }
 
@@ -149,7 +153,9 @@ export class GranularityBase implements IGranularity {
 
                 this.renderSlider(
                     granularitySelection,
-                    props.granularSettings,
+                    // props.granularSettings,
+                    props.granularSettings.sliderColor.value.value,
+                    propsGranularity
                 );
             });
 
@@ -293,17 +299,18 @@ export class GranularityBase implements IGranularity {
 
     private renderSlider(
         selection: Selection<any, any, any, any>,
-        granularSettings: GranularitySettingsCard,
+        sliderColor: string,
+        granularity: GranularityType,
     ): void {
         selection
             .append("rect")
             .classed("periodSlicerRect", true)
-            .style("stroke", granularSettings.sliderColor.value.value)
+            .style("stroke", sliderColor)
             .attr("x", pixelConverter.toString(0 - this.sliderXOffset))
             .attr("y", pixelConverter.toString(0 - this.sliderYOffset))
             .attr("rx", pixelConverter.toString(this.sliderRx))
             .attr("width", pixelConverter.toString(this.sliderWidth))
             .attr("height", pixelConverter.toString(this.sliderHeight))
-            .data([GranularityType[granularSettings.granularity.value.value]]);
+            .data([granularity]);
     }
 }

src/timeLine.ts

@@ -78,7 +78,6 @@ import {
 } from "./timeLineSettingsModel";
 import {Day} from "./calendars/day";
 import {Month} from "./calendars/month";
-
 import ISelectionManager = powerbiVisualsApi.extensibility.ISelectionManager;
 import extractFilterColumnTarget = interactivityFilterService.extractFilterColumnTarget;
 
@@ -161,7 +160,7 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
 
         const weekDayFormat: WeekDayFormat = {
             daySelection: timelineSettings.weekDay.daySelection.value,
-            day: Day[timelineSettings.weekDay.day.value.value],
+            day: timelineSettings.weekDay.day.value ? Day[timelineSettings.weekDay.day.value.value] : Day.Sunday,
         }
 
         const isCalendarChanged: boolean = previousCalendar
@@ -175,7 +174,10 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
         if (!initialized || isCalendarChanged) {
             calendar = new CalendarFactory().create(weekStandardFormat, calendarFormat, weekDayFormat);
             timelineData.currentGranularity = timelineGranularityData.getGranularity(
-                GranularityType[timelineSettings.granularity.granularity.value.value]);
+                timelineSettings.granularity.granularity.value
+                    ? GranularityType[timelineSettings.granularity.granularity.value.value]
+                    : GranularityType.month,
+            );
         } else {
             calendar = previousCalendar;
 
@@ -756,7 +758,10 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
 
             const adjustedPeriod: IAdjustedFilterDatePeriod = this.adjustFilterDatePeriod();
             const datePeriod: ITimelineDatePeriodBase = this.datePeriod;
-            const granularity: GranularityType = GranularityType[this.formattingSettings.granularity.granularity.value.value];
+            const granularity: GranularityType = this.formattingSettings.granularity.granularity.value
+                ? GranularityType[this.formattingSettings.granularity.granularity.value.value]
+                : GranularityType.month;
+
             const isCurrentPeriodSelected: boolean = !this.isForceSelectionReset && this.formattingSettings.forceSelection.currentPeriod.value;
             const isLatestAvailableDateSelected: boolean = !this.isForceSelectionReset && this.formattingSettings.forceSelection.latestAvailableDate.value;
             const isForceSelected: boolean = !this.isForceSelectionReset && (isCurrentPeriodSelected || isLatestAvailableDateSelected);
@@ -1294,7 +1299,7 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
 
         const weekDayFormat: WeekDayFormat = {
             daySelection: formattingSettings.weekDay.daySelection.value,
-            day: Day[formattingSettings.weekDay.day.value.value],
+            day: formattingSettings.weekDay.day.value ? Day[formattingSettings.weekDay.day.value.value] : Day.Sunday,
         }
 
         const calendar: Calendar = this.calendarFactory.create(weekStandardFormat, calendarFormat, weekDayFormat);

stringResources/en-US/resources.resjson

@@ -1,6 +1,8 @@
 {
 	"Role_Time": "Time",
 	"Visual_General": "General",
+	"Visual_Short_Description": "Graphical date range selector to use for filtering dates",
+	"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_Month": "Month",