Fast and powerful data visualization and reporting tool for Angular.
import { Component, OnInit } from "@angular/core"; @Component({ selector: "pivotComponent", templateUrl: "./pivot.component.html", styleUrls: ["./pivot.component.css"], }) export class PivotComponent implements OnInit { public report: Object = { dataSource: { type: "json", filename: "data/retail-data.json", mapping: { "Quantity": { type: "number", }, "Price": { type: "number", }, "Retail Category": { type: "string", }, "Sales": { type: "number", }, "Order Date": { type: "year/quarter/month/day", }, "Date": { type: "date", }, "Status": { type: "string", }, "Product Code": { type: "string", }, "Phone": { type: "string", }, "Country": { type: "string", folder: "Location", }, "City": { type: "string", folder: "Location", }, "CurrencyID": { type: "property", hierarchy: "Country", }, "Contact Last Name": { type: "string", }, "Contact First Name": { type: "string", }, "Deal Size": { type: "string", }, }, }, slice: { rows: [ { uniqueName: "Country", filter: { members: [ "country.[australia]", "country.[usa]", "country.[japan]", ], }, }, { uniqueName: "Status", }, ], columns: [ { uniqueName: "Order Date", }, { uniqueName: "[Measures]", }, ], measures: [ { uniqueName: "Price", aggregation: "sum", format: "-13w0a1w1c23j00", }, ], sorting: { column: { type: "desc", tuple: [], measure: { uniqueName: "Price", aggregation: "sum", }, }, }, expands: { rows: [ { tuple: ["country.[japan]"], }, ], }, drills: { columns: [ { tuple: ["order date.[2019]"], }, ], }, flatSort: [ { uniqueName: "Price", sort: "desc", }, ], }, conditions: [ { formula: "#value > 35000", measure: "Price", aggregation: "sum", format: { backgroundColor: "#00A45A", color: "#FFFFFF", fontFamily: "Arial", fontSize: "12px", }, }, { formula: "#value < 2000", measure: "Price", aggregation: "sum", format: { backgroundColor: "#df3800", color: "#FFFFFF", fontFamily: "Arial", fontSize: "12px", }, }, ], formats: [ { name: "-13w0a1w1c23j00", thousandsSeparator: " ", decimalSeparator: ".", decimalPlaces: 0, currencySymbol: "$", positiveCurrencyFormat: "$1", nullValue: "-", textAlign: "right", isPercent: false, }, ], }; constructor() {} ngOnInit(): void {} customizeToolbar(toolbar: Flexmonster.Toolbar) { toolbar.showShareReportTab = true; } customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) { if (data.type === "header" && data.hierarchy?.caption === "Country" && data.member?.properties) { const name = data.member.properties.CurrencyID; cell.addClass("fm-custom-cell"); let flag; if (data.expanded) { flag = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i> <img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`; } else { flag = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i> <img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`; } cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;"> ${flag}<span style="margin-left: 2px; line-height: 16px;">${data.member.caption}</span></div>`; } } }
<fm-pivot [componentFolder]="'https://cdn.flexmonster.com/'" [height]="550" [toolbar]="true" [report]="report" [customizeCell]="customizeCellFunction" [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}" (beforetoolbarcreated)="customizeToolbar($event)" > </fm-pivot>
.fm-custom-cell { display: flex !important; align-items: center !important; font-size: 12px !important; } .fm-custom-cell .flag-icon { width: 21px !important; height: 16px !important; margin-left: 0 !important; margin-right: 2px !important; } #fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before, #fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before { top: -2px; height: 16px; }
Flexmonster Pivot is a rich feature Angular UI table that provides you with all the necessary functionality for data analysis and insightful reporting.
Simply and quickly upload your data to the pivot table, wherever it is stored: no matter CSV or JSON, SQL (MySQL, PostgreSQL, Oracle, etc) databases or no SQL (MongoDB), or such services as Elasticsearch or Microsoft Analysis Services.
Connect to your data source through the comfy Toolbar and start analyzing your data:
Export the report in the most common formats such as PDF, CSV, Excel, HTML, and PNG or save and share your report with colleagues. Explore the abilities of our Angular pivot library to the fullest!
Check out the video tutorial on creating your first Angular pivot grid.