Ejegg has submitted this change and it was merged.
Change subject: update gauge library and presentation
......................................................................
update gauge library and presentation
also updated bower
fix css to reflect the change in c3 library name from bower pkg
edit: fix build for css/js in index.html
Change-Id: Iae0a4f34ed46dc48a993a7d81a7f821c4ecd5b29
---
M bower.json
M src/app/require.config.js
M src/bower_modules
M src/components/utils/date-pickers/date-pickers.js
M src/components/widgets/fraud-gauge/fraud-gauge.html
M src/components/widgets/fraud-gauge/fraud-gauge.js
M src/css/style.css
M src/index.html
8 files changed, 64 insertions(+), 64 deletions(-)
Approvals:
Ejegg: Looks good to me, approved
diff --git a/bower.json b/bower.json
index 3c91df2..4fdb0a7 100644
--- a/bower.json
+++ b/bower.json
@@ -25,6 +25,7 @@
"bootstrap-datepicker": "~1.3.0",
"bootstrap-timepicker": "~0.2.6",
"d3": "~3.4.11",
+ "c3": "~0.3.0",
"chartjs": "~1.0.0",
"crossroads": "~0.12.0",
"gauge.js": "~1.2.1",
diff --git a/src/app/require.config.js b/src/app/require.config.js
index c629d61..db0c0c7 100644
--- a/src/app/require.config.js
+++ b/src/app/require.config.js
@@ -19,7 +19,8 @@
'bootstrap-timepicker':
'bower_modules/bootstrap-timepicker/js/bootstrap-timepicker',
'sifter': 'bower_modules/sifter/sifter',
'microplugin': 'bower_modules/microplugin/src/microplugin',
- 'selectize': 'bower_modules/selectize/dist/js/selectize'
+ 'selectize': 'bower_modules/selectize/dist/js/selectize',
+ 'c3': 'bower_modules/c3/c3'
},
shim: {
'bootstrap': {
@@ -27,6 +28,11 @@
'jquery'
]
},
+ 'c3': {
+ deps: [
+ 'd3'
+ ]
+ },
'momentjs': {
exports: 'moment'
},
diff --git a/src/bower_modules b/src/bower_modules
index e3a45c1..eae6ed5 160000
--- a/src/bower_modules
+++ b/src/bower_modules
-Subproject commit e3a45c1485b6fbb7bef3176d3561f141075ab8f9
+Subproject commit eae6ed5094e35f85ad6ac315f059630928e29870
diff --git a/src/components/utils/date-pickers/date-pickers.js
b/src/components/utils/date-pickers/date-pickers.js
index 5d5ea4c..9b6960c 100644
--- a/src/components/utils/date-pickers/date-pickers.js
+++ b/src/components/utils/date-pickers/date-pickers.js
@@ -56,7 +56,6 @@
});
self.availableTimePresets = ko.observableArray([
- 'Select:',
'Last 15 Minutes',
'Last Hour',
'Last 24 Hours',
@@ -64,7 +63,6 @@
]);
self.availableIncrementTypes = ko.observableArray([
- 'Select:',
'Hour...',
'Day...',
'Week...',
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.html
b/src/components/widgets/fraud-gauge/fraud-gauge.html
index 3f99b08..514b80b 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.html
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.html
@@ -16,8 +16,7 @@
</div>
<div class="row" id="specifiedFraudGauge" data-bind="visible:
gaugeIsSetUp">
- <canvas id="FraudRiskScoreGauge"></canvas>
- <h2 class="text-center" id="fraudGaugeValue"><span
data-bind="text: gaugeValue"></span>%</h2>
+ <div id="FraudRiskScoreGauge"></div>
</div>
<div class="row" id="unspecifiedFraudGauge"
data-bind="visible: !gaugeIsSetUp()">
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.js
b/src/components/widgets/fraud-gauge/fraud-gauge.js
index 1de962e..78b840a 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.js
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.js
@@ -3,10 +3,11 @@
'text!components/widgets/fraud-gauge/fraud-gauge.html',
'gauge',
'noUISlider',
+ 'c3',
'selectize',
'bootstrap-datepicker'
],
-function( ko, template, datePickersTemplate, noUISlider ){
+function( ko, template, datePickersTemplate, noUISlider, c3 ){
function FraudGaugeViewModel( params ){
@@ -19,11 +20,11 @@
});
self.title = 'Fraud Rejections';
- self.selectedTimePeriod = ko.observable();
+ self.selectedTimePeriod = ko.observable('Last 15 Minutes');
self.selectedFilters = ko.observableArray([]);
self.selectedSubFilters = ko.observableArray([]);
self.queryRequest = [];
- self.gaugeValue = ko.observable(3);
+ self.gaugeValue = ko.observable(0);
self.filtersSelected = ko.observable(false);
self.gaugeIsSetUp = ko.observable(false);
self.queryString = ko.observable('This widget hasn\'t been set up yet!');
@@ -57,44 +58,6 @@
self.highRange(parseInt(sliderValArray[1]));
},
});
-
- //Gauge options
- self.opts = {
- lines: 12,
- angle: 0,
- lineWidth: 0.44,
- pointer: {
- strokeWidth: 0
- },
- limitMax: 'true',
- colorStop: '#c12e2a',
- strokeColor: '#E0E0E0',
- generateGradient: true
- };
-
- self.getFraudFailurePercent = function(lowHi, midHi){
- //get color thresholds
- //TODO: these vals to come from user's choices via slider.
- if(self.gaugeValue() < lowHi){
- self.opts.colorStop = '#89CC23';
- } else if(self.gaugeValue() >= lowHi && self.gaugeValue() < midHi){
- self.opts.colorStop = '#FFA722';
- } else {
- self.opts.colorStop = '#c12e2a';
- }
-
- self.gauge.setOptions(self.opts);
-
- return self.gaugeValue();
- };
-
- //#FraudRiskScoreGauge
- self.context = document.getElementById('FraudRiskScoreGauge');
- self.gauge = new Gauge(self.context).setOptions(self.opts);
- self.gauge.maxValue = 100;
- self.gauge.animationSpeed = 32;
- self.gauge.set(self.getFraudFailurePercent());
- ///////////////////
self.validateSubmission = function( times, filters ){
@@ -206,7 +169,9 @@
//gauge filters
self.queryRequest['selectedFilters'] = self.selectedFilters();
- self.filtersSelected(true);
+ if(self.selectedFilters().length > 0){
+ self.filtersSelected(true);
+ };
//gauge subfilters
self.queryRequest['selectedSubFilters'] =
self.selectedSubFilters().sort();
@@ -218,9 +183,36 @@
$.get( '/data/fraud?' + $.param({ '$filter': self.queryString()
}).replace(
/\+/g, '%20' ), function ( dataget ) {
self.gaugeIsSetUp(true);
- self.gaugeValue( parseFloat(dataget[0].fraud_percent).toFixed(2) );
-
self.gauge.set(self.getFraudFailurePercent(parseInt($('#fraudPercentSlider').val()[0]),
parseInt($('#fraudPercentSlider').val()[1])));
- } );
+ self.gaugeValue(parseFloat(dataget[0].fraud_percent).toFixed(2) );
+
+ self.gauge = c3.generate({
+ bindto: '#FraudRiskScoreGauge',
+ size: {
+ height: 300,
+ width: 390
+ },
+ data: {
+ columns: [
+ ['failure', self.gaugeValue()]
+ ],
+ type: 'gauge',
+ onclick: function (d, i) { console.log("onclick", d, i); },
//TODO: make these better
+ onmouseover: function (d, i) { console.log("onmouseover", d,
i); },
+ onmouseout: function (d, i) { console.log("onmouseout", d,
i); }
+ },
+ gauge: {
+ min: 0,
+ max: 100,
+ units: 'failure rate',
+ },
+ color: {
+ pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], //
the three color levels for the percentage values.
+ threshold: {
+ values: [ 0, self.lowRange(), self.highRange(), 100]
+ }
+ }
+ });
+ });
};
diff --git a/src/css/style.css b/src/css/style.css
index 2920c2d..86d896a 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -201,13 +201,9 @@
}
#FraudRiskScoreGauge {
- height: 100%;
- width: 100%;
- margin-top: -25px;
-}
-
-#fraudGaugeValue{
- margin-top: -50px;
+ height: 180px;
+ width: 390px;
+ margin: 0 auto;
}
#fraudPercentSlider {
@@ -286,6 +282,10 @@
color: #000;
}
+a:hover {
+ text-decoration: none;
+}
+
input {
height: 28px;
}
@@ -298,6 +298,10 @@
padding: 1em;
}
+.panel {
+ min-width: 360px;
+}
+
.panel-purple {
border-color: #ccc;
}
diff --git a/src/index.html b/src/index.html
index c956ce6..1b748da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,20 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <!-- build:css -->
+ <!--build:css-->
<link rel="stylesheet" type="text/css"
href="bower_modules/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css"
href="bower_modules/fontawesome/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css"
href="bower_modules/nouislider/src/jquery.nouislider.css"/>
- <link rel="stylesheet" type="text/css"
href="bower_modules/selectize/dist/css/selectize.css"/>
+ <link rel="stylesheet" type="text/css" href="bower_modules/c3/c3.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
- <!-- endbuild -->
+ <!--endbuild-->
- <!-- build:js -->
+ <!--build:js-->
<script src="bower_modules/raphael/raphael.js"></script>
<script src="app/require.config.js"></script>
<script data-main="app/startup"
src="bower_modules/requirejs/require.js"></script>
- <!-- endbuild -->
- </head>
+ <!--endbuild-->
+</head>
<body>
<section id="navbar">
@@ -26,4 +26,4 @@
</section>
</body>
-</html>
+</html>
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/171486
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iae0a4f34ed46dc48a993a7d81a7f821c4ecd5b29
Gerrit-PatchSet: 6
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ssmith <[email protected]>
Gerrit-Reviewer: Awight <[email protected]>
Gerrit-Reviewer: Ejegg <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
