Flexmonster Software License Agreement (“Agreement”) has been significantly revised and is effective as of September 30, 2024.
The following modifications were made:
The modified version of Flexmonster Software License Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after September 30, 2024, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Flexmonster Software License Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license under License Model or Maintenance after the effective date of any modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
Explore patterns and trends in your data and show the most important points in a form of a heat map.
import { Component, OnInit } from "@angular/core"; import * as tinycolor from "tinycolor2"; const colorScheme: string[] = [ "#DF3800", "#FF6D1E", "#FF9900", "#FFB600", "#A5CE31", "#6CBD05", "#00A45A", ]; const minValue: number = 0; const maxValue: number = 15000; @Component({ selector: "pivotComponent", templateUrl: "./pivot.component.html", styleUrls: ["./pivot.component.css"], }) export class PivotComponent implements OnInit { public report: Flexmonster.Report = { dataSource: { type: "csv", filename: "data/sales.csv", }, slice: { rows: [ { uniqueName: "Month", }, { uniqueName: "[Measures]", }, ], columns: [ { uniqueName: "Category", levelName: "Product Name", filter: { members: [ "category.[condiments].[bbq sauce]", "category.[breakfast cereals].[corn flakes]", "category.[confectionery]", "category.[bakery].[chocolate biscuits]", "category.[fruit preserves].[apple jam]", "category.[bakery].[apple cake]", "category.[soups].[tomato soup]", ], }, }, ], measures: [ { uniqueName: "Revenue", aggregation: "sum", format: "currency", }, ], }, formats: [ { name: "", thousandsSeparator: ",", decimalSeparator: ".", decimalPlaces: 2, }, { name: "currency", currencySymbol: "$", }, ], }; constructor() {} ngOnInit(): void {} customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) { if (data?.type === "value" && !data?.isGrandTotal) { let backgroundColor = this.getColorFromRange(data.value as number); let textShadowColor = tinycolor(backgroundColor).darken(15).toString(); let borderColor = tinycolor(backgroundColor).darken(3).toString(); cell.style = { ...cell.style, "background-color": backgroundColor, "color": "white", "font-weight": "bold", "text-shadow": `0px 2px 3px ${textShadowColor}`, "border-bottom": `1px solid ${borderColor}`, "border-right": `1px solid ${borderColor}`, }; } } getColorFromRange(value: number) { if (isNaN(value)) { value = minValue; } value = Math.max(minValue, Math.min(value, maxValue)); let perc = (minValue + value) / maxValue; let colorIdx = Math.round((colorScheme.length - 1) * perc); return colorScheme[colorIdx]; } }
<fm-pivot [componentFolder]="'https://cdn.flexmonster.com/'" [height]="600" [report]="report" [customizeCell]="customizeCellFunction.bind(this)"> </fm-pivot>
Creating a heat map visualization in Angular is simple to do with our Flexmonster API: define a range of colors and apply cell formatting based on their values. A detailed guide on how to create a heat map and apply it to the business data you can find in our blog.
The end-user can also apply conditional formatting to highlight insights in his report on the fly. Refer to the Extended grid customization guide to find out about other ways to customize our Angular pivot table: alternate row colors, represent numbers by icons, add hyperlinks to cells, and a lot more.