<template>
<button v-on:click="onOpenLocalCSV">Open local CSV</button>
<button v-on:click="onLoadRemoteCSV">Load remote CSV</button>
<button v-on:click="onOpenLocalJSON">Open local JSON</button>
<button v-on:click="onLoadRemoteJSON">Load remote JSON</button>
<Pivot
ref="pivot"
componentFolder="https://cdn.flexmonster.com/"
v-bind:report="report"
v-bind:customizeCell="customizeCell"
/>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
export default {
name: "PivotComponent",
components: {
Pivot,
},
data() {
return {
report: {
dataSource: {
type: "csv",
filename: "data/happiness.csv",
mapping: {
"Year": {
type: "string"
}
}
},
slice: {
rows: [
{
uniqueName: "Region",
},
{
uniqueName: "Country or region",
},
],
columns: [
{
uniqueName: "[Measures]",
},
{
uniqueName: "Year",
},
],
measures: [
{
uniqueName: "Score",
aggregation: "median",
grandTotalCaption: "Average Happiness",
},
],
},
conditions: [
{
formula: "AND(#value > 7.3, #value < 10)",
format: {
backgroundColor: "#f0c63e",
color: "#000000",
fontFamily: "Arial",
fontSize: "12px",
},
},
{
formula: "AND(#value > 0, #value < 4.5)",
format: {
backgroundColor: "#f29c8d",
color: "#000000",
fontFamily: "Arial",
fontSize: "12px",
},
},
],
formats: [
{
name: "",
decimalPlaces: 2,
},
],
},
};
},
methods: {
onOpenLocalCSV() {
this.$refs.pivot.flexmonster.connectTo({
type: "csv",
browseForFile: true,
});
},
onLoadRemoteCSV() {
const filename = prompt("Open remote CSV", "https://cdn.flexmonster.com/data/data.csv");
if (filename != null) {
this.$refs.pivot.flexmonster.connectTo({
type: "csv",
filename: filename,
});
}
},
onOpenLocalJSON() {
this.$refs.pivot.flexmonster.connectTo({
type: "json",
browseForFile: true,
});
},
onLoadRemoteJSON() {
const filename = prompt("Open remote JSON", "https://cdn.flexmonster.com/data/data.json");
if (filename != null) {
this.$refs.pivot.flexmonster.connectTo({
type: "json",
filename: filename,
});
}
},
customizeCell(cell, data) {
if (data.isGrandTotalColumn) {
if (data.value < 5 && data.value >= 0) {
cell.text = data.value.toPrecision(3) + " ☹️";
} else if (data.value >= 5 && data.value < 7) {
cell.text = data.value.toPrecision(3) + " 🙂";
} else if (data.value >= 7 && data.value < 10) {
cell.text = data.value.toPrecision(3) + " 😃";
}
}
},
},
};
</script>
Load your local, remote, or server-side generated JSON or CSV files.
Flexmonster Vue Pivot Grid is perfectly optimized to load and process your data extremely fast on the client-side. But for large CSV/JSON files (more than 1GB), we recommend using the Flexmonster Data Server tool, explicitly designed to handle large datasets.
Use detailed guides:
It will take just a few steps to set it up and start pivot table reporting in your Vue application.
You can also use mapping to control how the fields are shown on the grid in your Vue project.