├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── exo-2-latin-400.woff2
├── index.html
├── package.json
├── rename.sh
├── rollup.config.js
├── script
├── gauge.js
├── main.js
├── math.js
├── metrics.js
└── util.js
├── style.css
├── vercel.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | dist
4 |
5 | calc.js*
6 |
7 | stats.html
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "prettier.printWidth": 130
3 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Lighthouse Scoring Calculator
2 | -------------------
3 |
4 | [googlechrome.github.io/lighthouse/scorecalc/](https://googlechrome.github.io/lighthouse/scorecalc/)
5 |
6 |
7 | 
8 |
--------------------------------------------------------------------------------
/exo-2-latin-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/paulirish/lh-scorecalc/05fc1c5a4e779e4801163dfc15bbcaa523db436a/exo-2-latin-400.woff2
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Lighthouse Scoring calculator
5 |
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
50 |
51 | Lighthouse Scoring Calculator
52 |
53 |
54 |
55 |
56 |
57 |
66 |
67 |
68 |
69 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lh-scorecalc",
3 | "version": "1.0.0",
4 | "description": "wassup ===========",
5 | "main": "math.js",
6 | "scripts": {
7 | "watch": "find . script -depth 1 -type f | entr yarn build",
8 | "build": "rollup -c",
9 | "clean": "rm -rf dist",
10 | "deploy:ghpages": "yarn gh-pages --dist dist --repo git@github.com:GoogleChrome/lighthouse.git --dest scorecalc --add --message scorecalc-update",
11 | "deploy:copy": "mkdir -p dist && cp -r index.html *.css calc.* dist",
12 | "deploy": "yarn clean && yarn build && yarn deploy:copy && yarn deploy:ghpages",
13 | "test": "echo \"Error: no test specified\" && exit 1"
14 | },
15 | "keywords": [],
16 | "author": "",
17 | "license": "ISC",
18 | "devDependencies": {
19 | "gh-pages": "^5.0.0",
20 | "rollup": "^2.45.2",
21 | "rollup-plugin-commonjs": "^10.1.0",
22 | "rollup-plugin-node-resolve": "^5.2.0",
23 | "rollup-plugin-visualizer": "^5.4.1"
24 | },
25 | "dependencies": {
26 | "@rollup/plugin-buble": "^0.21.3",
27 | "preact": "^10.4.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/rename.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | git filter-branch --env-filter '
4 |
5 | OLD_EMAIL="none"
6 | CORRECT_NAME="Paul Irish"
7 | CORRECT_EMAIL="commits@paul.irish"
8 |
9 | if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
10 | then
11 | export GIT_COMMITTER_NAME="$CORRECT_NAME"
12 | export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
13 | fi
14 | if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
15 | then
16 | export GIT_AUTHOR_NAME="$CORRECT_NAME"
17 | export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
18 | fi
19 | ' a5b7254bc3cdc7dc50b49b3d86c153614d183a82...91f7df52bf211c99b164e8b2f56221f074a85fa9
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | // rollup.config.js
2 | import resolve from 'rollup-plugin-node-resolve';
3 | import commonjs from 'rollup-plugin-commonjs';
4 | import buble from '@rollup/plugin-buble';
5 | import { visualizer } from 'rollup-plugin-visualizer';
6 |
7 |
8 | export default {
9 | input: 'script/main.js',
10 | output: {
11 | file: 'calc.js',
12 | format: 'es',
13 | sourcemap: true,
14 | },
15 | plugins: [
16 | resolve(),
17 | buble({
18 | jsx: 'h',
19 | objectAssign: 'Object.assign',
20 | target: { chrome: 71, safari: 11.1, firefox: 64 }, // roughly disable ES feature transpilation
21 | }),
22 | commonjs(),
23 | visualizer(), // build and view stats.html
24 | ]
25 | };
--------------------------------------------------------------------------------
/script/gauge.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /* Most of the impressive code here authored by Ana Tudor, Nov 2019 */
4 |
5 | import {calculateRating} from './util.js';
6 |
7 | const delay = delay => new Promise(resolve => setTimeout(resolve, delay));
8 |
9 | export function updateGauge(wrapper, category) {
10 | _setPerfGaugeExplodey(wrapper, category);
11 | }
12 |
13 | function _determineTrig(sizeSVG, percent, strokeWidth) {
14 | strokeWidth = strokeWidth || sizeSVG / 32;
15 |
16 | const radiusInner = sizeSVG / strokeWidth;
17 | const strokeGap = 0.5 * strokeWidth;
18 | const radiusOuter = radiusInner + strokeGap + strokeWidth;
19 |
20 | const circumferenceInner = 2 * Math.PI * radiusInner;
21 | // arc length we need to subtract
22 | // for very small strokeWidth:radius ratios this is ≈ strokeWidth
23 | // angle = acute angle of isosceles △ with 2 edges equal to radius & 3rd equal to strokeWidth
24 | // angle formula given by law of cosines
25 | const endDiffInner = Math.acos(1 - 0.5 * Math.pow((0.5 * strokeWidth) / radiusInner, 2)) * radiusInner;
26 |
27 | const circumferenceOuter = 2 * Math.PI * radiusOuter;
28 | const endDiffOuter = Math.acos(1 - 0.5 * Math.pow((0.5 * strokeWidth) / radiusOuter, 2)) * radiusOuter;
29 |
30 | return {
31 | radiusInner,
32 | radiusOuter,
33 | circumferenceInner,
34 | circumferenceOuter,
35 | getArcLength: _ => Math.max(0, +(percent * circumferenceInner - 2 * endDiffInner).toFixed(4)),
36 | // isButt case is for metricArcHoverTarget
37 | getMetricArcLength: (weightingPct, isButt) => {
38 | // TODO: this math isn't perfect butt it's very close.
39 | const linecapFactor = isButt ? 0 : 2 * endDiffOuter;
40 | return Math.max(0, +(weightingPct * circumferenceOuter - strokeGap - linecapFactor).toFixed(4));
41 | },
42 | endDiffInner,
43 | endDiffOuter,
44 | strokeWidth,
45 | strokeGap,
46 | };
47 | }
48 |
49 | /**
50 | * @param {HTMLAnchorElement} wrapper
51 | * @param {LH.ReportResult.Category} category
52 | */
53 | function _setPerfGaugeExplodey(wrapper, category) {
54 | const sizeSVG = 128;
55 | const offsetSVG = -0.5 * sizeSVG;
56 |
57 | const percent = Number(category.score);
58 | const {
59 | radiusInner,
60 | radiusOuter,
61 | circumferenceInner,
62 | circumferenceOuter,
63 | getArcLength,
64 | getMetricArcLength,
65 | endDiffInner,
66 | endDiffOuter,
67 | strokeWidth,
68 | strokeGap,
69 | } = _determineTrig(sizeSVG, percent);
70 |
71 | const SVG = wrapper.querySelector('.lh-gauge');
72 | const NS_URI = 'http://www.w3.org/2000/svg';
73 |
74 | SVG.setAttribute('viewBox', [offsetSVG, offsetSVG, sizeSVG, sizeSVG].join(' '));
75 | SVG.style.setProperty('--stroke-width', `${strokeWidth}px`);
76 | SVG.style.setProperty('--circle-meas', 2 * Math.PI.toFixed(4));
77 |
78 | const groupOuter = wrapper.querySelector('.lh-gauge__outer');
79 | const groupInner = wrapper.querySelector('.lh-gauge__inner');
80 | const cover = groupOuter.querySelector('.cover');
81 | const gaugeArc = groupInner.querySelector('.lh-gauge__arc');
82 | const gaugePerc = groupInner.querySelector('.lh-gauge__percentage');
83 |
84 | groupOuter.style.setProperty('--scale-initial', radiusInner / radiusOuter);
85 | groupOuter.style.setProperty('--radius', `${radiusOuter}px`);
86 | cover.style.setProperty('--radius', `${0.5 * (radiusInner + radiusOuter)}px`);
87 | cover.setAttribute('stroke-width', strokeGap);
88 | SVG.style.setProperty('--radius', `${radiusInner}px`);
89 |
90 | gaugeArc.setAttribute('stroke-dasharray', `${getArcLength()} ${(circumferenceInner - getArcLength()).toFixed(4)}`);
91 | gaugeArc.setAttribute('stroke-dashoffset', 0.25 * circumferenceInner - endDiffInner);
92 |
93 | gaugePerc.textContent = Math.round(percent * 100);
94 |
95 | const radiusTextOuter = radiusOuter + strokeWidth;
96 | const radiusTextInner = radiusOuter - strokeWidth;
97 |
98 | const metrics = category.auditRefs.filter(r => r.group === 'metrics' && r.weight);
99 | const totalWeight = metrics.reduce((sum, each) => (sum += each.weight), 0);
100 | let offsetAdder = 0.25 * circumferenceOuter - endDiffOuter - 0.5 * strokeGap;
101 | let angleAdder = -0.5 * Math.PI;
102 |
103 | // Extra hack on top of the HACK for element reuse below. Delete any metric elems that aren't needed anymore (happens when the same gauge goes from v5 to v6)
104 | groupOuter.querySelectorAll('.metric').forEach(metricElem => {
105 | const classNamesToRetain = metrics.map(metric => `metric--${metric.id}`);
106 | const match = classNamesToRetain.find(selector => metricElem.classList.contains(selector));
107 | if (!match) metricElem.remove();
108 | });
109 |
110 | metrics.forEach((metric, i) => {
111 | // TODO(porting to real LHR..): in scorecalc we dont use the real audit ID just the acronym.
112 | const alias = metric.id;
113 |
114 | // Hack
115 | const needsDomPopulation = !groupOuter.querySelector(`.metric--${alias}`);
116 |
117 | // HACK:This isn't ideal but it was quick. Create element during initialization or reuse existing during updates
118 | const metricGroup = groupOuter.querySelector(`.metric--${alias}`) || document.createElementNS(NS_URI, 'g');
119 | const metricArcMax = groupOuter.querySelector(`.metric--${alias} .lh-gauge--faded`) || document.createElementNS(NS_URI, 'circle');
120 | const metricArc = groupOuter.querySelector(`.metric--${alias} .lh-gauge--miniarc`) || document.createElementNS(NS_URI, 'circle');
121 | const metricArcHoverTarget = groupOuter.querySelector(`.metric--${alias} .lh-gauge-hover`) || document.createElementNS(NS_URI, 'circle');
122 | const metricLabel = groupOuter.querySelector(`.metric--${alias} .metric__label`) || document.createElementNS(NS_URI, 'text');
123 | const metricValue = groupOuter.querySelector(`.metric--${alias} .metric__value`) || document.createElementNS(NS_URI, 'text');
124 |
125 | metricGroup.classList.add('metric', `metric--${alias}`);
126 | metricArcMax.classList.add('lh-gauge__arc', 'lh-gauge__arc--metric', 'lh-gauge--faded');
127 | metricArc.classList.add('lh-gauge__arc', 'lh-gauge__arc--metric', 'lh-gauge--miniarc');
128 | metricArcHoverTarget.classList.add('lh-gauge__arc', 'lh-gauge__arc--metric', 'lh-gauge--faded', 'lh-gauge-hover');
129 |
130 | const weightingPct = metric.weight / totalWeight;
131 | const metricLengthMax = getMetricArcLength(weightingPct);
132 | const metricPercent = metric.result.score * weightingPct;
133 | const metricLength = getMetricArcLength(metricPercent);
134 | const metricOffset = weightingPct * circumferenceOuter;
135 | const metricHoverLength = getMetricArcLength(weightingPct, true);
136 |
137 | metricGroup.style.setProperty('--metric-color', `var(--palette-${i})`);
138 | metricGroup.style.setProperty('--metric-offset', `${offsetAdder}`);
139 | metricGroup.style.setProperty('--i', i);
140 |
141 | metricArcMax.setAttribute('stroke-dasharray', `${metricLengthMax} ${circumferenceOuter - metricLengthMax}`);
142 | metricArc.style.setProperty('--metric-array', `${metricLength} ${circumferenceOuter - metricLength}`);
143 | metricArcHoverTarget.setAttribute('stroke-dasharray', `${metricHoverLength} ${circumferenceOuter - metricHoverLength - endDiffOuter}`);
144 |
145 | metricLabel.classList.add('metric__label');
146 | metricValue.classList.add('metric__value');
147 | metricLabel.textContent = alias;
148 | metricValue.textContent = `+${Math.round(metricPercent * 100)}`;
149 |
150 | const midAngle = angleAdder + weightingPct * Math.PI;
151 | const cos = Math.cos(midAngle);
152 | const sin = Math.sin(midAngle);
153 |
154 | // only set non-default alignments
155 | switch (true) {
156 | case cos > 0:
157 | metricValue.setAttribute('text-anchor', 'end');
158 | break;
159 | case cos < 0:
160 | metricLabel.setAttribute('text-anchor', 'end');
161 | break;
162 | case cos === 0:
163 | metricLabel.setAttribute('text-anchor', 'middle');
164 | metricValue.setAttribute('text-anchor', 'middle');
165 | break;
166 | }
167 |
168 | switch (true) {
169 | case sin > 0:
170 | metricLabel.setAttribute('dominant-baseline', 'hanging');
171 | break;
172 | case sin < 0:
173 | metricValue.setAttribute('dominant-baseline', 'hanging');
174 | break;
175 | case sin === 0:
176 | metricLabel.setAttribute('dominant-baseline', 'middle');
177 | metricValue.setAttribute('dominant-baseline', 'middle');
178 | break;
179 | }
180 |
181 | metricLabel.setAttribute('x', (radiusTextOuter * cos).toFixed(2));
182 | metricLabel.setAttribute('y', (radiusTextOuter * sin).toFixed(2));
183 | metricValue.setAttribute('x', (radiusTextInner * cos).toFixed(2));
184 | metricValue.setAttribute('y', (radiusTextInner * sin).toFixed(2));
185 |
186 | if (needsDomPopulation) {
187 | metricGroup.appendChild(metricArcMax);
188 | metricGroup.appendChild(metricArc);
189 | metricGroup.appendChild(metricArcHoverTarget);
190 | metricGroup.appendChild(metricLabel);
191 | metricGroup.appendChild(metricValue);
192 | groupOuter.appendChild(metricGroup);
193 | }
194 |
195 | offsetAdder -= metricOffset;
196 | angleAdder += weightingPct * 2 * Math.PI;
197 | });
198 |
199 | // Hack. Not ideal.
200 | if (SVG.dataset.listenersSetup) return;
201 | SVG.dataset.listenersSetup = true;
202 |
203 | // peekGauge(SVG);
204 |
205 | /*
206 | wrapper.state-expanded: gauge is exploded
207 | wrapper.state-highlight: gauge is exploded and one of the metrics is being highlighted
208 | metric.metric-highlight: highlight this particular metric
209 | */
210 | SVG.addEventListener('mouseover', e => {
211 | // if hovering on the SVG and its expanded, get rid of everything
212 | if (e.target === SVG && wrapper.classList.contains('state--expanded')) {
213 | // paul: not sure why we want to remove this.. seems like we want to keep it expanded...
214 | SVG.classList.remove('state--expanded');
215 |
216 | if (SVG.classList.contains('state--highlight')) {
217 | SVG.classList.remove('state--highlight');
218 | SVG.querySelector('.metric--highlight').classList.remove('metric--highlight');
219 | }
220 | return;
221 | }
222 |
223 | const parent = e.target.parentNode;
224 |
225 | // if hovering on a metric, highlight that one.
226 | // TODO: The hover target is a little small. ideally it's thicker.
227 | if (parent && parent.classList && parent.classList.contains('metric')) {
228 | // match the bg color of the gauge during a metric highlight
229 | wrapper.style.setProperty('--color-highlight', `var(--palette-${parent.style.getPropertyValue('--i')})`);
230 |
231 | if (!SVG.classList.contains('state--highlight')) {
232 | SVG.classList.add('state--highlight');
233 | parent.classList.add('metric--highlight');
234 | } else {
235 | const highlighted = SVG.querySelector('.metric--highlight');
236 |
237 | if (highlighted && parent !== highlighted) {
238 | highlighted.classList.remove('metric--highlight');
239 | parent.classList.add('metric--highlight');
240 | }
241 | }
242 | }
243 | });
244 |
245 | // clear on mouselave even if mousemove didn't catch it.
246 | SVG.addEventListener('mouseleave', e => {
247 | SVG.classList.remove('state--highlight');
248 | const mh = SVG.querySelector('.metric--highlight');
249 | mh && mh.classList.remove('metric--highlight');
250 | });
251 |
252 | // On the first run, tease with a little peek reveal
253 | async function peekGauge(SVG) {
254 | // Delay just a tad to let the user aclimatize beforehand.
255 | await delay(1000);
256 |
257 | // To visually get the outer ring to peek on the edge, we need the inner ring on top. This is SVG's equivalent to `innerElem.zIndex = 100`
258 | const inner = SVG.querySelector('.lh-gauge__inner');
259 | let id = `uniq-${Math.random()}`;
260 | inner.setAttribute('id', id);
261 | const useElem = document.createElementNS(NS_URI, 'use');
262 | useElem.setAttribute('href', `#${id}`);
263 | // for paint order this must come _after_ the outer.
264 | SVG.appendChild(useElem);
265 |
266 | const peekDurationSec = 2.5;
267 | SVG.style.setProperty('--peek-dur', `${peekDurationSec}s`);
268 | SVG.classList.add('state--peek', 'state--expanded');
269 |
270 | // Fancy double cleanup
271 | const cleanup = _ => SVG.classList.remove('state--peek', 'state--expanded') || useElem.remove();
272 | const tId = setTimeout(_ => {
273 | SVG.removeEventListener('mouseenter', handleEarlyInteraction);
274 | cleanup();
275 | }, peekDurationSec * 1000 * 1.5); // lil extra time just cuz
276 | function handleEarlyInteraction() {
277 | clearTimeout(tId);
278 | cleanup();
279 | }
280 | SVG.addEventListener('mouseenter', handleEarlyInteraction, {once: true});
281 | }
282 | }
283 |
--------------------------------------------------------------------------------
/script/main.js:
--------------------------------------------------------------------------------
1 | import { h, render, createRef, Component } from 'preact';
2 | import { QUANTILE_AT_VALUE, VALUE_AT_QUANTILE } from './math.js';
3 | import { $, NBSP, numberFormatter, calculateRating, arithmeticMean } from './util.js';
4 | import { metrics, scoringGuides } from './metrics.js';
5 | import { updateGauge } from './gauge.js';
6 |
7 | const params = new URLSearchParams(location.hash.substr(1));
8 |
9 | function determineMinMax(metricScoring) {
10 | const valueAtScore100 = VALUE_AT_QUANTILE(metricScoring, 0.995);
11 | const valueAtScore5 = VALUE_AT_QUANTILE(metricScoring, 0.05);
12 |
13 | let min = Math.floor(valueAtScore100 / 1000) * 1000;
14 | let max = Math.ceil(valueAtScore5 / 1000) * 1000;
15 | let step = 10;
16 |
17 | // Special handling for CLS
18 | if (metricScoring.units === 'unitless') {
19 | min = 0;
20 | max = Math.ceil(valueAtScore5 * 100) / 100;
21 | step = 0.01;
22 | }
23 |
24 | return {
25 | min,
26 | max,
27 | step,
28 | };
29 | }
30 |
31 | /**
32 | * @param {string} version
33 | */
34 | function getMajorVersion(version) {
35 | return version.split('.')[0];
36 | }
37 |
38 | class Metric extends Component {
39 | onValueChange(e) {
40 | const {id} = this.props;
41 |
42 | this.props.app.setState({
43 | metricValues: {
44 | ...this.props.app.state.metricValues,
45 | [id]: e.target.valueAsNumber,
46 | },
47 | });
48 | }
49 |
50 | onScoreChange(e) {
51 | const {id, metricScoring} = this.props;
52 |
53 | const score = e.target.valueAsNumber;
54 | let computedValue = VALUE_AT_QUANTILE(metricScoring, score / 100);
55 |
56 | // Clamp because we can end up with Infinity
57 | const { min, max } = determineMinMax(metricScoring);
58 | computedValue = Math.max(Math.min(computedValue, max), min);
59 |
60 | if (metricScoring.units !== 'unitless') {
61 | computedValue = Math.round(computedValue);
62 | }
63 |
64 | this.props.app.setState({
65 | metricValues: {
66 | ...this.props.app.state.metricValues,
67 | [id]: computedValue,
68 | },
69 | });
70 | }
71 |
72 | render({ id, value, score, weightMax, metricScoring }) {
73 | const { min, max, step } = determineMinMax(metricScoring, id);
74 | const weight = metricScoring.weight;
75 | const valueFormatted = metricScoring.units === 'unitless' ?
76 | value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) :
77 | // TODO: Use https://github.com/tc39/proposal-unified-intl-numberformat#i-units when Safari/FF support it
78 | `${numberFormatter.format(value)}${NBSP}ms`;
79 | const weightFormatted = (weight * 100).toLocaleString(undefined, {maximumFractionDigits: 1});
80 |
81 | return
82 | |
83 |
84 | |
85 | {`${id} (${metricScoring.name})`} |
86 |
87 | this.onValueChange(e)} />
88 |
89 | |
90 | |
91 |
92 |
93 | this.onScoreChange(e)} />
94 |
95 | |
96 |
97 |
98 | {weightFormatted}%
99 | |
100 |
101 | }
102 | }
103 |
104 | class Gauge extends Component {
105 | constructor(props) {
106 | super(props);
107 | this.ref = createRef();
108 | }
109 |
110 | refreshGauge() {
111 | updateGauge(this.ref.current, {
112 | title: 'Performance',
113 | auditRefs: this.props.auditRefs,
114 | id: 'performance',
115 | score: this.props.score,
116 | });
117 | }
118 |
119 | componentDidMount() {
120 | this.refreshGauge();
121 | }
122 |
123 | componentDidUpdate() {
124 | this.refreshGauge();
125 | }
126 |
127 | render({ score }) {
128 | return (
129 |
130 |
131 |
142 |
143 |
{name}
;
180 | if (name === 'v10') {
181 | title = ;
182 | } else if (name === 'v8') {
183 | title = ;
184 | } else if (name === 'v6') {
185 | title = ;
186 | }
187 |
188 | return
212 | }
213 | }
214 |
215 | const debounce = (callback, time = 250, interval) =>
216 | ((...args) => {
217 | clearTimeout(interval);
218 | interval = setTimeout(() => callback(...args), time);
219 | });
220 |
221 | class App extends Component {
222 | constructor(props) {
223 | super(props);
224 | this.state = getInitialState();
225 | this.onDeviceChange = this.onDeviceChange.bind(this);
226 | this.onVersionsChange = this.onVersionsChange.bind(this);
227 | // debounce to avoid flooding with new URLs
228 | this.debouncedUpdatePermalink = debounce(this.updatePermalink);
229 | }
230 |
231 | updatePermalink(state) {
232 | const {versions, device, metricValues} = state;
233 | const url = new URL(location.href);
234 | const auditIdValuePairs = Object.entries(metricValues).map(([id, value]) => {
235 | return [id, value];
236 | });
237 | const params = new URLSearchParams(auditIdValuePairs);
238 | params.set('device', device);
239 | for (const version of versions) params.append('version', version);
240 | url.hash = params.toString();
241 | history.replaceState(state, '', url.toString());
242 | }
243 |
244 | componentDidUpdate() {
245 | this.debouncedUpdatePermalink(this.state);
246 | }
247 |
248 | onDeviceChange(e) {
249 | this.setState({device: e.target.value});
250 | }
251 |
252 | onVersionsChange(e) {
253 | this.setState({versions: e.target.value.split(',')});
254 | }
255 |
256 | normalizeVersions(versions) {
257 | return versions.map(version => {
258 | version = parseInt(version, 10);
259 | if (version < 5) {
260 | throw new Error(`Unsupported Lighthouse version (${version})`);
261 | }
262 |
263 | switch (version) {
264 | default:
265 | case 12:
266 | case 11:
267 | case 10:
268 | return 10;
269 | case 9:
270 | case 8:
271 | return 8;
272 | case 7:
273 | case 6:
274 | return 6;
275 | }
276 | });
277 | }
278 |
279 | render() {
280 | const {versions, device, metricValues} = this.state;
281 |
282 | const normalizedVersions = this.normalizeVersions(versions);
283 |
284 | const scoringGuideEls = normalizedVersions.map(version => {
285 | const key = `v${version}`;
286 | console.assert(scoringGuides[key], `scoringGuide for ${key} doesnt exist`)
287 | return ;
288 | });
289 | return
290 |
291 |
297 |
306 |
307 | {scoringGuideEls}
308 |