Recharts Line chart as imported functional component not rendering - reactjs

Question

I have the following functional component that takes in some data and render a line chart. However depending on the type of data I would like to change the type of chart being used, i.e. (Line, Bar, etc).
As such I have a main component FieldCompareChart. This component determines what type of chart should be displayed based on the data graphs prop and determines if the yAxis should be on the left or right. It then renders the ResponsiveContainer and calls BuildYaxis as shown below.
I have the yAxis types is separate files as function components that return the type of chart being used.
Having it this way does not render the lines in the graph.
However if I pass the contents of dbVhChart directly into the return statement of the if clause of the BuildYAxis function, this works. I am trying to understand why importing doesn't but the other does.
import React from "react";
import {
LineChart,
XAxis,
CartesianGrid,
Legend,
ResponsiveContainer,
ReferenceArea,
YAxis,
Line,
} from "recharts";
import axisConfigs from "./yAxisConfig.json";
import DbVhChart from "./yAxisTypes/dbVh";
import DbVvChart from "./yAxisTypes/dbVv";
import NdviChart from "./yAxisTypes/ndvi";
function BuildYaxis(props) {
const { data, graphs, activeCrop, hideCrops } = props;
return Object.keys(data[0])
.filter((n) => ["date", "timestamp"].indexOf(n) === -1)
.map((c, index) => {
const sub = c.split("_").pop();
const idx = graphs.findIndex((val) => val === sub);
const chartProps = {
idx,
axisConfig: axisConfigs[sub],
activeCrop,
hideCrops,
dataKey: c,
};
if (sub === "dbVv") {
return <DbVvChart key={`dbVv-${index}`} {...chartProps} />;
}
return null;
});
}
const FieldCompareChart = (props) => {
const {
data,
activeCrop,
setActiveCrop,
hideCrops,
toggleCrop,
syncId,
showLegend,
left,
right,
refAreaLeft,
refAreaRight,
setRefAreaLeft,
setRefAreaRight,
zoom,
zoomOut,
graphs,
top,
bottom,
top2,
bottom2,
} = props;
if (data && data.length) {
return (
<div
className="highlight-bar-charts"
style={{ userSelect: "none", height: "calc(100vh - 100px)" }}
>
<button type="button" className="btn update" onClick={zoomOut}>
Zoom Out
</button>
<ResponsiveContainer width="100%" height="92%">
<LineChart
data={data}
onMouseLeave={() => setActiveCrop(null)}
onMouseDown={(e) => {
// this prevents an error from being thrown when the legend is clicked in the graphs
if (!e) return;
setRefAreaLeft(e);
}}
onMouseMove={(e) => {
if (!e) return;
refAreaLeft && setRefAreaRight(e);
}}
// eslint-disable-next-line react/jsx-no-bind
onMouseUp={(e) => {
// this prevents an error from being thrown when the legend is clicked in the graphs
if (!e) return;
if (!refAreaRight) {
return setRefAreaLeft("");
}
zoom();
}}
syncId={syncId}
width={500}
height={300}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
domain={[left, right]}
allowDataOverflow
dataKey="date"
type="category"
tickFormatter={(a) => {
if (a === "auto") {
return a;
}
return new Date(a).toLocaleDateString();
}}
/>
{Object.keys(data[0])
.filter((n) => ["date", "timestamp"].indexOf(n) === -1)
.map((c, index) => {
const sub = c.split("_").pop();
const idx = graphs.findIndex((val) => val === sub);
return (
<YAxis
key={`yAxis-key-${index}`}
allowDataOverflow
domain={idx === 0 ? [bottom, top] : [bottom2, top2]}
type="number"
yAxisId={idx}
tickFormatter={(a) => parseFloat(a).toFixed(1)}
orientation={idx === 0 ? "left" : "right"}
/>
);
})}
{showLegend && (
<Legend
onClick={toggleCrop}
onMouseOver={(e) => setActiveCrop(e.dataKey)}
/>
)}
{BuildYaxis({ data, graphs, activeCrop, hideCrops })}
{refAreaLeft && refAreaRight ? (
<ReferenceArea
yAxisId="1"
x1={refAreaLeft}
x2={refAreaRight}
strokeOpacity={0.3}
/>
) : null}
</LineChart>
</ResponsiveContainer>
</div>
);
}
return null;
};
export default FieldCompareChart;
import React from "react";
import { Line } from "recharts";
import randomcolor from "randomcolor";
function DbVhChart(props) {
console.log(props);
const { idx, axisConfig, activeCrop, hideCrops, dataKey } = props;
return (
<Line
key={`comparison-chart-${dataKey}`}
yAxisId={idx}
type="natural"
animationDuration={300}
connectNulls
strokeDasharray={""}
dataKey={dataKey}
strokeWidth={activeCrop === null ? 1 : activeCrop === dataKey ? 3 : 1}
stroke={randomcolor({
luminosity: "bright",
seed: axisConfig.seed,
format: "rgba",
alpha: activeCrop === null || activeCrop === dataKey ? 1 : 0.2,
})}
hide={hideCrops.indexOf(dataKey) >= 0}
/>
);
}
export default DbVhChart;
Not working
...
function BuildYaxis(props) {
const { data, graphs, activeCrop, hideCrops } = props;
return Object.keys(data[0])
.filter((n) => ["date", "timestamp"].indexOf(n) === -1)
.map((c, index) => {
const sub = c.split("_").pop();
const idx = graphs.findIndex((val) => val === sub);
const chartProps = {
idx,
axisConfig: axisConfigs[sub],
activeCrop,
hideCrops,
dataKey: c,
};
console.log(`dbVv-${index}`);
if (sub === "dbVv") {
return <DbVvChart key={`dbVv-${index}`} {...chartProps} />;
}
return null;
});
}
...
Working:
...
function BuildYaxis(props) {
const { data, graphs, activeCrop, hideCrops } = props;
return Object.keys(data[0])
.filter((n) => ["date", "timestamp"].indexOf(n) === -1)
.map((c, index) => {
const sub = c.split("_").pop();
const idx = graphs.findIndex((val) => val === sub);
const chartProps = {
idx,
axisConfig: axisConfigs[sub],
activeCrop,
hideCrops,
dataKey: c,
};
if (sub === "dbVv") {
return (
<Line
key={`comparison-chart-${c}`}
yAxisId={idx}
type="natural"
animationDuration={300}
connectNulls
strokeDasharray={""}
dataKey={c}
strokeWidth={activeCrop === null ? 1 : activeCrop === c ? 3 : 1}
stroke={randomcolor({
luminosity: "bright",
seed: axisConfigs[sub].seed,
format: "rgba",
alpha: activeCrop === null || activeCrop === c ? 1 : 0.2,
})}
hide={hideCrops.indexOf(c) >= 0}
/>
);
}
return null;
});
}
...