Rapports intégrés élégants au pixel près avec Telerik

Nous, de l'équipe Telerik Reportingpensons que la création de présentations de données devrait être facile et c'est ce que nous nous efforçons toujours d'atteindre. Dans cet article de blog, nous allons vous montrer comment créer un magnifique rapport avec notre dernier chef-d'œuvre, le Telerik Web Report designer.

Pourquoi le reporting intégré est-il important ? En utilisant le reporting, nous pouvons suivre et représenter les données, fournir une analyse de la marche de l'entreprise, donner des informations sur la croissance et les bénéfices, etc. Il peut être utilisé pour identifier les tendances au fil du temps, faire des prévisions et des plans futurs, voire même nous aider dans la prise de décision. Avoir un outil de reporting fiable est un must pour une entreprise prospère, et Telerik Reporting peut certainement vous y aider.

Telerik Reporting est un puissant outil de reporting intégré .NET qui rend la magie de la visualisation des données facile lorsque vous utilisez les différents rapports. articles que nous fournissons. Un rapport peut être affiché dans la plupart des technologies auxquelles vous pouvez penser : ASP.NET Core, Blazor, ASP.NET MVC, ASP.NET Web Forms, Angular, React, Vue, HTML5, WPF, WinForms, UWP, etc. .

Le concepteur de rapports Web Telerik est un widget jQuery HTML5/JavaScript/CSS3 qui vous permet d'intégrer un concepteur de rapports dans vos applications Web. Il peut être ajouté aux applications .NET Framework et .NET Core. Avec lui, vos utilisateurs peuvent créer ou modifier des rapports existants directement depuis votre application Web. Vous pouvez également l'utiliser à partir du serveur de rapports Telerik, ce qui accélère considérablement l'édition des rapports hébergés sur le serveur.

Dans cette démo, vous verrez comment créer un rapport affichant les dernières valeurs d'une crypto-monnaie. Lors de la création du rapport, nous utiliserons différentes méthodes pour la représentation et le style des données. Voyons ce que nous avons préparé pour vous.

Intégration du concepteur de rapports Web à l'application .NET5

Le concepteur de rapports Web peut être ajouté aux projets .NET Core 3.1 et .NET 5 en trois étapes simples à l'aide de Visual Studio modèle d'élément :

1. Clic droit sur le projet -> Ajouter -> Nouvel élément.
2. Sélectionnez la Page HTML5 Telerik Web Report Designer.

   

3. Suivez l'assistant jusqu'à ce qu'il soit terminé.

Une fois que vous avez ajouté le designer, lancez l'application. Pour créer un nouveau rapport, cliquez sur Menu -> Nouveau -> tapez le nom du rapport et appuyez sur le bouton Enregistrer. rapide, vous ne trouvez pas ?

Ajout de la source de données du rapport

Continuons avec l'ajout de la source de données qui contiendra les données du rapport. Dans ce cas, nos données sont au format JSON et contiennent des informations sur trois crypto-monnaies : nom, image, prix, etc.

Pour ajouter la source de données, accédez à l'onglet Components -> JSON DataSource.Une fois le composant ajouté, définissez-le comme une valeur pour la propriété DataSource du rapport.

Enfin, ajoutez un nouveau à Regroupement au rapport basé sur le nom de la crypto-monnaie.

Affichage des informations sur la crypto-monnaie

Dans l'en-tête du groupe, nous afficherons des informations sur le nom de la crypto-monnaie, la capitalisation boursière, le volume pour le dernier 24 heures, ainsi que l'approvisionnement en circulation.

Ajoutons le logo de la crypto-monnaie avec une PictureBox. Nous allons définir sa propriété Value comme un champ de la source de données qui est une URL.

Il est maintenant temps d'afficher si le pourcentage des dernières 24 heures augmente ou diminue. Pour ce faire, ajoutez une zone de texte et définissez sa propriété Value sur : « = Champs.[24h%] +"%".."

Pour le rendre encore plus sophistiqué, ajoutez un panneau et déplacez la zone de texte dedans. Nous voulons colorer le panneau en fonction de la valeur en pourcentage. En utilisant ConditionalFormatting dans Telerik Reporting, vous pouvez modifier l'apparence visuelle des éléments du rapport en fonction des conditions changeantes dans les données du rapport sans aucun codage ni événement.

Dans notre scénario, nous définirons un formatage conditionnel. règles pour la couleur de police et la couleur d'arrière-plan de la zone de texte. Si le pourcentage est supérieur à 0, nous le colorerons en vert, sinon en rouge.

Nous ajouterons également une forme triangulaire dans le Panel qui indiquera si le pourcentage augmente ou diminue. Définissez les propriétés suivantes du ShapeType :

• Type : Polygon
• StartAngle : 270
• VertexCount : 3
• Marquez également la propriété Stretch.

Définissez une nouvelle Binding à la forme afin de définir son angle selon que le pourcentage augmente ou diminue :

• Path : Angle
• Expression : = Champs.[24h%] > 0 ? "0" : "180"

Cliquez sur Aperçu pour voir le résultat actuel :

Identifier les tendances des dernières 24 heures

Qu'est-ce qu'un rapport sans graphiques ?! Nous voulons voir la croissance et la diminution de la valeur de la crypto-monnaie en utilisant un graphique. Il nous montrera l'évolution du prix de la crypto-monnaie au cours des dernières 24 heures.

Pour ce faire, allez dans l'onglet Composants -> Graphiques -> Zone. Définissez les propriétés DataSourceCategories et Value du graphique. Encore une fois, nous voulons colorer la zone du graphique si le pourcentage des dernières 24 heures augmente ou diminue. Pour cette raison, nous ajouterons deux règles de mise en forme conditionnelle à areaSeries.

Nous souhaitons également définir la valeur d'échelle minimale et maximale de l'axe X et de l'axe Y en ajoutant une liaison au système de coordonnées, ainsi qu'un format d'étiquette spécial de l'axe X.

Prévisualisons le résultat :

>

Afficher les données passées

Bien sûr, nous nous intéressons également aux valeurs passées des crypto-monnaies. Quelle meilleure façon d'obtenir ces informations que d'utiliser des graphiques qui représentent le mouvement des valeurs pour la semaine dernière et pour le mois dernier. C'est quelque chose qui peut nous aider à décider d'investir ou non.

Cette fois, nous utiliserons des graphiques en courbes et, encore une fois, nous définirons des règles de style en fonction des valeurs. Encore une fois, en définissant des règles de mise en forme conditionnelle, nous colorerons la série de graphiques en fonction du pourcentage d'augmentation ou de diminution. Et voici le résultat :

Vendre / Conserver / Acheter ?

Jusqu'à présent, tout va bien. Nous avons affiché les données. Cependant, il reste une grande question : devons-nous investir ou non ? Ajoutons un indicateur de risque qui, basé sur la valeur de santé qui provient de la source de données, « conseillera » s'il faut vendre, conserver ou acheter. Ajoutez une zone de texte et utilisez l'expression suivante pour sa valeur :

= Fields.Health < 300 ? "Sell" : (Fields.Health > 700 ? "Acheter" : "Maintenir")

Continuons à insérer trois Formes colorées en rouge, jaune et vert. Définissez les propriétés suivantes du ShapeType :

• Type : Polygon
• StartAngle : 45
• VertexCount : 4

Ajouter une quatrième forme avec une ligne type que nous utiliserons pour indiquer la valeur. Il sera déplacé en fonction d'une valeur via une Binding pour l'emplacement.

Nous utilisons des liaisons pour apporter des modifications aux éléments du rapport lors de l'exécution. Pendant le traitement du rapport, les expressions sont évaluées, tout comme les valeurs de propriété. Les expressions peuvent inclure une combinaison d'opérateurs, de constantes, de références à des valeurs intégrées et même de code externe ou personnalisé.

Et voilà ! Nous avons terminé avec notre rapport principal préparé dans Telerik Web Report Designer. Ci-dessous, vous pouvez voir le résultat.

Vous pouvez également consulter le rapport dans nos démos en ligne—Crypto Dashboard Report Demo. Le projet complet se trouve dans notre dépôt GitHub avec des exemples de projets.

Vous voulez essayer Telerik Reporting ?

Telerik Reporting est un outil complet, facile à utiliser et puissant outil de reporting intégré .NET pour les applications Web et de bureau prenant en charge : Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React, Vue, WPF, WinForms et UWP. Également disponible dans le cadre de nos Telerik DevCraft bundlesReporting vous permet de créer, de styliser, d'afficher et d'exporter des rapports riches, interactifs et réutilisables pour présenter de manière attrayante des données analytiques et commerciales. Ajoutez des rapports à n'importe quelle application métier via les commandes de la visionneuse de rapports. Exportez les rapports prêts dans plus de 15 formats.

Téléchargez un essai GRATUIT aujourd'hui.