prevent cropped last xaxis label - fixes #305; fix wrong formatter fu…

…nction being applied for tooltips
apexcharts · Jun 22, 2019 · 1155c07 · 1155c07
1 parent 336e8ac
commit 1155c07
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 30 deletions.
diff --git a/src/modules/Dimensions.js b/src/modules/Dimensions.js
@@ -322,6 +322,10 @@ export default class Dimensions {
             // we have to make it false again in case of zooming/panning
             w.globals.skipLastTimelinelabel = false
           }
+        } else if (w.config.xaxis.type === 'datetime') {
+          if (w.config.grid.padding.right < labels.width) {
+            w.globals.skipLastTimelinelabel = true
+          }
         } else if (w.config.xaxis.type !== 'datetime') {
           if (w.config.grid.padding.right < labels.width) {
             this.xPadRight = labels.width / 2 + 1
@@ -532,7 +536,8 @@ export default class Dimensions {
       }
 
       let xFormat = new Formatters(this.ctx)
-      val = xFormat.xLabelFormat(xlbFormatter, val)
+      let timestamp = val
+      val = xFormat.xLabelFormat(xlbFormatter, val, timestamp)
 
       let graphics = new Graphics(this.ctx)
 

diff --git a/src/modules/Formatters.js b/src/modules/Formatters.js
@@ -14,23 +14,25 @@ class Formatters {
     this.tooltipKeyFormat = 'dd MMM'
   }
 
-  xLabelFormat(fn, val) {
+  xLabelFormat(fn, val, timestamp) {
     let w = this.w
 
     if (w.config.xaxis.type === 'datetime') {
-      // if user has not specified a custom formatter, use the default tooltip.x.format
-      if (w.config.tooltip.x.formatter === undefined) {
-        let datetimeObj = new DateTime(this.ctx)
-        return datetimeObj.formatDate(
-          new Date(val),
-          w.config.tooltip.x.format,
-          true,
-          true
-        )
+      if (w.config.xaxis.labels.formatter === undefined) {
+        // if user has not specified a custom formatter, use the default tooltip.x.format
+        if (w.config.tooltip.x.formatter === undefined) {
+          let datetimeObj = new DateTime(this.ctx)
+          return datetimeObj.formatDate(
+            new Date(val),
+            w.config.tooltip.x.format,
+            true,
+            true
+          )
+        }
       }
     }
 
-    return fn(val)
+    return fn(val, timestamp)
   }
 
   setLabelFormatters() {
@@ -56,8 +58,26 @@ class Formatters {
       return val
     }
 
+    // formatter function will always overwrite format property
+    if (w.config.xaxis.labels.formatter !== undefined) {
+      w.globals.xLabelFormatter = w.config.xaxis.labels.formatter
+    } else {
+      w.globals.xLabelFormatter = function(val) {
+        if (Utils.isNumber(val)) {
+          // numeric xaxis may have smaller range, so defaulting to 1 decimal
+          if (w.config.xaxis.type === 'numeric' && w.globals.dataPoints < 50) {
+            return val.toFixed(1)
+          }
+          return val.toFixed(0)
+        }
+        return val
+      }
+    }
+
     if (typeof w.config.tooltip.x.formatter === 'function') {
       w.globals.ttKeyFormatter = w.config.tooltip.x.formatter
+    } else {
+      w.globals.ttKeyFormatter = w.globals.xLabelFormatter
     }
 
     if (typeof w.config.xaxis.tooltip.formatter === 'function') {
@@ -81,22 +101,6 @@ class Formatters {
       w.globals.legendFormatter = w.config.legend.formatter
     }
 
-    // formatter function will always overwrite format property
-    if (w.config.xaxis.labels.formatter !== undefined) {
-      w.globals.xLabelFormatter = w.config.xaxis.labels.formatter
-    } else {
-      w.globals.xLabelFormatter = function(val) {
-        if (Utils.isNumber(val)) {
-          // numeric xaxis may have smaller range, so defaulting to 1 decimal
-          if (w.config.xaxis.type === 'numeric' && w.globals.dataPoints < 50) {
-            return val.toFixed(1)
-          }
-          return val.toFixed(0)
-        }
-        return val
-      }
-    }
-
     // formatter function will always overwrite format property
     w.config.yaxis.forEach((yaxe, i) => {
       if (yaxe.labels.formatter !== undefined) {

diff --git a/src/modules/axes/AxesUtils.js b/src/modules/axes/AxesUtils.js
@@ -17,7 +17,8 @@ export default class AxesUtils {
     let customFormatter = w.config.xaxis.labels.formatter
 
     let xFormat = new Formatters(this.ctx)
-    label = xFormat.xLabelFormat(xlbFormatter, rawLabel)
+    let timestamp = rawLabel
+    label = xFormat.xLabelFormat(xlbFormatter, rawLabel, timestamp)
 
     if (customFormatter !== undefined) {
       label = customFormatter(rawLabel, labels[i], i)

diff --git a/src/modules/tooltip/Labels.js b/src/modules/tooltip/Labels.js
@@ -320,7 +320,11 @@ export default class Labels {
 
     if (w.globals.isXNumeric && w.config.xaxis.type === 'datetime') {
       let xFormat = new Formatters(this.ctx)
-      xVal = xFormat.xLabelFormat(w.globals.ttKeyFormatter, bufferXVal)
+      xVal = xFormat.xLabelFormat(
+        w.globals.ttKeyFormatter,
+        bufferXVal,
+        bufferXVal
+      )
     } else {
       xVal = w.globals.xLabelFormatter(bufferXVal, customFormatterOpts)
     }