Ssmith has uploaded a new change for review.
https://gerrit.wikimedia.org/r/173064
Change subject: Fix range values
......................................................................
Fix range values
WIP, textInput binding still not updating
Change-Id: Idad77687b7e7544efdeddf62f48012435b6bfe9d
---
M src/components/widgets/fraud-gauge/fraud-gauge.html
M src/components/widgets/fraud-gauge/fraud-gauge.js
2 files changed, 13 insertions(+), 28 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/64/173064/1
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.html
b/src/components/widgets/fraud-gauge/fraud-gauge.html
index 3839ade..ebd9a65 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.html
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.html
@@ -50,7 +50,7 @@
<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">
+ <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>
@@ -60,14 +60,14 @@
<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>
+ <button class="btn
btn-warning percentBtn" type="button"><span data-bind="text:greenHighRange() +
'% to ' + redLowRange() + '%'"></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">
+ <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>
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.js
b/src/components/widgets/fraud-gauge/fraud-gauge.js
index 995a690..c3632ed 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.greenRange().high,
self.yellowRange().high, 100]
+ values: [ 0, self.greenHighRange,
self.yellowRange().high, 100]
}
}
});
--
To view, visit https://gerrit.wikimedia.org/r/173064
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idad77687b7e7544efdeddf62f48012435b6bfe9d
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
