78 |
79 |
80 |
81 |
82 |
83 | ## Styling Your First Component - into the /deep/ of CSS
84 |
85 | You can use /deep/ to style inside a panel (or the >>> selector which has now replaced it)
86 |
87 | p-panel >>> .ui-panel {
88 | margin-top: 1em;
89 | width: 98%;
90 | min-height: 300px;
91 | }
92 |
93 | ## Making use of Grid Systems
94 |
95 | Specify the grid using a combination of ui-g- ui-lg- ui-md- ui-sm-
96 |
97 | Drag your browser or use F12 tools to change to mobile view.
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 | ## Making use of Font Awesome
115 |
116 | Once you install font-awesome, you have access to a huge collection of CSS fonts. Using they is a matter of styling an element with the appropriate class:
117 |
118 |
119 |
120 | which I could style for size and color with font-size: 50px or color: red or whatever.
121 |
122 | Because I'm styling the I element, I need to add both fa and fa-cloud-download, but many Prime components support an icon element which you can specify the name of the icon `fa-cloud-download` directly. We'll see that shortly in the menu.
123 |
124 |
125 | ## Building a Stats Component
126 |
127 | You can, of course, nest grids within grids:
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
20
140 |
Days Uptime
141 |
142 |
143 |
144 |
145 |
146 |
147 | Challenge: Make your own statistics component that makes the labels and icons configurable
148 |
149 | ## Data Backed Components - The Main Menu
150 |
151 | Our p-panel isn't Data-backed, but some components are. The menu that you see in the application is a p-menu component:
152 |
153 | If you were using this component in your app, you'd first add it to your imports.
154 |
155 | MenuModule
156 |
157 | Then you'd add the markup:
158 |
159 |
160 |
161 | But in this case, the menu is populated by a backing model:
162 |
163 | private menuItems: MenuItem[];
164 |
165 | Remember, types aren't really a thing in JavaScript, they will be compiled away. But they are awesome for developer happiness.
166 |
167 | this.menuItems =
168 | {label: 'Dashboard', icon: 'fa-home', routerLink: ['/dashboard'] }
169 | {label: 'All Timesheets', icon: 'fa-calendar', routerLink: ['/alltimes'] },
170 | {label: 'My Timesheet', icon: 'fa-clock-o', routerLink: ['/mytimes'] },
171 | {label: 'My Projects', icon: 'fa-tasks', routerLink: ['/projects'] },
172 | {label: 'My Profile', icon: 'fa-users', routerLink: ['/profile'] },
173 | {label: 'Settings', icon: 'fa-sliders', routerLink: ['/settings'] }
174 | ]
175 |
176 | That's an example of that icon property we mentioned earlier!
177 |
178 |
179 | ## Architecture Map of Agile Times - Source Code Layout
180 |
181 | Show each menu of the sample app mapping to a component in the matching directory property.
182 |
183 | Our components will be pre-created in the sample app, ready for you to add your own goodness.
184 |
185 | Be cool to have a plunker to experiment with too. TODO make one!
186 |
187 |
188 |
--------------------------------------------------------------------------------
/xample-scripts/2.charts.md:
--------------------------------------------------------------------------------
1 |
2 | # Charts
3 |
4 |
5 |
6 | ## Intro the Chart Module
7 |
8 |
9 | import { ChartModule, MenuModule, PanelModule, DataTableModule} from 'primeng/primeng';
10 |
11 | imports: [
12 | ...
13 | ChartModule,
14 | ...
15 | ],
16 |
17 |
18 | ## Install Chart.js
19 |
20 | Install supporting library
21 |
22 | npm install chart.js --save
23 |
24 | Update the scripts section to run Chart.js on index.html startup
25 |
26 | "scripts": [
27 | "../node_modules/chart.js/dist/Chart.js"
28 | ],
29 |
30 |
31 | ## Creating your first Pie chart
32 |
33 |
34 |
35 |
36 |
37 | ## Structuring the Data
38 |
39 |
40 | But you need the data in a format like this:
41 |
42 | private hoursByProjectChartData = {
43 | labels: ['Payroll App', 'Agile Times App', 'Point of Sale App'],
44 | datasets: [
45 | {
46 | data: [8, 16, 24],
47 | backgroundColor: [
48 | "red",
49 | "blue",
50 | "yellow"
51 | ],
52 |
53 | }
54 | ]
55 | };
56 |
57 | But in reality, you probably have structured JSON data from a backend service:
58 |
59 |
60 | private hoursByProject = [
61 | {id: 1, name: 'Payroll App', hoursSpent: 8},
62 | {id: 2, name: 'Agile Times App', hoursSpent: 16},
63 | {id: 3, name: 'Point of Sale App', hoursSpent: 24},
64 | ]
65 |
66 |
67 | So you'll want to remap it:
68 |
69 |
70 | private pieData = this.hoursByProject.map((proj) => proj.hoursSpent);
71 | private pieLabels = this.hoursByProject.map((proj) => proj.name);
72 |
73 | Then run the demo:
74 |
75 |
76 |
77 | ## Fixing the Colours
78 |
79 | And those colours need to change to:
80 |
81 | private pieColors = this.configureDefaultColours(this.pieData);
82 |
83 | But how does the magic work? An array of colours to pick from for each new data item:
84 |
85 | const DEFAULT_COLORS = [
86 | '#6C76AF', '#EFA64C', '#00ACAC', '#2F8EE5',
87 | '#F15B2A', '#A62E5C', '#2A9FBC', '#9BC850',
88 | '#404040', '#675BA7'
89 | ]
90 |
91 | Then I'll write some code to slurp out those colours:
92 |
93 | private configureDefaultColours(data: number[]): string[] {
94 | let customColours = []
95 | if (data.length) {
96 | customColours = data.map((element, idx) => {
97 | return DEFAULT_COLORS[idx % DEFAULT_COLORS.length];
98 | });
99 | }
100 |
101 | return customColours;
102 | }
103 |
104 | Which gives us something much more please, but still readable
105 |
106 | private hoursByProjectChartData = {
107 | labels: this.pieLabels,
108 | datasets: [
109 | {
110 | data: this.pieData,
111 | backgroundColor: this.pieColors,
112 | }
113 | ]
114 | };
115 |
116 | ## Pies to Donuts
117 |
118 | Same datamodel. So it's a one-liner change:
119 |
120 |
121 |
122 | Same for polarArea
123 |
124 |
125 |
126 | ## Moving to Bar Charts
127 |
128 | Bars and Line charts work around series data. We have monthly hours by team:
129 |
130 | private hoursByTeam = [
131 |
132 | {
133 | name: 'Dev Team',
134 | monthlyHours: {
135 | 'Jan': 65,
136 | 'Feb': 59,
137 | 'Mar': 80,
138 | 'Apr': 55,
139 | 'May': 67,
140 | 'Jun': 73,
141 | }
142 | },
143 | {
144 | name: 'Ops Team',
145 | monthlyHours: {
146 | 'Jan': 44,
147 | 'Feb': 63,
148 | 'Mar': 57,
149 | 'Apr': 90,
150 | 'May': 77,
151 | 'Jun': 70,
152 |
153 | }
154 | }
155 |
156 | But we want to end up with series data:
157 |
158 | private hoursByTeamChartData = {
159 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
160 | datasets: [
161 | {
162 | label: 'Dev Team',
163 | backgroundColor: DEFAULT_COLORS[0],
164 | data: [65, 59, 80, 55, 67, 73]
165 | },
166 | {
167 | label: 'Ops Team',
168 | backgroundColor: DEFAULT_COLORS[1],
169 | data: [44, 63, 57, 90, 77, 70]
170 | }
171 | ]
172 | }
173 |
174 | We'll need to transform our JSON:
175 |
176 |
177 | private tranformHoursByTeamDataIntoChartData(hoursByTeamData) {
178 |
179 | let labels = Object.keys(hoursByTeamData[0].monthlyHours);
180 | let dataSets = hoursByTeamData.map( (nextTeam, idx) => {
181 | return {
182 | label: nextTeam.name,
183 | backgroundColor: DEFAULT_COLORS[idx % DEFAULT_COLORS.length],
184 | data: Object.keys(nextTeam.monthlyHours).map(key => nextTeam.monthlyHours[key])
185 | }
186 | });
187 |
188 | return {
189 | labels: labels,
190 | datasets: dataSets
191 | }
192 | }
193 |
194 |
195 | ## Line and Area Charts
196 |
197 | Again, a one-liner:
198 |
199 |
200 |
201 |
202 | If you don't want the fills - line, not area:
203 |
204 |
205 | return {
206 | label: nextTeam.name,
207 | fill: false,
208 | backgroundColor: DEFAULT_COLORS[idx % DEFAULT_COLORS.length],
209 | data: Object.keys(nextTeam.monthlyHours).map(key => nextTeam.monthlyHours[key])
210 | }
211 |
212 | ## Mixing Chart Data
213 |
214 | Chart type is set to bar, but then each data series can set it's preferred type:
215 |
216 |
217 | private hoursByTeamChartData = {
218 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
219 | datasets: [
220 | {
221 | type: 'line',
222 | fill: false,
223 | label: 'Dev Team',
224 | backgroundColor: DEFAULT_COLORS[0],
225 | data: [65, 59, 80, 55, 67, 73]
226 | },
227 | {
228 | type: 'bar',
229 | label: 'Ops Team',
230 | backgroundColor: DEFAULT_COLORS[1],
231 | data: [44, 63, 57, 90, 77, 70]
232 | }
233 | ]
234 | }
235 |
236 | So let's create a fresh tag for it:
237 |
238 |
239 |
240 |
241 |
242 | So let's re-use our current transformer to popular our Mixed Chart data:
243 |
244 | private hoursByTeamChartMixedData = {};
245 |
246 | constructor() {
247 |
248 | let mixedData = this.tranformHoursByTeamDataIntoChartData(this.hoursByTeam);
249 |
250 | mixedData.datasets[0].type = 'bar';
251 | mixedData.datasets[1].type = 'line';
252 | mixedData.datasets[2].type = 'line';
253 | mixedData.datasets[2].fill = true;
254 |
255 | this.hoursByTeamChartMixedData = mixedData;
256 |
257 | }
258 |
259 | ## Added interactivity with (onDataSelect)
260 |
261 | We can implement (onDataSelect):
262 |
263 |
265 |
266 | For now, let's just show an alert box. We'll circle back later:
267 |
268 | private onMixedClick(event) {
269 |
270 |
271 | let labelClicked = this.hoursByTeamChartMixedData.datasets[event.element._datasetIndex].label;
272 | let valueClicked = this.hoursByTeamChartMixedData.datasets[event.element._datasetIndex].data[event.element._index];
273 |
274 | alert(`Looks like ${labelClicked} worked ${valueClicked} hours`);
275 |
276 | }
277 |
278 | This gives us access to:
279 |
280 | //event.dataset = Selected dataset
281 | //event.element = Selected element
282 | //event.element._datasetIndex = Which dataset series was clicked on - ie. which array was clicked (0 indexed)
283 | //event.element._index = Which element within that array was clicked (0 indexed)
284 |
285 |
286 | ## Deeper Customisation
287 |
288 | There's more treasure in [Chart.js](http://www.chartjs.org/docs/) if you want to dig further:
289 |
290 |
291 | private chartOptions = {
292 | title: {
293 | display: true,
294 | text: 'Hours By Team'
295 | },
296 | legend: {
297 | position: 'left'
298 | },
299 | responsive: false,
300 | animation : false
301 | }
302 |
303 | Plus add them to the tag you care about:
304 |
305 |
307 |
308 |
309 | ## Realtime Charting
310 |
311 |
312 |
313 |
314 | Bind to the element:
315 |
316 |
319 |
320 | Grab a handle to the element:
321 |
322 | @ViewChild("mixedChart") mixedChart : UIChart;
323 |
324 | And the import:
325 |
326 | import { UIChart } from 'primeng/primeng';
327 |
328 | Implement after view init:
329 |
330 | import {Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';
331 | export class DashboardComponent implements OnInit, AfterViewInit {
332 |
333 | Implement the view init code to make the magic happen:
334 |
335 | Observable.interval(3000).timeInterval().subscribe(() => {
336 |
337 | var hoursByTeam = this.hoursByTeamChartMixedData.datasets;
338 | var randomised = hoursByTeam.map( (dataset) => {
339 |
340 | dataset.data = dataset.data.map( (hours) => hours * Math.random() );
341 |
342 | });
343 | this.mixedChart.refresh();
344 | });
345 |
346 | If you're changing the whole chart object, you'll need to call:
347 |
348 | this.mixedChart.reinit();
349 |
350 | ## Summarise and take action
351 |
352 |
--------------------------------------------------------------------------------
/xample-scripts/3.forms.md:
--------------------------------------------------------------------------------
1 |
2 | # Forms
3 |
4 | Reactive is the way to go. Much more configurable than Template Driven.
5 |
6 | Import the ReactiveFormsModule before you start!
7 |
8 | imports: [
9 | BrowserModule,
10 | FormsModule,
11 | ReactiveFormsModule,
12 |
13 |
14 | ## Create a basic reactive form
15 |
16 | Note to get theme and validation styling, we need to add a `pInputText` directive.
17 |
18 |
5 |