Add ability automatically scroll chart to today date (#42)

Author: savvinsergey

CHANGELOG.md

@@ -1,3 +1,5 @@
+## 1.6.0
+ * Added ability automatically scroll chart to today date
 ## 1.5.1
  * Fixed tooltip label and date format of milestone line
 ## 1.5.0

capabilities.json

@@ -210,6 +210,13 @@
                         "bool": true
                     }
                 },
+                "scrollToCurrentTime": {
+                    "displayName": "Scroll to current time",
+                    "displayNameKey": "Visual_ScrollToCurrentTime",
+                    "type": {
+                        "bool": true
+                    }
+                },
                 "durationUnit": {
                     "displayName": "Duration unit",
                     "displayNameKey": "Visual_DurationUnit",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-gantt",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "A Gantt chart is a type of bar chart which illustrates a project timeline or schedule. The Gantt Chart visual shows the Tasks, Start Dates, Durations, % Complete, and Resources for a project. The Gantt Chart visual can be used to show current schedule status using percent-complete shadings and a vertical \"TODAY\" line. The Legend may be used to group or filter tasks based upon data values.",
   "repository": {
     "type": "git",

pbiviz.json

@@ -4,7 +4,7 @@
     "displayName": "Gantt",
     "guid": "Gantt1448688115699",
     "visualClassName": "Gantt",
-    "version": "1.5.1",
+    "version": "1.6.0",
     "description": "A Gantt chart is a type of bar chart which illustrates a project timeline or schedule. The Gantt Chart visual shows the Tasks, Start Dates, Durations, % Complete, and Resources for a project. The Gantt Chart visual can be used to show current schedule status using percent-complete shadings and a vertical \"TODAY\" line. The Legend may be used to group or filter tasks based upon data values.",
     "supportUrl": "http://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-gantt"

src/gantt.ts

@@ -100,6 +100,7 @@ module powerbi.extensibility.visual {
     import timeScale = d3.time.Scale;
 
     const PercentFormat: string = "0.00 %;-0.00 %;0.00 %";
+    const ScrollMargin: number = 100;
     const MillisecondsInASecond: number = 1000;
     const MillisecondsInAMinute: number = 60 * MillisecondsInASecond;
     const MillisecondsInAHour: number = 60 * MillisecondsInAMinute;
@@ -411,7 +412,9 @@ module powerbi.extensibility.visual {
                 LegendPosition.Top);
 
             this.ganttDiv.on("scroll", function (evt) {
-                const taskLabelsWidth: number = self.viewModel.settings.taskLabels.show ? self.viewModel.settings.taskLabels.width : 0;
+                const taskLabelsWidth: number = self.viewModel.settings.taskLabels.show
+                    ? self.viewModel.settings.taskLabels.width
+                    : 0;
                 self.axisGroup
                     .attr("transform", SVGUtil.translate(taskLabelsWidth + self.margin.left, Gantt.TaskLabelsMarginTop + this.scrollTop));
                 self.lineGroup
@@ -949,9 +952,12 @@ module powerbi.extensibility.visual {
             this.renderAxis(xAxisProperties);
             this.renderTasks(groupedTasks);
 
-            this.createMilestoneLine(groupedTasks);
             this.updateTaskLabels(groupedTasks, settings.taskLabels.width);
             this.updateElementsPositions(this.margin);
+            this.createMilestoneLine(groupedTasks);
+            if (settings.general.scrollToCurrentTime) {
+                this.scrollToMilestoneLine(axisLength);
+            }
 
             if (this.interactivityService) {
                 let behaviorOptions: GanttBehaviorOptions = {
@@ -1492,6 +1498,20 @@ module powerbi.extensibility.visual {
                 .remove();
         }
 
+        private scrollToMilestoneLine(axisLength: number,
+                                      timestamp: number = Date.now()): void {
+
+            let scrollValue = this.timeScale(new Date(timestamp));
+            scrollValue -= scrollValue > ScrollMargin
+                ? ScrollMargin
+                : 0;
+
+            if (axisLength > scrollValue) {
+                (this.body.node() as SVGSVGElement)
+                    .querySelector(Selectors.Body.selector).scrollLeft = scrollValue;
+            }
+        }
+
         private renderTooltip(selection: Selection<Line | Task>): void {
             this.tooltipServiceWrapper.addTooltip(
                 selection,

src/settings.ts

@@ -41,6 +41,7 @@ module powerbi.extensibility.visual {
 
     export class GeneralSettings {
         groupTasks: boolean = false;
+        scrollToCurrentTime: boolean = false;
         durationUnit: string = "day";
         durationMin: number = 0;
     }

stringResources/en-US/resources.resjson

@@ -8,6 +8,7 @@
   	"Role_ExtraInformation": "Extra information",
 	"Visual_General": "General",
 	"Visual_GroupTasks": "Group Tasks",
+	"Visual_ScrollToCurrentTime": "Scroll to current time",
 	"Visual_Legend": "Legend",
 	"Visual_LegendName": "Legend Name",
 	"Visual_LegendColor": "Legend color",

test/visualBuilder.ts

@@ -47,9 +47,13 @@ module powerbi.extensibility.visual.test {
             return this.visual;
         }
 
-        public get mainElement() {
+        public get body() {
             return this.element
-                .children("div.gantt-body")
+                .children("div.gantt-body");
+        }
+
+        public get mainElement() {
+            return this.body
                 .children("svg.gantt");
         }
 

test/visualTest.ts

@@ -60,6 +60,7 @@ module powerbi.extensibility.visual.test {
     }
 
     const defaultTaskDuration: number = 1;
+    const datesAmountForScroll: number = 90;
 
     describe("Gantt", () => {
         let visualBuilder: GanttBuilder,
@@ -388,6 +389,32 @@ module powerbi.extensibility.visual.test {
 
         describe("Format settings test", () => {
             describe("General", () => {
+                it("Scroll to current time", (done) => {
+                    let todayDate = new Date();
+                    let startDate = new Date();
+                    let endDate = new Date();
+
+                    startDate.setDate(todayDate.getDate() - datesAmountForScroll);
+                    endDate.setDate(todayDate.getDate() + datesAmountForScroll);
+
+                    defaultDataViewBuilder.valuesStartDate = GanttData.getRandomUniqueDates(
+                        defaultDataViewBuilder.valuesTaskTypeResource.length,
+                        startDate,
+                        endDate
+                    );
+                    dataView = defaultDataViewBuilder.getDataView();
+                    dataView.metadata.objects = {
+                        general: {
+                            scrollToCurrentTime: true
+                        }
+                    };
+
+                    visualBuilder.updateRenderTimeout(dataView, () => {
+                        expect(visualBuilder.body.scrollLeft()).not.toEqual(0);
+                        done();
+                    });
+                });
+
                 describe("Duration units", () => {
 
                     function checkDurationUnit(durationUnit: string) {