Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Web Components Binding Live Data
Ignite UI for Web Components Data Table / Data Grid는 초당 수천 건의 업데이트를 처리 할 수 있으며 사용자가 수행 할 수있는 모든 상호 작용에 대해 그리드의 응답 속도를 유지할 수 있습니다. 다음 샘플을 사용하여 데이터 업데이트 간격과 데이터 업데이트 볼륨을 조정하여 다양한 라이브 데이터 시나리오에서 그리드 처리의 성능을 확인할 수 있습니다.
Web Components Binding Live Data Example
/* tslint:disable */
export const Regions: any[] = [
{
"Name": "North America",
"Countries": [ "Canada", "United States", "Mexico" ]
},
{
"Name": "Middle East",
"Countries": [ "Turkey", "Iraq", "Saudi Arabia", "Syria", "UAE", "Israel", "Jordan", "Lebanon", "Oman", "Kuwait", "Qatar", "Bahrain", "Iran" ]
},
{
"Name": "Europe",
"Countries": [ "Russia", "Germany", "France", "United Kingdom", "Italy", "Spain", "Poland", "Romania", "Netherlands", "Belgium", "Greece",
"Portugal", "Czech Republic", "Hungary", "Sweden", "Austria", "Switzerland", "Bulgaria", "Denmark", "Finland", "Slovakia", "Norway",
"Ireland", "Croatia", "Slovenia", "Estonia", "Iceland",]
},
{
"Name": "Africa",
"Countries": [ "Nigeria", "Ethiopia", "Egypt", "South Africa", "Algeria", "Morocco", "Cameroon", "Niger", "Senegal", "Tunisia", "Libya"]
},
{
"Name": "Asia Pacific",
"Countries": [ "Afghanistan", "Australia", "Azerbaijan", "China", "Hong Kong", "India", "Indonesia",
"Japan", "Malaysia", "New Zealand", "Pakistan", "Philippines", "Korea", "Singapore", "Taiwan", "Thailand"]
},
{
"Name": "South America",
"Countries": [ "Argentina", "Bolivia", "Brazil", "Chile", "Colombia", "Ecuador", "Guyana", "Paraguay", "Peru", "Suriname", "Uruguay", "Venezuela" ]
}
]
export const DealType: any[] = [
"Buy", "Sell"
]
export const Contracts: any[] = [
"Forwards", "Futures", "Options", "Swap", "CFD"
]
export const Settlements: any[] = [
"Credit", "Cash", "Loan"
]
export const SectorTypes: any[] = [
"Public", "Private", "Government"
]
export const CurrencyTypes: any[] = [
"USD", "EUR", "PLN", "GBP", "YEN"
]
export const CountryRisks: any[] = [
"Low", "High",
]
export const SecurityTypes: any[] = [
"Poor", "Good", "High",
]
export const IssuerNames: any[] = [
"American Airlines", "Delta Airlines", "Southwest", "FedEx",
]
export const RatingTypes: any[] = [
"AAA", "BBB", "CCC",
]
export const DefaultData: any[] = [
{
"IndGroup": "Airlines",
"IndSector": "Consumer, Cyclical",
"IndCategory": "Airlines",
// "Sector": "Public",
// "Sector": "Pfd",
// "Contract": "Complete",
// "Issuer": "AMERICAN AIRLINES GROUP",
// "Rating": "WR",
"Fitch": "N.A.",
"Collateral": "Assets",
// "Currency": "USD",
// "Security": "001765866 Pfd",
"Transactions": "1765866",
// "Ticker": "AAL",
"CPN": "7.875",
"Maturity": "7/13/2022",
"Spread": 28.302,
"KRD_3YR": 0.06,
"KRD_5YR": 0.36,
"KRD_1YR": -0.17,
}];
export const DataItems: any[] = [
{
"Category": "Metal",
"Type": "Gold",
"Spread": 0.01,
"Open": 1281.10,
"Price": 1280.7317,
"Buy": 1280.7267,
"Sell": 1280.7367,
"Change": -0.3683,
"Change (%)": -0.0287,
"Volume": 48387,
"High (D)": 1289.50,
"Low (D)": 1279.10,
"High (Y)": 1306,
"Low (Y)": 1047.20,
"Start (Y)": 1176.60,
"Change On Year(%)": 8.8502
},
{
"Category": "Metal",
"Type": "Silver",
"Spread": 0.01,
"Open": 17.43,
"Price": 17.42,
"Buy": 17.43,
"Sell": 17.43,
"Change": -0.01,
"Change (%)": -0.0574,
"Volume": 11720,
"High (D)": 17.51,
"Low (D)": 17.37,
"High (Y)": 18.06,
"Low (Y)": 13.73,
"Start (Y)": 15.895,
"Change On Year(%)": 9.5942
},
{
"Category": "Metal",
"Type": "Copper",
"Spread": 0.02,
"Open": 2.123,
"Price": 2.113,
"Buy": 2.123,
"Sell": 2.123,
"Change": -0.01,
"Change (%)": -0.471,
"Volume": 28819,
"High (D)": 2.16,
"Low (D)": 2.11,
"High (Y)": 2.94,
"Low (Y)": 1.96,
"Start (Y)": 2.45,
"Change On Year(%)": -13.7551
},
{
"Category": "Metal",
"Type": "Platinum",
"Spread": 0.01,
"Open": 1071.60,
"Price": 1071.0993,
"Buy": 1071.0943,
"Sell": 1071.1043,
"Change": -0.5007,
"Change (%)": -0.0467,
"Volume": 3039,
"High (D)": 1081.20,
"Low (D)": 1070.50,
"High (Y)": 1120.60,
"Low (Y)": 812.40,
"Start (Y)": 966.50,
"Change On Year(%)": 10.8225
},
{
"Category": "Metal",
"Type": "Palladium",
"Spread": 0.01,
"Open": 600.55,
"Price": 601.0005,
"Buy": 600.9955,
"Sell": 601.0055,
"Change": 0.4505,
"Change (%)": 0.075,
"Volume": 651,
"High (D)": 607.20,
"Low (D)": 598.40,
"High (Y)": 690,
"Low (Y)": 458.6,
"Start (Y)": 574.3,
"Change On Year(%)": 4.6492
},
{
"Category": "Oil",
"Type": "Oil",
"Spread": 0.015,
"Open": 45.54,
"Price": 45.7899,
"Buy": 45.7824,
"Sell": 45.7974,
"Change": 0.2499,
"Change (%)": 0.5487,
"Volume": 107196,
"High (D)": 45.94,
"Low (D)": 45.00,
"High (Y)": 65.28,
"Low (Y)": 30.79,
"Start (Y)": 48.035,
"Change On Year(%)": -4.6739
},
{
"Category": "Oil",
"Type": "Brent",
"Spread": 0.01,
"Open": 46.06,
"Price": 46.05,
"Buy": 46.06,
"Sell": 46.06,
"Change": -0.01,
"Change (%)": -0.0217,
"Volume": 59818,
"High (D)": 46.48,
"Low (D)": 45.60,
"High (Y)": 71.14,
"Low (Y)": 30.02,
"Start (Y)": 50.58,
"Change On Year(%)": -8.9561
},
{
"Category": "Oil",
"Type": "Natural Gas",
"Spread": 0.02,
"Open": 2.094,
"Price": 2.104,
"Buy": 2.094,
"Sell": 2.094,
"Change": 0.01,
"Change (%)": 0.4776,
"Volume": 2783,
"High (D)": 2.11,
"Low (D)": 2.09,
"High (Y)": 3.20,
"Low (Y)": 1.84,
"Start (Y)": 2.52,
"Change On Year(%)": -16.5079
},
{
"Category": "Oil",
"Type": "Gas",
"Spread": 0.015,
"Open": 1.5086,
"Price": 1.9532,
"Buy": 1.9457,
"Sell": 1.9607,
"Change": 0.4446,
"Change (%)": 29.4686,
"Volume": 2646,
"High (D)": 1.9532,
"Low (D)": 1.50,
"High (Y)": 2.05,
"Low (Y)": 1.15,
"Start (Y)": 1.60,
"Change On Year(%)": 22.0727
},
{
"Category": "Oil",
"Type": "Diesel",
"Spread": 0.015,
"Open": 1.3474,
"Price": 1.3574,
"Buy": 1.3474,
"Sell": 1.3474,
"Change": 0.01,
"Change (%)": 0.7422,
"Volume": 2971,
"High (D)": 1.36,
"Low (D)": 1.34,
"High (Y)": 2.11,
"Low (Y)": 0.92,
"Start (Y)": 1.515,
"Change On Year(%)": -10.4026
},
{
"Category": "Oil",
"Type": "Ethanol",
"Spread": 0.01,
"Open": 1.512,
"Price": 2.7538,
"Buy": 2.7488,
"Sell": 2.7588,
"Change": 1.2418,
"Change (%)": 82.1323,
"Volume": 14,
"High (D)": 2.7538,
"Low (D)": 1.1168,
"High (Y)": 2.7538,
"Low (Y)": 1.1168,
"Start (Y)": 1.475,
"Change On Year(%)": 86.7011
},
{
"Category": "Oil",
"Type": "Crude",
"Spread": 0.02,
"Open": 27.55,
"Price": 27.58,
"Buy": 27.55,
"Sell": 27.55,
"Change": 0.03,
"Change (%)": 0.1089,
"Volume": 12,
"High (D)": 27.55,
"Low (D)": 27.55,
"High (Y)": 29.32,
"Low (Y)": 21.28,
"Start (Y)": 25.30,
"Change On Year(%)": 9.0119
},
{
"Category": "Oil",
"Type": "Coal",
"Spread": 0.015,
"Open": 0.4363,
"Price": 0.4163,
"Buy": 0.4363,
"Sell": 0.4363,
"Change": -0.02,
"Change (%)": -4.584,
"Volume": 3,
"High (D)": 0.4363,
"Low (D)": 0.4363,
"High (Y)": 0.4841,
"Low (Y)": 0.3954,
"Start (Y)": 0.4398,
"Change On Year(%)": -5.3326
},
{
"Category": "Agriculture",
"Type": "Wheat",
"Spread": 0.01,
"Open": 465.50,
"Price": 465.52,
"Buy": 465.50,
"Sell": 465.50,
"Change": 0.02,
"Change (%)": 0.0043,
"Volume": 4318,
"High (D)": 467.00,
"Low (D)": 463.25,
"High (Y)": 628.50,
"Low (Y)": 449.50,
"Start (Y)": 539.00,
"Change On Year(%)": -13.6327
},
{
"Category": "Agriculture",
"Type": "Corn",
"Spread": 0.01,
"Open": 379.50,
"Price": 379.8026,
"Buy": 379.7976,
"Sell": 379.8076,
"Change": 0.3026,
"Change (%)": 0.0797,
"Volume": 11266,
"High (D)": 381.00,
"Low (D)": 377.75,
"High (Y)": 471.25,
"Low (Y)": 351.25,
"Start (Y)": 411.25,
"Change On Year(%)": -7.6468
},
{
"Category": "Agriculture",
"Type": "Sugar",
"Spread": 0.01,
"Open": 15.68,
"Price": 14.6742,
"Buy": 14.6692,
"Sell": 14.6792,
"Change": -1.0058,
"Change (%)": -6.4146,
"Volume": 4949,
"High (D)": 15.70,
"Low (D)": 14.6742,
"High (Y)": 16.87,
"Low (Y)": 11.37,
"Start (Y)": 14.12,
"Change On Year(%)": 3.9249
},
{
"Category": "Agriculture",
"Type": "Soybean",
"Spread": 0.01,
"Open": 1038.00,
"Price": 1038.6171,
"Buy": 1038.6121,
"Sell": 1038.6221,
"Change": 0.6171,
"Change (%)": 0.0595,
"Volume": 20356,
"High (D)": 1044.00,
"Low (D)": 1031.75,
"High (Y)": 1057.00,
"Low (Y)": 859.50,
"Start (Y)": 958.25,
"Change On Year(%)": 8.3869
},
{
"Category": "Agriculture",
"Type": "Soy oil",
"Spread": 0.01,
"Open": 33.26,
"Price": 33.7712,
"Buy": 33.7662,
"Sell": 33.7762,
"Change": 0.5112,
"Change (%)": 1.5371,
"Volume": 10592,
"High (D)": 33.7712,
"Low (D)": 33.06,
"High (Y)": 35.43,
"Low (Y)": 26.61,
"Start (Y)": 31.02,
"Change On Year(%)": 8.8692
},
{
"Category": "Agriculture",
"Type": "Soy Meat",
"Spread": 0.01,
"Open": 342.60,
"Price": 342.62,
"Buy": 342.60,
"Sell": 342.60,
"Change": 0.02,
"Change (%)": 0.0058,
"Volume": 5646,
"High (D)": 345.40,
"Low (D)": 340.30,
"High (Y)": 353.40,
"Low (Y)": 261.70,
"Start (Y)": 307.55,
"Change On Year(%)": 11.403
},
{
"Category": "Agriculture",
"Type": "OJ Future",
"Spread": 0.01,
"Open": 140.60,
"Price": 140.1893,
"Buy": 140.1843,
"Sell": 140.1943,
"Change": -0.4107,
"Change (%)": -0.2921,
"Volume": 7,
"High (D)": 140.1893,
"Low (D)": 0.00,
"High (Y)": 155.95,
"Low (Y)": 113.00,
"Start (Y)": 134.475,
"Change On Year(%)": 4.2493
},
{
"Category": "Agriculture",
"Type": "Coffee",
"Spread": 0.01,
"Open": 125.70,
"Price": 125.69,
"Buy": 125.70,
"Sell": 125.70,
"Change": -0.01,
"Change (%)": -0.008,
"Volume": 1654,
"High (D)": 125.80,
"Low (D)": 125.00,
"High (Y)": 155.75,
"Low (Y)": 115.35,
"Start (Y)": 135.55,
"Change On Year(%)": -7.2741
},
{
"Category": "Agriculture",
"Type": "Cocoa",
"Spread": 0.01,
"Open": 3076.00,
"Price": 3076.03,
"Buy": 3076.00,
"Sell": 3076.00,
"Change": 0.03,
"Change (%)": 0.001,
"Volume": 978,
"High (D)": 3078.00,
"Low (D)": 3066.00,
"High (Y)": 3406.00,
"Low (Y)": 2746.00,
"Start (Y)": 3076.00,
"Change On Year(%)": 0.001
},
{
"Category": "Agriculture",
"Type": "Rice",
"Spread": 0.01,
"Open": 11.245,
"Price": 10.4154,
"Buy": 10.4104,
"Sell": 10.4204,
"Change": -0.8296,
"Change (%)": -7.3779,
"Volume": 220,
"High (D)": 11.38,
"Low (D)": 10.4154,
"High (Y)": 14.14,
"Low (Y)": 9.70,
"Start (Y)": 11.92,
"Change On Year(%)": -12.6228
},
{
"Category": "Agriculture",
"Type": "Oats",
"Spread": 0.01,
"Open": 194.50,
"Price": 194.2178,
"Buy": 194.2128,
"Sell": 194.2228,
"Change": -0.2822,
"Change (%)": -0.1451,
"Volume": 64,
"High (D)": 195.75,
"Low (D)": 194.00,
"High (Y)": 241.25,
"Low (Y)": 183.75,
"Start (Y)": 212.50,
"Change On Year(%)": -8.6034
},
{
"Category": "Agriculture",
"Type": "Milk",
"Spread": 0.01,
"Open": 12.87,
"Price": 12.86,
"Buy": 12.87,
"Sell": 12.87,
"Change": -0.01,
"Change (%)": -0.0777,
"Volume": 7,
"High (D)": 12.89,
"Low (D)": 12.81,
"High (Y)": 16.96,
"Low (Y)": 12.81,
"Start (Y)": 14.885,
"Change On Year(%)": -13.6043
},
{
"Category": "Agriculture",
"Type": "Cotton",
"Spread": 0.01,
"Open": 61.77,
"Price": 61.76,
"Buy": 61.77,
"Sell": 61.77,
"Change": -0.01,
"Change (%)": -0.0162,
"Volume": 3612,
"High (D)": 62.06,
"Low (D)": 61.32,
"High (Y)": 67.59,
"Low (Y)": 54.33,
"Start (Y)": 60.96,
"Change On Year(%)": 1.3123
},
{
"Category": "Agriculture",
"Type": "Lumber",
"Spread": 0.01,
"Open": 303.90,
"Price": 304.5994,
"Buy": 304.5944,
"Sell": 304.6044,
"Change": 0.6994,
"Change (%)": 0.2302,
"Volume": 2,
"High (D)": 304.5994,
"Low (D)": 303.90,
"High (Y)": 317.10,
"Low (Y)": 236.00,
"Start (Y)": 276.55,
"Change On Year(%)": 10.1426
},
{
"Category": "Livestock",
"Type": "LV Cattle",
"Spread": 0.01,
"Open": 120.725,
"Price": 120.705,
"Buy": 120.725,
"Sell": 120.725,
"Change": -0.02,
"Change (%)": -0.0166,
"Volume": 4,
"High (D)": 120.725,
"Low (D)": 120.725,
"High (Y)": 147.98,
"Low (Y)": 113.90,
"Start (Y)": 130.94,
"Change On Year(%)": -7.8166
},
{
"Category": "Livestock",
"Type": "FD Cattle",
"Spread": 0.01,
"Open": 147.175,
"Price": 148.6065,
"Buy": 148.6015,
"Sell": 148.6115,
"Change": 1.4315,
"Change (%)": 0.9727,
"Volume": 5,
"High (D)": 148.6065,
"Low (D)": 147.175,
"High (Y)": 190.00,
"Low (Y)": 138.10,
"Start (Y)": 164.05,
"Change On Year(%)": -9.4139
},
{
"Category": "Livestock",
"Type": "Lean Hogs",
"Spread": 0.01,
"Open": 81.275,
"Price": 81.8146,
"Buy": 81.8096,
"Sell": 81.8196,
"Change": 0.5396,
"Change (%)": 0.664,
"Volume": 1,
"High (D)": 81.8146,
"Low (D)": 81.275,
"High (Y)": 83.98,
"Low (Y)": 70.25,
"Start (Y)": 77.115,
"Change On Year(%)": 6.0943
},
{
"Category": "Currencies",
"Type": "USD IDX Future",
"Spread": 0.02,
"Open": 93.88,
"Price": 93.7719,
"Buy": 93.7619,
"Sell": 93.7819,
"Change": -0.1081,
"Change (%)": -0.1151,
"Volume": 5788,
"High (D)": 94.05,
"Low (D)": 93.7534,
"High (Y)": 100.70,
"Low (Y)": 91.88,
"Start (Y)": 96.29,
"Change On Year(%)": -2.6151
},
{
"Category": "Currencies",
"Type": "USD/JPY Future",
"Spread": 0.02,
"Open": 9275.50,
"Price": 9277.3342,
"Buy": 9277.3242,
"Sell": 9277.3442,
"Change": 1.8342,
"Change (%)": 0.0198,
"Volume": 47734,
"High (D)": 9277.3342,
"Low (D)": 0.93,
"High (Y)": 9483.00,
"Low (Y)": 0.93,
"Start (Y)": 4741.965,
"Change On Year(%)": 95.6432
},
{
"Category": "Currencies",
"Type": "GBP/USD Future",
"Spread": 0.02,
"Open": 1.4464,
"Price": 1.1941,
"Buy": 1.1841,
"Sell": 1.2041,
"Change": -0.2523,
"Change (%)": -17.4441,
"Volume": 29450,
"High (D)": 1.45,
"Low (D)": 1.1941,
"High (Y)": 1.59,
"Low (Y)": 1.1941,
"Start (Y)": 1.485,
"Change On Year(%)": -19.59
},
{
"Category": "Currencies",
"Type": "AUD/USD Future",
"Spread": 0.02,
"Open": 0.7344,
"Price": 0.7444,
"Buy": 0.7344,
"Sell": 0.7344,
"Change": 0.01,
"Change (%)": 1.3617,
"Volume": 36764,
"High (D)": 0.74,
"Low (D)": 0.73,
"High (Y)": 0.79,
"Low (Y)": 0.68,
"Start (Y)": 0.735,
"Change On Year(%)": 1.2789
},
{
"Category": "Currencies",
"Type": "USD/CAD Future",
"Spread": 0.02,
"Open": 0.7744,
"Price": 0.9545,
"Buy": 0.9445,
"Sell": 0.9645,
"Change": 0.1801,
"Change (%)": 23.2622,
"Volume": 13669,
"High (D)": 0.9545,
"Low (D)": 0.77,
"High (Y)": 0.9545,
"Low (Y)": 0.68,
"Start (Y)": 0.755,
"Change On Year(%)": 26.4295
},
{
"Category": "Currencies",
"Type": "USD/CHF Future",
"Spread": 0.02,
"Open": 1.0337,
"Price": 1.0437,
"Buy": 1.0337,
"Sell": 1.0337,
"Change": 0.01,
"Change (%)": 0.9674,
"Volume": 5550,
"High (D)": 1.03,
"Low (D)": 1.03,
"High (Y)": 1.11,
"Low (Y)": 0.98,
"Start (Y)": 1.045,
"Change On Year(%)": -0.1244
},
{
"Category": "Index",
"Type": "DOW Future",
"Spread": 0.01,
"Open": 17711.00,
"Price": 17712.1515,
"Buy": 17712.1465,
"Sell": 17712.1565,
"Change": 1.1515,
"Change (%)": 0.0065,
"Volume": 22236,
"High (D)": 17727.00,
"Low (D)": 17642.00,
"High (Y)": 18083.00,
"Low (Y)": 15299.00,
"Start (Y)": 16691.00,
"Change On Year(%)": 6.118
},
{
"Category": "Index",
"Type": "S&P Future",
"Spread": 0.01,
"Open": 2057.50,
"Price": 2056.6018,
"Buy": 2056.5968,
"Sell": 2056.6068,
"Change": -0.8982,
"Change (%)": -0.0437,
"Volume": 142780,
"High (D)": 2059.50,
"Low (D)": 2049.00,
"High (Y)": 2105.50,
"Low (Y)": 1794.50,
"Start (Y)": 1950.00,
"Change On Year(%)": 5.4668
},
{
"Category": "Index",
"Type": "NAS Future",
"Spread": 0.01,
"Open": 4341.25,
"Price": 4341.28,
"Buy": 4341.25,
"Sell": 4341.25,
"Change": 0.03,
"Change (%)": 0.0007,
"Volume": 18259,
"High (D)": 4347.00,
"Low (D)": 4318.00,
"High (Y)": 4719.75,
"Low (Y)": 3867.75,
"Start (Y)": 4293.75,
"Change On Year(%)": 1.107
},
{
"Category": "Index",
"Type": "S&P MID MINI",
"Spread": 0.01,
"Open": 1454.30,
"Price": 1455.7812,
"Buy": 1455.7762,
"Sell": 1455.7862,
"Change": 1.4812,
"Change (%)": 0.1018,
"Volume": 338,
"High (D)": 1455.7812,
"Low (D)": 1448.00,
"High (Y)": 1527.30,
"Low (Y)": 1236.00,
"Start (Y)": 1381.65,
"Change On Year(%)": 5.3654
},
{
"Category": "Index",
"Type": "S&P 600 MINI",
"Spread": 0.01,
"Open": 687.90,
"Price": 687.88,
"Buy": 687.90,
"Sell": 687.90,
"Change": -0.02,
"Change (%)": -0.0029,
"Volume": 0,
"High (D)": 0.00,
"Low (D)": 0.00,
"High (Y)": 620.32,
"Low (Y)": 595.90,
"Start (Y)": 608.11,
"Change On Year(%)": 13.1177
},
{
"Category": "Interest Rate",
"Type": "US 30YR Future",
"Spread": 0.01,
"Open": 164.875,
"Price": 164.1582,
"Buy": 164.1532,
"Sell": 164.1632,
"Change": -0.7168,
"Change (%)": -0.4347,
"Volume": 28012,
"High (D)": 165.25,
"Low (D)": 164.0385,
"High (Y)": 169.38,
"Low (Y)": 151.47,
"Start (Y)": 160.425,
"Change On Year(%)": 2.3271
},
{
"Category": "Interest Rate",
"Type": "US 2Y Future",
"Spread": 0.01,
"Open": 109.3984,
"Price": 109.3884,
"Buy": 109.3984,
"Sell": 109.3984,
"Change": -0.01,
"Change (%)": -0.0091,
"Volume": 17742,
"High (D)": 109.41,
"Low (D)": 109.38,
"High (Y)": 109.80,
"Low (Y)": 108.62,
"Start (Y)": 109.21,
"Change On Year(%)": 0.1634
},
{
"Category": "Interest Rate",
"Type": "US 10YR Future",
"Spread": 0.01,
"Open": 130.5625,
"Price": 130.5825,
"Buy": 130.5625,
"Sell": 130.5625,
"Change": 0.02,
"Change (%)": 0.0153,
"Volume": 189310,
"High (D)": 130.63,
"Low (D)": 130.44,
"High (Y)": 132.64,
"Low (Y)": 125.48,
"Start (Y)": 129.06,
"Change On Year(%)": 1.1797
},
{
"Category": "Interest Rate",
"Type": "Euro$ 3M",
"Spread": 0.01,
"Open": 99.18,
"Price": 99.17,
"Buy": 99.18,
"Sell": 99.18,
"Change": -0.01,
"Change (%)": -0.0101,
"Volume": 29509,
"High (D)": 99.18,
"Low (D)": 99.17,
"High (Y)": 99.38,
"Low (Y)": 98.41,
"Start (Y)": 98.895,
"Change On Year(%)": 0.2781
}
];
interface UpdateResponse {
data: any[];
recordsUpdated: number;
}
/* tslint:enable */
export class LiveFinancialData {
public static generateData(count: number): any[] {
const data: any[] = [];
for (let i = 0; i < count; i++) {
const rand = Math.floor(Math.random() * Math.floor(DataItems.length));
const item = Object.assign({}, DataItems[rand]);
item.Settlement = this.getRandomItem(Settlements);
item.Contract = this.getRandomItem(Contracts);
const region = this.getRandomItem(Regions);
item.Region = region.Name;
item.Country = this.getRandomItem(region.Countries);
item.Risk = this.getRandomItem(CountryRisks);
item.Sector = this.getRandomItem(SectorTypes);
item.Currency = this.getRandomItem(CurrencyTypes);
item.Security = this.getRandomItem(SecurityTypes);
item.Issuer = this.getRandomItem(IssuerNames);
item.Maturity = this.getRandomDate();
item.Rating = this.getRandomItem(RatingTypes);
for (const mockData of DefaultData) {
for (const prop in mockData) {
if (mockData.hasOwnProperty(prop)) {
item[prop] = mockData[prop];
}
}
}
item.ID = i;
this.randomizeDataValues(item);
data.push(item);
}
return data;
}
public static updateAllPrices(data: any[]): any[] {
const currData = [];
for (const dataRow of data) {
const item = Object.assign({}, dataRow);
this.randomizeDataValues(item);
currData.push(item);
}
return currData;
}
public static updateRandomPrices(data: any[]): any {
const currData = data.slice(0, data.length + 1);
let y = 0;
for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) {
const item = Object.assign({}, data[i]);
this.randomizeDataValues(item);
currData[i] = item;
y++;
}
return currData;
}
public static updateRandomPrices2(data: any[]): UpdateResponse {
const currData = data.slice(0, data.length + 1);
let y = 0;
for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) {
const item = Object.assign({}, data[i]);
this.randomizeDataValues(item);
currData[i] = item;
y++;
}
return {data: currData, recordsUpdated: y };
}
public static randomizeDataValues(item: any) {
const changeP = "Change (%)";
const res = this.getRandomPrice(item.Price);
item.Change = res.Price - item.Price;
item.Price = res.Price;
item[changeP] = res.ChangePercent;
}
public static getRandomPrice(oldPrice: any): any {
const rnd = parseFloat(Math.random().toFixed(2));
const volatility = 2;
let newPrice = 0;
let changePercent = 2 * volatility * rnd;
if (changePercent > volatility) {
changePercent -= (2 * volatility);
}
const changeAmount = oldPrice * (changePercent / 100);
newPrice = oldPrice + changeAmount;
const result = { Price: 0, ChangePercent: 0 };
result.Price = Math.round(newPrice * 100) / 100;
result.ChangePercent = Math.round(changePercent * 100) / 100;
return result;
}
public static getRandomDate() {
const now: Date = new Date();
const month = this.getRandomNumber(0, 8);
const day = this.getRandomNumber(10, 27);
return new Date(now.getFullYear(), month, day);
}
public static getRandomItem(array: any[]): any {
const index = Math.round(this.getRandomNumber(0, array.length - 1));
return array[index];
}
public static getRandomNumber(min: number, max: number): number {
return Math.round(min + Math.random() * (max - min));
}
public static getRandomCountry(region: any): string {
if (region.Countries === undefined) {
return this.getRandomItem(Regions[2].Countries);
} else {
return this.getRandomItem(region.Countries);
}
}
}
tsimport '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';
import { LiveFinancialData } from './LiveFinancialData';
import { ListSortDirection } from 'igniteui-webcomponents-core';
import { DataGridCellLayoutPanel } from 'igniteui-webcomponents-data-grids';
import { DataGridPresenterManager } from 'igniteui-webcomponents-data-grids';
import { FilterFactory } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids';
import { IgcCellStyleRequestedEventArgs } from 'igniteui-webcomponents-data-grids';
import { IgcDataBindingEventArgs } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDefinitionBaseComponent } from 'igniteui-webcomponents-data-grids';
import { IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcItemToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcTextColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids';
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids';
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcTextHeaderComponent } from 'igniteui-webcomponents-data-grids';
import '@material/mwc-button';
import '@material/mwc-switch';
import '@material/mwc-slider';
import '@material/mwc-dialog';
ModuleManager.register(
IgcDataChartCategoryModule,
IgcDataGridModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
// TODO open chart on clicking a cell in the Chart column
// <igc-template-column id='chartTemplateColumn' field='Chart' width='60'>
// </igc-template-column>
// <igc-template-column id='gridTemplateColumn' field='Grid' width='80'>
// </igc-template-column>
export class DataGridBindingLiveData {
private grid: IgcDataGridComponent;
private goodColor = '#4EB862';
private badColor = '#FF134A';
private lastDataUpdate: Date = new Date();
private badBorder = '4px solid #FF134A';
private goodBorder = '4px solid #4EB862';
private ticking: boolean = false;
private isAllUpdate = false;
private liveButton: any;
private liveAllButton: any;
private stopButton: any;
private chartButton: any;
private frequencySpan: any;
private volumeSpan: any;
private chart!: IgcDataChartComponent;
private financialData: LiveFinancialData;
private state = {
data: LiveFinancialData.generateData(1000),
stopDisabled: true,
liveDisabled: false,
allDisabled: false,
frequency: 100,
volume: 1000,
canvasChecked: false,
groupingChecked: true,
heatChecked: true,
chartOpen: false,
priceByCountry: [] as FinancialItem[],
hiddenColumns: ['ID']
};
constructor() {
this.financialData = new LiveFinancialData();
this.onPriceStyleKey = this.onPriceStyleKey.bind(this);
this.onPriceCellUpdating = this.onPriceCellUpdating.bind(this);
this.onPriceDataBound = this.onPriceDataBound.bind(this);
this.onPriceAmountStyleKey = this.onPriceAmountStyleKey.bind(this);
this.onPriceAmountCellUpdating = this.onPriceAmountCellUpdating.bind(this);
this.onPricePercentStyleKey = this.onPricePercentStyleKey.bind(this);
this.onPricePercentCellUpdating = this.onPricePercentCellUpdating.bind(this);
this.onChartStyleKey = this.onChartStyleKey.bind(this);
this.onChartCellUpdating = this.onChartCellUpdating.bind(this);
this.onGridStyleKey = this.onGridStyleKey.bind(this);
this.onGridCellUpdating = this.onGridCellUpdating.bind(this);
this.onLiveClicked = this.onLiveClicked.bind(this);
this.onAllClicked = this.onAllClicked.bind(this);
this.onStopClicked = this.onStopClicked.bind(this);
this.onChartClicked = this.onChartClicked.bind(this);
this.onFrequencyChange = this.onFrequencyChange.bind(this);
this.onVolumeChange = this.onVolumeChange.bind(this);
this.onCanvasModeChanged = this.onCanvasModeChanged.bind(this);
this.onGroupingChanged = this.onGroupingChanged.bind(this);
this.onHeatChanged = this.onHeatChanged.bind(this);
this.updateButtonStates = this.updateButtonStates.bind(this);
this.updateDialogState = this.updateDialogState.bind(this);
this.updatePriceByCountry = this.updatePriceByCountry.bind(this);
this.updateSpanStates = this.updateSpanStates.bind(this);
this.grid = document.getElementById('grid') as IgcDataGridComponent;
this.grid.dataSource = this.state.data;
let priceTemplate = document.getElementById('priceTemplateColumn') as IgcTemplateColumnComponent;
priceTemplate.cellStyleKeyRequested = this.onPriceStyleKey;
priceTemplate.cellUpdating = this.onPriceCellUpdating;
priceTemplate.dataBound = this.onPriceDataBound;
let changeTemplate = document.getElementById('changeTemplateColumn') as IgcTemplateColumnComponent;
changeTemplate.cellStyleKeyRequested = this.onPriceAmountStyleKey;
changeTemplate.cellUpdating = this.onPriceAmountCellUpdating;
let percentTemplate = document.getElementById('percentTemplateColumn') as IgcTemplateColumnComponent;
percentTemplate.cellStyleKeyRequested = this.onPricePercentStyleKey;
percentTemplate.cellUpdating = this.onPricePercentCellUpdating;
// TODO set property settings (if any) in code-behind:
// let chartTemplate = document.getElementById('chartTemplateColumn') as IgcTemplateColumnComponent;
// if (chartTemplate) {
// chartTemplate.cellStyleKeyRequested = this.onChartStyleKey;
// chartTemplate.cellUpdating = this.onChartCellUpdating;
// }
// let gridTemplate = document.getElementById('gridTemplateColumn') as IgcTemplateColumnComponent;
// if (gridTemplate) {
// gridTemplate.cellStyleKeyRequested = this.onGridStyleKey;
// gridTemplate.cellUpdating = this.onGridCellUpdating;
// }
this.liveButton = document.getElementById('liveButton');
this.liveButton.onclick = () => {
this.onLiveClicked();
};
this.liveAllButton = document.getElementById('liveAllButton');
this.liveAllButton.onclick = () => {
this.onAllClicked();
};
this.stopButton = document.getElementById('stopButton');
this.stopButton.onclick = () => {
this.onStopClicked();
};
let self = this;
(document.getElementById('fSlider') as any)!.addEventListener('MDCSlider:change', function (ev: any, val: any) {
self.onFrequencyChange(ev, val);
});
(document.getElementById('fSlider') as any)!.addEventListener('MDCSlider:input', function (ev: any, val: any) {
self.onFrequencyChange(ev, val);
});
(document.getElementById('vSlider') as any)!.addEventListener('MDCSlider:change', function (ev: any, val: any) {
self.onVolumeChange(ev, val);
});
(document.getElementById('vSlider') as any)!.addEventListener('MDCSlider:input', function (ev: any, val: any) {
self.onVolumeChange(ev, val)
});
(document.getElementById('groupingSwitch') as any)!.addEventListener('change', function (ev: any, val: any) {
self.onGroupingChanged(ev);
});
(document.getElementById('heatSwitch') as any)!.addEventListener('change', function (ev: any, val: any) {
self.onHeatChanged(ev);
});
this.frequencySpan = document.getElementById('frequencySpan');
this.volumeSpan = document.getElementById('volumeSpan');
this.addGroups();
this.updateSpanStates();
}
removeGroups() {
this.grid.groupDescriptions.clear();
this.grid.flush();
}
addGroups() {
let g = new IgcColumnGroupDescription();
g.field = 'Category';
g.sortDirection = ListSortDirection.Descending;
this.grid.groupDescriptions.add(g);
g = new IgcColumnGroupDescription();
g.field = 'Contract';
g.sortDirection = ListSortDirection.Descending;
this.grid.groupDescriptions.add(g);
g = new IgcColumnGroupDescription();
g.field = 'Region';
g.sortDirection = ListSortDirection.Descending;
this.grid.groupDescriptions.add(g);
}
tick() {
if (!this.ticking) {
return;
}
if (!this.grid) {
window.setTimeout(() => this.tick(), 16);
return;
}
let sortedBySales = false;
// foreach (let item in this.grid.SortDescriptions)
// {
// if (item.PropertyName === 'YearToDateSales')
// {
// sortedBySales = true;
// }
// }
let toChange = Math.round(this.state.volume / 10);
let toChangeIndexes = {} as any;
let stillAnimating = false;
for (let i = 0; i < this.state.data.length; i++) {
let item = this.state.data[i];
if (item.PriceHeat !== 0) {
stillAnimating = true;
}
}
let now = new Date();
let intervalElapsed = false;
if ((+now - + this.lastDataUpdate) > this.state.frequency) {
intervalElapsed = true;
}
let useClear = this.isAllUpdate;
let updateAll = this.isAllUpdate;
if (updateAll) {
toChange = this.state.data.length;
}
let sortingByPrice = false;
for (let i = 0; i < this.grid.sortDescriptions.count; i++) {
if (this.grid.sortDescriptions.item(i).field === 'Price' ||
this.grid.sortDescriptions.item(i).field.indexOf('Change') >= 0) {
sortingByPrice = true;
}
}
let changing = false;
if (intervalElapsed) {
this.lastDataUpdate = new Date();
for (let i = 0; i < toChange; i++) {
let index = Math.round(Math.random() * this.state.data.length - 1);
while (toChangeIndexes[index.toString()] !== undefined) {
index = Math.round(Math.random() * this.state.data.length - 1);
}
toChangeIndexes[index.toString()] = true;
changing = true;
}
}
for (let i = 0; i < this.state.data.length; i++) {
let item = this.state.data[i];
if (toChangeIndexes[i.toString()] !== undefined) {
if (sortingByPrice && !useClear) {
this.grid.notifyRemoveItem(i, item);
LiveFinancialData.randomizeDataValues(item);
this.grid.notifyInsertItem(i, item);
} else {
LiveFinancialData.randomizeDataValues(item);
}
if (item.Change > 0) {
// item.YearToDateSales += Math.round(Math.random() * 4.0);
item.PriceHeat = 1;
} else {
item.PriceHeat = -1;
}
}
else {
if (item.PriceHeat > 0) {
item.PriceHeat -= .06;
if (item.PriceHeat < 0) {
item.PriceHeat = 0;
}
}
if (item.PriceHeat < 0) {
item.PriceHeat += .06;
if (item.PriceHeat > 0) {
item.PriceHeat = 0;
}
}
}
}
if (sortingByPrice && useClear && intervalElapsed) {
this.grid.actualDataSource.queueAutoRefresh();
}
// if (!sortingByPrice) {
// if (!useClear) {
if (!sortingByPrice || !intervalElapsed) {
this.grid.invalidateVisibleRows();
}
// }
// }
// this.this.grid.invalidateVisibleRows();
// actualDataSource.queueAutoRefresh();
if (intervalElapsed && this.state.chartOpen) {
this.updatePriceByCountry();
this.chart.notifyClearItems(this.state.priceByCountry);
}
window.setTimeout(() => this.tick(), 16);
}
updatePriceByCountry() {
let shouldPopulate = false;
if (this.state.priceByCountry.length === 0) {
shouldPopulate = true;
}
let priceByCountry = new Map<string, number>();
let countryNames = [];
for (let i = 0; i < this.state.data.length; i++) {
const currItem = this.state.data[i];
const currCountry = currItem.Country;
if (!currCountry) {
continue;
}
if (!priceByCountry.has(currCountry)) {
priceByCountry.set(currCountry, 0);
if (shouldPopulate) {
countryNames.push(currCountry);
}
}
let currVal = priceByCountry.get(currCountry);
if (currVal === undefined)
currVal = 0;
currVal += currItem.Price;
currVal = Math.round(currVal * 100.0) / 100.0;
priceByCountry.set(currCountry, currVal);
}
if (shouldPopulate) {
countryNames = countryNames.sort();
for (let i = 0; i < countryNames.length; i++) {
const price = priceByCountry.get(countryNames[i])
if (price !== undefined) {
this.state.priceByCountry.push({
Country: countryNames[i],
Price: price
})
}
}
} else {
for (let i = 0; i < this.state.priceByCountry.length; i++) {
const country = this.state.priceByCountry[i].Country;
const price = priceByCountry.get(country)
if (price !== undefined) {
this.state.priceByCountry[i].Price = price;
}
}
}
}
onPriceStyleKey(col: IgcDefinitionBaseComponent, args: IgcCellStyleRequestedEventArgs) {
let row: any | null = null;
if (this.grid && this.grid.actualDataSource) {
row = this.grid.actualDataSource.getItemAtIndex(args.rowNumber);
} else {
row = this.state.data[args.rowNumber];
}
if (row.Change >= 0) {
args.styleKey = 'priceShiftUp';
} else {
args.styleKey = 'priceShiftDown';
}
}
onPriceCellUpdating(grid: IgcTemplateColumnComponent, args: IgcTemplateCellUpdatingEventArgs) {
let row = args.cellInfo.rowItem;
let priceShiftUp = row.Change >= 0;
let templ = args.cellInfo as IgcTemplateCellInfo;
if (args.isCanvasBased) {
let resized = args.ensureCorrectSize();
if (resized || args.cellInfo.isContentDirty) {
args.renderStandardBackground();
let context: CanvasRenderingContext2D = args.context;
let iconText = 'trending_up';
let iconColor = this.goodColor;
let scale = window.devicePixelRatio;
if (scale !== 1.0) {
context.save();
context.scale(scale, scale);
}
if (priceShiftUp) {
iconText = 'trending_up';
iconColor = this.goodColor;
} else {
iconText = 'trending_down';
iconColor = this.badColor;
}
// context.fillStyle = 'blue';
// context.fillRect(0,0,args.cellInfo.width,args.cellInfo.height);
let txt = '$' + (+templ.value).toFixed(2);
context.font = '13px Verdana';
let width = context.measureText(txt).width;
context.font = '13px "Material Icons"';
let iconWidth = context.measureText(iconText).width;
let totalWidth = width + iconWidth;
context.font = '13px Verdana';
context.fillStyle = iconColor;
context.textBaseline = 'top';
context.fillText(txt, templ.width - (totalWidth + 5), (templ.height / 2.0) - 7);
context.font = '13px "Material Icons"';
context.fillStyle = iconColor;
context.textBaseline = 'top';
context.fillText(iconText, templ.width - (iconWidth + 5), (templ.height / 2.0) - 7);
if (scale !== 1.0) {
context.restore();
}
}
return;
}
let content = args.content as HTMLDivElement;
let sp: HTMLSpanElement;
// let icon: HTMLSpanElement = null;
if (content.childElementCount > 0) {
sp = content.children[0] as HTMLSpanElement;
// icon = content.children[1] as HTMLSpanElement;
} else {
content.style.textAlign = 'right';
sp = document.createElement('span');
// icon = document.createElement('span');
sp.style.font = '13px Verdana';
sp.style.verticalAlign = 'center';
content.appendChild(sp);
// content.appendChild(icon);
// icon.style.fontFamily = 'Material Icons';
// icon.style.fontSize = '13px';
// icon.style.fontFeatureSettings = 'liga';
// icon.style.verticalAlign = 'center';
}
sp.textContent = '$' + (+templ.value).toFixed(2);
if ((sp as any).__isUp === undefined ||
(sp as any).__isUp !== priceShiftUp) {
(sp as any).__isUp = priceShiftUp;
if (this.state.heatChecked) {
sp.style.color = "black";
} else if (priceShiftUp) {
// icon.textContent = 'trending_up';
// icon.style.color = this.goodColor;
sp.style.color = this.goodColor;
} else {
// icon.textContent = 'trending_down';
// icon.style.color = this.badColor;
sp.style.color = this.badColor;
}
}
}
onPricePercentStyleKey(grid: IgcDefinitionBaseComponent, args: IgcCellStyleRequestedEventArgs) {
if (args.resolvedValue >= 0) {
args.styleKey = 'pricePercentUp';
} else {
args.styleKey = 'pricePercentDown';
}
}
onPricePercentCellUpdating(grid: IgcTemplateColumnComponent, args: IgcTemplateCellUpdatingEventArgs) {
let templ = args.cellInfo as IgcTemplateCellInfo;
let priceShiftUp = templ.value >= 0;
if (args.isCanvasBased) {
let resized = args.ensureCorrectSize();
if (resized || args.cellInfo.isContentDirty) {
args.renderStandardBackground();
let context: CanvasRenderingContext2D = args.context;
let iconColor = this.goodColor;
let scale = window.devicePixelRatio;
if (scale !== 1.0) {
context.save();
context.scale(scale, scale);
}
if (priceShiftUp) {
iconColor = this.goodColor;
} else {
iconColor = this.badColor;
}
// context.fillStyle = 'blue';
// context.fillRect(0,0,args.cellInfo.width,args.cellInfo.height);
let txt = (+templ.value).toFixed(2) + '%';
context.font = '13px Verdana';
let width = context.measureText(txt).width;
let totalWidth = width + 4;
context.font = '13px Verdana';
context.fillStyle = templ.textColor;
context.textBaseline = 'top';
context.fillText(txt, templ.width - (totalWidth + 10), (templ.height / 2.0) - 7);
context.font = '13px "Material Icons"';
context.fillStyle = iconColor;
context.fillRect(templ.width - (5 + 4), (templ.height / 2.0) - 8, 4, 16);
if (scale !== 1.0) {
context.restore();
}
}
return;
}
let content = args.content as HTMLDivElement;
let sp: HTMLSpanElement;
if (content.childElementCount > 0) {
sp = content.children[0] as HTMLSpanElement;
} else {
content.style.textAlign = 'right';
sp = document.createElement('span');
sp.style.font = '13px Verdana';
sp.style.verticalAlign = 'center';
content.appendChild(sp);
}
sp.textContent = (+templ.value).toFixed(2) + '%';
if ((sp as any).__isUp === undefined ||
(sp as any).__isUp !== priceShiftUp) {
(sp as any).__isUp = priceShiftUp;
if (priceShiftUp) {
sp.style.paddingRight = '5px';
sp.style.borderRight = this.goodBorder;
// sp.style.color = this.goodColor;
} else {
sp.style.paddingRight = '5px';
sp.style.borderRight = this.badBorder;
// sp.style.color = this.badColor;
}
}
}
onPriceAmountStyleKey(grid: IgcDefinitionBaseComponent, args: IgcCellStyleRequestedEventArgs) {
if (args.resolvedValue >= 0) {
args.styleKey = 'priceAmountUp';
} else {
args.styleKey = 'priceAmountDown';
}
}
onPriceAmountCellUpdating(grid: IgcTemplateColumnComponent, args: IgcTemplateCellUpdatingEventArgs) {
let templ = args.cellInfo as IgcTemplateCellInfo;
let priceShiftUp = templ.value >= 0;
if (args.isCanvasBased) {
let resized = args.ensureCorrectSize();
if (resized || args.cellInfo.isContentDirty) {
args.renderStandardBackground();
let context: CanvasRenderingContext2D = args.context;
let iconColor = this.goodColor;
let scale = window.devicePixelRatio;
if (scale !== 1.0) {
context.save();
context.scale(scale, scale);
}
if (priceShiftUp) {
iconColor = this.goodColor;
} else {
iconColor = this.badColor;
}
// context.fillStyle = 'blue';
// context.fillRect(0,0,args.cellInfo.width,args.cellInfo.height);
let txt = (+templ.value).toFixed(2);
context.font = '13px Verdana';
let width = context.measureText(txt).width;
let totalWidth = width + 4;
context.font = '13px Verdana';
context.fillStyle = templ.textColor;
context.textBaseline = 'top';
context.fillText(txt, templ.width - (totalWidth + 10), (templ.height / 2.0) - 7);
context.font = '13px "Material Icons"';
context.fillStyle = iconColor;
context.fillRect(templ.width - (5 + 4), (templ.height / 2.0) - 8, 4, 16);
if (scale !== 1.0) {
context.restore();
}
}
return;
}
let content = args.content as HTMLDivElement;
let sp: HTMLSpanElement;
if (content.childElementCount > 0) {
sp = content.children[0] as HTMLSpanElement;
} else {
content.style.textAlign = 'right';
sp = document.createElement('span');
sp.style.font = '13px Verdana';
sp.style.verticalAlign = 'center';
content.appendChild(sp);
}
sp.textContent = (+templ.value).toFixed(2);
if ((sp as any).__isUp === undefined ||
(sp as any).__isUp !== priceShiftUp) {
(sp as any).__isUp = priceShiftUp;
if (priceShiftUp) {
sp.style.paddingRight = '5px';
sp.style.borderRight = this.goodBorder;
// sp.style.color = this.goodColor;
} else {
sp.style.paddingRight = '5px';
sp.style.borderRight = this.badBorder;
// sp.style.color = this.badColor;
}
}
}
onChartStyleKey(grid: IgcDefinitionBaseComponent, args: IgcCellStyleRequestedEventArgs) {
args.styleKey = 'chart';
}
onChartCellUpdating(grid: IgcTemplateColumnComponent, args: IgcTemplateCellUpdatingEventArgs) {
if (args.isCanvasBased) {
return;
}
let templ = args.cellInfo as IgcTemplateCellInfo;
let content = args.content as HTMLDivElement;
let icon: HTMLSpanElement;
if (content.childElementCount > 0) {
icon = content.children[0] as HTMLSpanElement;
icon.onclick = (e) => {
console.log('chart clicked!!')
e.stopPropagation();
}
} else {
icon = document.createElement('span');
content.appendChild(icon);
icon.style.fontFamily = 'Material Icons';
icon.style.fontSize = '13px';
icon.style.fontFeatureSettings = 'liga';
icon.style.verticalAlign = 'center';
icon.textContent = 'insert_chart_outlined';
}
}
onGridStyleKey(grid: IgcDefinitionBaseComponent, args: IgcCellStyleRequestedEventArgs) {
args.styleKey = 'grid';
}
onGridCellUpdating(grid: IgcTemplateColumnComponent, args: IgcTemplateCellUpdatingEventArgs) {
if (args.isCanvasBased) {
return;
}
let templ = args.cellInfo as IgcTemplateCellInfo;
let content = args.content as HTMLDivElement;
let icon: HTMLSpanElement;
if (content.childElementCount > 0) {
icon = content.children[0] as HTMLSpanElement;
icon.onclick = (e) => {
console.log('grid clicked!!')
e.stopPropagation();
}
} else {
icon = document.createElement('span');
content.appendChild(icon);
icon.style.fontFamily = 'Material Icons';
icon.style.fontSize = '13px';
icon.style.fontFeatureSettings = 'liga';
icon.style.verticalAlign = 'center';
icon.textContent = 'table_chart';
}
}
startTicking() {
if (!this.ticking) {
this.ticking = true;
window.setTimeout(() => this.tick(), 16);
}
}
stopTicking() {
if (this.ticking) {
this.ticking = false;
}
}
updateButtonStates() {
this.liveButton.disabled = this.state.liveDisabled;
this.liveAllButton.disabled = this.state.allDisabled;
this.stopButton.disabled = this.state.stopDisabled;
}
updateSpanStates() {
this.frequencySpan.innerText = 'Frequency: ' + this.state.frequency.toString() + 'ms';
this.volumeSpan.innerText = 'Volume: ' + this.state.volume.toString();
}
updateDialogState() {
}
onLiveClicked() {
this.isAllUpdate = false;
if (!this.ticking) {
this.startTicking();
this.state.liveDisabled = true;
this.state.allDisabled = true;
this.state.stopDisabled = false;
this.updateButtonStates();
}
}
onAllClicked() {
this.isAllUpdate = true;
if (!this.ticking) {
this.startTicking();
this.state.liveDisabled = true;
this.state.allDisabled = true;
this.state.stopDisabled = false;
this.updateButtonStates();
}
}
onStopClicked() {
this.stopTicking();
this.state.liveDisabled = false;
this.state.allDisabled = false;
this.state.stopDisabled = true;
this.updateButtonStates();
}
onChartClicked() {
this.updatePriceByCountry();
this.state.chartOpen = true;
this.updateDialogState();
}
onFrequencyChange(event: any, value: any) {
this.state.frequency = +event.target.value;
this.updateSpanStates();
}
onVolumeChange(event: any, value: any) {
this.state.volume = +event.target.value;
this.state.data = LiveFinancialData.generateData(+event.target.value);
this.grid.dataSource = this.state.data;
this.updateSpanStates();
}
onCanvasModeChanged(event: any) {
this.state.canvasChecked = event.target.checked;
// this.createGrid(this.state.canvasChecked);
}
onHeatChanged(event: any) {
this.state.heatChecked = event.target.checked;
}
onGroupingChanged(event: any) {
this.state.groupingChecked = event.target.checked;
if (event.target.checked) {
this.addGroups();
} else {
this.removeGroups();
}
}
onPriceDataBound(sender: any, args: IgcDataBindingEventArgs) {
let item: any = args.cellInfo.rowItem;
if (item !== null) {
if (item.PriceHeat > 0 && this.state.heatChecked) {
let p = +item.PriceHeat;
let toA = 1.0;
let fromA = 1.0;
let toR = 0.0;
let fromR = 1.0;
let toG = 1.0;
let fromG = 1.0;
let toB = 0.0;
let fromB = 1.0;
let a = fromA + (toA - fromA) * p;
let r = fromR + (toR - fromR) * p;
let g = fromG + (toG - fromG) * p;
let b = fromB + (toB - fromB) * p;
let colorString = 'rgba(' + Math.round(r * 255.0) + ',' + Math.round(g * 255.0) + ',' + Math.round(b * 255.0) + ',' + a + ')';
args.cellInfo.background = colorString;
// args.cellInfo.textColor = "white";
}
else if (item.PriceHeat < 0 && this.state.heatChecked) {
let p = +item.PriceHeat * -1.0;
let toA = 1.0;
let fromA = 1.0;
let toR = 1.0;
let fromR = 1.0;
let toG = 0.0;
let fromG = 1.0;
let toB = 0.0;
let fromB = 1.0;
let a = fromA + (toA - fromA) * p;
let r = fromR + (toR - fromR) * p;
let g = fromG + (toG - fromG) * p;
let b = fromB + (toB - fromB) * p;
let colorString = 'rgba(' + Math.round(r * 255.0) + ',' + Math.round(g * 255.0) + ',' + Math.round(b * 255.0) + ',' + a + ')';
args.cellInfo.background = colorString;
// args.cellInfo.textColor = "black";
}
else {
args.cellInfo.background = 'white';
// args.cellInfo.textColor = "black";
}
}
}
handleChartClose() {
this.state.chartOpen = false;
this.updateDialogState();
}
createChart() {
this.chart = document.createElement('igc-data-chart') as any;
console.log(this.chart);
if (this.chart) {
this.updatePriceByCountry();
this.chart.animateSeriesWhenAxisRangeChanges = true;
this.chart.isHorizontalZoomEnabled = true;
this.chart.isVerticalZoomEnabled = true;
let xAxis = document.createElement('igc-category-x-axis') as IgcCategoryXAxisComponent;
xAxis.name = 'xAxis';
xAxis.dataSource = this.state.priceByCountry;
xAxis.label = 'Country';
xAxis.labelAngle = 90;
xAxis.interval = 1;
let yAxis = document.createElement('igc-numeric-y-axis') as IgcNumericYAxisComponent;
yAxis.name = 'yAxis;'
let columnSeries = document.createElement('igc-column-series') as IgcColumnSeriesComponent;
columnSeries.name = 'series1';
columnSeries.transitionDuration = this.state.frequency;
columnSeries.xAxisName = 'xAxis';
columnSeries.yAxisName = 'yAxis';
columnSeries.xAxis = xAxis;
columnSeries.yAxis = yAxis;
columnSeries.showDefaultTooltip = true;
columnSeries.isHighlightingEnabled = true;
columnSeries.dataSource = this.state.priceByCountry;
columnSeries.valueMemberPath = 'Price';
let itemTooltip = document.createElement('igc-item-tool-tip-layer') as IgcItemToolTipLayerComponent;
itemTooltip.name = 'tooltips'
this.chart.series.add(columnSeries);
this.chart.axes.add(xAxis);
this.chart.axes.add(yAxis);
// this._chart.series.add(itemTooltip);
}
}
onSearchChange(event: any) {
let term = event.target.value;
if (!this.grid) {
return;
}
if (!term || term.length === 0) {
this.grid.filterExpressions.clear();
} else {
let ff = FilterFactory.instance;
let filter = ff.property('Category').toLower().contains(ff.literal(term).toLower())
.or(ff.property('Type').toLower().contains(ff.literal(term).toLower()))
.or(ff.property('Contract').toLower().contains(ff.literal(term).toLower()))
.or(ff.property('Settlement').toLower().contains(ff.literal(term).toLower()))
.or(ff.property('Region').toLower().contains(ff.literal(term).toLower()))
.or(ff.property('Country').toLower().contains(ff.literal(term).toLower()));
this.grid.filterExpressions.clear();
this.grid.filterExpressions.add(filter);
}
}
handleHiddenChange(event: any) {
let options = event.target.value;
console.log(event.target);
let hidden = [];
let hiddenSet = new Set<string>();
for (let i = 0, l = options.length; i < l; i += 1) {
hidden.push(options[i]);
hiddenSet.add(options[i]);
}
this.state.hiddenColumns = hidden;
if (!this.grid) {
return;
}
for (let i = 0; i < this.grid.actualColumns.count; i++) {
let col = this.grid.actualColumns.item(i);
if (hiddenSet.has(col.name || col.field)) {
if (!col.isHidden) {
col.isHidden = true;
}
} else {
if (col.isHidden) {
col.isHidden = false;
}
}
}
}
}
class FinancialItem {
Country: string = "";
Price: number | number = 0;
}
new DataGridBindingLiveData();
ts<!DOCTYPE html>
<html>
<head>
<title>DataGridBindingLiveData</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container vertical" style="max-height: 7.5rem; overflow: hidden;">
<div class="options horizontal" style="min-height: 3rem; padding-left: 1rem; padding-bottom: 0.5rem; align-items: center;">
<span style="padding-right: 1rem;" >Grouping</span>
<mwc-switch checked id="groupingSwitch"></mwc-switch>
<span style="padding-right: 1rem; padding-left: 2rem; ">Heat</span>
<mwc-switch checked id="heatSwitch"></mwc-switch>
<div class="options horizontal" style="align-items: center; padding-bottom: 0rem; ">
<span id="frequencySpan" style="padding-right: 1rem; padding-left: 2rem; ">Frequency: </span>
<mwc-slider style="min-width: 4rem; margin: 0rem;"
id="fSlider" min="100" max="1000" step="100"
class="options-slider"
value={this.state.frequency}
onChange={this.onFrequencyChange} />
</div>
<div class="options horizontal" style="align-items: center; padding-bottom: 0rem; " >
<span id="volumeSpan" style="padding-right: 1rem; ">Volume: </span>
<mwc-slider style="min-width: 4rem; margin: 0rem;"
id="vSlider" min="100" max="10000" step="100"
value={this.state.volume}
onChange={this.onVolumeChange} />
</div >
</div>
<div class="options horizontal" style="min-height: 3rem; padding-left: 1rem; padding-bottom: 0.5rem;">
<mwc-button id="liveButton" raised color="primary" >Live Prices</mwc-button>
<span> </span><span> </span>
<mwc-button id="liveAllButton" raised color="secondary" >Live All Prices</mwc-button>
<span> </span><span> </span>
<mwc-button id="stopButton" raised>Stop</mwc-button>
<span> </span><span> </span>
</div>
</div>
<div class="container" style="height: calc(100% - 8rem)">
<igc-data-grid
id="grid"
width="100%"
height="100%"
use-canvas="false"
row-height="32"
selection-mode="MultipleRow"
auto-generate-columns="false"
is-group-collapsable="true"
header-click-action="SortByMultipleColumnsTriState"
column-showing-animation-mode="slideFromRightAndFadeIn"
column-hiding-animation-mode="slideToRightAndFadeOut"
default-column-min-width="120"
is-row-hover-enabled="false">
<igc-text-column field="ID" width="90" is-hidden="true"></igc-text-column>
<igc-text-column field="Category" width="120" ></igc-text-column>
<igc-text-column field="Type" width="90" ></igc-text-column>
<igc-text-column field="Risk" width="80" ></igc-text-column>
<igc-numeric-column field="Open" width="90"></igc-numeric-column>
<!-- columns with live data updating -->
<igc-template-column field="Price" width="110" id="priceTemplateColumn" horizontal-alignment="right"></igc-template-column>
<igc-template-column field="Change" width="110" id="changeTemplateColumn" horizontal-alignment="right"></igc-template-column>
<igc-template-column field="Change (%)" name="ChangePer" id="percentTemplateColumn" width="135"></igc-template-column>
<igc-text-column field="Contract" width="120" ></igc-text-column>
<igc-text-column field="Settlement" width="130" ></igc-text-column>
<igc-text-column field="Region" width="130" ></igc-text-column>
<igc-text-column field="Country" width="120" ></igc-text-column>
<igc-text-column field="IndGroup" width="100" header-text="Group"></igc-text-column>
<igc-text-column field="IndSector" width="120" header-text="Industry" ></igc-text-column>
<igc-text-column field="IndCategory" width="100" header-text="Category" ></igc-text-column>
<igc-text-column field="Sector" width="90" ></igc-text-column>
<igc-text-column field="Issuer" width="170"></igc-text-column>
<igc-text-column field="Rating" width="90" ></igc-text-column>
<igc-text-column field="Currency" width="90" ></igc-text-column>
<igc-text-column field="Security" width="100" ></igc-text-column>
<igc-numeric-column field="Transactions" width="130" ></igc-numeric-column>
<igc-numeric-column field="CPN" width="80" ></igc-numeric-column>
<igc-text-column field="Maturity" width="120" ></igc-text-column>
<igc-text-column field="Collateral" width="120" ></igc-text-column>
<igc-numeric-column field="Buy" width="110"></igc-numeric-column>
<igc-numeric-column field="Sell" width="110"></igc-numeric-column>
<igc-numeric-column field="Spread" width="110"></igc-numeric-column>
<igc-numeric-column field="Volume" width="110"></igc-numeric-column>
<igc-numeric-column field="High (D)" width="110"></igc-numeric-column>
<igc-numeric-column field="Low (D)" width="110"></igc-numeric-column>
<igc-numeric-column field="High (Y)" width="110"></igc-numeric-column>
<igc-numeric-column field="Low (Y)" width="110"></igc-numeric-column>
<igc-numeric-column field="Start (Y)" width="110"></igc-numeric-column>
<igc-numeric-column field="KRD_3YR" width="120" ></igc-numeric-column>
<igc-numeric-column field="KRD_5YR" width="120" ></igc-numeric-column>
<igc-numeric-column field="KRD_1YR" width="120" ></igc-numeric-column>
</igc-data-grid>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css