Improve test freshness page interaction experience.
[WebKit.git] / Websites / perf.webkit.org / public / v3 / components / freshness-indicator.js
1 class FreshnessIndicator extends ComponentBase {
2     constructor(lastDataPointDuration, testAgeTolerance, summary)
3     {
4         super('freshness-indicator');
5         this._lastDataPointDuration = lastDataPointDuration;
6         this._testAgeTolerance = testAgeTolerance;
7         this._highlighted = false;
8
9         this._renderIndicatorLazily = new LazilyEvaluatedFunction(this._renderIndicator.bind(this));
10     }
11
12     update(lastDataPointDuration, testAgeTolerance, highlighted)
13     {
14         this._lastDataPointDuration = lastDataPointDuration;
15         this._testAgeTolerance = testAgeTolerance;
16         this._highlighted = highlighted;
17         this.enqueueToRender();
18     }
19
20     render()
21     {
22         super.render();
23         this._renderIndicatorLazily.evaluate(this._lastDataPointDuration, this._testAgeTolerance, this._url, this._highlighted);
24
25     }
26
27     _renderIndicator(lastDataPointDuration, testAgeTolerance, url, highlighted)
28     {
29         const element = ComponentBase.createElement;
30         if (!lastDataPointDuration) {
31             this.renderReplace(this.content('container'), new SpinnerIcon);
32             return;
33         }
34
35         const hoursSinceLastDataPoint = this._lastDataPointDuration / 3600 / 1000;
36         const testAgeToleranceInHours = testAgeTolerance / 3600 / 1000;
37         const rating = 1 / (1 + Math.exp(Math.log(1.2) * (hoursSinceLastDataPoint - testAgeToleranceInHours)));
38         const hue = Math.round(120 * rating);
39         const brightness = Math.round(30 + 50 * rating);
40         const indicator = element('a', {id: 'cell', class: `${highlighted ? 'highlight' : ''}`});
41
42         indicator.style.backgroundColor = `hsl(${hue}, 100%, ${brightness}%)`;
43         this.renderReplace(this.content('container'), indicator);
44     }
45
46     static htmlTemplate()
47     {
48         return `<div id='container'></div>`;
49     }
50
51     static  cssTemplate()
52     {
53         return `
54             div {
55                 margin: auto;
56                 height: 1.8rem;
57                 width: 1.8rem;
58             }
59             a {
60                 display: block;
61                 height:1.6rem;
62                 width:1.6rem;
63                 border: 0.1rem;
64                 border-color: white;
65                 border-style: solid;
66                 padding: 0;
67             }
68
69             a.highlight {
70                 height: 1.4rem;
71                 width: 1.4rem;
72                 border: 0.2rem;
73                 border-style: solid;
74                 border-color: #0099ff;
75             }`;
76     }
77 }
78
79
80 ComponentBase.defineElement('freshness-indicator', FreshnessIndicator);