[SOLVED] Grouping Gantt chart elements with the same field value on the same line

Grouping Gantt chart elements with the same field value on the same line

I can't get something

Please take a look at the picture I have attached below Gantt

And I already have absolutely all the values to display this chart, and it even turns out like this, as shown in the second picture: MyGantt

However, this is not exactly what I want to get.

And that's what I mean: look at the second picture, you see the names machine 1, machine 2 and so on. So, they are repeated, but I need such values with the same machine_id to be grouped and displayed on the same line in the diagram. Initially, it is not known how many such machines will be, and also initially it is not known how many elements in each such group -> all this data is obtained later, from axios, here is the code:

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;

Will you help me? Or maybe you know a person who understands this and can help me?

Solution