Mercurial > gemma
changeset 4803:b3f65cff13e8
client: FWD,FWDVsLNWL: implement image-export
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Mon, 28 Oct 2019 10:41:12 +0100 |
| parents | 2ce5c727b465 |
| children | 75e6ec39a0b7 |
| files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue |
| diffstat | 2 files changed, 42 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Mon Oct 28 10:20:24 2019 +0100 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Mon Oct 28 10:41:12 2019 +0100 @@ -37,10 +37,18 @@ </button> <a :href="dataLink" - :download="csvFileName" + :download="`${fileName}.csv`" class="mt-2 btn btn-sm btn-info w-100" ><translate>Download CSV</translate></a > + <a + @click="downloadImage" + id="downloadimage" + class="btn btn-sm btn-info text-white d-block w-100 mt-2" + :download="`${fileName}.png`" + > + <translate>Download Image</translate> + </a> </div> <div class="btn-group-toggle w-100 mt-2"> <label @@ -205,6 +213,13 @@ dataLink() { return `data:text/csv;charset=utf-8, ${encodeURIComponent(this.csv)}`; }, + fileName() { + if (!this.frequencyD) return; + return this.downloadFilename( + this.$gettext("FairwayAvailability"), + this.featureName + ); + }, csvFileName() { if (!this.frequencyD) return; return ( @@ -284,12 +299,7 @@ templateData: this.templateData, diagramTitle: title }); - this.pdf.doc.save( - this.downloadFilename( - this.$gettext("FairwayAvailability"), - this.featureName - ) + ".pdf" - ); + this.pdf.doc.save(this.fileName + ".pdf"); }, addDiagramLegend(position, offset, color) { let x = offset.x, @@ -397,6 +407,12 @@ .attr("width", "100%") .attr("height", "100%"); diagram.append("g"); + diagram + .append("g") + .append("rect") + .attr("width", "100%") + .attr("height", "100%") + .attr("fill", "#ffffff"); const yScale = d3 .scaleLinear() .domain(this.frequencyToRange)
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Mon Oct 28 10:20:24 2019 +0100 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Mon Oct 28 10:41:12 2019 +0100 @@ -37,10 +37,18 @@ </button> <a :href="dataLink" - :download="csvFileName" + :download="`${fileName}.csv`" class="mt-2 btn btn-sm btn-info w-100" ><translate>Download CSV</translate></a > + <a + @click="downloadImage" + id="downloadimage" + class=" btn btn-sm btn-info text-white d-block w-100 mt-2" + :download="`${fileName}.png`" + > + <translate>Download Image</translate> + </a> </div> <div class="btn-group-toggle w-100 mt-2"> <label @@ -204,13 +212,11 @@ dataLink() { return `data:text/csv;charset=utf-8, ${encodeURIComponent(this.csv)}`; }, - csvFileName() { + fileName() { if (!this.frequencyD) return; - return ( - this.downloadFilename( - this.$gettext("FairwayAvailabilityVsLNWL"), - this.featureName - ) + ".csv" + return this.downloadFilename( + this.$gettext("FairwayAvailabilityVsLNWL"), + this.featureName ); }, availability() { @@ -395,6 +401,12 @@ .attr("width", "100%") .attr("height", "100%"); diagram = diagram.append("g"); + diagram + .append("g") + .append("rect") + .attr("width", "100%") + .attr("height", "100%") + .attr("fill", "#ffffff"); const yScale = d3 .scaleLinear() .domain([0, 100])