the react code below allows you to view a series of characters in a graph through the recharts library, as you can see from the code if the values of the graph exceed 90 the color must be green, while as shown in the image below the colors red, yellow and green overlap, how do I fix this?
React Code:
const formatXAxis = (tickItem) => {
var date = new Date(+tickItem / 1000);
return moment(date).format("D MMM HH:mm:ss");
};
const formatBrush = (tickItem) => {
var date = new Date(+tickItem / 1000);
return moment(date).format("D MMM");
};
const CustomTooltip = (data) => {
if (data.payload === null) {
return (
<div className="custom-tooltip">
<p>Nessun dato disponibile</p>
</div>
);
} else {
// Controllo che il dato esista
if (typeof data.payload[0] !== "undefined") {
// Leggo il campo timestamp e formatto la data
var date = data.payload[0].payload.timestamp;
date = new Date(+date / 1000);
return (
<div className="custom-tooltip">
<p> Date: {date ? format(date, "EEE MMM dd HH:mm:ss") : " -- "}</p>
<p> Value: {data.payload[0].value}</p>
</div>
);
} else {
return <p>Nessun dato disponibile</p>;
}
}
};
class Charts extends React.Component {
constructor(props) {
super(props);
this.state = {
default: 0,
calDA: true,
calA: true,
valoricharts: [],
title: "",
isLoading: false,
};
this.loadvalue();
}
componentDidMount() {
setInterval(() => this.setState({ time: this.loadvalue() }), timerefresh);
}
async onClickHome() {
this.props.history.push({
pathname: "/",
});
}
async onClickDa() {
this.setState((prevState) => ({
calDA: !prevState.calDA,
}));
}
async onClickA() {
this.setState((prevState) => ({
calA: !prevState.calA,
}));
}
async loadvaluefilter(name, nomelivello) {
var data;
var dTime;
var dtemp;
var newdate = new Date();
//calcolo tempo
if (name === "ultimoanno") {
dTime = Date.now();
dtemp = new Date(+dTime / 1000);
newdate = dtemp - 365 * 24 * 3600;
} else if (name === "ultimi3mesi") {
dTime = Date.now();
dtemp = new Date(+dTime / 1000);
newdate = dtemp - 90 * 24 * 3600;
} else {
dTime = Date.now();
dtemp = new Date(+dTime / 1000);
// eslint-disable-next-line no-unused-vars
newdate = dtemp - 30 * 24 * 3600;
}
if (nomelivello === "MACHINE") {
if (name === "ultimoanno") {
data = await loadvalueplotfilter("UltimoAnno.json");
} else if (name === "ultimi3mesi") {
data = await loadvalueplotfilter("Ultimi3Mesi.json");
} else {
data = await loadvalueplotfilter("UltimoMese.json");
}
} else {
if (name === "ultimoanno") {
data = await loadvalueplotfilter("UltimoAnno.json");
} else if (name === "ultimi3mesi") {
data = await loadvalueplotfilter("Ultimi3Mesi.json");
} else {
data = await loadvalueplotfilter("UltimoMese.json");
}
}
if (data !== undefined && data.length > 0) {
this.setState({
valoricharts: [],
title: "",
});
this.setState({
valoricharts: [...this.state.valoricharts, ...data[0].history],
title: data[0].name,
});
}
}
async loadvalue() {
localStorage.setItem("UpdateDate", moment().format("DD-MM-YYYY hh:mm:ss"));
var args;
try {
this.setState({ isLoading: true });
args = this.props.location.state.detail;
} catch (err) {
args = {
macchina: localStorage.getItem("macchina1"),
gruppo: localStorage.getItem("gruppo1"),
dispositivo: localStorage.getItem("dispositivo1"),
segnale: localStorage.getItem("segnale1"),
nomelivello: localStorage.getItem("NomeLivello"),
nomepadre1: localStorage.getItem("nomepadre1"),
nomepadre2: localStorage.getItem("nomepadre2"),
nomepadre3: localStorage.getItem("nomepadre3"),
};
}
var backendvalues = await loadvalueplot();
this.setState({
valoricharts: [],
title: "",
});
if (args.macchina !== "") {
if (args.gruppo !== "") {
if (args.dispositivo !== "") {
if (args.segnale !== "") {
this.setState({
valoricharts: [
...this.state.valoricharts,
...backendvalues[0].subitems[args.gruppo].subitems[
args.dispositivo
].subitems[args.segnale].history,
],
title:
backendvalues[0].subitems[args.gruppo].subitems[
args.dispositivo
].subitems[args.segnale].name,
});
} else {
this.setState({
valoricharts: [
...this.state.valoricharts,
...backendvalues[0].subitems[args.gruppo].subitems[
args.dispositivo
].history,
],
title:
backendvalues[0].subitems[args.gruppo].subitems[
args.dispositivo
].name,
});
}
} else {
this.setState({
valoricharts: [
...this.state.valoricharts,
...backendvalues[0].subitems[args.gruppo].history,
],
title: backendvalues[0].subitems[args.gruppo].name,
});
}
} else {
this.setState({
valoricharts: [
...this.state.valoricharts,
...backendvalues[0].history,
],
title: backendvalues[0].name,
});
}
}
this.setState({ isLoading: false });
}
getIsLoading() {
if (this.state.isLoading == false) {
return (
<div>
<Stack sx={{ color: "grey.500" }} spacing={2} direction="row">
<CircularProgress
color="warning"
style={{ marginLeft: 10, marginTop: 5 }}
/>
In attesa del aggiornamento dati, ultimo aggiornamento eseguito in
data: {localStorage.getItem("UpdateDate")}
</Stack>{" "}
</div>
);
} else {
}
}
getWidth() {
return window.innerWidth <= 1024 ? 400 : 600;
}
render() {
var nomelivello = "";
var nomepadre1 = "";
var nomepadre2 = "";
var nomepadre3 = "";
try {
nomelivello = this.props.location.state.detail.nomelivello;
nomepadre1 = this.props.location.state.detail.nomepadre1;
nomepadre2 = this.props.location.state.detail.nomepadre2;
nomepadre3 = this.props.location.state.detail.nomepadre3;
if (nomelivello === "") {
nomelivello = this.state.title.toUpperCase();
}
} catch (err) {
nomelivello = localStorage.getItem("NomeLivello");
nomepadre1 = localStorage.getItem("nomepadre1");
nomepadre2 = localStorage.getItem("nomepadre2");
nomepadre3 = localStorage.getItem("nomepadre3");
}
return (
<div className="content">
<div className="chartPageStyle">
<table>
<tbody>
<tr id="top" class="tableStyle">
<td>
<h1>{nomelivello}</h1>
</td>
</tr>
<tr class="tableStyle">
<div
style={{
alignContent: "center",
paddingTop: "2%",
marginBottom: "5%",
marginLeft: "10%",
}}
>
<MobileView>
<ResponsiveContainer width={200} height="40%">
<LineChart
width={200}
height={400}
data={this.state.valoricharts}
>
<defs>
<linearGradient
id="colorUv"
x1="0%"
y1="100%"
x2="0%"
y2="0%"
>
<stop offset="0%" stopColor="red" />
<stop offset="50%" stopColor="yellow" />
<stop offset="90%" stopColor="green" />
</linearGradient>
</defs>
<XAxis
dataKey="timestamp"
tickFormatter={formatXAxis}
/>
<YAxis
dataKey="value"
type="number"
name="Value"
domain={[0, 100]}
/>
<TooltipLineChart content={<CustomTooltip />} />
<Legend />
<Line
dataKey="value"
type="number"
dot={false}
tension="0.2"
stroke="url(#colorUv)"
strokeWidth={3}
/>
<Brush
dataKey="timestamp"
height={20}
stroke="#8884d8"
tickFormatter={formatBrush}
/>
</LineChart>
</ResponsiveContainer>
</MobileView>
<BrowserView>
<LineChart
width={this.getWidth()}
height={400}
data={this.state.valoricharts}
>
<defs>
<linearGradient
id="colorUv"
x1="0%"
y1="100%"
x2="0%"
y2="0%"
>
<stop offset="0%" stopColor="red" />
<stop offset="50%" stopColor="yellow" />
<stop offset="90%" stopColor="green" />
</linearGradient>
</defs>
<XAxis dataKey="timestamp" tickFormatter={formatXAxis} />
<YAxis
dataKey="value"
type="number"
name="Value"
domain={[0, 100]}
/>
<TooltipLineChart content={<CustomTooltip />} />
<Legend />
<Line
dataKey="value"
type="number"
dot={false}
tension="0.2"
stroke="url(#colorUv)"
strokeWidth={3}
/>
<Brush
dataKey="timestamp"
height={20}
stroke="#8884d8"
tickFormatter={formatBrush}
/>
</LineChart>
</BrowserView>
</div>
</tr>
</tbody>
</table>
<div className="buttonStyle">
<Tooltip title="home">
<Button
type="primary"
shape="circle"
icon={<HomeOutlined />}
onClick={() => this.onClickHome()}
/>
</Tooltip>
<div className="timeButtonStyle">
<Button
style={{ display: "inline", margin: "2px" }}
onClick={() =>
this.loadvaluefilter(
"ultimoanno",
nomelivello,
nomepadre1,
nomepadre2,
nomepadre3
)
}
>
{" "}
Ultimo anno
</Button>
<Button
style={{ display: "inline", margin: "2px" }}
onClick={() =>
this.loadvaluefilter(
"ultimi3mesi",
nomelivello,
nomepadre1,
nomepadre2,
nomepadre3
)
}
>
Ultimi 3 mesi
</Button>
<Button
style={{ display: "inline", margin: "2px" }}
onClick={() =>
this.loadvaluefilter(
"ultimomese",
nomelivello,
nomepadre1,
nomepadre2,
nomepadre3
)
}
>
Ultimo mese
</Button>
<br></br>
<br></br>
{this.getIsLoading()}
</div>
</div>
</div>
</div>
);
}
}