Ejegg has submitted this change and it was merged.
Change subject: Add the x-by-y chart widget
......................................................................
Add the x-by-y chart widget
Change-Id: I7f7f473f7cb942766f9c2b8db408d4e94ceabd9e
---
M src/app/startup.js
M src/components/boards/bigEnglish/bigEnglishBoard.html
M src/components/widgets/fraud-gauge/fraud-gauge.html
A src/components/widgets/x-by-y-chart/x-by-y-chart.html
A src/components/widgets/x-by-y-chart/x-by-y-chart.js
M src/css/style.css
6 files changed, 215 insertions(+), 2 deletions(-)
Approvals:
Ejegg: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/app/startup.js b/src/app/startup.js
index d564500..00c9550 100644
--- a/src/app/startup.js
+++ b/src/app/startup.js
@@ -23,6 +23,7 @@
ko.components.register( 'totals-earned-chart', { require:
'components/widgets/totals-earned-chart/totals-earned-chart' });
ko.components.register( 'distance-to-goal-chart', { require:
'components/widgets/distance-to-goal-chart/distance-to-goal-chart' });
ko.components.register( 'amt-per-second-chart', { require:
'components/widgets/amt-per-second-chart/amt-per-second-chart' });
+ ko.components.register( 'x-by-y-chart', { require:
'components/widgets/x-by-y-chart/x-by-y-chart' });
//fire up router
ko.applyBindings({ route: router.currentRoute });
diff --git a/src/components/boards/bigEnglish/bigEnglishBoard.html
b/src/components/boards/bigEnglish/bigEnglishBoard.html
index 323f6d2..e13e142 100644
--- a/src/components/boards/bigEnglish/bigEnglishBoard.html
+++ b/src/components/boards/bigEnglish/bigEnglishBoard.html
@@ -61,6 +61,8 @@
</div>
</div>
+<x-by-y-chart></x-by-y-chart>
+
<totals-earned-chart params="title: 'Donation Amounts by Day in December',
dailyCountArray: dailyCountArray, dailyDataArray: dailyDataArray, dayObj:
dayObj, dataChanged: dataChanged"></totals-earned-chart>
<div class="row layoutRow">
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.html
b/src/components/widgets/fraud-gauge/fraud-gauge.html
index 25bc16a..ac0fabc 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.html
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.html
@@ -21,8 +21,10 @@
<div class="row" id="unspecifiedFraudGauge"
data-bind="visible: !gaugeIsSetUp()">
<div class="col-md-12">
- <h3>This widget hasn't been set up yet.</h3>
- <button type="button" class="btn btn-primary btn-lg
btn-block" data-toggle="modal" data-target="#modifyModal">Set it up</button>
+ <div class="setupAsk">
+ <h3>This widget hasn't been set up yet.</h3>
+ <button type="button" class="btn btn-primary
btn-lg btn-block" data-toggle="modal" data-target="#modifyModal">Set it
up</button>
+ </div>
</div>
</div>
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
new file mode 100644
index 0000000..b96849d
--- /dev/null
+++ b/src/components/widgets/x-by-y-chart/x-by-y-chart.html
@@ -0,0 +1,129 @@
+<div class="row">
+ <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"><i class="fa fa-database"></i></button>
+ <button type="button" class="btn btn-default"
data-toggle="modal" data-target="#modifyXYModal"><i class="fa
fa-edit"></i></button>
+ </div>
+ </div>
+
+ <div class="panel-body">
+ <div class="row">
+ <div class="col-md-12">
+
+ <div class="row-fluid">
+ <h1 data-bind="visible: xyIsSetUp(), text:
title"></h1>
+ </div>
+
+ <div class="row" id="specifiedXYchart"
data-bind="visible: xyIsSetUp">
+ <div class="col-md-2">
+ <div class="row">
+ <div class="sidebox">
+ <h4>Show:</h4>
+ <select>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+ </select>
+ </div>
+ </div>
+ <div class="row">
+ <div class="sidebox">
+ <h4>And (optional):</h4>
+ <select>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+ </select>
+ </div>
+ </div>
+ <div class="row">
+ <div class="sidebox">
+ <h4>By:</h4>
+ <select>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+ </select>
+ </div>
+ </div>
+ <div class="row">
+ <div class="sidebox">
+ <h4>Filters:</h4>
+ <select>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+
<option>Thing</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-8">
+ <canvas id='x-by-yChart' height="550"
width="900"></canvas>
+ </div>
+ <div class="col-md-2">
+ <button class="btn-info">Thing</button>
+ <button class="btn-info">Thing</button>
+ <button class="btn-info">Thing</button>
+ <button class="btn-info">Thing</button>
+ <button class="btn-info">Thing</button>
+ </div>
+ </div>
+
+ <div class="row" id="unspecifiedXYchart"
data-bind="visible: !xyIsSetUp()">
+ <div class="col-md-12">
+ <div class="setupAsk">
+ <h3><i class="fa fa-gears"></i> This
widget hasn't been set up yet.</h3>
+ <button type="button" class="btn
btn-primary btn-block btn-lg" data-toggle="modal"
data-target="#modifyModal">Set it up</button>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="modal fade" id="modifyXYModal">
+ <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">
+ <div class="col-md-6">
+ <label>Chart Title:</label>
+ <div class="input-group">
+ <input type="text" class="form-control"
data-bind="textInput: title">
+ </div>
+ </div>
+ <div class="col-md-6">
+ <label>Something else:</label>
+ <div class="input-group">
+ <input type="text" class="form-control">
+ </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" data-bind="click: submitXY">Submit</button>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
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
new file mode 100644
index 0000000..5dc6d96
--- /dev/null
+++ b/src/components/widgets/x-by-y-chart/x-by-y-chart.js
@@ -0,0 +1,63 @@
+define( [
+ 'knockout',
+ 'text!components/widgets/x-by-y-chart/x-by-y-chart.html',
+ 'momentjs',
+ 'numeraljs',
+ 'chartjs'
+], function( ko, template, moment, numeral, Chart ){
+
+
+ function XByYChartViewModel( params ){
+
+ var self = this;
+ self.title = ko.observable('This is the title');
+ self.xyIsSetUp = ko.observable(true);
+ self.chartWidth = ko.observable('900');
+ self.chartHeight = ko.observable('550');
+
+ self.makeChart = function(){
+ self.fakeData = {
+ labels: ['January', 'February', 'March', 'April', 'May',
'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ fillColor: 'rgba(220,220,220,0.2)',
+ strokeColor: 'rgba(220,220,220,1)',
+ pointColor: 'rgba(220,220,220,1)',
+ pointStrokeColor: '#fff',
+ pointHighlightFill: '#fff',
+ pointHighlightStroke: 'rgba(220,220,220,1)',
+ data: [65, 59, 80, 81, 56, 55, 40]
+ },
+ {
+ label: 'My Second dataset',
+ fillColor: 'rgba(151,187,205,0.2)',
+ strokeColor: 'rgba(151,187,205,1)',
+ pointColor: 'rgba(151,187,205,1)',
+ pointStrokeColor: '#fff',
+ pointHighlightFill: '#fff',
+ pointHighlightStroke: 'rgba(151,187,205,1)',
+ data: [28, 48, 40, 19, 86, 27, 90]
+ }
+ ]
+ };
+ var ctx = $('#x-by-yChart').get(0).getContext('2d');
+ self.fakeChart = new Chart(ctx).Line(self.fakeData);
+ };
+
+ if(self.xyIsSetUp){
+ self.makeChart();
+ }
+
+ self.submitXY = function(){
+ self.xyIsSetUp(true);
+ self.makeChart();
+ };
+
+
+
+ }
+
+ return { viewModel: XByYChartViewModel, template: template };
+
+});
diff --git a/src/css/style.css b/src/css/style.css
index e60c807..9af07e8 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -68,6 +68,22 @@
color: #f5f5f5;
}
+.sidebox {
+ margin: 10px;
+ background-color: rgba(0,0,0,0.03);
+ padding: 5px;
+}
+
+.setupAsk {
+ width: 40%;
+ margin: 0 auto;
+ background-color: rgba(0,0,0,0.03);
+ padding: 5%;
+ font-size: 1.4em;
+ color: rgba(0,0,0,0.6);
+ min-width: 400px;
+}
+
#collapseNavMenu {
background-color: rgba(255,255,255,0.4);
}
--
To view, visit https://gerrit.wikimedia.org/r/178994
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I7f7f473f7cb942766f9c2b8db408d4e94ceabd9e
Gerrit-PatchSet: 6
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ssmith <ssm...@wikimedia.org>
Gerrit-Reviewer: Awight <awi...@wikimedia.org>
Gerrit-Reviewer: Ejegg <eeggles...@wikimedia.org>
Gerrit-Reviewer: Ssmith <ssm...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
