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.
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: "csv", filename: "data/happiness.csv", mapping: { "Year": { type: "string" } } }, slice: { rows: [ { uniqueName: "Region", }, { uniqueName: "Country or region", }, ], columns: [ { uniqueName: "[Measures]", }, { uniqueName: "Year", }, ], measures: [ { uniqueName: "Score", aggregation: "median", grandTotalCaption: "Average Happiness", }, ], }, conditions: [ { formula: "AND(#value > 7.3, #value < 10)", format: { backgroundColor: "#f0c63e", color: "#000000", fontFamily: "Arial", fontSize: "12px", }, }, { formula: "AND(#value > 0, #value < 4.5)", format: { backgroundColor: "#f29c8d", color: "#000000", fontFamily: "Arial", fontSize: "12px", }, }, ], formats: [ { name: "", decimalPlaces: 2, }, ], }; constructor() {} ngOnInit(): void {} onOpenLocalCSV() { this.pivot.flexmonster.connectTo({ type: "csv", browseForFile: true, }); } onLoadRemoteCSV() { let filename = prompt("Open remote CSV", "https://cdn.flexmonster.com/data/data.csv"); if (filename != null) { this.pivot.flexmonster.connectTo({ type: "csv", filename: filename, }); } } onOpenLocalJSON() { this.pivot.flexmonster.connectTo({ type: "json", browseForFile: true, }); } onLoadRemoteJSON() { let filename = prompt("Open remote JSON", "https://cdn.flexmonster.com/data/data.json"); if (filename != null) { this.pivot.flexmonster.connectTo({ type: "json", filename: filename, }); } } customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) { if (data.isGrandTotalColumn) { if ((data.value as number) < 5 && (data.value as number) >= 0) { cell.text = (data.value as number).toPrecision(3) + " ☹️"; } else if ((data.value as number) >= 5 && (data.value as number) < 7) { cell.text = (data.value as number).toPrecision(3) + " 🙂"; } else if ((data.value as number) >= 7 && (data.value as number) < 10) { cell.text = (data.value as number).toPrecision(3) + " 😃"; } } } }
<button (click)="onOpenLocalCSV()">Open local CSV</button> <button (click)="onLoadRemoteCSV()">Load remote CSV</button> <button (click)="onOpenLocalJSON()">Open local JSON</button> <button (click)="onLoadRemoteJSON()">Load remote JSON</button> <fm-pivot #pivot [componentFolder]="'https://cdn.flexmonster.com/'" [report]="report" [customizeCell]="customizeCellFunction"> </fm-pivot>
You can connect Flexmonster Pivot to your local, remote, or server-side generated JSON and CSV files and create new data visualisation with Angular in minutes.
Use the Mapping Object to clarify how your Angular reporting tool should interpret and display the fields from the file.
We have made Flexmonster super flexible and optimized to work with a lot of data extremely fast on the client side. If your data files are more than 1GB we suggest using one of our data source solutions - Flexmonster Data Server. It's easy to configure the server-side tool for data pre-processing that will kick-start your web reporting with Angular.