Ejegg has submitted this change and it was merged.
Change subject: make gauge range selection more clear
......................................................................
make gauge range selection more clear
edit: there were issues with the arrangement of the slices so they were
incorrect. fixed that. need to flip the chart.
needs attention:
why knockout's textInput doesn't appear to work in
fraud-gauge.html, how to approach issue with Chartjs library update. WIP
Change-Id: I9079383ca715951a1bc3240f33210a22ac402316
---
M src/components/widgets/fraud-gauge/fraud-gauge.html
M src/components/widgets/fraud-gauge/fraud-gauge.js
M src/css/style.css
3 files changed, 114 insertions(+), 31 deletions(-)
Approvals:
Ejegg: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.html
b/src/components/widgets/fraud-gauge/fraud-gauge.html
index 514b80b..da0d34a 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.html
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.html
@@ -1,3 +1,4 @@
+
<div class="panel panel-purple" id="fraudGaugeWidget">
<div class="panel-heading">
Fraud Rejections
@@ -43,14 +44,35 @@
<div class="form-group">
<label
for="fraudPercentSlider">Fraud Percent Ranges</label>
<p>set up the colors as they'll
appear in the gauge.</p>
- <div id="fraudPercentSlider"></div>
- <table class="table sliderTable
text-center">
- <tr>
- <td data-bind="attr: {
width: lowRange() + '%' }">0 - <span data-bind="text: lowRange"></span>%</td>
- <td data-bind="attr: {
width: ( highRange() - lowRange() ) + '%' }"><span data-bind="text:
lowRange"></span> - <span data-bind="text: highRange"></span>%</td>
- <td data-bind="attr: {
width: ( 100 - highRange()) + '%' }"><span data-bind="text: highRange"></span>
- 100%</td>
- </tr>
- </table>
+ <canvas id="fraudPercentSlider"
width="200" height="120"></canvas>
+ <div class="row">
+ <div class="col-md-4 col-sm-4
col-lg-4">
+ <label>low fraud score: up
to</label>
+ <div class="input-group">
+ <input type="text"
class="form-control" data-bind="textInput: yellowRange().low">
+ <span
class="input-group-btn">
+ <button class="btn
btn-success percentBtn" type="button"><i class="fa fa-refresh"></i></button>
+ </span>
+ </div>
+ </div>
+ <div class="col-md-4 col-sm-4
col-lg-4">
+ <label>mid-level
score:</label>
+ <div class="input-group">
+ <span
class="input-group-btn">
+ <button class="btn
btn-warning percentBtn" type="button"><span data-bind="text:yellowRange().low +
'% to ' + yellowRange().high + '%'"></button>
+ </span>
+ </div>
+ </div>
+ <div class="col-md-4 col-sm-4
col-lg-4">
+ <label>high fraud score:
from</label>
+ <div class="input-group">
+ <input type="text"
class="form-control" data-bind="textInput: yellowRange().high">
+ <span
class="input-group-btn">
+ <button class="btn
btn-danger percentBtn" type="button"><i class="fa fa-refresh"></i></button>
+ </span>
+ </div>
+ </div>
+ </div>
</div>
<!--Call Date Pickers Component to
handle date range-->
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.js
b/src/components/widgets/fraud-gauge/fraud-gauge.js
index 78b840a..39ba617 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.js
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.js
@@ -2,12 +2,10 @@
'knockout',
'text!components/widgets/fraud-gauge/fraud-gauge.html',
'gauge',
- 'noUISlider',
'c3',
- 'selectize',
- 'bootstrap-datepicker'
+ 'chartjs'
],
-function( ko, template, datePickersTemplate, noUISlider, c3 ){
+function( ko, template, datePickersTemplate, c3, chartjs ){
function FraudGaugeViewModel( params ){
@@ -40,23 +38,71 @@
});
//default range slider settings
- self.lowRange = ko.observable(33);
- self.highRange = ko.observable(66);
- $('#fraudPercentSlider').noUiSlider({
- start: [ self.lowRange(), self.highRange() ],
- range: {
- 'min': [0],
- 'max': [100]
- },
- step: 1,
- connect: true
- });
- $('#fraudPercentSlider').on({
- slide: function(){
- var sliderValArray = $('#fraudPercentSlider').val();
- self.lowRange(parseInt(sliderValArray[0]));
- self.highRange(parseInt(sliderValArray[1]));
- },
+ self.greenRange = ko.observable({ low: 0, high: 17 });
+ self.yellowRange = ko.observable({ low: 17, high: 68 });
+ self.redRange = ko.observable({ low: 68, high: 100 });
+
+ //color selection inside modal
+ var canvas = $('#fraudPercentSlider')[0];
+ var ctx = canvas.getContext('2d');
+
+ var placeholder = document.createElement('canvas');
+ placeholder.width = 200;
+ placeholder.height = placeholder.width;
+ var placeholderctx = placeholder.getContext('2d');
+
+ var ddata = [{
+ value: 90,
+ color: '#000000'
+ },{
+ value: 1.8 * (self.greenRange().high - self.greenRange().low),
+ color: '#4cae4c'
+ },{
+ value: 1.8 * (self.yellowRange().high - self.yellowRange().low),
+ color: '#eea236'
+ }, {
+ value: 1.8 * (self.redRange().high - self.redRange().low),
+ color: '#c9302c'
+ },{
+ value: 90,
+ color: '#000000'
+ }, ];
+
+ new Chart(placeholderctx).Doughnut(ddata, {
+ animation: false,
+ segmentShowStroke: false,
+ onAnimationComplete: function() {
+ function drawLine(color,left,top,bottom){
+ placeholderctx.strokeStyle = color;
+ placeholderctx.lineWidth = 1;
+
+ placeholderctx.beginPath();
+
+ placeholderctx.moveTo(left, top);
+ placeholderctx.lineTo(left,bottom);
+
+ placeholderctx.stroke();
+ placeholderctx.closePath();
+ }
+
+ var center = Math.round($(placeholder).width() / 2);
+ var offset1 = center / 40;
+ var offset2 = center / 80;
+
+ var cropHeight = Math.round(placeholder.height/2);
+ ctx.clearRect(0,0,canvas.width,canvas.height);
+ ctx.drawImage(
+ placeholder,
+ 0,
+ 0,
+ placeholder.width,
+ cropHeight,
+ 0,
+ 0,
+ placeholder.width,
+ cropHeight
+ );
+ }
});
self.validateSubmission = function( times, filters ){
@@ -213,7 +259,7 @@
}
});
});
- };
+ }
};
diff --git a/src/css/style.css b/src/css/style.css
index 86d896a..9a0e228 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -207,7 +207,8 @@
}
#fraudPercentSlider {
- margin: 10px 0;
+ margin: 0 auto;
+ display: inherit;
}
#queryButton {
@@ -263,6 +264,14 @@
#unspecifiedFraudGauge.row{
margin: 10px;
+}
+
+.btn.percentBtn {
+ padding: .44em;
+}
+
+.btn.btn-warning.percentBtn {
+ width: 100%;
}
/* BOOTSTRAP OVERRIDES */
@@ -341,6 +350,12 @@
width: 100px;
}
+.sliderTable {
+ width: 50%;
+ margin-top: -30px;
+ font-weight: bold;
+}
+
.sliderTable > tbody > tr > td {
border-top: none;
}
--
To view, visit https://gerrit.wikimedia.org/r/171982
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I9079383ca715951a1bc3240f33210a22ac402316
Gerrit-PatchSet: 5
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
