Ejegg has uploaded a new change for review.
https://gerrit.wikimedia.org/r/199266
Change subject: WIP: shared filter component
......................................................................
WIP: shared filter component
Add a <filters> component and a <dropdown-filter> subcomponent.
Each subcomponent is responsible for creating its own query string.
Change-Id: I9665ba59c4fdf8acf088d5ef6074328e4a975dbc
---
M src/app/startup.js
M src/app/widgetBase.js
A src/components/filters/dropdown-filter/dropdown-filter.html
A src/components/filters/dropdown-filter/dropdown-filter.js
A src/components/filters/filters.html
A src/components/filters/filters.js
M src/components/widgets/x-by-y/x-by-y.html
7 files changed, 120 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/66/199266/1
diff --git a/src/app/startup.js b/src/app/startup.js
index e6cc743..0d0cf6a 100644
--- a/src/app/startup.js
+++ b/src/app/startup.js
@@ -19,6 +19,10 @@
ko.components.register( 'generic-board', { require:
'components/boards/generic-board/generic-board' });
ko.components.register( 'bigEnglishBoard', { require:
'components/boards/bigEnglish/bigEnglishBoard' });
+ //register filters
+ ko.components.register( 'filters', {
require: 'components/filters/filters' });
+ ko.components.register( 'dropdown-filter', {
require: 'components/filters/dropdown-filter/dropdown-filter' });
+
//register individual widgets
ko.components.register( 'fraud-gauge', { require:
'components/widgets/fraud-gauge/fraud-gauge' });
ko.components.register( 'totals-earned-chart', { require:
'components/widgets/totals-earned-chart/totals-earned-chart' });
diff --git a/src/app/widgetBase.js b/src/app/widgetBase.js
index 4a395d0..c9f9e48 100644
--- a/src/app/widgetBase.js
+++ b/src/app/widgetBase.js
@@ -28,6 +28,19 @@
self.chartHeight = ko.observable('550');
self.chartLoaded = ko.observable(false);
self.title =
ko.observable(params.title);
+ self.userChoices =
ko.observable(self.config.userChoices);
+ self.filterQueryString =
ko.observable(self.config.filterQueryString || '');
+ self.metadataRequest = ( function() {
+ var storageKey = 'metadata-' + self.widgetCode,
+ data = localStorage.getItem( storageKey );
+
+ if ( data ) {
+ return $.Deferred().resolve( JSON.parse( data )
).promise();
+ }
+ return $.get( 'metadata/' + self.widgetCode, function(
fetchedData ) {
+ localStorage.setItem( storageKey,
JSON.stringify( fetchedData ) );
+ } );
+ } )();
self.getChartData = function( qs ){
self.dataLoading(true);
@@ -42,6 +55,9 @@
};
self.saveWidgetConfig = function(){
+ self.config.userChoices = ko.toJSON( self.userChoices );
+ self.config.filterQueryString = ko.toJSON(
self.filterQueryString );
+
var data = JSON.stringify( {
configuration: self.config,
isShared: false,
@@ -124,14 +140,22 @@
var timeArray = ['Year', 'Month', 'Day', 'Hour'],
index = timeArray.indexOf(
userChoices.timeBreakout ),
- query = 'group=' + userChoices.timeBreakout;
+ query = 'group=' + userChoices.timeBreakout,
+ filterQueryString = self.filterQueryString(),
+ extraFilter;
// If we're grouping by anything finer than year, add a
filter and
// also group by the next level up.
if ( index > 0 ) {
query = query + '&group=' + timeArray[index -
1];
- query = query + '&$filter=' + timeArray[index -
1] + 'sAgo lt \'1\'';
+ extraFilter = timeArray[index - 1] + 'sAgo lt
\'1\''
+ if ( filterQueryString === '' ) {
+ filterQueryString = '$filter=' +
extraFilter;
+ } else {
+ filterQueryString = filterQueryString +
' AND ' + extraFilter;
+ }
}
+ query = query + '&' + filterQueryString;
//groupStr = timeBreakout + '&group=' +
userChoices.xSlice;
// if( userChoices.additionalFilters.length > 0 ){
diff --git a/src/components/filters/dropdown-filter/dropdown-filter.html
b/src/components/filters/dropdown-filter/dropdown-filter.html
new file mode 100644
index 0000000..2395fc0
--- /dev/null
+++ b/src/components/filters/dropdown-filter/dropdown-filter.html
@@ -0,0 +1 @@
+<select data-bind="options:values, selectedOptions: selectedValues"
multiple="true"/>
diff --git a/src/components/filters/dropdown-filter/dropdown-filter.js
b/src/components/filters/dropdown-filter/dropdown-filter.js
new file mode 100644
index 0000000..59c669b
--- /dev/null
+++ b/src/components/filters/dropdown-filter/dropdown-filter.js
@@ -0,0 +1,25 @@
+define( [
+ 'knockout',
+ 'jquery',
+ 'text!components/filters/dropdown-filter/dropdown-filter.html'
+ ],
+function( ko, $, template ){
+
+ function DropdownFilterViewModel( params ){
+ this.values = params.metadata.values;
+ this.selectedValues = params.userChoices;
+
+ this.selectedValues.subscribe( function( vals ) {
+ var qs = '';
+ $.each( vals, function( i, value ) {
+ if ( i > 0 ) {
+ qs += ' OR ';
+ }
+ qs += params.name + ' eq \'' + value + '\'';
+ } );
+ params.queryString( qs );
+ } );
+ }
+
+ return { viewModel: DropdownFilterViewModel, template: template };
+} );
diff --git a/src/components/filters/filters.html
b/src/components/filters/filters.html
new file mode 100644
index 0000000..bca4a32
--- /dev/null
+++ b/src/components/filters/filters.html
@@ -0,0 +1,6 @@
+<div class="filters">
+ <div class="row" data-bind="foreach: filters">
+ <span data-bind="text: metadata.display"></span>:
+ <div data-bind="component: { name: metadata.type + '-filter', params:
{ name: name, queryString: queryString, metadata: metadata, userChoices:
userChoices } }"></div>
+ </div>
+</div>
diff --git a/src/components/filters/filters.js
b/src/components/filters/filters.js
new file mode 100644
index 0000000..90ca8b0
--- /dev/null
+++ b/src/components/filters/filters.js
@@ -0,0 +1,53 @@
+define( [
+ 'knockout',
+ 'jquery',
+ 'text!components/filters/filters.html'
+ ],
+function( ko, $, template ){
+
+ function FiltersViewModel( params ){
+ var self = this;
+
+ this.filters = ko.observableArray( [] );
+ this.setChoices = function() {
+ var qs = '', choices = {};
+ $.each( self.filters(), function( i, filter ) {
+ var filterQs = filter.queryString();
+ if ( !filterQs || filterQs == '' ) {
+ return;
+ }
+ if ( qs === '' ) {
+ qs += '$filter=(';
+ } else {
+ qs += ' AND (';
+ }
+ qs += filterQs;
+ qs += ')';
+ choices[filter.name] = filter.userChoices();
+ } );
+ params.queryString( qs );
+ params.userChoices( choices );
+ params.change();
+ };
+
+ params.metadataRequest.then( function( metadata ) {
+ $.each( metadata.filters, function( name, filterMeta ) {
+ var filter = {
+ name: name,
+ metadata: filterMeta,
+ queryString: ko.observable('')
+ }
+ if ( filterMeta.type === 'dropdown' ) {
+ filter.userChoices =
ko.observableArray( params.userChoices[name] || [] );
+ } else {
+ return;//temporarily only doing
dropdown filters
+ filter.userChoices = ko.observable(
params.userChoices[name] );
+ }
+ filter.queryString.subscribe( self.setChoices );
+ self.filters.push( filter );
+ } );
+ } );
+ }
+
+ return { viewModel: FiltersViewModel, template: template };
+} );
diff --git a/src/components/widgets/x-by-y/x-by-y.html
b/src/components/widgets/x-by-y/x-by-y.html
index fa3b62a..a35da4d 100644
--- a/src/components/widgets/x-by-y/x-by-y.html
+++ b/src/components/widgets/x-by-y/x-by-y.html
@@ -43,9 +43,10 @@
<!--
<hr> -->
</div>
- <!-- <div
class="row-fluid">
+ <div
class="row-fluid">
<label
for="selectXYFilters">Additional filters:</label><br>
- <span
data-bind="foreach: groupChoices">
+
<filters params="change: logStateChange, userChoices: userChoices,
metadataRequest: metadataRequest, queryString: filterQueryString" />
+
<!--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>
@@ -61,8 +62,8 @@
</ul>
</div>
</div>
- </span>
- </div> -->
+
</span-->
+ </div>
</form>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/199266
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I9665ba59c4fdf8acf088d5ef6074328e4a975dbc
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ejegg <eeggles...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
