Notes

import React, { Fragment, useEffect, useState } from "react";
import { Modal } from "react-bootstrap";
import {
MapContainer,
Marker,
TileLayer,
LayersControl,
Tooltip,
useMap,
Polygon,
GeoJSON,
Polyline,
} from "react-leaflet";
import usJson from "../../json/us-State.json";
import L from "leaflet";
import HomeIcon from "@mui/icons-material/Home";
import CloseSharpIcon from '@mui/icons-material/CloseSharp';
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip1 from "./Heatmaptable";
import icon from "../../assests/images/redtower.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
import Button from "@mui/material/Button";
import { getEnodeUserLocationTrack } from "../../services/request";
import ICON96afd4I from "../../assests/images/enodeB 96afd4.png";
import ICON1C884FI from "../../assests/images/enodeB 1C884F.png";
import ICON3B965DI from "../../assests/images/enodeB 3B965D.png";
import ICON59A36AI from "../../assests/images/enodeB 59A36A.png";
import ICON78B177I from "../../assests/images/enodeB 78B177.png";
import ICON97BE85I from "../../assests/images/enodeB 97BE85.png";
import ICONB5CC92I from "../../assests/images/enodeB B5CC92.png";
import ICONBD4D99FI from "../../assests/images/enodeB D4D99F.png";
import ICONBF2E7ACI from "../../assests/images/enodeB F2E7AC.png";
import ICONBFAB292I from "../../assests/images/enodeB FAB292.png";
import ICONBF24D5BI from "../../assests/images/enodeB F24D5B.png";
import ICONOORANGE from '../../assests/images/orangetower.png';
import ICONBD4D99FIYELLOW from "../../assests/images/enodebLightYellow.png";
import { findQuantile, getStateName } from "../../utils/UtilFunctions";
import Legend from "../../commonComponents/Legend";
// import HeatMapLoadState from "./HeatMapLoadState";
import HeatMapLoadState from "./HeatMapLegends";
import CommonTableComponent from "./CommonTableComponent";
import "./calldrops.css";
import Loader from "../../commonComponents/Loader";

// let DefaultIcon = L.icon({
// iconUrl: icon,
// // shadowUrl: iconShadow,
// iconSize: [20, 20],
// });

var ICON96afd4 = L.icon({
iconUrl: ICON96afd4I,
iconSize: [40, 40], // size of the icon
});

var ICON1C884F = L.icon({
iconUrl: ICON1C884FI,
iconSize: [40, 40], // size of the icon
});

var ICON3B965D = L.icon({
iconUrl: ICON3B965DI,
iconSize: [40, 40], // size of the icon
});

var ICON59A36A = L.icon({
iconUrl: ICON59A36AI,
iconSize: [40, 40], // size of the icon
});

var ICON78B177 = L.icon({
iconUrl: ICON78B177I,
iconSize: [40, 40], // size of the icon
});

var ICON97BE85 = L.icon({
iconUrl: ICON97BE85I,
iconSize: [40, 40], // size of the icon
});

var ICONB5CC92 = L.icon({
iconUrl: ICONB5CC92I,
iconSize: [40, 40], // size of the icon
});

var ICONBD4D99F = L.icon({
iconUrl: ICONBD4D99FI,
iconSize: [40, 40], // size of the icon
});

var ICONBF2E7AC = L.icon({
iconUrl: ICONBF2E7ACI,
iconSize: [40, 40], // size of the icon
});

var ICONBFAB292 = L.icon({
iconUrl: ICONBFAB292I,
iconSize: [40, 40], // size of the icon
});

var ICONBF24D5B = L.icon({
iconUrl: ICONBF24D5BI,
iconSize: [40, 40], // size of the icon
});

let ICONBD4D99FILIGHTYELLOW = L.icon({
iconUrl: ICONBD4D99FIYELLOW,
iconSize: [40, 40], // size of the icon
});
let ICONOORANGET = L.icon({
iconUrl: ICONOORANGE,
iconSize: [40, 40],
});
const custumIcon = {
"#96afd4": ICON96afd4,
"#1C884F": ICON1C884F,
"#3B965D": ICON3B965D,
"#59A36A": ICON59A36A,
"#abce9b": ICON78B177,
"#97BE85": ICON97BE85,
"#f1e49c": ICONBF2E7AC,
"#d6dd91": ICONBD4D99FILIGHTYELLOW,
"#F2E7AC": ICONBF2E7AC,
"#FAB292": ICONBFAB292,
"#F24D5B": ICONBF24D5B,
"#FFA500": ICONOORANGET,
};

// L.Marker.prototype.options.icon = DefaultIcon;

function ChangeView({ center, zoom }) {
const map = useMap();
map.setView(center, zoom);
return null;
}

const LiveTrackingMap = (props) => {
const {
show,
closealertpopup,
enodebID,
selectedFilters,
imsi,
legendTitle,
totalCallDrops,
rowData,
setShow,
urlSubscriptionData,
} = props;
const [position, setPosition] = useState([40.806471, -97.768101]);
const [zoom, setZoom] = useState(4);
const [data, setMapData] = useState([]);
const [tableData, setMapTableData] = useState([]);
const [coordinates, setCoordinates] = useState([]);
const [mapPosition, setMapPosition] = useState([]);
const [legends, setLegends] = useState([]);
const [callDropsofUser, setCallDrops] = useState(0);
const [loading, setLoading] = useState(false);
const [showPopUp, setShowPopUp] = useState(false);

const renderTooltip = (props, name) => (
<Tooltip1 {...props}>{<div>{name}</div>}</Tooltip1>
);
const tableColumns = [
{
title: "Timestamp",
field: "Connected_time",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el["Connected_time"] ? el["Connected_time"] : "Not Available"}
</span>
</div>
),
},
{
title: "eNodeB",
field: "eNodeB ID",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el["eNodeB ID"] ? el["eNodeB ID"] : "Not Available"}
</span>
</div>
),
},
{
title: "State",
field: "state",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el.state ? getStateName(el.state) : "Not Available"}
</span>
</div>
),
},
{
title: "Zip Code",
field: "zip_code",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el.zip_code ? el.zip_code : "Not Available"}
</span>
</div>
),
},
{
title: "Cause Code",
field: "cause_code",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el.cause_code ? el.cause_code : "Not Available"}
</span>
</div>
),
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el.cause_code ?
el.cause_code.length < 32 ? (
<div className="atname"> {el.cause_code} </div>
) : (
<div>
<div className="atname">
{" "}
{el.cause_code.substring(0, 32)} ...
<span
className="moretext pull-right"
style={{
display:
`${el.cause_code.length}` < 32
? "none"
: "",
}}
>
<div className="iicon">
<OverlayTrigger
placement={"top"}
overlay={(e) =>
renderTooltip(e, el.cause_code)
}
>
<ErrorOutlineIcon />
</OverlayTrigger>
</div>
</span>
</div>
</div>
)
: "Not Available"}
</span>
</div>
),
},
{
title: "eNodeB Call Drops",
field: "EnodeB Call Drops",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el["EnodeB Call Drops"] ? el["EnodeB Call Drops"] : 0}
</span>
</div>
),
},
{
title: "Call Drops",
field: "Call Drops",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el["Call Drops"] ? el["Call Drops"] : 0}
</span>
</div>
),
},
];

const load = () => {
const loadStatesTask = new HeatMapLoadState();
loadStatesTask.load((legends) => setLegends(legends), data, legendTitle);
};

useEffect(() => {
setPosition([40.806471, -97.768101]);
setZoom(4);
setCoordinates(coordinates);
getMapData();
}, []);

const homeClick = () => {
// console.log("clickkkkkkkkkkkkkkkkkkkkkkk")
let payload = {
isDefault: true,
selectedEnodeB: enodebID,
state: [],
dateTime: "",
IMSI: imsi,
};
if (selectedFilters) {
payload = {
isDefault: false,
state: selectedFilters.state,
enodeb_id: enodebID,
IMSI: imsi,
dateTime: `${selectedFilters.date} ${selectedFilters.hour.value}`,
};
}
let obj = {};
if (urlSubscriptionData) {
obj[`${urlSubscriptionData.isDefault ? "selectedEnodeB" : "enodeb_id"}`] =
enodebID;
}

setLoading(true);
getEnodeUserLocationTrack(
urlSubscriptionData
? {
...urlSubscriptionData,
...obj,
IMSI: imsi,
dateTime: `${urlSubscriptionData.date} ${urlSubscriptionData.hour.value}`,
}
: payload
).then((response) => {
if (
response.data &&
response.data.userInfo &&
response.data.userInfo.length > 0
) {
let mapCenter = [];
let mapPosition = [];
let d = response.data.userInfo;
d.map((el) => {
mapPosition.push([el.lat, el.lon]);
});
let output = [];

d.forEach((item) => {
const existing = output.filter(function (v, i) {
return v["eNodeB ID"] == item["eNodeB ID"];
});
if (existing.length) {
const existingIndex = output.findIndex(
(el) => el["eNodeB ID"] === existing[0]["eNodeB ID"]
);
let add = output[existingIndex]["Call Drops"] + item["Call Drops"];
output[existingIndex]["Call Drops"] = add;
} else {
output.push({ ...item });
}
});
if (mapPosition.length === 1 || mapPosition.length === 2) {
mapCenter = mapPosition[0];
} else if (mapPosition.length % 2 === 0) {
mapCenter = mapPosition[mapPosition.length / 2];
} else {
mapCenter = mapPosition[(mapPosition.length + 1) / 2];
}
setPosition(mapCenter);
setZoom(11);
let callDropCount = response.data.userInfo.map(
(el) => el["Call Drops"]
);
callDropCount = callDropCount.reduce(function (a, b) {
return a + b;
}, 0);
setCallDrops(callDropCount);
setMapPosition(mapPosition);
setMapTableData(response.data.userInfo);
setMapData(d);
}
setLoading(false);
});
};
const getMapData = async (data) => {
setLoading(true);
let payload = {
isDefault: true,
selectedEnodeB: enodebID,
state: [],
dateTime: "",
IMSI: imsi,
};
if (selectedFilters) {
payload = {
isDefault: false,
state: selectedFilters.state,
enodeb_id: enodebID,
IMSI: imsi,
dateTime: `${selectedFilters.date} ${selectedFilters.hour.value}`,
};
}
let obj = {};
if (urlSubscriptionData) {
obj[`${urlSubscriptionData.isDefault ? "selectedEnodeB" : "enodeb_id"}`] =
enodebID;
}
await getEnodeUserLocationTrack(
urlSubscriptionData
? {
...urlSubscriptionData,
...obj,
IMSI: imsi,
dateTime: `${urlSubscriptionData.date} ${urlSubscriptionData.hour.value}`,
}
: payload
).then((response) => {
if (
response.data &&
response.data.userInfo &&
response.data.userInfo.length > 0
) {
let mapCenter = [];
let mapPosition = [];
let d = response.data.userInfo;
d.map((el) => {
mapPosition.push([el.lat, el.lon]);
});
let output = [];

d.forEach((item) => {
const existing = output.filter(function (v, i) {
return v["eNodeB ID"] == item["eNodeB ID"];
});
if (existing.length) {
const existingIndex = output.findIndex(
(el) => el["eNodeB ID"] === existing[0]["eNodeB ID"]
);
let add = output[existingIndex]["Call Drops"] + item["Call Drops"];
output[existingIndex]["Call Drops"] = add;
} else {
output.push({ ...item });
}
});

if (mapPosition.length === 1 || mapPosition.length === 2) {
mapCenter = mapPosition[0];
} else if (mapPosition.length % 2 == 0) {
mapCenter = mapPosition[mapPosition.length / 2];
} else {
mapCenter = mapPosition[(mapPosition.length + 1) / 2];
}
setPosition(mapCenter);
setZoom(11);
let callDropCount = response.data.userInfo.map(
(el) => el["Call Drops"]
);
callDropCount = callDropCount.reduce(function (a, b) {
return a + b;
}, 0);
setCallDrops(callDropCount);
setMapPosition(mapPosition);
setMapTableData(response.data.userInfo);
setMapData(output);
}
setLoading(false);
});
};

const verifyCallDrops = (enodebID) => {
let d = data.filter((el) => el["eNodeB ID"] === enodebID);
d = d.map((el) => el["Call Drops"]);
d = d.reduce((partialSum, a) => partialSum + a, 0);
return d;
};

function style() {
return {
fillColor: "transparent",
weight: 2,
opacity: 1,
color: "#ffffff",
fillOpacity: 1,
};
}
useEffect(() => {
load();
}, [data]);

let colorValArr = [];
let kpiScoreArr = [];

if (data.length > 0) {
data.map((val, ind) => {
colorValArr.push(parseInt(val["Call Drops"]));
});
}

var uniqueColorValArr = colorValArr.filter(function (item, pos) {
return colorValArr.indexOf(item) === pos;
});
colorValArr = uniqueColorValArr.sort(SortByUTCDt);

var uniqueKpiValArr = kpiScoreArr.filter(function (item, pos) {
return kpiScoreArr.indexOf(item) === pos;
});
kpiScoreArr = uniqueKpiValArr.sort(SortByUTCDt);

function SortByUTCDt(a, b) {
return a < b ? -1 : a > b ? 1 : 0;
}

function getRTGColor(d) {
if (d === -1) {
return "#96afd4";
} else {
d = parseFloat(d);
colorValArr = colorValArr.sort(SortByUTCDt);
var colorsForRange;
if (isNaN(d)) {
colorsForRange = "#DCDCDC";
} else if (d === 0) {
colorsForRange = "#1C884F";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0)) &&
d < parseFloat(findQuantile(colorValArr, 0.1))
) {
colorsForRange = "#1C884F";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.1)) &&
d < parseFloat(findQuantile(colorValArr, 0.2))
) {
colorsForRange = "#3B965D";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.2)) &&
d < parseFloat(findQuantile(colorValArr, 0.3))
) {
colorsForRange = "#59A36A";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.3)) &&
d < parseFloat(findQuantile(colorValArr, 0.4))
) {
colorsForRange = "#78B177";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.4)) &&
d < parseFloat(findQuantile(colorValArr, 0.5))
) {
colorsForRange = "#97BE85";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.5)) &&
d < parseFloat(findQuantile(colorValArr, 0.6))
) {
colorsForRange = "#B5CC92";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.6)) &&
d < parseFloat(findQuantile(colorValArr, 0.7))
) {
colorsForRange = "#D4D99F";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.7)) &&
d < parseFloat(findQuantile(colorValArr, 0.8))
) {
colorsForRange = "#F2E7AC";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.8)) &&
d < parseFloat(findQuantile(colorValArr, 0.9))
) {
colorsForRange = "#FAB292";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.9)) &&
d <= parseFloat(findQuantile(colorValArr, 1))
) {
colorsForRange = "#F24D5B";
}

//if (colorValArr.length == 1) colorsForRange = "#DCDCDC";
return colorsForRange;
}
}
const buttonHandler = () => {
setShowPopUp(true);
};
const handleChange = () => {
setShowPopUp(false);
};
function getRTGFixedColor(d) {
if (d == -1) {
return "#1C884F";
} else {
d = parseFloat(d);
colorValArr = colorValArr.sort(SortByUTCDt);
let colorsForRange;
if (isNaN(d)) {
colorsForRange = "#DCDCDC";
}
else if(d>=1 && d<=10){
return "#abce9b"
}
else if (d>=11 && d<=50){
return "#d6dd91"
}
else if (d>=51 && d<=100){
return "#f1e49c"
}
else if (d>=101 && d<=500){
return "#FAB292"
}
else if (d>=501){
return "#F24D5B"
}
}
}
return (
<Fragment>
<Modal
animation={false}
className="deviceModelAlert heatmapp"
show={show}
onHide={closealertpopup}
backdrop="static"
centered
// style={{height:"120vh"}}
>
<Modal.Header closeButton className="mainclose">
<Modal.Body
style={{ height: loading ? "57vh" : "100%",marginTop:"-0.7rem" }}>
<div>{loading ? <Loader /> : null}</div>
{!loading &&
(data && data.length > 0 ? (
<Modal.Header
style={{
borderRadius: "11px",
boxShadow: "1px 1px 8px 1px #d3d3d3",
justifyContent: "center",
display: "flex",
position: "absolute",
marginLeft:"4rem",
zIndex:"10",
backgroundColor:"white",
width:"93%",
marginTop:"1.5rem",
padding: "0.3rem",
}}
><Modal.Body>
<div>
<div
className="commonheaidngandtable"
style={{ display: "flex", flexDirection: "column" }}
>
<div>
<h4 style={{ fontWeight: "700" }}>User Track Information</h4>
<div className="underLineClass"></div>
</div>
<div className=" mappopup">
<div
className="tablealign"
style={{ display: "flex", flexDirection: "row" }}
>
{tableData && tableData.length > 0 && (
<>
<div className="d-flex userTrackInfo">
<span className="maptitleone">IMSI</span>
<span className="maptitletwo">{tableData[0].IMSI}</span>
</div>
<div className="d-flex userTrackInfo">
<span className="maptitleone">Device Make</span>
<span className="maptitletwo">
{tableData[0]["Device"]}
</span>
</div>
<div className="d-flex userTrackInfo">
<span className="maptitleone">Software Version</span>
<span className="maptitletwo">
{tableData[0]["Software Version"]}
</span>
</div>
<div
className="d-flex userTrackInfo"
style={{
border: "0px solid grey",
borderRadius: "47px",
backgroundColor: "#e0e0e0b8",
justifyContent: "center",
alignItems: "center",
}}
>
<div className="popButtonclass">
<Button
style={{textTransform: "none"}}
// style={{height:"30px",
// width:"200px",
// display:"flex",
// border: "solid grey 2px solid",
// }}
onClick={() => buttonHandler()}
>
All Track Information
</Button>
</div>
</div>
</>
)}
</div>
</div>
</div>
<div>
{showPopUp
? tableData &&
tableData.length > 0 && (
<div className="CallDropMapTable userlivetrackmap mt-4" style={{
position:"absolute",
zIndex:"1",
top:"11rem",
width:"100%",
left:"0rem",
opacity:"0.88"}}>
<CommonTableComponent
title={""}
columns={tableColumns}
data={tableData}
exportFileName={""}
exportAllData={false}
sorting={true}
filtering={false}
pagination={true}
active={false}
search={false}
maxBodyHeight={200}
pageSize={tableData.length}
draggable={false}
exportCsv={false}
onRowClick={(tableData) => {}}
loading={false}
action = {[
{
icon: () => <div className="userlivetrackmaptable">
{/* <Button className="button"> */}
<CloseSharpIcon/>
{/* </Button> */}
</div>,
isFreeAction: true,
onClick: () => handleChange()
}
]}
/>
</div>
)
: null}
</div>
</div>
</Modal.Body>
</Modal.Header> ):null)}
{!loading &&
(data && data.length > 0 ? (
<div
className="row popup"
style={{ display: "flex", flexDirection: "column",width:"104%",
height:"76vh"
}}
>
{data && data.length > 0 ? (
<div
className="col col-8 userLivetrack"
style={{ marginTop: "-2rem", maxWidth: "100%" }}
>
<div
className="MapEmail"
onClick={() => {
// window.location.reload();
homeClick();
}}
>
<div style={{ padding: "7px 9px 8px 9px" }}>
<HomeIcon />
</div>
</div>
<div>
<MapContainer
id="map"
center={position}
zoom={zoom}
scrollWheelZoom={true}
height="600px"
dragging={true}
preferCanvas={false}
className="map"
zoomControl={true}
>
<ChangeView center={position} zoom={zoom} />
<LayersControl position="topleft">
<LayersControl.BaseLayer checked name="Street">
<TileLayer
attribution=""
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Dark">
<TileLayer
attribution=""
url="http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="OSM">
<TileLayer
attribution=""
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Google">
<TileLayer
attribution=""
url="http://mt.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
/>
</LayersControl.BaseLayer>
</LayersControl>
{data.length > 0
? data.map((el, key) => (
<Fragment key={key}>
<Marker
key={key}
position={[el.lat, el.lon]}
icon={custumIcon[getRTGFixedColor(el["Call Drops"])]}
eventHandlers={{
click: (e) => {
setPosition([e.latlng.lat, e.latlng.lng]);
setZoom(16);
},
}}
>
<Tooltip>
<div>Date: {el["Report Time"]}</div>
<div>IMSI: {el.IMSI}</div>
<div>Device Make: {el.Device}</div>
<div>eNodeB: {el["eNodeB ID"]}</div>
<div>
Total Call Drops of eNodeB:{" "}
{el["EnodeB Call Drops"]}
</div>
<div>
Call Drops of the User:{" "}
{/* {verifyCallDrops(el["eNodeB ID"])} */}
{el["Call Drops"]}
</div>
{/* <div>
Call Drop of the User: {rowData["Call Drops"]}
</div> */}
</Tooltip>
</Marker>
</Fragment>
))
: null}
{
mapPosition.length > 0 && (
// props.data.splice(0, 5).map((el, key) => (
<Fragment>
<Polyline positions={mapPosition} color={"black"} />
</Fragment>
)
// ))
}
<TileLayer
attribution="Map&copy; Verizon DT Analytics team"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png"
opacity={20}
/>
<Polygon positions={coordinates} />
{usJson && (
<GeoJSON data={usJson.features} style={style} />
)}

<Legend
legendItems={legends}
legendTitle={props.legendTitle}
/>
</MapContainer>
</div>
</div>
) : null}
</div>
) : (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "50vh",
float: "right",
width: "100%",
fontWeight: "700",
}}
>
<h5 style={{ fontWeight: "700" }}>No Data Exists</h5>
</div>
))}
</Modal.Body>
</Modal.Header>
</Modal>
</Fragment>
);
};

export default LiveTrackingMap;