recharts NPM (Comment ça marche pour les développeurs)

Introduction

La création de visualisations de données interactives et dynamiques dans le cadre du développement web moderne est essentielle pour améliorer l'expérience de l'utilisateur et prendre des décisions fondées sur des données. Recharts, une bibliothèque de graphiques redéfinie et composable construite sur un composant React indépendant, offre une solution robuste et facile à utiliser pour créer de telles visualisations.

Cet article explore les caractéristiques de Recharts, ses avantages, et comment commencer à l'utiliser dans vos applications React. Nous examinerons également la bibliothèque IronPDF pour générer un PDF à partir d'URL de sites Web ou de chaînes HTML, et nous verrons comment elle se marie bien avec Recharts pour afficher les graphiques produits.

Pourquoi choisir Recharts ?

Le paquet npm de Recharts se distingue pour plusieurs raisons :

1. Facilité d'utilisation : Son approche déclarative s'aligne bien avec l'architecture basée sur les composants de React, ce qui le rend intuitif pour les développeurs déjà familiers avec React.

2. Composabilité : Les composants Recharts sont conçus pour être hautement composables, permettant aux développeurs de créer des graphiques complexes en combinant des composants plus simples.3. Personnalisation : Il offre un haut degré de personnalisation, permettant aux développeurs de modifier presque tous les aspects de leurs graphiques.

3. Sensible et Adaptatif : Recharts garantit que les graphiques sont réactifs et s'adaptent bien à différentes tailles d'écran et résolutions.

Démarrer avec Recharts

Recharts est une bibliothèque de graphiques composables :

Installation de Recharts

npm (méthode d'installation recommandée)

Pour commencer à utiliser Recharts, vous devez l'installer via npm ou yarn. Assurez-vous que Node.js et npm sont installés, puis exécutez la commande suivante dans le répertoire de votre projet :

npm install recharts // recharts installed for release testing

npm install recharts // recharts installed for release testing

Vous pouvez également installer Recharts en utilisant la méthode de construction umd ou dev comme indiqué ci-dessous :

Umd

La version UMD est également disponible sur unpkg.com :

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>

Développement

$ git clone https://github.com/recharts/recharts.git
$ cd recharts
$ npm install
$ npm run build

$ git clone https://github.com/recharts/recharts.git
$ cd recharts
$ npm install
$ npm run build

Démonstration

Utilisation de base

Créons un simple graphique linéaire pour visualiser quelques exemples de données.

1. Importer les composants React de Recharts : Importez les composants nécessaires de la bibliothèque Recharts. Vous pouvez sélectionner les modules Recharts à implémenter à partir de la branche release.

  import React from 'react';
  import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

js

2. Préparer les données : Créez un jeu de données à afficher dans le graphique.

  const data = [
        { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
        { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
        { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
        { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
        { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
        { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
        { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
      ];

js

3. Rendre le graphique : Utilisez les composants Recharts pour rendre le graphique afin d'améliorer la plateforme de test visuel.

  const SimpleLineChart = () => (
        <ResponsiveContainer width="100%" height={400}>
          <LineChart
            width={500}
            height={300}
            data={data}
            margin={{
              top: 5, right: 30, left: 20, bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
            <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
          </LineChart>
        </ResponsiveContainer>
      );
      export default SimpleLineChart;

js

Sortie

Personnalisation et fonctionnalités avancées

En principe, Recharts offre plusieurs façons de personnaliser et d'étendre tous les composants :

Info-bulles personnalisées : Vous pouvez créer des info-bulles personnalisées pour afficher des informations plus détaillées.

Animations : Ajoutez des animations pour rendre vos graphiques plus attractifs.

Interactivité : Implémentez des fonctionnalités interactives telles que des gestionnaires de clics pour rendre vos graphiques plus interactifs.

• Différents Types de Graphiques : Recharts prend en charge divers types de graphiques, y compris les graphiques à barres, les graphiques circulaires, les graphiques en aires, et plus encore.

Exemple : Personnalisation d'un diagramme à barres

Voici comment créer un diagramme à barres personnalisé :

1. Importer les composants nécessaires :

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

js

2. Préparer les données :

const data = [
      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
      { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
    ];

js

3. Afficher le graphique en barres :

const CustomizedBarChart = () => (
      <ResponsiveContainer width="100%" height={400}>
        <BarChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 20, right: 30, left: 20, bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Bar dataKey="pv" fill="#8884d8" />
          <Bar dataKey="uv" fill="#82ca9d" />
        </BarChart>
      </ResponsiveContainer>
    );
    export default CustomizedBarChart;

js

Sortie

Présentation d'IronPDF

IronPDF for Node.js est un package npm robuste conçu pour faciliter la génération de fichiers PDF au sein des applications Node.js. Il permet de créer des documents PDF à partir de contenu HTML, d'URL ou de fichiers PDF existants. Qu'il s'agisse de générer des factures, des rapports ou d'autres documents, IronPDF simplifie le processus grâce à son API intuitive et à son vaste ensemble de fonctionnalités.

Principales caractéristiques d'IronPDF

Conversion de HTML en PDF : Convertissez facilement du contenu HTML en documents PDF, idéal pour générer des PDF dynamiques à partir de contenu web.

Conversion d'URL en PDF : Créez des PDFs directement à partir d'URLs, en capturant le contenu des pages web et en les enregistrant sous forme de fichiers PDF par programmation.

Manipulation de PDF : Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF vous permet d'ajouter des pages, de diviser des documents, etc.

Sécurité PDF : Sécurisez vos documents PDF en les cryptant avec des mots de passe ou en appliquant des signatures numériques, protégeant ainsi vos documents sensibles contre les accès non autorisés.

Sortie de haute qualité : Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme, garantissant la fidélité au contenu original.

Compatibilité multiplateforme : IronPDF est compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration simple : Intégrez facilement IronPDF dans vos applications Node.js en utilisant son package npm. L'API bien documentée permet d'intégrer facilement des fonctionnalités de génération de PDF dans vos projets.

Que vous construisiez une application web, un script côté serveur ou un outil de ligne de commande, IronPDF vous permet de créer des documents PDF de qualité professionnelle de manière efficace et fiable.

Générer un PDF avec Recharts en utilisant IronPDF

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js (si ce n'est pas déjà fait) en utilisant la commande suivante, ou consultez ici pour des instructions plus détaillées.

npx create-next-app@latest recharts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest recharts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Ensuite, accédez au répertoire de votre projet :

cd recharts-pdf

cd recharts-pdf

Installez les paquets nécessaires à l'aide de la commande yarn suivante :

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recharts

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recharts

API de génération de PDF : La première étape consiste à créer une API backend pour générer le document PDF. Comme IronPDF ne fonctionne que côté serveur, nous devons créer une API à appeler lorsque les utilisateurs veulent générer des PDF.

Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous :

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

js

IronPDF nécessite une clé de licence, obtenez-la ici et placez-la dans le code ci-dessus

Ajoutez le code ci-dessous pour accepter une URL de l'utilisateur et générer un PDF à partir de l'URL dans le fichier index.js.

"use client";
import { useState, HTMLDivElement } from "react";
import Head from "next/head";
import styles from "../../styles/Home.module.css";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  BarChart,
  Bar,
} from "recharts";
import { useCurrentPng } from "recharts-to-png";
import FileSaver from "file-saver";
const data = [
  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
  { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
  { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
  { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
  { name: "Page G", uv: 3490, pv: 4300, amt: 2100 },
];
const barData = [
  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
  { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
  { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
  { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
  { name: "Page G", uv: 3490, pv: 4300, amt: 2100 },
];
export default function RechartsDemo() {
  const [text, setText] = useState("");
  const [imgSrc, setImg] = useState("");
  // Implement useGenerateImage to get an image of any element (not just a Recharts component)
  const [getPng, { ref, isLoading }] = useCurrentPng();
  const handleDownload = async () => {
    const png = await getPng();
    // Verify that png is not undefined
    if (png) {
        setImg(png);
      // Download with FileSaver
      FileSaver.saveAs(png, "myChart.png");
    }
  };
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text, {
        method: "GET",
      });
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div className={styles.container} ref={ref}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div>
          <h1>Demo Recharts and Generate PDF Using IronPDF</h1>
          <ResponsiveContainer width="100%" height={400}>
            <LineChart
              ref={ref}
              width={500}
              height={300}
              data={data}
              margin={{
                top: 5,
                right: 30,
                left: 20,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="pv"
                stroke="#8884d8"
                activeDot={{ r: 8 }}
              />
              <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
            </LineChart>
          </ResponsiveContainer>
          <ResponsiveContainer width="100%" height={400}>
            <BarChart
              width={500}
              height={300}
              data={barData}
              margin={{
                top: 20,
                right: 30,
                left: 20,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="pv" fill="#8884d8" />
              <Bar dataKey="uv" fill="#82ca9d" />
            </BarChart>
          </ResponsiveContainer>
          <p>
            <span>Enter Url To Convert to PDF:</span>{" "}
          </p>
          <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
            Generate PDF
          </button>
        </div>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: top;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

js

Explication du code

1. L'API pour la génération de PDF à l'aide d'IronPDF est ajoutée dans pages/api/pdf.js

2. Nous ajoutons ensuite les deux types de graphiques que nous avons produits précédemment

3. Nous ajoutons ensuite un champ de saisie et un bouton pour accepter l'URL de l'utilisateur et déclencher la génération du PDF

4. Le PDF généré est présenté ci-dessous

Sortie

Voici le PDF produit lorsque l'on appuie sur le bouton "Générer un PDF" dans la sortie ci-dessus

recharts NPM (Comment cela fonctionne pour les développeurs) : Figure 5 - Le PDF généré lorsque le bouton générer PDF est pressé

Licence d'IronPDF

Obtenez une clé de licence d'essai gratuite pour découvrir les nombreuses fonctionnalités d'IronPDF avant l'achat. Plus de détails sur la licence perpétuelle peuvent être trouvés sur la page de licence.

Placez la clé de licence ici :

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

Conclusion

Recharts est une bibliothèque puissante qui simplifie la création de visualisations de données dynamiques et interactives dans les applications React. Sa facilité d'utilisation, sa composabilité et ses nombreuses options de personnalisation en font un excellent choix pour les développeurs qui souhaitent enrichir leurs applications avec des graphiques robustes.

Que vous construisiez un simple graphique linéaire ou une visualisation complexe de plusieurs séries, Recharts fournit les outils dont vous avez besoin pour réussir. Essayez-le dans votre prochain projet et découvrez les avantages d'une visualisation transparente des données. IronPDF est un outil puissant de génération de PDF et peut être utilisé en conjonction avec Recharts pour afficher et partager tous les graphiques produits. Les développeurs à la recherche d'un outil efficace pour faciliter la production et la manipulation des PDF doivent essayer IronPDF.