Mercurial > gemma
changeset 2650:a308baa7e7af
Merged
author | Tom Gottfried <tom@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 14:50:20 +0100 |
parents | 9b6a02923bb4 (current diff) 4ffae834276e (diff) |
children | 9f3856337f55 |
files | |
diffstat | 1 files changed, 27 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Thu Mar 14 14:37:28 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Thu Mar 14 14:50:20 2019 +0100 @@ -11,11 +11,6 @@ fill: transparent clip-path: url(#clip) - .zoom - cursor: move - fill: none - pointer-events: all - .hdc-line, .ldc-line, .mw-line @@ -33,6 +28,16 @@ fill: #999 .hdc-ldc-area fill: rgba(0, 255, 0, 0.15) + + .tick + line + stroke-dasharray: 5 + stroke: #ccc + + .zoom + cursor: move + fill: none + pointer-events: all .brush .selection stroke: transparent @@ -127,9 +132,15 @@ x2.domain(x.domain()); y2.domain(y.domain()); // creating the axes based on these scales - let xAxis = d3.axisBottom(x), - xAxis2 = d3.axisBottom(x2), - yAxis = d3.axisLeft(y); + let xAxis = d3 + .axisTop(x) + .tickSizeInner(mainHeight) + .tickSizeOuter(0); + let xAxis2 = d3.axisBottom(x2); + let yAxis = d3 + .axisRight(y) + .tickSizeInner(width) + .tickSizeOuter(0); // PREPARING CHART FUNCTIONS @@ -171,13 +182,19 @@ mainChart .append("g") .attr("transform", `translate(0, ${mainHeight})`) - .call(xAxis); + .call(xAxis) + .selectAll(".tick text") + .attr("y", 15); mainChart // label .append("text") .text(this.$gettext("Waterlevel [cm]")) .attr("text-anchor", "middle") .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`); - mainChart.append("g").call(yAxis); + mainChart + .append("g") + .call(yAxis) + .selectAll(".tick text") + .attr("x", -25); // reference waterlevels // filling area between HDC and LDC