Summary page should show warnings when current or baseline data is missing.
[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 = null;
7         this._label = null;
8         this._shouldRender = true;
9         this._ratioBarGraph = this.content().querySelector('.ratio-bar-graph');
10     }
11
12     update(ratio, label, showWarningIcon)
13     {
14         console.assert(isNaN(ratio) || (ratio >= -1 && ratio <= 1));
15         this._ratio = ratio;
16         this._label = label;
17         this._showWarningIcon = showWarningIcon;
18         this._shouldRender = true;
19     }
20
21     render()
22     {
23         if (!this._shouldRender)
24             return;
25         this._shouldRender = false;
26         var element = ComponentBase.createElement;
27
28         var children = [element('div', {class: 'separator'})];
29         if (this._showWarningIcon) {
30             if (this._ratio && this._ratio < -0.4)
31                 this._ratioBarGraph.classList.add('warning-on-right');
32             else
33                 this._ratioBarGraph.classList.remove('warning-on-right');
34             children.push(new WarningIcon);
35         }
36
37         var barClassName = 'bar';
38         var labelClassName = 'label';
39         if (this._ratio) {
40             var ratioType = this._ratio > 0 ? 'better' : 'worse';
41             barClassName = [barClassName, ratioType].join(' ');
42             labelClassName = [labelClassName, ratioType].join(' ');
43             children.push(element('div', {class: barClassName, style: 'width:' + Math.min(Math.abs(this._ratio * 100), 50) + '%'}));
44         }
45         if (this._label)
46             children.push(element('div', {class: labelClassName}, this._label));
47
48         this.renderReplace(this._ratioBarGraph, children);
49     }
50
51     static htmlTemplate()
52     {
53         return `<div class="ratio-bar-graph"></div>`;
54     }
55
56     static cssTemplate()
57     {
58         return `
59             .ratio-bar-graph {
60                 position: relative;
61                 display: block;
62                 margin-left: auto;
63                 margin-right: auto;
64                 width: 10rem;
65                 height: 2.5rem;
66                 overflow: hidden;
67                 text-decoration: none;
68                 color: black;
69             }
70             .ratio-bar-graph warning-icon {
71                 position: absolute;
72                 display: block;
73                 top: 0;
74             }
75             .ratio-bar-graph:not(.warning-on-right) warning-icon {
76                 left: 0;
77             }
78             .ratio-bar-graph.warning-on-right warning-icon {
79                 transform: scaleX(-1);
80                 right: 0;
81             }
82             .ratio-bar-graph .separator {
83                 position: absolute;
84                 left: 50%;
85                 width: 0px;
86                 height: 100%;
87                 border-left: solid 1px #ccc;
88             }
89             .ratio-bar-graph .bar {
90                 position: absolute;
91                 left: 50%;
92                 top: 0.5rem;
93                 height: calc(100% - 1rem);
94                 background: #ccc;
95             }
96             .ratio-bar-graph .bar.worse {
97                 transform: translateX(-100%);
98                 background: #c33;
99             }
100             .ratio-bar-graph .bar.better {
101                 background: #3c3;
102             }
103             .ratio-bar-graph .label {
104                 position: absolute;
105                 line-height: 2.5rem;
106             }
107             .ratio-bar-graph .label.worse {
108                 text-align: left;
109                 left: calc(50% + 0.2rem);
110             }
111             .ratio-bar-graph .label.better {
112                 text-align: right;
113                 right: calc(50% + 0.2rem);
114             }
115         `;
116     }
117
118 }