visualization-experiments/paas.js at master · ledancs/visualization-experiments · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**
 * Created by andres on 1/14/15.
 */

function BoxAndDot (svgGroupId, measurement, width, height){
    this.measurement = measurement;
    this.svgGroup = document.getElementById(svgGroupId);
    this.width = width;
    this.height = height;
    this.margin = 1;
    this.SVGPointsPerUnitOfMeasurement = (this.width - 2 * this.margin)/(this.measurement.max - this.measurement.min);
    this.draw();
}

BoxAndDot.prototype.draw = function () {
    this.drawVerticalLine(0 + this.margin);
    this.drawVerticalLine(this.width - this.margin);
    this.drawBox();
    this.drawDot();
};

BoxAndDot.prototype.drawVerticalLine = function (x) {
    var line = document.createElementNS("http://www.w3.org/2000/svg", "line");

    line.setAttribute("x1", x.toString());

    var y1 = 0 + this.margin;
    line.setAttribute("y1", y1.toString());

    line.setAttribute("x2", x.toString());

    var y2 = this.height - this.margin;
    line.setAttribute("y2", y2.toString());

    line.setAttribute("stroke", "black");
    line.setAttribute("stroke-width", "2");

    this.minLine = line;
    this.svgGroup.appendChild(this.minLine);
};

BoxAndDot.prototype.drawBox = function () {
    var box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    var x = this.measurement.optimal.min - this.measurement.min;
    x *= this.SVGPointsPerUnitOfMeasurement;
    var width = this.measurement.optimal.max - this.measurement.optimal.min;
    width *= this.SVGPointsPerUnitOfMeasurement;
    var y = 0 + this.margin;
    var height = this.height - this.margin;

    box.setAttribute("x", x.toString());
    box.setAttribute("y", y.toString());
    box.setAttribute("width", width.toString());
    box.setAttribute("height", height.toString());

    box.setAttribute("fill", "grey");
    box.setAttribute("opacity", "0.5");

    this.box = box;
    this.svgGroup.appendChild(this.box);

};

BoxAndDot.prototype.drawDot = function () {
    var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    var radius = 5;

    var x = this.measurement.val - this.measurement.min;
    x *= this.SVGPointsPerUnitOfMeasurement;

    var y = this.height / 2;
    y += this.margin;
    y -= radius/2;

    dot.setAttribute("cx", x.toString());
    dot.setAttribute("cy", y.toString());
    dot.setAttribute("r", radius.toString());
    dot.setAttribute("stroke", "black");
    dot.setAttribute("stroke-width", "2");
    dot.setAttribute("fill", "white");

    this.dot = dot;
    this.svgGroup.appendChild(this.dot);


};