From eb6e3fefb36f0802cacdbf4e1198c3724ca897dd Mon Sep 17 00:00:00 2001
From: Allen Short <ashort@mozilla.com>
Date: Mon, 9 Jul 2018 15:56:10 -0500
Subject: [PATCH] allow x-axis label truncation (re #249)

---
 .../app/visualizations/chart/chart-editor.html |  6 ++++++
 client/app/visualizations/chart/index.js       | 13 +++++++++++++
 .../app/visualizations/chart/plotly/utils.js   | 18 ++++++++++++++++--
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html
index fa2a7657c9..a98937e123 100644
--- a/client/app/visualizations/chart/chart-editor.html
+++ b/client/app/visualizations/chart/chart-editor.html
@@ -196,6 +196,12 @@
         <i class="input-helper"></i> Show Labels
       </label>
     </div>
+
+    <div class="form-group">
+      <label class="control-label">Label Length</label>
+      <input name="x-axis-label-length" type="number" class="form-control" ng-model="options.xAxisLabelLength">
+      <span class="info">How many characters should X Axis Labels be truncated at in the legend?</span>
+    </div>
   </div>
 
   <div ng-if="currentTab == 'yAxis'" class="m-t-10 m-b-10">
diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js
index 409de19a32..8f09e4d123 100644
--- a/client/app/visualizations/chart/index.js
+++ b/client/app/visualizations/chart/index.js
@@ -284,6 +284,19 @@ function ChartEditor(ColorPalette, clientConfig) {
         scope.options.legend = { enabled: true };
       }
 
+      scope.$watch('options.globalSeriesType', (newType, oldType) => {
+        const defaultXAxisLength = 10;
+        if (!has(scope.options, 'xAxisLabelLength')) {
+          scope.options.xAxisLabelLength = defaultXAxisLength;
+        }
+        if (oldType !== newType) {
+          scope.options.xAxisLabelLength = defaultXAxisLength;
+          if (newType === 'pie') {
+            scope.options.xAxisLabelLength = 300;
+          }
+        }
+      }, true);
+
       if (scope.columnNames) {
         each(scope.options.columnMapping, (value, key) => {
           if (scope.columnNames.length > 0 && !includes(scope.columnNames, key)) {
diff --git a/client/app/visualizations/chart/plotly/utils.js b/client/app/visualizations/chart/plotly/utils.js
index 1b9c94f75d..a4a1fc4401 100644
--- a/client/app/visualizations/chart/plotly/utils.js
+++ b/client/app/visualizations/chart/plotly/utils.js
@@ -208,6 +208,19 @@ function getUnifiedXAxisValues(seriesList, sorted) {
   return sorted ? sortBy(result, identity) : result;
 }
 
+const DEFAULT_XAXIS_LABEL_LENGTH = 300;
+
+// We only truncate category x-axis labels because the other types
+// are correctly formatted by Plotly.
+function truncateCategoryAxis(oldXLabel, options) {
+  const xAxisLabelLength = parseInt(options.xAxisLabelLength, 10) || DEFAULT_XAXIS_LABEL_LENGTH;
+
+  if (options && options.xAxis && options.xAxis.type === 'category') {
+    return String(oldXLabel).substr(0, xAxisLabelLength);
+  }
+  return oldXLabel;
+}
+
 function preparePieData(seriesList, options) {
   const {
     cellWidth, cellHeight, xPadding, yPadding, cellsInRow, hasX,
@@ -250,11 +263,12 @@ function preparePieData(seriesList, options) {
       });
     });
 
+    const colorPalette = ColorPaletteArray.slice();
     return {
       values: map(serie.data, i => i.y),
       labels: map(serie.data, (row, rowIdx) => {
 
-        const rowX = hasX ? normalizeValue(row.x) : `Slice ${index}`;
+        const rowX = hasX ? truncateCategoryAxis(normalizeValue(row.x), options) : `Slice ${index}`;
         const rowOpts = options.seriesOptions[rowX];
         if (rowOpts) {
           colorPalette[rowIdx] = rowOpts.color;
@@ -313,7 +327,7 @@ function prepareChartData(seriesList, options) {
     const yValues = [];
     const yErrorValues = [];
     each(data, (row) => {
-      const x = normalizeValue(row.x);
+      const x = truncateCategoryAxis(normalizeValue(row.x), options);
       const y = normalizeValue(row.y);
       const yError = normalizeValue(row.yError);
       const size = normalizeValue(row.size);