Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 4109:5317ae66f654

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 30 Jul 2019 12:03:56 +0200
parents f391497287fb
children 0f69d256fa12 0becdd2812c9
comparison
equal deleted inserted replaced
4108:6ee5523967ec 4109:5317ae66f654
207 this.gaugeInfo(this.selectedGauge) + 207 this.gaugeInfo(this.selectedGauge) +
208 ": Waterlevel " + 208 ": Waterlevel " +
209 this.dateFrom.toLocaleDateString() + 209 this.dateFrom.toLocaleDateString() +
210 " - " + 210 " - " +
211 this.dateTo.toLocaleDateString(); 211 this.dateTo.toLocaleDateString();
212
213 this.generatePDF({ 212 this.generatePDF({
214 templateData: this.templateData, 213 templateData: this.templateData,
215 diagramTitle: diagramTitle 214 diagramTitle: diagramTitle
216 }); 215 });
217
218 this.pdf.doc.save( 216 this.pdf.doc.save(
219 this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf" 217 this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
220 ); 218 );
221 }, 219 },
222 applyChange() { 220 applyChange() {
245 }); 243 });
246 } 244 }
247 }, 245 },
248 // Diagram legend 246 // Diagram legend
249 addDiagramLegend(position, offset, color) { 247 addDiagramLegend(position, offset, color) {
250 let x = offset.x; 248 let x = offset.x + 2, // 2 is the radius of the circle
251 let y = offset.y; 249 y = offset.y,
250 padding = 3;
251 this.pdf.doc.setFontStyle("normal");
252 this.pdf.doc.setFontSize(10); 252 this.pdf.doc.setFontSize(10);
253 let width = 253 let width = this.pdf.doc.getTextWidth("Navigable Range") + padding;
254 (this.pdf.doc.getStringUnitWidth("Navigable Range") * 10) /
255 (72 / 25.6) +
256 5;
257 if (["topright", "bottomright"].indexOf(position) !== -1) { 254 if (["topright", "bottomright"].indexOf(position) !== -1) {
258 x = this.pdf.width - offset.x - width; 255 x = this.pdf.width - offset.x - width;
259 } 256 }
260 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { 257 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
261 y = this.pdf.height - offset.y - this.getTextHeight(4); 258 y = this.pdf.height - offset.y - this.getTextHeight(3);
259 }
260 if (y < this.getTextHeight(1)) {
261 y = y + this.getTextHeight(1) / 2;
262 } 262 }
263 this.pdf.doc.setTextColor(color); 263 this.pdf.doc.setTextColor(color);
264 this.pdf.doc.setDrawColor("white"); 264 this.pdf.doc.setDrawColor("white");
265 this.pdf.doc.setFillColor("steelblue"); 265 this.pdf.doc.setFillColor("steelblue");
266 this.pdf.doc.circle(x, y, 2, "FD"); 266 this.pdf.doc.circle(x, y, 2, "FD");
267 this.pdf.doc.text(x + 3, y + 1, "Waterlevel"); 267 this.pdf.doc.text(x + padding, y + 1, "Waterlevel");
268 this.pdf.doc.setFillColor("#dae6f0"); 268 this.pdf.doc.setFillColor("#dae6f0");
269 this.pdf.doc.circle(x, y + 5, 2, "FD"); 269 this.pdf.doc.circle(x, y + 5, 2, "FD");
270 this.pdf.doc.setFillColor("#e5ffe5"); 270 this.pdf.doc.setFillColor("#e5ffe5");
271 this.pdf.doc.circle(x, y + 10, 2, "FD"); 271 this.pdf.doc.circle(x, y + 10, 2, "FD");
272 this.pdf.doc.text(x + 3, y + 11, "Navigable Range"); 272 this.pdf.doc.text(x + padding, y + 11, "Navigable Range");
273 this.pdf.doc.setDrawColor("#90b4d2"); 273 this.pdf.doc.setDrawColor("#90b4d2");
274 this.pdf.doc.setFillColor("#90b4d2"); 274 this.pdf.doc.setFillColor("#90b4d2");
275 this.pdf.doc.circle(x, y + 5, 0.6, "FD"); 275 this.pdf.doc.circle(x, y + 5, 0.6, "FD");
276 this.pdf.doc.text(x + 3, y + 6, "Prediction"); 276 this.pdf.doc.text(x + padding, y + 6, "Prediction");
277 }, 277 },
278 getPrintLayout(svgHeight) { 278 getPrintLayout(svgHeight) {
279 return { 279 return {
280 main: { top: 20, right: 50, bottom: 110, left: 80 }, 280 main: { top: 20, right: 50, bottom: 110, left: 80 },
281 nav: { 281 nav: {