Ejegg has submitted this change and it was merged. Change subject: Fix time display, remove refresh and profile btns ......................................................................
Fix time display, remove refresh and profile btns edited to convert spaces to tabs Change-Id: Ia0bbb34c0101647d5e17317453db763e94e93db8 --- M src/components/boards/generic-board/generic-board.html M src/components/nav-bar/nav-bar.html M src/components/widgets/x-by-y/x-by-y.html M src/components/widgets/x-by-y/x-by-y.js 4 files changed, 157 insertions(+), 132 deletions(-) Approvals: Ejegg: Looks good to me, approved diff --git a/src/components/boards/generic-board/generic-board.html b/src/components/boards/generic-board/generic-board.html index dcdcc9e..7797fae 100644 --- a/src/components/boards/generic-board/generic-board.html +++ b/src/components/boards/generic-board/generic-board.html @@ -6,9 +6,9 @@ <p data-bind="text: displayDate"></p> </div> <div class="col-md-8 titleCol"> - <div class="btn-group btn-group-xs pull-right"> + <!-- <div class="btn-group btn-group-xs pull-right"> <button type="button" class="btn btn-default" data-bind="click: reloadBoard"><i class="fa fa-refresh" style="padding-right:5px"></i> Refresh</button> - </div> + </div> --> </div> </div> diff --git a/src/components/nav-bar/nav-bar.html b/src/components/nav-bar/nav-bar.html index b1fb42a..6e2a1c1 100644 --- a/src/components/nav-bar/nav-bar.html +++ b/src/components/nav-bar/nav-bar.html @@ -27,7 +27,7 @@ <div class="hide subNavBoardOpts subNavButton" id="profileLinks"> <ul> <li><a href="/logout">Log out</a></li> - <li id="Profile" data-bind="click: $parent.setDisplayPage">Profile</li> + <!-- <li id="Profile" data-bind="click: $parent.setDisplayPage">Profile</li> --> </ul> </div> </span> 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 3229239..27185a9 100644 --- a/src/components/widgets/x-by-y/x-by-y.html +++ b/src/components/widgets/x-by-y/x-by-y.html @@ -1,52 +1,52 @@ <div class="row"> <span data-bind="if: preDataLoading"> - <div class="loadingWidget"> - <img src="/images/catloader.gif" /> - <h3 class="text-center">Loading.....</h3> - </div> - </span> + <div class="loadingWidget"> + <img src="/images/catloader.gif" /> + <h3 class="text-center">Loading.....</h3> + </div> + </span> <div class="panel panel-purple"> - <div class="panel-heading"> - <div class="btn-group btn-group-xs pull-right"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="modal" data-target="#XYsqlModal"><i class="fa fa-database"></i></button> - <!-- <button type="button" id="savedCharts" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-target="#XYsavedChart"><i class="fa fa-area-chart"></i> Saved charts...</button> - <ul class="dropdown-menu" role="menu" aria-labelledby="savedCharts" id="savedChartsMenu" data-bind="foreach: presetTitles, style: { width: '300px'}"> + <div class="panel-heading"> + <div class="btn-group btn-group-xs pull-right"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="modal" data-target="#XYsqlModal"><i class="fa fa-database"></i></button> + <!-- <button type="button" id="savedCharts" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-target="#XYsavedChart"><i class="fa fa-area-chart"></i> Saved charts...</button> + <ul class="dropdown-menu" role="menu" aria-labelledby="savedCharts" id="savedChartsMenu" data-bind="foreach: presetTitles, style: { width: '300px'}"> <li data-bind="text: $data"></li> </ul> --> - </div> - </div> + </div> + </div> - <div class="panel-body"> - <div class="row-fluid"> - <div class="col-md-3 col-sm-12"> + <div class="panel-body"> + <div class="row-fluid"> + <div class="col-md-3 col-sm-12"> - <div class="row"> - <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"> + <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> + <div class="row-fluid"> + <h4>Starting time range:</h4><br> <select id="startingTimeRange" placeholder="Range..." data-bind="options: timeChoices, value: timeChoice"></select> <!-- <hr> --> - </div> + </div> - <!-- <div class="row-fluid"> - <label for="selectXYFilters">Additional filters:</label><br> - <span data-bind="foreach: groupChoices"> - <div class="panel panel-default xyGroupOption"> - <div class="panel-heading"> + <!-- <div class="row-fluid"> + <label for="selectXYFilters">Additional filters:</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> </div> @@ -61,112 +61,113 @@ </div> </div> </span> - </div> --> - </form> - </div> + </div> --> + </form> + </div> - </div> + </div> - <div class="row"> - <button class="btn btn-block btn-col btn-info" data-bind="click: submitXY"><i class="fa fa-area-chart"></i> Preview chart </button> - </div> - <div class="row"> - <button class="btn btn-block btn-col btn-danger" data-bind="visible: !chartSaved() && optionStateChanged, click: saveWidgetConfig"><i class="fa fa-save"></i> Save chart </button> - </div> - <div class="row"> - <button class="btn btn-block btn-col btn-success" data-bind="visible: chartSaved"><i class="fa fa-check-circle-o"></i> Chart saved. </button> - </div> + <div class="row"> + <button class="btn btn-block btn-col btn-info" data-bind="click: submitXY"><i class="fa fa-area-chart"></i> Preview chart </button> + </div> + <div class="row"> + <button class="btn btn-block btn-col btn-danger" data-bind="visible: !chartSaved() && optionStateChanged, click: saveWidgetConfig"><i class="fa fa-save"></i> Save chart </button> + </div> + <div class="row"> + <button class="btn btn-block btn-col btn-success" data-bind="visible: chartSaved"><i class="fa fa-check-circle-o"></i> Chart saved. </button> + </div> - </div> + </div> - <div class="col-md-9 col-sm-12"> + <div class="col-md-9 col-sm-12"> - <div class="row" id="specifiedXYchart"> - <div class="col-md-12"> - <span data-bind="if: !config"> - <div class="row-fluid alert alert-danger" data-bind="style: { width: '100%', overflow: 'hidden'}"> - <div class="col-md-1"> - <h1><i class="fa fa-gears"></i></h1> - </div> - <div class="col-md-11"> - <h3>This widget hasn't been set up yet.</h3> - <p>Choose display options to see the chart.</p> - </div> - </div> - </span> + <div class="row" id="specifiedXYchart"> + <div class="col-md-12"> + <span data-bind="if: !config"> + <div class="row-fluid alert alert-danger" data-bind="style: { width: '100%', overflow: 'hidden'}"> + <div class="col-md-1"> + <h1><i class="fa fa-gears"></i></h1> + </div> + <div class="col-md-11"> + <h3>This widget hasn't been set up yet.</h3> + <p>Choose display options to see the chart.</p> + </div> + </div> + </span> - <div class="row-fluid" data-bind="if: chartLoaded"> - <h1 data-bind="text: title"></h1> - <h4 data-bind="visible: chosenFilters > 0">Narrowed by: - <span data-bind="foreach: chosenFilters"> - <span class='label label-success' data-bind="text: $data"></span> - </span> - </h4> - </div> - <div id='x-by-yChart' data-bind="attr: { width: chartWidth, height: chartHeight }"></div> - </div> + <div class="row-fluid" data-bind="if: chartLoaded"> + <h1 data-bind="text: title"></h1> + <h4 data-bind="text: subtitle"></h4> + <h4 data-bind="visible: chosenFilters > 0">Narrowed by: + <span data-bind="foreach: chosenFilters"> + <span class='label label-success' data-bind="text: $data"></span> + </span> + </h4> + </div> + <div id='x-by-yChart' data-bind="attr: { width: chartWidth, height: chartHeight }"></div> + </div> - <!-- <div class="col-md-2 pull-right"> - <button class="btn-info"><i class="fa fa-bar-chart"></i></button> - <button class="btn-info"><i class="fa fa-line-chart"></i></button> - <button class="btn-info"><i class="fa fa-pie-chart"></i></button> - <button class="btn-info"><i class="fa fa-table"></i></button> - </div> --> - </div> - </div> + <!-- <div class="col-md-2 pull-right"> + <button class="btn-info"><i class="fa fa-bar-chart"></i></button> + <button class="btn-info"><i class="fa fa-line-chart"></i></button> + <button class="btn-info"><i class="fa fa-pie-chart"></i></button> + <button class="btn-info"><i class="fa fa-table"></i></button> + </div> --> + </div> + </div> - </div> + </div> - </div> + </div> </div> </div> <div class="modal fade" id="XYsavedCharts"> <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"> - <div class="col-md-12 well"> - <label>Show a saved chart:</label> - <div class="input-group"> - <select data-bind="options: presetTitles, value: title"></select> - </div> - </div> - </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">Submit</button> - </div> - </div> + <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"> + <div class="col-md-12 well"> + <label>Show a saved chart:</label> + <div class="input-group"> + <select data-bind="options: presetTitles, value: title"></select> + </div> + </div> + </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">Submit</button> + </div> + </div> </div> </div> <div class="modal fade" id="XYsqlModal"> <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">Fraud Gauge SQL:</h4> - </div> - <div class="modal-body" data-bind="text: queryStringSQL"></div> - </div><!-- /.modal-content --> - </div> + <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">Chart SQL:</h4> + </div> + <div class="modal-body" data-bind="text: queryStringSQL"></div> + </div><!-- /.modal-content --> + </div> </div> <div class="modal fade" id="loadingModal"> <div class="modal-dialog"> - <div class="modal-content"> - <h3 class="modal-body">Chart Loading....</h3> - <div class="progress"> + <div class="modal-content"> + <h3 class="modal-body">Chart Loading....</h3> + <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> </div> </div> - </div><!-- /.modal-content --> - </div> + </div><!-- /.modal-content --> + </div> </div> \ No newline at end of file diff --git a/src/components/widgets/x-by-y/x-by-y.js b/src/components/widgets/x-by-y/x-by-y.js index 7a36515..8fdffb6 100644 --- a/src/components/widgets/x-by-y/x-by-y.js +++ b/src/components/widgets/x-by-y/x-by-y.js @@ -11,19 +11,41 @@ function XByYChartViewModel( params ){ WidgetBase.call( this, params ); - var self = this, - wasSaved = self.chartSaved(); //populateChoices() may overwrite - self.showSlice = ko.observable(); - self.bySlice = ko.observable(); - self.timeChoice = ko.observable(); - self.queryRequest = {}; - self.queryString = ''; - self.chosenFilters = ko.observableArray(); - self.subChoices = ko.observableArray(); + var self = this, + wasSaved = self.chartSaved(); //populateChoices() may overwrite + + self.showSlice = ko.observable(); + self.bySlice = ko.observable(); + self.timeChoice = ko.observable(); + self.displayedTimeChoice = ko.observable(''); + self.queryRequest = {}; + self.queryString = ''; + self.chosenFilters = ko.observableArray(); + self.subChoices = ko.observableArray(); self.chartWidth(950); - self.title = ko.computed(function(){ - return self.showSlice(); //+ ' by ' + self.bySlice(); + self.title = ko.computed( function(){ + if( self.displayedTimeChoice()==='Year' ){ + return self.showSlice() + ' Over All Time'; + } else { + return self.showSlice() + ' by ' + self.displayedTimeChoice(); + } + }); + + self.subtitle = ko.computed( function(){ + var from = ''; + switch(self.displayedTimeChoice()){ + case 'Year': + return; + case 'Month': + from = moment().subtract(1, 'year').format('MMMM Do, YYYY'); + break; + case 'Day': + from = moment().subtract(1, 'month').format('MMMM Do, YYYY'); + break; + } + + return from + ' to ' + moment().format('MMMM Do, YYYY'); }); self.makeChart = function(data){ @@ -317,6 +339,7 @@ self.submitXY = function(){ $('#loadingModal').modal('show'); + self.queryRequest.ySlice = self.showSlice(); //self.queryRequest.xSlice = self.bySlice(); //self.queryRequest.additionalFilters = self.chosenFilters(); @@ -326,11 +349,12 @@ self.config.showSlice = self.showSlice(); self.config.queryString = self.queryString; self.config.timeBreakout = self.queryRequest.timeBreakout; - self.config.chartData = self.chartData; + self.config.chartData = self.chartData; var chartDataCall = self.getChartData(self.queryString); $.when( chartDataCall ).then( function( dataArray ){ + self.displayedTimeChoice(self.timeChoice()); self.retrievedResults(dataArray.results); self.dataLoading(false); -- To view, visit https://gerrit.wikimedia.org/r/195996 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ia0bbb34c0101647d5e17317453db763e94e93db8 Gerrit-PatchSet: 5 Gerrit-Project: wikimedia/fundraising/dash Gerrit-Branch: master Gerrit-Owner: Ssmith <ssm...@wikimedia.org> Gerrit-Reviewer: Ejegg <eeggles...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits