diff options
Diffstat (limited to '')
-rw-r--r-- | js/RrdGfxSvg.js | 250 |
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 | */ | ||
27 | var 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 | |||
36 | RrdGfxSvg.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 | |||
46 | RrdGfxSvg.prototype.set_dash = function (dashes, n, offset) | ||
47 | { | ||
48 | }; | ||
49 | |||
50 | RrdGfxSvg.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 | |||
69 | RrdGfxSvg.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 | |||
89 | RrdGfxSvg.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 | |||
107 | RrdGfxSvg.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 | |||
122 | RrdGfxSvg.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 | |||
130 | RrdGfxSvg.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 | |||
143 | RrdGfxSvg.prototype.stroke_begin = function (width, style) | ||
144 | { | ||
145 | this.path_width = width; | ||
146 | this.path_color = style; | ||
147 | this.path = ''; | ||
148 | }; | ||
149 | |||
150 | RrdGfxSvg.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 | |||
164 | RrdGfxSvg.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 | |||
172 | RrdGfxSvg.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 | |||
180 | RrdGfxSvg.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 | |||
229 | RrdGfxSvg.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 | |||