Flexmonster Pivot Table & Charts provides an impeccable connection to Elasticsearch.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
class PivotTableDemo extends React.Component {
render() {
return (
<>
<div className="App">
<FlexmonsterReact.Pivot
componentFolder="https://cdn.flexmonster.com/"
height={600}
toolbar={true}
report={{
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$",
},
],
}}
shareReportConnection={{
url: "https://olap.flexmonster.com:9500",
}}
beforetoolbarcreated={(toolbar) => {
toolbar.showShareReportTab = true;
}}
/>
</div>
</>
);
}
}
export default PivotTableDemo;
With Flexmonster, Elasticsearch data visualization is made simple. You can easily get insights via React pivot grid based on gigabytes of data.
Fetch summarized data from your index, display it on the pivot grid or pivot charts, and start revealing insights in an instant.
Find out more about this integration in how Flexmonster works with Elasticsearch data blogpost and how to connect to Elasticsearch from the reporting tool guide.