v3 UI should use four sig-figs to label y-axis of the main charts
[WebKit.git] / Websites / perf.webkit.org / public / v3 / pages / page-with-charts.js
1
2 class PageWithCharts extends PageWithHeading {
3     constructor(name, toolbar)
4     {
5         super(name, toolbar);
6         this._charts = [];
7     }
8
9     static createChartSourceList(platformId, metricId)
10     {
11         var platform = Platform.findById(platformId);
12         var metric = Metric.findById(metricId);
13         if (!platform || !metric)
14             return {error: `Invalid platform or metric: ${platformId} and ${metricId}`};
15
16         var lastModified = platform.lastModified(metric);
17         if (!lastModified)
18             return {platform: platform, metric: metric, error: `No results on ${platform.name()}`};
19
20         var measurementSet = MeasurementSet.findSet(platform.id(), metric.id(), lastModified);
21         var sourceList = [
22             this.baselineStyle(measurementSet, 'baseline'),
23             this.targetStyle(measurementSet, 'target'),
24             this.currentStyle(measurementSet, 'current'),
25         ];
26
27         return {
28             platform: platform,
29             metric: metric,
30             sourceList: sourceList,
31         };
32     }
33
34     static baselineStyle(measurementSet)
35     {
36         return {
37             measurementSet: measurementSet,
38             extendToFuture: true,
39             sampleData: true,
40             type: 'baseline',
41             pointStyle: '#f33',
42             pointRadius: 2,
43             lineStyle: '#f99',
44             lineWidth: 1.5,
45             intervalStyle: '#fdd',
46             intervalWidth: 2,
47         };
48     }
49
50     static targetStyle(measurementSet)
51     {
52         return {
53             measurementSet: measurementSet,
54             extendToFuture: true,
55             sampleData: true,
56             type: 'target',
57             pointStyle: '#33f',
58             pointRadius: 2,
59             lineStyle: '#99f',
60             lineWidth: 1.5,
61             intervalStyle: '#ddf',
62             intervalWidth: 2,
63         };
64     }
65
66     static currentStyle(measurementSet)
67     {
68         return {
69             measurementSet: measurementSet,
70             sampleData: true,
71             type: 'current',
72             pointStyle: '#333',
73             pointRadius: 2,
74             lineStyle: '#999',
75             lineWidth: 1.5,
76             intervalStyle: '#ddd',
77             intervalWidth: 2,
78             interactive: true,
79         };
80     }
81
82     static dashboardOptions(valueFormatter)
83     {
84         return {
85             updateOnRequestAnimationFrame: true,
86             axis: {
87                 yAxisWidth: 4, // rem
88                 xAxisHeight: 2, // rem
89                 gridStyle: '#ddd',
90                 fontSize: 0.8, // rem
91                 valueFormatter: valueFormatter,
92             },
93         };
94     }
95
96     static overviewChartOptions(valueFormatter)
97     {
98         var options = this.dashboardOptions(valueFormatter);
99         options.axis.yAxisWidth = 0; // rem
100         options.selection = {
101             lineStyle: '#f93',
102             lineWidth: 2,
103             fillStyle: 'rgba(153, 204, 102, .125)',
104         }
105         return options;
106     }
107
108     static mainChartOptions(valueFormatter)
109     {
110         var options = this.dashboardOptions(valueFormatter);
111         options.axis.yAxisWidth = 5;
112         options.selection = {
113             lineStyle: '#f93',
114             lineWidth: 2,
115             fillStyle: 'rgba(153, 204, 102, .125)',
116         }
117         options.indicator = {
118             lineStyle: '#f93',
119             lineWidth: 2,
120             pointRadius: 3,
121         };
122         options.annotations = {
123             textStyle: '#000',
124             textBackground: '#fff',
125             minWidth: 3,
126             barHeight: 7,
127             barSpacing: 2,
128         };
129         return options;
130     }
131 }