Flexmonster provides a seamless connection of your Angular pivot table to Elasticsearch.
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: "elasticsearch",
node: "https://olap.flexmonster.com:9200",
index: "australian_weather",
mapping: {
"Date": {
caption: "Date",
format: "yyyy",
interval: "1y",
},
"Location": {
caption: "Location",
},
"Min Temperature": {
caption: "Min Temp",
},
"Max Temperature": {
caption: "Max Temp",
},
"Rainfall": {
caption: "Rainfall",
},
"Evaporation": {
caption: "Evaporation",
},
"Sunshine": {
caption: "Sunshine",
},
"Wind Speed": {
caption: "Wind Speed",
},
"Rain Today": {
caption: "Rain Today",
},
"Rain Tomorrow": {
caption: "Rain Tomorrow",
},
"State.keyword": {
caption: "State",
},
"Location.keyword": {
caption: "Location",
},
},
},
slice: {
rows: [
{
uniqueName: "State.keyword",
},
{
uniqueName: "Location.keyword",
},
],
columns: [
{
uniqueName: "Date",
filter: {
query: {
after: "2008-12-31",
},
},
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Min Temperature",
aggregation: "min",
grandTotalCaption: "Min Temp",
format: "-10ws2q1oviodoa",
},
{
uniqueName: "Max Temperature",
aggregation: "max",
grandTotalCaption: "Max Temp",
format: "-10mkdp0yjbxs4e",
},
{
uniqueName: "Wind Speed",
aggregation: "average",
grandTotalCaption: "Wind Speed",
format: "-12d55123ugyhur",
},
],
},
options: {
grid: {
showTotals: "off",
showGrandTotals: "off",
},
showAggregationLabels: false,
},
conditions: [
{
formula: "#value > 42",
measure: "Max Temperature",
aggregation: "max",
format: {
backgroundColor: "#FFB74D",
color: "#000000",
fontFamily: "Arial",
fontSize: "12px",
},
},
{
formula: "#value < 0",
measure: "Min Temperature",
aggregation: "min",
format: {
backgroundColor: "#81D4FA",
color: "#000000",
fontFamily: "Arial",
fontSize: "12px",
},
},
],
formats: [
{
name: "",
decimalPlaces: 1,
},
{
name: "-12d55123ugyhur",
currencySymbol: " km/h",
positiveCurrencyFormat: "1$",
negativeCurrencyFormat: "-1$",
},
{
name: "-10ws2q1oviodoa",
currencySymbol: " °C",
positiveCurrencyFormat: "1$",
negativeCurrencyFormat: "-1$",
},
{
name: "-10mkdp0yjbxs4e",
currencySymbol: " °C",
positiveCurrencyFormat: "1$",
negativeCurrencyFormat: "-1$",
},
],
};
constructor() {}
ngOnInit(): void {}
customizeToolbar(toolbar: Flexmonster.Toolbar) {
toolbar.showShareReportTab = true;
}
}
<fm-pivot
[height]="600"
[toolbar]="true"
[report]="report"
[shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
(beforetoolbarcreated)="customizeToolbar($event)">
</fm-pivot>
Data visualization and web reporting with Angular and Elasticsearch never were so fast: upload billions of rows of aggregated data and visualize them in one click.
Save time and load only the data you need: use the abilities of our Angular dynamic pivot table to expand the members you are interested in.
Get straight to using this data source with our Angular data grid referring to our Elasticsearch connection guide.