Skip to content

Commit

Permalink
categorise insights filters and hide them by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@ornicar
ornicar committed Dec 5, 2015
1 parent 638fdf8 commit 737e9bd
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 76 deletions.
66 changes: 42 additions & 24 deletions modules/insight/src/main/JsonView.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,48 @@ final class JsonView {

private def D = Dimension

def ui(ecos: Set[String]) = Json.obj(
"dimensions" -> List(
Json toJson D.Perf,
Json toJson D.Phase,
Json toJson D.Result,
Json toJson D.Termination,
Json toJson D.Color,
Json toJson D.OpponentStrength,
Json toJson D.PieceRole,
Json toJson D.MovetimeRange,
Json toJson D.MyCastling,
Json toJson D.OpCastling,
Json toJson D.QueenTrade,
Json toJson D.MaterialRange,
Json.obj(
"key" -> D.Opening.key,
"name" -> D.Opening.name,
"position" -> D.Opening.position,
"description" -> D.Opening.description.body,
"values" -> Dimension.valuesOf(D.Opening).filter { o =>
ecos contains o.eco
}.map(Dimension.valueToJson(D.Opening)))
),
"metrics" -> Metric.all)
case class Categ(key: String, name: String, items: List[JsValue])
private implicit val categWrites = Json.writes[Categ]

def ui(ecos: Set[String]) = {

val openingJson = Json.obj(
"key" -> D.Opening.key,
"name" -> D.Opening.name,
"position" -> D.Opening.position,
"description" -> D.Opening.description.body,
"values" -> Dimension.valuesOf(D.Opening).filter { o =>
ecos contains o.eco
}.map(Dimension.valueToJson(D.Opening)))

Json.obj(
"dimensionCategs" -> List(
Categ("setup", "Setup", List(
Json toJson D.Perf,
Json toJson D.Color,
Json toJson D.OpponentStrength
)),
//game
Categ("game", "Game", List(
openingJson,
Json toJson D.MyCastling,
Json toJson D.OpCastling,
Json toJson D.QueenTrade
)),
// move
Categ("move", "Move", List(
Json toJson D.Phase,
Json toJson D.PieceRole,
Json toJson D.MovetimeRange,
Json toJson D.MaterialRange
)),
// result
Categ("result", "Result", List(
Json toJson D.Result,
Json toJson D.Termination))
),
"metrics" -> Metric.all)
}

private implicit def dimensionWriter[X]: OWrites[Dimension[X]] = OWrites { d =>
Json.obj(
Expand Down
26 changes: 21 additions & 5 deletions public/stylesheets/insight.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,26 @@
color: #fff;
}

#insight .filters .topless a {
color: #999;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 1px #fff;
cursor: pointer;
}
#insight .filters .topless .clear {
float: right;
text-transform: none;
}
#insight .filters .topless .toggle span {
margin-left: 4px;
}
#insight .filters .box {
border-bottom-width: 0;
}
#insight .filters .box:last-child {
border-bottom-width: 1px
}
#insight .filters .ms-parent {
display: block;
}
Expand Down Expand Up @@ -141,15 +161,11 @@
}

#insight .info.box {
margin-bottom: 20px;
margin-bottom: 10px;
}
#insight .box .content {
padding: 7px;
}
#insight .filters.box .top a {
float: right;
text-transform: none;
}
#insight .info.box .insight-stale button {
width: 100%;
}
Expand Down
37 changes: 20 additions & 17 deletions ui/insight/src/axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,26 @@ module.exports = function(ctrl) {
})),
m('span.by', 'by'),
m('select.dimension', {
multiple: true,
config: function(e, isUpdate) {
$(e).multipleSelect({
width: '200px',
maxHeight: '400px',
single: true,
onClick: function(v) {
ctrl.setDimension(v.value);
}
multiple: true,
config: function(e, isUpdate) {
$(e).multipleSelect({
width: '200px',
maxHeight: '400px',
single: true,
onClick: function(v) {
ctrl.setDimension(v.value);
}
});
}
},
ctrl.ui.dimensionCategs.map(function(categ) {
return categ.items.map(function(x) {
return m('option', {
value: x.key,
disabled: !ctrl.validCombination(x, ctrl.vm.metric),
selected: ctrl.vm.dimension.key === x.key
}, x.name);
});
}
}, ctrl.ui.dimensions.map(function(x) {
return m('option', {
value: x.key,
disabled: !ctrl.validCombination(x, ctrl.vm.metric),
selected: ctrl.vm.dimension.key === x.key
}, x.name);
}))
}))
]);
};
10 changes: 7 additions & 3 deletions ui/insight/src/ctrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ module.exports = function(env) {
this.ui = env.ui;
this.user = env.user;
this.own = env.myUserId === this.user.id;
this.dimensions = [].concat.apply([], this.ui.dimensionCategs.map(function(c) {
return c.items;
}));;

var findMetric = function(key) {
return this.ui.metrics.filter(function(x) {
Expand All @@ -14,7 +17,7 @@ module.exports = function(env) {
}.bind(this);

var findDimension = function(key) {
return this.ui.dimensions.filter(function(x) {
return this.dimensions.filter(function(x) {
return x.key === key;
})[0];
}.bind(this);
Expand All @@ -24,12 +27,13 @@ module.exports = function(env) {
dimension: findDimension(env.initialQuestion.dimension),
filters: env.initialQuestion.filters,
loading: true,
answer: null
answer: null,
showFilters: !!Object.keys(env.initialQuestion.filters).length
};

var reset = function() {
this.vm.metric = this.ui.metrics[0];
this.vm.dimension = this.ui.dimensions[0];
this.vm.dimension = this.dimensions[0];
this.vm.filters = {};
}.bind(this);

Expand Down
75 changes: 48 additions & 27 deletions ui/insight/src/filters.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,61 @@
var m = require('mithril');

function select(ctrl) {
return function(dimension) {
return m('select', {
multiple: true,
config: function(e, isUpdate) {
if (isUpdate && ctrl.vm.filters[dimension.key]) return;
$(e).multipleSelect({
placeholder: dimension.name,
width: '239px',
selectAll: false,
filter: dimension.key === 'opening',
// single: dimension.key === 'color',
onClick: function() {
ctrl.setFilter(dimension.key, $(e).multipleSelect("getSelects"));
}
});
}
}, dimension.values.map(function(value) {
var selected = ctrl.vm.filters[dimension.key];
return m('option', {
value: value.key,
selected: selected && selected.indexOf(value.key) !== -1
}, value.name);
}));
};
}

module.exports = function(ctrl) {
var isFiltered = !!Object.keys(ctrl.vm.filters).length;
return m('div.filters.box', [
m('div.top', [
var show = ctrl.vm.showFilters;
return m('div.filters', [
m('div.topless', [
isFiltered ? m('a.clear.hint--top', {
'data-hint': 'Clear all filters',
onclick: ctrl.clearFilters
}, m('span', {
'data-icon': 'L',
}, 'CLEAR')) : null,
'Filter results'
]),
ctrl.ui.dimensions.map(function(dimension) {
return m('select', {
multiple: true,
config: function(e, isUpdate) {
if (isUpdate && ctrl.vm.filters[dimension.key]) return;
$(e).multipleSelect({
placeholder: dimension.name,
width: '239px',
selectAll: false,
filter: dimension.key === 'opening',
// single: dimension.key === 'color',
onClick: function() {
ctrl.setFilter(dimension.key, $(e).multipleSelect("getSelects"));
}
});
m('a.toggle', {
onclick: function() {
ctrl.vm.showFilters = !ctrl.vm.showFilters;
}
}, dimension.values.map(function(value) {
var selected = ctrl.vm.filters[dimension.key];
return m('option', {
value: value.key,
selected: selected && selected.indexOf(value.key) !== -1
}, value.name);
}));
})
}, [
show ? 'Hide filters' : 'Show filters',
m('span', {
'data-icon': show ? 'S' : 'R'
})
])
]),
show ? m('div.items',
ctrl.ui.dimensionCategs.map(function(categ) {
return m('div.categ.box', [
m('div.top', categ.name),
categ.items.map(select(ctrl))
]);
})
) : null
]);
};

0 comments on commit 737e9bd

Please sign in to comment.