allow x-axis label truncation (re getredash#249)

washort · Mar 5, 2018 · 3087822 · 3087822
1 parent ba062d2
commit 3087822
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html
@@ -188,6 +188,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
@@ -251,6 +251,10 @@ function ChartEditor(ColorPalette, clientConfig) {
         scope.options.legend = { enabled: true };
       }
 
+      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/utils.js b/client/app/visualizations/chart/plotly/utils.js
@@ -175,16 +175,20 @@ function getUnifiedXAxisValues(seriesList, sorted) {
   return sorted ? sortBy(result, identity) : result;
 }
 
+const DEFAULT_XAXIS_LABEL_LENGTH = 300;
+
 function preparePieData(seriesList, options) {
   const {
     cellWidth, cellHeight, xPadding, yPadding, cellsInRow, hasX,
   } = 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 : `Slice ${index}`;
+      const rowX = hasX ? row.x.substr(0, xAxisLabelLength) : `Slice ${index}`;
       const rowOpts = options.seriesOptions[rowX];
       if (rowOpts) {
         colorPalette[rowIdx] = rowOpts.color;
@@ -193,7 +197,7 @@ function preparePieData(seriesList, options) {
     });
     return {
       values: pluck(serie.data, 'y'),
-      labels: labels,
+      labels,
       type: 'pie',
       hole: 0.4,
       marker: { colors: ColorPaletteArray },