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