Fermer

juillet 12, 2019

Comment utiliser un composant d'interface utilisateur Vue Pivot Grid dans votre application Web


Dans cet article, nous allons passer en revue le composant PivotGrid. Contrairement à une grille typique, un tableau croisé dynamique vous permet de modifier la présentation des données. Voyons comment en ajouter une à vos applications Web.

Dans le post précédent, nous avions appris à créer un graphique sparkline à l'aide de de Kendo UI pour Vue . Dans cet article, nous examinerons le composant PivotGrid.

Un PivotGrid affiche les données dans une grille avec des valeurs récapitulatives. Contrairement à une grille typique, un tableau croisé dynamique vous permet de modifier la présentation des données. Par exemple, vous pouvez avoir un ensemble de données avec des éléments d'inventaire comprenant le nombre en stock, la catégorie, le magasin et le trimestre. Vous pouvez créer un tableau croisé dynamique pour analyser le stock total en stock par magasin et par trimestre. Ou vous pouvez voir l'inventaire en stock par catégorie et par magasin. Ces différentes perspectives peuvent être visualisées dans la même grille en sélectionnant simplement les champs à utiliser pour la ligne et la colonne de la grille. Dans une grille régulière, nous ne pouvons créer qu'une seule vue statique. Nous verrons ensuite comment créer un tableau croisé dynamique en utilisant des exemples de données de vente pour une épicerie.

Pour commencer

Nous aurons besoin des composants PivotGrid, PivotConfigurator et PivotDataSource. Le tableau croisé dynamique affiche nos données résumées. Le PivotConfigurator nous aide à construire le PivotGrid. Et PivotDataSource est une extension du composant DataSource utilisé pour lier nos données au PivotGrid et au PivotConfigurator. Tout d'abord, nous allons initialiser notre projet en utilisant le modèle Vue webpack-simple . Nous installerons ensuite Kendo UI, un thème, le paquet PivotGrid et le paquet DataSource.

 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

Ensuite, dans le fichier main.js nous allons importer les packages Kendo UI, enregistrer les composants PivotGrid et PivotDataSource globalement, puis les ajouter à la liste des composants.

 import Vue from from vue 'import App depuis' ./App.vue'import '@ progress / kendo-ui'import'@progress/kendo-theme-default/dist/all.css'import {PivotGrid, PivotGridInstaller} de' @ progress / kendo- pivotgrid-vue-wrapper'import {PivotDataSource, DataSourceInstaller} à partir de '@ progress / kendo-datasource-vue-wrapper'

Vue.use (PivotGridInstaller)
Vue.use (DataSourceInstaller) nouveau Vue ({
  el: '#app',
  Composants: {
  PivotGrid,
  PivotDataSource
  },
  render: h => h (App)}) 

Ajout des composants

Nos données comportent trois champs: unités vendues, année de vente et catégorie. Pour garder notre exemple simple, nous allons simplement utiliser les années 2017 et 2018 et les catégories café et thé. Nous voulons voir les unités vendues par catégorie par année. La grille doit également indiquer la somme des unités vendues pour chaque catégorie et chaque année. Voici nos données:

 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"
  }]; 

Dans un premier temps, nous allons créer le composant PivotDataSource et l'ajouter à notre modèle. Ajoutez ensuite les composants PivotGrid et PivotConfigurator qui seront liés à PivotDataSource. Ce qui suit est le modèle mis à jour pour notre application:

   

PivotDataSource a besoin d'un attribut ref pour que nous puissions le lier à la grille et au configurateur. Comme nous utilisons une source de données locale, nous utilisons l'attribut data pour définir les données. Le modèle de schéma définit la structure de nos données. Le schema-cube stocke les dimensions et les mesures. Les dimensions sont les regroupements de nos données. Nos données seront regroupées par catégorie et par année. Les mesures sont des valeurs de données résumées. Notre mesure est les unités vendues. Une mesure est définie par un champ et un agrégat. Un agrégat peut être moyenne, nombre, maximum, minimum ou somme. Pour notre ensemble de données, nous allons définir une somme et une mesure moyenne.

L'attribut mesures définit la mesure à appliquer aux données définies dans le cube de schéma. Nous n'appliquerons que la mesure de somme. La mesure moyenne sera toujours disponible dans notre configurateur. Les attributs des colonnes et des lignes définissent les champs à utiliser pour chacun. Dans cet exemple, nous utiliserons le champ année de vente pour la colonne de la grille et la catégorie pour la ligne de la grille. Ceci est le script de notre composant App avec toutes les données définies:

 export default {
  nom: 'app',
  Les données () {
    revenir {
      données: produits,
      schemaModel: {
        des champs: {
          ProductName: {type: "string"},
          UnitPrice: {type: "nombre"},
          UnitsInStock: {type: "number"},
          SalesYear: {type: "number"},
          Catégorie: {type: "chaîne"}
        }
      },
      schemaCube: {
        dimensions: {
          SalesYear: {légende: "Toutes les années"},
          Catégorie: {légende: "Toutes catégories"},
        },
        les mesures: {
          "Sum": {champ: "UnitsSold", agrégat: "sum"},
          "Moyenne": {champ: "Unités vendues", agrégat: "moyenne"}
        }
      },
      mesures: ["Sum"],
      colonnes: [{ name: "SalesYear", expand: true}],
      rangées: [{name: "Category", expand: true}]
    }
  }
}
 

 Pivot Grid

En regardant la grille, il est facile de voir qu'il y a plus de café que de thé vendu globalement. En outre, la quantité de café vendue a augmenté en 2018, tandis que la quantité de thé vendue a diminué. Ces informations peuvent être utilisées pour prendre des décisions commerciales telles que le volume des stocks à acheter et à garder en stock.

Résumé

Nous avons créé un tableau croisé dynamique pour afficher le nombre total de produits vendus par catégorie et par année. Un tableau croisé dynamique place les données dans un format afin que nous puissions voir comment les informations sont liées. Un tableau croisé dynamique est utile lorsque vous disposez de données multidimensionnelles ou hiérarchiques. Les dimensions sont les champs par lesquels vous regroupez les données. Les données hiérarchiques ont plusieurs niveaux. Par exemple, la catégorie et la sous-catégorie sont des niveaux, de même que les années et les mois. Une caractéristique unique de la grille est le cube. Le cube stocke la structure des données. Cela inclut les dimensions et les mesures. Les mesures sont les valeurs de données dans chaque cellule. Pour notre exemple, c’était les unités vendues. Nous avons utilisé un ensemble de données très petit et simple pour montrer comment utiliser le tableau croisé dynamique. Il est possible d’avoir des colonnes et des lignes dans votre grille avec plus d’une dimension ainsi que plusieurs mesures. Ces fonctions facilitent l'analyse de grandes quantités d'informations et la collecte d'informations précieuses.

Ressources

Essayez le Kendo UI par vous-même

Vous souhaitez commencer à tirer parti de plus de 70 composants prédéfinis de Kendo UI, comme la grille ou le planificateur? Vous pouvez commencer dès aujourd'hui à essayer gratuitement Kendo UI pour Vue et commencer à développer vos applications plus rapidement.

Démarrer mon essai de l'interface utilisateur de Kendo

Versions angulaire, réaction et jQuery

Vous recherchez un composant d'interface utilisateur prenant en charge des cadres spécifiques? Vérifiez Kendo UI pour Angular Kendo UI pour React ou Kendo UI pour jQuery .





Source link