Added option to data labels which cut them up to the width of the task (#90)

Author: savvinsergey

CHANGELOG.md

@@ -1,3 +1,5 @@
+## 1.8.6
+ * Added option to data labels which cut them up to the width of the task
 ## 1.8.5
  * Fixed issue with wrong displaying resources labels
 ## 1.8.4

capabilities.json

@@ -587,6 +587,13 @@
                     "type": {
                         "bool": true
                     }
+                },
+                "widthByTask": {
+                    "displayName": "Width by task",
+                    "displayNameKey": "Visual_WidthByTask",
+                    "type": {
+                        "bool": true
+                    }
                 }
             }
         },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-gantt",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "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.8.5",
+    "version": "1.8.6",
     "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

@@ -1697,6 +1697,7 @@ module powerbi.extensibility.visual {
             let taskResourceFontSize: number = this.viewModel.settings.taskResource.fontSize;
             let taskResourcePosition: ResourceLabelPositions = this.viewModel.settings.taskResource.position;
             let taskResourceFullText: boolean = this.viewModel.settings.taskResource.fullText;
+            let taskResourceWidthByTask: boolean = this.viewModel.settings.taskResource.widthByTask;
 
             if (taskResourceShow) {
                 let taskResource: UpdateSelection<Task> = taskSelection
@@ -1720,11 +1721,16 @@ module powerbi.extensibility.visual {
                         "font-size": PixelConverter.fromPoint(taskResourceFontSize)
                     });
 
+                let self: Gantt = this;
                 if (!taskResourceFullText) {
                     taskResource
-                        .call(AxisHelper.LabelLayoutStrategy.clip,
-                            Gantt.DefaultValues.ResourceWidth - Gantt.ResourceWidthPadding,
-                            textMeasurementService.svgEllipsis);
+                        .each(function(task: Task){
+                            const width: number = taskResourceWidthByTask
+                                ? self.taskDurationToWidth(task.start, task.end)
+                                : Gantt.DefaultValues.ResourceWidth - Gantt.ResourceWidthPadding;
+
+                            AxisHelper.LabelLayoutStrategy.clip(d3.select(this), width, textMeasurementService.svgEllipsis);
+                        });
                 }
 
                 taskResource

src/settings.ts

@@ -85,6 +85,7 @@ module powerbi.extensibility.visual {
         fontSize: number = 9;
         position: ResourceLabelPositions = ResourceLabelPositions.Right;
         fullText: boolean = false;
+        widthByTask: boolean = false;
     }
 
     export class DateTypeSettings {

stringResources/en-US/resources.resjson

@@ -24,6 +24,7 @@
 	"Visual_LegendColor": "Legend color",
 	"Visual_Show": "Show",
 	"Visual_FullText": "Full text",
+	"Visual_WidthByTask": "Width by task",
 	"Visual_Position": "Position",
 	"Visual_Position_Top": "Top",
 	"Visual_Position_Bottom": "Bottom",

test/visualTest.ts

@@ -802,6 +802,31 @@ module powerbi.extensibility.visual.test {
                         done();
                     });
                 });
+
+                it("widthByTask", (done) => {
+                    dataView.metadata.objects = {
+                        taskResource: {
+                            position: "Top",
+                            fullText: false,
+                            widthByTask: true
+                        }
+                    };
+
+                    visualBuilder.updateRenderTimeout(dataView, () => {
+                        let taskRects: any[] = visualBuilder.taskRect.toArray().map($);
+                        visualBuilder.taskResources.toArray().map($).forEach((e, i) => {
+                            let labelElRawWidth: string = e.css("width");
+                            let labelElWidth: number = +labelElRawWidth.substr(0, labelElRawWidth.length - 2);
+
+                            let taskElRawWidth: string = taskRects[i].css("width");
+                            let taskElWidth: number = +taskElRawWidth.substr(0, taskElRawWidth.length - 2);
+
+                            expect(labelElWidth <= taskElWidth).toBeTruthy();
+                        });
+
+                        done();
+                    });
+                });
             });
 
             describe("Task Completion", () => {