Mercurial > gemma
changeset 3285:aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Thu, 16 May 2019 11:28:44 +0200 |
| parents | 7ae1892773a2 |
| children | e640f51b5a4e |
| files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
| diffstat | 5 files changed, 74 insertions(+), 119 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Thu May 16 11:00:19 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Thu May 16 11:28:44 2019 +0200 @@ -62,6 +62,7 @@ * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> + * Fadi Abbud <fadi.abbud@intevation.de> */ import * as d3 from "d3"; import app from "@/main"; @@ -123,7 +124,7 @@ { type: "diagramtitle", position: "topleft", - offset: { x: 20, y: 20 }, + offset: { x: 70, y: 20 }, fontsize: 20, color: "steelblue" }, @@ -255,11 +256,13 @@ break; } case "diagramtitle": { + let title = `Available Fairway Depth: ${this.featureName}`; this.addDiagramTitle( e.position, e.offset || defaultOffset, e.fontsize || defaultFontSize, - e.color || defaultColor + e.color || defaultColor, + title ); break; } @@ -356,26 +359,6 @@ var imgData = canvas.toDataURL("image/png"); this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); }, - addDiagramTitle(position, offset, size, color) { - let x = offset.x, - y = offset.y; - let title = `Available Fairway Depth: ${this.featureName}`; - let width = - (this.pdf.doc.getStringUnitWidth(title) * size) / (72 / 25.6) + - size / 2; - // if position is on the right, x needs to be calculate with pdf width and - // the size of the element - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - this.getTextHeight(1); - } - this.pdf.doc.setTextColor(color); - this.pdf.doc.setFontSize(size); - this.pdf.doc.setFontStyle("bold"); - this.pdf.doc.text(title, x, y, { baseline: "hanging" }); - }, addDiagramLegend(position, offset, color) { let x = offset.x, y = offset.y;
--- a/client/src/components/fairway/Fairwayprofile.vue Thu May 16 11:00:19 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Thu May 16 11:28:44 2019 +0200 @@ -62,6 +62,7 @@ * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> + * Fadi Abbud <fadi.abbud@intevation.de> */ import * as d3 from "d3"; import { mapState, mapGetters } from "vuex"; @@ -297,7 +298,18 @@ break; } case "diagramtitle": { - this.addDiagramTitle(e.position, e.offset, e.fontsize, e.color); + let fairwayInfo = + this.selectedBottleneck + + " (" + + this.selectedSurvey.date_info + + ")"; + this.addDiagramTitle( + e.position, + e.offset, + e.fontsize, + e.color, + fairwayInfo + ); break; } case "image": { @@ -386,27 +398,6 @@ var imgData = canvas.toDataURL("image/png"); this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); }, - addDiagramTitle(position, offset, size, color) { - let x = offset.x, - y = offset.y; - let fairwayInfo = - this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")"; - let width = - (this.pdf.doc.getStringUnitWidth(fairwayInfo) * size) / (72 / 25.6) + - size / 2; - // if position is on the right, x needs to be calculate with pdf width and - // the size of the element - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - this.getTextHeight(1); - } - this.pdf.doc.setTextColor(color); - this.pdf.doc.setFontSize(size); - this.pdf.doc.setFontStyle("bold"); - this.pdf.doc.text(fairwayInfo, x, y, { baseline: "hanging" }); - }, // Diagram legend addDiagramLegend(position, offset, color) { let x = offset.x, @@ -432,13 +423,6 @@ this.pdf.doc.circle(x, y + 10, 2, "FD"); this.pdf.doc.text(x + 3, y + 11, "Ground"); }, - getTextHeight(numberOfLines) { - return ( - numberOfLines * - ((this.pdf.doc.getFontSize() * 25.4) / 80) * - this.pdf.doc.getLineHeightFactor() - ); - }, calcRelativeDepth(depth) { /* takes a depth value and substracts the delta of the relative waterlevel * say the reference level is above the current level, the ground is nearer,
--- a/client/src/components/gauge/HydrologicalConditions.vue Thu May 16 11:00:19 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu May 16 11:28:44 2019 +0200 @@ -216,7 +216,22 @@ break; } case "diagramtitle": { - this.addDiagramTitle(e.position, e.offset, e.fontsize, e.color); + let gaugeInfo = + this.selectedGauge.properties.objname + + " (" + + this.selectedGauge.id + .split(".")[1] + .replace(/[()]/g, "") + .split(",")[3] + + "): Hydrological Conditions " + + this.longtermInterval.join(" - "); + this.addDiagramTitle( + e.position, + e.offset, + e.fontsize, + e.color, + gaugeInfo + ); break; } case "diagramlegend": { @@ -359,42 +374,6 @@ }); } }, - // Gauge info as title - addDiagramTitle(position, offset, size, color) { - let x = offset.x, - y = offset.y; - let gaugeInfo = - this.selectedGauge.properties.objname + - " (" + - this.selectedGauge.id - .split(".")[1] - .replace(/[()]/g, "") - .split(",")[3] + - "): Hydrological Conditions " + - this.longtermInterval.join(" - "); - let width = - (this.pdf.doc.getStringUnitWidth(gaugeInfo) * size) / (72 / 25.6) + - size / 2; - // if position is on the right, x needs to be calculate with pdf width and - // the size of the element - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - this.getTextHeight(1); - } - this.pdf.doc.setTextColor(color); - this.pdf.doc.setFontSize(size); - this.pdf.doc.setFontStyle("bold"); - this.pdf.doc.text(gaugeInfo, x, y, { baseline: "hanging" }); - }, - getTextHeight(numberOfLines) { - return ( - numberOfLines * - ((this.pdf.doc.getFontSize() * 25.4) / 80) * - this.pdf.doc.getLineHeightFactor() - ); - }, // Diagram legend addDiagramLegend(position, offset, color) { let x = offset.x,
--- a/client/src/components/gauge/Waterlevel.vue Thu May 16 11:00:19 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu May 16 11:28:44 2019 +0200 @@ -235,7 +235,25 @@ break; } case "diagramtitle": { - this.addDiagramTitle(e.position, e.offset, e.fontsize, e.color); + let gaugeInfo = + this.selectedGauge.properties.objname + + " (" + + this.selectedGauge.id + .split(".")[1] + .replace(/[()]/g, "") + .split(",")[3] + + "):" + + " Waterlevel " + + this.dateFrom.toLocaleDateString() + + " - " + + this.dateTo.toLocaleDateString(); + this.addDiagramTitle( + e.position, + e.offset, + e.fontsize, + e.color, + gaugeInfo + ); break; } case "text": { @@ -368,36 +386,7 @@ this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); }, // Gauge info as a title for pdf - addDiagramTitle(position, offset, size, color) { - let gaugeInfo = - this.selectedGauge.properties.objname + - " (" + - this.selectedGauge.id - .split(".")[1] - .replace(/[()]/g, "") - .split(",")[3] + - "):" + - " Waterlevel " + - this.dateFrom.toLocaleDateString() + - " - " + - this.dateTo.toLocaleDateString(); - let x = offset.x; - let y = offset.y; - this.pdf.doc.setTextColor(color); - this.pdf.doc.setFontSize(size); - this.pdf.doc.setFontStyle("bold"); - let width = this.pdf.doc.getTextWidth(gaugeInfo) + size / 2; - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - this.getTextHeight(1); - } - this.pdf.doc.text(gaugeInfo, x, y, { - baseline: "hanging" - }); - }, getTextHeight(numberOfLines) { return ( numberOfLines *
--- a/client/src/lib/mixins.js Thu May 16 11:00:19 2019 +0200 +++ b/client/src/lib/mixins.js Thu May 16 11:28:44 2019 +0200 @@ -10,6 +10,7 @@ * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> + * * Fadi Abbud <fadi.abbud@intevation.de> */ import locale2 from "locale2"; export const sortTable = { @@ -80,7 +81,6 @@ if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - this.getTextHeight(textLines.length); } - this.pdf.doc.text(textLines, x, y, { baseline: "hanging" }); }, replacePlaceholders(text) { @@ -149,6 +149,26 @@ this.pdf.doc.getLineHeightFactor() ); }, + // title for diagram + addDiagramTitle(position, offset, size, color, text) { + let x = offset.x, + y = offset.y; + + let width = + (this.pdf.doc.getStringUnitWidth(text) * size) / (72 / 25.6) + size / 2; + // if position is on the right, x needs to be calculate with pdf width and + // the size of the element + if (["topright", "bottomright"].indexOf(position) !== -1) { + x = this.pdf.width - offset.x - width; + } + if (["bottomright", "bottomleft"].indexOf(position) !== -1) { + y = this.pdf.height - offset.y - this.getTextHeight(1); + } + this.pdf.doc.setTextColor(color); + this.pdf.doc.setFontSize(size); + this.pdf.doc.setFontStyle("bold"); + this.pdf.doc.text(text, x, y, { baseline: "hanging" }); + }, addRoundedBox(x, y, w, h, color, rounding, brcolor) { // draws a rounded background box at (x,y) width x height // using jsPDF units