Using Vue Js Pivot Grid UI component

The PivotGrid component in Vue js lets you change the way the data is presented and allows the user to perform different analysis on the visualized data. Pivot Grid is a powerful tool for multi-dimensional data analysis which can be used as a Vue component. Some of the useful features provided by Pivot Grid includes filtering, grouping, sorting, summary calculation modes etc.

The PivotGrid makes use of kendo.data.PivotDataSource component as a data source. We will also require the PivotGrid and PivotConfigurator components. The PivotGrid component will be used to display our data in a summarized way whereas the PivotConfigurator is required to build the PivotGrid and the PivotDataSource component will be required to bind our data to the PivotGrid and PivotConfigurator. First of all, we will need to initialize our project using Vue webpack-simple template. Once we are finished with the initialization part, we will install the Kendo UI, PivotGrid and DataSource package. We can also install a Kendo UI theme to provide a nice look and feel to our grid.

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-pivotgrid-vue-wrapper
npm install --save @progress/kendo-datasource-vue-wrapper

Now we will import the Kendo UI packages in our main.js file as well as, register the PivotGrid and PivotDataSource components globally and adding them to the component list.

import Vue from 'vue'import App from './App.vue'import '@progress/kendo-ui'import '@progress/kendo-theme-default/dist/all.css'import { PivotGrid, PivotGridInstaller } from '@progress/kendo-pivotgrid-vue-wrapper'import { PivotDataSource, DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'
Vue.use(PivotGridInstaller)
Vue.use(DataSourceInstaller)new Vue({
  el: '#app',
  components: {
  PivotGrid,
  PivotDataSource
  },
  render: h => h(App)})

There will be three different fields for our data i.e. units sold, sales year and category. We will be using the years 2017 and 2018 and the categories tea and coffee to keep it simple. Now, we want to see the units sold by category by year. Our data will look as follow:-

var products = [
  {
    UnitsSold: 100,
    SalesYear: 2017,
    Category: "Coffee",
      
  },
  {
    UnitsSold: 150,
    SalesYear: 2018,
    Category: "Coffee", 
  },
  {
    UnitsSold: 75,
    SalesYear: 2017,
    Category: "Tea"
  },
  {
    UnitsSold: 50,
    SalesYear: 2018,
    Category: "Tea"
  }];

At first, we will add the PivotDataSource component to the template of our app. Now we can bind the PivotGrid and PivotConfigurator components to PivotDataSource. The template of our app will look like this:-

<template>
  <div id="app">
    <kendo-pivotdatasource 
      ref="pivotDataSource"
      :data="data"
      :schema-model="schemaModel"
      :schema-cube="schemaCube"
      :measures="measures"
      :columns="columns"
      :rows="rows">
    </kendo-pivotdatasource>
    <kendo-pivotconfigurator
      :data-source-ref="'pivotDataSource'">
    </kendo-pivotconfigurator>
    <kendo-pivotgrid
      :data-source-ref="'pivotDataSource'">
    </kendo-pivotgrid>
  </div>
</template>

We can bind our PivotDataSource to the grid and the configurator using a “ref” attribute. We can use a “data” attribute to set the data as we are using a local data source. The “schema-model” is used to define the structure of our data and the “schema-cube” attribute is used to store the dimensions and measures. The dimensions are the groupings of our data whereas measures are the summarized data values. Here, our data will be grouped by category and year and our measure will be the units sold. The “measure” attribute defines the measures applied to the data which was defined in the schema cube. In this example, we will only apply the sum measure but we can still use the average measure in our configurator. The “column” attribute will be used to define the sales year field and the “row” attribute will be used to define the category for the grid row. The script file of our app component will look like this:-

export default {
  name: 'app',
  data () {
    return {
      data: products,
      schemaModel: {
        fields: {
          ProductName: { type: "string" },
          UnitPrice: { type: "number" },
          UnitsInStock: { type: "number" },
          SalesYear: { type: "number" },
          Category: { type: "string" }
        }
      },
      schemaCube: {
        dimensions: {
          SalesYear: { caption: "All Years" },
          Category: { caption: "All Categories" },
        },
        measures: {
          "Sum": { field: "UnitsSold", aggregate: "sum" },
          "Average": { field: "UnitsSold", aggregate: "average" }
        }
      },
      measures: ["Sum"],
      columns: [{ name: "SalesYear", expand: true}],
      rows: [{name: "Category", expand: true}]
    }
  }
}