Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
allow x-axis label truncation
Browse files Browse the repository at this point in the history
alison985 committed Sep 11, 2017
1 parent 72d9d58 commit 1a3c293
Showing 3 changed files with 21 additions and 3 deletions.
6 changes: 6 additions & 0 deletions client/app/visualizations/chart/chart-editor.html
Original file line number Diff line number Diff line change
@@ -183,6 +183,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'">
4 changes: 4 additions & 0 deletions client/app/visualizations/chart/index.js
Original file line number Diff line number Diff line change
@@ -253,6 +253,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)) {
14 changes: 11 additions & 3 deletions client/app/visualizations/chart/plotly.js
Original file line number Diff line number Diff line change
@@ -187,6 +187,7 @@ function getColor(index) {

const PlotlyChart = () => {
let bottomMargin = 50;
let xAxisLabelLength = 300;
return {
restrict: 'E',
template: '<div></div>',
@@ -234,10 +235,17 @@ 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;
}
if (has(scope.options, 'xAxisLabelLength')) {
xAxisLabelLength = parseInt(scope.options.xAxisLabelLength, 10);
}
delete scope.layout.barmode;
delete scope.layout.xaxis;
delete scope.layout.yaxis;
@@ -272,12 +280,12 @@ const PlotlyChart = () => {

series.data.forEach((row) => {
plotlySeries.values.push(row.y);
plotlySeries.labels.push(hasX ? row.x : `Slice ${index}`);
if (scope.options.seriesOptions[hasX ? row.x : `Slice ${index}`] === undefined) {
plotlySeries.labels.push(hasX ? row.x.substr(0, xAxisLabelLength) : `Slice ${index}`);
if (scope.options.seriesOptions[hasX ? row.x.substr(0, xAxisLabelLength) : `Slice ${index}`] === undefined) {
plotlySeries.marker.colors.push(getColor(index));
index += 1;
} else {
plotlySeries.marker.colors.push(scope.options.seriesOptions[hasX ? row.x : `Slice ${index}`].color);
plotlySeries.marker.colors.push(scope.options.seriesOptions[hasX ? row.x.substr(0, xAxisLabelLength) : `Slice ${index}`].color);
}
});

0 comments on commit 1a3c293

Please sign in to comment.