@eo4geo/ngx-bok-utils 1.7.9 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,202 +1,202 @@
|
|
|
1
|
-
# bok-utils
|
|
2
|
-
|
|
3
|
-
## Installation
|
|
4
|
-
|
|
5
|
-
First, install the library in your Angular project:
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install bok-visualization
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Make sure the required dependencies are installed in your project, as `bok-visualization` lists them as peerDependencies.
|
|
12
|
-
|
|
13
|
-
## Configuration
|
|
14
|
-
|
|
15
|
-
### Styling Configuration
|
|
16
|
-
|
|
17
|
-
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:
|
|
18
|
-
|
|
19
|
-
```css
|
|
20
|
-
:root {
|
|
21
|
-
--primary-color: #0e145d;
|
|
22
|
-
--secondary-color: #3fb3f8;
|
|
23
|
-
--hover-color: #f46524;
|
|
24
|
-
--danger-color: #ce3a41;
|
|
25
|
-
--warning-color: #ffd400;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
body {
|
|
29
|
-
color: var(--primary-color);
|
|
30
|
-
font-family: 'Poppins', sans-serif;
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## PrimeNG Setup in main.ts
|
|
35
|
-
|
|
36
|
-
In your `main.ts` file, add the **PrimeNG** and **Angular animations** setup:
|
|
37
|
-
|
|
38
|
-
```typescript
|
|
39
|
-
import { bootstrapApplication } from '@angular/platform-browser';
|
|
40
|
-
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
|
41
|
-
import { providePrimeNG } from 'primeng/config';
|
|
42
|
-
import Aura from '@primeng/themes/aura';
|
|
43
|
-
import { AppComponent } from './app/app.component';
|
|
44
|
-
|
|
45
|
-
bootstrapApplication(AppComponent, {
|
|
46
|
-
providers: [
|
|
47
|
-
provideAnimationsAsync(),
|
|
48
|
-
providePrimeNG({
|
|
49
|
-
theme: {
|
|
50
|
-
preset: Aura,
|
|
51
|
-
options: {
|
|
52
|
-
prefix: 'p',
|
|
53
|
-
darkModeSelector: false,
|
|
54
|
-
cssLayer: false
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
})
|
|
58
|
-
]
|
|
59
|
-
});
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## Using the Library
|
|
63
|
-
|
|
64
|
-
Once installed and configured, you can begin using the components from the library in your Angular application.
|
|
65
|
-
|
|
66
|
-
### Example Usage
|
|
67
|
-
|
|
68
|
-
```typescript
|
|
69
|
-
import { Component } from '@angular/core';
|
|
70
|
-
import { BokComponent } from 'bok-visualization';
|
|
71
|
-
|
|
72
|
-
@Component({
|
|
73
|
-
selector: 'app-my-component',
|
|
74
|
-
template: `
|
|
75
|
-
<header [items]="headerItems"></header>
|
|
76
|
-
|
|
77
|
-
...
|
|
78
|
-
|
|
79
|
-
<footer (openReleaseNotes)="manageEvent()" (openUserManual)="manageEvent2()"></footer>
|
|
80
|
-
`
|
|
81
|
-
})
|
|
82
|
-
export class MyComponent {
|
|
83
|
-
concept: string = 'GIST';
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### Header
|
|
89
|
-
|
|
90
|
-
#### `[items]`
|
|
91
|
-
|
|
92
|
-
- **Type**: MenuItem[] (Class from PrimeNg)
|
|
93
|
-
- **Default Value**:
|
|
94
|
-
|
|
95
|
-
```js
|
|
96
|
-
[
|
|
97
|
-
{
|
|
98
|
-
label: 'Tools',
|
|
99
|
-
icon: 'pi pi-cog',
|
|
100
|
-
items: [
|
|
101
|
-
{
|
|
102
|
-
label: 'BoK Visualization & Search',
|
|
103
|
-
icon: 'pi pi-search',
|
|
104
|
-
style: {'--p-tieredmenu-item-color': 'var(--hover-color)'},
|
|
105
|
-
iconStyle: {'color': 'var(--hover-color)'}
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
label: 'Occupational Profile Tool',
|
|
109
|
-
icon: 'pi pi-users',
|
|
110
|
-
url: 'https://eo4geo-opt.web.app',
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
label: 'Job Offer Tool',
|
|
114
|
-
icon: 'pi pi-book',
|
|
115
|
-
url: 'https://eo4geo-jot.web.app',
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
label: 'Curriculum Design Tool',
|
|
119
|
-
icon: 'pi pi-graduation-cap',
|
|
120
|
-
url: 'https://eo4geo-cdt.web.app',
|
|
121
|
-
},
|
|
122
|
-
{
|
|
123
|
-
label: 'BoK Annotation Tool',
|
|
124
|
-
icon: 'pi pi-pencil',
|
|
125
|
-
url: 'https://eo4geo-bat.web.app',
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
label: 'BoK Matching Tool',
|
|
129
|
-
icon: 'pi pi-equals',
|
|
130
|
-
url: 'https://eo4geo-bmt.web.app',
|
|
131
|
-
}
|
|
132
|
-
]
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
label: 'Share',
|
|
136
|
-
icon: 'pi pi-share-alt',
|
|
137
|
-
items: [
|
|
138
|
-
{
|
|
139
|
-
label: 'X',
|
|
140
|
-
icon: 'pi pi-twitter',
|
|
141
|
-
url: 'https://twitter.com/SpaceSUITE_eu',
|
|
142
|
-
},
|
|
143
|
-
{
|
|
144
|
-
label: 'Facebook',
|
|
145
|
-
icon: 'pi pi-facebook',
|
|
146
|
-
url: 'https://www.facebook.com/spacesuiteproject/',
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
label: 'Youtube',
|
|
150
|
-
icon: 'pi pi-youtube',
|
|
151
|
-
url: 'https://www.youtube.com/@SpaceSUITE_eu',
|
|
152
|
-
},
|
|
153
|
-
{
|
|
154
|
-
label: 'LinkedIn',
|
|
155
|
-
icon: 'pi pi-linkedin',
|
|
156
|
-
url: 'https://www.linkedin.com/showcase/spacesuite_eu/',
|
|
157
|
-
}
|
|
158
|
-
]
|
|
159
|
-
}
|
|
160
|
-
]
|
|
161
|
-
```
|
|
162
|
-
- **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.
|
|
163
|
-
|
|
164
|
-
#### `[toolname]`
|
|
165
|
-
|
|
166
|
-
- **Type**: string
|
|
167
|
-
- **Default Value**: BoK Visualization & Search
|
|
168
|
-
- **Description**: Set the current section name to be displayed in the header.
|
|
169
|
-
|
|
170
|
-
### Footer
|
|
171
|
-
|
|
172
|
-
#### `(openReleaseNotes)`
|
|
173
|
-
|
|
174
|
-
- **Type**: void
|
|
175
|
-
- **Description**: Emits an event when the ‘Release Notes’ link is clicked.
|
|
176
|
-
|
|
177
|
-
#### `(openUserManual)`
|
|
178
|
-
|
|
179
|
-
- **Type**: void
|
|
180
|
-
- **Description**: Emits an event when the ‘User Manual’ link is clicked.
|
|
181
|
-
|
|
182
|
-
## Dependencies
|
|
183
|
-
|
|
184
|
-
`bok-visualization` requires the following dependencies to be installed in your project:
|
|
185
|
-
|
|
186
|
-
- **Angular**: Version 19.1.x
|
|
187
|
-
- **primeng**: Version 19.0.x
|
|
188
|
-
- **d3**: Version 7.9.x
|
|
189
|
-
- **primeflex**: Version 3.3.x
|
|
190
|
-
- **primeicons**: Version 7.0.x
|
|
191
|
-
|
|
192
|
-
### Installation
|
|
193
|
-
|
|
194
|
-
To install the dependencies, run the following command:
|
|
195
|
-
|
|
196
|
-
```bash
|
|
197
|
-
npm install primeflex@^3.3.0 primeicons@^7.0.0 primeng@^19.0.0
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
## License
|
|
201
|
-
|
|
1
|
+
# bok-utils
|
|
2
|
+
|
|
3
|
+
## Installation
|
|
4
|
+
|
|
5
|
+
First, install the library in your Angular project:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install bok-visualization
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Make sure the required dependencies are installed in your project, as `bok-visualization` lists them as peerDependencies.
|
|
12
|
+
|
|
13
|
+
## Configuration
|
|
14
|
+
|
|
15
|
+
### Styling Configuration
|
|
16
|
+
|
|
17
|
+
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:
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
:root {
|
|
21
|
+
--primary-color: #0e145d;
|
|
22
|
+
--secondary-color: #3fb3f8;
|
|
23
|
+
--hover-color: #f46524;
|
|
24
|
+
--danger-color: #ce3a41;
|
|
25
|
+
--warning-color: #ffd400;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
body {
|
|
29
|
+
color: var(--primary-color);
|
|
30
|
+
font-family: 'Poppins', sans-serif;
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## PrimeNG Setup in main.ts
|
|
35
|
+
|
|
36
|
+
In your `main.ts` file, add the **PrimeNG** and **Angular animations** setup:
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
40
|
+
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
|
41
|
+
import { providePrimeNG } from 'primeng/config';
|
|
42
|
+
import Aura from '@primeng/themes/aura';
|
|
43
|
+
import { AppComponent } from './app/app.component';
|
|
44
|
+
|
|
45
|
+
bootstrapApplication(AppComponent, {
|
|
46
|
+
providers: [
|
|
47
|
+
provideAnimationsAsync(),
|
|
48
|
+
providePrimeNG({
|
|
49
|
+
theme: {
|
|
50
|
+
preset: Aura,
|
|
51
|
+
options: {
|
|
52
|
+
prefix: 'p',
|
|
53
|
+
darkModeSelector: false,
|
|
54
|
+
cssLayer: false
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
]
|
|
59
|
+
});
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Using the Library
|
|
63
|
+
|
|
64
|
+
Once installed and configured, you can begin using the components from the library in your Angular application.
|
|
65
|
+
|
|
66
|
+
### Example Usage
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { Component } from '@angular/core';
|
|
70
|
+
import { BokComponent } from 'bok-visualization';
|
|
71
|
+
|
|
72
|
+
@Component({
|
|
73
|
+
selector: 'app-my-component',
|
|
74
|
+
template: `
|
|
75
|
+
<header [items]="headerItems"></header>
|
|
76
|
+
|
|
77
|
+
...
|
|
78
|
+
|
|
79
|
+
<footer (openReleaseNotes)="manageEvent()" (openUserManual)="manageEvent2()"></footer>
|
|
80
|
+
`
|
|
81
|
+
})
|
|
82
|
+
export class MyComponent {
|
|
83
|
+
concept: string = 'GIST';
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Header
|
|
89
|
+
|
|
90
|
+
#### `[items]`
|
|
91
|
+
|
|
92
|
+
- **Type**: MenuItem[] (Class from PrimeNg)
|
|
93
|
+
- **Default Value**:
|
|
94
|
+
|
|
95
|
+
```js
|
|
96
|
+
[
|
|
97
|
+
{
|
|
98
|
+
label: 'Tools',
|
|
99
|
+
icon: 'pi pi-cog',
|
|
100
|
+
items: [
|
|
101
|
+
{
|
|
102
|
+
label: 'BoK Visualization & Search',
|
|
103
|
+
icon: 'pi pi-search',
|
|
104
|
+
style: {'--p-tieredmenu-item-color': 'var(--hover-color)'},
|
|
105
|
+
iconStyle: {'color': 'var(--hover-color)'}
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
label: 'Occupational Profile Tool',
|
|
109
|
+
icon: 'pi pi-users',
|
|
110
|
+
url: 'https://eo4geo-opt.web.app',
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
label: 'Job Offer Tool',
|
|
114
|
+
icon: 'pi pi-book',
|
|
115
|
+
url: 'https://eo4geo-jot.web.app',
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
label: 'Curriculum Design Tool',
|
|
119
|
+
icon: 'pi pi-graduation-cap',
|
|
120
|
+
url: 'https://eo4geo-cdt.web.app',
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
label: 'BoK Annotation Tool',
|
|
124
|
+
icon: 'pi pi-pencil',
|
|
125
|
+
url: 'https://eo4geo-bat.web.app',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
label: 'BoK Matching Tool',
|
|
129
|
+
icon: 'pi pi-equals',
|
|
130
|
+
url: 'https://eo4geo-bmt.web.app',
|
|
131
|
+
}
|
|
132
|
+
]
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
label: 'Share',
|
|
136
|
+
icon: 'pi pi-share-alt',
|
|
137
|
+
items: [
|
|
138
|
+
{
|
|
139
|
+
label: 'X',
|
|
140
|
+
icon: 'pi pi-twitter',
|
|
141
|
+
url: 'https://twitter.com/SpaceSUITE_eu',
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
label: 'Facebook',
|
|
145
|
+
icon: 'pi pi-facebook',
|
|
146
|
+
url: 'https://www.facebook.com/spacesuiteproject/',
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
label: 'Youtube',
|
|
150
|
+
icon: 'pi pi-youtube',
|
|
151
|
+
url: 'https://www.youtube.com/@SpaceSUITE_eu',
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
label: 'LinkedIn',
|
|
155
|
+
icon: 'pi pi-linkedin',
|
|
156
|
+
url: 'https://www.linkedin.com/showcase/spacesuite_eu/',
|
|
157
|
+
}
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
]
|
|
161
|
+
```
|
|
162
|
+
- **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.
|
|
163
|
+
|
|
164
|
+
#### `[toolname]`
|
|
165
|
+
|
|
166
|
+
- **Type**: string
|
|
167
|
+
- **Default Value**: BoK Visualization & Search
|
|
168
|
+
- **Description**: Set the current section name to be displayed in the header.
|
|
169
|
+
|
|
170
|
+
### Footer
|
|
171
|
+
|
|
172
|
+
#### `(openReleaseNotes)`
|
|
173
|
+
|
|
174
|
+
- **Type**: void
|
|
175
|
+
- **Description**: Emits an event when the ‘Release Notes’ link is clicked.
|
|
176
|
+
|
|
177
|
+
#### `(openUserManual)`
|
|
178
|
+
|
|
179
|
+
- **Type**: void
|
|
180
|
+
- **Description**: Emits an event when the ‘User Manual’ link is clicked.
|
|
181
|
+
|
|
182
|
+
## Dependencies
|
|
183
|
+
|
|
184
|
+
`bok-visualization` requires the following dependencies to be installed in your project:
|
|
185
|
+
|
|
186
|
+
- **Angular**: Version 19.1.x
|
|
187
|
+
- **primeng**: Version 19.0.x
|
|
188
|
+
- **d3**: Version 7.9.x
|
|
189
|
+
- **primeflex**: Version 3.3.x
|
|
190
|
+
- **primeicons**: Version 7.0.x
|
|
191
|
+
|
|
192
|
+
### Installation
|
|
193
|
+
|
|
194
|
+
To install the dependencies, run the following command:
|
|
195
|
+
|
|
196
|
+
```bash
|
|
197
|
+
npm install primeflex@^3.3.0 primeicons@^7.0.0 primeng@^19.0.0
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
## License
|
|
201
|
+
|
|
202
202
|
This library is licensed under the **MIT** License.
|