Adding various color settings (#26)

savvinsergey · ignatvilesov · commit 2118be878d9e · 2017-08-10T14:13:42.000+03:00
* Added colour settings for: Today Bar Color, Axis Color, Axis Text Color
* Added ability to set colour of Tasks if there is no legend specified.
* Increased version and added changelog for version 1.3.0
* Fixed a few lint errors
* Added localization for new settings
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 1.3.0
+ * Added colour settings for: Today Bar Color, Axis Color, Axis Text Color
+ * Added ability to set colour of Tasks if there is no legend specified.
 ## 1.2.0
  * Added ability to set minimum of task duration
 ## 1.1.0
diff --git a/capabilities.json b/capabilities.json
@@ -397,6 +397,31 @@
                 }
             }
         },
+        "taskConfig": {
+            "displayName": "Task Settings",
+            "displayNameKey": "Visual_TaskSettings",
+            "properties": {
+                "fill": {
+                    "displayName": "Task color",
+                    "displayNameKey": "Visual_TaskSettings_Color",
+                    "description": "This ONLY takes effect when you have no legend specified",
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
+                },
+                "height": {
+                    "displayName": "Height",
+                    "displayNameKey": "Visual_TaskSettings_Height",
+                    "type": {
+                        "numeric": true
+                    }
+                }
+            }
+        },
         "taskResource": {
             "displayName": "Data Labels",
             "displayNameKey": "Visual_DataLabels",
@@ -461,6 +486,39 @@
                             }
                         ]
                     }
+                },
+                "todayColor": {
+                    "displayName": "Today Color",
+                    "displayNameKey": "Visual_GanttDateType_TodayColor",
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
+                },
+                "axisColor": {
+                    "displayName": "Axis Color",
+                    "displayNameKey": "Visual_GanttDateType_AxisColor",
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
+                },
+                "axisTextColor": {
+                    "displayName": "Axis Text Color",
+                    "displayNameKey": "Visual_GanttDateType_AxisTextColor",
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
                 }
             }
         }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-gantt",
-  "version": "1.2.0",
+  "version": "1.3.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",
diff --git a/pbiviz.json b/pbiviz.json
@@ -4,7 +4,7 @@
     "displayName": "Gantt",
     "guid": "Gantt1448688115699",
     "visualClassName": "Gantt",
-    "version": "1.2.0",
+    "version": "1.3.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"
diff --git a/src/gantt.ts b/src/gantt.ts
@@ -104,7 +104,12 @@ module powerbi.extensibility.visual {
     const MillisecondsInWeek: number = 4 * MillisecondsInADay;
     const MillisecondsInAMonth: number = 30 * MillisecondsInADay;
     const MillisecondsInAYear: number = 365 * MillisecondsInADay;
-    const ChartLineHeight: number = 40;
+    function chartLineHeight(lineHeight: number): number {
+        if (!lineHeight) {
+            lineHeight = 40;
+        }
+        return lineHeight;
+    };
     const PaddingTasks: number = 5;
 
     const GanttDurationUnitType = [
@@ -501,7 +506,7 @@ module powerbi.extensibility.visual {
             };
         }
 
-        private static createLegend(dataView: DataView, host: IVisualHost, colorPalette: IColorPalette, settings: GanttSettings, taskTypes: TaskTypes): LegendData {
+        private static createLegend(host: IVisualHost, colorPalette: IColorPalette, settings: GanttSettings, taskTypes: TaskTypes): LegendData {
             const colorHelper = new ColorHelper(colorPalette, Gantt.LegendPropertyIdentifier);
             const legendData: LegendData = {
                 fontSize: settings.legend.fontSize,
@@ -529,14 +534,14 @@ module powerbi.extensibility.visual {
         * @param dataView The data Model.
         * @param formatters task attributes represented format.
         */
-
         private static createTasks(
             dataView: DataView,
             taskTypes: TaskTypes,
             host: IVisualHost,
             formatters: GanttChartFormatters,
             colors: IColorPalette,
-            settings: GanttSettings
+            settings: GanttSettings,
+            taskColor: string
         ): Task[] {
             const tasks: Task[] = [];
             const colorHelper: ColorHelper = new ColorHelper(
@@ -553,7 +558,7 @@ module powerbi.extensibility.visual {
                         const selectoinBuider: ISelectionIdBuilder = host
                             .createSelectionIdBuilder()
                             .withCategory(dataView.categorical.categories[0], index);
-                        let color = Gantt.DefaultValues.TaskColor;
+                        let color = taskColor || Gantt.DefaultValues.TaskColor;
                         const taskType = _.find(taskTypes.types, (typeMeta: TaskTypeMetadata) => typeMeta.name === group.Duration.source.groupName);
                         if (taskType) {
                             selectoinBuider
@@ -662,18 +667,22 @@ module powerbi.extensibility.visual {
                 return null;
             }
 
-            const settings: GanttSettings = GanttSettings.parse<GanttSettings>(dataView);
-
-            const taskTypes: TaskTypes = Gantt.getAllTasksTypes(dataView)
+            const settings: GanttSettings = GanttSettings.parse<GanttSettings>(dataView)
+                , taskTypes: TaskTypes = Gantt.getAllTasksTypes(dataView)
                 , formatters: GanttChartFormatters = this.getFormatters(dataView,  host.locale || null)
-                , tasks: Task[] = Gantt.createTasks(dataView, taskTypes, host, formatters, colors, settings);
+                , legendData = Gantt.createLegend(host, colors, settings, taskTypes);
+
+            let taskColor: string = (legendData.dataPoints.length <= 1)
+                ? settings.taskConfig.fill
+                : null;
 
+            const tasks: Task[] = Gantt.createTasks(dataView, taskTypes, host, formatters, colors, settings, taskColor);
             return {
                 dataView,
                 settings,
                 taskTypes,
                 tasks,
-                legendData: Gantt.createLegend(dataView, host, colors, settings, taskTypes),
+                legendData
             };
         }
 
@@ -806,7 +815,7 @@ module powerbi.extensibility.visual {
             let axisLength: number = ticks * Gantt.DefaultTicksLength;
             this.ganttSvg
                 .attr({
-                    height: PixelConverter.toString(groupedTasks.length * ChartLineHeight + this.margin.top),
+                    height: PixelConverter.toString(groupedTasks.length * chartLineHeight(this.viewModel.settings.taskConfig.height) + this.margin.top),
                     width: PixelConverter.toString(this.margin.left + this.viewModel.settings.taskLabels.width + axisLength + Gantt.DefaultValues.ResourceWidth)
                 });
             let viewportIn: IViewport = {
@@ -954,10 +963,17 @@ module powerbi.extensibility.visual {
             let xAxis: d3.svg.Axis = xAxisProperties.axis;
             xAxis.orient("bottom");
 
+
             this.axisGroup
                 .transition()
                 .duration(duration)
                 .call(xAxis);
+
+            let axisColor: string = this.viewModel.settings.dateType.axisColor;
+            let axisTextColor: string = this.viewModel.settings.dateType.axisTextColor;
+            this.axisGroup.selectAll("path").style("stroke", axisColor); // Line
+            this.axisGroup.selectAll(".tick line").style("stroke", axisColor); // ticks
+            this.axisGroup.selectAll(".tick text").style("stroke", axisTextColor); // text
         }
 
         /**
@@ -1032,9 +1048,9 @@ module powerbi.extensibility.visual {
                 .classed(Selectors.TaskRect.class, true)
                 .attr({
                     x: (task: Task) => this.timeScale(task.start),
-                    y: (task: Task) => Gantt.getBarYCoordinate(task.id),
+                    y: (task: Task) => Gantt.getBarYCoordinate(task.id, this.viewModel.settings.taskConfig.height),
                     width: (task: Task) => this.taskDurationToWidth(task),
-                    height: () => Gantt.getBarHeight()
+                    height: () => Gantt.getBarHeight(this.viewModel.settings.taskConfig.height)
                 })
                 .style("fill", (task: Task) => task.color);
 
@@ -1051,7 +1067,7 @@ module powerbi.extensibility.visual {
                 taskProgress
                     .attr({
                         x: (task: Task) => this.timeScale(task.start),
-                        y: (task: Task) => Gantt.getBarYCoordinate(task.id) + Gantt.getBarHeight() / 2 - Gantt.DefaultValues.ProgressBarHeight / 2,
+                        y: (task: Task) => Gantt.getBarYCoordinate(task.id, this.viewModel.settings.taskConfig.height) + Gantt.getBarHeight(this.viewModel.settings.taskConfig.height) / 2 - Gantt.DefaultValues.ProgressBarHeight / 2,
                         width: (task: Task) => this.setTaskProgress(task),
                         height: Gantt.DefaultValues.ProgressBarHeight
                     })
@@ -1074,7 +1090,7 @@ module powerbi.extensibility.visual {
                 taskResource
                     .attr({
                         x: (task: Task) => this.timeScale(task.end) + Gantt.TaskResourcePadding,
-                        y: (task: Task) => (Gantt.getBarYCoordinate(task.id) + (Gantt.getBarHeight() / 2) + Gantt.TaskResourcePadding)
+                        y: (task: Task) => (Gantt.getBarYCoordinate(task.id, this.viewModel.settings.taskConfig.height) + (Gantt.getBarHeight(this.viewModel.settings.taskConfig.height) / 2) + Gantt.TaskResourcePadding)
                     })
                     .text((task: Task) => task.resource)
                     .style({
@@ -1101,7 +1117,7 @@ module powerbi.extensibility.visual {
          */
         private getTaskLabelCoordinateY(taskIndex: number): number {
             const fontSize: number = + this.viewModel.settings.taskLabels.fontSize;
-            return (ChartLineHeight * taskIndex) + (Gantt.getBarHeight() + Gantt.BarHeightMargin - (ChartLineHeight - fontSize) / Gantt.ChartLineHeightDivider);
+            return (chartLineHeight(this.viewModel.settings.taskConfig.height) * taskIndex) + (Gantt.getBarHeight(this.viewModel.settings.taskConfig.height) + Gantt.BarHeightMargin - (chartLineHeight(this.viewModel.settings.taskConfig.height) - fontSize) / Gantt.ChartLineHeightDivider);
         }
 
         /**
@@ -1119,12 +1135,12 @@ module powerbi.extensibility.visual {
          * Set the task progress bar in the gantt
          * @param lineNumber Line number that represents the task number
          */
-        private static getBarYCoordinate(lineNumber: number): number {
-            return (ChartLineHeight * lineNumber) + (PaddingTasks);
+        private static getBarYCoordinate(lineNumber: number, lineHeight: number): number {
+            return (lineHeight * lineNumber) + (PaddingTasks);
         }
 
-        private static getBarHeight(): number {
-            return ChartLineHeight / Gantt.ChartLineProportion;
+        private static getBarHeight(lineHeight: number): number {
+            return lineHeight / Gantt.ChartLineProportion;
         }
 
         /**
@@ -1147,6 +1163,7 @@ module powerbi.extensibility.visual {
         * @param timestamp the milestone to be shown in the time axis (default Date.now())
         */
         private createMilestoneLine(tasks: GroupedTask[], milestoneTitle: string = "Today", timestamp: number = Date.now()): void {
+            let todayColor: string = this.viewModel.settings.dateType.todayColor;
             let line: Line[] = [{
                 x1: this.timeScale(new Date(timestamp)),
                 y1: Gantt.MilestoneTop,
@@ -1166,7 +1183,8 @@ module powerbi.extensibility.visual {
                 y1: (line: Line) => line.y1,
                 x2: (line: Line) => line.x2,
                 y2: (line: Line) => line.y2
-            });
+            })
+            .style("stroke", todayColor);
 
             this.renderTooltip(chartLineSelection);
             chartLineSelection.exit().remove();
@@ -1188,7 +1206,7 @@ module powerbi.extensibility.visual {
         }
 
         private getMilestoneLineLength(numOfTasks: number): number {
-            return numOfTasks * ChartLineHeight;
+            return numOfTasks * chartLineHeight(this.viewModel.settings.taskConfig.height);
         }
 
         public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
@@ -1222,6 +1240,7 @@ module powerbi.extensibility.visual {
                 });
             });
         }
+
         private addAnInstanceToEnumeration(
             instanceEnumeration: VisualObjectInstanceEnumeration,
             instance: VisualObjectInstance): void {
diff --git a/src/settings.ts b/src/settings.ts
@@ -33,6 +33,7 @@ module powerbi.extensibility.visual {
         general: GeneralSettings = new GeneralSettings();
         legend: LegendSettings = new LegendSettings();
         taskLabels: TaskLabelsSettings = new TaskLabelsSettings();
+        taskConfig: TaskConfigSettings = new TaskConfigSettings();
         taskCompletion: TaskCompletionSettings = new TaskCompletionSettings();
         taskResource: TaskResourceSettings = new TaskResourceSettings();
         dateType: DateTypeSettings = new DateTypeSettings();
@@ -60,6 +61,11 @@ module powerbi.extensibility.visual {
         width: number = 110;
     }
 
+    export class TaskConfigSettings {
+        fill: string = "#00B099";
+        height: number = 40;
+    }
+
     export class TaskCompletionSettings {
         show: boolean = true;
         fill: string = "#000000";
@@ -70,8 +76,12 @@ module powerbi.extensibility.visual {
         fill: string = "#000000";
         fontSize: number = 9;
     }
+
     export class DateTypeSettings {
         // tslint:disable-next-line:no-reserved-keywords
         type: GanttDateType = "Week";
+        todayColor: string = "#000000";
+        axisColor: string = "#000000";
+        axisTextColor: string = "#000000";
     }
 }
diff --git a/stringResources/en-US/resources.resjson b/stringResources/en-US/resources.resjson
@@ -28,6 +28,9 @@
     "Visual_Width": "Width",
     "Visual_TaskCompletion": "Task Completion",
     "Visual_CompletionColor": "Completion color",
+    "Visual_TaskSettings": "Task settings",
+    "Visual_TaskSettings_Color": "Color",
+    "Visual_TaskSettings_Height": "Height",
     "Visual_DataLabels": "Data Labels",
     "Visual_CategoryLabels": "Category Labels",
     "Visual_Type": "Type",
@@ -36,4 +39,7 @@
     "Visual_GanttDateType_Week": "Week",
     "Visual_GanttDateType_Month": "Month",
     "Visual_GanttDateType_Year": "Year",
+    "Visual_GanttDateType_TodayColor": "Today color",
+    "Visual_GanttDateType_AxisColor": "Axis color",
+    "Visual_GanttDateType_AxisTextColor": "Axis text color",
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "powerbi-visuals-gantt",`
`3`		`- "version": "1.2.0",`
	`3`	`+ "version": "1.3.0",`
`4`	`4`	`"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.",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`