Skip to content

Commit d6308e3

Browse files
robertsLandorobertsLando
committed
refactor: Cleaner code for pki e ndl custom functions
1 parent 70df415 commit d6308e3

File tree

2 files changed

+80
-170
lines changed

2 files changed

+80
-170
lines changed

‎docs/justgage.js‎

Lines changed: 40 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -415,8 +415,23 @@
415415
// var clear
416416
canvasW, canvasH, widgetW, widgetH, aspect, dx, dy, valueFontSize, valueX, valueY, labelFontSize, labelX, labelY, minFontSize, minX, minY, maxFontSize, maxX, maxY = null;
417417

418-
// pki - custom attribute for generating gauge paths
419-
obj.canvas.customAttributes.pki = function (value, min, max, w, h, dx, dy, gws, donut, reverse) {
418+
/**
419+
* pki - custom attribute for generating gauge paths
420+
*
421+
* @param {Number} value display value
422+
* @returns SVG path string for gauge level
423+
*/
424+
obj.canvas.customAttributes.pki = function (value) {
425+
426+
var min = obj.config.min;
427+
var max = obj.config.max;
428+
var w = obj.params.widgetW;
429+
var h = obj.params.widgetH;
430+
var dx = obj.params.dx;
431+
var dy = obj.params.dy;
432+
var gws = obj.config.gaugeWidthScale;
433+
var donut = obj.config.donut;
434+
var reverse = obj.config.reverse;
420435

421436
var alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path;
422437

@@ -489,8 +504,22 @@
489504
alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path = null;
490505
};
491506

492-
// ndl - custom attribute for generating needle path
493-
obj.canvas.customAttributes.ndl = function (value, min, max, w, h, dx, dy, gws, donut) {
507+
/**
508+
* ndl - custom attribute for generating pointer path
509+
*
510+
* @param {Number} value display value
511+
* @returns SVG path string for gauge pointer
512+
*/
513+
obj.canvas.customAttributes.ndl = function (value) {
514+
515+
var min = obj.config.min;
516+
var max = obj.config.max;
517+
var w = obj.params.widgetW;
518+
var h = obj.params.widgetH;
519+
var dx = obj.params.dx;
520+
var dy = obj.params.dy;
521+
var gws = obj.config.gaugeWidthScale;
522+
var donut = obj.config.donut;
494523

495524
var dlt = w * 3.5 / 100;
496525
var dlb = w / 15;
@@ -576,36 +605,14 @@
576605
obj.gauge = obj.canvas.path().attr({
577606
"stroke": "none",
578607
"fill": obj.config.gaugeColor,
579-
pki: [
580-
obj.config.max,
581-
obj.config.min,
582-
obj.config.max,
583-
obj.params.widgetW,
584-
obj.params.widgetH,
585-
obj.params.dx,
586-
obj.params.dy,
587-
obj.config.gaugeWidthScale,
588-
obj.config.donut,
589-
obj.config.reverse
590-
]
608+
pki: [ obj.config.max ]
591609
});
592610

593611
// level
594612
obj.level = obj.canvas.path().attr({
595613
"stroke": "none",
596614
"fill": getColor(obj.config.value, (obj.config.value - obj.config.min) / (obj.config.max - obj.config.min), obj.config.levelColors, obj.config.noGradient, obj.config.customSectors),
597-
pki: [
598-
obj.config.min,
599-
obj.config.min,
600-
obj.config.max,
601-
obj.params.widgetW,
602-
obj.params.widgetH,
603-
obj.params.dx,
604-
obj.params.dy,
605-
obj.config.gaugeWidthScale,
606-
obj.config.donut,
607-
obj.config.reverse
608-
]
615+
pki: [ obj.config.min ]
609616
});
610617
if (obj.config.donut) {
611618
obj.level.transform("r" + obj.config.donutStartAngle + ", " + (obj.params.widgetW / 2 + obj.params.dx) + ", " + (obj.params.widgetH / 2 + obj.params.dy));
@@ -618,17 +625,7 @@
618625
"stroke-width": !isUndefined(obj.config.pointerOptions.stroke_width) ? obj.config.pointerOptions.stroke_width : 0,
619626
"stroke-linecap": !isUndefined(obj.config.pointerOptions.stroke_linecap) ? obj.config.pointerOptions.stroke_linecap : "square",
620627
"fill": !isUndefined(obj.config.pointerOptions.color) ? obj.config.pointerOptions.color : "#000000",
621-
ndl: [
622-
obj.config.min,
623-
obj.config.min,
624-
obj.config.max,
625-
obj.params.widgetW,
626-
obj.params.widgetH,
627-
obj.params.dx,
628-
obj.params.dy,
629-
obj.config.gaugeWidthScale,
630-
obj.config.donut
631-
]
628+
ndl: [ obj.config.min ]
632629
});
633630

634631
if (obj.config.donut) {
@@ -786,33 +783,12 @@
786783
rvl = (obj.config.max * 1) + (obj.config.min * 1) - (obj.config.value * 1);
787784
}
788785
obj.level.animate({
789-
pki: [
790-
rvl,
791-
obj.config.min,
792-
obj.config.max,
793-
obj.params.widgetW,
794-
obj.params.widgetH,
795-
obj.params.dx,
796-
obj.params.dy,
797-
obj.config.gaugeWidthScale,
798-
obj.config.donut,
799-
obj.config.reverse
800-
]
786+
pki: [ rvl ]
801787
}, obj.config.startAnimationTime, obj.config.startAnimationType, obj.config.onAnimationEnd);
802788

803789
if (obj.config.pointer) {
804790
obj.needle.animate({
805-
ndl: [
806-
rvl,
807-
obj.config.min,
808-
obj.config.max,
809-
obj.params.widgetW,
810-
obj.params.widgetH,
811-
obj.params.dx,
812-
obj.params.dy,
813-
obj.config.gaugeWidthScale,
814-
obj.config.donut
815-
]
791+
ndl: [ rvl ]
816792
}, obj.config.startAnimationTime, obj.config.startAnimationType);
817793
}
818794

@@ -961,34 +937,13 @@
961937
}
962938

963939
obj.level.animate({
964-
pki: [
965-
rvl,
966-
obj.config.min,
967-
obj.config.max,
968-
obj.params.widgetW,
969-
obj.params.widgetH,
970-
obj.params.dx,
971-
obj.params.dy,
972-
obj.config.gaugeWidthScale,
973-
obj.config.donut,
974-
obj.config.reverse
975-
],
940+
pki: [ rvl ],
976941
"fill": color
977942
}, obj.config.refreshAnimationTime, obj.config.refreshAnimationType, obj.config.onAnimationEnd);
978943

979944
if (obj.config.pointer) {
980945
obj.needle.animate({
981-
ndl: [
982-
rvl,
983-
obj.config.min,
984-
obj.config.max,
985-
obj.params.widgetW,
986-
obj.params.widgetH,
987-
obj.params.dx,
988-
obj.params.dy,
989-
obj.config.gaugeWidthScale,
990-
obj.config.donut
991-
]
946+
ndl: [ rvl ]
992947
}, obj.config.refreshAnimationTime, obj.config.refreshAnimationType);
993948
}
994949

‎justgage.js‎

Lines changed: 40 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -415,8 +415,23 @@
415415
// var clear
416416
canvasW, canvasH, widgetW, widgetH, aspect, dx, dy, valueFontSize, valueX, valueY, labelFontSize, labelX, labelY, minFontSize, minX, minY, maxFontSize, maxX, maxY = null;
417417

418-
// pki - custom attribute for generating gauge paths
419-
obj.canvas.customAttributes.pki = function (value, min, max, w, h, dx, dy, gws, donut, reverse) {
418+
/**
419+
* pki - custom attribute for generating gauge paths
420+
*
421+
* @param {Number} value display value
422+
* @returns SVG path string for gauge level
423+
*/
424+
obj.canvas.customAttributes.pki = function (value) {
425+
426+
var min = obj.config.min;
427+
var max = obj.config.max;
428+
var w = obj.params.widgetW;
429+
var h = obj.params.widgetH;
430+
var dx = obj.params.dx;
431+
var dy = obj.params.dy;
432+
var gws = obj.config.gaugeWidthScale;
433+
var donut = obj.config.donut;
434+
var reverse = obj.config.reverse;
420435

421436
var alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path;
422437

@@ -489,8 +504,22 @@
489504
alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path = null;
490505
};
491506

492-
// ndl - custom attribute for generating needle path
493-
obj.canvas.customAttributes.ndl = function (value, min, max, w, h, dx, dy, gws, donut) {
507+
/**
508+
* ndl - custom attribute for generating pointer path
509+
*
510+
* @param {Number} value display value
511+
* @returns SVG path string for gauge pointer
512+
*/
513+
obj.canvas.customAttributes.ndl = function (value) {
514+
515+
var min = obj.config.min;
516+
var max = obj.config.max;
517+
var w = obj.params.widgetW;
518+
var h = obj.params.widgetH;
519+
var dx = obj.params.dx;
520+
var dy = obj.params.dy;
521+
var gws = obj.config.gaugeWidthScale;
522+
var donut = obj.config.donut;
494523

495524
var dlt = w * 3.5 / 100;
496525
var dlb = w / 15;
@@ -576,36 +605,14 @@
576605
obj.gauge = obj.canvas.path().attr({
577606
"stroke": "none",
578607
"fill": obj.config.gaugeColor,
579-
pki: [
580-
obj.config.max,
581-
obj.config.min,
582-
obj.config.max,
583-
obj.params.widgetW,
584-
obj.params.widgetH,
585-
obj.params.dx,
586-
obj.params.dy,
587-
obj.config.gaugeWidthScale,
588-
obj.config.donut,
589-
obj.config.reverse
590-
]
608+
pki: [ obj.config.max ]
591609
});
592610

593611
// level
594612
obj.level = obj.canvas.path().attr({
595613
"stroke": "none",
596614
"fill": getColor(obj.config.value, (obj.config.value - obj.config.min) / (obj.config.max - obj.config.min), obj.config.levelColors, obj.config.noGradient, obj.config.customSectors),
597-
pki: [
598-
obj.config.min,
599-
obj.config.min,
600-
obj.config.max,
601-
obj.params.widgetW,
602-
obj.params.widgetH,
603-
obj.params.dx,
604-
obj.params.dy,
605-
obj.config.gaugeWidthScale,
606-
obj.config.donut,
607-
obj.config.reverse
608-
]
615+
pki: [ obj.config.min ]
609616
});
610617
if (obj.config.donut) {
611618
obj.level.transform("r" + obj.config.donutStartAngle + ", " + (obj.params.widgetW / 2 + obj.params.dx) + ", " + (obj.params.widgetH / 2 + obj.params.dy));
@@ -618,17 +625,7 @@
618625
"stroke-width": !isUndefined(obj.config.pointerOptions.stroke_width) ? obj.config.pointerOptions.stroke_width : 0,
619626
"stroke-linecap": !isUndefined(obj.config.pointerOptions.stroke_linecap) ? obj.config.pointerOptions.stroke_linecap : "square",
620627
"fill": !isUndefined(obj.config.pointerOptions.color) ? obj.config.pointerOptions.color : "#000000",
621-
ndl: [
622-
obj.config.min,
623-
obj.config.min,
624-
obj.config.max,
625-
obj.params.widgetW,
626-
obj.params.widgetH,
627-
obj.params.dx,
628-
obj.params.dy,
629-
obj.config.gaugeWidthScale,
630-
obj.config.donut
631-
]
628+
ndl: [ obj.config.min ]
632629
});
633630

634631
if (obj.config.donut) {
@@ -786,33 +783,12 @@
786783
rvl = (obj.config.max * 1) + (obj.config.min * 1) - (obj.config.value * 1);
787784
}
788785
obj.level.animate({
789-
pki: [
790-
rvl,
791-
obj.config.min,
792-
obj.config.max,
793-
obj.params.widgetW,
794-
obj.params.widgetH,
795-
obj.params.dx,
796-
obj.params.dy,
797-
obj.config.gaugeWidthScale,
798-
obj.config.donut,
799-
obj.config.reverse
800-
]
786+
pki: [ rvl ]
801787
}, obj.config.startAnimationTime, obj.config.startAnimationType, obj.config.onAnimationEnd);
802788

803789
if (obj.config.pointer) {
804790
obj.needle.animate({
805-
ndl: [
806-
rvl,
807-
obj.config.min,
808-
obj.config.max,
809-
obj.params.widgetW,
810-
obj.params.widgetH,
811-
obj.params.dx,
812-
obj.params.dy,
813-
obj.config.gaugeWidthScale,
814-
obj.config.donut
815-
]
791+
ndl: [ rvl ]
816792
}, obj.config.startAnimationTime, obj.config.startAnimationType);
817793
}
818794

@@ -961,34 +937,13 @@
961937
}
962938

963939
obj.level.animate({
964-
pki: [
965-
rvl,
966-
obj.config.min,
967-
obj.config.max,
968-
obj.params.widgetW,
969-
obj.params.widgetH,
970-
obj.params.dx,
971-
obj.params.dy,
972-
obj.config.gaugeWidthScale,
973-
obj.config.donut,
974-
obj.config.reverse
975-
],
940+
pki: [ rvl ],
976941
"fill": color
977942
}, obj.config.refreshAnimationTime, obj.config.refreshAnimationType, obj.config.onAnimationEnd);
978943

979944
if (obj.config.pointer) {
980945
obj.needle.animate({
981-
ndl: [
982-
rvl,
983-
obj.config.min,
984-
obj.config.max,
985-
obj.params.widgetW,
986-
obj.params.widgetH,
987-
obj.params.dx,
988-
obj.params.dy,
989-
obj.config.gaugeWidthScale,
990-
obj.config.donut
991-
]
946+
ndl: [ rvl ]
992947
}, obj.config.refreshAnimationTime, obj.config.refreshAnimationType);
993948
}
994949

0 commit comments

Comments
 (0)