Intl.DateTimeFormat: Defaults for tooltip

highcharts · May 11, 2024 · 0f462ec · 0f462ec
1 parent b22745d
commit 0f462ec
Show file tree

Hide file tree

Showing 11 changed files with 272 additions and 175 deletions.
diff --git a/samples/highcharts/studies/intl-datetimeformat/demo.js b/samples/highcharts/studies/intl-datetimeformat/demo.js
@@ -20,58 +20,6 @@ Highcharts.setOptions({
         // locale: 'en-US'
     },
 
-    tooltip: {
-        dateTimeLabelFormats: {
-            millisecond: {
-                weekday: 'long',
-                month: 'short',
-                hour: 'numeric',
-                minute: 'numeric',
-                second: 'numeric',
-                fractionalSecondDigits: 3
-            },
-            second: {
-                weekday: 'long',
-                month: 'short',
-                hour: 'numeric',
-                minute: 'numeric',
-                second: 'numeric'
-            },
-            minute: {
-                weekday: 'long',
-                month: 'short',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric'
-            },
-            hour: {
-                weekday: 'long',
-                month: 'short',
-                day: 'numeric',
-                hour: 'numeric'
-            },
-            day: {
-                weekday: 'long',
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric'
-            },
-            week: {
-                weekday: 'long',
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric'
-            },
-            month: {
-                month: 'long',
-                year: 'numeric'
-            },
-            year: {
-                year: 'numeric'
-            }
-        }
-    },
-
     rangeSelector: {
         inputDateFormat: {
             dateStyle: 'long'
@@ -140,6 +88,24 @@ Highcharts.setOptions({
     }
 });
 
+// Legacy options
+/*
+Highcharts.setOptions({
+    tooltip: {
+        dateTimeLabelFormats: {
+            millisecond: '%A, %e %b, %H:%M:%S.%L',
+            second: '%A, %e %b, %H:%M:%S',
+            minute: '%A, %e %b, %H:%M',
+            hour: '%A, %e %b, %H:%M',
+            day: '%A, %e %b %Y',
+            week: 'Week from %A, %e %b %Y',
+            month: '%B %Y',
+            year: '%Y'
+        }
+    }
+});
+// */
+
 (async () => {
 
     const data = await fetch(

diff --git a/samples/unit-tests/gantt/tooltip/demo.js b/samples/unit-tests/gantt/tooltip/demo.js
@@ -1,5 +1,8 @@
 QUnit.test('Gantt tooltip', assert => {
     const chart = Highcharts.ganttChart('container', {
+        time: {
+            locale: 'en-GB'
+        },
         series: [
             {
                 data: [
@@ -22,7 +25,7 @@ QUnit.test('Gantt tooltip', assert => {
     assert.strictEqual(
         chart.tooltip.label.text.element.textContent
             .replace(/\u200B/g, ';'),
-        'Series 1;Task;Start: Tuesday,  1 Jan 2019;End: Monday,  7 Jan 2019;',
+        'Series 1;Task;Start: Tuesday, 1 Jan 2019;End: Monday, 7 Jan 2019;',
         'All times on midnight - tooltip should show the date without time'
     );
 
@@ -31,7 +34,7 @@ QUnit.test('Gantt tooltip', assert => {
     assert.strictEqual(
         chart.tooltip.label.text.element.textContent
             .replace(/\u200B/g, ';'),
-        'Series 1;Milestone;Saturday,  5 Jan 2019;',
+        'Series 1;Milestone;Saturday, 5 Jan 2019;',
         'All times on midnight - tooltip should show the date without time'
     );
 
@@ -58,8 +61,8 @@ QUnit.test('Gantt tooltip', assert => {
         [
             'Series 1',
             'Task',
-            'Start: Tuesday,  1 Jan, 08:00',
-            'End: Monday,  7 Jan, 16:00',
+            'Start: Tuesday, 1 Jan, 08:00',
+            'End: Monday, 7 Jan, 16:00',
             ''
         ],
         'Intraday times - tooltip should show the date and time of day'
@@ -70,7 +73,7 @@ QUnit.test('Gantt tooltip', assert => {
     assert.strictEqual(
         chart.tooltip.label.text.element.textContent
             .replace(/\u200B/g, ';'),
-        'Series 1;Milestone;Saturday,  5 Jan, 12:00;',
+        'Series 1;Milestone;Saturday, 5 Jan, 12:00;',
         'Intraday times - tooltip should show the date and time of day'
     );
 });
@@ -81,7 +84,8 @@ QUnit.test(
     function (assert) {
         var chart = Highcharts.ganttChart('container', {
                 time: {
-                    timezoneOffset: 6 * 60
+                    timezoneOffset: 6 * 60,
+                    locale: 'en-GB'
                 },
                 series: [
                     {
@@ -102,7 +106,7 @@ QUnit.test(
         assert.strictEqual(
             chart.container.querySelector('.highcharts-tooltip').textContent
                 .replace(/\u200B/g, ';'),
-            'Series 1;Task 1;Start: Monday,  1 Jun, 18:00;End: Tuesday,  2 ' +
+            'Series 1;Task 1;Start: Monday, 1 Jun, 18:00;End: Tuesday, 2 ' +
             'Jun, 18:00;',
             'The tooltip should show the start and end shifted 6 hours ' +
             'relative to UTC.'

diff --git a/samples/unit-tests/gantt/xrange-series/demo.js b/samples/unit-tests/gantt/xrange-series/demo.js
@@ -6,6 +6,9 @@
             chart: {
                 type: 'xrange'
             },
+            time: {
+                locale: 'en-US'
+            },
             xAxis: {
                 type: 'datetime',
                 min: Date.UTC(2014, 11, 1),

diff --git a/samples/unit-tests/series-xrange/xrange/demo.js b/samples/unit-tests/series-xrange/xrange/demo.js
@@ -856,6 +856,9 @@ QUnit.test('XRange series tooltip correct formatting (#19362)', assert => {
         chart: {
             type: 'xrange'
         },
+        time: {
+            locale: 'en-GB'
+        },
         title: {
             text: 'X-range standard'
         },
@@ -936,7 +939,7 @@ QUnit.test('XRange series tooltip correct formatting (#19362)', assert => {
     tooltipText = chart.tooltip.label.text.textStr;
 
     assert.ok(
-        tooltipText.includes('Saturday,  2 Dec 2023 - Tuesday,  5 Dec 2023'),
+        tooltipText.includes('Saturday, 2 Dec 2023 - Tuesday, 5 Dec 2023'),
         'Tooltip for datetime axis is correctly formatted.'
     );
 

diff --git a/samples/unit-tests/series/pointstart/demo.js b/samples/unit-tests/series/pointstart/demo.js
@@ -4,6 +4,9 @@ QUnit.test(
     'Tooltip shown week formats, should be date (#3418)',
     function (assert) {
         var chart = Highcharts.chart('container', {
+            time: {
+                locale: 'en-GB'
+            },
             xAxis: {
                 type: 'datetime'
             },
@@ -18,10 +21,10 @@ QUnit.test(
         var controller = new TestController(chart),
             series = chart.series[0],
             expectedTexts = [
-                'Wednesday,  1 Jan 2014',
-                'Friday,  3 Jan 2014',
-                'Sunday,  5 Jan 2014',
-                'Tuesday,  7 Jan 2014'
+                'Wednesday, 1 Jan 2014',
+                'Friday, 3 Jan 2014',
+                'Sunday, 5 Jan 2014',
+                'Tuesday, 7 Jan 2014'
             ],
             texts = [],
             pointX = 0,

diff --git a/samples/unit-tests/time/timezone/demo.html b/samples/unit-tests/time/timezone/demo.html
@@ -1,4 +1,5 @@
 <script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha512-G9dfCJFG3y/Xq8mbbqb5i3FQNVaGl0Fkkw+VPVT3L00gA4k7hyjSGNpAxykwgDw1cfJFlj5tO3XePa+ezjDQyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js" integrity="sha512-Y8d6BbhI4GzeJHoBlve3Rei3fbL//XjwOibnnivgOQp20pfETxlre9CPlH6mLKzvhfsQtW0M7RpaD4tj0W6L3A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 

diff --git a/samples/unit-tests/time/timezone/demo.js b/samples/unit-tests/time/timezone/demo.js
@@ -90,6 +90,15 @@ QUnit.test('timezone', function (assert) {
         'Non full-hour timezone - UTC midnight should render 05:00 in Calcutta'
     );
 
+    assert.equal(
+        chart.time.dateFormat({
+            hour: 'numeric',
+            minute: 'numeric'
+        }, oct27Point.x),
+        '05:30',
+        'Non full-hour timezone - UTC midnight should render 05:00 in Calcutta'
+    );
+
     chart.update({
         time: {
             timezone: 'Asia/Katmandu'
@@ -188,3 +197,48 @@ QUnit.test('getTimezoneOffset', function (assert) {
         }
     });
 });
+
+QUnit.test('Time class', assert => {
+    // The timezone option
+    const time1 = new Highcharts.Time({
+        timezone: 'Europe/Oslo',
+        locale: 'en-GB'
+    });
+
+    assert.strictEqual(
+        time1.dateFormat('%H:%M', Date.UTC(2014, 6, 3)),
+        '02:00',
+        'Time class should respect the timezone option with string format'
+    );
+
+    assert.strictEqual(
+        time1.dateFormat({
+            hour: 'numeric',
+            minute: 'numeric'
+        }, Date.UTC(2014, 6, 3)),
+        '02:00',
+        'Time class should respect the timezone option with object format'
+    );
+
+    // The timezoneOffset option
+    const time2 = new Highcharts.Time({
+        timezoneOffset: 6 * 60,
+        locale: 'en-GB'
+    });
+
+    assert.strictEqual(
+        time2.dateFormat('%H:%M', Date.UTC(2014, 6, 3)),
+        '18:00',
+        'Time class should respect the timezoneOffset option with string format'
+    );
+
+    assert.strictEqual(
+        time2.dateFormat({
+            hour: 'numeric',
+            minute: 'numeric'
+        }, Date.UTC(2014, 6, 3)),
+        '18:00',
+        'Time class should respect the timezoneOffset option with object format'
+    );
+
+});
diff --git a/samples/unit-tests/tooltip/sub-millisec-tooltip/demo.js b/samples/unit-tests/tooltip/sub-millisec-tooltip/demo.js
@@ -1,5 +1,5 @@
 QUnit.test('Sub-millisecond tooltip(#4223)', function (assert) {
-    var chart = new Highcharts.Chart({
+    const chart = new Highcharts.Chart({
         chart: {
             renderTo: 'container'
         },
@@ -21,12 +21,11 @@ QUnit.test('Sub-millisecond tooltip(#4223)', function (assert) {
         ]
     });
 
-    assert.equal(
-        chart.xAxis[0].dateTime.getXDateFormat(
-            chart.series[0].points[0].x,
-            chart.options.tooltip.dateTimeLabelFormats
-        ),
-        '%A, %e %b, %H:%M:%S.%L',
-        'Milliseconds are preserved in tooltip'
+    chart.tooltip.refresh(chart.series[0].points[0]);
+
+    assert.notEqual(
+        chart.tooltip.label.text.element.textContent.indexOf('841'),
+        -1,
+        'Milliseconds should be preserved in tooltip'
     );
 });
diff --git a/test/karma-conf.js b/test/karma-conf.js
@@ -377,7 +377,8 @@ module.exports = function (config) {
         logLevel: config.LOG_INFO,
         browserConsoleLogOptions: {
             path: `${process.cwd()}/test/console.log`,
-            terminal: false
+            // Show in terminal only when running specific tests for debugging
+            terminal: Boolean(argv.tests)
         },
         browsers: browsers,
         autoWatch: false,

diff --git a/ts/Core/Defaults.ts b/ts/Core/Defaults.ts
@@ -2418,21 +2418,63 @@ const defaultOptions: DefaultOptions = {
          */
         dateTimeLabelFormats: {
             /** @internal */
-            millisecond: '%A, %e %b, %H:%M:%S.%L',
+            millisecond: ({
+                month: 'short',
+                weekday: 'long',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric',
+                fractionalSecondDigits: 3
+            } as any),
             /** @internal */
-            second: '%A, %e %b, %H:%M:%S',
+            second: {
+                month: 'short',
+                weekday: 'long',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric'
+            },
             /** @internal */
-            minute: '%A, %e %b, %H:%M',
+            minute: {
+                month: 'short',
+                weekday: 'long',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric'
+            },
             /** @internal */
-            hour: '%A, %e %b, %H:%M',
+            hour: {
+                month: 'short',
+                weekday: 'long',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric'
+            },
             /** @internal */
-            day: '%A, %e %b %Y',
+            day: {
+                year: 'numeric',
+                month: 'short',
+                weekday: 'long',
+                day: 'numeric'
+            },
             /** @internal */
-            week: 'Week from %A, %e %b %Y',
+            week: {
+                year: 'numeric',
+                month: 'short',
+                weekday: 'long',
+                day: 'numeric'
+            },
             /** @internal */
-            month: '%B %Y',
+            month: {
+                month: 'long',
+                year: 'numeric'
+            },
             /** @internal */
-            year: '%Y'
+            year: {
+                year: 'numeric'
+            }
         },
 
         /**