Reputation: 55
I use the select event on google timeline to change the data and then send the data back to the conponent as a prop which detects the state change and redraws the chart. My issue is if i use the select event again the data in the callback function is the orginal data not the new data redrawn. data comes in on a prop and is used to redraw the Chart and get the individual chart item in the select event
import React, { useState, useEffect } from "react";
import { Chart } from "react-google-charts";
import EditBooking from "./EditBooking";
const TimeLine = ({ data, LoadTimeLine }) => {
const [modalShow, setModalShow] = useState(false);
const [chartData, setChartData] = useState([
{
day: "",
name: "",
color: "",
start: "",
end: "",
},
]);
const handleEvent = (booking) => {
setChartData(booking);
setModalShow(true);
};
const hideModal = () => {
setModalShow(false);
};
const loadNewData = (booking) => {
LoadTimeLine(booking);
};
let chartEvents = [
{
eventName: "select",
callback({ chartWrapper }) {
const selectedItems = chartWrapper.getChart().getSelection();
if (selectedItems.length > 0) {
const selectedItem = selectedItems[0];
const row = selectedItem.row + 1;
const dataPoint = data[row];
let booking = [];
booking.push({
day: dataPoint[0],
name: dataPoint[1],
color: dataPoint[2],
start: dataPoint[3],
end: dataPoint[4],
});
handleEvent(booking);
}
},
},
];
return (
<>
<EditBooking
modalShow={modalShow}
hideModal={hideModal}
chartData={chartData}
loadNewData={loadNewData}
></EditBooking>
<Chart
chartType="Timeline"
data={data}
width="100%"
height="400px"
options={{
timeline: {
colorByRowLabel: true,
},
}}
chartEvents={chartEvents}
/>
</>
);
};
export default TimeLine;
Upvotes: 0
Views: 30