I have a question regarding minimum and maximum values, I want to have minimum=300 and maximum=3000, but at the same time I want to have 30 pointers in my Arc Gauge, is that possible to achieve? Here is my code:
import {
AnnotationDirective,
Annotations,
AnnotationsDirective,
AxesDirective,
AxisDirective,
Inject,
PointerDirective,
PointersDirective,
} from "@syncfusion/ej2-react-circulargauge";
import Icon from "@mdi/react";
import { mdiArrowDown } from "@mdi/js";
import ReactDOMServer from "react-dom/server";
import co2Icon from "../../../svg/CO2.svg";
import { Gradient } from "@syncfusion/ej2-react-lineargauge";
import { useCallWidgetData } from "../../../../helpers/callWidgetData";
import {
AverageCO2Container,
AverageCO2ContainerIcon,
CircularGaugeComponentContainer,
IconAndTypographyContainer,
TypographyContainer,
} from "./CO2Widget.styles";
import Typography from "../../Typography/Typography";
const CO2Widget = ({
type,
isBackground,
isDashboard,
width,
height,
containerWidth,
classRoomNumber,
}) => {
const { loading, data } = useCallWidgetData(type, "VAPOUR");
const iconString = ReactDOMServer.renderToString(
<Icon path={mdiArrowDown} size={1} />
);
function generateColors(startColor, middleColor, endColor, count) {
const start = {
red: parseInt(startColor.slice(1, 3), 16),
green: parseInt(startColor.slice(3, 5), 16),
blue: parseInt(startColor.slice(5, 7), 16),
};
const middle = {
red: parseInt(middleColor.slice(1, 3), 16),
green: parseInt(middleColor.slice(3, 5), 16),
blue: parseInt(middleColor.slice(5, 7), 16),
};
const end = {
red: parseInt(endColor.slice(1, 3), 16),
green: parseInt(endColor.slice(3, 5), 16),
blue: parseInt(endColor.slice(5, 7), 16),
};
const colors = {};
const firstHalfCount = Math.ceil(count / 2);
const secondHalfCount = count - firstHalfCount;
for (let i = 0; i < firstHalfCount; i++) {
const red = Math.round(
start.red + ((middle.red - start.red) / (firstHalfCount - 1)) * i
);
const green = Math.round(
start.green + ((middle.green - start.green) / (firstHalfCount - 1)) * i
);
const blue = Math.round(
start.blue + ((middle.blue - start.blue) / (firstHalfCount - 1)) * i
);
const hex = `#${((1 << 24) + (red << 16) + (green << 8) + blue)
.toString(16)
.slice(1)}`;
colors[i] = hex;
}
for (let i = 0; i < secondHalfCount; i++) {
const red = Math.round(
middle.red + ((end.red - middle.red) / (secondHalfCount - 1)) * i
);
const green = Math.round(
middle.green + ((end.green - middle.green) / (secondHalfCount - 1)) * i
);
const blue = Math.round(
middle.blue + ((end.blue - middle.blue) / (secondHalfCount - 1)) * i
);
const hex = `#${((1 << 24) + (red << 16) + (green << 8) + blue)
.toString(16)
.slice(1)}`;
colors[firstHalfCount + i] = hex;
}
return colors;
}
const startColor = "#94E8E8";
const middleColor = "#16C88C";
const endColor = "#FE5F5C";
const count = 30;
const colors = generateColors(startColor, middleColor, endColor, count);
const sensorValueData = {
class: "text-color-red",
// data?.averageSensorValues &&
// (data?.averageSensorValues[0]?.value >= 2000
// ? "text-color-red"
// : data?.averageSensorValues[0]?.value >= 1000
// ? "text-color-lightgreen"
// : "text-color-lightblue"),
text: "Dangerous",
// data?.averageSensorValues &&
// (data?.averageSensorValues[0]?.value >= 2000
// ? "Dangerous"
// : data?.averageSensorValues[0]?.value >= 1000
// ? "Comfortable"
// : "Cold"),
};
return (
<AverageCO2Container containerWidth isBackground={isBackground}>
{!isDashboard && (
<AverageCO2ContainerIcon>
<IconAndTypographyContainer>
<img
src={co2Icon}
alt="co2-icon"
width={40}
height={40}
style={{ position: "absolute", left: -3 }}
/>
<Typography
type={"p17r"}
className="d-flex align-items-center font-weight-500 mx-5"
>
CO2
</Typography>
</IconAndTypographyContainer>
<h1>...</h1>
</AverageCO2ContainerIcon>
)}
{isDashboard && (
<div style={{ position: "absolute", top: "25px", left: "30px" }}>
<Typography
type="p20sb"
className="d-flex align-items-center font-weight-500 m-0"
>
ClassRoom {classRoomNumber + 1}#
</Typography>
</div>
)}
{loading ? (
<div className="position-relative mt-n5">
<div className="loading-list mt-n4" />
</div>
) : (
data && (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
gap: "10px",
height: "50px",
alignItems: "flex-end",
position: "absolute",
top: isDashboard ? "18%" : "20%",
left: "30px",
}}
>
<Typography
type="p48sb"
className="d-flex align-items-center font-weight-600"
style={{ height: "38px", margin: "0" }}
>
{data?.averageSensorValues
? data?.averageSensorValues[0]?.value.toFixed(2)
: 2000}
</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="p17sb"
className={`d-flex align-items-center font-weight-600 ${sensorValueData.class}`}
style={{
position: "absolute",
top: "30%",
left: "30px",
}}
>
{sensorValueData.text}
</Typography>
</div>
</div>
<div
style={{
width: "100%",
position: "relative",
}}
>
<CircularGaugeComponentContainer
background="transparent"
width={width ? width : "300"}
height={height ? height : "280"}
>
<Inject services={[Annotations, Gradient]} />
<AxesDirective>
<AxisDirective
startAngle={245}
endAngle={110}
radius="80%"
minimum={0}
maximum={30}
lineStyle={{ width: 0 }}
majorTicks={{ height: 0 }}
minorTicks={{ height: 0, interval: 0.5 }}
labelStyle={{
position: "Outside",
font: { size: "0px", color: "#000000" },
}}
>
<PointersDirective>
{[...Array(30)].map((_, i) => (
<PointerDirective
key={i}
type="Marker"
markerShape="Rectangle"
zIndex="2"
value={parseFloat((i + 1).toFixed(2))}
markerWidth={30}
markerHeight={2}
color={colors[i]}
/>
))}
<PointerDirective
value={
// data?.averageSensorValues
// ? data?.averageSensorValues[0]?.value
// : 0
2000
}
radius="95%"
type="Marker"
markerShape="Rectangle"
markerWidth={40}
markerHeight={2}
color="#fff"
/>
</PointersDirective>
<AnnotationsDirective>
<AnnotationDirective
content={iconString}
angle={1}
zIndex="1"
radius="35%"
/>
<AnnotationDirective
content={`<div style="font-size:17px;font-family:poppins;font-weight: 700;">${
data?.averageSensorValues
? data?.averageSensorValues[0]?.value.toFixed(2)
: "N/a"
}</div>`}
angle={1}
zIndex="1"
radius="15%"
/>
<AnnotationDirective
content={`
<div style="font-size:13px;font-family:poppins;font-weight: 400;">
${
data?.averageSensorValues
? data?.averageSensorValues[0]?.unit
: "PPM"
}
</div>
`}
angle={5}
zIndex="1"
radius="0"
/>
<AnnotationDirective
content='<div style="font-size:13px;font-family:poppins;font-weight: 700;color: #94E8E8;">Low</div>'
angle={215}
zIndex="1"
radius="85%"
/>
<AnnotationDirective
content='<div style="font-size:13px;font-family:poppins;font-weight: 700;color: #FE5F5C;">High</div>'
angle={145}
zIndex="1"
radius="85%"
/>
</AnnotationsDirective>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponentContainer>
</div>
</div>
)
)}
<TypographyContainer>
<Typography
type={"p13r"}
className="d-flex align-items-center font-weight-500 opacity-60 m-0"
>
Slightly elevated indoor air levels, which may cause discomfort
</Typography>
</TypographyContainer>
</AverageCO2Container>
);
};
export default CO2Widget;
