SimpleServiceStatusMonitor/d3-status-panel.js at master · cfalguiere/SimpleServiceStatusMonitor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function statusPanel(node) {

    var w = 500;
    var circleRadius = 14
    var verticalStep = 3 * circleRadius
    var verticalOffset = 25
    var h = dataset.length * verticalStep + verticalOffset

    var svg = d3.select(node)
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("circle1")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", 40)
        .attr("cy", function(d, i) {
                return (i * verticalStep) + verticalOffset;
            })
        .attr("r", circleRadius)
        .attr("fill", function(d) {
            if (d.status == 0) return "green"
            else return "red";
            });

/*
    svg.selectAll("circle2")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", 70)
        .attr("cy", function(d, i) {
                return (i * verticalStep) + verticalOffset;
            })
        .attr("r", circleRadius)
        .attr("fill", function(d) {
            if (d.status == 0) return "green"
            else return "red";
            });
  */

    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .attr("x", 70)
        .attr("y", function (d, i) {return (i *  verticalStep) + verticalOffset;})
        .attr("dy", ".35em")
        .text(function(d) { return d.protocol + " - " + d.value ; })
        .style("color","#DE3378");


}