aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/js/RrdGfxSvg.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/RrdGfxSvg.js')
-rw-r--r--js/RrdGfxSvg.js250
1 files changed, 250 insertions, 0 deletions
diff --git a/js/RrdGfxSvg.js b/js/RrdGfxSvg.js
new file mode 100644
index 0000000..2bdc1b9
--- /dev/null
+++ b/js/RrdGfxSvg.js
@@ -0,0 +1,250 @@
1/**
2 *
3 * This program is free software; you can redistribute it and/or modify it
4 * under the terms of the GNU General Public License as published by the Free
5 * Software Foundation; either version 2 of the License, or (at your option)
6 * any later version.
7 *
8 * This program is distributed in the hope that it will be useful, but WITHOUT
9 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
10 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
11 * more details.
12
13 * You should have received a copy of the GNU General Public License along
14 * with this program; if not, write to the Free Software Foundation, Inc.,
15 * 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA
16
17 *
18 * Manuel Sanmartin <manuel.luis at gmail.com>
19 **/
20
21"use strict";
22
23/**
24 * RrdGfxSvg
25 * @constructor
26 */
27var RrdGfxSvg = function(svgId) {
28 this.svg = document.getElementById(svgId)
29 this.svgns = "http://www.w3.org/2000/svg";
30 this.xmlns = "http://www.w3.org/XML/1998/namespace";
31 this.path = null;
32 this.path_color = null;
33 this.path_width = null;
34};
35
36RrdGfxSvg.prototype.size = function (width, height)
37{
38 while(this.svg.lastChild)
39 this.svg.removeChild(this.svg.lastChild);
40
41 this.svg.setAttribute("width", width+"px");
42 this.svg.setAttribute("height", height+"px");
43 this.svg.setAttribute("viewBox", "0 0 "+width+" "+height);
44};
45
46RrdGfxSvg.prototype.set_dash = function (dashes, n, offset)
47{
48};
49
50RrdGfxSvg.prototype.line = function (X0, Y0, X1, Y1, width, color)
51{
52 var shape = document.createElementNS(this.svgns, "line");
53
54 X0 = Math.round(X0)+0.5;
55 Y0 = Math.round(Y0)+0.5;
56 X1 = Math.round(X1)+0.5;
57 Y1 = Math.round(Y1)+0.5;
58
59 shape.setAttributeNS(null, "x1", X0);
60 shape.setAttributeNS(null, "y1", Y0);
61 shape.setAttributeNS(null, "x2", X1);
62 shape.setAttributeNS(null, "y2", Y1);
63 shape.setAttributeNS(null, "stroke-width", width);
64 shape.setAttributeNS(null, "stroke", color);
65
66 this.svg.appendChild(shape);
67};
68
69RrdGfxSvg.prototype.dashed_line = function (X0, Y0, X1, Y1, width, color, dash_on, dash_off)
70{
71 var shape = document.createElementNS(this.svgns, "line");
72
73 X0 = Math.round(X0)+0.5;
74 Y0 = Math.round(Y0)+0.5;
75 X1 = Math.round(X1)+0.5;
76 Y1 = Math.round(Y1)+0.5;
77
78 shape.setAttributeNS(null, "x1", X0);
79 shape.setAttributeNS(null, "y1", Y0);
80 shape.setAttributeNS(null, "x2", X1);
81 shape.setAttributeNS(null, "y2", Y1);
82 shape.setAttributeNS(null, "stroke-width", width);
83 shape.setAttributeNS(null, "stroke", color);
84 shape.setAttributeNS(null, "stroke-dasharray", dash_on+','+dash_off);
85
86 this.svg.appendChild(shape);
87};
88
89RrdGfxSvg.prototype.rectangle = function (X0, Y0, X1, Y1, width, style)
90{
91 var shape = document.createElementNS(this.svgns, "rect");
92
93 var rwidth = Math.abs(X1-X0);
94 var rheight = Math.abs(Y1-Y0);
95
96 shape.setAttributeNS(null, "x", Math.round(X0)+0.5);
97 shape.setAttributeNS(null, "y", Math.round(Y0-rheight)+0.5);
98 shape.setAttributeNS(null, "width", rwidth);
99 shape.setAttributeNS(null, "height", rheight);
100 shape.setAttributeNS(null, "stroke-width", width);
101 shape.setAttributeNS(null, "stroke", style);
102 shape.setAttributeNS(null, "fill", "none");
103
104 this.svg.appendChild(shape);
105};
106
107RrdGfxSvg.prototype.new_area = function (X0, Y0, X1, Y1, X2, Y2, color)
108{
109 X0 = Math.round(X0)+0.5;
110 Y0 = Math.round(Y0)+0.5;
111 X1 = Math.round(X1)+0.5;
112 Y1 = Math.round(Y1)+0.5;
113 X2 = Math.round(X2)+0.5;
114 Y2 = Math.round(Y2)+0.5;
115
116 this.path_color = color;
117 this.path = 'M'+X0+','+Y0;
118 this.path += ' L'+X1+','+Y1;
119 this.path += ' L'+X2+','+Y2;
120};
121
122RrdGfxSvg.prototype.add_point = function (x, y)
123{
124 x = Math.round(x)+0.5;
125 y = Math.round(y)+0.5;
126
127 this.path += ' L'+x+','+y;
128};
129
130RrdGfxSvg.prototype.close_path = function ()
131{
132 var shape = document.createElementNS(this.svgns, "path");
133
134 this.path += ' Z';
135
136 shape.setAttributeNS(null, "d", this.path);
137 shape.setAttributeNS(null, "fill", this.path_color);
138 shape.setAttributeNS(null, "stroke", 'none');
139
140 this.svg.appendChild(shape);
141};
142
143RrdGfxSvg.prototype.stroke_begin = function (width, style)
144{
145 this.path_width = width;
146 this.path_color = style;
147 this.path = '';
148};
149
150RrdGfxSvg.prototype.stroke_end = function ()
151{
152 var shape = document.createElementNS(this.svgns, "path");
153
154 shape.setAttributeNS(null, "d", this.path);
155 shape.setAttributeNS(null, "fill", 'none');
156 shape.setAttributeNS(null, "stroke", this.path_color);
157 shape.setAttributeNS(null, "stroke-width", this.path_width);
158 shape.setAttributeNS(null, "stroke-linecap", 'round');
159 shape.setAttributeNS(null, "stroke-linejoin", 'round');
160
161 this.svg.appendChild(shape);
162};
163
164RrdGfxSvg.prototype.moveTo = function (x,y)
165{
166 x = Math.round(x)+0.5;
167 y = Math.round(y)+0.5;
168
169 this.path += ' M'+x+','+y;
170};
171
172RrdGfxSvg.prototype.lineTo = function (x,y)
173{
174 x = Math.round(x)+0.5;
175 y = Math.round(y)+0.5;
176
177 this.path += ' L'+x+','+y;
178};
179
180RrdGfxSvg.prototype.text = function (x, y, color, font, tabwidth, angle, h_align, v_align, text)
181{
182 x = Math.round(x);
183 y = Math.round(y);
184
185 var svgtext = document.createElementNS(this.svgns, "text");
186
187 var data = document.createTextNode(text);
188
189 svgtext.setAttributeNS(null, "x", x);
190 svgtext.setAttributeNS(null, "y", y);
191 svgtext.setAttributeNS(null, "fill", color);
192 svgtext.setAttributeNS(null, "stroke", "none");
193 svgtext.setAttributeNS(null, "font-family", font.font);
194 svgtext.setAttributeNS(null, "font-size", font.size+"px");
195 svgtext.setAttributeNS(this.xmlns, "xml:space", "preserve");
196
197 angle=-angle;
198 svgtext.setAttributeNS(null, "transform", 'rotate('+angle+' '+x+','+y+')' );
199
200 switch (h_align) {
201 case RrdGraph.GFX_H_LEFT:
202 svgtext.setAttributeNS(null, "text-anchor", 'start');
203 break;
204 case RrdGraph.GFX_H_RIGHT:
205 svgtext.setAttributeNS(null, "text-anchor", 'end');
206 break;
207 case RrdGraph.GFX_H_CENTER:
208 svgtext.setAttributeNS(null, "text-anchor", 'middle');
209 break;
210 }
211 svgtext.appendChild(data);
212 this.svg.appendChild(svgtext);
213
214 var bbox = svgtext.getBBox();
215
216 switch (v_align) { // FIXME
217 case RrdGraph.GFX_V_TOP:
218 svgtext.setAttributeNS(null, "y", y+bbox.height/2);
219 break;
220 case RrdGraph.GFX_V_BOTTOM:
221 svgtext.setAttributeNS(null, "y", y-bbox.height/6);
222 break;
223 case RrdGraph.GFX_V_CENTER:
224 svgtext.setAttributeNS(null, "y", y+bbox.height/4);
225 break;
226 }
227};
228
229RrdGfxSvg.prototype.get_text_width = function(start, font, tabwidth, text)
230{
231 var svgtext = document.createElementNS(this.svgns, "text");
232 var data = document.createTextNode(text);
233 svgtext.setAttributeNS(null, "x", 0);
234 svgtext.setAttributeNS(null, "y", 0);
235 svgtext.setAttributeNS(null, "fill", 'none');
236 svgtext.setAttributeNS(null, "stroke", 'none');
237 svgtext.setAttributeNS(null, "font-family", font.font);
238 svgtext.setAttributeNS(null, "font-size", font.size+"px");
239 svgtext.setAttributeNS(this.xmlns, "xml:space", "preserve");
240 svgtext.appendChild(data);
241 this.svg.appendChild(svgtext);
242
243 var bbox = svgtext.getBBox();
244
245 svgtext.removeChild(data);
246 this.svg.removeChild(svgtext);
247
248 return bbox.width;
249};
250
generated by cgit v1.1 at 2025-12-28 07:18:31 +0000