Ssmith has uploaded a new change for review.
https://gerrit.wikimedia.org/r/182239
Change subject: Move filters from modal & add save/preview
......................................................................
Move filters from modal & add save/preview
Change-Id: Ibcf015a12af1325d4facb78d3c8b3d5a3ccd78ab
---
M src/components/widgets/x-by-y-chart/x-by-y-chart.html
M src/components/widgets/x-by-y-chart/x-by-y-chart.js
M src/css/style.css
3 files changed, 67 insertions(+), 69 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/39/182239/1
diff --git a/src/components/widgets/x-by-y-chart/x-by-y-chart.html
b/src/components/widgets/x-by-y-chart/x-by-y-chart.html
index 36527d5..1300998 100644
--- a/src/components/widgets/x-by-y-chart/x-by-y-chart.html
+++ b/src/components/widgets/x-by-y-chart/x-by-y-chart.html
@@ -14,35 +14,61 @@
<div class="panel-body">
<div class="row">
- <div class="col-md-2">
+ <div class="col-md-3">
- <div class="row-fluid">
- <div class="well">
- <h4>Show:</h4>
- <select data-bind="options: ySlices,
value: showSlice"></select>
- </div>
- </div>
- <div class="row-fluid">
- <div class="well">
- <h4>By:</h4>
- <select data-bind="options: xSlices,
value: bySlice"></select>
- </div>
- </div>
+
<div class="row-fluid">
- <div class="well">
- <button class="btn btn-block btn-info"
data-toggle="modal" data-target="#XYfilterModal"><i class="fa fa-filter"></i>
Narrow further....</button>
+ <div class="well lightWell col-md-12">
+ <form id="XYform" data-bind="event:
{change: logStateChange(true)}">
+ <div class="row-fluid">
+ <h4>Show:</h4>
+ <select
data-bind="options: ySlices, value: showSlice"></select>
+ <hr>
+ </div>
+ <div class="row-fluid">
+ <h4>By:</h4>
+ <select
data-bind="options: xSlices, value: bySlice"></select>
+ <hr>
+ </div>
+
+ <div class="row-fluid">
+ <h4>Starting
time range:</h4><br>
+ <select
id="startingTimeRange" placeholder="Range..." data-bind="options:
timeChoices"></select>
+ <hr>
+ </div>
+
+ <div class="row-fluid">
+ <label
for="selectXYFilters">Additional filters to show:</label><br>
+ <span
data-bind="foreach: groupChoices">
+ <div
class="panel panel-default xyGroupOption">
+
<div class="panel-heading">
+
<span data-bind="text: $data.name" class="pull-left"></span>
+
<span class="pull-right" data-bind="if: $data.choices"><i
class="fa fa-caret-down" data-bind="click:
$parent.showPanelBody($data.name)"></i></span>
+
<span class="pull-right" data-bind="if: !$data.choices"><input
type="checkbox" data-bind="value: 'group='+$data.name, checked:
$parent.chosenFilters"></i></span>
+
</div>
+
<div class="panel-body hide" data-bind="if: $data.choices, visible:
$data.choices, attr: { id: $data.name + 'body' }">
+
<ul data-bind="foreach: $data.choices" class="filterPickerList">
+
<li class="subFilterPickerList">
+
<span class="label label-info">
+
<input type="checkbox"
data-bind="value: $parent.name + ' eq \'' + $data + '\'', checked:
$parents[1].chosenFilters"><span data-bind="text: $data"></span>
+
</span>
+
</li>
+
</ul>
+
</div>
+
</div>
+ </span>
+ </div>
+ </form>
</div>
- </div>
- <div class="row-fluid">
- <div class="well">
- <button class="btn btn-block
btn-success" data-bind="click: submitXY"><i class="fa fa-area-chart"></i> See
chart </button>
- </div>
+
+ <button class="btn btn-block btn-info"
data-bind="click: submitXY"><i class="fa fa-area-chart"></i> Preview chart
</button>
+ <button class="btn btn-block btn-danger"
data-bind="visible: !chartSaved() && optionStateChanged, click: saveXY"><i
class="fa fa-save"></i> Save chart </button>
+ <button class="btn btn-block btn-success"
data-bind="visible: chartSaved"><i class="fa fa-check-circle-o"></i> Chart
saved. </button>
</div>
</div>
- <div class="col-md-10">
-
+ <div class="col-md-9">
<div class="row" id="specifiedXYchart">
<div class="col-md-10">
@@ -79,51 +105,6 @@
</div>
- </div>
- </div>
-</div>
-
-<div class="modal fade" id="XYfilterModal">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close"
data-dismiss="modal"><span aria-hidden="true">×</span><span
class="sr-only">Close</span></button>
- <h4 class="modal-title">Set up the chart!</h4>
- </div>
- <div class="modal-body">
-
- <div class="row-fluid">
- <label for="startingTimeRange">Starting time
range:</label><br>
- <select id="startingTimeRange"
class="well" placeholder="Range..." data-bind="options: timeChoices"></select>
- </div>
-
- <div class="row-fluid">
- <label for="selectXYFilters">Additional filters
to show:</label><br>
- <span data-bind="foreach: groupChoices">
- <div class="panel panel-default
xyGroupOption">
- <div class="panel-heading">
- <span
data-bind="text: $data.name" class="pull-left"></span>
- <span
class="pull-right" data-bind="if: $data.choices"><i class="fa fa-caret-down"
data-bind="click: $parent.showPanelBody($data.name)"></i></span>
- <span
class="pull-right" data-bind="if: !$data.choices"><input type="checkbox"
data-bind="value: 'group='+$data.name, checked:
$parent.chosenFilters"></i></span>
- </div>
- <div class="panel-body
hide" data-bind="if: $data.choices, visible: $data.choices, attr: { id:
$data.name + 'body' }">
- <ul
data-bind="foreach: $data.choices" class="filterPickerList">
- <li
class="subFilterPickerList">
-
<span class="label label-info">
-
<input type="checkbox" data-bind="value: $parent.name + ' eq \'' +
$data + '\'', checked: $parents[1].chosenFilters"><span data-bind="text:
$data"></span>
-
</span>
- </li>
- </ul>
- </div>
- </div>
- </span>
- </div>
-
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default"
data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-success pull-right"
data-dismiss="modal" data-bind="click: submitXY">Submit</button>
- </div>
</div>
</div>
</div>
diff --git a/src/components/widgets/x-by-y-chart/x-by-y-chart.js
b/src/components/widgets/x-by-y-chart/x-by-y-chart.js
index 0cbb29b..93df834 100644
--- a/src/components/widgets/x-by-y-chart/x-by-y-chart.js
+++ b/src/components/widgets/x-by-y-chart/x-by-y-chart.js
@@ -24,6 +24,14 @@
self.chosenFilters = ko.observableArray();
self.subChoices = ko.observableArray();
+ self.chartSaved = ko.observable(false);
+ self.optionStateChanged = ko.observable(false);
+ self.logStateChange = function(n){
+ console.log('the option should have changed');
+ self.optionStateChanged(n);
+ self.chartSaved(false);
+ };
+
self.title = ko.computed(function(){
return self.showSlice() + ' by ' + self.bySlice();
});
@@ -124,6 +132,11 @@
return (groupStr + filterStr.slice(0, -5));
};
+ self.saveXY = function(){
+ //TODO: save it in the user profile
+ self.chartSaved(true);
+ }
+
self.submitXY = function(){
//here is an example query string for grabbing Big English
countries by day for Dec:
@@ -167,8 +180,8 @@
}
]
};
- var ctx = $('#x-by-yChart').get(0).getContext('2d');
- self.fakeChart = new Chart(ctx).Line(self.fakeData);
+ var ctx = $('#x-by-yChart').get(0).getContext('2d');
+ self.fakeChart = new Chart(ctx).Line(self.fakeData);
self.xyIsSetUp(true);
};
diff --git a/src/css/style.css b/src/css/style.css
index 5f064e7..cf4b9cb 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -183,6 +183,10 @@
color: #fff;
}
+.lightWell {
+ background-color: rgba(0,0,0,0.009);
+}
+
.noUi-base {
background-color: #dff0d8;
}
--
To view, visit https://gerrit.wikimedia.org/r/182239
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ibcf015a12af1325d4facb78d3c8b3d5a3ccd78ab
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ssmith <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
