Mercurial > gemma
changeset 2842:37c2a73ed001
client: diagrams: fixed tooltips in firefox
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 28 Mar 2019 11:16:32 +0100 |
| parents | a702d9b652f7 |
| children | 451d73940c81 |
| files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
| diffstat | 2 files changed, 27 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Thu Mar 28 10:32:09 2019 +0100 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu Mar 28 11:16:32 2019 +0100 @@ -591,8 +591,8 @@ const tooltip = this.diagram.append("g").attr("class", "chart-tooltip"); tooltip .append("rect") - .attr("rx", "0.25rem") - .attr("ry", "0.25rem"); + .attr("rx", "0.25em") + .attr("ry", "0.25em"); // create container for multiple text rows const tooltipText = tooltip.append("text").attr("text-anchor", "middle"); @@ -638,7 +638,7 @@ // write date tooltipText .append("tspan") - .attr("alignment-baseline", "hanging") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text( d.date.toLocaleString([], { @@ -652,40 +652,40 @@ .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "1.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "1.4em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text(`Q75%: ${d.q75} cm`); tooltipText .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "2.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "2.6em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text(`Median: ${d.median} cm`); tooltipText .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "3.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "3.8em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text(`Q25%: ${d.q25} cm`); tooltipText .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "4.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "5em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text(`Max: ${d.max} cm`); tooltipText .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "5.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "6.2em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text(`Min: ${d.min} cm`); @@ -697,8 +697,8 @@ .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "6.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "7.4em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text(`${this.yearCompare}: ${dYear.mean.toFixed(1)} cm`); }
--- a/client/src/components/gauge/Waterlevel.vue Thu Mar 28 10:32:09 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Thu Mar 28 11:16:32 2019 +0100 @@ -124,7 +124,7 @@ stroke: #ccc text fill: #666 - font-size: 12px + font-size: 0.8em </style> <script> @@ -672,8 +672,8 @@ const tooltip = this.diagram.append("g").attr("class", "chart-tooltip"); tooltip .append("rect") - .attr("rx", "0.25rem") - .attr("ry", "0.25rem"); + .attr("rx", "0.25em") + .attr("ry", "0.25em"); // create container for multiple text rows const tooltipText = tooltip.append("text").attr("text-anchor", "middle"); @@ -719,7 +719,7 @@ // write date tooltipText .append("tspan") - .attr("alignment-baseline", "hanging") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text( d.date.toLocaleString([], { @@ -736,16 +736,16 @@ .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "1.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "1.4em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text(d.max + " cm"); tooltipText .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "2.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "2.6em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("class", "font-weight-bold") .text(d.waterlevel + " cm"); @@ -753,8 +753,8 @@ .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "3.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "3.8em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text(d.min + " cm"); } else { @@ -762,8 +762,8 @@ .append("tspan") .attr("x", 0) .attr("y", 0) - .attr("dy", "1.3rem") - .attr("alignment-baseline", "hanging") + .attr("dy", "1.4em") + .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("class", "font-weight-bold") .text(d.waterlevel + " cm");