From e5a112cac9533b175caa5e1ddcb809fba2325e4e Mon Sep 17 00:00:00 2001
From: Alison <github@bankofknowledge.net>
Date: Mon, 11 Sep 2017 14:54:18 -0500
Subject: [PATCH] allow x-axis label truncation (re #249)

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

diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html
index 8eca56eef8..4bf2436ddf 100644
--- a/client/app/visualizations/chart/chart-editor.html
+++ b/client/app/visualizations/chart/chart-editor.html
@@ -176,6 +176,12 @@
       <label class="control-label">Height</label>
       <input name="x-axis-height" type="number" class="form-control" ng-model="options.bottomMargin">
     </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-show="currentTab == 'yAxis'">
diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js
index d891c9647b..e48998cb32 100644
--- a/client/app/visualizations/chart/index.js
+++ b/client/app/visualizations/chart/index.js
@@ -252,6 +252,10 @@ function ChartEditor(ColorPalette, clientConfig) {
         scope.options.bottomMargin = 50;
       }
 
+      if (!has(scope.options, 'xAxisLabelLength')) {
+        scope.options.xAxisLabelLength = 300;
+      }
+
       if (scope.columnNames) {
         each(scope.options.columnMapping, (value, key) => {
           if (scope.columnNames.length > 0 && !contains(scope.columnNames, key)) {
diff --git a/client/app/visualizations/chart/plotly.js b/client/app/visualizations/chart/plotly.js
index 9ec6c073b5..7e0c3d9ca6 100644
--- a/client/app/visualizations/chart/plotly.js
+++ b/client/app/visualizations/chart/plotly.js
@@ -14,6 +14,7 @@ Plotly.setPlotConfig({
 });
 
 const DEFAULT_BOTTOM_MARGIN = 50;
+const DEFAULT_XAXIS_LABEL_LENGTH = 300;
 
 // The following colors will be used if you pick "Automatic" color.
 const BaseColors = {
@@ -231,6 +232,11 @@ const PlotlyChart = () => ({
 
       scope.data.length = 0;
       scope.layout.showlegend = has(scope.options, 'legend') ? scope.options.legend.enabled : true;
+      scope.layout.legend = {
+        bgcolor: '#cccccc',
+        wordWrap: 'normal',
+      };
+      const xAxisLabelLength = has(scope.options, 'xAxisLabelLength') ? parseInt(scope.options.xAxisLabelLength, 10) : DEFAULT_XAXIS_LABEL_LENGTH;
       delete scope.layout.barmode;
       delete scope.layout.xaxis;
       delete scope.layout.yaxis;
@@ -279,8 +285,8 @@ const PlotlyChart = () => ({
 
           series.data.forEach((row) => {
             plotlySeries.values.push(row.y);
-            plotlySeries.labels.push(hasX ? row.x : `Slice ${index}`);
-            plotlySeries.marker.colors.push(scope.options.seriesOptions[hasX ? row.x : `Slice ${index}`].color);
+            plotlySeries.labels.push(hasX ? row.x.substr(0, xAxisLabelLength) : `Slice ${index}`);
+            plotlySeries.marker.colors.push(scope.options.seriesOptions[hasX ? row.x.substr(0, xAxisLabelLength) : `Slice ${index}`].color);
           });
 
           scope.data.push(plotlySeries);