leumas-private-shared/src/MeanMedianMode/MeanMedianMode.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState } from 'react';
import { TextField, Typography, Container, Grid, Card, CardContent } from '@mui/material';
import {
  mean, median, mode, standardDeviation
} from 'simple-statistics';

const MeanMedianMode = () => {
  const [numbers, setNumbers] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
    const nums = e.target.value.split(',').map(Number).filter(n => !isNaN(n));
    setNumbers(nums);
  };

  const getMode = (numbers) => {
    try {
      const modeResult = mode(numbers);
      return Array.isArray(modeResult) ? modeResult.join(', ') : modeResult.toString();
    } catch (e) {
      return 'No mode';
    }
  };

  return (
    <Container className="flex flex-col items-center justify-center h-screen bg-gray-100">
      <Typography variant="h4" className="mb-4">Basic Statistics Calculator</Typography>
      <TextField
        label="Enter numbers (comma separated)"
        variant="outlined"
        value={input}
        onChange={handleInputChange}
        className="w-full mb-4"
      />
      <Grid container spacing={2}>
        {numbers.length > 0 && (
          <>
            <Grid item xs={12} sm={6} md={3}>
              <Card>
                <CardContent className="text-center">
                  <Typography variant="h6">Mean</Typography>
                  <Typography variant="body1">{mean(numbers).toFixed(2)}</Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Card>
                <CardContent className="text-center">
                  <Typography variant="h6">Median</Typography>
                  <Typography variant="body1">{median(numbers).toFixed(2)}</Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Card>
                <CardContent className="text-center">
                  <Typography variant="h6">Mode</Typography>
                  <Typography variant="body1">{getMode(numbers)}</Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Card>
                <CardContent className="text-center">
                  <Typography variant="h6">Standard Deviation</Typography>
                  <Typography variant="body1">{standardDeviation(numbers).toFixed(2)}</Typography>
                </CardContent>
              </Card>
            </Grid>
          </>
        )}
      </Grid>
    </Container>
  );
};

export default MeanMedianMode;