diff --git a/i18n/en.toml b/i18n/en.toml index 99fd062ab0..a0fc7888c4 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -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)" diff --git a/layouts/shortcodes/plotly.html b/layouts/shortcodes/plotly.html index f300a9ffc2..1a63c3694e 100644 --- a/layouts/shortcodes/plotly.html +++ b/layouts/shortcodes/plotly.html @@ -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" }}" > diff --git a/static/js/stats.js b/static/js/stats.js index 90bb9c8fe9..4182814a7b 100644 --- a/static/js/stats.js +++ b/static/js/stats.js @@ -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 = []; @@ -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); }