70f9238ede1d9c05ee372265dc5d118565ad7c5d
[WebKit-https.git] / Websites / perf.webkit.org / public / v3 / components / ratio-bar-graph.js
1 class RatioBarGraph extends ComponentBase {
2
3     constructor()
4     {
5         super('ratio-bar-graph');
6         this._ratio = 0;
7         this._label = null;
8         this._shouldRender = true;
9         this._bar = this.content().querySelector('.bar');
10         this._labelContainer = this.content().querySelector('.label');
11     }
12
13     update(ratio, label)
14     {
15         console.assert(ratio >= -1 && ratio <= 1);
16         this._ratio = ratio;
17         this._label = label;
18         this._shouldRender = true;
19     }
20
21     render()
22     {
23         if (!this._shouldRender)
24             return;
25
26         var percent = Math.abs(this._ratio * 100);
27         this._labelContainer.textContent = this._label;
28         this._bar.style.width = Math.min(percent, 50) + '%';
29         this._bar.parentNode.className = 'ratio-bar-graph ' + (this._ratio > 0 ? 'better' : 'worse');
30
31         this._shouldRender = false;
32     }
33
34     static htmlTemplate()
35     {
36         return `<div class="ratio-bar-graph"><div class="seperator"></div><div class="bar"></div><div class="label"></div></div>`;
37     }
38
39     static cssTemplate()
40     {
41         return `
42             .ratio-bar-graph {
43                 position: relative;
44                 display: block;
45                 margin-left: auto;
46                 margin-right: auto;
47                 width: 10rem;
48                 height: 2.5rem;
49                 overflow: hidden;
50                 text-decoration: none;
51                 color: black;
52             }
53             .ratio-bar-graph .seperator {
54                 position: absolute;
55                 left: 50%;
56                 width: 0px;
57                 height: 100%;
58                 border-left: solid 1px #ccc;
59             }
60             .ratio-bar-graph .bar {
61                 position: absolute;
62                 left: 50%;
63                 top: 0.5rem;
64                 height: calc(100% - 1rem);
65                 background: #ccc;
66             }
67             .ratio-bar-graph.worse .bar {
68                 transform: translateX(-100%);
69                 background: #c33;
70             }
71             .ratio-bar-graph.better .bar {
72                 background: #3c3;
73             }
74             .ratio-bar-graph .label {
75                 position: absolute;
76                 line-height: 2.5rem;
77             }
78             .ratio-bar-graph.worse .label {
79                 text-align: left;
80                 left: calc(50% + 0.2rem);
81             }
82             .ratio-bar-graph.better .label {
83                 text-align: right;
84                 right: calc(50% + 0.2rem);
85             }
86         `;
87     }
88
89 }