Skip to content

Commit a7f0722

Browse files
author
Luka
committed
Merge github.com:alexandreblin/cohort
2 parents 6a9c214 + 7aca4da commit a7f0722

File tree

4 files changed

+123
-78
lines changed

4 files changed

+123
-78
lines changed

‎public/cohort.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ VisTypesRegistryProvider.register(function CohortProvider(Private) {
2121
category: CATEGORY.OTHER,
2222
visConfig: {
2323
defaults: {
24-
mapColors: ''
24+
mapColors: '',
25+
hiddenColumns: ''
2526
},
2627
template: template,
2728
},
@@ -53,7 +54,7 @@ VisTypesRegistryProvider.register(function CohortProvider(Private) {
5354
title: 'Cohort Period',
5455
min: 1,
5556
max: 1,
56-
aggFilter: 'histogram'
57+
aggFilter: ['date_histogram', 'histogram']
5758
}
5859
])
5960
}

‎public/cohort_controller.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ module.controller('cohortController', function ($scope, $element, Private) {
1313
'vis.params.inverse',
1414
'vis.params.cumulative',
1515
'vis.params.table',
16-
'vis.params.mapColors'
16+
'vis.params.mapColors',
17+
'vis.params.reverseColors',
18+
'vis.params.hiddenColumns'
1719
], ([resp]) => {
1820
if (!resp) {
1921
return;

‎public/cohort_params.html‎

Lines changed: 73 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,74 @@
1-
<div class="checkbox">
2-
<label>
3-
<input type="checkbox" ng-model="vis.params.percentual">
4-
Show percentual values
5-
</label>
6-
</div>
7-
<div class="checkbox">
8-
<label>
9-
<input type="checkbox" ng-model="vis.params.inverse"
10-
ng-disabled="!vis.params.percentual"
11-
style="margin-left: 20px;">
12-
Show inverse values
13-
</label>
14-
</div>
15-
<div class="checkbox">
16-
<label>
17-
<input type="checkbox" ng-model="vis.params.cumulative">
18-
Show cumulative values
19-
</label>
20-
</div>
21-
<div class="checkbox">
22-
<label>
23-
<input type="checkbox" ng-model="vis.params.table">
24-
Show values as table
25-
</label>
26-
</div>
27-
<div class="checkbox">
28-
<label>
29-
<input type="radio" ng-model="vis.params.mapColors" value=""
1+
<div class="kuiSideBarSection">
2+
<div class="checkbox">
3+
<label>
4+
<input type="checkbox" ng-model="vis.params.percentual">
5+
Show percentual values
6+
</label>
7+
</div>
8+
<div class="checkbox">
9+
<label>
10+
<input type="checkbox" ng-model="vis.params.inverse"
11+
ng-disabled="!vis.params.percentual"
12+
style="margin-left: 20px;">
13+
Show inverse values
14+
</label>
15+
</div>
16+
<div class="checkbox">
17+
<label>
18+
<input type="checkbox" ng-model="vis.params.cumulative">
19+
Show cumulative values
20+
</label>
21+
</div>
22+
<div class="checkbox">
23+
<label>
24+
<input type="checkbox" ng-model="vis.params.table">
25+
Show values as table
26+
</label>
27+
</div>
28+
<div class="checkbox">
29+
<label>
30+
<input type="radio" ng-model="vis.params.mapColors" value=""
31+
ng-disabled="!vis.params.table"
32+
style="margin-left: 20px; margin-right: 4px;">
33+
No heatmap colors
34+
</label>
35+
</div>
36+
<div class="checkbox">
37+
<label>
38+
<input type="radio" ng-model="vis.params.mapColors" value="heatmap"
39+
ng-disabled="!vis.params.table"
40+
style="margin-left: 20px; margin-right: 4px;">
41+
Show heatmap colors
42+
</label>
43+
</div>
44+
<div class="checkbox">
45+
<label>
46+
<input type="radio" ng-model="vis.params.mapColors" value="mean"
47+
ng-disabled="!vis.params.table"
48+
style="margin-left: 20px; margin-right: 4px;">
49+
Show heatmap colors, by columns
50+
</label>
51+
</div>
52+
<div class="checkbox">
53+
<label>
54+
<input type="radio" ng-model="vis.params.mapColors" value="aboveAverage"
55+
ng-disabled="!vis.params.table"
56+
style="margin-left: 20px; margin-right: 4px;">
57+
Show above average colors
58+
</label>
59+
</div>
60+
<div class="checkbox">
61+
<label>
62+
<input type="checkbox" ng-model="vis.params.reverseColors"
63+
ng-disabled="!vis.params.table"
64+
style="margin-left: 20px; margin-right: 4px;">
65+
Reverse color scheme
66+
</label>
67+
</div>
68+
<div class="form-group" style="margin-left: 20px; margin-right: 4px;">
69+
<label for="hiddenColumns">Columns to hide (separated by semicolons)</label>
70+
<input ng-model="vis.params.hiddenColumns"
3071
ng-disabled="!vis.params.table"
31-
style="margin-left: 20px; margin-right: 4px;">
32-
No heatmap colors
33-
</label>
34-
</div>
35-
<div class="checkbox">
36-
<label>
37-
<input type="radio" ng-model="vis.params.mapColors" value="heatmap"
38-
ng-disabled="!vis.params.table"
39-
style="margin-left: 20px; margin-right: 4px;">
40-
Show heatmap colors
41-
</label>
42-
</div>
43-
<div class="checkbox">
44-
<label>
45-
<input type="radio" ng-model="vis.params.mapColors" value="mean"
46-
ng-disabled="!vis.params.table"
47-
style="margin-left: 20px; margin-right: 4px;">
48-
Show heatmap colors, by columns
49-
</label>
50-
</div>
51-
<div class="checkbox">
52-
<label>
53-
<input type="radio" ng-model="vis.params.mapColors" value="aboveAverage"
54-
ng-disabled="!vis.params.table"
55-
style="margin-left: 20px; margin-right: 4px;">
56-
Show above average colors
57-
</label>
58-
</div>
72+
class="form-control" id="hiddenColumns">
73+
</div>
74+
</div>

‎public/utils.js‎

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ export const absoluteFn = (d) => d.value;
2424
export const getFormatTypes = ($vis) => formatTypes[getDateHistogram($vis)];
2525

2626
export function showTable($vis, mapColors, element, measures, data, valueFn, formatTime) {
27+
var periodsToExclude = $vis.params.hiddenColumns ? $vis.params.hiddenColumns.split(";") : [];
28+
data = data.filter(function(d) { return periodsToExclude.indexOf(d.period.toString()) == -1 });
29+
2730
let minMaxesForColumn = [];
2831
const periodMeans = d3.nest().key((d) => d.period)
2932
.entries(data).map((d) => {
@@ -40,8 +43,14 @@ export function showTable($vis, mapColors, element, measures, data, valueFn, for
4043

4144
const customColumn = getDateHistogram($vis) ? 'Date' : 'Term';
4245
const fixedColumns = ['Total', customColumn];
43-
const columns = d3.map(data, (d) => d.period).keys().map(x => parseInt(x, 10));
44-
const allColumns = fixedColumns.concat(columns);
46+
const columns = d3.map(data, (d) => d.period).keys().map(x => parseInt(x, 10)).sort((a, b) => a - b);
47+
const allColumns = fixedColumns.concat(columns.map(function(x) {
48+
if (getPeriodAggregationName($vis) == 'date_histogram') {
49+
return formatTime(new Date(x));
50+
} else {
51+
return x;
52+
}
53+
}));
4554

4655
const table = d3.select(element).append('table')
4756
.attr('width', measures.width)
@@ -64,7 +73,7 @@ export function showTable($vis, mapColors, element, measures, data, valueFn, for
6473
.enter()
6574
.append('tr');
6675

67-
const colorScale = getColorScale(mapColors, data, valueFn);
76+
const colorScale = getColorScale(mapColors, $vis.params.reverseColors, data, valueFn);
6877

6978
rows.selectAll('td')
7079
.data((row) => {
@@ -242,33 +251,50 @@ export function getDateHistogram($vis) {
242251
}
243252
}
244253

245-
export function getHeatMapColor(data, valueFn) {
254+
export function getPeriodAggregationName($vis) {
255+
const schema = $vis.aggs.find((agg) => agg.schema.name === 'cohort_period');
256+
if (!schema) {
257+
return null;
258+
}
259+
return schema.type.name;
260+
}
261+
262+
export function getHeatMapColor(data, scale, valueFn) {
246263
const domain = d3.extent(data, valueFn);
247264
domain.splice(1, 0, d3.mean(domain));
248-
return d3.scale.linear().domain(domain).range(colors);
265+
return d3.scale.linear().domain(domain).range(scale);
249266
}
250267

251-
export function getMeanColor(d, column) {
252-
return d3.scale.linear().domain([column.min, column.mean, column.max]).range(colors)(d);
268+
export function getMeanColor(scale) {
269+
return (d, column) => {
270+
return d3.scale.linear().domain([column.min, column.mean, column.max]).range(scale)(d);
271+
};
253272
}
254273

255-
export function getAboveAverageColor(d, column) {
256-
if (d > column.mean) {
257-
return green;
258-
} else if (d === column.mean) {
259-
return yellow;
260-
} else if (d < column.mean) {
261-
return red;
274+
export function getAboveAverageColor(scale) {
275+
return (d, column) => {
276+
if (d > column.mean) {
277+
return scale[0];
278+
} else if (d === column.mean) {
279+
return scale[1];
280+
} else if (d < column.mean) {
281+
return scale[2];
282+
}
262283
}
263284
}
264285

265-
export function getColorScale(mapColors, data, valueFn) {
286+
export function getColorScale(mapColors, reverseColors, data, valueFn) {
287+
var scale = colors;
288+
if (reverseColors) {
289+
scale = colors.slice().reverse();
290+
}
291+
266292
if (mapColors === 'heatmap') {
267-
return getHeatMapColor(data, valueFn);
293+
return getHeatMapColor(data, scale, valueFn);
268294
} else if (mapColors === 'mean') {
269-
return getMeanColor;
295+
return getMeanColor(scale);
270296
} else if (mapColors === 'aboveAverage') {
271-
return getAboveAverageColor;
297+
return getAboveAverageColor(scale);
272298
} else {
273299
return (d) => {
274300
};

0 commit comments

Comments
 (0)