Use our pivot grid component with the Elasticsearch data source in Vue.js.
<template>
<Pivot
height="600"
toolbar
v-bind:report="report"
v-bind:shareReportConnection="{
url: 'https://olap.flexmonster.com:9500',
}"
v-bind:beforetoolbarcreated="customizeToolbar"
/>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
export default {
name: "PivotComponent",
components: {
Pivot,
},
data() {
return {
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$",
},
],
},
};
},
methods: {
customizeToolbar(toolbar) {
toolbar.showShareReportTab = true;
},
},
};
</script>
Smoothly connect your Vue pivot grid to Elasticsearch to get the aggregated data.
We made it possible to see insights based on gigabytes of data in seconds. And there is no need to load all the raw data into the pivot table to build the data cube — Flexmonster sends a sequence of queries to get the summarized data from Elasticsearch.
For further details, check out how Elasticsearch works with Flexmonster.