open-index/open-npm huggingface dataset:
npm package: @michelin-org/around-tire
Description: The package contains Michelin specific components like vehicle / tires...
Author: Michelin
Latest version: 4.4.2

# Angular Michelin around tire

The  package is a library to build Michelin specific components in Angular applications.

## Usage

Internal : `@michelin/around-tire`
External : `@michelin-org/around-tire`

### 1. Install Michelin Theme

Make sure Michelin theme is correctly installed.

### 2. Install Michelin Around Tire

- Install michelin around tire plugin `npm i @michelin/around-tire`

### 3. Include Michelin desired module

Michelin modules can be imported in the shared module

For example :

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { VehicleModule } from '@michelin/around-tire';

@NgModule({
  imports: [
    CommonModule,
    VehicleModule
  ],
  providers: [],
  declarations: []
})
export class SharedModule {}
```
### 4. Include theme mixin
```scss
@import '@michelin/around-tire/theming.scss';

@include around-tire-theme($theme);
```
npm package: @michelin-org/charts
Description: The package contains Michelin charts tools.
Author: Michelin
Latest version: 4.4.2

# Angular Michelin charts

The package is a library to build charts in Angular applications.

This library is based on Chart.js 4

## Usage

Internal : `@michelin/charts`
External : `@michelin-org/charts`

### 1. Install Michelin Theme

Make sure Michelin theme is correctly installed.

### 2. Install Michelin Charts

- Install chart.js `npm i chart.js`, (version >= 4.0.0)
- Install michelin chart plugin `npm i @michelin/charts`

### 3. Include Michelin Charts modules

Michelin modules can be imported in the shared module

For example :

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { ChartModule } from '@michelin/charts';

@NgModule({
  imports: [
    CommonModule,
    ChartModule
  ],
  providers: [],
  declarations: []
})
export class SharedModule {}
```

### 4. Moment adapter

Moment adpater can be use to display timeseries

- Install moment adapter plugin `npm i chartjs-adapter-moment`, (version > 1.0.0)
- Import dependency before chart initialization :

```typescript
import 'chartjs-adapter-moment';
```

### 5. Install plugins

Plugins can be register with ChartService.

For example for a Zoom plugin :

- Install zoom plugin `npm i chartjs-plugin-zoom`, (version > 1.0.0)
- Register plugin globally :

```typescript
import { Component } from '@angular/core';
import { ChartService } from '@michelin/charts';

import zoomPlugin from 'chartjs-plugin-zoom';

@Component({
  selector: 'mic-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  constructor(chartService: ChartService) {
    chartService.addPlugins([zoomPlugin]);
    chartService.registerPlugins();
  }
}

```
npm package: @michelin-org/maps
Description: The package contains Michelin maps tools.
Author: Michelin
Latest version: 4.4.2

# Angular Michelin maps

The package is a library to build maps in Angular applications using leaflet.

## Usage

Internal : `@michelin/maps`
External : `@michelin-org/maps`

### 1. Install Michelin Theme

Make sure Michelin theme is correctly installed.

### 2. Install Michelin Maps

- Install leaflet :
  -  `npm i leaflet`
  -  `npm i --save-dev @types/leaflet`
- Install leaflet.markercluster :
  -  `npm i leaflet.markercluster`
  -  `npm i --save-dev @types/leaflet.markercluster`
- Install leaflet-routing-machine :
  -  `npm i leaflet-routing-machine`
  -  `npm i --save-dev @types/leaflet-routing-machine`
- Install Michelin maps `npm i @michelin/maps`

- Add leaflet CSS in Angular architect file :
  - `node_modules/leaflet/dist/leaflet.css`
  - `node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css`
  - `node_modules/leaflet.markercluster/dist/MarkerCluster.css`
  - `node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.css`

### 3. Include Michelin Maps modules

Michelin modules can be imported in the shared module

For example :

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { MapModule } from '@michelin/maps';

@NgModule({
  imports: [
    CommonModule,
    MapModule
  ],
  providers: [],
  declarations: []
})
export class SharedModule {}
```
npm package: @michelin-org/theme
Description: The package contains Michelin theme, colors and all design system guide lines.
Author: Michelin
Latest version: 4.4.2

# Angular theme

The package is a library which contains all UI for initialize frontal applications.

Here are the necessary steps to use the Michelin theme module in your existing Angular project.

## Usage

Internal : `@michelin/theme`
External : `@michelin-org/theme`

### 1. Install Angular Material

Make sure `@angular/material` is correctly installed.

### 2. Install Michelin Theme

- Install Michelin maps `npm i @michelin/theme`

### 3. Include Michelin Theme style

Michelin theme is manage with Sass mixin, you can use this mixin like the following sample :

```scss
@import '@michelin/theme/theming';

$theme: mat-light-theme(
  (
    color: (
      primary: mat-palette($mic-blue, A400, A100, A700),
      accent: mat-palette($mic-purple, A400, A100, A700),
      warn: mat-palette($mic-red, A400, A100, A700)
    ),
    typography: $michelin-typography,
    density: 0
  )
);

@include design-system-theme($theme, true);
```

Note :

- All theme palette are customizable. The library provide some custom palettes like `mic-blue`,  `mic-red`,  `mic-purple` and `mic-grey`.

- To use theme color in your component, it's necessary to declare one mixin per component. For example :

```scss
@import '@angular/material/theming';

@mixin app-component-override($theme) {
  $accent: map-get($theme, accent);

  .accent {
    color: mat-color($accent, A400);
  }
}
```

### 4. Include Michelin Theme modules


Michelin modules can be imported anywhere in the application

For example :

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import {
  AlertModule,
  LogoModule,
  NavbarModule,
  ScrollbarModule,
  SidebarModule,
  ThemeModule,
  MATERIAL_ICONS_DEFAULT_FONT,
  MaterialIconFonts
} from '@michelin/theme';
import { LayoutComponent } from './layout.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    SidebarModule,
    AlertModule,
    NavbarModule,
    LogoModule,
    ScrollbarModule,
    ThemeModule
  ],
  providers: [{ provide: MATERIAL_ICONS_DEFAULT_FONT, useValue: MaterialIconFonts.filled }],
  declarations: [LayoutComponent]
})
export class LayoutModule {}
```
Import the modules you need only !

You can configure the Material icons default font using the injection token `MATERIAL_ICONS_DEFAULT_FONT`.
npm package: @michelin/around-tire
Description: The package contains Michelin specific components like vehicle / tires...
Author: Michelin
Latest version: 10.1.0

# Angular Michelin around tire

The  package is a library to build Michelin specific components in Angular applications.

## Usage

Internal with Artifactory : `@michelin/around-tire`
External with NPM : `@michelin/around-tire`

### 1. Install Michelin Theme

Make sure Michelin theme is correctly installed.

### 2. Install Michelin Around Tire

- Install michelin around tire plugin `npm i @michelin/around-tire`

### 3. Include Michelin desired module

Michelin modules can be imported in the shared module

For example :

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { VehicleModule } from '@michelin/around-tire';

@NgModule({
  imports: [
    CommonModule,
    VehicleModule
  ],
  providers: [],
  declarations: []
})
export class SharedModule {}
```
### 4. Include theme mixin
```scss
@import '@michelin/around-tire/theming.scss';

@include around-tire-theme($theme);
```
npm package: @michelin/charts
Description: The package contains Michelin charts tools.
Author: Michelin
Latest version: 10.1.0

# Angular Michelin charts

The package is a library to build charts in Angular applications.

This library is based on Chart.js 4

## Usage

Internal with Artifactory  : `@michelin/charts`
External with NPM : `@michelin/charts`

### 1. Install Michelin Theme

Make sure Michelin theme is correctly installed.

### 2. Install Michelin Charts

- Install chart.js `npm i chart.js`, (version >= 4.0.0)
- Install michelin chart plugin `npm i @michelin/charts`

### 3. Include Michelin Charts modules

Michelin modules can be imported in the shared module

For example :

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { ChartModule } from '@michelin/charts';

@NgModule({
  imports: [
    CommonModule,
    ChartModule
  ],
  providers: [],
  declarations: []
})
export class SharedModule {}
```

### 4. Moment adapter

Moment adpater can be use to display timeseries

- Install moment adapter plugin `npm i chartjs-adapter-moment`, (version > 1.0.0)
- Import dependency before chart initialization :

```typescript
import 'chartjs-adapter-moment';
```

### 5. Install plugins

Plugins can be register with ChartService.

For example for a Zoom plugin :

- Install zoom plugin `npm i chartjs-plugin-zoom`, (version > 1.0.0)
- Register plugin globally :

```typescript
import { Component } from '@angular/core';
import { ChartService } from '@michelin/charts';

import zoomPlugin from 'chartjs-plugin-zoom';

@Component({
  selector: 'mic-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  constructor(chartService: ChartService) {
    chartService.addPlugins([zoomPlugin]);
    chartService.registerPlugins();
  }
}

```
npm package: @michelin/maps
Description: The package contains Michelin maps tools.
Author: Michelin
Latest version: 10.1.0

# Angular Michelin maps

The package is a library to build maps in Angular applications using leaflet.

## Usage

Internal with Artifactory : `@michelin/maps`
External with NPM : `@michelin/maps`

### 1. Install Michelin Theme

Make sure Michelin theme is correctly installed.

### 2. Install Michelin Maps

- Install leaflet :
  -  `npm i leaflet`
  -  `npm i --save-dev @types/leaflet`
- Install leaflet.markercluster :
  -  `npm i leaflet.markercluster`
  -  `npm i --save-dev @types/leaflet.markercluster`
- Install leaflet-routing-machine (before version 5.3.0):
  -  `npm i leaflet-routing-machine`
  -  `npm i --save-dev @types/leaflet-routing-machine`
- Install Michelin maps `npm i @michelin/maps`
- Add leaflet CSS in Angular architect file :
  - `node_modules/leaflet/dist/leaflet.css`
  - `node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css`
  - `node_modules/leaflet.markercluster/dist/MarkerCluster.css`
  - `node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.css` (before version 5.3.0)

### 3. Include Michelin Maps modules

Michelin modules can be imported in the shared module

For example :

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { MapModule } from '@michelin/maps';

@NgModule({
  imports: [
    CommonModule,
    MapModule
  ],
  providers: [],
  declarations: []
})
export class SharedModule {}
```

### 4. Proxy tile map request to insure key security

In your NGINX configuration: 

```
location ~ ^/maps/(?<tilesetId>[^/]+)/(?<z>[0-9]+)/(?<x>[0-9]+)/(?<y>[0-9]+)\.png$ {
    resolver 8.8.8.8 8.8.4.4 valid=300s;
    resolver_timeout 5s;
    
    set $subscription_key YOUR_AZURE_MAPS_KEY;

    proxy_pass https://atlas.microsoft.com/map/tile?api-version=2.0&tilesetId=$tilesetId&zoom=$z&x=$x&y=$y&subscription-key=$subscription_key;

    proxy_set_header Host atlas.microsoft.com;
    proxy_ssl_server_name on;

    proxy_buffering on;
    proxy_cache_valid 200 1h;
}
```

### 5. Kubernetes ingress configuration

If you are using Kubernetes and not proxy map tile requests, add following configuration to your ingress :

```
more_set_headers "Content-Security-Policy: script-src 'self' 'unsafe-eval' 'unsafe-inline' $YOUR_TILE_URL";

```
npm package: @michelin/theme
Description: The package contains Michelin theme, colors and all design system guide lines.
Author: Michelin
Latest version: 10.1.0

# Angular theme

The package is a library which contains all UI for initialize frontal applications.

Here are the necessary steps to use the Michelin theme module in your existing Angular project.

## Usage

Internal with Artifactory : `@michelin/theme`
External with NPM : `@michelin/theme`

### 1. Install Angular Material

Make sure `@angular/material` is correctly installed.

### 2. Install Michelin Theme

- Install Michelin maps `npm i @michelin/theme`

### 3. Include Michelin Theme style

Michelin theme is manage with Sass mixin, you can use this mixin like the following sample :

```scss
@use '@angular/material' as mat;
@import '@michelin/theme/theming';

$theme: mat-light-theme(
  (
    color: (
      primary: mat.m2-define-palette($mic-blue, A400, A100, A700),
      accent: mat.m2-define-palette($mic-yellow, A400, A100, A700),
      warn: mat.m2-define-palette($mic-red, A400, A100, A700)
    ),
    typography: $michelin-typography,
    density: 0
  )
);

@include design-system-theme($theme, true);
```

Note :

- All theme palette are customizable. The library provide some custom palettes like `mic-blue`,  `mic-red`,  `mic-yellow` and `mic-grey`.

- To use theme color in your component, it's necessary to declare one mixin per component. For example :

```scss
@import '@angular/material';

@mixin app-component-override($theme) {
  $accent: map-get($theme, accent);

  .accent {
    color: map-get($accent, A400);
  }
}
```

### 4. Include Michelin Theme modules


Michelin modules can be imported anywhere in the application

For example :

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import {
  AlertModule,
  LogoModule,
  NavbarModule,
  ScrollbarModule,
  SidebarModule,
  ThemeModule,
  MATERIAL_ICONS_DEFAULT_FONT,
  MaterialIconFonts
} from '@michelin/theme';
import { LayoutComponent } from './layout.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    SidebarModule,
    AlertModule,
    NavbarModule,
    LogoModule,
    ScrollbarModule,
    ThemeModule
  ],
  providers: [{ provide: MATERIAL_ICONS_DEFAULT_FONT, useValue: MaterialIconFonts.filled }],
  declarations: [LayoutComponent]
})
export class LayoutModule {}
```
Import the modules you need only !

You can configure the Material icons default font using the injection token `MATERIAL_ICONS_DEFAULT_FONT`.