このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Web Components ライブ データのバインディング
Ignite UI for Web Components Data Table / Data Grid は、1 秒間に何千もの更新を処理しながら、ユーザーはグリッドをインタラクティブに操作できます。以下のサンプルを使用して、データ更新の間隔とデータ更新の量を調整することにより、さまざまなライブ データシ ナリオでのグリッド処理のパフォーマンスを確認できます。
Web Components ライブ データのバインディングの例
/* 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-grids';
import { DataGridPresenterManager } from 'igniteui-webcomponents-grids';
import { FilterFactory } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcColumnGroupDescription } from 'igniteui-webcomponents-grids';
import { IgcCellStyleRequestedEventArgs } from 'igniteui-webcomponents-grids';
import { IgcDataBindingEventArgs } from 'igniteui-webcomponents-grids';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-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-grids';
import { IgcColumnSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcItemToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcTextColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-grids';
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcTextHeaderComponent } from 'igniteui-webcomponents-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
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。