Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3493:da58cf951342

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: diagram-template: improve diagramlegend element (AvailableFairwayDepth) * make values and styles of diagramlegend dynamic * adjust positioning and size * use rounded rectangular for diagramlegend element
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 27 May 2019 17:27:39 +0200
parents a303a746e471
children 067ad32fba69
comparison
equal deleted inserted replaced
3490:624c64670d48 3493:da58cf951342
193 const d = [this.depthlimit1, this.depthlimit2].sort(); 193 const d = [this.depthlimit1, this.depthlimit2].sort();
194 const w = [this.widthlimit1, this.widthlimit2].sort(); 194 const w = [this.widthlimit1, this.widthlimit2].sort();
195 const lowerBound = [d[0], w[0]].filter(x => x).join(", "); 195 const lowerBound = [d[0], w[0]].filter(x => x).join(", ");
196 const upperBound = [d[1], w[1]].filter(x => x).join(", "); 196 const upperBound = [d[1], w[1]].filter(x => x).join(", ");
197 return [ 197 return [
198 `> LDC`, 198 `> LDC`,
199 `< ${lowerBound}`, 199 `< ${lowerBound}`,
200 `< ${upperBound}`, 200 `< ${upperBound}`,
201 `>= ${upperBound}` 201 `>= ${upperBound}`
202 ]; 202 ];
203 }, 203 },
405 addDiagramLegend(position, offset, color) { 405 addDiagramLegend(position, offset, color) {
406 let x = offset.x, 406 let x = offset.x,
407 y = offset.y; 407 y = offset.y;
408 this.pdf.doc.setFontSize(10); 408 this.pdf.doc.setFontSize(10);
409 let width = 409 let width =
410 (this.pdf.doc.getStringUnitWidth(">= LDC [h]") * 10) / (72 / 25.6) + 15; 410 (this.pdf.doc.getStringUnitWidth(">= LDC") * 10) / (72 / 25.6) + 15;
411 // if position is on the right, x needs to be calculate with pdf width and 411 // if position is on the right, x needs to be calculate with pdf width and
412 // the size of the element 412 // the size of the element
413 if (["topright", "bottomright"].indexOf(position) !== -1) { 413 if (["topright", "bottomright"].indexOf(position) !== -1) {
414 x = this.pdf.width - offset.x - width; 414 x = this.pdf.width - offset.x - width;
415 } 415 }
416 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { 416 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
417 y = this.pdf.height - offset.y - this.getTextHeight(7); 417 y = this.pdf.height - offset.y - this.getTextHeight(6);
418 } 418 }
419 419
420 this.pdf.doc.setTextColor(color); 420 this.pdf.doc.setTextColor(color);
421 this.pdf.doc.setDrawColor("rgb(255, 133, 94)"); 421 this.pdf.doc.setDrawColor(this.$options.COLORS.LDC);
422 this.pdf.doc.setFillColor("rgb(255, 133, 94)"); 422 this.pdf.doc.setFillColor(this.$options.COLORS.LDC);
423 this.pdf.doc.rect(x, y, 8, 4, "FD"); 423 this.pdf.doc.roundedRect(x, y, 10, 4, 1.5, 1.5, "FD");
424 this.pdf.doc.text(">= LDC [h]", x + 10, y + 3); 424 this.pdf.doc.text(this.legend[0], x + 12, y + 3);
425 425
426 this.pdf.doc.setDrawColor("rgb(255, 66, 79)"); 426 this.pdf.doc.setDrawColor(this.$options.COLORS.REST[0]);
427 this.pdf.doc.setFillColor("rgb(255, 66, 79)"); 427 this.pdf.doc.setFillColor(this.$options.COLORS.REST[0]);
428 this.pdf.doc.rect(x, y + 5, 8, 4, "FD"); 428 this.pdf.doc.roundedRect(x, y + 5, 10, 4, 1.5, 1.5, "FD");
429 this.pdf.doc.text("< 200.00 [h]", x + 10, y + 8); 429 this.pdf.doc.text(this.legend[1], x + 12, y + 8);
430 430
431 this.pdf.doc.setDrawColor("rgb(255, 115, 124)"); 431 this.pdf.doc.setDrawColor(this.$options.COLORS.REST[1]);
432 this.pdf.doc.setFillColor("rgb(255, 115, 124)"); 432 this.pdf.doc.setFillColor(this.$options.COLORS.REST[1]);
433 this.pdf.doc.rect(x, y + 10, 8, 4, "FD"); 433 this.pdf.doc.roundedRect(x, y + 10, 10, 4, 1.5, 1.5, "FD");
434 this.pdf.doc.text(">= 200.00 [h]", x + 10, y + 13); 434 this.pdf.doc.text(this.legend[2], x + 12, y + 13);
435 435
436 this.pdf.doc.setDrawColor("rgb(255, 153, 160)"); 436 this.pdf.doc.setDrawColor(this.$options.COLORS.HIGHEST);
437 this.pdf.doc.setFillColor("rgb(255, 153, 160)"); 437 this.pdf.doc.setFillColor(this.$options.COLORS.HIGHEST);
438 this.pdf.doc.rect(x, y + 15, 8, 4, "FD"); 438 this.pdf.doc.roundedRect(x, y + 15, 10, 4, 1.5, 1.5, "FD");
439 this.pdf.doc.text(">= 230.00 [h]", x + 10, y + 18); 439 this.pdf.doc.text(this.legend[3], x + 12, y + 18);
440
441 this.pdf.doc.setDrawColor("rgb(45, 132, 179)");
442 this.pdf.doc.setFillColor("rgb(45, 132, 179)");
443 this.pdf.doc.rect(x, y + 20, 8, 4, "FD");
444 this.pdf.doc.text(">= 250.00 [h]", x + 10, y + 23);
445 }, 440 },
446 legendStyle(index) { 441 legendStyle(index) {
447 const style = { 442 const style = {
448 0: `background-color: ${this.$options.COLORS.LDC};`, 443 0: `background-color: ${this.$options.COLORS.LDC};`,
449 1: `background-color: ${this.$options.COLORS.REST[0]};`, 444 1: `background-color: ${this.$options.COLORS.REST[0]};`,