From 10c6d1ce62747dd2719bd5b85dbc8491abaf9b2f Mon Sep 17 00:00:00 2001
From: Marina Samuel <msamuel@mozilla.com>
Date: Thu, 19 Apr 2018 10:24:37 -0400
Subject: [PATCH] Closes #374: Truncating x-axis should be done to ticktext not
 x values.

---
 .../app/visualizations/chart/plotly/utils.js  | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/client/app/visualizations/chart/plotly/utils.js b/client/app/visualizations/chart/plotly/utils.js
index ad563535a4..66c43dad28 100644
--- a/client/app/visualizations/chart/plotly/utils.js
+++ b/client/app/visualizations/chart/plotly/utils.js
@@ -183,12 +183,11 @@ function preparePieData(seriesList, options) {
   } = calculateDimensions(seriesList, options);
 
   const colorPalette = ColorPaletteArray.slice();
-  const xAxisLabelLength = parseInt(options.xAxisLabelLength, 10) || DEFAULT_XAXIS_LABEL_LENGTH;
   return map(seriesList, (serie, index) => {
     const xPosition = (index % cellsInRow) * cellWidth;
     const yPosition = Math.floor(index / cellsInRow) * cellHeight;
     const labels = map(serie.data, (row, rowIdx) => {
-      const rowX = hasX ? row.x.substr(0, xAxisLabelLength) : `Slice ${index}`;
+      const rowX = hasX ? row.x : `Slice ${index}`;
       const rowOpts = options.seriesOptions[rowX];
       if (rowOpts) {
         colorPalette[rowIdx] = rowOpts.color;
@@ -230,8 +229,7 @@ function prepareChartData(seriesList, options) {
     const yValues = [];
     const yErrorValues = [];
     each(data, (row) => {
-      const xAxisLabelLength = parseInt(options.xAxisLabelLength, 10) || DEFAULT_XAXIS_LABEL_LENGTH;
-      const x = normalizeValue(row.x).substr(0, xAxisLabelLength);
+      const x = normalizeValue(row.x);
       const y = normalizeValue(row.y);
       const yError = normalizeValue(row.yError);
       sourceData.set(x, {
@@ -380,6 +378,19 @@ export function prepareLayout(element, seriesList, options, data) {
     }
   }
 
+  // Truncate x-axis labels using ticktext.
+  // Example can be found here: https://plot.ly/javascript/axes/#enumerated-ticks-with-tickvals-and-ticktext
+  let ticktext, tickvals;
+  const xAxisLabelLength = parseInt(options.xAxisLabelLength, 10) || DEFAULT_XAXIS_LABEL_LENGTH;
+  if (data.length > 0) {
+    ticktext = map(data[0].x, xVal => String(xVal).substr(0, xAxisLabelLength));
+    tickvals = data[0].x;
+  }
+  if (ticktext && tickvals) {
+    result.xaxis.ticktext = ticktext;
+    result.xaxis.tickvals = tickvals;
+  }
+
   return result;
 }