I am trying to improve my function. currently this is how I access my childNodes
const handleClick = (data) => {
console.log(
"canvas before ",
data.currentTarget.children[0].childNodes[0].childNodes[0].style.height
);
console.log("wrapper ", data.currentTarget.style.height);
// make my echart dimension same as my wrapper dimension
data.currentTarget.children[0].childNodes[0].childNodes[0].style.height =
data.currentTarget.style.height;
data.currentTarget.children[0].childNodes[0].childNodes[0].style.width =
data.currentTarget.style.width;
};
and this is where I am calling my handleClick
return (
<ResponsiveGridLayout layouts={layout}>
<div key="1" onClick={handleClick}>
<NewvsReturnVisitors />
<span className="remove" style={removeStyle}>
x
</span>
</div>
</ResponsiveGridLayout>
);
I feel that handleClick function can be further improve, will appreciate if anyone can give me advice on how to improve my handleClick function, making it more readable and more optimize if its possible.
Click this link for my codesandbox
So I went and discard the function that manipulate the DOM and use more library directly inside my chart object.
newvsreturnvistors.js
import * as echarts from "echarts";
import React, { useEffect, useRef } from "react";
import useComponentSize from "@rehooks/component-size";
const Newvsresturnvisitors = () => {
...
const chart = useRef(null);
let chartInstance = null;
const size = useComponentSize(chart);
function renderChart() {
const renderInstance = echarts.getInstanceByDom(chart.current);
if (renderInstance) {
chartInstance = renderInstance;
} else {
chartInstance = echarts.init(chart.current);
}
chartInstance.setOption(option);
}
useEffect(() => {
renderChart();
if (chartInstance != null) {
chartInstance.resize({
height: size.height
});
}
}, [size]);
return (
<div
ref={chart}
style={{
width: "100%",
height: "100%",
background: "white"
}}
/>
);
};
I import component size to read the current chart dimension. Then in my useEffect, I check for size changes and call the resize function to adjust my chart size accordingly.
working link is the same in my question. If there is a even better way to do this, please feel free to comment, I want to improve too.