Thursday, 10 September, 2020 UTC


Welcome to the Financial Blog post series, Part II! Here at Progress, we love attractive and alluring components. My team specifically loves attractive Angular components. Recently we built a demo Angular app that shows off a number of our gorgeous components working together to create this Financial Portfolio Demo App:
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
  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

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:

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:
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:
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.
We are giving the price change column the same treatment and classes, check it out:
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
        public ngAfterViewInit(): void {
            this.treeMap = kendo.jQuery(this.heatmap.nativeElement).kendoTreeMap({
                dataSource: new{
                    data: this.treeData,
                    schema: {
                        model: {
                            children: 'items'
                valueField: 'value',
                textField: 'symbol',
                colors: [['#09E98B', '#00A95B'], ['#FF9693', '#EC0006']],
                template: ({ dataItem }) => {
                    return `
` + dataItem.symbol + `
${ dataItem.change }%
`; } }).data('kendoTreemap'); this.tooltip = kendo.jQuery(this.heatmap.nativeElement).kendoTooltip({ filter: '.k-leaf', position: 'center', showOn: 'click', content: (e: any) => { const treemap = kendo.jQuery(this.heatmap.nativeElement).data('kendoTreeMap'); const item = treemap.dataItem('.k-treemap-tile')); const cssClass = (value: number): string => { return value > 0 ? 'positive-value' : 'negative-value'; }; return `
${ item.symbol }
${ }
Price: ${ item.price }
Change: ${ (item.change > 0 ? '+' : '') }${ item.change }%
Market Cap: ${ item.value }
`; } }).data('kendoTooltip'); } public ngOnDestroy(): void { kendo.destroy(this.treeMap); kendo.destroy(this.tooltip); }
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:
You can read more about the TreeMap Component here:
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.
First, we are building out this mini-grid reviewing our top priority stocks:
Next, we are using another chart to build out this animating pie chart to show our stocks in a different form:
We are giving our overview pie chart a beveled look by setting the overlay property: [overlay]="{ gradient: 'roundedBevel' }”.
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!
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!
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!
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!