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 }