API break refactored the code to prepare it for a new algorithmic core

curvedLines.js

@@ -22,7 +22,7 @@
  THE SOFTWARE.
  */
 
-	/*
+/*
 
  ____________________________________________________
 
@@ -30,17 +30,13 @@
  ____________________________________________________
 
  curvedLines is a plugin for flot, that tries to display lines in a smoother way.
-	 The plugin is based on nergal.dev's work https://code.google.com/p/flot/issues/detail?id=226
-	 and further extended with a mode that forces the min/max points of the curves to be on the
-	 points. Both modes are achieved through adding of more data points
+ This is achieved through adding of more data points. The plugin is a data processor and can thus be used
+ in combination with standard line / point rendering options.
+ 
  => 1) with large data sets you may get trouble
  => 2) if you want to display the points too, you have to plot them as 2nd data series over the lines
-	 
  && 3) consecutive x data points are not allowed to have the same value
 
-	 This is version 0.5 of curvedLines so it will probably not work in every case. However
-	 the basic form of use descirbed next works (:
-
  Feel free to further improve the code
 
  ____________________________________________________
@@ -61,18 +57,21 @@
 
  active:           bool true => plugin can be used
  apply:            bool true => series will be drawn as curved line
+ 
+ 
+ deprecated options from flot prior to 1.0.0:
+ ------------------------------------------------
+ legacyOverride	   bool true => use old default   OR
+ legacyOverride    optionArray  
+ 			       { 			       
  			       		fit:              bool true => forces the max,mins of the curve to be on the datapoints
  			       		curvePointFactor  int  		   defines how many "virtual" points are used per "real" data point to
  					    	            	   		   emulate the curvedLines (points total = real points * curvePointFactor)
  	               		fitPointDist:     int  		   defines the x axis distance of the additional two points that are used
-	 						to enforce the min max condition. 
-	 						
-	 + line options (since v0.5 curved lines use flots line implementation for drawing
-	   => line options like fill, show ... are supported out of the box)
-
+ 	               }						   		   to enforce the min max condition.
  */
 
-	/*
+/*
  *  v0.1   initial commit
  *  v0.15  negative values should work now (outcommented a negative -> 0 hook hope it does no harm)
  *  v0.2   added fill option (thanks to monemihir) and multi axis support (thanks to soewono effendi)
@@ -82,19 +81,21 @@
  * 		   This change breakes existing code however CurvedLines are now just many tiny straight lines to flot and therefore all flot lines options (like gradient fill,
  * 	       shadow) are now supported out of the box
  *  v0.6   flot 0.8 compatibility and some bug fixes
-	 *  v0.6.0 changed versioning schema
+ *  v0.6.x changed versioning schema
+ * 
+ *  v1.0.0 API Break marked existing implementation/options as deprecated
  */
 
-	(function($) {
+(function($) {
 
 	var options = {		
 		series : {
 			curvedLines : {
 				active : false,
-					apply: false,
-					fit : false,
-					curvePointFactor : 20,
-					fitPointDist : undefined
+				apply : false,
+				monotonicFit : false,
+				tension : 0.0,
+				legacyOverride : undefined
 			}
 		}
 	};
@@ -113,13 +114,14 @@
 		//only if the plugin is active
 		function processDatapoints(plot, series, datapoints) {
 			var nrPoints = datapoints.points.length / datapoints.pointsize;
-				var EPSILON = 0.5; //pretty large epsilon but save
+			var EPSILON = 0.005;
 
 			if (series.curvedLines.apply == true && series.originSeries === undefined && nrPoints > (1 + EPSILON)) {
 				if (series.lines.fill) {
 
-						var pointsTop = calculateCurvePoints(datapoints, series.curvedLines, 1)
-						,pointsBottom = calculateCurvePoints(datapoints, series.curvedLines, 2); //flot makes sure for us that we've got a second y point if fill is true !
+					var pointsTop = calculateCurvePoints(datapoints, series.curvedLines, 1);
+					var pointsBottom = calculateCurvePoints(datapoints, series.curvedLines, 2);
+					//flot makes sure for us that we've got a second y point if fill is true !
 
 					//Merge top and bottom curve
 					datapoints.pointsize = 3;
@@ -139,11 +141,11 @@
 						} else if (pointsTop[i] < pointsBottom[j]) {
 							datapoints.points[k] = pointsTop[i];
 							datapoints.points[k + 1] = pointsTop[i + 1];
-								datapoints.points[k + 2] = k > 0 ? datapoints.points[k-1] : null;
+							datapoints.points[k + 2] = k > 0 ? datapoints.points[k - 1] : null;
 							i += ps;
 						} else {
 							datapoints.points[k] = pointsBottom[j];
-								datapoints.points[k + 1] = k > 1 ? datapoints.points[k-2] : null;
+							datapoints.points[k + 1] = k > 1 ? datapoints.points[k - 2] : null;
 							datapoints.points[k + 2] = pointsBottom[j + 1];
 							j += ps;
 						}
@@ -156,9 +158,24 @@
 			}
 		}
 
+
+		function calculateCurvePoints(datapoints, curvedLinesOptions, yPos) {
+			if (typeof curvedLinesOptions.legacyOverride != 'undefined' && curvedLinesOptions.legacyOverride != false) {
+				var defaultOptions = {
+						fit : false,
+						curvePointFactor : 20,
+						fitPointDist : undefined
+				};
+				var legacyOptions = jQuery.extend(defaultOptions, curvedLinesOptions.legacyOverride);
+				return calculateLegacyCurvePoints(datapoints, legacyOptions, yPos);
+			}
+
+			return datapoints.points;
+		}
+
 		//no real idea whats going on here code mainly from https://code.google.com/p/flot/issues/detail?id=226
 		//if fit option is selected additional datapoints get inserted before the curve calculations in nergal.dev s code.
-			function calculateCurvePoints(datapoints, curvedLinesOptions, yPos) {
+		function calculateLegacyCurvePoints(datapoints, curvedLinesOptions, yPos) {
 
 			var points = datapoints.points, ps = datapoints.pointsize;
 			var num = curvedLinesOptions.curvePointFactor * (points.length / ps);
@@ -175,11 +192,12 @@
 				//to have a max,min at the data point.
 
 				var fpDist;
-					if(typeof curvedLinesOptions.fitPointDist == 'undefined') {
+				if ( typeof curvedLinesOptions.fitPointDist == 'undefined') {
 					//estimate it
 					var minX = points[0];
-						var maxX = points[points.length-ps];			
-						fpDist = (maxX - minX) / (500 * 100); //x range / (estimated pixel length of placeholder * factor)
+					var maxX = points[points.length - ps];
+					fpDist = (maxX - minX) / (500 * 100);
+					//x range / (estimated pixel length of placeholder * factor)
 				} else {
 					//use user defined value
 					fpDist = curvedLinesOptions.fitPointDist;
@@ -306,12 +324,13 @@
 
 	}//end init
 
+
 	$.plot.plugins.push({
 		init : init,
 		options : options,
 		name : 'curvedLines',
-			version : '0.6.4'
+		version : '1.0.0'
 	});
 
-	})(jQuery);
+})(jQuery);
 

tests/Issue18.htm

@@ -121,10 +121,12 @@
 					},
 					curvedLines: {
 						apply: true,
+						legacyOverride: {
 /*play with parameters (lines)*/
 							//fitPointDist: 86400,
 							//curvePointFactor: 200,
 							fit: true
+						}	
 					},
 					clickable: false,
 					hoverable: false,
@@ -138,10 +140,12 @@
 					},
 					curvedLines: {
 						apply: true,
+						legacyOverride: {						
 /*play with parameters (points)*/
 							//fitPointDist: 86400,
 							//curvePointFactor: 200,
 							fit: true
+						}
 					},
 					color:'#FF0000'
 				};

tests/Issue19.htm

@@ -47,7 +47,11 @@ $(function() {
            ],
                {
                series: {
-                       curvedLines: { active: true, fit: true}
+                       curvedLines: {
+                       				  active: true, 
+                       				  apply: true,
+                       				  legacyOverride : { fit: true }
+                       				}
                }
            }
 	);

tests/testDate.htm

@@ -50,6 +50,7 @@
 				},
 				curvedLines : {
 					apply : true,
+					legacyOverride: true
 				}
 			}, {
 				data : d1,
@@ -87,6 +88,7 @@
 				},
 				curvedLines : {
 					apply : true,
+					legacyOverride: true
 				}
 			}, {
 				data : d1,

tests/testExample.htm

@@ -24,7 +24,7 @@
 			yaxis: { min:10, max: 90}
 			};
 
-			$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true}}, {data: d1,  points: { show: true }}], options);
+			$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {data: d1,  points: { show: true }}], options);
 			});
 		</script>
 	</body>

tests/testExampleFillMultiAxis.htm

@@ -26,8 +26,8 @@
 
 			$.plot($("#fillAndMultiAxis"),
 			[
-			{data: d1, lines: { show: true, fill: true, fillColor: "rgba(195, 195, 195, 0.4)", lineWidth: 3}, curvedLines: {apply: true}}, {data: d1,  points: { show: true }},
-			{data: d2, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true}, yaxis:2}, {data: d2,  points: { show: true }, yaxis:2}
+			{data: d1, lines: { show: true, fill: true, fillColor: "rgba(195, 195, 195, 0.4)", lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {data: d1,  points: { show: true }},
+			{data: d2, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}, yaxis:2}, {data: d2,  points: { show: true }, yaxis:2}
 			], options);
 			});
 		</script>

tests/testExampleFit.htm

@@ -36,9 +36,13 @@
 						show : true,
 						lineWidth : 3
 					},
-					curvedLines: {apply: true,
+					curvedLines: 
+					{
+						apply: true,
+						legacyOverride: {
 							fit : true,
 						}
+					}
 				}, {
 					data : d1,
 					points : {

tests/testSaddlePoint.htm

@@ -25,7 +25,7 @@
 			yaxis: { min:10, max: 45}
 			};
 
-			$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true}}, {data: d1,  points: { show: true }}], options);
+			$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {data: d1,  points: { show: true }}], options);
 			});
 		</script>
 	</body>

tests/testSinglePoint.htm

@@ -26,7 +26,8 @@
 					show : true
 				},
 				curvedLines : {
-					apply : true
+					apply : true,
+					legacyOverride: true
 				}
 			}, {
 				data : d1,

tests/testThreshold.htm

@@ -41,7 +41,8 @@
 					lineWidth : 3
 				},
 				curvedLines : {
-					apply : true
+					apply : true,
+					legacyOverride: true
 				}
 			}, {
 				data : d1,

tests/testTooltip.htm

@@ -50,7 +50,8 @@ $(function () {
 	//general options
 	var options = {
 		series: {curvedLines : {
-						active : true
+						active : true,
+						legacyOverride: true
 					},
 		lines: { lineWidth: 5},
 		points: { radius: 4 }

tests/testZeroDrop.htm

@@ -26,7 +26,7 @@
 			yaxis: { min:0, max: 10}
 			};
 
-			$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true}}, {data: d1,  points: { show: true }}], options);
+			$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {data: d1,  points: { show: true }}], options);
 			});
 		</script>
 	</body>