Changing languages doesn't affect echarts charts.

[Atmostone]

Bug description

When you switch language in Superset, some charts still have untranslated buttons.
For example Pie chart has 'All' and 'Inv' buttons, that are always on English

How to reproduce the bug

1. Add Pie chart to your dashboard
2. Go to dashboard page
3. Change language to other than English
4. 'All' and 'Inv' buttons are not translated

Screenshots/recordings

Language set to Russian, buttons are on English:

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

I found a similar unsolved discussion: How to change locale in echarts ^[1].

Additionally, there is a closed issue that might be relevant: [SIP-60] Proposal to extend i18n support to charts ^[2]. The proposed solution includes extending i18n support to charts, which might help with translating the 'All' and 'Inv' buttons.

To ensure that the 'All' and 'Inv' buttons in a Pie chart are translated when changing the language in Superset, you need to add the corresponding translation entries in the messages.pot file. Here are the entries you need to add:

msgid "All"
msgstr ""

msgid "Inv"
msgstr ""

After adding these entries, you can provide the translations for each language in the respective .po files. For example, in the Russian translation file (superset/translations/ru/LC_MESSAGES/messages.po), you would add:

msgid "All"
msgstr "Все"

msgid "Inv"
msgstr "Инв"

This will ensure that the 'All' and 'Inv' buttons are translated appropriately when the language is changed in Superset ^[3][4].

To continue talking to Dosu, mention @dosu.

[Atmostone]

Well, seems like I just need to change one line in superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
from
chartRef.current = init(divRef.current);
to something like:
chartRef.current = init(divRef.current, undefined, { locale: 'RU' });
But I don't know how to get current locale in frontend. @dosu Do you know how to get it?

[dosubot]

To get the current locale in the Superset frontend, you can access it from the Redux state. The current locale is stored under state.common.locale. You can use the useSelector hook from react-redux to retrieve it.

Here's how you can modify your code in superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx to get the current locale and pass it to the init function:

import { useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import { use, init, EChartsType } from 'echarts/core';
import { ExplorePageState } from 'src/explore/types';

const Echart = () => {
  const divRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<EChartsType | null>(null);
  const locale = useSelector((state: ExplorePageState) => state?.common?.locale);

  useEffect(() => {
    if (!divRef.current) return;
    if (!chartRef.current) {
      chartRef.current = init(divRef.current, undefined, { locale });
    }

    // Your existing event handlers and options setup
  }, [locale]);

  return <div ref={divRef} />;
};

export default Echart;

This code retrieves the current locale from the Redux state and passes it to the init function when initializing the chart ^[1].

To continue talking to Dosu, mention @dosu.

[rusackas]

Thanks for looking into this, and hoping Dosu is setting you on the right path. I would assume there are LOTS of pieces in plugins that are not translated correctly. If you wind up opening a PR that fixes this, maybe it'll prove out as a reusable pattern to fix such things in other plugins, too. 🤞

[Atmostone]

Well, chartRef.current = init(divRef.current, undefined, { locale: 'RU' }); didn't work for some reasons, I mistaken.
But chartRef.current = init(divRef.current, undefined, { locale: localeObj }); where localeObj taken from echarts/i18n/langXX.js works well, and since I need only 2 languages in my project I will make this workaround and will try to fix it better in future:

  let locale = useSelector((state: ExplorePageState) => state?.common?.locale);

...

    if (locale === 'ru') {
      chartRef.current = init(divRef.current, undefined, {locale: localeObj});
    } else {
      chartRef.current = init(divRef.current);
    }