-
-
- Currency in {{ dataItem }}
-
+
+ Currency in {{ dataItem }}
diff --git a/examples-standalone/finance-portfolio/src/app/components/header/header.component.scss b/examples-standalone/finance-portfolio/src/app/components/header/header.component.scss
index 023f8444..c4714467 100644
--- a/examples-standalone/finance-portfolio/src/app/components/header/header.component.scss
+++ b/examples-standalone/finance-portfolio/src/app/components/header/header.component.scss
@@ -1,4 +1,4 @@
-@import "../../../styles//variables";
+@import '../../../styles//variables';
.header {
height: $header-height;
@@ -53,7 +53,3 @@
}
}
}
-
-
-
-
diff --git a/examples-standalone/finance-portfolio/src/app/components/header/header.component.ts b/examples-standalone/finance-portfolio/src/app/components/header/header.component.ts
index 710db912..2feadf8e 100644
--- a/examples-standalone/finance-portfolio/src/app/components/header/header.component.ts
+++ b/examples-standalone/finance-portfolio/src/app/components/header/header.component.ts
@@ -1,6 +1,6 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
-import { StockDataService } from 'src/app/services/stock-data.service';
+import { StockDataService } from '../../services/stock-data.service';
@Component({
selector: 'app-header',
@@ -12,7 +12,7 @@ export class HeaderComponent {
public listItems: Array
= ['USD', 'EUR', 'GBP'];
public selected = this.service.selectedCurrency;
- constructor(public router: Router, private service: StockDataService) { }
+ constructor(public router: Router, private service: StockDataService) {}
public onCurrencyChange(e: any): void {
this.service.changeCurrency(e);
diff --git a/examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.html b/examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.html
index e2162cd0..e3791712 100644
--- a/examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.html
+++ b/examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.html
@@ -11,22 +11,22 @@
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+
Size: Market Cap (Intraday)
Color:1 Day % of Change
-
+
diff --git a/examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.ts b/examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.ts
index 04771c42..181866b2 100644
--- a/examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.ts
+++ b/examples-standalone/finance-portfolio/src/app/components/heatmap/heatmap.component.ts
@@ -1,8 +1,7 @@
import { Component, ElementRef, ViewChild, AfterViewInit, ViewEncapsulation, OnDestroy } from '@angular/core';
-import { StockDataService } from 'src/app/services/stock-data.service';
-import { Stock } from 'src/app/models';
import { formatCurrency } from '../../pipes/helpers';
-
+import { StockDataService } from '../../services/stock-data.service';
+import { Stock } from '../../models';
declare var kendo: any;
@@ -13,7 +12,6 @@ declare var kendo: any;
encapsulation: ViewEncapsulation.None
})
export class HeatmapComponent implements AfterViewInit, OnDestroy {
-
@ViewChild('heatmap') heatmap: ElementRef | undefined;
private data: Array;
@@ -42,7 +40,8 @@ export class HeatmapComponent implements AfterViewInit, OnDestroy {
name: item.name,
price: formatCurrency(item.price),
value: formatCurrency(Number(item.market_cap)),
- change: item.change_pct }));
+ change: item.change_pct
+ }));
this.treeData = [
{
@@ -55,56 +54,64 @@ export class HeatmapComponent implements AfterViewInit, OnDestroy {
}
public ngAfterViewInit(): void {
- this.treeMap = kendo.jQuery(this.heatmap?.nativeElement).kendoTreeMap({
- dataSource: new kendo.data.HierarchicalDataSource({
- data: this.treeData,
- schema: {
- model: {
- children: 'items'
+ this.treeMap = kendo
+ .jQuery(this.heatmap?.nativeElement)
+ .kendoTreeMap({
+ dataSource: new kendo.data.HierarchicalDataSource({
+ data: this.treeData,
+ schema: {
+ model: {
+ children: 'items'
+ }
}
+ }),
+ valueField: 'value',
+ textField: 'symbol',
+ colors: [
+ ['#09E98B', '#00A95B'],
+ ['#FF9693', '#EC0006']
+ ],
+ template: (item: any) => {
+ return `` + item.dataItem.symbol + `
${item.dataItem.change}%
`
- + item.dataItem.symbol + `
${ item.dataItem.change }%
${ item.symbol }
- ${ item.name }
+ return `
+ ${item.symbol}
+ ${item.name}
Price:
- ${ item.price }
+ ${item.price}
Change:
-
- ${ (item.change > 0 ? '+' : '') }${ item.change }%
+
+ ${item.change > 0 ? '+' : ''}${item.change}%
- Market Cap: ${ item.value }
+ Market Cap: ${item.value}
`;
- }
- }).data('kendoTooltip');
+ }
+ })
+ .data('kendoTooltip');
}
public ngOnDestroy(): void {
diff --git a/examples-standalone/finance-portfolio/src/app/components/navigation/navigation.component.html b/examples-standalone/finance-portfolio/src/app/components/navigation/navigation.component.html
index 46ee3b11..4c903f3a 100644
--- a/examples-standalone/finance-portfolio/src/app/components/navigation/navigation.component.html
+++ b/examples-standalone/finance-portfolio/src/app/components/navigation/navigation.component.html
@@ -1,11 +1,5 @@
-
-
-
+
+
+
diff --git a/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.html b/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.html
index 1efcaa45..ad195aed 100644
--- a/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.html
+++ b/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.html
@@ -1,4 +1,4 @@
-
+
@@ -21,28 +21,28 @@
{{ service.selectedCurrency }}
-
-
- {{ dataItem.price.toFixed(2) | currency: service.selectedCurrency:'symbol' }}
-
+
+
+ {{ dataItem.price.toFixed(2) | currency : service.selectedCurrency : 'symbol' }}
+
-
+
-
- {{ dataItem.change > 0 ? ('+' + dataItem.change.toFixed(2)) : dataItem.change.toFixed(2) }}%
+
+ {{ dataItem.change > 0 ? '+' + dataItem.change.toFixed(2) : dataItem.change.toFixed(2) }}%
diff --git a/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.scss b/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.scss
index c7da11fc..7102769d 100644
--- a/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.scss
+++ b/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.scss
@@ -26,13 +26,13 @@
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
- }
- @keyframes blink {
+}
+@keyframes blink {
from {
- opacity: 1;
+ opacity: 1;
}
to {
- opacity: .4;
+ opacity: 0.4;
}
}
diff --git a/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.ts b/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.ts
index e7828fcc..b082fd1e 100644
--- a/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.ts
+++ b/examples-standalone/finance-portfolio/src/app/components/real-time-data/real-time-data.component.ts
@@ -1,6 +1,6 @@
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
-import { StockDataService } from 'src/app/services/stock-data.service';
+import { StockDataService } from '../../services/stock-data.service';
@Component({
selector: 'app-real-time-data',
@@ -22,7 +22,7 @@ export class RealTimeDataComponent implements OnInit, OnDestroy {
public ngOnInit() {
this.interval = setInterval(() => {
- this.data = this.data.map(item => {
+ this.data = this.data.map((item) => {
const change = this.getChange();
item.change = change;
item.price = item.price + change;
@@ -53,34 +53,39 @@ export class RealTimeDataComponent implements OnInit, OnDestroy {
let lastSymbol = '';
const createSymbol = () => {
- lastSymbol = ' '.split('').map(char => letters[Math.floor(Math.random() * 26)]).join('');
+ lastSymbol = ' '
+ .split('')
+ .map((char) => letters[Math.floor(Math.random() * 26)])
+ .join('');
return lastSymbol;
};
- return Array(count).fill({}).map((_, idx) => {
- const price = Math.random() * 100 + 10;
+ return Array(count)
+ .fill({})
+ .map((_, idx) => {
+ const price = Math.random() * 100 + 10;
- return {
- id: idx + 1,
- symbol: createSymbol(),
- name: lastSymbol + ' Inc.',
- currency: this.service.selectedCurrency,
- price,
- change: this.getChange(),
- stock_exchange_long: 'New York Stock Exchange',
- stock_exchange_short: 'NYSE',
- timezone: 'EDT',
- timezone_name: 'America/New_York',
- year_high: (price + price / 3).toFixed(2),
- year_low: (price - price / 3).toFixed(2),
- volume: (21774241 * Math.random() * 50).toFixed(0),
- market_cap: (229956956 * Math.random() * 50).toFixed(0)
- };
- });
+ return {
+ id: idx + 1,
+ symbol: createSymbol(),
+ name: lastSymbol + ' Inc.',
+ currency: this.service.selectedCurrency,
+ price,
+ change: this.getChange(),
+ stock_exchange_long: 'New York Stock Exchange',
+ stock_exchange_short: 'NYSE',
+ timezone: 'EDT',
+ timezone_name: 'America/New_York',
+ year_high: (price + price / 3).toFixed(2),
+ year_low: (price - price / 3).toFixed(2),
+ volume: (21774241 * Math.random() * 50).toFixed(0),
+ market_cap: (229956956 * Math.random() * 50).toFixed(0)
+ };
+ });
}
private getChange = () => {
const rnd = Math.random();
- return rnd > 0.5 ? rnd > 0.75 ? -Math.random() * 2 : Math.random() * 2 : 0;
- }
+ return rnd > 0.5 ? (rnd > 0.75 ? -Math.random() * 2 : Math.random() * 2) : 0;
+ };
}
diff --git a/examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.html b/examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.html
index 3578d057..be7e23b3 100644
--- a/examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.html
+++ b/examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.html
@@ -24,9 +24,9 @@
- -
+
-
@@ -38,10 +38,9 @@
-
- 
+
+
{{ dataItem.text }}
-
+
{{ dataItem.text }}
@@ -83,7 +81,7 @@
[chartType]="chartType"
[interval]="selectedInterval.interval"
[range]="normalizedRange"
- [symbol]="stockDataService.selectedStock?.symbol!"
+ [symbol]="stockDataService.selectedStock.symbol!"
>
diff --git a/examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.ts b/examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.ts
index 99ee3275..ca053868 100644
--- a/examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.ts
+++ b/examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.ts
@@ -19,7 +19,7 @@ export class StockChartComponent {
public calendarMin = addMonths(new Date(), -6);
public calendarMax = new Date();
- public timeFilters: Array<{ name: string, duration: number }> = [
+ public timeFilters: Array<{ name: string; duration: number }> = [
{ name: '1H', duration: MS_PER_DAY / 24 },
{ name: '4H', duration: MS_PER_DAY / 6 },
{ name: '12H', duration: MS_PER_DAY / 2 },
@@ -29,7 +29,7 @@ export class StockChartComponent {
];
public activeTimeFilter: number = this.timeFilters[4].duration;
- public intervals: Array<{ name: string, interval: Interval, duration: number }> = [
+ public intervals: Array<{ name: string; interval: Interval; duration: number }> = [
{ name: '5M', interval: { unit: 'minutes', step: 5 }, duration: MS_PER_DAY / 24 / 12 },
{ name: '15M', interval: { unit: 'minutes', step: 15 }, duration: MS_PER_DAY / 24 / 4 },
{ name: '30M', interval: { unit: 'minutes', step: 30 }, duration: MS_PER_DAY / 24 / 2 },
@@ -38,10 +38,10 @@ export class StockChartComponent {
{ name: '1D', interval: { unit: 'days', step: 1 }, duration: MS_PER_DAY },
{ name: '1W', interval: { unit: 'weeks', step: 1 }, duration: MS_PER_DAY * 7 }
];
- public selectedInterval: { name: string, interval: Interval, duration: number } = this.intervals[3];
+ public selectedInterval: { name: string; interval: Interval; duration: number } = this.intervals[3];
public chartType: 'candle' | 'line' | 'area' = 'candle';
- public charts: Array<{ text: string, value: string }> = [
+ public charts: Array<{ text: string; value: string }> = [
{ text: 'Candle', value: 'candle' },
{ text: 'Line', value: 'line' },
{ text: 'Area', value: 'area' }
@@ -49,11 +49,11 @@ export class StockChartComponent {
private displayedDuration: number = this.activeTimeFilter;
- constructor(public stockDataService: StockDataService) { }
+ constructor(public stockDataService: StockDataService) {}
public disableIncompatibleIntervals = (args: ItemArgs): boolean => {
return !rangeAndIntervalCompatible(this.displayedDuration, args.dataItem.duration);
- }
+ };
public onTimeFilterClick(duration: number): void {
if (this.activeTimeFilter === duration) {
@@ -87,7 +87,7 @@ export class StockChartComponent {
return;
}
- const firstCompatibleInterval = this.intervals.find(interval => rangeAndIntervalCompatible(displayedDuration, interval.duration));
+ const firstCompatibleInterval = this.intervals.find((interval) => rangeAndIntervalCompatible(displayedDuration, interval.duration));
if (firstCompatibleInterval) {
this.selectedInterval = firstCompatibleInterval;
}
diff --git a/examples-standalone/finance-portfolio/src/app/components/stock-details/stock-details.component.html b/examples-standalone/finance-portfolio/src/app/components/stock-details/stock-details.component.html
index f3f224ca..0e8d88f0 100644
--- a/examples-standalone/finance-portfolio/src/app/components/stock-details/stock-details.component.html
+++ b/examples-standalone/finance-portfolio/src/app/components/stock-details/stock-details.component.html
@@ -1,9 +1,4 @@
-
+
-
+
-
+
@@ -53,8 +39,8 @@
- | {{ category | date:'HH:mm' }} |
- {{ category | date:'d/M' }} |
+ {{ category | date : 'HH:mm' }} |
+ {{ category | date : 'd/M' }} |
| Open: |
@@ -125,10 +111,6 @@
>
-
-
+
diff --git a/examples-standalone/finance-portfolio/src/app/components/stock-details/stock-details.component.ts b/examples-standalone/finance-portfolio/src/app/components/stock-details/stock-details.component.ts
index b706d151..e5fd4375 100644
--- a/examples-standalone/finance-portfolio/src/app/components/stock-details/stock-details.component.ts
+++ b/examples-standalone/finance-portfolio/src/app/components/stock-details/stock-details.component.ts
@@ -1,9 +1,8 @@
import { Component, ViewEncapsulation, Input, SimpleChanges, OnChanges } from '@angular/core';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';
-import { StockDataService } from 'src/app/services/stock-data.service';
import { PlotBand } from '@progress/kendo-angular-charts';
-
-import { StockIntervalDetails, Interval, IntervalUnitsMap, defaultRange } from 'src/app/models';
+import { Interval, IntervalUnitsMap, StockIntervalDetails, defaultRange } from '../../models';
+import { StockDataService } from '../../services/stock-data.service';
const currencies = {
EUR: '€',
@@ -18,7 +17,6 @@ const currencies = {
encapsulation: ViewEncapsulation.None
})
export class StockDetailsComponent implements OnChanges {
-
@Input() public chartType: 'candle' | 'line' | 'area' = 'candle';
@Input() public interval: Interval = { unit: 'hours', step: 1 };
@@ -43,7 +41,7 @@ export class StockDetailsComponent implements OnChanges {
private previousColumnChartItem: StockIntervalDetails = { volume: 100 };
- constructor(private stockDataService: StockDataService) { }
+ constructor(private stockDataService: StockDataService) {}
public ngOnChanges(changes: SimpleChanges): void {
if (changes['interval'] || changes['range'] || changes['symbol']) {
@@ -60,19 +58,19 @@ export class StockDetailsComponent implements OnChanges {
public itemColor = (args: any) => {
const current: StockIntervalDetails = args.dataItem;
- const currentLargerThenPrev = !this.previousColumnChartItem || (current.volume >= this.previousColumnChartItem.volume);
+ const currentLargerThenPrev = !this.previousColumnChartItem || current.volume >= this.previousColumnChartItem.volume;
if (current.volume) {
this.previousColumnChartItem = args.dataItem;
}
return currentLargerThenPrev ? '#5CB85C' : '#FF6358';
- }
+ };
public configureVolumeValueAxisHeight(): void {
// setting the valueAxis height of the column chart to four times the height of the largest `volume` value
// (contains the column series in just one fourth of the chart area)
- this.volumeValueAxisMax = Math.max(...this.stockData.map(stock => stock.volume)) * 4;
+ this.volumeValueAxisMax = Math.max(...this.stockData.map((stock) => stock.volume)) * 4;
}
private composeCategoryPlotBands(): void {
diff --git a/examples-standalone/finance-portfolio/src/app/components/stock-list/stock-list.component.html b/examples-standalone/finance-portfolio/src/app/components/stock-list/stock-list.component.html
index 318f6fca..e5157a58 100644
--- a/examples-standalone/finance-portfolio/src/app/components/stock-list/stock-list.component.html
+++ b/examples-standalone/finance-portfolio/src/app/components/stock-list/stock-list.component.html
@@ -16,18 +16,12 @@
(valueChange)="addStockToPortfolio($event)"
>
+
Add new
-
](https://www.telerik.com/kendo-angular-ui/) [](https://angular.io/)
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.3.
+# Using Kendo UI for Angular
-## Development server
+This Kendo UI for Angular sample project demonstrates how to use [Kendo UI for Angular components](https://www.telerik.com/kendo-angular-ui/components) within a coffee warehouse prototype application and visualize data. Currently, [the example is deployed on GitHub pages](https://telerik.github.io/kendo-angular/coffee-warehouse).
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+Used Kendo UI for Angular Components:
+ - [Buttons](https://www.telerik.com/kendo-angular-ui/components/buttons/button/)
+ - [Charts](https://www.telerik.com/kendo-angular-ui/components/charts/)
+ - [DateInputs](https://www.telerik.com/kendo-angular-ui/components/dateinputs/)
+ - [DropDonws](https://www.telerik.com/kendo-angular-ui/components/dropdowns/)
+ - [Editor](https://www.telerik.com/kendo-angular-ui/components/editor/)
+ - [Grid](https://www.telerik.com/kendo-angular-ui/components/grid/)
+ - [Inputs](https://www.telerik.com/kendo-angular-ui/components/inputs/)
+ - [Layout](https://www.telerik.com/kendo-angular-ui/components/layout/)
+ - [Notification](https://www.telerik.com/kendo-angular-ui/components/notification/)
+ - [Scheduler](https://www.telerik.com/kendo-angular-ui/components/scheduler/)
+ - [Uploads](https://www.telerik.com/kendo-angular-ui/components/uploads/)
-## Code scaffolding
+## In This Article
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+* [Setting Up the Project](#setting-up-the-project)
+* [Getting Started](#getting-started)
+* [Building for Development](building-for-development)
+* [Serve in Production](serve-in-production)
-## Build
+## Setting Up the Project
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+The sample project runs with the [currently supported Angular version](https://www.telerik.com/kendo-angular-ui/components/installation/requirements/#toc-angular).
-## Running unit tests
+## Getting Started
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+1. Clone the repository of the sample application locally by running `git clone https://github.com/telerik/kendo-angular.git`.
+1. Navigate to the project folder by running `cd examples-standalone/coffee-warehouse`.
+1. Install dependencies with NPM by running `npm install`.
-## Running end-to-end tests
+## Building for Development
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+To run the project:
+1. Execute the `ng serve` command in the terminal window for a dev server.
+1. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-## Further help
+## Serve in Production
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Run `npm run serve-prod` to run the project in production mode.
\ No newline at end of file
diff --git a/examples-standalone/finance-portfolio/.browserslistrc b/examples-standalone/finance-portfolio/.browserslistrc
deleted file mode 100644
index 80848532..00000000
--- a/examples-standalone/finance-portfolio/.browserslistrc
+++ /dev/null
@@ -1,12 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# You can see what browsers were selected by your queries by running:
-# npx browserslist
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
diff --git a/examples-standalone/finance-portfolio/.editorconfig b/examples-standalone/finance-portfolio/.editorconfig
index b585a761..59d9a3a3 100644
--- a/examples-standalone/finance-portfolio/.editorconfig
+++ b/examples-standalone/finance-portfolio/.editorconfig
@@ -4,10 +4,13 @@ root = true
[*]
charset = utf-8
indent_style = space
-indent_size = 4
+indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
+[*.ts]
+quote_type = single
+
[*.md]
max_line_length = off
trim_trailing_whitespace = false
diff --git a/examples-standalone/finance-portfolio/.gitignore b/examples-standalone/finance-portfolio/.gitignore
index 574ca989..0711527e 100644
--- a/examples-standalone/finance-portfolio/.gitignore
+++ b/examples-standalone/finance-portfolio/.gitignore
@@ -1,21 +1,18 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
-# compiled output
+# Compiled output
/dist
/tmp
/out-tsc
-# Only exists if Bazel was run
/bazel-out
-# dependencies
+# Node
/node_modules
-
-# profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
+npm-debug.log
+yarn-error.log
# IDEs and editors
-/.idea
+.idea/
.project
.classpath
.c9/
@@ -23,7 +20,7 @@ speed-measure-plugin.json
.settings/
*.sublime-workspace
-# IDE - VSCode
+# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
@@ -31,17 +28,15 @@ speed-measure-plugin.json
!.vscode/extensions.json
.history/*
-# misc
+# Miscellaneous
/.angular/cache
-/.sass-cache
+.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
-npm-debug.log
-yarn-error.log
testem.log
/typings
-# System Files
+# System files
.DS_Store
Thumbs.db
diff --git a/examples-standalone/finance-portfolio/.prettierrc b/examples-standalone/finance-portfolio/.prettierrc
new file mode 100644
index 00000000..2e30baed
--- /dev/null
+++ b/examples-standalone/finance-portfolio/.prettierrc
@@ -0,0 +1,7 @@
+{
+ "trailingComma": "none",
+ "printWidth": 140,
+ "singleQuote": true,
+ "tabWidth": 4,
+ "quoteProps": "consistent"
+ }
diff --git a/examples-standalone/finance-portfolio/README.md b/examples-standalone/finance-portfolio/README.md
index 6f5d55b9..fa30b4c3 100644
--- a/examples-standalone/finance-portfolio/README.md
+++ b/examples-standalone/finance-portfolio/README.md
@@ -1,4 +1,4 @@
-[
](https://www.telerik.com/kendo-angular-ui/) [](https://angular.io/)
+[