- These scores represent how browser engines are doing in 15 focus areas
- and 3 joint investigation efforts.
-
+
How are these scores calculated?
-
-
-
- |
- [[item.description]]
- |
- [[getBrowserScoreForFeature(0, item.id, stable)]] |
- [[getBrowserScoreForFeature(1, item.id, stable)]] |
- [[getBrowserScoreForFeature(2, item.id, stable)]] |
-
-
-
-
-
- |
- [[item.description]]
- |
- [[getBrowserScoreForFeature(0, item.id, stable)]] |
- [[getBrowserScoreForFeature(1, item.id, stable)]] |
- [[getBrowserScoreForFeature(2, item.id, stable)]] |
-
+
-
-
- | Editing, contenteditable, and execCommand |
- 0% |
-
-
- | Pointer and Mouse Events |
- 0% |
-
-
- | Viewport Measurement |
- 0% |
-
| TOTAL |
- [[getBrowserScoreTotal(0, stable)]] |
- [[getBrowserScoreTotal(1, stable)]] |
- [[getBrowserScoreTotal(2, stable)]] |
+ [[totalChromium]] |
+ [[totalFirefox]] |
+ [[totalSafari]] |
@@ -593,16 +518,15 @@ class Interop2022 extends PolymerElement {
@@ -617,10 +541,11 @@ class Interop2022 extends PolymerElement {
-
-
+
+
`;
}
-
static get is() {
- return 'interop-2022';
+ return 'interop-dashboard';
}
static get properties() {
return {
+ year: String,
embedded: Boolean,
stable: Boolean,
feature: String,
features: {
type: Array,
- value() {
- return Object.entries(FEATURES).map(([id, info]) => {
- return Object.assign({ id }, info);
- });
- }
+ notify: true
},
dataManager: Object,
scores: Object,
+ totalChromium: {
+ type: String,
+ value: '0%'
+ },
+ totalFirefox: {
+ type: String,
+ value: '0%'
+ },
+ totalSafari: {
+ type: String,
+ value: '0%'
+ },
};
}
static get observers() {
return [
'updateUrlParams(embedded, stable, feature)',
+ 'updateTotals(features, stable)'
];
}
@@ -669,18 +613,22 @@ class Interop2022 extends PolymerElement {
const params = (new URL(document.location)).searchParams;
this.stable = params.get('stable') !== null;
- this.dataManager = new Interop2022DataManager();
+ this.dataManager = new InteropDataManager(this.year);
this.scores = {};
this.scores.experimental = await this.dataManager.getMostRecentScores(false);
this.scores.stable = await this.dataManager.getMostRecentScores(true);
+
+ this.features = Object.entries(this.getYearProp('focusAreas'))
+ .map(([id, info]) => Object.assign({ id }, info));
+
super.ready();
this.embedded = params.get('embedded') !== null;
// The default view of the page is the summary scores graph for
// experimental releases of browsers.
- this.feature = params.get('feature') || SUMMARY_FEATURE_NAME;
+ this.feature = params.get('feature') || this.getYearProp('summaryFeatureName');
this.$.featureSelect.value = this.feature;
this.$.featureSelect.addEventListener('change', () => {
@@ -696,7 +644,7 @@ class Interop2022 extends PolymerElement {
}
featureLinks(feature) {
- const data = FEATURES[feature];
+ const data = this.getYearProp('focusAreas')[feature];
return [
{ text: 'Spec', href: data?.spec },
{ text: 'MDN', href: data?.mdn },
@@ -704,9 +652,20 @@ class Interop2022 extends PolymerElement {
];
}
- computeFilter(year) {
- const prefix = `interop-${year}-`;
- return (feature) => feature.id.startsWith(prefix);
+ filterGroupSections() {
+ return (section) => !section.score_as_group;
+ }
+
+ getRowInfo(name, prop) {
+ return this.getYearProp('focusAreas')[name][prop];
+ }
+
+ showBrowserIcons(index) {
+ return index === 0;
+ }
+
+ showNoOtherColumns(scoreAsGroup, index) {
+ return !scoreAsGroup && !this.showBrowserIcons(index);
}
getBrowserScoreForFeature(browserIndex, feature) {
@@ -716,7 +675,32 @@ class Interop2022 extends PolymerElement {
}
getBrowserScoreTotal(browserIndex) {
- return this.getBrowserScoreForFeature(browserIndex, SUMMARY_FEATURE_NAME);
+ return this.totals[browserIndex];
+ }
+
+ getAllYears() {
+ const firstYear = 2021;
+ const currentYear = new Date().getFullYear();
+ const years = [];
+ for (let i = firstYear; i <= currentYear; i++) {
+ years.push(i.toString());
+ }
+ return years;
+ }
+
+ getYearProp(prop) {
+ return this.dataManager.getYearProp(prop);
+ }
+
+ updateTotals(features) {
+ if (!features) {
+ return;
+ }
+
+ const summaryFeatureName = this.getYearProp('summaryFeatureName');
+ this.totalChromium = this.getBrowserScoreForFeature(0, summaryFeatureName);
+ this.totalFirefox = this.getBrowserScoreForFeature(1, summaryFeatureName);
+ this.totalSafari = this.getBrowserScoreForFeature(2, summaryFeatureName);
}
updateUrlParams(embedded, stable, feature) {
@@ -726,7 +710,7 @@ class Interop2022 extends PolymerElement {
}
const params = [];
- if (feature && feature !== SUMMARY_FEATURE_NAME) {
+ if (feature && feature !== this.getYearProp('summaryFeatureName')) {
params.push(`feature=${feature}`);
}
if (stable) {
@@ -769,9 +753,9 @@ class Interop2022 extends PolymerElement {
this.$.toggleExperimental.setAttribute('aria-pressed', false);
}
}
-window.customElements.define(Interop2022.is, Interop2022);
+window.customElements.define(InteropDashboard.is, InteropDashboard);
-class Interop2022Summary extends PolymerElement {
+class InteropSummary extends PolymerElement {
static get template() {
return html`
@@ -904,11 +888,13 @@ class Interop2022Summary extends PolymerElement {
}
static get is() {
- return 'interop-2022-summary';
+ return 'interop-summary';
}
static get properties() {
return {
+ year: String,
+ dataManager: Object,
scores: Object,
stable: {
type: Boolean,
@@ -922,13 +908,14 @@ class Interop2022Summary extends PolymerElement {
}
async updateSummaryScores() {
- let numbers = this.$.summaryContainer.querySelectorAll('.summary-number');
+ let numbers = this.shadowRoot.querySelectorAll('.summary-number');
const scores = this.stable ? this.scores.stable : this.scores.experimental;
if (numbers.length !== scores.length) {
throw new Error(`Mismatched number of browsers/scores: ${numbers.length} vs. ${this.scores.length}`);
}
for (let i = 0; i < scores.length; i++) {
- let score = Math.floor(scores[i][SUMMARY_FEATURE_NAME] / 10);
+ const summaryFeatureName = this.dataManager.getYearProp('summaryFeatureName');
+ let score = Math.floor(scores[i][summaryFeatureName] / 10);
let curScore = numbers[i].innerText;
new CountUp(numbers[i], score, {
startVal: curScore === '--' ? 0 : curScore
@@ -955,13 +942,13 @@ class Interop2022Summary extends PolymerElement {
return ['#ee2b2b', '#ff050526'];
}
}
-window.customElements.define(Interop2022Summary.is, Interop2022Summary);
+window.customElements.define(InteropSummary.is, InteropSummary);
-// Interop2022FeatureChart is a wrapper around a Google Charts chart. We cannot
+// InteropFeatureChart is a wrapper around a Google Charts chart. We cannot
// use the polymer google-chart element as it does not support setting tooltip
// actions, which we rely on to let users load a changelog between subsequent
// versions of the same browser.
-class Interop2022FeatureChart extends PolymerElement {
+class InteropFeatureChart extends PolymerElement {
static get template() {
return html`
- 
- 
- 
- 
- 
+ 
+ 
+