First, install the library in your Angular project:
npm install @eo4geo/ngx-bok-utilsbash
npm install bok-visualization
`
Make sure the required dependencies are installed in your project, as bok-visualization lists them as peerDependencies.
Configuration
$3
To configure the colours to be used by the component, go to the file ‘src/styles.css’ and set the following variables. Additionally we can define the font and font colour of the project:
`css
:root {
--primary-color: #0e145d;
--secondary-color: #3fb3f8;
--hover-color: #f46524;
--danger-color: #ce3a41;
--warning-color: #ffd400;
}
body {
color: var(--primary-color);
font-family: 'Poppins', sans-serif;
}
`
PrimeNG Setup in main.ts
In your main.ts file, add the PrimeNG and Angular animations setup:
`typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: false,
cssLayer: false
}
}
})
]
});
`
Using the Library
Once installed and configured, you can begin using the components from the library in your Angular application.
$3
`typescript
import { Component } from '@angular/core';
import { BokComponent } from 'bok-visualization';
@Component({
selector: 'app-my-component',
template:
})
export class MyComponent {
concept: string = 'GIST';
}
`
$3
#### [items]
- Type: MenuItem[] (Class from PrimeNg)
- Default Value:
`js
[
{
label: 'Tools',
icon: 'pi pi-cog',
items: [
{
label: 'BoK Visualization & Search',
icon: 'pi pi-search',
style: {'--p-tieredmenu-item-color': 'var(--hover-color)'},
iconStyle: {'color': 'var(--hover-color)'}
},
{
label: 'Occupational Profile Tool',
icon: 'pi pi-users',
url: 'https://eo4geo-opt.web.app',
},
{
label: 'Job Offer Tool',
icon: 'pi pi-book',
url: 'https://eo4geo-jot.web.app',
},
{
label: 'Curriculum Design Tool',
icon: 'pi pi-graduation-cap',
url: 'https://eo4geo-cdt.web.app',
},
{
label: 'BoK Annotation Tool',
icon: 'pi pi-pencil',
url: 'https://eo4geo-bat.web.app',
},
{
label: 'BoK Matching Tool',
icon: 'pi pi-equals',
url: 'https://eo4geo-bmt.web.app',
}
]
},
{
label: 'Share',
icon: 'pi pi-share-alt',
items: [
{
label: 'X',
icon: 'pi pi-twitter',
url: 'https://twitter.com/SpaceSUITE_eu',
},
{
label: 'Facebook',
icon: 'pi pi-facebook',
url: 'https://www.facebook.com/spacesuiteproject/',
},
{
label: 'Youtube',
icon: 'pi pi-youtube',
url: 'https://www.youtube.com/@SpaceSUITE_eu',
},
{
label: 'LinkedIn',
icon: 'pi pi-linkedin',
url: 'https://www.linkedin.com/showcase/spacesuite_eu/',
}
]
}
]
`
- Description: Determine the sections to display in the header. In case of using the Share label it will show a line with the icons of each subItem.
#### [toolname]
- Type: string
- Default Value: BoK Visualization & Search
- Description: Set the current section name to be displayed in the header.
$3
#### (openReleaseNotes)
- Type: void
- Description: Emits an event when the ‘Release Notes’ link is clicked.
#### (openUserManual)
- Type: void
- Description: Emits an event when the ‘User Manual’ link is clicked.
Dependencies
bok-visualization requires the following dependencies to be installed in your project:
- Angular: Version 19.1.x
- primeng: Version 19.0.x
- d3: Version 7.9.x
- primeflex: Version 3.3.x
- primeicons: Version 7.0.x
$3
To install the dependencies, run the following command:
`bash
npm install primeflex@^3.3.0 primeicons@^7.0.0 primeng@^19.0.0
``