Skip to content

Commit

Permalink
allow x-axis label truncation (re #249)
Browse files Browse the repository at this point in the history
  • Loading branch information
alison985 authored and Allen Short committed Dec 12, 2017
1 parent 8f50819 commit e5a112c
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 2 deletions.
6 changes: 6 additions & 0 deletions client/app/visualizations/chart/chart-editor.html
Original file line number Diff line number Diff line change
Expand Up @@ -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'">
Expand Down
4 changes: 4 additions & 0 deletions client/app/visualizations/chart/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
10 changes: 8 additions & 2 deletions client/app/visualizations/chart/plotly.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit e5a112c

Please sign in to comment.