comparison client/src/components/gauge/Waterlevel.vue @ 3107:8e364945a390

client: adjust some styles for waterlevel diagram
author Fadi Abbud <fadi.abbud@intevation.de>
date Thu, 25 Apr 2019 17:17:36 +0200
parents 492c30ca3142
children 8db113582f64
comparison
equal deleted inserted replaced
3106:d68d8b137072 3107:8e364945a390
371 .selectAll("path.d3-line-chunked-chunk-gap") 371 .selectAll("path.d3-line-chunked-chunk-gap")
372 .attr("stroke-opacity", 0); 372 .attr("stroke-opacity", 0);
373 this.svg 373 this.svg
374 .selectAll(".line") 374 .selectAll(".line")
375 .selectAll("circle") 375 .selectAll("circle")
376 .attr("stroke", "steelblue") 376 .attr("fill", "steelblue")
377 .attr("stroke-width", 2); 377 .attr("stroke-width", 0);
378 this.svg 378 this.svg
379 .selectAll(".line") 379 .selectAll(".line")
380 .selectAll("circle.d3-line-chunked-chunk-predicted-point") 380 .selectAll("circle.d3-line-chunked-chunk-predicted-point")
381 .attr("fill-opacity", 0.6); 381 .attr("fill-opacity", 0.6);
382 382
408 .attr("fill", "steelblue") 408 .attr("fill", "steelblue")
409 .attr("fill-opacity", 0.2) 409 .attr("fill-opacity", 0.2)
410 .attr("clip-path", "url(#clip)"); 410 .attr("clip-path", "url(#clip)");
411 411
412 this.svg 412 this.svg
413 .selectAll("path") 413
414 .selectAll(".nash-sutcliffe") 414 .selectAll("path.nash-sutcliffe")
415 .attr("fill", "none") 415 .attr("fill", "none")
416 .attr("stroke", "black") 416 .attr("stroke", "black")
417 .attr("stroke-width", 1) 417 .attr("stroke-width", 1)
418 .attr("clip-path", "url(#clip)"); 418 .attr("clip-path", "url(#clip)");
419 this.svg 419 this.svg
420 .selectAll("path") 420 .selectAll("path.nash-sutcliffe.ns72")
421 .selectAll(".nash-sutcliffe")
422 .selectAll(".ns72")
423 .attr("fill", "rgba(0, 0, 0, 0.05)"); 421 .attr("fill", "rgba(0, 0, 0, 0.05)");
424 this.svg 422 this.svg
425 .selectAll("text") 423 .selectAll("text.nash-sutcliffe")
426 .selectAll(".nash-sutcliffe")
427 .style("font-size", "10px") 424 .style("font-size", "10px")
428 .attr("clip-path", "url(#clip)") 425 .attr("clip-path", "url(#clip)")
429 .selectAll("tspan:last-child") 426 .selectAll("tspan:last-child")
430 .style("font-size", "9px") 427 .style("font-size", "9px")
431 .attr(" fill", "#777"); 428 .attr(" fill", "#777");
440 .selectAll(".zoom") 437 .selectAll(".zoom")
441 .attr("cursor", "move") 438 .attr("cursor", "move")
442 .attr("fill", "none") 439 .attr("fill", "none")
443 .attr("pointer-events", "all"); 440 .attr("pointer-events", "all");
444 this.svg 441 this.svg
445 .selectAll(".brush") 442 .selectAll(".brush .selection")
446 .selectAll(".selection")
447 .attr("stroke", "none") 443 .attr("stroke", "none")
448 .attr("fill-opacity", 0.2); 444 .attr("fill-opacity", 0.2);
449 this.svg 445 this.svg
450 .selectAll(".brush") 446 .selectAll(".brush .handle")
451 .selectAll(".handle")
452 .attr("stroke", "rgba(23, 162, 184, 0.5)") 447 .attr("stroke", "rgba(23, 162, 184, 0.5)")
453 .attr("fill", "rgba(23, 162, 184, 0.5)"); 448 .attr("fill", "rgba(23, 162, 184, 0.5)");
454 this.svg.selectAll(".chart-dots").attr("clip-path", "url(#clip)"); 449 this.svg.selectAll(".chart-dots").attr("clip-path", "url(#clip)");
455 this.svg 450 this.svg
456 .selectAll(".chart-dots .chart-dot") 451 .selectAll(".chart-dots .chart-dot")
452 .attr("fill", "steelblue")
453 .attr("stroke", "steelblue")
457 .attr("stroke-opacity", 0) 454 .attr("stroke-opacity", 0)
458 .attr("stroke", "steelblue")
459 .style("pointer-events", "none") 455 .style("pointer-events", "none")
460 .transition() 456 .transition()
461 .attr("fill-opacity", "0.1s"); 457 .attr("fill-opacity", "0.1s");
462 this.svg 458 this.svg
463 .selectAll(".chart-tooltip") 459 .selectAll(".chart-tooltip")