Ssmith has uploaded a new change for review.
https://gerrit.wikimedia.org/r/173190
Change subject: Extend ChartJS and make selection chart dynamic
......................................................................
Extend ChartJS and make selection chart dynamic
This should be the final fix.
Change-Id: Ied20aaf57a97f358ce419811d70b62e1e4443386
---
M src/components/widgets/fraud-gauge/fraud-gauge.html
M src/components/widgets/fraud-gauge/fraud-gauge.js
2 files changed, 77 insertions(+), 45 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/90/173190/1
diff --git a/src/components/widgets/fraud-gauge/fraud-gauge.html
b/src/components/widgets/fraud-gauge/fraud-gauge.html
index 4a27a99..0afe677 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: greenHighRange">
+ <input type="text"
class="form-control" data-bind="textInput: greenHighRange, event: { mouseout:
renderGaugeChart }">
<span
class="input-group-btn">
<button class="btn
btn-success percentBtn" type="button"><i class="fa fa-refresh"></i></button>
</span>
@@ -67,7 +67,7 @@
<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">
+ <input type="text"
class="form-control" data-bind="textInput: redLowRange, event: { mouseout:
renderGaugeChart }">
<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 c3632ed..1b1a004 100644
--- a/src/components/widgets/fraud-gauge/fraud-gauge.js
+++ b/src/components/widgets/fraud-gauge/fraud-gauge.js
@@ -6,6 +6,28 @@
'chartjs'
],
function( ko, template, datePickersTemplate, c3, chartjs ){
+ //extend the chart so we can flip the circle
+ Chart.types.Doughnut.extend({
+ addData: function(segment, atIndex, silent){
+ var index = atIndex || this.segments.length;
+ this.segments.splice(index, 0, new this.SegmentArc({
+ value : segment.value,
+ outerRadius : (this.options.animateScale) ? 0 : this.outerRadius,
+ innerRadius : (this.options.animateScale) ? 0 : (this.outerRadius/100) *
this.options.percentageInnerCutout,
+ fillColor : segment.color,
+ highlightColor : segment.highlight || segment.color,
+ showStroke : this.options.segmentShowStroke,
+ strokeWidth : this.options.segmentStrokeWidth,
+ strokeColor : this.options.segmentStrokeColor,
+ startAngle : Math.PI * 2.5,
+ circumference : (this.options.animateRotate) ? 0 :
this.calculateCircumference(segment.value),
+ label : segment.label
+ }));
+ if (!silent){
+ this.reflow();
+ this.update();
+ }
+ }});
function FraudGaugeViewModel( params ){
@@ -41,55 +63,65 @@
self.greenHighRange = ko.observable(17);
self.redLowRange = ko.observable(68);
- //color selection inside modal
- var canvas = $('#fraudPercentSlider')[0];
- var ctx = canvas.getContext('2d');
+ self.renderGaugeChart = function(){
- var placeholder = document.createElement('canvas');
- placeholder.width = 200;
- placeholder.height = placeholder.width;
- var placeholderctx = placeholder.getContext('2d');
+ //color selection inside modal
+ var canvas = $('#fraudPercentSlider')[0];
+ var ctx = canvas.getContext('2d');
- var ddata = [{
- value: 90,
- color: '#000000'
- },{
- value: 1.8 * (self.greenHighRange()),
- color: '#4cae4c'
- },{
- value: 1.8 * (self.redLowRange() - self.greenHighRange()),
- color: '#eea236'
- }, {
- value: 1.8 * (100 - self.redLowRange()),
- color: '#c9302c'
- },{
- value: 90,
- color: '#000000'
- }, ];
+ var placeholder = document.createElement('canvas');
+ placeholder.width = 200;
+ placeholder.height = placeholder.width;
+ var placeholderctx = placeholder.getContext('2d');
- new Chart(placeholderctx).Doughnut(ddata, {
- animation: false,
- segmentShowStroke: false,
+ var ddata = [{
+ value: 90,
+ color: '#000000'
+ },{
+ value: 1.8 * (self.greenHighRange()),
+ color: '#4cae4c'
+ },{
+ value: 1.8 * (self.redLowRange() - self.greenHighRange()),
+ color: '#eea236'
+ }, {
+ value: 1.8 * (100 - self.redLowRange()),
+ color: '#c9302c'
+ },{
+ value: 90,
+ color: '#000000'
+ }, ];
- onAnimationComplete: function() {
- var center = Math.round($(placeholder).width() / 2);
+ //draw chart
+ self.gaugeChart = new Chart(placeholderctx).Doughnut(ddata, {
+ animation: false,
+ segmentShowStroke: false,
- var cropHeight = Math.round(placeholder.height/2);
- ctx.clearRect(0,0,canvas.width,canvas.height);
+ onAnimationComplete: function() {
- ctx.drawImage(
- placeholder,
- 0,
- 0,
- placeholder.width,
- cropHeight,
- 0,
- 0,
- placeholder.width,
- cropHeight
- );
- }
- });
+ var center = Math.round($(placeholder).width() / 2);
+
+ 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.renderGaugeChart();
self.validateSubmission = function( times, filters ){
--
To view, visit https://gerrit.wikimedia.org/r/173190
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ied20aaf57a97f358ce419811d70b62e1e4443386
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
