Ejegg has submitted this change and it was merged.
Change subject: Fix range values
......................................................................
Fix range values
Change-Id: Idad77687b7e7544efdeddf62f48012435b6bfe9d
---
M src/components/widgets/fraud-gauge/fraud-gauge.html
M src/components/widgets/fraud-gauge/fraud-gauge.js
2 files changed, 38 insertions(+), 51 deletions(-)
Approvals:
Ejegg: Looks good to me, approved
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.html
b/src/components/widgets/fraud-gauge/fraud-gauge.html
index 3ab0c04..4e837d3 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.html
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.html
@@ -42,34 +42,36 @@
<form role="form" class="fraudForm">
<div class="form-group">
- <label
for="fraudPercentSlider">Fraud Percent Ranges</label>
- <p>set up the colors as they'll
appear in the gauge.</p>
- <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 class="well">
+ <label
for="fraudPercentSlider">Fraud Percent Ranges</label>
+ <p>set up the colors as
they'll appear in the gauge.</p>
+ <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: greenHighRange">
+ <span
class="input-group-btn">
+ <button class="btn
btn-success percentBtn" type="button"><i class="fa fa-refresh"></i></button>
+ </span>
+ </div>
</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 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:greenHighRange() +
'% to ' + redLowRange() + '%'"></button>
+ </span>
+ </div>
</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 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: redLowRange">
+ <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>
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.js
b/src/components/widgets/fraud-gauge/fraud-gauge.js
index 8417aec..9c3ddd8 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.js
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.js
@@ -38,9 +38,8 @@
});
//default range slider settings
- self.greenRange = ko.observable({ low: 0, high: 17 });
- self.yellowRange = ko.observable({ low: 17, high: 68 });
- self.redRange = ko.observable({ low: 68, high: 100 });
+ self.greenHighRange = ko.observable(17);
+ self.redLowRange = ko.observable(68);
//color selection inside modal
var canvas = $('#fraudPercentSlider')[0];
@@ -55,13 +54,13 @@
value: 90,
color: '#000000'
},{
- value: 1.8 * (self.greenRange().high - self.greenRange().low),
+ value: 1.8 * (self.greenHighRange()),
color: '#4cae4c'
},{
- value: 1.8 * (self.yellowRange().high - self.yellowRange().low),
+ value: 1.8 * (self.redLowRange() - self.greenHighRange()),
color: '#eea236'
}, {
- value: 1.8 * (self.redRange().high - self.redRange().low),
+ value: 1.8 * (100 - self.redLowRange()),
color: '#c9302c'
},{
value: 90,
@@ -71,26 +70,13 @@
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,
@@ -200,9 +186,8 @@
self.resetGaugeSettings = function(){
//reset gauge settings to defaults
- self.greenRange({low: 0, high: 33});
- self.yellowRange({low: 33, high: 66});
- self.redRange({low: 66, high: 100});
+ self.greenHighRange(33);
+ self.redLowRange(66);
//reset datepicker
$("#timePeriodDropdown option:eq(0)").prop("selected", true);
@@ -270,7 +255,7 @@
color: {
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], //
the three color levels for the percentage values.
threshold: {
- values: [ 0, self.lowRange(), self.highRange(), 100]
+ values: [ 0, self.greenHighRange, self.redLowRange, 100]
}
}
});
--
To view, visit https://gerrit.wikimedia.org/r/173064
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Idad77687b7e7544efdeddf62f48012435b6bfe9d
Gerrit-PatchSet: 4
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
