Angular Plotly localization

[fgiamma]

Hello all,
I am pretty new to Angular, but following the great documentation I managed to have angular Plotly app and running in no time. Everything worked like a charm until I tried to localize Plotly in Italian.

I installed angular-plotly exactly in the way suggested by the documentation:

npm install angular-plotly.js plotly.js-dist-min --save
npm install @types/plotly.js-dist-min --save-dev

Which results in the folders shown in the screenshots attached below, none of which has anything regarding localization.

What am I supposed to do in order to localize plotly? I found some other threads but none of the info there were helpful. I have no folder "lib/locales" and any import suggested obviously fails.

Thanks a lot and have a great new year!
.

[andrefarzat]

Hello @fgiamma . Happy new year ! 😸

Please, note that angular-plotly.js is an angular wrapper for plotly.js. Thus, you want to localize plotly.js itself.
There is the plotly.js-locales package which does exactly that: https://www.npmjs.com/package/plotly.js-locales

[fgiamma]

Thanks a lot for your answer @andrefarzat , I am aware of plotly.js-locales but being a newbie in Angular I don't quite understand how to use it. I have configured angular-plotly according to the guide, but I can't figure out how I can load the locale from plotly.js-locales.

I tried to load the locale following the guide the example in another topic:

`import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PlotlyViaCDNModule, PlotlyService } from 'angular-plotly.js';
import locale from 'plotly.js-locales/nl';

PlotlyViaCDNModule.setPlotlyVersion('1.58.4');

@NgModule({
imports: [CommonModule, PlotlyViaCDNModule],
})
export class FrontendUiModule {
constructor(private plotlyService: PlotlyService) {
this._setupPlotlyWithDutchLocale();
}

private async _setupPlotlyWithDutchLocale() {
const plotly = await this.plotlyService.getPlotly();
plotly.register(locale);
}
}`

But I get an error message:
Could not find a declaration file for module 'plotly.js-locales/nl'. '/Users/fabriziogiammatteo/Library/Mobile Documents/com~apple~CloudDocs/Projects/Fgiamma/Coronavirus/coronaapp/node_modules/plotly.js-locales/nl.js' implicitly has an 'any' type. Try npm i --save-dev @types/plotly.js-localesif it exists or add a new declaration (.d.ts) file containingdeclare module 'plotly.js-locales/fr';ts(7016)

Any suggestions on that?
Thanks

[Konstantin-Dudersky]

Create file src/typing.d.ts:

declare module 'plotly.js-locales/nl'

---

This is my src/app/app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

import * as PlotlyJS from 'plotly.js-dist-min';
import locale from 'plotly.js-locales/ru';
import {PlotlyModule, PlotlyService} from 'angular-plotly.js';
PlotlyModule.plotlyjs = PlotlyJS;

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        PlotlyModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor(private plotlyService: PlotlyService) {
        plotlyService.getPlotly().then(plotly => plotly.register(locale));
    }
}

And src/typing.d.ts:

declare module 'plotly.js-locales/ru'

[fgiamma]

Create file src/typing.d.ts:

declare module 'plotly.js-locales/nl'

This is my src/app/app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

import * as PlotlyJS from 'plotly.js-dist-min';
import locale from 'plotly.js-locales/ru';
import {PlotlyModule, PlotlyService} from 'angular-plotly.js';
PlotlyModule.plotlyjs = PlotlyJS;

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        PlotlyModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor(private plotlyService: PlotlyService) {
        plotlyService.getPlotly().then(plotly => plotly.register(locale));
    }
}

And src/typing.d.ts:

declare module 'plotly.js-locales/ru'

Thanks a lot 🙏🙏🙏