Mercurial > gemma
comparison client/src/components/gauge/Waterlevel.vue @ 5219:de86a96d55c3 new-fwa
linter
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 12 May 2020 10:04:06 +0200 |
parents | 6b054b91d9b2 |
children |
comparison
equal
deleted
inserted
replaced
5218:7dbb7cc6dbfa | 5219:de86a96d55c3 |
---|---|
463 const diagram = svg | 463 const diagram = svg |
464 .append("g") | 464 .append("g") |
465 .attr("class", "main") | 465 .attr("class", "main") |
466 .attr( | 466 .attr( |
467 "transform", | 467 "transform", |
468 `translate(${dimensions.mainMargin.left}, ${ | 468 `translate(${dimensions.mainMargin.left}, ${dimensions.mainMargin.top})` |
469 dimensions.mainMargin.top | |
470 })` | |
471 ); | 469 ); |
472 | 470 |
473 // create container for navigation diagram | 471 // create container for navigation diagram |
474 const navigation = svg | 472 const navigation = svg |
475 .append("g") | 473 .append("g") |
529 .attr("class", "zoom") | 527 .attr("class", "zoom") |
530 .attr("width", dimensions.width) | 528 .attr("width", dimensions.width) |
531 .attr("height", dimensions.mainHeight) | 529 .attr("height", dimensions.mainHeight) |
532 .attr( | 530 .attr( |
533 "transform", | 531 "transform", |
534 `translate(${dimensions.mainMargin.left}, ${ | 532 `translate(${dimensions.mainMargin.left}, ${dimensions.mainMargin.top})` |
535 dimensions.mainMargin.top | |
536 })` | |
537 ); | 533 ); |
538 | 534 |
539 this.createZoom({ | 535 this.createZoom({ |
540 updaters, | 536 updaters, |
541 eventRect, | 537 eventRect, |
849 .call(nowLabel); | 845 .call(nowLabel); |
850 | 846 |
851 // draw in nav | 847 // draw in nav |
852 navigation | 848 navigation |
853 .append("path") | 849 .append("path") |
854 .datum([{ x: new Date(), y: hi + dy }, { x: new Date(), y: lo - dy }]) | 850 .datum([ |
851 { x: new Date(), y: hi + dy }, | |
852 { x: new Date(), y: lo - dy } | |
853 ]) | |
855 .attr("class", "now-line") | 854 .attr("class", "now-line") |
856 .attr( | 855 .attr( |
857 "d", | 856 "d", |
858 d3 | 857 d3 |
859 .line() | 858 .line() |
1031 zoomLevel | 1030 zoomLevel |
1032 }) { | 1031 }) { |
1033 const brush = d3 | 1032 const brush = d3 |
1034 .brushX() | 1033 .brushX() |
1035 .handleSize(4) | 1034 .handleSize(4) |
1036 .extent([[0, 0], [dimensions.width, dimensions.navHeight]]); | 1035 .extent([ |
1036 [0, 0], | |
1037 [dimensions.width, dimensions.navHeight] | |
1038 ]); | |
1037 | 1039 |
1038 const zoom = d3 | 1040 const zoom = d3 |
1039 .zoom() | 1041 .zoom() |
1040 .scaleExtent([1, Infinity]) | 1042 .scaleExtent([1, Infinity]) |
1041 .translateExtent([[0, 0], [dimensions.width, dimensions.mainHeight]]) | 1043 .translateExtent([ |
1042 .extent([[0, 0], [dimensions.width, dimensions.mainHeight]]); | 1044 [0, 0], |
1045 [dimensions.width, dimensions.mainHeight] | |
1046 ]) | |
1047 .extent([ | |
1048 [0, 0], | |
1049 [dimensions.width, dimensions.mainHeight] | |
1050 ]); | |
1043 | 1051 |
1044 brush.on("brush end", () => { | 1052 brush.on("brush end", () => { |
1045 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") | 1053 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") |
1046 return; // ignore brush-by-zoom | 1054 return; // ignore brush-by-zoom |
1047 let s = d3.event.selection || scale.x2.range(); | 1055 let s = d3.event.selection || scale.x2.range(); |