Skip to content

Commit

Permalink
change pie chart colors (re getredash#240)
Browse files Browse the repository at this point in the history 
Incorporates: fix pie chart multiple colors changed (re getredash#242)
  • Loading branch information
@alison985
alison985 authored and Allen Short committed Jan 8, 2018
1 parent dd06384 commit affdfa7
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 31 deletions.
66 changes: 51 additions & 15 deletions client/app/visualizations/chart/chart-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,14 @@
<li ng-class="{active: currentTab == 'yAxis'}" ng-if="options.globalSeriesType != 'custom'">
<a ng-click="changeTab('yAxis')">Y Axis</a>
</li>
<li ng-class="{active: currentTab == 'series'}" ng-if="options.globalSeriesType != 'custom'">
<li ng-class="{active: currentTab == 'series'}"
ng-if="options.globalSeriesType != 'custom' && options.globalSeriesType != 'pie'">
<a ng-click="changeTab('series')">Series</a>
</li>
<li ng-class="{active: currentTab == 'colors'}"
ng-if="options.globalSeriesType == 'pie'">
<a ng-click="changeTab('colors')">Colors</a>
</li>
</ul>
<div ng-show="currentTab == 'general'">
<div class="form-group">
Expand All @@ -32,7 +37,6 @@
</div>
</div>


<div class="form-group" ng-class="{'has-error': chartEditor.xAxisColumn.$invalid}">
<label class="control-label">X Column</label>

Expand Down Expand Up @@ -131,18 +135,18 @@
</textarea>
</div>

<div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
<label>
<input type="checkbox" ng-model="options.enableConsoleLogs">
<i class="input-helper"></i> Show errors in the console
</label>
</div>
<div class="form-group" ng-if="options.globalSeriesType == 'custom'">
<label class="control-label">Custom code</label>
<textarea ng-model="options.customCode" class="form-control v-resizable" rows="10">
</textarea>
</div>

<div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
<label>
<input type="checkbox" ng-model="options.autoRedraw">
<i class="input-helper"></i> Auto update graph
</label>
<div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
<label>
<input type="checkbox" ng-model="options.enableConsoleLogs">
<i class="input-helper"></i> Show errors in the console
</label>
</div>
</div>

<div ng-show="currentTab == 'xAxis'">
Expand Down Expand Up @@ -209,7 +213,7 @@ <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>
</div>
</div>

<div ng-show="currentTab=='series'">
<div ng-show="currentTab == 'series'">
<table class="table table-condensed col-table">
<thead>
<th>zIndex</th>
Expand All @@ -222,7 +226,8 @@ <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>
<tbody ui-sortable ng-model="form.seriesList">
<tr ng-repeat="name in form.seriesList">
<td style="cursor: move;"><i class="fa fa-arrows-v"></i> <span
ng-bind="options.seriesOptions[name].zIndex + 1"></span></td>
ng-bind="options.seriesOptions[name].zIndex + 1"></span>
</td>
<td>
<input type="radio" ng-value="0" ng-model="options.seriesOptions[name].yAxis">
</td>
Expand Down Expand Up @@ -262,3 +267,34 @@ <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>
</tbody>
</table>
</div>

<div ng-show="currentTab == 'colors'">
<table class="table table-condensed col-table">
<thead>
<th>zIndex</th>
<th>Label</th>
<th>Color</th>
</thead>
<tbody ui-sortable ng-model="form.colorsList">
<tr ng-repeat="name in form.colorsList track by name">
<td style="cursor: move;"><i class="fa fa-arrows-v"></i> <span
ng-bind="options.seriesOptions[name].zIndex + 1"></span>
</td>
<td style="padding: 3px; width: 300px;">
{{name}}
</td>
<td style="padding: 3px; width: 35px;">
<ui-select ng-model="options.seriesOptions[name].color">
<ui-select-match>
<color-box color="$select.selected.value"></color-box>
</ui-select-match>
<ui-select-choices repeat="color.value as (key, color) in colors">
<color-box color="color.value"></color-box>
<span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</td>
</tr>
</tbody>
</table>
</div>
58 changes: 44 additions & 14 deletions client/app/visualizations/chart/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,19 +120,48 @@ function ChartEditor(ColorPalette, clientConfig) {
}

function refreshSeries() {
const seriesNames = pluck(scope.queryResult.getChartData(scope.options.columnMapping), 'name');
const existing = keys(scope.options.seriesOptions);
each(difference(seriesNames, existing), (name) => {
scope.options.seriesOptions[name] = {
type: scope.options.globalSeriesType,
yAxis: 0,
};
scope.form.seriesList.push(name);
});
each(difference(existing, seriesNames), (name) => {
scope.form.seriesList = without(scope.form.seriesList, name);
delete scope.options.seriesOptions[name];
});
// for pie charts only get color list (x row) instead of series list (y column)
if (scope.options.globalSeriesType === 'pie') {
const seriesData = scope.queryResult.getData();
scope.form.colorsList = [];
const xColumnName = scope.form.xAxisColumn;
seriesData.forEach((rowOfData) => {
scope.form.colorsList.push(rowOfData[xColumnName]);
});

const colorNames = scope.form.colorsList;
let existing = [];
if (scope.options.colorOptions === undefined) {
existing = colorNames;
} else {
existing = keys(scope.options.colorOptions);
}
each(difference(colorNames, existing), (name) => {
scope.options.colorOptions[name] = {
type: scope.options.globalSeriesType,
yAxis: 0,
};
scope.form.colorsList.push(name);
});
each(difference(existing, colorNames), (name) => {
scope.form.colorsList = without(scope.form.colorsList, name);
delete scope.options.colorOptions[name];
});
} else {
const seriesNames = pluck(scope.queryResult.getChartData(scope.options.columnMapping), 'name');
const existing = keys(scope.options.seriesOptions);
each(difference(seriesNames, existing), (name) => {
scope.options.seriesOptions[name] = {
type: scope.options.globalSeriesType,
yAxis: 0,
};
scope.form.seriesList.push(name);
});
each(difference(existing, seriesNames), (name) => {
scope.form.seriesList = without(scope.form.seriesList, name);
delete scope.options.seriesOptions[name];
});
}
}

function setColumnRole(role, column) {
Expand Down Expand Up @@ -164,6 +193,8 @@ function ChartEditor(ColorPalette, clientConfig) {
yAxisColumns: [],
seriesList: sortBy(keys(scope.options.seriesOptions), name =>
scope.options.seriesOptions[name].zIndex),
colorsList: sortBy(keys(scope.options.colorOptions), name =>
scope.options.colorOptions[name].zIndex),
};

scope.$watchCollection('form.seriesList', (value) => {
Expand All @@ -173,7 +204,6 @@ function ChartEditor(ColorPalette, clientConfig) {
});
});


scope.$watchCollection('form.yAxisColumns', (value, old) => {
each(old, unsetColumn);
each(value, partial(setColumnRole, 'y'));
Expand Down
6 changes: 4 additions & 2 deletions client/app/visualizations/chart/plotly.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ const PlotlyChart = () => ({
labels: [],
type: 'pie',
hole: 0.4,
marker: { colors: ColorPaletteArray },
marker: { colors: ColorPaletteArray.slice() },
text: series.name,
textposition: 'inside',
textfont: { color: '#f5f5f5' },
Expand All @@ -277,9 +277,11 @@ const PlotlyChart = () => ({
});
}

series.data.forEach((row) => {
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.marker.colors[rowIdx] = rowOpts ? rowOpts.color : getColor(rowIdx);
});

scope.data.push(plotlySeries);
Expand Down

0 comments on commit affdfa7

Please sign in to comment.