allow x-axis label truncation (re #249)

mozilla · Jan 8, 2018 · 083ed7f · 083ed7f
1 parent fda5c39
commit 083ed7f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html
@@ -190,6 +190,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
@@ -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
@@ -13,6 +13,8 @@ Plotly.setPlotConfig({
   modeBarButtonsToRemove: ['sendDataToCloud'],
 });
 
+const DEFAULT_XAXIS_LABEL_LENGTH = 300;
+
 // The following colors will be used if you pick "Automatic" color.
 const BaseColors = {
   Blue: '#4572A7',
@@ -236,10 +238,15 @@ const PlotlyChart = () => {
       function recalculateOptions() {
         scope.data.length = 0;
         scope.layout.showlegend = has(scope.options, 'legend') ? scope.options.legend.enabled : true;
+        scope.layout.legend = {
+          bgcolor: '#cccccc',
+          wordWrap: 'normal',
+        };
         if (has(scope.options, 'bottomMargin')) {
           bottomMargin = parseInt(scope.options.bottomMargin, 10);
           scope.layout.margin.b = bottomMargin;
         }
+        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;
@@ -274,8 +281,8 @@ const PlotlyChart = () => {
 
             each(series.data, (row, rowIdx) => {
               plotlySeries.values.push(row.y);
-              plotlySeries.labels.push(hasX ? row.x  : `Slice ${index}`);
-              const rowOpts = scope.options.seriesOptions[hasX ? row.x : `Slice ${index}`];
+              plotlySeries.labels.push(hasX ? row.x.toString().substr(0, xAxisLabelLength)  : `Slice ${index}`);
+              const rowOpts = scope.options.seriesOptions[hasX ? row.x.toString().substr(0, xAxisLabelLength) : `Slice ${index}`];
               plotlySeries.marker.colors[rowIdx] = rowOpts ? rowOpts.color : getColor(rowIdx);
             });