How can I create a line chart with a multicolor type where the color and line style of the data is determined by the temperature range? Specifically, I want to display the temperature data below 12 degrees as a baby blue dashed line, the data between 12 and 25 degrees as a gray dashed line, and the data above 25 degrees as a red dotted line.
`import React, { useEffect } from "react";
import {
AverageTemperatureContainer,
AverageTemperatureContainerIcon,
ChartComponentContainer,
IconAndTypographyContainer,
TypographyContainer,
} from "./TemperatureWidget.styles";
import {
SeriesCollectionDirective,
SeriesDirective,
Inject,
Legend,
Category,
SplineSeries,
Tooltip,
MultiColoredLineSeries,
LineSeries,
DataLabel,
StripLine,
} from "@syncfusion/ej2-react-charts";
import Typography from "../../Typography/Typography";
import temperature from "../../../svg/Temperature.svg";
import { useCallWidgetData } from "../../../../helpers/callWidgetData";
const TemperatureWidget = ({ type }) => {
const { loading, data } = useCallWidgetData(type, "TEMPERATURE");
const getColor = (value) => {
if (value <= 12) {
return "#94E8E8";
} else if (value >= 25) {
return "#FE5F5C";
} else {
return "#64748B";
}
};
let data1 = [
{ x: "0:00", y: 8, color: getColor(12) },
{ x: "6:00", y: 15, color: getColor(16) },
{ x: "12:00", y: 25, color: getColor(27) },
{ x: "18:00", y: 27, color: getColor(20) },
{ x: "24:00", y: 8, color: getColor(12) },
];
useEffect(() => {
const setStrokeDashArray = (i) => {
const elem = document.getElementById(`chart_57723_1_Series_0_Point_${i}`);
if (elem && data1[i].y < 12) {
elem.setAttribute("stroke-dasharray", "5,5");
} else if (elem && data1[i].y >= 25) {
elem.setAttribute("stroke-dasharray", "5,5");
}
};
data1.forEach((point, i) => {
if (point.y) {
setStrokeDashArray(i);
}
});
}, [data1]);
const emptyPoint = { mode: "Average" };
const sensorValueData = {
class:
data?.averageSensorValues &&
(data?.averageSensorValues[0]?.value >= 2000
? "text-color-red"
: data?.averageSensorValues[0]?.value >= 1000
? "text-color-lightgreen"
: "text-color-lightblue"),
text:
data?.averageSensorValues &&
(data?.averageSensorValues[0]?.value >= 2000
? "Dangerous"
: data?.averageSensorValues[0]?.value >= 1000
? "Comfortable"
: "Cold"),
};
return (
<AverageTemperatureContainer>
<AverageTemperatureContainerIcon>
<IconAndTypographyContainer>
<img src={temperature} alt="co2-icon" width={40} height={40} />
<Typography
type={"p17r"}
className="d-flex align-items-center font-weight-500 "
>
Temperature
</Typography>
</IconAndTypographyContainer>
<h1>...</h1>
</AverageTemperatureContainerIcon>
{loading ? (
<div className="position-relative mt-n5">
<div className="loading-list mt-n4" />
</div>
) : (
data && (
<div
style={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
}}
>
<div>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
gap: "10px",
height: "50px",
alignItems: "flex-end",
}}
>
<Typography
type={"p36b"}
className="d-flex align-items-center font-weight-600"
style={{ height: "38px", margin: "0" }}
>
{data?.averageSensorValues
? data?.averageSensorValues[0]?.value.toFixed(2)
: "N/a"}
</Typography>
<Typography
type={"p20b"}
className="d-flex align-items-center font-weight-600"
style={{ margin: "0" }}
>
{data?.averageSensorValues
? data?.averageSensorValues[0]?.unit
: "PPM"}
</Typography>
</div>
<Typography
type={"p20b"}
className={`d-flex align-items-center font-weight-600 ${sensorValueData.class}`}
>
{sensorValueData.text}
</Typography>
</div>
</div>
<ChartComponentContainer
style={{ textAlign: "center", fontFamily: "poppins" }}
primaryXAxis={{
valueType: "Category",
labelStyle: { fontFamily: "poppins", color: "#fff" },
majorGridLines: { width: 0 },
labelIntersectAction: "Rotate90",
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
lineStyle: { width: 0 },
}}
height="200"
width="400"
chartArea={{ border: { width: 0 } }}
primaryYAxis={{
labelStyle: { fontFamily: "poppins", color: "#fff" },
minimum: 5,
maximum: 30,
interval: 5,
labelFormat: "{value}°C",
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
stripLines: [
{ start: 12, size: 2, color: "#94E8E8", sizeType: "Pixel" },
{ start: 25, size: 2, color: "#FE5F5C", sizeType: "Pixel" },
],
majorGridLines: { width: 0 },
}}
tooltip={{ enable: true, textStyle: { fontFamily: "poppins" } }}
>
<Inject
services={[
LineSeries,
Legend,
Tooltip,
DataLabel,
Category,
MultiColoredLineSeries,
SplineSeries,
StripLine,
]}
/>
<SeriesCollectionDirective>
<SeriesDirective
dataSource={data1}
xName="x"
yName="y"
width={2}
type="MultiColoredLine"
pointColorMapping="color"
emptyPointSettings={emptyPoint}
/>
</SeriesCollectionDirective>
</ChartComponentContainer>
</div>
)
)}
<TypographyContainer>
<Typography
type={"p13r"}
className="d-flex align-items-center font-weight-500 opacity-60"
>
The range of 20°C to 25°C is widely accepted as a comfortable range
for most indoor activities, including sleeping, studying, and working
</Typography>
</TypographyContainer>
</AverageTemperatureContainer>
);
};
export default TemperatureWidget;
