AngularT2 Dark_1200x303

A gif walking through the different pages and features of the Financial Portfolio demo app using Kendo UI components

In this series, I walk through the Angular components that this app is composed of, and delve into the Kendo UI components that each one uses!

I’ve broken the application into five major Angular Components:

  1. Stock Chart
  2. Stock List
  3. User Profile
  4. Real Time Data
  5. Heatmap

In the first post, I covered the Stock Chart and Stock List components (and the child components they employ). Now, let’s find out how we built the User Profile, Real Time Data, and Heatmap Components!

Following Along

You can pull down the code and follow along—everything is available on GitHub and GitHub Pages!

  1. Clone the repo https://github.com/telerik/kendo-angular/tree/master/examples-standalone/finance-portfolio
  2. Go into the root of the application cd kendo-angular/examples-standalone/finance-portfolio/
  3. Run npm install and npm start
  4. Go to http://localhost:4200 in your web browser

Real Time Data—Data Virtualization

A table with real time stock information updating on the fly. The colors of the stocks change from green to red, indicating the stock going up or down.

Building out the Grid with Kendo UI

I’ve covered the basics of the Kendo UI Grid pretty thoroughly in a video series and in this post here. Check it out if you are just getting started with the Grid from Kendo UI!

Since I’ve already covered the basics elsewhere, let’s go over the highlights of creating this real-time data grid. First, we of course installed and added the grid to our project:

a screenshot of the kendo grid outer wrapper mark down

Virtual Scrolling within the Grid

As you can see, we are setting the scroll mode to virtual. The pageChange event is here for this virtual scrolling feature. In order to know when a page has changed, the virtual scrolling functionality of the Grid relies on calculations based on the fixed rowHeight as well as the set pageSize of the Grid. Read more about virtual scrolling in your Kendo UI Grid here: https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/.

Plugging Data into our Kendo UI Grid

Our [data] is set to gridView, which if we check out the component.ts file, is being set to public gridView: GridDataResult;. The GridDataResult is coming from this file:

real-time-data.component.ts

screenshot of the page change event and the load products event

We are also handling the pageChangeEvent by providing the number of items to be skipped as well as loading in the products that are randomly generated in this file. It is always easier to control a demo app by using demo data, so our team decided to go this direction for the Financial Portfolio Demo App. You can always swap out our fake data for live data, though! Check out the rest of the real-time-data component file to see how we are generating this random data for the real time grid view!

Making the Data Real-Time 🥳

Custom Cell in Kendo UI Grid

You can customize any cell in the Kendo UI Grid using the cell template directive combined with ng-template. Here in this Kendo Grid Column, we are creating a custom template for the cells that hold the price data. We bind the data item that is constantly updating and either give it a price-up class (green text) or a price-down class (red text), depending on if the stock rose or fell.

To define the cell template, nest an <ng-template> tag with the kendoGridCellTemplate directive inside a <kendo-grid-column> tag.

the markup for a column from the real time data component using ng-template to customize the cells in the grid

a screenshot of the price column

We are giving the price change column the same treatment and classes, check it out:

the markup for the kendo grid column for the price change

Heatmap

Our heatmap is using a jQuery component (the Kendo UI TreeMap) with ease inside of our heatmap component. Below you can find the code for instantiating and populating a treemap jQuery component in our heatmap angular component:

Heatmap.component.ts

The TreeMap is a way of viewing hierarchical data, you give the treemap an object with colors and field values and it will build out a treemap with leaves containing each individual piece of data:

a tree map from kendo ui displaying stock information

You can read more about the TreeMap Component here: https://demos.telerik.com/kendo-ui/treemap/index.

User Profile

A couple of Kendo UI components went into the making of our lovely user portfolio page—another Grid and a Pie Chart Component as well as a mini-table and custom styled avatar.

image of opening the user portfolio page

First, we are building out this mini-grid reviewing our top priority stocks:

the markup for the profile stocks grid on the user portfolio page

Next, we are using another chart to build out this animating pie chart to show our stocks in a different form:

 the markup for the pie chart on the user portfolio page

We are giving our overview pie chart a beveled look by setting the overlay property: [overlay]="{ gradient: 'roundedBevel' }”.

an image showing the normal pie chart and the pie chart with bevel, oooooo

The user portfolio page also has a mini-table below a custom styled avatar image and name. This demo app was created before we had our Avatar Component, which is super handy in spots like this!

a screenshot of the user avatar and summary table in the user portfolio page

The Avatar Component is also super customizable as well as super simple to implement. Check it out if you are in need of user avatars in your Angular app!

Wrap-up

In this article and its prequel, we have covered the Stock List and the Stock Chart on the landing page—with its ability to toggle between chart types and display multiple charts at the same time! We also covered the Real-Time Data Grid, the Heatmap view and the User Portfolio Page with its many Kendo UI components! For more details on this demo app, check out the source code here:

Financial Stocks Portfolio on GitHub Pages Financial Stocks Portfolio Repo on GitHub

As always, we love love love feedback here on the Kendo UI team! Please let us know if this demo app was useful to you and what kind of other demo apps you’d like to see!

endoka asking for your feedback

Kendo UI for Angular Feedback Portal

Alyssa is the Angular Developer Advocate for Kendo UI. If you're into Angular, React, Vue or jQuery and also happen to love beautiful and highly detailed components, check out Kendo UI. You can find the Kendo UI for Angular library here or just jump into a free 30 day trial today. Happy Coding!


AlyssaNicoll
About the Author

Alyssa Nicoll

Alyssa is an Angular Developer Advocate & GDE. Her two degrees (Web Design & Development and Psychology) feed her speaking career. She has spoken at over 30 conferences internationally, specializing in motivational soft talks, enjoys gaming on Xbox and scuba diving in her spare time. Her DM is always open, come talk sometime.

Related Posts

Comments

Comments are disabled in preview mode.