Création de graphiques personnalisables avec l'interface utilisateur Telerik pour Blazor

Le composant Graphique de l'interface utilisateur de Telerik pour Blazor facilite la création de graphiques, il vous permet également de laisser l'utilisateur disposer du graphique qu'il souhaite.

Vous pouvez générer n'importe quel rapport. ou un graphique que vous voulez, mais s'il est utilisé par plus d'une personne, vous pouvez être quasiment assuré que votre graphique ne sera pas «correct» pour plus d'un d'entre eux. Pour tous les autres utilisateurs, votre graphique ne sera pas dans le format "correct", il ne combinera pas les "bonnes" données, etc. Même si vous avez une audience pour laquelle vous pouvez personnaliser votre graphique, vous avez la garantie que, lorsque cette personne changera de poste, le remplaçant voudra apporter des modifications importantes au graphique.

Bien entendu, c'est L'une des raisons pour lesquelles les tableaux de bord sont populaires: ils permettent aux utilisateurs de configurer les divers widgets de la page pour répondre aux souhaits / besoins particuliers de chaque utilisateur. Le composant Graphique de Telerik UI for Blazor prend en charge ce même type de flexibilité grâce à sa capacité à être reconfiguré de manière dynamique au moment de l'exécution. En d'autres termes, vous pouvez non seulement remettre un graphique à l'utilisateur, mais également lui donner la possibilité de personnaliser le graphique pour obtenir la vue souhaitée.

Dans un article précédent, Création de graphiques avec le graphique Telerik Component for Blazor j'ai montré comment le mécanisme de reliure de la série indépendante du graphique me permettait d'intégrer un ensemble de données entrant aux points de données souhaités par l'utilisateur. Le balisage et le code permettant de réaliser ce travail ressemblent à ceci:

 < TelerikChart > 
   < ChartSeriesItems > 
             < ChartSeries  Type  ] =  " @selectedType "    Data  =  " @ quantités en vente "  > 
            > /  ChartSeries > 
   </  ChartSeriesItems > 
   < ChartCategoryAxes > [19659000] <  " @months "  >  </  GraphiqueCatégorieAxis > 
   </  GraphiqueCatégoryAxes  @
 </  TelerikChart > 
 

  @code  {
  IEnumerable privé  < objet >  quantités vendues ; 
  chaîne privée  []  months ; 

Dans cet exemple, j'utilise ce que Telerik appelle la reliure «Independent Series». La reliure à séries indépendantes nécessite deux collections: une pour stocker les «données à représenter» ou des données de l'axe des Y (quantités vendues, dans mon cas), et une pour conserver les étiquettes de ces données ou les données de l'axe des X (mois, dans ce champ). code). J'ai construit les deux collections dans la méthode OnInitializedAsync de mon composant à partir d'une collection initiale d'objets SalesDTO.

Laisser l'utilisateur personnaliser les données

Mais, maintenant que j'ai créé ce graphique initial, je peux commencer à donner à l'utilisateur la possibilité de personnaliser. il. Pour commencer, je laisse l’utilisateur choisir l’année pour les données afin que l’utilisateur puisse consulter les années précédentes.

La première chose à faire pour laisser l’utilisateur choisir l’année à afficher consiste à déclarer deux champs: l’un contenant les liste des années extraites de ma collection de SaleDTO et une année réservée à l'année sélectionnée par mon utilisateur. Ces deux champs se présentent comme suit:

 @code  {
    liste privée  < chaîne >  année ; 
    chaîne privée selectedYear ; 

Dans ma méthode OnInitializedAsync, après avoir récupéré mes données et chargé mon champ de mois, je chargerai mon champ d'années avec les années disponibles dans la collection SalesDTO en utilisant un code comme celui-ci:

 years  =   ( de s dans graphSales
                 orderby s .  Année
                 select s .  Année ) .  Distinct  () .  Liste des tâches à traiter  () () ; 

Enfin, dans mon balisage, je vais générer une liste déroulante avec des options pour chacune des années. Je lierai cette liste déroulante à mon champ selectedYear afin que le champ soit automatiquement mis à jour chaque fois que l'utilisateur sélectionne une année:

 Année:  <sélectionnez   @bind  =  " selectedYear "  > 
         < option >  Choisissez une année  </  option > 
        @foreach (année de chaîne en années)
        {
         < option >  @ year  </  option > 
        }
     </  sélectionnez > 
 

Ma dernière étape, qui consiste à laisser l'utilisateur sélectionner les données à utiliser, consiste à mettre à jour l'instruction qui charge le champ quantitésSold qui, à son tour, pilote mon graphique. Au lieu de coder en dur dans l'année en cours comme je l'avais fait à l'origine, la requête LINQ qui remplit le champ utilise mon champ selectedYear (Blazor se chargera de régénérer la collection chaque fois que vous sélectionnerez des modifications):

 quantitésSold  =   ( de s dans graphSales
                               où s .  Année  ==  l'année sélectionnée
                               orderby s .  MonthOrder
                                sélectionnez   ( objet )  s .  Quantité vendue ) ; 

Cela fonctionne très bien pour mon série… mais a moins de succès pour mon ChartAxis. Bien que je puisse utiliser mon champ selectedYear dans la requête qui génère ma liste de noms de mois, cette requête n'est pas régénérée lorsque l'utilisateur sélectionne une nouvelle année.

La solution est toutefois relativement simple. Premièrement, je convertis mon champ selectedYear en une propriété entièrement écrite. Ensuite, je régénère ma liste de mois dans le configurateur de la propriété, au lieu de le faire dans ma méthode OnInitializedAsync. Voici la nouvelle version de la propriété selectedYear sélectionnée qui remplissait le champ des mois chaque fois que l'utilisateur sélectionne une nouvelle année:

 string selectedyear  =   "Choisissez une année" [19659006]; 
chaîne privée selectedYear
 {
   obtenir
   {
      retour  année sélectionnée ;  
  } 
  ensemble
   {
     selectedyear  =  valeur ; 
     months  =   ( de s dans graphSales
                        où s .  Année  ==  l'année sélectionnée
                        orderby s .  MonthOrder
                       select s .  Mois ) .  Distinct  () .  ToArray  (). ;         
  } 
} 

Vous pouvez très bien argumenter que je devrais également transférer le code qui remplit mon champ quantitésSold à cet opérateur. Cependant, le code fonctionne dans la méthode OnInitializedAsync et le premier principe de programmation de Vogel est le suivant: «Vous ne vissez pas avec du code qui fonctionne» – je le laisse donc en place.

Laisser l'utilisateur personnaliser le type de graphique.

C'est cool, mais c'est beaucoup plus sexy de laisser l'utilisateur changer le type de graphique. Je peux aussi faire cela avec le composant Graphique.

Premièrement, j'ai besoin d'un autre champ, cette fois pour conserver mon type de graphique. Je vais initialiser ce champ au type que je pense que l'utilisateur est le plus susceptible de vouloir (si je n'initialise pas ce champ, mon graphique passera par défaut à Area, qui, sans être le pire choix au monde, est moins probable être le favori de mon utilisateur que, par exemple, un graphique en courbes). Voici ce champ:

 private ChartSeriesType selectedChartType  =  ChartSeriesType .  Line ; 

Je vais ensuite fournir à l'utilisateur une autre liste déroulante permettant à l'utilisateur de sélectionner son type de graphique. Je vais lier la liste déroulante à mon champ selectedChartType. Cette liste déroulante se présente comme suit:

 Type:  < Sélectionnez   @bind  =  " de type de feuille "  > [19659032]
   < option   value  =  " @ ChartSeriesType.Line "  >  Ligne  </  option > 
 < option   value  =  " @ ChartSeriesType.Bar "  >  Bar  </  option > 
 < option   value  =  " @ ChartSeriesType.Column "  >  Colonne  </ . option > 
 < option   value  =  " @ ChartSeriesType.Area "  >  Zone  </  option > 
 </  sélectionnez > 
 

La dernière étape consiste, dans l’élément TelerikChart, à associer l’attribut Type de ChartSeries au champ selectedChartType. Ce changement me donne ceci:

 < ChartSeries   Type  =  " @selectedChartType "    Données  =  "  @quantitiesSold  " > 
 </  série Chart > 
 

Et maintenant, j'ai l'affichage de la figure 2 ci-dessous:

Mon utilisateur n'a peut-être toujours pas, au départ, l'affichage qu'il souhaite. Mais je leur ai donné quelques options pour personnaliser cet affichage afin d’obtenir ce qu’ils veulent. En d'autres termes, je ne pourrai peut-être pas les rendre heureux, mais je pourrai les tenir occupés.

Essayez-le aujourd'hui

Pour en savoir plus sur les composants de l'interface utilisateur Telerik pour Blazor et sur ce qu'ils peuvent faire, consultez la page . ] La page de démonstration de Blazor ou téléchargez un essai pour commencer immédiatement à se développer.