This image shows my current result. Coming data structure is below:
const data = [
{
"value": 32.667,
"timestamp": "2023-12-21T22:20:00",
"isPreviousReading": true
},
{
"value": 32.133,
"timestamp": "2023-12-21T22:25:00",
"isPreviousReading": false
},
{
"value": 32.133,
"timestamp": "2023-12-21T22:30:00",
"isPreviousReading": true
},
{
"value": 32.133,
"timestamp": "2023-12-21T22:35:00",
"isPreviousReading": true
},
{
"value": 32.133,
"timestamp": "2023-12-21T22:40:00",
"isPreviousReading": true
},
]
According to the data, when isPreviousReading is true, I need to hide marker from my chart. And I need to change the background color of that point. Is it possible? If it is possible can you help me to solve this issue? You can check my code below:
import React from "react";
import Chart from "react-apexcharts";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { format } from "date-fns";
import Skeleton from "@mui/material/Skeleton";
import { useAppDispatch, useAppSelector } from "../../stores/hooks";
import { GetGraphData } from "../../stores/wellSlice";
import Cookies from "js-cookie";
const dateTypes = {
FIVE_MINUTELY: 120,
FIFTEEN_MINUTELY: 120,
HOURLY: 120,
DAILY: 30,
MONTHLY: 12,
YEARLY: 3,
};
function HookFiveMinutely(props: any) {
const [data, setData] = React.useState(null);
const [category, setCategory] = React.useState([]);
const [minPressValue, setMinPressValue] = React.useState(0);
const [maxPressValue, setMaxPressValue] = React.useState(0);
const { well, auth } = useAppSelector((state) => state);
const params = useParams();
const { t } = useTranslation();
const dispatch = useAppDispatch();
const currentLang = Cookies.get("i18next");
const translations = {
exportToSVG: t("download_SVG"),
exportToPNG: t("download_PNG"),
exportToCSV: t("download_CSV"),
};
const getAllGraphData = React.useCallback(() => {
if (params.id && auth.token) {
dispatch(
GetGraphData({
data: {
dateTime: well.dateTime,
page: 0,
size: dateTypes[props.type],
stationId: params?.id,
type: props.type,
},
token: auth.token,
callback(payload) {
let presUp = payload?.sensors
?.find(
(item: any) =>
item?.type == "PRESSURE" && item?.direction == "UPLINK"
)
?.sensorReadings?.map((item: any) => item?.value);
let presDwn = payload?.sensors
?.find(
(item: any) =>
item?.type == "PRESSURE" && item?.direction == "DOWNLINK"
)
?.sensorReadings?.map((item: any) => item?.value);
let temperature = payload?.sensors
?.find((item: any) => item.unit == "CELSIUS")
?.sensorReadings?.map((item: any) => item.value);
let category = payload?.sensors
?.find((item: any) => item.unit == "KGF_CM2")
?.sensorReadings?.map((item: any) => {
return item.timestamp;
});
setMinPressValue(payload.minLimitForPressure);
setMaxPressValue(payload.maxLimitForPressure);
const newData = [
{
data: { val: presUp, type: "presUp" },
},
{
data: { val: presDwn, type: "presDwn" },
},
{
data: { val: temperature, type: "temp" },
},
];
const modified = newData.filter(
(item) => item.data.val !== undefined
);
setData(modified);
setCategory(category);
},
})
);
}
}, [well?.dateTime, params.id, dispatch, auth.token, currentLang]);
React.useEffect(() => {
getAllGraphData();
}, [getAllGraphData]);
return (
<React.Fragment>
{!well.graphIsloading && data ? (
<Chart
type="area"
series={[
{
name: t("pres1"),
color: "#f98b2d",
data:
data.find((item) => {
if (item.data.type == "presUp") return item.data.val;
})?.data?.val || [],
type: "area",
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 1,
stops: [0, 90, 100],
},
},
},
{
name: t("pres2"),
data:
data.find((item) => {
if (item.data.type == "presDwn") return item.data.val;
})?.data?.val || [],
color: "#1c3faa",
type: "area",
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 1,
stops: [0, 90, 100],
},
},
},
{
name: t("temperature"),
color: "#d87183",
type: "column",
data:
data.find((item) => {
if (item.data.type == "temp") return item.data.val;
})?.data?.val || [],
},
].filter((item) => item.data.length)}
options={{
chart: {
marginLeft: "10px",
marginRight: "10px",
animations: {
enabled: true,
easing: "ease",
speed: 800,
animateGradually: {
enabled: true,
delay: 150,
},
dynamicAnimation: {
enabled: true,
speed: 350,
},
},
fontFamily: "Roboto, sans-serif",
zoom: {
autoScaleYaxis: true,
enabed: true,
type: "x",
},
height: "400px",
type: "area",
id: "ctxinternalchart",
toolbar: {
show: true,
},
locales: [
{
name: "en",
options: {
toolbar: {
exportToSVG: "Download SVG",
exportToPNG: "Download PNG",
exportToCSV: "Download CSV",
},
},
},
{
name: "uz",
options: {
toolbar: {
exportToSVG: "SVGni yuklash",
exportToPNG: "PNGni yuklash",
exportToCSV: "CSVni yuklash",
},
},
},
{
name: "ru",
options: {
toolbar: {
exportToSVG: "Скачать SVG",
exportToPNG: "Скачать PNG",
exportToCSV: "Скачать CSV",
},
},
},
],
defaultLocale: currentLang,
},
markers: {
size: 5,
hover: {
size: 7,
},
},
menu: {
contextMenu: Object.keys(translations).map((key) => ({
text: translations[key],
})),
},
title: {
text: undefined,
align: "left",
offsetX: -6,
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
right: 5,
left: 5,
},
},
stroke: {
show: true,
curve: "smooth",
lineCap: "butt",
colors: undefined,
width: 1.5,
dashArray: 0,
},
xaxis: {
categories: category,
type: "category",
crosshairs: {
show: true,
width: 1,
position: "front",
opacity: 1,
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 1,
opacity: 0.4,
},
},
labels: {
formatter: (
value: string,
timestamp?: number | undefined,
opts?: any
) => props.formatter(value, timestamp, opts),
},
tickAmount: 20,
tickPlacement: "on",
tooltip: {
enabled: false,
},
},
tooltip: {
x: {
show: true,
formatter(value, _) {
return format(
new Date(category[value - 1]),
"HH:mm dd.MM.yyyy"
);
},
},
},
yaxis: [
{
seriesName: "presUp",
min: minPressValue,
max: maxPressValue,
values:
data.find((item: any) => {
if (item.data.type == "presUp") return item.data.val;
})?.data?.val || [],
},
{
seriesName: "presDwn",
show: false,
min: minPressValue,
max: maxPressValue,
values:
data.find((item: any) => {
if (item.data.type == "presDwn") return item.data.val;
})?.data?.val || [],
},
{
seriesName: "temp",
opposite: true,
values:
data.find((item: any) => {
if (item.data.type == "temp") return item.data.val;
})?.data?.val || [],
show: true,
max: 300,
axisTicks: {
show: false,
},
axisBorder: {
show: false,
color: "#247BA0",
},
labels: {
style: {
colors: "#D0869B",
},
},
},
]
.filter((item) => item.values.length)
.map((item) => {
let prsUpData =
data.find((prs: any) => {
if (prs.data.type == "presUp") return prs.data.val;
})?.data?.val || [];
if (
!prsUpData.length &&
(item.seriesName == "presDwn" || item.seriesName == "temp")
) {
return {
...item,
show: true,
};
} else {
return item;
}
}),
}}
height="340%"
/>
) : (
<Skeleton className="col-span-8" variant="rounded" height="400px" />
)}
</React.Fragment>
);
}
export default React.memo(HookFiveMinutely);
I want a result like this.
As an image, there is not markers when isPreviousReading is true and background is changed as well. To achieve this solution, what i need to do?
If you know the answer, please let me know it as well.