React Pivot Table with Elasticsearch

import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

function PivotTableDemo() {
  const report = {
    dataSource: {
      type: "elasticsearch",
      node: "https://olap.flexmonster.com:9200",
      index: "australian_weather",
      mapping: {
        "Date": {
          caption: "Date",
          format: "yyyy",
          interval: "1y"
        },
        "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"
        },
        "Location.keyword": {
          caption: "Location"
        },
        "State.keyword": {
          caption: "State"
        }
      }
    },
    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",
          format: "temperature"
        },
        {
          uniqueName: "Max Temperature",
          aggregation: "max",
          format: "temperature"
        },
        {
          uniqueName: "Wind Speed",
          aggregation: "average",
          format: "windSpeed"
        }
      ]
    },
    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: "temperature",
        currencySymbol: " °C",
        positiveCurrencyFormat: "1$",
        negativeCurrencyFormat: "-1$"
      },
      {
        name: "windSpeed",
        currencySymbol: " km/h",
        positiveCurrencyFormat: "1$",
        negativeCurrencyFormat: "-1$"
      }
    ]
  };

  return (
    <>
      <FlexmonsterReact.Pivot 
       height={600} 
       toolbar={true} 
       report={report}
       beforetoolbarcreated={(toolbar) => {
         toolbar.showShareReportTab = true;
       }}
       shareReportConnection={{
         url: "https://olap.flexmonster.com:9500"
       }}
      />
    </>
  );
}

export default PivotTableDemo;