jsrrdgraph: Add support for dashes

4 files changed, 127 insertions, 14 deletions

diff --git a/js/RrdGfxCanvas.js b/js/RrdGfxCanvas.js
index 324b655..6ba71bb 100644
--- a/js/RrdGfxCanvas.js
+++ b/js/RrdGfxCanvas.js
@@ -28,6 +28,9 @@ var RrdGfxCanvas = function(canvasId)
 {
         this.canvas = document.getElementById(canvasId);
         this.ctx = this.canvas.getContext('2d');
+        this.dash = false;
+  this.dash_offset = null;
+        this.dash_array = null;
 };
 
 RrdGfxCanvas.prototype.size = function (width, height)
@@ -38,7 +41,22 @@ RrdGfxCanvas.prototype.size = function (width, height)
 
 RrdGfxCanvas.prototype.set_dash = function (dashes, n, offset)
 {
+        this.dash = true;
+        this.dash_array = dashes;
+        this.dash_offset = offset;
+};
 
+RrdGfxCanvas.prototype._set_dash = function ()
+{
+        if (this.dash_array != undefined && this.dash_array.length > 0) {
+                this.ctx.setLineDash(this.dash_array);
+                if (this.dash_offset > 0) {
+                        this.ctx.lineDashOffset = this.dash_offset;
+                }
+        }
+        this.dash = false;
+        this.dash_array = null;
+        this.dash_offset = 0;
 };
 
 RrdGfxCanvas.prototype.line = function (X0, Y0, X1, Y1, width, color)
@@ -58,6 +76,7 @@ RrdGfxCanvas.prototype.line = function (X0, Y0, X1, Y1, width, color)
         this.ctx.save();
         this.ctx.lineWidth = width;
         this.ctx.strokeStyle = color;
+        if (this.dash) this._set_dash();
         this.ctx.beginPath();
         this.ctx.moveTo(X0, Y0);
         this.ctx.lineTo(X1, Y1);
@@ -136,6 +155,7 @@ RrdGfxCanvas.prototype.rectangle = function (X0, Y0, X1, Y1, width, style)
 
         this.ctx.save();
         this.ctx.beginPath();
+        if (this.dash) this._set_dash();
         this.ctx.lineWidth = width;
         this.ctx.moveTo(X0, Y0);
         this.ctx.lineTo(X1, Y0);
@@ -179,6 +199,7 @@ RrdGfxCanvas.prototype.stroke_begin = function (width, style)
 {
         this.ctx.save();
         this.ctx.beginPath();
+        if (this.dash) this._set_dash();
         this.ctx.lineWidth = width;
         this.ctx.strokeStyle = style;
         this.ctx.lineCap = 'round';
diff --git a/js/RrdGfxPdf.js b/js/RrdGfxPdf.js
index cbc552f..7cde098 100644
--- a/js/RrdGfxPdf.js
+++ b/js/RrdGfxPdf.js
@@ -81,7 +81,7 @@ var RrdGfxPdf = function (orientation, unit, size)
         this.CoreFonts = ['courier', 'helvetica', 'times', 'symbol', 'zapfdingbats'];
         // Scale factor (number of points in user unit)
         if(unit === 'pt')
-                this.k = 1; 
+                this.k = 1;
         else if(unit === 'mm')
                 this.k = 72/25.4;
         else if(unit === 'cm')
@@ -129,6 +129,10 @@ var RrdGfxPdf = function (orientation, unit, size)
         this.SetDisplayMode('default');
         // Set default PDF version number
         this.PDFVersion = '1.3';
+
+        this.dash = false;
+        this.dash_array = null;
+        this.dash_offset = null;
 };
 
 RrdGfxPdf.CORE_FONTS= {
@@ -182,6 +186,31 @@ RrdGfxPdf.prototype.size = function (width, height)
 
 RrdGfxPdf.prototype.set_dash = function (dashes, n, offset)
 {
+        this.dash = true;
+        this.dash_array = dashes;
+        this.dash_offset = offset;
+};
+
+RrdGfxPdf.prototype._set_dash = function ()
+{
+        this.dash = true;
+
+        if (this.dash_array != undefined && this.dash_array.length > 0) {
+                for (var n=0; n < this.dash_array.length; n++) {
+                        this.dash_array[n] = this.dash_array[n] * this.k;
+                }
+                this.dash_array = this.dash_array.join(' ');
+
+                if (this.dash_offset == 0) {
+                        this._out('['+this.dash_array+'] 0 d');
+                } else {
+                        this.dash_offset = this.dash_offset * this.k;
+                        this._out('['+this.dash_array+'] '+this.dash_offset+' d');
+                }
+        }
+        this.dash = false;
+        this.dash_array = null;
+        this.dash_offset = 0;
 };
 
 RrdGfxPdf.prototype.line = function (X0, Y0, X1, Y1, width, color)
@@ -190,6 +219,8 @@ RrdGfxPdf.prototype.line = function (X0, Y0, X1, Y1, width, color)
         this._setLineWidth(width);
         var rgba = this.parse_color(color);
         this._setDrawColor(rgba[0], rgba[1], rgba[2]);
+        if (this.dash)
+                this._set_dash();
         this._moveTo(X0, Y0);
         this._lineTo(X1, Y1);
         this._stroke();
@@ -215,6 +246,8 @@ RrdGfxPdf.prototype.rectangle = function (X0, Y0, X1, Y1, width, style)
         this._setLineWidth(width);
         var rgba = this.parse_color(style);
         this._setDrawColor(rgba[0], rgba[1], rgba[2]);
+        if (this.dash)
+                this._set_dash();
         this._moveTo(X0, Y0);
         this._lineTo(X1, Y0);
         this._lineTo(X1, Y1);
@@ -250,6 +283,8 @@ RrdGfxPdf.prototype.stroke_begin = function (width, style)
         this._setLineWidth(width);
         var rgba = this.parse_color(style);
         this._setDrawColor(rgba[0], rgba[1], rgba[2]);
+        if (this.dash)
+                this._set_dash();
         this._out('0 J');  // line cap
         this._out('0 j');  // line join
 };
diff --git a/js/RrdGfxSvg.js b/js/RrdGfxSvg.js
index ffc0071..927cb14 100644
--- a/js/RrdGfxSvg.js
+++ b/js/RrdGfxSvg.js
@@ -31,6 +31,9 @@ var RrdGfxSvg = function(svgId) {
         this.path = null;
         this.path_color = null;
         this.path_width = null;
+        this.dash = false;
+  this.dash_offset = null;
+        this.dash_array = null;
 };
 
 RrdGfxSvg.prototype.size = function (width, height)
@@ -45,8 +48,24 @@ RrdGfxSvg.prototype.size = function (width, height)
 
 RrdGfxSvg.prototype.set_dash = function (dashes, n, offset)
 {
+        this.dash = true;
+        this.dash_array = dashes;
+        this.dash_offset = offset;
 };
 
+RrdGfxSvg.prototype._set_dash = function (shape)
+{
+        if (this.dash_array != undefined && this.dash_array.length > 0) {
+                shape.setAttributeNS(null, "stroke-dasharray", this.dash_array.join(','));
+                if (this.dash_offset > 0) {
+                        shape.setAttributeNS(null, "stroke-dashoffset", this.dash_offset);
+                }
+        }
+        this.dash = false;
+        this.dash_array = null;
+        this.dash_offset = 0;
+}
+
 RrdGfxSvg.prototype.line = function (X0, Y0, X1, Y1, width, color)
 {
         var shape = document.createElementNS(this.svgns, "line");
@@ -62,6 +81,8 @@ RrdGfxSvg.prototype.line = function (X0, Y0, X1, Y1, width, color)
         shape.setAttributeNS(null, "y2", Y1);
         shape.setAttributeNS(null, "stroke-width", width);
         shape.setAttributeNS(null, "stroke", color);
+        if (this.dash)
+                this._set_dash(shape);
 
         this.svg.appendChild(shape);
 };
@@ -100,6 +121,8 @@ RrdGfxSvg.prototype.rectangle = function (X0, Y0, X1, Y1, width, style)
         shape.setAttributeNS(null, "stroke-width", width);
         shape.setAttributeNS(null, "stroke", style);
         shape.setAttributeNS(null, "fill", "none");
+        if (this.dash)
+                this._set_dash(shape);
 
         this.svg.appendChild(shape);
 };
@@ -157,6 +180,8 @@ RrdGfxSvg.prototype.stroke_end = function ()
         shape.setAttributeNS(null, "stroke-width", this.path_width);
         shape.setAttributeNS(null, "stroke-linecap", 'round');
         shape.setAttributeNS(null, "stroke-linejoin", 'round');
+        if (this.dash)
+                this._set_dash(shape);
 
         this.svg.appendChild(shape);
 };
diff --git a/js/RrdGraph.js b/js/RrdGraph.js
index c2457c9..25823aa 100644
--- a/js/RrdGraph.js
+++ b/js/RrdGraph.js
@@ -36,7 +36,7 @@ RrdGraphDescError.prototype = new Error();
  * RrdGraphDesc
  * @constructor
  */
-var RrdGraphDesc = function (graph) 
+var RrdGraphDesc = function (graph)
 {
         this.gf = null;      /* graphing function */
         this.stack = false;    /* boolean */
@@ -164,7 +164,7 @@ RrdGraphDesc.TXA_RIGHT = 1;
 RrdGraphDesc.TXA_CENTER = 2;
 RrdGraphDesc.TXA_JUSTIFIED = 3;
 
-RrdGraphDesc.cf_conv = function (str) 
+RrdGraphDesc.cf_conv = function (str)
 {
         switch (str){
                 case 'AVERAGE': return RrdGraphDesc.CF_AVERAGE;
@@ -279,7 +279,7 @@ RrdGraphDesc.prototype.fshift = function (graph, vname, offset)
         this.legend = '';
 };
 
-RrdGraphDesc.prototype.line = function (graph, width, value, color, legend, stack)
+RrdGraphDesc.prototype.line = function (graph, width, value, color, legend, stack, dashes, dash_offset)
 {
         this.gf = RrdGraphDesc.GF_LINE;
         this.vname = value;
@@ -287,10 +287,20 @@ RrdGraphDesc.prototype.line = function (graph, width, value, color, legend, stac
         this.linewidth = width;
         this.col = color;
         if (legend === undefined) this.legend = '';
+        else if (legend.length === 0) this.legend = '';
         else this.legend = '  '+legend;
         if (stack === undefined) this.stack = false;
         else this.stack = stack;
         this.format = this.legend;
+
+        if (dashes != undefined) {
+                this.dash = true;
+                this.p_dashes = dashes;
+                this.ndash = dashes.length;
+        }
+        if (dash_offset !=undefined) {
+                this.offset = dash_offset;
+        }
 };
 
 RrdGraphDesc.prototype.area = function (graph, value, color, legend, stack)
@@ -300,6 +310,7 @@ RrdGraphDesc.prototype.area = function (graph, value, color, legend, stack)
         this.vidx = graph.find_var(value);
         this.col = color;
         if (legend === undefined) this.legend = '';
+        else if (legend.length === 0) this.legend = '';
         else this.legend = '  '+legend;
         if (stack === undefined) this.stack = false;
         else this.stack = stack;
@@ -315,6 +326,7 @@ RrdGraphDesc.prototype.tick = function (graph, vname, color, fraction, legend)
         if (fraction !== undefined)
                 this.yrule = fraction;
         if (legend === undefined) this.legend = '';
+        else if (legend.length === 0) this.legend = '';
         else this.legend = '  '+legend;
         this.format = this.legend;
 };
@@ -372,16 +384,26 @@ RrdGraphDesc.prototype.textalign = function (graph, align)
         }
 };
 
-RrdGraphDesc.prototype.vrule = function (graph, time, color, legend)
+RrdGraphDesc.prototype.vrule = function (graph, time, color, legend, dashes, dash_offset)
 {
         this.gf = RrdGraphDesc.GF_VRULE;
         this.xrule = time;
         this.col = color;
         if (legend === undefined) this.legend = '';
+        else if (legend.length === 0) this.legend = '';
         else this.legend = '  '+legend;
+
+        if (dashes != undefined) {
+                this.dash = true;
+                this.p_dashes = dashes;
+                this.ndash = dashes.length;
+        }
+        if (dash_offset !=undefined) {
+                this.offset = dash_offset;
+        }
 };
 
-RrdGraphDesc.prototype.hrule = function (graph, value, color, legend)
+RrdGraphDesc.prototype.hrule = function (graph, value, color, legend, dashes, dash_offset)
 {
         this.gf = RrdGraphDesc.GF_HRULE;
         this.vidx = graph.find_var(value);
@@ -389,7 +411,17 @@ RrdGraphDesc.prototype.hrule = function (graph, value, color, legend)
                 this.yrule = value;
         this.col = color;
         if (legend === undefined) this.legend = '';
+        else if (legend.length === 0) this.legend = '';
         else this.legend = '  '+legend;
+
+        if (dashes != undefined) {
+                this.dash = true;
+                this.p_dashes = dashes;
+                this.ndash = dashes.length;
+        }
+        if (dash_offset !=undefined) {
+                this.offset = dash_offset;
+        }
 };
 
 /**
@@ -823,10 +855,10 @@ var RrdGraph = function (gfx, data)
                         FONT: 'rgba(0, 0, 0, 1.0)',
                         ARROW: 'rgba(127, 31, 31, 1.0)',
                         AXIS: 'rgba(31, 31, 31, 1.0)',
-                        FRAME: 'rgba(0, 0, 0, 1.0)' 
+                        FRAME: 'rgba(0, 0, 0, 1.0)'
         };
 
-        this.xlab = [ 
+        this.xlab = [
                 {minsec: 0, length: 0, gridtm: RrdGraph.TMT_SECOND, gridst: 30, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 5, labtm: RrdGraph.TMT_MINUTE, labst: 5, precis: 0, stst: '%H:%M' } ,
                 {minsec: 2, length: 0, gridtm: RrdGraph.TMT_MINUTE, gridst: 1, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 5, labtm: RrdGraph.TMT_MINUTE, labst: 5, precis: 0, stst: '%H:%M' } ,
                 {minsec: 5, length: 0, gridtm: RrdGraph.TMT_MINUTE, gridst: 2, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 10, labtm: RrdGraph.TMT_MINUTE, labst: 10, precis: 0, stst: '%H:%M' } ,
@@ -2963,9 +2995,9 @@ RrdGraph.prototype.gdes_add_shift = function (vname, offset)
         this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_SHIFT, vname, offset));
 };
 
-RrdGraph.prototype.gdes_add_line = function (width, value, color, legend, stack)
+RrdGraph.prototype.gdes_add_line = function (width, value, color, legend, stack, dashes, dash_offset)
 {
-        this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_LINE, width, value, color, legend, stack));
+        this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_LINE, width, value, color, legend, stack, dashes, dash_offset));
 };
 
 RrdGraph.prototype.gdes_add_area = function (value, color, legend, stack)
@@ -2993,14 +3025,14 @@ RrdGraph.prototype.gdes_add_textalign = function (align)
         this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_TEXTALIGN, align));
 };
 
-RrdGraph.prototype.gdes_add_vrule = function (time, color, legend)
+RrdGraph.prototype.gdes_add_vrule = function (time, color, legend, dashes, dash_offset)
 {
-        this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_VRULE, time, color, legend));
+        this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_VRULE, time, color, legend, dashes, dash_offset));
 };
 
-RrdGraph.prototype.gdes_add_hrule = function (value, color, legend)
+RrdGraph.prototype.gdes_add_hrule = function (value, color, legend, dashes, dash_offset)
 {
-        this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_HRULE, value, color, legend));
+        this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_HRULE, value, color, legend, dashes, dash_offset));
 };
 
 RrdGraph.prototype.tmt_conv = function (str)