React-grid-heatmap

1

import { HeatMapGrid } from “react-grid-heatmap”;
///Data from Database not Rendereing
const [speedHMI, setSpeedHM] = useState(‘’);
let result=;
const getSpeedHMI = async () => {
try {

        const response = await axios.get(`http://${API_HOST}:${API_PORT}/locationDataRoutes/getSpeedHMI`);
        result = await (response.data);
        setSpeedHM(result);
        data1.length=0;
        for(let i=0; i< result.length;i++){
            //console.log(result[i].speed)
            data1.push(result[i].speed)
        }
        data2.push(data1);
        console.log(data2)
        console.log(data)

    } catch (e) {
    }
};

//working with normal data array but not with data2 array
<HeatMapGrid
data={data}
xLabels={xLabels}
yLabels={yLabels}
cellRender={(x, y, value) => (
<div title={Pos(${x}, ${y}) = ${value}}>{value}
)}
xLabelsStyle={(index) => ({
color: index % 2 ? “transparent” : “#777”,
fontSize: “.65rem”
})}
yLabelsStyle={() => ({
fontSize: “.65rem”,
textTransform: “uppercase”,
color: “#777”
})}
cellStyle={(_x, _y, ratio) => ({
background: rgb(12, 160, 44, ${ratio}),
fontSize: “.7rem”,
color: rgb(0, 0, 0, ${ratio / 2 + 0.4})
})}
cellHeight=“2.5rem”
xLabelsPos=“bottom”
onClick={(x, y) => alert(Clicked (${x}, ${y}))}
// yLabelsPos=“right”
// square
/>