From e8a4d43c2a55d0a2ebd87b8e6c83d82ac5950291 Mon Sep 17 00:00:00 2001 From: Manuel Luis Sanmartín Rozada Date: Fri, 3 Apr 2015 19:02:59 +0200 Subject: jsrrdgraph: Add support for dashes --- js/RrdGfxCanvas.js | 21 ++++++++++++++++++++ js/RrdGfxPdf.js | 37 +++++++++++++++++++++++++++++++++- js/RrdGfxSvg.js | 25 +++++++++++++++++++++++ js/RrdGraph.js | 58 ++++++++++++++++++++++++++++++++++++++++++------------ 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) -- cgit v1.1