Open Gebuz opened 4 years ago
Try to add something like locale="de-CH
to your component after import the correspoding internationalized js file.
I have tried the following with no success:
in my index.js:
import 'assets/js/plotly-locale-da.js'
Reading the last line of the file:
"undefined"==typeof Plotly?(window.PlotlyLocales=window.PlotlyLocales||[], window.PlotlyLocales.push(locale)):Plotly.register(locale);
it adds it to window.PlotlyLocales
when it fails to find the Plotly
instance. This appears to happen.
I then first tried setting the locale prop on the component without success:
<plotly
:data="data"
:layout="layout"
locale="da"
class="graph"
/>
And then by setting a config prop on the component, which again was unsuccesful:
<plotly
:data="data"
:layout="layout"
:config="config"
class="graph"
/>
...
data () {
return {
config: {
locale: 'da'
}
}
}
Try to import plotly-locale-da.js as weel as Plotly and add:
Plotly.setPlotConfig({locale: 'da'})
That does not seem to work either.
Any progress on this?
I think the issue is simply that calling Plotly.setPlotConfig()
(with Plotly
being an import of plotly.js
) has no effect whatsoever on the plotly import made by the vue-plotly component. This:
const plotly = require('plotly.js');
Plotly.setPlotConfig({
staticPlot: true,
showTips: false,
});
should both make charts non-interactive and disable hint tooltips (such as the one about double-clicking to revert zoom when first zooming on a chart), but it does neither.
Would it be possible to add a config
prop to vue-plotly that is passed to the Plotly.newPlot()
call?
I think this should work, though of course it'll apply the settings just to the individual plot instead of globally (which however probably makes more sense anyway).
I've created a pull request for the config prop. I've realized that one can just pass additional props that get merged into the config object created internally, but passing a user config object enables keeping this encapsulated and to potentially reuse it, as well as keeping things tidier.
This does, however, not yet resolve this actual isse as simply passing a locale attribute inside the object doesn't work; the corresponding locale data JS file still needs to be loaded, I assume, in the context of the Plotly Vue component prior to calling Plotly.newPlot().
So, without wanting to further spam this issue, what works is adding this right before Plotly.newPlot(…)
in mounted()
(of the Vue component's source):
Plotly.register(require('plotly.js/lib/locales/da'));
This in combination with either adding locale="da"
to the component instantiation or passing a locale: "da"
attribute in a config object made possible by my above pull request's change.
I think that on the component's side, this could be implemented by having the component look at this.$attrs.locale || this.config.locale
and try to load and register the locale data as pointed out above (in a try/catch block, to be sure).
Still, this would probably leave the issue of the locale data getting thrown out by any tree-shaking happening because the module reference is non-static. One way to avoid this might consist in adding props for all supported locales (locale-da
, locale-de
, etc.) that explicitly load a hard-coded locale path, but this will of course unreasonably blow up the component's interface and implementation. Another way might consist in adding another prop, say, locale-data
, that holds a user-provided locale data import that the Plotly Vue component then just registers prior to calling Plotly.newPlot()
. What do you think?
This solution help me. In your component need:
<template>
<vue-plotly
:data="data"
:layout="layout"
:displayModeBar="options.displayModeBar"
:displaylogo="options.displaylogo"
:modeBarButtonsToRemove="options.modeBarButtonsToRemove"
:locale="options.locale"
/>
</template>
<script>
import "plotly.js/dist/plotly-locale-ru";
import { Plotly } from "vue-plotly";
export default {
name: "PlotlyLocale",
components: {
VuePlotly: Plotly
},
data() {
return {
layout: {
width: 800,
height: 660,
margin: { l: 10, r: 10, b: 10, t: 90 },
title: "Locale change test",
mode: "lines",
showlegend: true
},
options: {
locale: "ru",
displayModeBar: true,
displaylogo: false,
modeBarButtonsToRemove: [
"sendDataToCloud",
"select2d",
"lasso2d",
"autoScale2d",
"hoverClosestCartesian",
"toggleSpikelines",
"hoverCompareCartesian",
"resetCameraLastSave3d",
"tableRotation",
"hoverClosest3d"
]
},
data: []
};
}
</script>
This solution help me. In your component need:
- Import locale.
- Import vue-plotly.
- In template set locale for vue-plotly component.
- Set additional options.
<template> <vue-plotly :data="data" :layout="layout" :displayModeBar="options.displayModeBar" :displaylogo="options.displaylogo" :modeBarButtonsToRemove="options.modeBarButtonsToRemove" :locale="options.locale" /> </template> <script> import "plotly.js/dist/plotly-locale-ru"; import { Plotly } from "vue-plotly"; export default { name: "PlotlyLocale", components: { VuePlotly: Plotly }, data() { return { layout: { width: 800, height: 660, margin: { l: 10, r: 10, b: 10, t: 90 }, title: "Locale change test", mode: "lines", showlegend: true }, options: { locale: "ru", displayModeBar: true, displaylogo: false, modeBarButtonsToRemove: [ "sendDataToCloud", "select2d", "lasso2d", "autoScale2d", "hoverClosestCartesian", "toggleSpikelines", "hoverCompareCartesian", "resetCameraLastSave3d", "tableRotation", "hoverClosest3d" ] }, data: [] }; } </script>
Tried this, differences were locale import ( import "plotly.js-locales/pt-br"; ) and locale itself ( locale: "pt-BR" ), but no changes in the plot, axis number still not formatted in "pt-BR".
Locale import seems to work properly (object imported is moduleType: "locale") still missing something to make it work
This solution help me. In your component need:
- Import locale.
- Import vue-plotly.
- In template set locale for vue-plotly component.
- Set additional options.
<template> <vue-plotly :data="data" :layout="layout" :displayModeBar="options.displayModeBar" :displaylogo="options.displaylogo" :modeBarButtonsToRemove="options.modeBarButtonsToRemove" :locale="options.locale" /> </template> <script> import "plotly.js/dist/plotly-locale-ru"; import { Plotly } from "vue-plotly"; export default { name: "PlotlyLocale", components: { VuePlotly: Plotly }, data() { return { layout: { width: 800, height: 660, margin: { l: 10, r: 10, b: 10, t: 90 }, title: "Locale change test", mode: "lines", showlegend: true }, options: { locale: "ru", displayModeBar: true, displaylogo: false, modeBarButtonsToRemove: [ "sendDataToCloud", "select2d", "lasso2d", "autoScale2d", "hoverClosestCartesian", "toggleSpikelines", "hoverCompareCartesian", "resetCameraLastSave3d", "tableRotation", "hoverClosest3d" ] }, data: [] }; } </script>
Tried this, differences were locale import ( import "plotly.js-locales/pt-br"; ) and locale itself ( locale: "pt-BR" ), but no changes in the plot, axis number still not formatted in "pt-BR".
Locale import seems to work properly (object imported is moduleType: "locale") still missing something to make it work
Hi, @ncarneiro !
You need to change your import from import "plotly.js-locales/pt-br"
to import "plotly.js/dist/plotly-locale-pt-br"
and options.locale to "pt-BR". I changed the submitted code for your locale and it's work.
This solution help me. In your component need:
- Import locale.
- Import vue-plotly.
- In template set locale for vue-plotly component.
- Set additional options.
<template> <vue-plotly :data="data" :layout="layout" :displayModeBar="options.displayModeBar" :displaylogo="options.displaylogo" :modeBarButtonsToRemove="options.modeBarButtonsToRemove" :locale="options.locale" /> </template> <script> import "plotly.js/dist/plotly-locale-ru"; import { Plotly } from "vue-plotly"; export default { name: "PlotlyLocale", components: { VuePlotly: Plotly }, data() { return { layout: { width: 800, height: 660, margin: { l: 10, r: 10, b: 10, t: 90 }, title: "Locale change test", mode: "lines", showlegend: true }, options: { locale: "ru", displayModeBar: true, displaylogo: false, modeBarButtonsToRemove: [ "sendDataToCloud", "select2d", "lasso2d", "autoScale2d", "hoverClosestCartesian", "toggleSpikelines", "hoverCompareCartesian", "resetCameraLastSave3d", "tableRotation", "hoverClosest3d" ] }, data: [] }; } </script>
Tried this, differences were locale import ( import "plotly.js-locales/pt-br"; ) and locale itself ( locale: "pt-BR" ), but no changes in the plot, axis number still not formatted in "pt-BR". Locale import seems to work properly (object imported is moduleType: "locale") still missing something to make it work
Hi, @ncarneiro !
You need to change your import from
import "plotly.js-locales/pt-br"
toimport "plotly.js/dist/plotly-locale-pt-br"
and options.locale to "pt-BR". I changed the submitted code for your locale and it's work.
Hi @kulemeevag you're completely right. Took me some time to realize locale actually changed since month day, year isn't how it is used in pt-BR (but I've corrected these with tickformatstops and hoverformat). Thank you very much.
This solution help me. In your component need:
- Import locale.
- Import vue-plotly.
- In template set locale for vue-plotly component.
- Set additional options.
<template> <vue-plotly :data="data" :layout="layout" :displayModeBar="options.displayModeBar" :displaylogo="options.displaylogo" :modeBarButtonsToRemove="options.modeBarButtonsToRemove" :locale="options.locale" /> </template> <script> import "plotly.js/dist/plotly-locale-ru"; import { Plotly } from "vue-plotly"; export default { name: "PlotlyLocale", components: { VuePlotly: Plotly }, data() { return { layout: { width: 800, height: 660, margin: { l: 10, r: 10, b: 10, t: 90 }, title: "Locale change test", mode: "lines", showlegend: true }, options: { locale: "ru", displayModeBar: true, displaylogo: false, modeBarButtonsToRemove: [ "sendDataToCloud", "select2d", "lasso2d", "autoScale2d", "hoverClosestCartesian", "toggleSpikelines", "hoverCompareCartesian", "resetCameraLastSave3d", "tableRotation", "hoverClosest3d" ] }, data: [] }; } </script>
Tried this, differences were locale import ( import "plotly.js-locales/pt-br"; ) and locale itself ( locale: "pt-BR" ), but no changes in the plot, axis number still not formatted in "pt-BR". Locale import seems to work properly (object imported is moduleType: "locale") still missing something to make it work
Hi, @ncarneiro ! You need to change your import from
import "plotly.js-locales/pt-br"
toimport "plotly.js/dist/plotly-locale-pt-br"
and options.locale to "pt-BR". I changed the submitted code for your locale and it's work.Hi @kulemeevag you're completely right. Took me some time to realize locale actually changed since month day, year isn't how it is used in pt-BR (but I've corrected these with tickformatstops and hoverformat). Thank you very much.
Hi, @ncarneiro! Glad to help you!
Hey, is it possible to change the localization? Plotly.js descripes how to change it here: https://github.com/plotly/plotly.js/tree/master/dist#to-include-localization but from what I can see it is not possible to access the Plotly instance that I need to call
.setPlotConfig
on.