Placer les éléments du diagramme de Gantt avec la même valeur de champ sur une ligne

Question

Je ne peux rien acheter

Veuillez jeter un oeil à la photo que j'ai jointe ci-dessous diagramme de Gantt

Et j'ai déjà toutes les valeurs pour afficher ce graphique, même le résultat est comme ceci, comme le montre la deuxième image : Mon diagramme de Gantt

Cependant, ce n’est pas ce que je veux obtenir.

C'est ce que je veux dire : regardez la deuxième photo et vous verrez les noms machine 1, machine 2 etc. Ce sont donc des doublons, mais j'ai besoin que les valeurs avec le même machine_id soient regroupées et affichées sur la même ligne du tracé. Au départ, on ne savait pas combien de ces machines il y avait, ni combien d'éléments il y avait dans chacun de ces groupes -> Toutes ces données ont ensuite été obtenues à partir d'axios avec le code suivant :

import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react';
import '../App.css'
import { Chart } from "react-google-charts";


const GanttChartForJob = () => {
    const [data, setData] = useState([]);

    // useEffect(() => {
    //     axios.get('http://127.0.0.1:8000/result/')
    //         .then(response => {
    //             setData(response.data);
    //         })
    //         .catch(error => {
    //             console.error(error);
    //         });
    // }, []);
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'http://127.0.0.1:8000/result/',
            );
            setData(result.data);
        };
        fetchData();
    }, []);

    useEffect(() => {
        const handleResize = () => {
            setWidth(containerRef.current.offsetWidth);
            setHeight(containerRef.current.offsetHeight);
        };
        window.addEventListener('resize', handleResize);
        handleResize();
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    const containerRef = useRef(null);

    const options = {

    };

    const transformedData = data.map(item => ({
        id: item.id,
        name: item.name_machine,
        start: item.T_i,
        end: item.T_c,
        progress: item.processing_times,
        bar: { group: item.machine_id }
    }));

    return (
        <div ref={containerRef} className='container'>
            <Chart
                width={'100%'}
                height={'1000px'}
                chartType="Gantt"
                loader={<div>Loading Chart</div>}
                data={[
                    [
                        { type: 'string', label: 'Task ID' },
                        { type: 'string', label: 'Task Name' },
                        { type: 'date', label: 'Start Date' },
                        { type: 'date', label: 'End Date' },
                        { type: 'number', label: 'Duration' },
                        { type: 'number', label: 'Percent Complete' },
                        { type: 'string', label: 'Dependencies' },
                    ],
                    ...transformedData.map(item => [
                        item.id.toString(),
                        item.name,
                        new Date(item.start),
                        new Date(item.end),
                        null,
                        item.progress,
                        null,
                    ]),
                ]}
                rootProps={{ 'data-testid': '1' }}
                className='table-container'
            >
                <table className='table'></table>
            </Chart>
        </div>
    );
};

export default GanttChartForJob;

Pouvez-vous m'aider ? Ou peut-être connaissez-vous quelqu'un qui le sait et qui peut m'aider ? ​​

Answer 1

Vous pouvez essayer TimelineGraphiques.

Code Sandbox : https://codesandbox.io/s/agitated-kowalevski-i3mlj6?file=/App.tsx