-
Notifications
You must be signed in to change notification settings - Fork 213
/
heatmap.component.ts
114 lines (100 loc) · 3.96 KB
/
heatmap.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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';
declare var kendo: any;
@Component({
selector: 'app-heatmap',
templateUrl: './heatmap.component.html',
styleUrls: ['./heatmap.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class HeatmapComponent implements AfterViewInit, OnDestroy {
@ViewChild('heatmap', { static: false }) heatmap: ElementRef;
private data: Array<any>;
private treeData: any;
private treeMap: any;
private tooltip: any;
constructor(public service: StockDataService) {
this.data = service.getHeatmapStocks();
const prizeUpItems = this.data
.filter((item: Stock) => item.change_pct > 0)
.map((item: Stock) => ({
symbol: item.symbol,
name: item.name,
price: formatCurrency(item.price),
value: formatCurrency(Number(item.market_cap)),
change: item.change_pct
}));
const prizeDownItems = this.data
.filter((item: Stock) => item.change_pct < 0)
.map((item: Stock) => ({
symbol: item.symbol,
name: item.name,
price: formatCurrency(item.price),
value: formatCurrency(Number(item.market_cap)),
change: item.change_pct }));
this.treeData = [
{
items: [
{ value: 1, items: prizeDownItems },
{ value: 2, items: prizeUpItems }
]
}
];
}
public ngAfterViewInit(): void {
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: ({ dataItem }) => {
return `<div>`
+ dataItem.symbol + `<div>${ dataItem.change }%</div></div>`;
}
}).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(e.target.closest('.k-treemap-tile'));
const cssClass = (value: number): string => {
return value > 0 ? 'positive-value' : 'negative-value';
};
return `
<div class="hm-symbol">${ item.symbol }</div>
<div class="hm-symbol-long-name">${ item.name }</div>
<div>
<span class="mr-2">Price: </span>
<span>
${ item.price }
</span>
</div>
<div>
<span class="mr-2">Change: </span>
<span class="${ cssClass(item.change) }">
${ (item.change > 0 ? '+' : '') }${ item.change }%
<span>
</div>
<div>
<span class="mr-2">Market Cap: </span><span>${ item.value }<span>
</div>
`;
}
}).data('kendoTooltip');
}
public ngOnDestroy(): void {
kendo.destroy(this.treeMap);
kendo.destroy(this.tooltip);
}
}