Added cultureSelector to dates formatting (#13)

savvinsergey · ignatvilesov · commit 55aaa9e813ef · 2017-06-15T20:15:17.000+04:00
* 15383:Fixed wrong param type for startDateFormatter.format
* Added cultureSelector to dates formattings.Update API to v1.5.Solve problem with with dates values in unit tests
* Upgdate version of formattingutils package to 2.1.0
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-gantt",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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",
@@ -35,7 +35,7 @@
     "powerbi-visuals-utils-chartutils": "0.2.1",
     "powerbi-visuals-utils-colorutils": "0.2.2",
     "powerbi-visuals-utils-dataviewutils": "1.1.1",
-    "powerbi-visuals-utils-formattingutils": "1.0.0",
+    "powerbi-visuals-utils-formattingutils": "2.1.0",
     "powerbi-visuals-utils-interactivityutils": "0.3.1",
     "powerbi-visuals-utils-svgutils": "0.2.1",
     "powerbi-visuals-utils-tooltiputils": "0.3.2",
diff --git a/pbiviz.json b/pbiviz.json
@@ -4,7 +4,7 @@
     "displayName": "Gantt",
     "guid": "Gantt1448688115699",
     "visualClassName": "Gantt",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "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"
@@ -23,6 +23,9 @@
     "node_modules/lodash/lodash.min.js",
     "node_modules/globalize/lib/globalize.js",
     "node_modules/globalize/lib/cultures/globalize.culture.en-US.js",
+    "node_modules/globalize/lib/cultures/globalize.culture.en-GB.js",
+    "node_modules/globalize/lib/cultures/globalize.culture.ru-RU.js",
+    "node_modules/globalize/lib/cultures/globalize.culture.ru.js",
     "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
     "node_modules/powerbi-visuals-utils-typeutils/lib/index.js",
     "node_modules/powerbi-visuals-utils-svgutils/lib/index.js",
diff --git a/src/gantt.ts b/src/gantt.ts
@@ -428,7 +428,7 @@ module powerbi.extensibility.visual {
         * @param task All task attributes.
         * @param formatters Formatting options for gantt attributes.
         */
-        private static getTooltipInfo(task: Task, formatters: GanttChartFormatters, timeInterval: string = "Days"): VisualTooltipDataItem[] {
+        private static getTooltipInfo(task: Task, locale: string, formatters: GanttChartFormatters, timeInterval: string = "Days"): VisualTooltipDataItem[] {
             let tooltipDataArray: VisualTooltipDataItem[] = [];
 
             if (task.taskType) {
@@ -437,7 +437,7 @@ module powerbi.extensibility.visual {
 
             tooltipDataArray.push({ displayName: "Task", value: task.name });
             if (!isNaN(task.start.getDate())) {
-                tooltipDataArray.push({ displayName: "Start Date", value: formatters.startDateFormatter.format(task.start.toLocaleDateString()) });
+                tooltipDataArray.push({ displayName: "Start Date", value: formatters.startDateFormatter.format(task.start) });
             }
 
             tooltipDataArray.push({ displayName: "Duration", value: `${formatters.durationFormatter.format(task.duration)} ${timeInterval}` });
@@ -469,8 +469,9 @@ module powerbi.extensibility.visual {
         /**
          * Returns the chart formatters
          * @param dataView The data Model
+         * @param cultureSelector The current user culture
          */
-        private static getFormatters(dataView: DataView): GanttChartFormatters {
+        private static getFormatters(dataView: DataView, cultureSelector: string): GanttChartFormatters {
             if (!dataView ||
                 !dataView.metadata ||
                 !dataView.metadata.columns) {
@@ -489,7 +490,7 @@ module powerbi.extensibility.visual {
             }
 
             return <GanttChartFormatters>{
-                startDateFormatter: ValueFormatter.create({ format: dateFormat }),
+                startDateFormatter: ValueFormatter.create({ format: dateFormat, cultureSelector }),
                 durationFormatter: ValueFormatter.create({ format: numberFormat }),
                 completionFormatter: ValueFormatter.create({ format: PercentFormat, value: 1, allowFormatBeautification: true })
             };
@@ -523,6 +524,7 @@ module powerbi.extensibility.visual {
         * @param dataView The data Model.
         * @param formatters task attributes represented format.
         */
+
         private static createTasks(
             dataView: DataView,
             taskTypes: TaskTypes,
@@ -588,11 +590,12 @@ module powerbi.extensibility.visual {
                         };
 
                         task.end = d3.time.day.offset(task.start, task.duration);
-                        task.tooltipInfo = Gantt.getTooltipInfo(task, formatters);
+                        task.tooltipInfo = Gantt.getTooltipInfo(task, host.locale, formatters);
 
                         tasks.push(task);
                     }
                 });
+
             });
 
             return tasks;
@@ -613,7 +616,7 @@ module powerbi.extensibility.visual {
             const settings: GanttSettings = GanttSettings.parse<GanttSettings>(dataView);
 
             const taskTypes: TaskTypes = Gantt.getAllTasksTypes(dataView)
-                , formatters: GanttChartFormatters = this.getFormatters(dataView)
+                , formatters: GanttChartFormatters = this.getFormatters(dataView,  host.locale || null)
                 , tasks: Task[] = Gantt.createTasks(dataView, taskTypes, host, formatters, colors);
 
             return {
diff --git a/test/visualData.ts b/test/visualData.ts
@@ -73,7 +73,7 @@ module powerbi.extensibility.visual.test {
             ["Dev", "Development", "Shay"],
             ["Dev", "Desktop", "Ehren"],
             ["Dev", "Service Fixup", "James"],
-            ["Dev", "BugFixing", "Last Name"],
+            ["Dev", "BugFixing", "Last Name"]
         ];
         public valuesStartDate = GanttData.getRandomUniqueDates(this.valuesTaskTypeResource.length, new Date(2015, 7, 0), new Date(2017, 7, 0));
         public valuesDuration = GanttData.getRandomUniqueNumbers(this.valuesTaskTypeResource.length, 3, 40);
@@ -117,16 +117,16 @@ module powerbi.extensibility.visual.test {
                         roles: { "Resource": true }
                     },
                     values: this.valuesTaskTypeResource.map(x => x[2])
+                },
+                {
+                    source: {
+                        displayName: GanttData.ColumnStartDate,
+                        type: ValueType.fromDescriptor({ dateTime: true }),
+                        roles: { "StartDate": true }
+                    },
+                    values: this.valuesStartDate
                 }
             ], [
-                    {
-                        source: {
-                            displayName: GanttData.ColumnStartDate,
-                            type: ValueType.fromDescriptor({ dateTime: true }),
-                            roles: { "StartDate": true }
-                        },
-                        values: this.valuesStartDate
-                    },
                     {
                         source: {
                             displayName: GanttData.ColumnDuration,
diff --git a/test/visualTest.ts b/test/visualTest.ts
@@ -40,9 +40,11 @@ module powerbi.extensibility.visual.test {
     // powerbi.extensibility.utils.test
     import clickElement = powerbi.extensibility.utils.test.helpers.clickElement;
     import assertColorsMatch = powerbi.extensibility.utils.test.helpers.color.assertColorsMatch;
+    import mocks = powerbi.extensibility.utils.test.mocks;
 
     // powerbi.extensibility.utils.formatting
     import valueFormatter = powerbi.extensibility.utils.formatting.valueFormatter;
+    import IValueFormatter = powerbi.extensibility.utils.formatting.IValueFormatter;
 
     import LegendPosition = powerbi.extensibility.utils.chart.legend.LegendPosition;
 
@@ -126,7 +128,7 @@ module powerbi.extensibility.visual.test {
                     GanttData.ColumnCompletePrecntege]);
 
                 visualBuilder.updateRenderTimeout(dataView, () => {
-                    let tasks = d3.select(visualBuilder.element.get(0)).selectAll(".task").data();
+                    let tasks: Task[] = d3.select(visualBuilder.element.get(0)).selectAll(".task").data();
 
                     for (let task of tasks) {
                         expect(task.duration).toEqual(defaultTaskDuration);
@@ -233,6 +235,49 @@ module powerbi.extensibility.visual.test {
                 })(dateType));
             }
 
+            it("Verify date format for culture which user have chosen", (done) => {
+                let host: IVisualHost = mocks.createVisualHost();
+                host.locale = host.locale || (<any>window.navigator).userLanguage || window.navigator["language"];
+                let dateFormatter: IValueFormatter  = valueFormatter.create({format: "d", cultureSelector: host.locale});
+
+                let formattedDates: Date[] = [];
+                for (let date of defaultDataViewBuilder.valuesStartDate) {
+                    formattedDates.push(dateFormatter.format(date));
+                }
+
+                dataView = defaultDataViewBuilder.getDataView([
+                    GanttData.ColumnTask,
+                    GanttData.ColumnStartDate,
+                    GanttData.ColumnDuration]);
+
+                for (let dvColumn of dataView.metadata.columns) {
+                    if (dataView.categorical.categories) {
+                        for (let dvCategory of dataView.categorical.categories) {
+                            if (dvCategory.source.roles && dvCategory.source.roles[GanttData.ColumnStartDate]) {
+                                dvColumn.format = "d";
+                            }
+                        }
+                    }
+                }
+
+                visualBuilder.updateRenderTimeout(dataView, () => {
+                    let tasks = d3.select(visualBuilder.element.get(0)).selectAll(".task").data();
+                    for (let task of tasks) {
+                        for (let tooltipInfo of task.tooltipInfo) {
+                            if (tooltipInfo.displayName === "Start Date") {
+                                let value: VisualTooltipDataItem  = tooltipInfo.value;
+                                let idx: number = formattedDates.indexOf(value);
+
+                                expect(value).toEqual(formattedDates[idx]);
+                                formattedDates.splice(idx, 1);
+                            }
+                        }
+                    }
+
+                    done();
+                });
+            });
+
             it("Verify group tasks enabled", (done) => {
                 dataView.metadata.objects = { general: { groupTasks: true } };
 
