Added Hours,Minutes,Seconds date types for axis (#37)

savvinsergey · ignatvilesov · commit 1a6ed8eb2432 · 2017-08-22T17:12:40.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,5 @@
+## 1.4.0
+ * Added new date types for x-axis(Quarter, Hours, Minutes, Seconds)
 ## 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.
diff --git a/capabilities.json b/capabilities.json
@@ -456,40 +456,60 @@
             }
         },
         "dateType": {
-            "displayName": "Gantt Date type",
-            "displayNameKey": "Visual_GanttDateType",
+            "displayName": "Date type",
+            "displayNameKey": "Visual_DateType",
             "properties": {
                 "type": {
                     "displayName": "Type",
                     "displayNameKey": "Visual_Type",
                     "type": {
                         "enumeration": [
+                            {
+                                "value": "Second",
+                                "displayName": "Second",
+                                "displayNameKey": "Visual_DateType_Second"
+                            },
+                            {
+                                "value": "Minute",
+                                "displayName": "Minute",
+                                "displayNameKey": "Visual_DateType_Minute"
+                            },
+                            {
+                                "value": "Hour",
+                                "displayName": "Hour",
+                                "displayNameKey": "Visual_DateType_Hour"
+                            },
                             {
                                 "value": "Day",
                                 "displayName": "Day",
-                                "displayNameKey": "Visual_GanttDateType_Day"
+                                "displayNameKey": "Visual_DateType_Day"
                             },
                             {
                                 "value": "Week",
                                 "displayName": "Week",
-                                "displayNameKey": "Visual_GanttDateType_Week"
+                                "displayNameKey": "Visual_DateType_Week"
                             },
                             {
                                 "value": "Month",
                                 "displayName": "Month",
-                                "displayNameKey": "Visual_GanttDateType_Month"
+                                "displayNameKey": "Visual_DateType_Month"
+                            },
+                            {
+                                "value": "Quarter",
+                                "displayName": "Quarter",
+                                "displayNameKey": "Visual_DateType_Quarter"
                             },
                             {
                                 "value": "Year",
                                 "displayName": "Year",
-                                "displayNameKey": "Visual_GanttDateType_Year"
+                                "displayNameKey": "Visual_DateType_Year"
                             }
                         ]
                     }
                 },
                 "todayColor": {
                     "displayName": "Today Color",
-                    "displayNameKey": "Visual_GanttDateType_TodayColor",
+                    "displayNameKey": "Visual_DateType_TodayColor",
                     "type": {
                         "fill": {
                             "solid": {
@@ -500,7 +520,7 @@
                 },
                 "axisColor": {
                     "displayName": "Axis Color",
-                    "displayNameKey": "Visual_GanttDateType_AxisColor",
+                    "displayNameKey": "Visual_DateType_AxisColor",
                     "type": {
                         "fill": {
                             "solid": {
@@ -511,7 +531,7 @@
                 },
                 "axisTextColor": {
                     "displayName": "Axis Text Color",
-                    "displayNameKey": "Visual_GanttDateType_AxisTextColor",
+                    "displayNameKey": "Visual_DateType_AxisTextColor",
                     "type": {
                         "fill": {
                             "solid": {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-gantt",
-  "version": "1.3.0",
+  "version": "1.4.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.3.0",
+    "version": "1.4.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
@@ -100,10 +100,14 @@ module powerbi.extensibility.visual {
     import timeScale = d3.time.Scale;
 
     const PercentFormat: string = "0.00 %;-0.00 %;0.00 %";
-    const MillisecondsInADay: number = 24 * 60 * 60 * 1000;
+    const MillisecondsInASecond: number = 1000;
+    const MillisecondsInAMinute: number = 60 * MillisecondsInASecond;
+    const MillisecondsInAHour: number = 60 * MillisecondsInAMinute;
+    const MillisecondsInADay: number = 24 * MillisecondsInAHour;
     const MillisecondsInWeek: number = 4 * MillisecondsInADay;
     const MillisecondsInAMonth: number = 30 * MillisecondsInADay;
     const MillisecondsInAYear: number = 365 * MillisecondsInADay;
+    const MillisecondsInAQuarter: number = MillisecondsInAYear / 4;
     const PaddingTasks: number = 5;
     const DefaultChartLineHeight = 40;
     const GanttDurationUnitType = [
@@ -246,9 +250,13 @@ module powerbi.extensibility.visual {
             TaskLineWidth: 15,
             DefaultDateType: "Week",
             DateFormatStrings: {
+                Second: "HH:mm:ss",
+                Minute: "HH:mm:ss",
+                Hour: "(dd) HH:mm",
                 Day: "MMM dd",
                 Week: "MMM dd",
                 Month: "MMM yyyy",
+                Quarter: "MMM yyyy",
                 Year: "yyyy"
             }
         };
@@ -908,6 +916,15 @@ module powerbi.extensibility.visual {
 
         private static getDateType(dateType: string): number {
             switch (dateType) {
+                case "Second":
+                    return MillisecondsInASecond;
+
+                case "Minute":
+                    return MillisecondsInAMinute;
+
+                case "Hour":
+                    return MillisecondsInAHour;
+
                 case "Day":
                     return MillisecondsInADay;
 
@@ -917,6 +934,9 @@ module powerbi.extensibility.visual {
                 case "Month":
                     return MillisecondsInAMonth;
 
+                case "Quarter":
+                    return MillisecondsInAQuarter;
+
                 case "Year":
                     return MillisecondsInAYear;
 
diff --git a/src/settings.ts b/src/settings.ts
@@ -27,7 +27,7 @@
 module powerbi.extensibility.visual {
     // powerbi.extensibility.utils.dataview
     import DataViewObjectsParser = utils.dataview.DataViewObjectsParser;
-    export type GanttDateType = "Day" | "Week" | "Month" | "Year";
+    export type DateType = "Second" | "Minute" | "Hour" | "Day" | "Week" | "Month" | "Year";
 
     export class GanttSettings extends DataViewObjectsParser {
         general: GeneralSettings = new GeneralSettings();
@@ -79,7 +79,7 @@ module powerbi.extensibility.visual {
 
     export class DateTypeSettings {
         // tslint:disable-next-line:no-reserved-keywords
-        type: GanttDateType = "Week";
+        type: DateType = "Week";
         todayColor: string = "#000000";
         axisColor: string = "#000000";
         axisTextColor: string = "#000000";
diff --git a/stringResources/en-US/resources.resjson b/stringResources/en-US/resources.resjson
@@ -34,12 +34,15 @@
     "Visual_DataLabels": "Data Labels",
     "Visual_CategoryLabels": "Category Labels",
     "Visual_Type": "Type",
-    "Visual_GanttDateType": "Gantt Date type",
-    "Visual_GanttDateType_Day": "Day",
-    "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"
+    "Visual_DateType": "Date type",
+    "Visual_DateType_Second": "Second",
+    "Visual_DateType_Minute": "Minute",
+    "Visual_DateType_Hour": "Hour",
+    "Visual_DateType_Day": "Day",
+    "Visual_DateType_Week": "Week",
+    "Visual_DateType_Month": "Month",
+    "Visual_DateType_Year": "Year",
+    "Visual_DateType_TodayColor": "Today color",
+    "Visual_DateType_AxisColor": "Axis color",
+    "Visual_DateType_AxisTextColor": "Axis text color"
 }
diff --git a/test/visualTest.ts b/test/visualTest.ts
@@ -48,10 +48,14 @@ module powerbi.extensibility.visual.test {
 
     import LegendPosition = powerbi.extensibility.utils.chart.legend.LegendPosition;
 
-    export enum GanttDateType {
+    export enum DateTypes {
+        Second = <any>"Second",
+        Minute = <any>"Minute",
+        Hour = <any>"Hour",
         Day = <any>"Day",
         Week = <any>"Week",
         Month = <any>"Month",
+        Quarter = <any>"Quarter",
         Year = <any>"Year"
     }
 
@@ -221,8 +225,21 @@ module powerbi.extensibility.visual.test {
                 });
             });
 
-            for (let dateType in GanttDateType) {
+            for (let dateType in DateTypes) {
                 it(`Verify date format (${dateType})`, ((dateType) => (done) => {
+                    switch (dateType) {
+                        case "Second":
+                        case "Minute":
+                        case "Hour":
+                            defaultDataViewBuilder.valuesStartDate = GanttData.getRandomUniqueDates(
+                                defaultDataViewBuilder.valuesTaskTypeResource.length,
+                                new Date(2017, 7, 0),
+                                new Date(2017, 7, 1)
+                            );
+                            dataView = defaultDataViewBuilder.getDataView();
+                            break;
+                    }
+
                     dataView.metadata.objects = { dateType: { type: dateType } };
 
                     visualBuilder.updateRenderTimeout(dataView, () => {

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+## 1.4.0`
	`2`	`+ * Added new date types for x-axis(Quarter, Hours, Minutes, Seconds)`
`1`	`3`	`## 1.3.0`
`2`	`4`	`* Added colour settings for: Today Bar Color, Axis Color, Axis Text Color`
`3`	`5`	`* Added ability to set colour of Tasks if there is no legend specified.`
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.3.0",`
	`3`	`+ "version": "1.4.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",`