Data Compression in Vue Pivot Table component

11 Jun 20248 minutes to read

This property is applicable only for the relational data source.

When binding one million raw data, the pivot table processes all raw data to generate aggregated data during initial rendering and report manipulation. However, with data compression, the input raw data is compressed based on the uniqueness of the raw data, and the final compressed raw data are utilized by the pivot table. The compressed raw data is then used for further operations at all times, reducing the looping complexity and improving the performance of the pivot table. For example, if the pivot table is connected to one million raw data compressed to 1,000 unique raw data, it will render within 3 seconds rather than 10 seconds. You can enable this option by using the allowDataCompression property along with the enableVirtualization property.

This options will only function when the virtual scrolling is enabled.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :allowDataCompression="allowDataCompression"
      :enableVirtualization="enableVirtualization"> </ejs-pivotview>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";

/* tslint:disable */
function data(count) {
  let result = [];
  let dt = 0;
  for (let i = 1; i < count + 1; i++) {
    dt++;
    let round;
    let toString = i.toString();
    if (toString.length === 1) {
      round = "0000" + i;
    } else if (toString.length === 2) {
      round = "000" + i;
    } else if (toString.length === 3) {
      round = "00" + i;
    } else if (toString.length === 4) {
      round = "0" + i;
    } else {
      round = toString;
    }
    result.push({
      ProductID: 'PRO-' + round,
      Year: "FY " + (dt + 2013),
      Price: Math.round(Math.random() * 5000) + 5000,
      Sold: Math.round(Math.random() * 80) + 10
    });
    if (dt / 4 == 1) {
      dt = 0;
    }
  }
  return result;
}

const dataSourceSettings = {
  dataSource: data(1000),
  enableSorting: false,
  expandAll: true,
  formatSettings: [{ name: 'Price', format: 'C0' }],
  rows: [{ name: 'ProductID' }],
  columns: [{ name: 'Year' }],
  values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }]
};
const height = 350;
const allowDataCompression = true;
const enableVirtualization = true;

provide('pivotview', [VirtualScroll]);

</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :allowDataCompression="allowDataCompression" :enableVirtualization="enableVirtualization"> </ejs-pivotview>
    </div>
</template>
<script>
import { PivotViewComponent, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
/* tslint:disable */
function data(count) {

    let result = [];
    let dt = 0;
    for (let i = 1; i < count + 1; i++) {
      dt++;
      let round;
      let toString = i.toString();
      if (toString.length === 1) {
        round = "0000" + i;
      } else if (toString.length === 2) {
        round = "000" + i;
      } else if (toString.length === 3) {
        round = "00" + i;
      } else if (toString.length === 4) {
        round = "0" + i;
      } else {
        round = toString;
      }
    result.push({
      ProductID: 'PRO-' + round,
      Year: "FY " + (dt + 2013),
      Price: Math.round(Math.random() * 5000) + 5000,
      Sold: Math.round(Math.random() * 80) + 10
    });
    if (dt / 4 == 1) {
        dt = 0;
    }
  }
  return result;
}

export default {
name: "App",
components: {
"ejs-pivotview":PivotViewComponent
},
  data () {
    return {
      dataSourceSettings: {
        dataSource: data(1000),
        enableSorting: false,
        expandAll: true,
        formatSettings: [{ name: 'Price', format: 'C0' }],
        rows: [{ name: 'ProductID' }],
        columns: [{ name: 'Year' }],
        values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }]
      },
      height: 350,
      allowDataCompression: true,
      enableVirtualization: true
    }
  },
  provide: {
        pivotview: [VirtualScroll]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

Limitations during data compression:

• The following aggregation types will not be supported:
  • Average
  • Populationstdev
  • Samplestdev
  • Populationvar
  • Samplevar
• If you use any of the above aggregations, they will result in the aggregation type “Sum”.
• “DistinctCount” will act as “Count” aggregation type.
• In the calculated field, an existing field can be inserted without altering its default aggregation type. Even if changed, it would revert to the default aggregation type for calculation.