Dev (#342)

* Fix disappearing bars bug (#332) * Fix: show context menu when right-clicking on empty place inside visual * Fix rendering task with milestones * Fix issue: bars are shifted when "rounded corners" settings is enabled * Bump version to 3.0.5.0 * Fix tests regarding task position * Remove redundant behavior option * Return old UI appearance - task bars will be shifted to the left (#333) * Return old UI appearance - task bars will be shifted to the left a little I decided not to change UI for old reports, because we didn't get complaints about shifted task bars * Update chartutils to 6.0.3 * Fix context menu, do not show multiple context menus (#335) * New translations * New translations * Fix axis position compared to tasks position (#339) * Fix axis position compared to tasks position * Increase axis and tasks padding so axis is visible when "Date type" is set to "Hour" * Remove magic numbers * Upgrade API to 5.9.0 * When tasks are small drawing them as rounded makes them look awful. (#341) Fix axis position compared to tasks position --------- Co-authored-by: adiletelf <74559101+adiletelf@users.noreply.github.com> Co-authored-by: pbicvloc <104190707+pbicvloc@users.noreply.github.com>
microsoft · Apr 15, 2024 · 39fdd11 · 39fdd11
1 parent 92124bb
commit 39fdd11
Show file tree

Hide file tree

Showing 51 changed files with 558 additions and 382 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## 3.0.9
+* Upgrade API to 5.9.0
+* Fix axis position compared to tasks position
+* Increase axis and tasks padding so axis is visible when "Date type" is set to "Hour"
+* Remove magic numbers
+
+## 3.0.8
+* Fix bar start position and axis visibility on scroll
+
+## 3.0.7
+* Fix issue with showing multiple context menus
+* Fix npm vulnerabilities
+
+## 3.0.6
+* Rollback shifted task bars in order to have backwards compatibility
+* NPM vulnerabilities fixed
+
+## 3.0.5
+* Fix issue with disappearing of the task bar
+* Fix issue with shifted task bar when `barsRoundedCorners` is enabled
+
 ## 3.0.4
 * Fix issue when milestones were rendered twice
 * Show customized legend name in the tooltips

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-gantt",
-  "version": "3.0.4.0",
+  "version": "3.0.10.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",
@@ -44,8 +44,8 @@
     "lodash.toarray": "^4.4.0",
     "lodash.uniq": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
-    "powerbi-visuals-api": "^5.8.0",
-    "powerbi-visuals-utils-chartutils": "^6.0.2",
+    "powerbi-visuals-api": "^5.9.0",
+    "powerbi-visuals-utils-chartutils": "^6.0.3",
     "powerbi-visuals-utils-colorutils": "^6.0.3",
     "powerbi-visuals-utils-dataviewutils": "^6.0.2",
     "powerbi-visuals-utils-formattingmodel": "^6.0.1",
@@ -76,8 +76,8 @@
     "@types/lodash.uniq": "^4.5.9",
     "@types/lodash.uniqby": "^4.7.9",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "css-loader": "^6.10.0",
     "eslint": "^8.57.0",
     "eslint-plugin-powerbi-visuals": "^0.8.1",
@@ -98,7 +98,7 @@
     "powerbi-visuals-utils-testutils": "^6.1.0",
     "style-loader": "^3.3.4",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.4.2",
-    "webpack": "^5.90.3"
+    "typescript": "^5.4.3",
+    "webpack": "^5.91.0"
   }
 }
diff --git a/pbiviz.json b/pbiviz.json
@@ -1,15 +1,15 @@
 {
   "visual": {
     "name": "Gantt",
-    "displayName": "Gantt 3.0.4.0",
+    "displayName": "Gantt 3.0.10.0",
     "guid": "Gantt1448688115699",
     "visualClassName": "Gantt",
-    "version": "3.0.4.0",
+    "version": "3.0.10.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": "https://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-gantt"
   },
-  "apiVersion": "5.8.0",
+  "apiVersion": "5.9.0",
   "author": {
     "name": "Microsoft",
     "email": "pbicvsupport@microsoft.com"

diff --git a/src/behavior.ts b/src/behavior.ts
@@ -147,6 +147,7 @@ export class Behavior implements IInteractiveBehavior {
                         y: event.clientY
                     });
                 event.preventDefault();
+                event.stopPropagation();
             }
         });
 
@@ -159,30 +160,7 @@ export class Behavior implements IInteractiveBehavior {
                         y: event.clientY
                     });
                 event.preventDefault();
-            }
-        });
-
-        this.options.subTasksCollapse.selection.on("contextmenu", (event: MouseEvent) => {
-            if (event) {
-                this.selectionHandler.handleContextMenu(
-                    null,
-                    {
-                        x: event.clientX,
-                        y: event.clientY
-                    });
-                event.preventDefault();
-            }
-        });
-
-        this.options.allSubtasksCollapse.selection.on("contextmenu", (event: MouseEvent) => {
-            if (event) {
-                this.selectionHandler.handleContextMenu(
-                    null,
-                    {
-                        x: event.clientX,
-                        y: event.clientY
-                    });
-                event.preventDefault();
+                event.stopPropagation();
             }
         });
 

diff --git a/src/gantt.ts b/src/gantt.ts
@@ -309,6 +309,8 @@ export class Gantt implements IVisual {
     private static TaskLineCoordinateX: number = 15;
     private static AxisLabelClip: number = 40;
     private static AxisLabelStrokeWidth: number = 1;
+    private static AxisTopMargin: number = 6;
+    private static CollapseAllLeftShift: number = 7.5;
     private static BarHeightMargin: number = 5;
     private static ChartLineHeightDivider: number = 4;
     private static ResourceWidthPadding: number = 10;
@@ -329,6 +331,7 @@ export class Gantt implements IVisual {
     public static RectRound: number = 7;
 
     private static TimeScale: timeScale<any, any>;
+    private xAxisProperties: IAxisProperties;
 
     private static get DefaultMargin(): IMargin {
         return {
@@ -420,11 +423,6 @@ export class Gantt implements IVisual {
             .append("g")
             .classed(Gantt.Tasks.className, true);
 
-        // create tasks container
-        this.taskGroup = this.chartGroup
-            .append("g")
-            .classed(Gantt.Tasks.className, true);
-
         // create axis container
         this.axisGroup = this.ganttSvg
             .append("g")
@@ -476,6 +474,7 @@ export class Gantt implements IVisual {
                 const taskLabelsWidth: number = this.viewModel.settings.taskLabelsCardSettings.show.value
                     ? this.viewModel.settings.taskLabelsCardSettings.width.value
                     : 0;
+
                 const scrollTop: number = <number>event.target.scrollTop;
                 const scrollLeft: number = <number>event.target.scrollLeft;
 
@@ -1702,6 +1701,7 @@ export class Gantt implements IVisual {
             };
 
             const xAxisProperties: IAxisProperties = this.calculateAxes(viewportIn, this.textProperties, startDate, endDate, ticks, false);
+            this.xAxisProperties = xAxisProperties;
             Gantt.TimeScale = <timeScale<Date, Date>>xAxisProperties.scale;
 
             this.renderAxis(xAxisProperties);
@@ -1726,7 +1726,7 @@ export class Gantt implements IVisual {
     private bindInteractivityService(tasks: Task[]): void {
         if (this.interactivityService) {
             const behaviorOptions: BehaviorOptions = {
-                clearCatcher: this.clearCatcher,
+                clearCatcher: this.body,
                 taskSelection: this.taskGroup.selectAll(Gantt.SingleTask.selectorName),
                 legendSelection: this.body.selectAll(Gantt.LegendItems.selectorName),
                 subTasksCollapse: {
@@ -2010,7 +2010,7 @@ export class Gantt implements IVisual {
         const categoriesAreaBackgroundColor: string = this.colorHelper.getThemeColor();
         const isHighContrast: boolean = this.colorHelper.isHighContrast;
 
-        this.updateCollapseAllGroup(categoriesAreaBackgroundColor);
+        this.updateCollapseAllGroup(categoriesAreaBackgroundColor, taskLabelsShow);
 
         if (taskLabelsShow) {
             this.lineGroupWrapper
@@ -2124,7 +2124,7 @@ export class Gantt implements IVisual {
         }
     }
 
-    private updateCollapseAllGroup(categoriesAreaBackgroundColor: string) {
+    private updateCollapseAllGroup(categoriesAreaBackgroundColor: string, taskLabelShow: boolean) {
         this.collapseAllGroup
             .selectAll("svg")
             .remove();
@@ -2138,7 +2138,10 @@ export class Gantt implements IVisual {
             .remove();
 
         if (this.viewModel.isParentFilled) {
-            const categoryLabelsWidth: number = this.viewModel.settings.taskLabelsCardSettings.width.value;
+            const categoryLabelsWidth: number = this.viewModel.settings.taskLabelsCardSettings.show.value
+                ? this.viewModel.settings.taskLabelsCardSettings.width.value
+                : 0;
+
             this.collapseAllGroup
                 .append("rect")
                 .attr("width", categoryLabelsWidth)
@@ -2151,7 +2154,7 @@ export class Gantt implements IVisual {
                 .attr("viewBox", "0 0 48 48")
                 .attr("width", this.groupLabelSize)
                 .attr("height", this.groupLabelSize)
-                .attr("x", 0)
+                .attr("x", Gantt.CollapseAllLeftShift + this.xAxisProperties.outerPadding || 0)
                 .attr("y", this.secondExpandAllIconOffset)
                 .attr(this.collapseAllFlag, (this.collapsedTasks.length ? "1" : "0"));
 
@@ -2170,13 +2173,15 @@ export class Gantt implements IVisual {
                 drawCollapseButton(expandCollapseButton, buttonExpandCollapseColor);
             }
 
-            this.collapseAllGroup
-                .append("text")
-                .attr("x", this.secondExpandAllIconOffset + this.groupLabelSize)
-                .attr("y", this.groupLabelSize)
-                .attr("font-size", "12px")
-                .attr("fill", this.colorHelper.getHighContrastColor("foreground", Gantt.DefaultValues.CollapseAllTextColor))
-                .text(this.collapsedTasks.length ? this.localizationManager.getDisplayName("Visual_Expand_All") : this.localizationManager.getDisplayName("Visual_Collapse_All"));
+            if (taskLabelShow) {
+                this.collapseAllGroup
+                    .append("text")
+                    .attr("x", this.secondExpandAllIconOffset + this.groupLabelSize)
+                    .attr("y", this.groupLabelSize)
+                    .attr("font-size", "12px")
+                    .attr("fill", this.colorHelper.getHighContrastColor("foreground", Gantt.DefaultValues.CollapseAllTextColor))
+                    .text(this.collapsedTasks.length ? this.localizationManager.getDisplayName("Visual_Expand_All") : this.localizationManager.getDisplayName("Visual_Collapse_All"));
+            }
         }
     }
 
@@ -2396,19 +2401,15 @@ export class Gantt implements IVisual {
      * @param barsRoundedCorners are bars with rounded corners
      */
     private drawTaskRect(task: Task, taskConfigHeight: number, barsRoundedCorners: boolean): string {
-        // milestones are already rendered in the function MilestonesRender
-        if (task.Milestones && task.Milestones.length > 0) {
-            return undefined;
-        }
-
         const x = this.hasNotNullableDates ? Gantt.TimeScale(task.start) : 0,
             y = Gantt.getBarYCoordinate(task.index, taskConfigHeight) + (task.index + 1) * this.getResourceLabelTopMargin(),
             width = this.getTaskRectWidth(task),
             height = Gantt.getBarHeight(taskConfigHeight),
             radius = Gantt.RectRound;
 
-        if (barsRoundedCorners) {
-            return drawRoundedRectByPath(x, y, width + Gantt.RectRound, height, radius);
+
+        if (barsRoundedCorners && width >= 2 * radius) {
+            return drawRoundedRectByPath(x, y, width, height, radius);
         }
 
         return drawNotRoundedRectByPath(x, y, width, height);
@@ -2640,7 +2641,7 @@ export class Gantt implements IVisual {
                     x = x - width / 2;
                 }
 
-                if (this.formattingSettings.generalCardSettings.barsRoundedCorners.value) {
+                if (this.formattingSettings.generalCardSettings.barsRoundedCorners.value && width >= 2 * radius) {
                     return drawRoundedRectByPath(x, y, width, height, radius);
                 }
 
@@ -3109,13 +3110,13 @@ export class Gantt implements IVisual {
 
         const translateYValue: number = Gantt.TaskLabelsMarginTop + (this.ganttDiv.node() as SVGSVGElement).scrollTop;
         this.axisGroup
-            .attr("transform", SVGManipulations.translate(settings.taskLabelsCardSettings.width.value + margin.left + Gantt.SubtasksLeftMargin, translateYValue));
+            .attr("transform", SVGManipulations.translate(translateXValue, translateYValue));
 
         translateXValue = (this.ganttDiv.node() as SVGSVGElement).scrollLeft;
         this.lineGroup
             .attr("transform", SVGManipulations.translate(translateXValue, 0));
         this.collapseAllGroup
-            .attr("transform", SVGManipulations.translate(0, margin.top / 4));
+            .attr("transform", SVGManipulations.translate(0, margin.top / 4 + Gantt.AxisTopMargin));
     }
 
     private getMilestoneLineLength(numOfTasks: number): number {

diff --git a/src/utils.ts b/src/utils.ts
@@ -3,7 +3,7 @@ import lodashRange from "lodash.range";
 
 export const drawRoundedRectByPath = (x: number, y: number, width: number, height: number, radius: number) => {
     if (!width || !height) {
-        return;
+        return undefined;
     }
     const r = radius;
 
@@ -23,7 +23,7 @@ export const drawRoundedRectByPath = (x: number, y: number, width: number, heigh
 
 export const drawNotRoundedRectByPath = (x: number, y: number, width: number, height: number) => {
     if (!width || !height) {
-        return;
+        return undefined;
     }
     return `
     M${x},${y}

diff --git a/stringResources/ar-SA/resources.resjson b/stringResources/ar-SA/resources.resjson
@@ -1,13 +1,17 @@
 {
   "Role_Legend": "وسيلة إيضاح",
   "Role_Task": "المهمة",
+  "Role_Parent": "الأصل",
   "Role_StartDate": "تاريخ البدء",
   "Role_EndDate": "تاريخ الانتهاء",
   "Role_Duration": "مدة",
   "Role_Completion": "نسبة الاكتمال",
   "Role_Resource": "المورد",
+  "Role_Milestones": "المراحل الرئيسية",
   "Role_Tooltips": "تلميحات الأداة",
   "Visual_General": "عام",
+  "Visual_Short_Description": "أحد أنواع المخطط الشريطي التي توضح فترة زمنية لمشروع أو جدوله الزمني مع الموارد",
+  "Visual_Long_Description": "مخطط جانت هو أحد أنواع المخطط الشريطي لتوضيح جدول مع محور الوقت. عند وضع مخطط جانت جنبًا إلى جنب مع مخططات مميزة أخرى في لوحة تفاعلية، يمكنك إدارة مشروعك بطريقة جديدة. في Power BI مع تفاعل مرئيات مع بعضها البعض، يمكنك الاطلاع على تخصيص الموارد واكتمال المهمة والمهام المتبقية من منظور مختلف والتحكم في المستقبل.\nتعتبر مخططات جانت جزءًا ضروريًا في قائمة إدارة المشروع. يحب المدراء التنفيذيون ومدراء المشروع مخططات جانت، وذلك لأنها تعرض بطريقة موجزة وفعالة جدًا، الخط الزمني الشامل للمشروع والحالة الحالية والتقدم (أو النقص في هذا وذاك) مع المهمة بتفاصيل كبيرة.\nباستخدام هذه المرئيات المخصصة، يمكنك تحديد المهام وتاريخ البدء والمدة والنسبة المئوية للاكتمال لعرضها على جانت. الرجاء ملاحظة أنه من المتوقع أن تكون النسبة المئوية للاكتمال قيمة عشرية (على سبيل المثال فإن 0.85 تعني 85%) و تاريخ البدء حقل تاريخ وليس تسلسل هيكلي للتاريخ.\nيمكنك أيضا التحكم في لون الشريط بوسيلة إيضاح. يمكنك استخدام أي حقل ذي صلة من مشروعك كوسيلة إيضاح على سبيل المثال نوع المهمة لهذا الغرض. بالإضافة إلى ذلك، يمكنك أيضا تحديد حقل المورد، والذي قد يكون مسردًا بجانب الشريط في جانت.\nفيما يلي مرئيات مصدر مفتوح. احصل على التعليمات البرمجية من GitHub: https://github.com/Microsoft/powerbi-visuals-gantt",
   "Visual_GroupTasks": "مهام المجموعة",
   "Visual_ScrollToCurrentTime": "تمرير إلى الوقت الحالي",
   "Visual_DaysOff": "العطلات",
@@ -50,7 +54,7 @@
   "Visual_TaskSettings": "إعدادات المهمة",
   "Visual_TaskSettings_Color": "لون المهمة",
   "Visual_TaskSettings_Height": "الارتفاع",
-  "Visual_TaskSettings_RoundedCorners": "الزوايا المستديرة",
+  "Visual_BarsRoundedCorners": "زوايا أشرطة مستديرة",
   "Visual_DataLabels": "تسميات البيانات",
   "Visual_CategoryLabels": "تسميات الفئة",
   "Visual_Type": "النوع",
@@ -72,7 +76,6 @@
   "Visual_DurationUnit_Minutes": "دقائق",
   "Visual_DurationUnit_Seconds": "ثوانٍ",
   "Visual_DurationMinimum": "الحد الأدنى للمدة",
-  "Role_Parent": "الأصل",
   "Visual_SubTasks": "المهام الفرعية",
   "Visual_InheritParentLegend": "وراثة وسيلة الإيضاح الأصل",
   "Visual_ParentDurationByChildren": "مدة الأصل حسب التابع",
@@ -91,5 +94,7 @@
   "Visual_Shape_Rhombus": "مُعيَّن",
   "Visual_Shape_Square": "تربيع",
   "Visual_Shape_Circle": "دائرة",
-  "Visual_Description_Milestones": "عرض خيارات المراحل الرئيسية"
+  "Visual_Description_Milestones": "عرض خيارات المراحل الرئيسية",
+  "Visual_Expand_All": "توسيع الكل",
+  "Visual_Collapse_All": "طي الكل"
 }