Add display type to UI
This commit is contained in:
parent
d6bb53e870
commit
cab7eb21bb
@ -19,7 +19,7 @@
|
|||||||
<div class="model-header">
|
<div class="model-header">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||||
<h3 class="modal-title">User Profile Editor</h3>
|
<h3 class="modal-title">Personal Profile Editor</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<iframe src="/profile.html" width="100%" height="250" frameborder="0"></iframe>
|
<iframe src="/profile.html" width="100%" height="250" frameborder="0"></iframe>
|
||||||
@ -57,13 +57,20 @@
|
|||||||
<label for="maxResults">Max results</label>
|
<label for="maxResults">Max results</label>
|
||||||
<input class="form-control" type="number" value="100" id="maxResults">
|
<input class="form-control" type="number" value="100" id="maxResults">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="displayType">Display type</label>
|
||||||
|
<select id="displayType" class="form-control">
|
||||||
|
<option value="density">Density</option>
|
||||||
|
<option value="compatibility">Compatibility</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label>
|
<label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label>
|
<label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" data-toggle="modal" data-target="#profileDlg" class="btn btn-primary">Edit profile</button>
|
<button type="button" data-toggle="modal" data-target="#profileDlg" class="btn btn-primary">Edit personal profile</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -160,7 +160,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateDensity() {
|
function updateDensity() {
|
||||||
var fill = _data.hints.length === 0 ? _backdropColor : _canvas.gradient(decimateHints());
|
var fill = _backdropColor;
|
||||||
|
if (_data.hints.length > 0) {
|
||||||
|
fill = _canvas.gradient(decimateHints());
|
||||||
|
}
|
||||||
|
|
||||||
_elements.density.attr({fill: fill});
|
_elements.density.attr({fill: fill});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -197,15 +201,15 @@
|
|||||||
var stepMax = _range.max - stepSize * i;
|
var stepMax = _range.max - stepSize * i;
|
||||||
var stepMin = stepMax - stepSize;
|
var stepMin = stepMax - stepSize;
|
||||||
|
|
||||||
var hintCount = 0;
|
var hintValue = 0;
|
||||||
for (var j = 0, count = _data.hints.length; j < count; ++j) {
|
for (var j = 0, count = _data.hints.length; j < count; ++j) {
|
||||||
var hint = _data.hints[j];
|
var hint = _data.hints[j];
|
||||||
if (hint.sample > stepMin && hint.sample <= stepMax) {
|
if (hint.sample > stepMin && hint.sample <= stepMax) {
|
||||||
hintCount += hint.count;
|
hintValue += hint.rating;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hintGroups.push(hintCount);
|
hintGroups.push(hintValue);
|
||||||
}
|
}
|
||||||
|
|
||||||
return hintGroups;
|
return hintGroups;
|
||||||
@ -307,18 +311,38 @@
|
|||||||
var _steps = params.steps || 20;
|
var _steps = params.steps || 20;
|
||||||
var _useLocalScale = params.useLocalScale || true;
|
var _useLocalScale = params.useLocalScale || true;
|
||||||
var _useRelativeScale = params.useRelativeScale || true;
|
var _useRelativeScale = params.useRelativeScale || true;
|
||||||
|
var _displayType = params.displayType || 'density';
|
||||||
var _onValueChanged = params.onValueChanged;
|
var _onValueChanged = params.onValueChanged;
|
||||||
|
|
||||||
function computeLocalScale(hints) {
|
function processHintParameters(columns) {
|
||||||
var counts = _.pluck(hints, 'count');
|
var displayTypes = {compatibility: 'compatibility', density: 'count'};
|
||||||
var min = _useRelativeScale ? _.min(counts) : 0;
|
var statKey = displayTypes[_displayType];
|
||||||
return new Range(min, _.max(counts));
|
|
||||||
|
for (var name in columns) {
|
||||||
|
var column = columns[name];
|
||||||
|
for (var i = 0, count = column.hints.length; i < count; ++i) {
|
||||||
|
column.hints[i].rating = column.hints[i].stats[statKey];
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function computeGlobalScale(hintData) {
|
function computeLocalScale(column) {
|
||||||
|
var ratings = _.map(column.hints, function(hint) {
|
||||||
|
return hint.rating;
|
||||||
|
});
|
||||||
|
|
||||||
|
var min = 0;
|
||||||
|
if (_useRelativeScale) {
|
||||||
|
min = _.min(ratings);
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Range(min, _.max(ratings));
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeGlobalScale(columns) {
|
||||||
var globalScale = null;
|
var globalScale = null;
|
||||||
for (var i = 0, count = hintData.length; i < count; ++i) {
|
for (var i = 0, count = columns.length; i < count; ++i) {
|
||||||
var localScale = computeLocalScale(hintData[i]);
|
var localScale = computeLocalScale(columns[i]);
|
||||||
if (globalScale) {
|
if (globalScale) {
|
||||||
globalScale.include(localScale);
|
globalScale.include(localScale);
|
||||||
}
|
}
|
||||||
@ -331,17 +355,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.setColumns = function(columns) {
|
this.setColumns = function(columns) {
|
||||||
|
processHintParameters(columns);
|
||||||
|
|
||||||
var scale = 0;
|
var scale = 0;
|
||||||
if (!_useLocalScale) {
|
if (!_useLocalScale) {
|
||||||
var hintData = _.pluck(columns, 'hints');
|
scale = computeGlobalScale(columns);
|
||||||
scale = computeGlobalScale(hintData);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var index = 0;
|
var index = 0;
|
||||||
for (var name in columns) {
|
for (var name in columns) {
|
||||||
var data = _data[name] = columns[name];
|
var data = _data[name] = columns[name];
|
||||||
if (_useLocalScale) {
|
if (_useLocalScale) {
|
||||||
scale = computeLocalScale(data.hints);
|
scale = computeLocalScale(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
var column = _columns[name];
|
var column = _columns[name];
|
||||||
@ -376,5 +401,12 @@
|
|||||||
this.setColumns(_data);
|
this.setColumns(_data);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.setDisplayType = function(displayType) {
|
||||||
|
if (displayType != _displayType) {
|
||||||
|
_displayType = displayType;
|
||||||
|
this.setColumns(_data);
|
||||||
|
}
|
||||||
|
};
|
||||||
};
|
};
|
||||||
}(window.grapher = window.grapher || {}));
|
}(window.grapher = window.grapher || {}));
|
||||||
|
@ -85,18 +85,21 @@
|
|||||||
steps: _ctx.query.hintSteps,
|
steps: _ctx.query.hintSteps,
|
||||||
range: _ctx.query.range,
|
range: _ctx.query.range,
|
||||||
onValueChanged: onAdjust,
|
onValueChanged: onAdjust,
|
||||||
useLocalScale: true,
|
displayType: $('#displayType').val(),
|
||||||
useRelativeScale: true
|
useLocalScale: $('#useLocalScale').is(':checked'),
|
||||||
|
useRelativeScale: $('#useRelativeScale').is(':checked')
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#useLocalScale').click(function() {
|
$('#useLocalScale').click(function() {
|
||||||
var useLocalScale = $('#useLocalScale').is(':checked');
|
_ctx.grapher.setUseLocalScale($('#useLocalScale').is(':checked'));
|
||||||
_ctx.grapher.setUseLocalScale(useLocalScale);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#useRelativeScale').click(function() {
|
$('#useRelativeScale').click(function() {
|
||||||
var useRelativeScale = $('#useRelativeScale').is(':checked');
|
_ctx.grapher.setUseRelativeScale($('#useRelativeScale').is(':checked'));
|
||||||
_ctx.grapher.setUseRelativeScale(useRelativeScale);
|
});
|
||||||
|
|
||||||
|
$('#displayType').change(function() {
|
||||||
|
_ctx.grapher.setDisplayType($('#displayType').val());
|
||||||
});
|
});
|
||||||
|
|
||||||
var columns = {};
|
var columns = {};
|
||||||
|
@ -53,13 +53,23 @@ function walkMatches(data, features, minScore, callback) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function countRecords(data, features, minScore) {
|
function statRecords(data, features, minScore) {
|
||||||
|
var compatibility = 0;
|
||||||
var count = 0;
|
var count = 0;
|
||||||
|
|
||||||
walkMatches(data, features, minScore, function(record, score) {
|
walkMatches(data, features, minScore, function(record, score) {
|
||||||
|
compatibility += record.compatibility;
|
||||||
++count;
|
++count;
|
||||||
});
|
});
|
||||||
|
|
||||||
return count;
|
if (count > 0) {
|
||||||
|
compatibility /= count;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
compatibility: compatibility,
|
||||||
|
count: count
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function findRecords(data, features, minScore) {
|
function findRecords(data, features, minScore) {
|
||||||
@ -104,7 +114,7 @@ function project(data, features, feature, minScore, range, steps) {
|
|||||||
sample[feature] = position;
|
sample[feature] = position;
|
||||||
results.push({
|
results.push({
|
||||||
sample: position,
|
sample: position,
|
||||||
count: countRecords(data, sample, minScore)
|
stats: statRecords(data, sample, minScore)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -125,7 +135,7 @@ function buildHints(data, features, feature, minScore, range, steps) {
|
|||||||
_.each(projection, function(result) {
|
_.each(projection, function(result) {
|
||||||
hints.push({
|
hints.push({
|
||||||
sample: result.sample,
|
sample: result.sample,
|
||||||
count: result.count
|
stats: result.stats
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -193,8 +203,6 @@ function computeRecordGeo(records, context) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function computeRecordPopularity(records, context, callback) {
|
function computeRecordPopularity(records, context, callback) {
|
||||||
var scoreMax = 0;
|
|
||||||
|
|
||||||
async.each(
|
async.each(
|
||||||
records,
|
records,
|
||||||
function(record, callback) {
|
function(record, callback) {
|
||||||
@ -215,8 +223,6 @@ function computeRecordPopularity(records, context, callback) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
var groupScore = innerProduct(context.profile, reviewFeatures);
|
var groupScore = innerProduct(context.profile, reviewFeatures);
|
||||||
scoreMax = Math.max(scoreMax, groupScore);
|
|
||||||
|
|
||||||
callback(err, groupScore);
|
callback(err, groupScore);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -228,13 +234,7 @@ function computeRecordPopularity(records, context, callback) {
|
|||||||
scoreAvg = scoreSum / groupScores.length;
|
scoreAvg = scoreSum / groupScores.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (scoreMax !== 0) {
|
record.compatibility = scoreAvg;
|
||||||
record.features.compatibility = scoreAvg / scoreMax;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
record.features.compatibility = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
callback(err);
|
callback(err);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -269,8 +269,7 @@ function fixupFeatures(features) {
|
|||||||
'affordable',
|
'affordable',
|
||||||
'atmospheric',
|
'atmospheric',
|
||||||
'nearby',
|
'nearby',
|
||||||
'accessible',
|
'accessible'
|
||||||
'compatible'
|
|
||||||
];
|
];
|
||||||
|
|
||||||
if (!features) {
|
if (!features) {
|
||||||
|
Loading…
Reference in New Issue
Block a user