SVAR Gantt : nouveau diagramme de Gantt interactif open source pour React

Besoin d'implémenter une fonctionnalité de gestion de projet dans votre application React ? Vous avez probablement envisagé un diagramme de Gantt comme option, car il s'agit d'un outil efficace pour la planification de projets depuis de nombreuses années.

Cependant, la mise en œuvre d'un diagramme de Gantt personnalisé et riche en fonctionnalités dans React peut s'avérer difficile et prendre beaucoup de temps. C'est pourquoi l'équipe SVAR a publié SVAR React Gantt, un composant d'interface utilisateur interactif open source qui apporte une puissante visualisation de projet à vos applications Web.

Pourquoi une autre bibliothèque de diagrammes de Gantt ?

SVAR Gantt est conçu pour les développeurs React. Il est facile à utiliser, hautement personnalisable et conçu pour vous faire gagner des heures de développement. Non seulement il fournit les fonctionnalités les plus essentielles du diagramme de Gantt, mais il gère également de grandes quantités de données avec des performances ultra-rapides.

Que vous construisiez un outil de gestion de projet, un système de planification ou toute autre application nécessitant une visualisation chronologique, vous pouvez avoir un diagramme de Gantt interactif et visuellement attrayant et opérationnel avec un minimum d'effort.

Alors, quelles sont les principales fonctionnalités de SVAR React Gantt ?

✅ Gestion des tâches principales

Le composant SVAR React Gantt fournit des fonctionnalités essentielles de gestion des tâches dès la sortie de la boîte. Laissez vos utilisateurs créer, modifier et supprimer des tâches via un formulaire simple. La durée et les dates de début/fin des tâches peuvent également être modifiées directement sur la timeline par glisser-déposer.

Le composant prend en charge trois types de tâches avec lesquelles travailler : tâche, tâche récapitulative (calculée automatiquement en fonction des sous-tâches) et jalon. Chaque barre des tâches affiche la progression sous forme de pourcentage, que les utilisateurs peuvent modifier. Vous pouvez également paramétrer les tâches récapitulatives pour calculer automatiquement l'avancement en prenant en compte toutes les sous-tâches.

➡️ Dépendances intelligentes

Avec SVAR Gantt, vous pouvez facilement gérer les relations entre les tâches. Le composant prend en charge différents types de dépendances : de bout en début, de début en début, de bout en bout et de début en fin. Toutes les dépendances peuvent être gérées via le formulaire d'édition de tâches ou directement sur la timeline.

? Fonctionnalités de l'interface utilisateur interactive

SVAR Gantt propose une interface moderne et interactive pour donner aux utilisateurs un contrôle total sur les tâches. Il prend en charge :

• Modification des tâches par glisser-déposer
• Formulaire de modification de tâche convivial
• Suivi visuel des progrès
• Réorganisation des tâches dans la grille
• La possibilité d'ajouter un menu contextuel et une barre d'outils
• Zoom avec défilement

? Personnalisation riche

Bien que les utilisateurs puissent contrôler le contenu et la présentation du diagramme de Gantt via l'interface utilisateur, vous, en tant que développeur, avez le contrôle total de l'apparence du composant, notamment :

• Styles de barre des tâches personnalisables (forme, couleur, police)
• Dimensions et bordures de chronologie configurables
• Mise en avant week-end/vacances
• Info-bulles personnalisées pour les barres de tâches
• Options de thème clair ou sombre

⚡ Des performances évolutives

Avec SVAR Gantt vous pouvez être en sécurité en termes de performances et de réactivité même avec un grand nombre de tâches et de projets. Quant à la gestion des mises à jour, nous proposons une aide spéciale pour simplifier les interactions client-serveur.

Voici ce que vous obtenez pour obtenir les meilleures performances et une gestion efficace des données :

• Gestion efficace de grands ensembles de données
• Chargement dynamique des sous-tâches
• Rendu optimisé
• RestDataProvider pour une intégration back-end transparente
• Prise en charge des mises à jour par lots

Démarrage

Pour ajouter SVAR Gantt à votre projet, installez-le via npm :

npm installer wx-react-gantt

Ensuite, incluez le composant dans votre fichier React :

<script>
    import { Gantt } from "wx-react-gantt";

    const tasks = [
        {
            id: 1,
            start: new Date(2024, 3, 2),
            end: new Date(2024, 3, 17),
            text: "Project planning",
            progress: 30,
            parent: 0,
            type: "summary",
            open: true,
            details: "Outline the project's scope and resources.",
        },
    ];
    const links = [];
    const scales = [
        { unit: "month", step: 1, format: "MMMM yyy" },
        { unit: "day", step: 1, format: "d", css: dayStyle },
    ];
</script>

<Gantt {tasks} {links} {scales} />

Pour en savoir plus, consultez le guide de démarrage détaillé.

Quelle est la prochaine étape ?

Essayez SVAR Gantt dans votre prochain projet ! Nous serions ravis d’entendre vos commentaires et de voir ce que vous construisez avec. Voici la liste des ressources utiles qui vous aideront à démarrer et à commencer à créer votre propre diagramme de Gantt personnalisé :

• ? Page d'accueil du Gantt SVAR
• ? Documentation
• ? Démos en direct
• ? Forum de discussion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!