Skip to content

Commit

Permalink
Merge pull request #43 from smswithoutborders/develop
Browse files Browse the repository at this point in the history 
update to the page and tables and filters
  • Loading branch information
@mildrette
mildrette authored Jul 18, 2024
2 parents 68f8305 + 6db427a commit 8478984
Showing 1 changed file with 79 additions and 81 deletions.
160 changes: 79 additions & 81 deletions src/Pages/OpenTelemetry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import {
TableHead,
TableRow,
Paper,
Stack,
Button,
FormLabel
} from "@mui/material";
import { BarChart as BarChartIcon, LocationOn as LocationOnIcon } from "@mui/icons-material";
Expand Down Expand Up @@ -53,6 +55,17 @@ const OpenTelemetry = () => {
}
}, [data]);

useEffect(() => {
if (chart) {
try {
const apexChart = new ApexCharts(document.querySelector("#chart"), chart);
apexChart.render();
} catch (error) {
console.error("Error rendering chart:", error);
}
}
}, [chart]);

const fetchData = async (start, end, type, format) => {
try {
const response = await axios.get(
Expand All @@ -67,6 +80,14 @@ const OpenTelemetry = () => {
}
};

const handleData = (data) => {
if (displayType === "signup") {
setTotalUsers(data.total_signups || 0); // Set total signups for the "Sign Up Users" display type
} else {
setTotalUsers(data.total_users || 0); // Set total users for the "Total Users" display type
}
};

const extractChartData = (data) => {
if (!data || !data[displayType]) {
console.error(`Data for display type '${displayType}' is undefined.`);
Expand Down Expand Up @@ -98,34 +119,17 @@ const OpenTelemetry = () => {
chart: {
height: 350,
type: "line",
zoom: {
enabled: false
}
zoom: { enabled: false }
},
series: [
{
name: displayType,
data: chartData
}
],
dataLabels: {
enabled: false
},
stroke: {
curve: "smooth"
},
xaxis: {
categories
}
series: [{ name: displayType, data: chartData }],
dataLabels: { enabled: false },
stroke: { curve: "smooth" },
xaxis: { categories }
};

setChart(options);
};

const handleData = (data) => {
setTotalUsers(data.total_users || 0);
};

const handleDisplayTypeChange = (e) => {
const newDisplayType = e.target.value;
setDisplayType(newDisplayType);
Expand All @@ -150,29 +154,22 @@ const OpenTelemetry = () => {
fetchData(startDate, newEndDate, displayType, format);
};

useEffect(() => {
if (chart) {
try {
const apexChart = new ApexCharts(document.querySelector("#chart"), chart);
apexChart.render();
} catch (error) {
console.error("Error rendering chart:", error);
}
}
}, [chart]);
const handleRefresh = () => {
fetchData(startDate, endDate, displayType, format);
};

return (
<Box
className="bg"
component="main"
sx={{
px: { md: 3, sm: 3, xs: 2 },
pb: { md: 3, sm: 3, xs: 14 },
pr: { md: 3, sm: 3, xs: 2 },
flexGrow: 1
}}
>
{/* Container Grid for Main Layout */}
<Grid container sx={{ p: 2 }} justifyContent="center" alignItems="center" direction="row">
{/* Sidebar Section */}
<Grid
item
lg={2}
Expand All @@ -185,7 +182,6 @@ const OpenTelemetry = () => {
}}
></Grid>

{/* Main Content Area */}
<Grid
mx="auto"
item
Expand All @@ -199,7 +195,6 @@ const OpenTelemetry = () => {
}}
>
<Box>
{/* Total and Country Cards */}
<Grid container spacing={2} sx={{ mt: 3 }}>
{/* Total Card */}
<Grid item xs={12} sm={6} md={2}>
Expand All @@ -218,27 +213,30 @@ const OpenTelemetry = () => {
</Card>
</Grid>

{/* Country Total Card */}
<Grid item xs={12} sm={6} md={2}>
<Card className={" card2 text-center"} id="card2">
<CardContent>
<Grid container justifyContent="center" alignItems="center">
<Grid item xs={3}>
<LocationOnIcon fontSize="large" className="icon2" />
</Grid>
<Grid item xs={6} id="countrytotaldiv">
<Typography variant="h3">{data ? data.total_countries || 0 : 0}</Typography>
<Typography className="textsmall">COUNTRY TOTAL</Typography>
{/* Conditional Country Total Card */}
{displayType === "available" && (
<Grid item xs={12} sm={6} md={2}>
<Card className={" card2 text-center"} id="card2">
<CardContent>
<Grid container justifyContent="center" alignItems="center">
<Grid item xs={3}>
<LocationOnIcon fontSize="large" className="icon2" />
</Grid>
<Grid item xs={6} id="countrytotaldiv">
<Typography variant="h3">
{data ? data.total_countries || 0 : 0}
</Typography>
<Typography className="textsmall">COUNTRY TOTAL</Typography>
</Grid>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
</CardContent>
</Card>
</Grid>
)}
</Grid>

{/* Form Controls for Filtering Data */}
<Grid container spacing={2} sx={{ mt: 3 }}>
{/* Type Select */}
{/* Display Type Select */}
<Grid item xs={12} sm={6} md={3}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="display-type-label">Display Type</InputLabel>
Expand All @@ -257,21 +255,19 @@ const OpenTelemetry = () => {

{/* Format Radio Buttons */}
<Grid item xs={12} sm={6} md={3}>
<Grid item xs={12} sm={6} md={3}>
<FormControl component="fieldset">
<FormLabel component="legend">Format</FormLabel>
<RadioGroup
row
aria-label="format"
name="format"
value={format}
onChange={handleFormatChange}
>
<FormControlLabel value="month" control={<Radio />} label="Month" />
<FormControlLabel value="day" control={<Radio />} label="Day" />
</RadioGroup>
</FormControl>
</Grid>
<FormControl component="fieldset">
<FormLabel component="legend">Format</FormLabel>
<RadioGroup
row
aria-label="format"
name="format"
value={format}
onChange={handleFormatChange}
>
<FormControlLabel value="month" control={<Radio />} label="Month" />
<FormControlLabel value="day" control={<Radio />} label="Day" />
</RadioGroup>
</FormControl>
</Grid>

{/* Start Date Picker */}
Expand All @@ -282,9 +278,7 @@ const OpenTelemetry = () => {
type="date"
value={startDate}
onChange={handleStartDateChange}
InputLabelProps={{
shrink: true
}}
InputLabelProps={{ shrink: true }}
fullWidth
/>
</Grid>
Expand All @@ -297,18 +291,25 @@ const OpenTelemetry = () => {
type="date"
value={endDate}
onChange={handleEndDateChange}
InputLabelProps={{
shrink: true
}}
InputLabelProps={{ shrink: true }}
fullWidth
/>
</Grid>
</Grid>

{/* Add the map, table, chart, and other sections here */}
<Grid item xs={12}>
{/* Refresh Button */}
<Grid item xs={12} sx={{ mt: 2 }}>
<Stack direction="row" spacing={2} justifyContent="center">
<Button variant="contained" color="primary" onClick={handleRefresh}>
Refresh
</Button>
</Stack>
</Grid>

{/* Data Table */}
<Grid item xs={6}>
<TableContainer component={Paper} sx={{ maxHeight: 400, marginTop: 3 }}>
<Table sx={{ minWidth: 650 }} aria-label="country table">
<Table>
<TableHead>
<TableRow>
<TableCell>COUNTRY</TableCell>
Expand Down Expand Up @@ -336,10 +337,7 @@ const OpenTelemetry = () => {
</Table>
</TableContainer>
</Grid>

<Grid item xs={12} style={{ marginTop: "3rem" }}>
<Box id="chart" sx={{ marginTop: 3 }} />
</Grid>
<Grid item xs={6}></Grid>
</Box>
</Grid>
</Grid>
Expand Down

0 comments on commit 8478984

Please sign in to comment.