commit 320f730b275543674afd6e75c147a76811b72de7
author Ilya Borisov <klaster1@gmail.com> Thu Mar 28 21:16:16 2019 +0700
committer Alexey Kuznetsov <akuznetsov@apache.org> Thu Mar 28 21:16:16 2019 +0700
tree 8daf61b5cc9715b3f339c2f793e997d5d13ba7f7
parent c4207f8f2a2371f32c2dcbc2e6b54c01b06f2a40

IGNITE-11135 Web Console: Fixed incorrect time format in the chart's tooltip.

frontend/app/components/ignite-chart/controller.js

diff --git a/frontend/app/components/ignite-chart/controller.js b/frontend/app/components/ignite-chart/controller.js
index b611250..39707b3 100644
--- a/frontend/app/components/ignite-chart/controller.js
+++ b/frontend/app/components/ignite-chart/controller.js
@@ -16,6 +16,7 @@
  */
 
 import _ from 'lodash';
+import moment from 'moment';
 
 /**
  * @typedef {{x: number, y: {[key: string]: number}}} IgniteChartDataPoint
@@ -29,6 +30,18 @@
     {label: '30 min', value: 30}
 ];
 
+/**
+ * Determines what label format was chosen by determineLabelFormat function
+ * in Chart.js streaming plugin.
+ * 
+ * @param {string} label
+ */
+const inferLabelFormat = (label) => {
+    if (label.match(/\.\d{3} (am|pm)$/)) return 'MMM D, YYYY h:mm:ss.SSS a';
+    if (label.match(/:\d{1,2} (am|pm)$/)) return 'MMM D, YYYY h:mm:ss a';
+    if (label.match(/ \d{4}$/)) return 'MMM D, YYYY';
+};
+
 export class IgniteChartController {
     /** @type {import('chart.js').ChartConfiguration} */
     chartOptions;
@@ -197,7 +210,7 @@
                     bodyFontSize: 13,
                     callbacks: {
                         title: (tooltipItem) => {
-                            return tooltipItem[0].xLabel.slice(0, -7);
+                            return tooltipItem[0].xLabel = moment(tooltipItem[0].xLabel, inferLabelFormat(tooltipItem[0].xLabel)).format('HH:mm:ss');
                         },
                         label: (tooltipItem, data) => {
                             const label = data.datasets[tooltipItem.datasetIndex].label || '';