Update the data in the Angular pivot grid component in real-time and catch all the insights in an instant.
import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";
@Component({
selector: "pivotComponent",
templateUrl: "./pivot.component.html",
styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
@ViewChild("pivot") pivot!: FlexmonsterPivot;
public report: Object = {
dataSource: {
type: "json",
data: [
{
"ID": "ISK",
"Currency": "ISK",
"Bid Rate": 136.02732,
"Ask Rate": 136.02732,
},
],
mapping: {
"ID": {
type: "id",
},
"Currency": {
type: "string",
caption: "Currency",
},
"Bid Rate": {
type: "number",
},
"Ask Rate": {
type: "number",
},
},
},
slice: {
rows: [
{
uniqueName: "Currency",
sort: "asc",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Bid Rate",
aggregation: "sum",
format: "rate_format",
},
{
uniqueName: "Ask Rate",
aggregation: "sum",
format: "rate_format",
},
],
flatOrder: ["Bid Rate", "Currency", "Ask Rate"],
},
options: {
grid: {
type: "flat",
showFilter: false,
showHeaders: false,
showTotals: "off",
showGrandTotals: "off",
},
configuratorButton: false,
drillThrough: false,
},
conditions: [
{
formula: "if(#updateDifference < 0, 'fm-updated-cell-down', 'fm-updated-cell-up')",
},
],
formats: [
{
name: "rate_format",
decimalPlaces: 4,
textAlign: "left",
thousandsSeparator: ",",
decimalSeparator: ".",
},
],
tableSizes: {
columns: [
{
tuple: ["Currency"],
width: 200,
},
{
tuple: ["Bid Rate"],
width: 200,
},
{
tuple: ["Ask Rate"],
width: 200,
},
],
},
};
currency_data = {
"base": "EUR",
"date": "2019-02-25",
"rates": {
"AED": 4.1643,
"AFN": 84.5209,
"ALL": 124.678,
"AMD": 554.211,
"ANG": 2.046,
"AOA": 356.192,
"ARS": 44.171,
"AUD": 1.581,
"AWG": 2.041317,
"AZN": 1.933087,
"BAM": 1.951296,
"BBD": 2.258204,
"BDT": 95.400537,
"BGN": 1.954755,
"BHD": 0.427422,
"BIF": 2069.094139,
"BMD": 1.13375,
"BND": 1.531244,
"BOB": 7.835064,
"BRL": 4.233539,
"BSD": 1.13392,
"BTC": 0.000295,
"BTN": 80.316392,
"BWP": 11.923596,
"BYN": 2.421119,
"BYR": 22221.50418,
"BZD": 2.285526,
"CAD": 1.495887,
"CDF": 1849.145964,
"CHF": 1.135042,
"CLF": 0.028398,
"CLP": 736.823969,
"CNY": 7.584107,
"COP": 3513.832036,
"CRC": 689.48953,
"CUC": 1.13375,
"CUP": 30.044381,
"CVE": 110.535542,
"CZK": 25.640665,
"DJF": 201.49075,
"DKK": 7.460864,
"DOP": 57.407458,
"DZD": 134.485261,
"EGP": 19.893917,
"ERN": 17.005966,
"ETB": 32.447734,
"EUR": 1,
"FJD": 2.411826,
"FKP": 0.861639,
"GBP": 0.86868,
"GEL": 3.032784,
"GGP": 0.86856,
"GHS": 6.06658,
"GIP": 0.861639,
"GMD": 56.182966,
"GNF": 10464.51457,
"GTQ": 8.747903,
"GYD": 237.157986,
"HKD": 8.89842,
"HNL": 27.816591,
"HRK": 7.429808,
"HTG": 92.849617,
"HUF": 317.886543,
"IDR": 15850.394857,
"ILS": 4.089607,
"IMP": 0.86856,
"INR": 80.331833,
"IQD": 1350.296504,
"IRR": 47736.552753,
"ISK": 136.02732,
"JEP": 0.86856,
"JMD": 148.419352,
"JOD": 0.80406,
"JPY": 125.963013,
"KES": 113.589954,
"KGS": 78.965538,
"KHR": 4529.332142,
"KMF": 491.704489,
"KPW": 1020.424717,
"KRW": 1265.627953,
"KWD": 0.344205,
"KYD": 0.944936,
"KZT": 426.652611,
"LAK": 9733.813543,
"LBP": 1710.545227,
"LKR": 203.779877,
"LRD": 182.675544,
"LSL": 15.725492,
"LTL": 3.347669,
"LVL": 0.685794,
"LYD": 1.570208,
"MAD": 10.837289,
"MDL": 19.423471,
"MGA": 4031.615903,
"MKD": 61.43116,
"MMK": 1729.705727,
"MNT": 2986.538471,
"MOP": 9.166594,
"MRO": 404.74865,
"MUR": 38.615273,
"MVR": 17.516396,
"MWK": 825.954017,
"MXN": 21.649865,
"MYR": 4.612319,
"MZN": 70.921734,
"NAD": 15.782157,
"NGN": 410.417537,
"NIO": 37.078618,
"NOK": 9.766108,
"NPR": 128.448243,
"NZD": 1.647271,
"OMR": 0.4365,
"PAB": 1.133807,
"PEN": 3.747606,
"PGK": 3.819774,
"PHP": 58.821793,
"PKR": 158.464073,
"PLN": 4.336652,
"PYG": 6911.795951,
"QAR": 4.128268,
"RON": 4.763788,
"RSD": 118.181746,
"RUB": 74.335013,
"RWF": 1003.368939,
"SAR": 4.252014,
"SBD": 9.242728,
"SCR": 15.486461,
"SDG": 53.994863,
"SEK": 10.580947,
"SGD": 1.530674,
"SHP": 1.49757,
"SLL": 53943.834921,
"SOS": 657.574824,
"SRD": 8.455556,
"STD": 23866.121798,
"SVC": 9.921339,
"SYP": 583.881104,
"SZL": 15.725163,
"THB": 35.46594,
"TJS": 10.692378,
"TMT": 3.968126,
"TND": 3.460321,
"TOP": 2.560744,
"TRY": 6.012391,
"TTD": 7.693459,
"TWD": 34.887776,
"TZS": 2658.758853,
"UAH": 30.532255,
"UGX": 4161.423158,
"USD": 1.13375,
"UYU": 37.118517,
"UZS": 9529.170292,
"VEF": 11.323328,
"VND": 26322.278702,
"VUV": 129.088049,
"WST": 2.957815,
"XAF": 654.457601,
"XAG": 0.071336,
"XAU": 0.000855,
"XCD": 3.064017,
"XDR": 0.813828,
"XOF": 662.110657,
"XPF": 119.609776,
"YER": 283.758118,
"ZAR": 15.681917,
"ZMK": 10205.116639,
"ZMW": 13.549464,
"ZWL": 365.470062,
},
};
dataset: object[] = [];
valids: string[] = ["EUR", "JPY", "CZK", "DKK", "GBP", "HUF", "UAH", "LTL", "LVL",
"PLN", "RON", "SEK", "CHF", "NOK", "HRK", "RUB", "TRY", "AUD", "BRL", "CAD",
"CNY", "HKD", "IDR", "ILS", "INR", "KRW", "MXN", "MYR", "NZD", "PHP", "SGD",
"THB", "ZAR", "ISK"];
constructor() {}
ngOnInit(): void {}
getData() {
let rates = this.currency_data.rates;
Object.entries(rates).forEach(([key, value]) => {
let record: any = {};
record["ID"] = key;
record["Currency"] = key;
record["Bid Rate"] = value;
record["Ask Rate"] = value;
if (this.valids.indexOf(record["Currency"]) > 0) {
this.dataset.push(record);
}
});
if (this.dataset.length > 0) {
this.pivot.flexmonster.updateData(
{
data: this.dataset,
},
{
partial: true,
}
);
}
}
randomFloatBetween(minValue: number, maxValue: number, precision: number) {
if (typeof precision === "undefined") {
precision = 4;
}
return parseFloat(
Math.min(
minValue + Math.random() * (maxValue - minValue),
maxValue
).toFixed(precision)
);
}
updateData() {
let numbers: number[] = [];
for (let i = 0; i < this.dataset.length; i++) {
// Generate an array of numbers that are used for indices
numbers[i] = i;
}
const shuffleArray = (arr: number[]) => {
return arr
.map((a) => [Math.random(), a])
.sort((a, b) => a[0] - b[0])
.map((a) => a[1]);
};
let random_permutation = shuffleArray(numbers);
random_permutation.forEach((index: number) => {
let item: any = this.dataset[index];
let prev_rate;
let new_rate;
if (index % 2 === 0) {
prev_rate = item["Bid Rate"];
new_rate = prev_rate + this.randomFloatBetween(0.01, 0.3, 3);
item["Bid Rate"] = new_rate;
item["Ask Rate"] = new_rate - this.randomFloatBetween(0.01, 0.3, 3);
this.dataset[index] = item;
} else {
prev_rate = item["Bid Rate"];
new_rate = prev_rate - this.randomFloatBetween(0.01, 0.2, 3);
if (new_rate > 0) {
item["Bid Rate"] = new_rate;
item["Ask Rate"] = new_rate + this.randomFloatBetween(0.01, 0.2, 3);
this.dataset[index] = item;
} else {
new_rate = prev_rate + this.randomFloatBetween(0.01, 0.2, 3);
item["Bid Rate"] = new_rate;
item["Ask Rate"] = new_rate - this.randomFloatBetween(0.01, 0.2, 3);
this.dataset[index] = item;
}
}
});
this.pivot.flexmonster.updateData(
{
data: this.dataset,
},
{
partial: true,
}
);
}
customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
if (data.hierarchy?.uniqueName === "Currency" && data.member) {
cell.addClass("header-cell");
let names = data.member.caption!.split("/");
let flag = `<img class="flag" style="width:36px; height:24px;"
src="https://cdn.flexmonster.com/flags/${names[0].toLowerCase()}.svg">`;
cell.text = `<div style="display:flex; align-items:center; font-size:12px;
position:relative; bottom: 4px;">${flag} ${names[0]}</div>`;
}
}
onReportComplete() {
this.pivot.flexmonster.off("reportcomplete");
this.getData();
this.updateData();
setInterval(() => {
this.updateData();
}, 6000);
}
}
<fm-pivot #pivot [height]="450" [report]="report" [customizeCell]="customizeCellFunction" (reportcomplete)="onReportComplete()"> </fm-pivot>
.header-cell {
background-color: #F7F7F7 !important;
border-bottom: 1px solid #E9E9E9 !important;
border-right: 1px solid #E9E9E9 !important;
}
#fm-pivot-view .fm-grid-layout div.fm-cell {
padding-left: 20px;
}
#fm-pivot-view .fm-header {
background-color: #e9e9e9 !important;
border-right: 1px solid #d5d5d5 !important;
border-bottom: 1px solid #d5d5d5 !important;
}
.fm-updated-cell-down {
color: #DF3800 !important;
font-weight: bold !important;
background-image: none !important;
-webkit-animation: fadeIt 5s ease-in-out;
-moz-animation: fadeIt 5s ease-in-out;
-o-animation: fadeIt 5s ease-in-out;
animation: fadeIt 5s ease-in-out;
}
.fm-updated-cell-down::before {
content: "\2193 \00a0";
position: relative;
bottom: 2px;
}
.fm-updated-cell-up {
color: #00A45A !important;
font-weight: bold !important;
background-image: none !important;
-webkit-animation: fadeIt1 5s ease-in-out;
-moz-animation: fadeIt1 5s ease-in-out;
-o-animation: fadeIt1 5s ease-in-out;
animation: fadeIt1 5s ease-in-out;
}
.fm-updated-cell-up::before {
content: '\2191 \00a0';
position: relative;
bottom: 2px;
}
@-webkit-keyframes fadeIt {
0% {
background-color: #FFFFFF;
}
20% {
background-color: #F9D7CC;
border-bottom: 1px solid #e9c5ba;
border-right: 1px solid #e9c5ba;
}
50% {
background-color: #F9D7CC;
border-bottom: 1px solid #e9c5ba;
border-right: 1px solid #e9c5ba;
}
100% {
background-color: #FFFFFF;
}
}
@-moz-keyframes fadeIt {
0% {
background-color: #FFFFFF;
}
20% {
background-color: #F9D7CC;
border-bottom: 1px solid #e9c5ba;
border-right: 1px solid #e9c5ba;
}
50% {
background-color: #F9D7CC;
border-bottom: 1px solid #e9c5ba;
border-right: 1px solid #e9c5ba;
}
100% {
background-color: #FFFFFF;
}
}
@-o-keyframes fadeIt {
0% {
background-color: #FFFFFF;
}
20% {
background-color: #F9D7CC;
border-bottom: 1px solid #e9c5ba;
border-right: 1px solid #e9c5ba;
}
50% {
background-color: #F9D7CC;
border-bottom: 1px solid #e9c5ba;
border-right: 1px solid #e9c5ba;
}
100% {
background-color: #FFFFFF;
}
}
@keyframes fadeIt {
0% {
background-color: #FFFFFF;
}
20% {
background-color: #F9D7CC;
border-bottom: 1px solid #e9c5ba;
border-right: 1px solid #e9c5ba;
}
50% {
background-color: #F9D7CC;
border-bottom: 1px solid #e9c5ba;
border-right: 1px solid #e9c5ba;
}
100% {
background-color: #FFFFFF;
}
}
@-webkit-keyframes fadeIt1 {
0% {
background-color: #FFFFFF;
}
20% {
background-color: #CCEDDE;
border-bottom: 1px solid #aedbc7;
border-right: 1px solid #aedbc7;
}
50% {
background-color: #CCEDDE;
border-bottom: 1px solid #aedbc7;
border-right: 1px solid #aedbc7;
}
100% {
background-color: #FFFFFF;
}
}
@-moz-keyframes fadeIt1 {
0% {
background-color: #FFFFFF;
}
20% {
background-color: #CCEDDE;
border-bottom: 1px solid #aedbc7;
border-right: 1px solid #aedbc7;
}
50% {
background-color: #CCEDDE;
border-bottom: 1px solid #aedbc7;
border-right: 1px solid #aedbc7;
}
100% {
background-color: #FFFFFF;
}
}
@-o-keyframes fadeIt1 {
0% {
background-color: #FFFFFF;
}
20% {
background-color: #CCEDDE;
border-bottom: 1px solid #aedbc7;
border-right: 1px solid #aedbc7;
}
50% {
background-color: #CCEDDE;
border-bottom: 1px solid #aedbc7;
border-right: 1px solid #aedbc7;
}
100% {
background-color: #FFFFFF;
}
}
@keyframes fadeIt1 {
0% {
background-color: #FFFFFF;
}
20% {
background-color: #CCEDDE;
border-bottom: 1px solid #aedbc7;
border-right: 1px solid #aedbc7;
}
50% {
background-color: #CCEDDE;
border-bottom: 1px solid #aedbc7;
border-right: 1px solid #aedbc7;
}
100% {
background-color: #FFFFFF;
}
}
Using our updateData() API call, you can receive the newly updated data from your data source and visualize it with the same slice and formatting. With such an approach you don’t need to reload the full report and can speed up the data loading process to create the most effective Angular reporting tool.
This Angular pivot grid demo shows how JSON data can be partially updated and how to highlight all the changes via the conditional formatting feature.