Ssmith has uploaded a new change for review.
https://gerrit.wikimedia.org/r/178242
Change subject: Add the x-by-y chart widget
......................................................................
Add the x-by-y chart widget
Change-Id: I88c3e450245aac02dddcecab489516302e821f31
---
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, 218 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/42/178242/1
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 ee4bfaa..2076eb8 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..515fd1a
--- /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, chartjs ){
+
+
+ function XByYChartViewModel( params ){
+
+ var self = this;
+ self.title = ko.observable('This is the title');
+ self.xyIsSetUp = ko.observable(true);
+ self.chartWidth = ko.computed( function(){ return "900"; });
+ self.chartHeight = ko.computed( function(){ return "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 2298c52..66c0e3c 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -68,6 +68,25 @@
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;
+}
+
+.setupAsk i {
+}
+
#collapseNavMenu {
background-color: rgba(255,255,255,0.4);
}
--
To view, visit https://gerrit.wikimedia.org/r/178242
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I88c3e450245aac02dddcecab489516302e821f31
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
