Ssmith has uploaded a new change for review.
https://gerrit.wikimedia.org/r/171982
Change subject: make gauge range selection more clear
......................................................................
make gauge range selection more clear
WIP - add button functionality
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, 80 insertions(+), 26 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/82/171982/1
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.html
b/src/components/widgets/fraud-gauge/fraud-gauge.html
index 514b80b..e3ae2d0 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,12 +44,12 @@
<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>
+ <canvas id="fraudPercentSlider"
width="350"></canvas>
<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>
+ <td><button class="btn
btn-success">0 - <span data-bind="text: greenRange"></span>%</button></td>
+ <td><button class="btn
btn-warning"><span data-bind="text: greenRange"></span> - <span
data-bind="text: yellowRange"></span>%</button></td>
+ <td><button class="btn
btn-danger"><span data-bind="text: yellowRange"></span> - 100%</button></td>
</tr>
</table>
</div>
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.js
b/src/components/widgets/fraud-gauge/fraud-gauge.js
index 78b840a..44db97a 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
+ self.greenRange = ko.observable(12);
+ self.yellowRange = ko.observable(70);
+ self.redRange = ko.computed( function(){
+ return 100 - self.yellowRange();
});
- $('#fraudPercentSlider').on({
- slide: function(){
- var sliderValArray = $('#fraudPercentSlider').val();
- self.lowRange(parseInt(sliderValArray[0]));
- self.highRange(parseInt(sliderValArray[1]));
- },
+
+ //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: self.greenRange(),
+ color: '#4cae4c'
+ }, {
+ value: self.yellowRange(),
+ color: '#eea236'
+ }, {
+ value: self.redRange(),
+ color: '#c9302c'
+ }];
+
+ 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;
+
+ drawLine('white',center,offset1,center / 2+offset2);
+ drawLine('white',center,0,offset1);
+ drawLine('white',center,center / 2+offset2,center /
2+offset1+offset2);
+
+ 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..acd85ae 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -207,7 +207,8 @@
}
#fraudPercentSlider {
- margin: 10px 0;
+ margin: 0 auto;
+ padding-left:40px;
}
#queryButton {
@@ -341,6 +342,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: newchange
Gerrit-Change-Id: I9079383ca715951a1bc3240f33210a22ac402316
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
