Premiers pas avec le KendoReact PivotGrid

Les tableaux croisés dynamiques combinent les fonctions d’une grille de données avec l’affichage de graphiques et de diagrammes, offrant aux utilisateurs une manière interactive d’explorer les données. Apprenez à démarrer avec le KendoReact PivotGrid dès aujourd’hui !

Le PivotGrid est l’un des composants les plus puissants inclus dans Progress KendoRéagir bibliothèque – et avec plus de 100 composants incroyables et accessibles, cela veut vraiment dire quelque chose !

Cependant, se lever et utiliser le PivotGrid peut sembler un peu écrasant à première vue. C’est le plus souvent le cas lorsque les développeurs ne sont pas familiarisés avec les tableaux croisés dynamiques en général. Comprendre le concept de base et le cas d’utilisation d’un tableau croisé dynamique nous aidera grandement lors de la mise en œuvre du composant spécifique. Alors, décomposons-le !

Qu’est-ce qu’un tableau croisé dynamique ?

Les tableaux croisés dynamiques sont une sorte de grille de données complexe qui permet aux utilisateurs de regrouper, d’agréger et de comparer des données pour des catégories spécifiques au sein d’un ensemble de données plus vaste. Parce qu’il est interactif, les utilisateurs peuvent masquer, afficher, filtrer et autrement ajuster les données affichées à l’aide d’une interface utilisateur graphique familière. Cela permet aux utilisateurs encore moins avertis techniquement de manipuler un grand ensemble de données de différentes manières, afin qu’ils puissent extraire les informations exactes dont ils ont besoin.

Caractéristiques du KendoReact PivotGrid

Plus précisément, le KendoReact Grille Pivot a été créé pour répondre aux besoins des utilisateurs suivants :

• Filtration: Les utilisateurs peuvent filtrer les données dans un tableau croisé dynamique pour afficher uniquement ce qui les concerne le plus. Cela comprend non seulement le filtrage standard par valeurs, mais également le filtrage avec des opérateurs (c’est-à-dire « contient » ou « commence par »), des périodes de temps et plus encore.
• Tri: Les utilisateurs peuvent trier une ou plusieurs colonnes dans le KendoReact PivotGrid, puis organiser facilement les données par ordre croissant ou décroissant.
• Manipulation aisée des données via le configurateur : Parce que les tableaux croisés dynamiques peuvent aller de relativement simples à extrêmement complexes, le KendoReact PivotGrid est livré avec le configurateur : une liste de champs à travers lesquels les utilisateurs peuvent appliquer leurs modifications via une interface utilisateur intuitive et conviviale. Les développeurs peuvent personnaliser le configurateur pour améliorer encore l’UX en n’affichant que les outils pertinents et utiles aux utilisateurs dans le contexte de leur application spécifique.
• Exportation de données : Les données du KendoReact PivotGrid peuvent être facilement exportées par les utilisateurs dans un fichier Excel ou un PDF pour un partage rapide.
• Visualisation des données : Il peut être difficile de bien comprendre et de voir les connexions dans les données lorsqu’elles sont exclusivement présentées sous forme de grille. Pour cette raison, le KendoReact PivotGrid et KendoReact Graphiques bibliothèque ont été créés pour fonctionner en parfaite harmonie. Lorsqu’un développeur intègre le graphique de son choix au PivotGrid, le graphique est automatiquement mis à jour au fur et à mesure que divers filtres, tris et autres manipulations sont appliqués aux données du PivotGrid.

Liaison de données

Les développeurs peuvent lier des données au KendoReact PivotGrid de deux manières : liaison à un cube OLAP accessible via HTTP ou liaison à des données locales. Pour plus d’informations sur les spécificités de la liaison des données au KendoReact PivotGrid, consultez notre vaste documentation.

Qu’est-ce qu’un cube OLAP ?

Au cœur du concept de tableau croisé dynamique se trouve le Cube OLAP. Les cubes OLAP (Online Analytical Processing) sont un type spécifique de tableau de données multidimensionnel. Considérez-le comme une feuille de calcul avec des axes supplémentaires. Par exemple, dans une feuille de calcul traditionnelle, l’axe Y peut être « Produits » et l’axe X « Coût », mais que se passe-t-il si nous voulons également comparer ces deux éléments sur une période de temps ?

Étant donné que les cubes OLAP sont multidimensionnels, nous pouvons ajouter des « dimensions » supplémentaires d’informations qui ne pourraient pas être représentées dans une feuille de calcul standard. En fait, un cube OLAP n’a pas besoin d’être un cube : les « côtés » ne sont pas tenus d’être pairs et nous pouvons en avoir autant que nous le souhaitons.

Configuration du KendoReact PivotGrid

Si tout cela ressemble à la solution parfaite pour votre application, alors bonne nouvelle : l’ajouter à votre application React est un jeu d’enfant !

1. Installer et importer le composant.

   npm install le kendo-react-pivotgrid bibliothèque, ainsi que les autres dépendances KendoReact nécessaires pour le PivotGrid.

    npm install --save @progress/kendo-react-pivotgrid @progress/kendo-data-query @progress/kendo-react-buttons @progress/kendo-react-treeview @progress/kendo-react-data-tools @progress/kendo-react-form @progress/kendo-react-indicators @progress/kendo-react-intl @progress/kendo-react-labels @progress/kendo-svg-icons
   

   Ensuite, importez le PivotGrid, PivotGridContainer et PivotGridAxis dans votre composant React.

    import {
      PivotGrid,
      PivotGridContainer,
      PivotGridAxis,
    } from "@progress/kendo-react-pivotgrid";
   

2. Définir les axes de votre tableau croisé dynamique :

    const defaultColumnAxes: PivotGridAxis = ;
       const defaultRowAxes: PivotGridAxis = ;
       const defaultMeasureAxes: PivotGridAxis = ;
   

3. Définir la catalog, cube et url:

    const catalog = 'Adventure Works DW 2008R2';
       const cube = 'Adventure Works';
       const url = 'https://demos.telerik.com/olap/msmdpump.dll';
   

4. Ajoutez le composant à votre JSX et ajoutez/définissez les accessoires supplémentaires dont vous pourriez avoir besoin. Le composant devrait ressembler à ceci :

    <PivotOLAPService
      catalog={catalog}
      cube={cube}
      url={url}
      defaultRowAxes={defaultRowAxes}
      defaultColumnAxes={defaultColumnAxes}
      defaultMeasureAxes={defaultMeasureAxes}
      >
      {({ pivotProps }) => (
        <PivotGridContainer>
          <PivotGrid {...pivotProps} />
        </PivotGridContainer>
      )}
    </PivotOLAPService>
   

Avec seulement ces quatre étapes, vous serez opérationnel ! Après cela, vous pouvez ajouter un de nos thèmes (ou créez le vôtre) pour styliser le composant, ou personnaliser davantage le PivotGrid si tu veux. Le monde est ton coquillage!

Les données dont vos utilisateurs ont besoin, comme ils en ont besoin

Le KendoReact PivotGrid est un composant puissant qui permet aux utilisateurs de regrouper, d’agréger et de comparer des données pour des catégories spécifiques au sein d’un ensemble de données plus large, puis de visualiser ces données dans un graphique connecté ou de les exporter vers des formats de fichier Excel ou PDF. Bien que le concept du cube OLEP puisse être difficile pour ceux qui n’ont jamais travaillé avec, prendre le temps de le maîtriser peut offrir un tout nouveau monde de données à vos utilisateurs.

Comme toujours, si vous n’utilisez pas déjà la bibliothèque KendoReact, vous pouvez essayez-le entièrement gratuitement pendant 30 jours. Essayez-le et voyez comment l’expérience utilisateur de votre application pourrait en bénéficier et à quelle vitesse votre temps de développement pourrait être lorsque des composants complexes comme le PivotGrid sont prêts à l’emploi dès la sortie de la boîte !