Use our pivot grid component with 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 just in a matter of 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 Elasticserach works with Flexmonster.