Mercurial > gemma
diff client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 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 | fa55e48bbca1 |
children | 7de099c4824c |
line wrap: on
line diff
--- 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])