i18n: rating distribution chart

app/views/stat/ratingDistribution.scala

@@ -22,7 +22,13 @@ object ratingDistribution {
       embedJsUnsafe(s"""lichess.ratingDistributionChart(${
         safeJsonValue(Json.obj(
           "freq" -> data,
-          "myRating" -> ctx.me.map { me => me.perfs(perfType).intRating }
+          "myRating" -> ctx.me.map { me => me.perfs(perfType).intRating },
+          "i18n" -> i18nJsObject(List(
+            trans.players,
+            trans.yourRating,
+            trans.cumulative,
+            trans.glicko2Rating
+          ))
         ))
       })""")
     )

modules/i18n/src/main/I18nKeys.scala

@@ -583,6 +583,9 @@ val `weeklyPerfTypeRatingDistribution` = new Translated("weeklyPerfTypeRatingDis
 val `yourPerfTypeRatingIsRating` = new Translated("yourPerfTypeRatingIsRating", Site)
 val `youAreBetterThanPercentOfPerfTypePlayers` = new Translated("youAreBetterThanPercentOfPerfTypePlayers", Site)
 val `youDoNotHaveAnEstablishedPerfTypeRating` = new Translated("youDoNotHaveAnEstablishedPerfTypeRating", Site)
+val `yourRating` = new Translated("yourRating", Site)
+val `cumulative` = new Translated("cumulative", Site)
+val `glicko2Rating` = new Translated("glicko2Rating", Site)
 val `checkYourEmail` = new Translated("checkYourEmail", Site)
 val `weHaveSentYouAnEmailClickTheLink` = new Translated("weHaveSentYouAnEmailClickTheLink", Site)
 val `ifYouDoNotSeeTheEmailCheckOtherPlaces` = new Translated("ifYouDoNotSeeTheEmailCheckOtherPlaces", Site)

public/javascripts/chart/ratingDistribution.js

@@ -1,4 +1,5 @@
 lichess.ratingDistributionChart = function(data) {
+  const trans = lichess.trans(data.i18n);
   lichess.loadScript('javascripts/chart/common.js').done(function() {
     lichess.chartCommon('highchart').done(function() {
       var disabled = {
@@ -28,7 +29,7 @@ lichess.ratingDistributionChart = function(data) {
           credits: disabled,
           legend: disabled,
           series: [{
-            name: 'Frequency',
+            name: trans.noarg('players'),
             type: 'area',
             data: data.freq.map(function(nb, i) {
               return [ratingAt(i), nb];
@@ -49,12 +50,9 @@ lichess.ratingDistributionChart = function(data) {
             marker: {
               radius: 5
             },
-            lineWidth: 4,
-            tooltip: {
-              valueSuffix: ' players'
-            }
+            lineWidth: 4
           }, {
-            name: 'Cumulative',
+            name: trans.noarg('cumulative'),
             type: 'line',
             yAxis: 1,
             data: cumul.map(function(p, i) {
@@ -78,7 +76,7 @@ lichess.ratingDistributionChart = function(data) {
           xAxis: {
             type: 'category',
             title: {
-              text: 'Glicko2 Rating'
+              text: trans.noarg('glicko2Rating')
             },
             labels: {
               rotation: -45
@@ -89,7 +87,7 @@ lichess.ratingDistributionChart = function(data) {
               var right = v > 1800;
               return v ? [{
                 label: {
-                  text: 'Your rating',
+                  text: trans.noarg('yourRating'),
                   verticalAlign: 'top',
                   align: right ? 'right' : 'left',
                   y: 13,
@@ -108,14 +106,14 @@ lichess.ratingDistributionChart = function(data) {
           },
           yAxis: [{ // frequency
             title: {
-              text: 'Players'
+              text: trans.noarg('players')
             }
           }, { // cumulative
             min: 0,
             max: 100,
             gridLineWidth: 0,
             title: {
-              text: 'Cumulative'
+              text: trans.noarg('cumulative')
             },
             labels: {
               format: '{value}%'

translation/source/site.xml

@@ -704,6 +704,9 @@ computer analysis, game chat and shareable URL.</string>
   <string name="yourPerfTypeRatingIsRating">Your %1$s rating is %2$s.</string>
   <string name="youAreBetterThanPercentOfPerfTypePlayers">You are better than %1$s of %2$s players.</string>
   <string name="youDoNotHaveAnEstablishedPerfTypeRating">You do not have an established %s rating.</string>
+  <string name="yourRating">Your rating</string>
+  <string name="cumulative">Cumulative</string>
+  <string name="glicko2Rating">Glicko-2 rating</string>
   <string name="checkYourEmail">Check your Email</string>
   <string name="weHaveSentYouAnEmailClickTheLink">We've sent you an email. Click the link in the email to activate your account.</string>
   <string name="ifYouDoNotSeeTheEmailCheckOtherPlaces">If you don't see the email, check other places it might be, like your junk, spam, social, or other folders.</string>