Mercurial > gemma
changeset 3045:44dc837638d9
client: improve styles for pdf-gen of diagrams
* add missing styles and calls of setInlineStyle function
* correct some d3 style
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Mon, 15 Apr 2019 11:04:00 +0200 |
| parents | c71373594719 |
| children | c764c73f44b4 |
| files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
| diffstat | 2 files changed, 48 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Sat Apr 13 16:02:06 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Mon Apr 15 11:04:00 2019 +0200 @@ -168,7 +168,6 @@ methods: { downloadPDF() { var svg = this.svg._groups[0][0].outerHTML; - console.log(this.svg); if (svg) { svg = svg.replace(/\r?\n|\r/g, "").trim(); } @@ -323,7 +322,7 @@ this.svg.selectAll(".mw-line").attr("stroke", "grey"); this.svg .selectAll(".ref-waterlevel-label") - .attr("font-size", "11px") + .style("font-size", "11px") .attr("fill", "#999"); this.svg .selectAll(".now-line") @@ -334,7 +333,7 @@ this.svg .selectAll(".now-line-label") .attr("fill", "#999") - .attr("font-size", "11px"); + .style("font-size", "11px"); this.svg .selectAll(".tick line") .attr("stroke-dasharray", 5) @@ -357,6 +356,25 @@ .selectAll(".handle") .attr("stroke", "rgba(23, 162, 184, 0.5)") .attr("fill", "rgba(23, 162, 184, 0.5)"); + this.svg + .selectAll(".chart-dot") + .attr("stroke-opacity", 0) + .attr("fill-opacity", 0) + .attr("stroke", "steelblue") + .style("pointer-events", "none") + .style("transition", "opacity 0.1s"); + this.svg + .selectAll(".chart-tooltip") + .attr("fill-opacity", 0) + .style("transition", "opacity 0.3s"); + this.svg + .selectAll(".chart-tooltip rect") + .attr("fill", "#fff") + .attr("stroke", "#ccc"); + this.svg + .selectAll(".chart-tooltip text") + .attr("fill", "666") + .style("font-size", "0.8em"); }, getDimensions() { // dimensions and margins @@ -644,6 +662,7 @@ let s = d3.event.selection || this.scale.x2.range(); this.scale.x.domain(s.map(this.scale.x2.invert, this.scale.x2)); updaters.forEach(u => u && u()); + this.setInlineStyles(); this.svg .select(".zoom") .call( @@ -660,6 +679,7 @@ let t = d3.event.transform; this.scale.x.domain(t.rescaleX(this.scale.x2).domain()); updaters.forEach(u => u && u()); + this.setInlineStyles(); this.navigation .select(".brush") .call(brush.move, this.scale.x.range().map(t.invertX, t));
--- a/client/src/components/gauge/Waterlevel.vue Sat Apr 13 16:02:06 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Mon Apr 15 11:04:00 2019 +0200 @@ -181,14 +181,13 @@ methods: { downloadPDF() { var svg = this.$refs.diagramContainer.innerHTML; - console.log(this.svg); if (svg) { svg = svg.replace(/\r?\n|\r/g, "").trim(); } var pdf = new jsPDF("l", "mm", "a3"); var canvas = document.createElement("canvas"); canvas.width = window.innerWidth; - canvas.height = 500; + canvas.height = window.innerHeight / 2; canvg(canvas, svg, { ignoreMouse: true, ignoreAnimation: true, @@ -341,7 +340,7 @@ this.svg.selectAll(".mw-line").attr("stroke", "grey"); this.svg .selectAll(".ref-waterlevel-label") - .attr("font-size", "11px") + .style("font-size", "11px") .attr("fill", "#999"); this.svg.selectAll(".hdc-ldc-area").attr("fill", "rgba(0, 255, 0, 0.1)"); this.svg @@ -375,10 +374,10 @@ this.svg .selectAll("text") .selectAll(".nash-sutcliffe") - .attr("font-size", "10px") + .style("font-size", "10px") .attr("clip-path", "url(#clip)") .selectAll("tspan:last-child") - .attr("font-size", "9px") + .style("font-size", "9px") .attr(" fill", "#777"); this.svg @@ -402,6 +401,25 @@ .selectAll(".handle") .attr("stroke", "rgba(23, 162, 184, 0.5)") .attr("fill", "rgba(23, 162, 184, 0.5)"); + this.svg.selectAll(".chart-dots").attr("clip-path", "url(#clip)"); + this.svg + .selectAll(".chart-dots .chart-dot") + .attr("stroke-opacity", 0) + .attr("stroke", "steelblue") + .style("pointer-events", "none") + .style("transition", "opacity 0.1s"); + this.svg + .selectAll(".chart-tooltip") + .attr("fill-opacity", 0) + .style("transition", "opacity 0.3s"); + this.svg + .selectAll(".chart-tooltip rect") + .attr("fill", "#fff") + .attr("stroke", "#ccc"); + this.svg + .selectAll(".chart-tooltip text") + .attr("fill", "666") + .style("font-size", "0.8em"); }, getDimensions() { // dimensions and margins @@ -747,6 +765,7 @@ let s = d3.event.selection || this.scale.x2.range(); this.scale.x.domain(s.map(this.scale.x2.invert, this.scale.x2)); updaters.forEach(u => u && u()); + this.setInlineStyles(); this.svg .select(".zoom") .call( @@ -763,6 +782,7 @@ let t = d3.event.transform; this.scale.x.domain(t.rescaleX(this.scale.x2).domain()); updaters.forEach(u => u && u()); + this.setInlineStyles(); this.navigation .select(".brush") .call(brush.move, this.scale.x.range().map(t.invertX, t));