i18n

Opening this for a discussion of i18n, both for this and for the public plotly.js repo.

There are a few different ways to accomplish this. In semi-pseudocode, the i18n function fundamentally looks like:

function _( key ) {
  if (key in dictionary) {
    return dictionary[key]
  } else {
    return key
  }
}

The input is the string itself, which has pros and cons. The dictionary looks like:

{
  "es": {
    "Trace": "Rastro",
    "Click to toggle visibility": "Haga clic para activar la visibilidad",
    ...etc
  },
  "ru": {
    ...
  }
}

You’d use this like:

_("Trace")

The downside is that “Trace” (nominative) and “Trace” (accusative) have different translations in some languages. If this were the case, you could be more explicit and make nontrivial use of an english dictionary to use keys instead of the strings themselves.

{
  "en": {
    "Trace label in style panel": "Trace"
  },
  "es": {
    "Trace label in style panel": "Rastro",
    "Click to toggle visibility": "Haga clic para activar la visibilidad",
    ...etc
  },
  "ru": {
    ...
  }
}

_("Trace label in the style panel")

Or maybe panels.style.trace or whatever you prefer. It’s a bit free-form.

At any rate, you’d pass in a dictionary which would get deep-merged into whatever default dictionaries plotly.js has built in. The fallback is builtin dictionary values or just a pass-through i18n function.

For plotly, the dictionary would be passed through config as, e.g. {"es": {...}} and the desired language would be specified as, e.g "language": "es". As in:

Plotly.plot(gd, {
  data: {...},
  config: {
    language: "es",
    dictionary: {
      es: {
        key: value
      }
    }
  }
})

(locale instead of language? dictionaries, plural? I at least like the idea of being able to pass multiple dictionaries in one parameter so that changing the language would be possible.)

For plotly.js it could also be possible to use Plotly.Register. As in:

Plotly.Register(require('plotly.js/dictionaries/en.json'))
Plotly.Register(require('plotly.js/dictionaries/es.json'))

Plotly.plot(gd, {config: {language: 'es'}})

For react components, the editor would probably receive a dictionary and expose it through context. All components would inherit from a base component that makes the dictionary available so that it’s not global and so that the dictionary doesn’t need to trickle down through props explicitly. Then instead of importing _, you’d inherit from the base component and have this._(...) automatically available.

/cc @bpostlethwaite @alexcjohnson @etpinard

[rreusser]

Ohh, lib, not src. Of course. Lots of files in a flat directory. Agreed.

[etpinard]

I’d keep it flat Plotly.register('plotly.js/lib/locale-en')