Commit e33382fb authored by Anze Vavpetic's avatar Anze Vavpetic
Browse files

Moved table styling to style.css to avoid duplication. Kepner-Tregoe widget:...

Moved table styling to style.css to avoid duplication. Kepner-Tregoe widget: moved normalization (which is now optional) to the UI; moved the form elements to a nice table. Sens. analzsis widget: added nicer radio buttons.
parent dfecbb75
...@@ -857,12 +857,12 @@ class KepnerTregoe: ...@@ -857,12 +857,12 @@ class KepnerTregoe:
if weights == None: if weights == None:
weights = self.weights weights = self.weights
# Normalize the weights. # Normalize the weights.
s = sum([weights[att] for att in weights.keys()]) #s = sum([weights[att] for att in weights.keys()])
# Normalize. # Normalize.
norm_weights = {} #norm_weights = {}
if s > 0: #if s > 0:
for att in weights.keys(): # for att in weights.keys():
norm_weights[att] = float(weights[att])/s # norm_weights[att] = float(weights[att])/s
# New normalized table # New normalized table
norm_data = Orange.data.Table(self.data) norm_data = Orange.data.Table(self.data)
newid = min(norm_data.domain.get_metas().keys()) - 1 newid = min(norm_data.domain.get_metas().keys()) - 1
...@@ -880,7 +880,7 @@ class KepnerTregoe: ...@@ -880,7 +880,7 @@ class KepnerTregoe:
# Use the inverse of an attr. value if smaller values should be treated as 'better'. # Use the inverse of an attr. value if smaller values should be treated as 'better'.
inverse = lambda x, att: 1-x if att in self.smaller_is_better else x inverse = lambda x, att: 1-x if att in self.smaller_is_better else x
for ex in norm_data: for ex in norm_data:
score = sum([inverse(ex[att], att.name) * norm_weights.get(att.name, 1) for att in norm_data.domain.features if att.var_type == Type.Continuous]) score = sum([inverse(ex[att], att.name) * weights.get(att.name, 1) for att in norm_data.domain.features if att.var_type == Type.Continuous])
ex['score'] = score ex['score'] = score
return norm_data return norm_data
......
...@@ -167,3 +167,63 @@ td{ ...@@ -167,3 +167,63 @@ td{
.sortable li { margin: 0 2px 2px 2px; padding: 0.4em; padding-left: 1.5em; line-height: 1.2em; cursor: move;} .sortable li { margin: 0 2px 2px 2px; padding: 0.4em; padding-left: 1.5em; line-height: 1.2em; cursor: move;}
.sortable .ui-state-highlight { height: 1.2em; } .sortable .ui-state-highlight { height: 1.2em; }
.sortable li span { position: absolute; margin-left: -1.3em; } .sortable li span { position: absolute; margin-left: -1.3em; }
/*
Data table fine-tuning.
*/
table.display {
width: 100%;
}
tr.odd {
background-color: rgb(221, 255, 221);
}
tr.even {
background-color: rgb(238, 255, 238);
}
.dataTable .ui-icon {
display: inline;
float: right;
}
.dataTables_wrapper .ui-button {
padding: 2px 6px 2px 6px;
margin-right: 0px;
}
.dataTables_filter {
//width: 50%;
float: right;
text-align: right;
}
.dataTables_filter label, .dataTables_filter input {
display: inline;
white-space: nowrap;
width: auto;
}
.dataTables_length {
//width: 40%;
float: left;
text-align: left;
}
div.dataTables_length {
float: left;
}
div.dataTables_filter {
float: right;
}
div.dataTables_info {
padding: 9px 6px 10px 6px;
float: left;
}
div.dataTables_paginate {
float: right;
}
div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate {
padding: 6px 6px 0px 6px;
}
html[xmlns] .dataTables_wrapper {
display: block;
}
* html .dataTables_wrapper {
height: 1%;
}
\ No newline at end of file
<div id="widgetinteract-{{widget.pk}}" rel="{{widget.pk}}" class="widgetinteractdialog" title="{{widget.name}} interaction"> <div id="widgetinteract-{{widget.pk}}" rel="{{widget.pk}}" class="widgetinteractdialog" title="{{widget.name}} interaction" width="700" height="600">
<div style="width:420px;"> <div>
Use the sliders to adjust the weights.<br><br> Use the sliders to adjust the weights.<br><br>
<form> <form>
{% for att in attributes %} <table cellpadding="0" cellspacing="0" border="0" class="display" id="weightSel{{widget.pk}}">
<label style="font-weight:bold;">{{att}}</label> <thead>
<div style="padding-left:20px;"> <tr>
<input id="smallerIsBetter{{widget.pk}}{{att}}" name="smallerIsBetter{{widget.pk}}{{att}}" type="checkbox" value="true" style="width:15px;display:inline;" /> <label for="largerIsBetter{{widget.pk}}{{att}}" style="display:inline;">smaller attr. values are better</label> <th>Attribute</th>
<input type="text" style="width:30px; margin-left:20px; float:right;" name="weight{{widget.pk}}{{att}}" id="weight{{widget.pk}}{{att}}" value="0"/> <th>Smaller attribute values are better</th>
<div style="width:300px;" id="slider{{widget.pk}}{{att}}"></div> <th>Weight</th>
<script> <th>Weight (numeric)</th>
$("#slider{{widget.pk}}{{att}}").slider({ </tr>
</thead>
value:0, <tbody>
min:0, {% for att in attributes %}
max:100, <tr>
slide: function( event, ui ) { <td>
$( "#weight{{widget.pk}}{{att}}").val( $("#slider{{widget.pk}}{{att}}").slider("value") ); {{att}}
}, </td>
stop: function ( event, ui ) { <td>
$( "#weight{{widget.pk}}{{att}}").val( $("#slider{{widget.pk}}{{att}}").slider("value") ); <input id="smallerIsBetter{{widget.pk}}{{att}}" name="smallerIsBetter{{widget.pk}}{{att}}" type="checkbox" value="true" style="display:inline;" />
} </td>
<td>
}); <div style="width:200px;" id="slider{{widget.pk}}{{att}}"></div>
</script> <script type="text/javascript">
</div> // Slider code.
<br> $("#slider{{widget.pk}}{{att}}").slider({
<br> value:0,
{% endfor %} min:0,
max:100,
<input type="hidden" name="widget_id" value="{{widget.pk}}"/> slide: function( event, ui ) {
</form> $( "#weight{{widget.pk}}{{att}}").val( $("#slider{{widget.pk}}{{att}}").slider("value") );
</div> },
stop: function ( event, ui ) {
$( "#weight{{widget.pk}}{{att}}").val( $("#slider{{widget.pk}}{{att}}").slider("value") );
}
});
// Change the slider position when manually editing the weight.
$("#weight{{widget.pk}}{{att}}").change(function() {
$("#slider{{widget.pk}}{{att}}").slider("value", $("#weight{{widget.pk}}{{att}}").val());
});
</script>
</td>
<td>
<input type="number" style="width:30px; display:inline;" name="weight{{widget.pk}}{{att}}" id="weight{{widget.pk}}{{att}}" value="0"/>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<input type="hidden" name="widget_id" value="{{widget.pk}}"/>
</form>
<br/>
<button id="normalizeButton{{widget.pk}}">Normalize weights!</button>
<button id="resetButton{{widget.pk}}">Reset!</button>
<script type="text/javascript">
// Data table code.
$('#weightSel{{widget.pk}}').dataTable( {
"bJQueryUI": true,
"bPaginate" : false,
"bSort" : false,
"bFilter" : false
});
// Normalization code.
$("#normalizeButton{{widget.pk}}").button().click(function() {
var weight_elements = $('[id^="weight{{widget.pk}}"]');
var weight_sum = 0;
weight_elements.each(function(index) {
weight_sum += parseFloat($(this).val());
});
if (weight_sum > 0) {
weight_elements.each(function(index) {
//round(100 * parseFloat($(this).val()) / weight_sum)
$(this).val(Math.round(100 * parseFloat($(this).val()) / weight_sum));
$(this).change();
});
}
});
// Reset button code.
$("#resetButton{{widget.pk}}").button().click(function() {
$('[id^="weight{{widget.pk}}"]').each(function() {
$(this).val(0);
$(this).change();
});
});
</script>
</div>
</div> </div>
\ No newline at end of file
<div id="widgetvisualization-{{widget.pk}}" rel="{{widget.pk}}" class="widgetvisualizationdialog" title="{{widget.name}} visualization" width="600px" height="700px"> <div id="widgetvisualization-{{widget.pk}}" rel="{{widget.pk}}" class="widgetvisualizationdialog" title="{{widget.name}} visualization" width="600px" height="600px">
<div style="width:580px;"> <div style="width:580px;">
Select the attribute to perform sensitivity analysis on.<br><br> Select the attribute to perform sensitivity analysis on.<br><br>
<form> <form>
<fieldset> <div id="radio" style="margin-bottom: 10px; text-align: center;">
{% for att in attributes %} {% for att in attributes %}
<input type="radio" class="target_att" name="target{{widget.pk}}" id="target{{widget.pk}}{{att}}" value="{{att}}" {% if forloop.first %}checked="checked"{% endif %} style="display:inline;"> <label for="target{{widget.pk}}{{att}}" style="font-weight:bold; display:inline;">{{att}}</label> <input type="radio" class="target_att" name="target{{widget.pk}}" id="target{{widget.pk}}{{att}}" value="{{att}}" {% if forloop.first %}checked="checked"{% endif %}> <label for="target{{widget.pk}}{{att}}">{{att}}</label>
<br>
<br>
{% endfor %} {% endfor %}
</fieldset> </div>
<input type="hidden" name="widget_id" value="{{widget.pk}}"/> <input type="hidden" name="widget_id" value="{{widget.pk}}"/>
</form> </form>
<script type="text/javascript"> <script type="text/javascript">
$(function () { $(function () {
// Pretty radio buttons.
$("#radio").buttonset();
// Load data points. // Load data points.
var data_points = {{ data_points|safe }}; var data_points = {{ data_points|safe }};
var chart; var chart;
...@@ -35,7 +36,7 @@ $(function () { ...@@ -35,7 +36,7 @@ $(function () {
renderTo: 'container', renderTo: 'container',
type: 'line', type: 'line',
marginRight: 130, marginRight: 130,
marginBottom: 25 marginBottom: 40
}, },
title: { title: {
text: 'Sensitivity analysis', text: 'Sensitivity analysis',
...@@ -47,7 +48,7 @@ $(function () { ...@@ -47,7 +48,7 @@ $(function () {
}, },
xAxis: { xAxis: {
title: { title: {
text: 'Weight of {{target_att}}' text: 'Weight of \'' + target_att + '\''
} }
}, },
yAxis: { yAxis: {
...@@ -63,7 +64,7 @@ $(function () { ...@@ -63,7 +64,7 @@ $(function () {
tooltip: { tooltip: {
formatter: function() { formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+ return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C'; this.x +': '+ this.y.toFixed(3);
} }
}, },
legend: { legend: {
...@@ -79,6 +80,6 @@ $(function () { ...@@ -79,6 +80,6 @@ $(function () {
} }
}); });
</script> </script>
<div id="container" style="min-width: 580px; height: 450px; margin: 0 auto"></div> <div id="container" style="min-width: 580px; min-height: 480px margin: 0 auto"></div>
</div> </div>
</div> </div>
\ No newline at end of file
<div id="widgetvisualization-{{widget.pk}}" width="700" height="500" rel="{{widget.pk}}" class="widgetvisualizationdialog" title="{{widget.name}} results"> <div id="widgetvisualization-{{widget.pk}}" width="700" height="500" rel="{{widget.pk}}" class="widgetvisualizationdialog" title="{{widget.name}} results">
<style type="text/css">
/*
Data table fine-tuning.
*/
table.display {
width: 100%;
}
tr.odd {
background-color: rgb(221, 255, 221);
}
tr.even {
background-color: rgb(238, 255, 238);
}
.dataTable .ui-icon {
display: inline;
float: right;
}
.dataTables_wrapper .ui-button {
padding: 2px 6px 2px 6px;
margin-right: 0px;
}
.dataTables_filter {
//width: 50%;
float: right;
text-align: right;
}
.dataTables_filter label, .dataTables_filter input {
display: inline;
white-space: nowrap;
width: auto;
}
.dataTables_length {
//width: 40%;
float: left;
text-align: left;
}
div.dataTables_length {
float: left;
}
div.dataTables_filter {
float: right;
}
div.dataTables_info {
padding: 9px 6px 10px 6px;
float: left;
}
div.dataTables_paginate {
float: right;
}
div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate {
padding: 6px 6px 0px 6px;
}
html[xmlns] .dataTables_wrapper {
display: block;
}
* html .dataTables_wrapper {
height: 1%;
}
</style>
<center> <center>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="datasetTable{{widget.pk}}"> <table cellpadding="0" cellspacing="0" border="0" class="display" id="datasetTable{{widget.pk}}">
<!-- header --> <!-- header -->
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment