Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Refactor the HTTPS-adoption-by-country plot to make it easy to add mo…
…re countries

Also, for fun, add India and Germany. But whatever, here's how we add others.
  • Loading branch information
jcjones committed May 7, 2024
commit bbf4993e6be7d6b9bf4e4e8f31cf5af3212c1386
6 changes: 6 additions & 0 deletions i18n/en.toml
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,12 @@ other = "USA users"
[graph_japan_users]
other = "Japan users"

[graph_india_users]
other = "Indian users"

[graph_germany_users]
other = "German users"

[graph_percent_https]
other = "Percent of Pageloads over HTTPS (14 day moving average)"

Expand Down
2 changes: 2 additions & 0 deletions layouts/shortcodes/plotly.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
data-all_users="{{ i18n "graph_all_users" }}"
data-usa_users="{{ i18n "graph_usa_users" }}"
data-japan_users="{{ i18n "graph_japan_users" }}"
data-india_users="{{ i18n "graph_india_users" }}"
data-germany_users="{{ i18n "graph_germany_users" }}"
data-percent_https="{{ i18n "graph_percent_https" }}"
></span>

Expand Down
21 changes: 10 additions & 11 deletions static/js/stats.js
Original file line number Diff line number Diff line change
Expand Up @@ -275,8 +275,14 @@ function doPlot() {
// Firefox telemetry (HTTP_PAGELOAD_IS_SSL) over time
function httpsPlot(dom) {

let traces = [];
let countries = [
{ "code": "US", "name": loc.usa_users, "line": { color: leOrange, dash: "dot" } },
{ "code": "JP", "name": loc.japan_users, "line": { color: someGreen, dash: "dash" } },
{ "code": "DE", "name": loc.germany_users, "line": { color: "#FF0000", dash: "dash" } },
{ "code": "IN", "name": loc.india_users, "line": { color: "#00F0F0", dash: "dot" } },
];

let traces = [];
{
let traceObj = { type: "scatter", x:[], y:[], name: loc.all_users, line: { color: leBlue } };
let stackMovingAvg = [];
Expand All @@ -286,17 +292,10 @@ function doPlot() {
}, stackMovingAvg);
traces.push(traceObj);
}
{
let traceObj = { type: "scatter", x:[], y:[], name: loc.usa_users, line: { color: leOrange, dash: "dot" } };
httpsDerivePageloadsFromNormalizedData(traceObj, (os, country) => {
return (country == "US");
});
traces.push(traceObj);
}
{
let traceObj = { type: "scatter", x:[], y:[], name: loc.japan_users, line: { color: someGreen, dash: "dash" } };
for (let country_idx in countries) {
let traceObj = { type: "scatter", x:[], y:[], name: countries[country_idx]["name"], line: countries[country_idx]["line"] };
httpsDerivePageloadsFromNormalizedData(traceObj, (os, country) => {
return (country == "JP");
return (country == countries[country_idx]["code"]);
});
traces.push(traceObj);
}
Expand Down