plotly / react-chart-editor

Customizable React-based editor panel for Plotly charts
https://plotly.github.io/react-chart-editor/
MIT License
504 stars 105 forks source link

Translation for Editor #1166

Open WillyKirchner opened 2 years ago

WillyKirchner commented 2 years ago

Hey guys, first of all thank you for this great library, it helps a lot. I wonder if there is a way to translate the editor. Plotly itself is very easy to translate via the config prop. I've searched and tried a bit, but the locale prop of the editor doesn't seem to be working (this was already mentioned in this ticket: https://github.com/plotly/react-chart-editor/issues/475). I've tried "xx" as locale, but unfortunately it didn't work (here's the codesandbox that i used: https://codesandbox.io/s/gracious-jones-chyck9).
to summon it:

  1. I'd like to choose a language like e.g. german or chinese
  2. use my own translation dictionaries
WillyKirchner commented 2 years ago

I found out how this works. Here is the code to use:

<PlotlyEditor
          data={this.state.data}
          layout={this.state.layout}
          config={config}
          frames={this.state.frames}
          dataSources={dataSources}
          dataSourceOptions={dataSourceOptions}
          plotly={plotly}
          locale={"de"}
          dictionaries={{ de: { "Trace":"Testtrace", "Trace your data.": "Testtrace something" } }}
          onUpdate={(data, layout, frames) =>
            this.setState({ data, layout, frames })
          }
          useResizeHandler
          debug
          advancedTraceTypeSelector
/>

Important is to use the locale prop and dictionaries prop.

WillyKirchner commented 2 years ago

There is a Problem with the translation key file. The keys have spaces after them, which won't let you know if you need a space in the key(for example https://github.com/plotly/react-chart-editor/blob/c0586bb43f381bb6794050394982c76728fff050/scripts/translationKeys/translation-keys.txt#L253). This could possibly be resolved by replacing the spaces with tabs and only using spaces when necessary for the key.