问Next.js getServerSideProps

EN

import numeral from 'numeral';
import { Box, Card, Grid, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Chart } from '../../chart';
import { useEffect } from 'react';


const ChartLine = () => {
  const theme = useTheme();



  const chartOptions = {
    chart: {
      background: 'transparent',
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    colors: ['#2F3EB1'],
    dataLabels: {
      enabled: false
    },
    fill: {
      opacity: 1
    },
    grid: {
      show: false
    },
    stroke: {
      curve: 'smooth',
      width: 3
    },
    theme: {
      mode: theme.palette.mode
    },
    tooltip: {
      enabled: false
    },
    xaxis: {
      labels: {
        show: false
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      }
    },
    yaxis: {
      show: false
    }
  };

  const chartSeries = [{ data: [256, 282, 221, 245, 235, 274, 234, 256] }];

  return (
    <Chart
      options={chartOptions}
      series={chartSeries}
      type="area"
    />
  );
};


  

// const data = {
//   "Last1WeekQuantity": 0,
//   "Last1WeekAmount": 0,
//   "Last1MonthQuantity": 3,
//   "Last1MonthAmount": 73,
//   "Last3MonthQuantity": 3,
//   "Last3MonthAmount": 73
// };

export const getServerSideProps = async () => {
  const res = await fetch('http://localhost:8080/api/hbreport');
  const data = await res.json();
  {console.log("consolelog getServerSideProps")}
  console.log(data);

  return {
    props : {
      data
    } 
}
}

export const FinanceOverview  = (data) => {
  useEffect(() => {
    getServerSideProps();
  }, []);


  return (
    <Card {...data}>
      {console.log("consolelog under card")}
      {console.log(data)}
    <Grid container>
      <Grid
        item
        md={4}
        xs={12}
        sx={{
          alignItems: 'center',
          borderRight: (theme) => ({
            md: `1px solid ${theme.palette.divider}`
          }),
          borderBottom: (theme) => ({
            md: 'none',
            xs: `1px solid ${theme.palette.divider}`
          }),
          display: 'flex',
          justifyContent: 'space-between',
          p: 3
        }}
      >
        <div>
          <Typography
            color="textSecondary"
            variant="overline"
          >
            Last Week
          </Typography>
          <Typography variant="h5"> 
            {data.Last1WeekQuantity} orders
          </Typography>
          <Typography
            color="textSecondary"
            variant="body2"
          >
            
            {numeral(data.Last1WeekAmount).format('$0,0.00')} 
            &nbsp;
            last week
          </Typography>
        </div>
        <Box
          sx={{
            alignItems: 'center',
            display: 'flex',
            height: 54,
            width: 177
          }}
        >
          <ChartLine />
        </Box>
      </Grid>
      <Grid
        item
        md={4}
        xs={12}
        sx={{
          alignItems: 'center',
          borderRight: (theme) => ({
            md: `1px solid ${theme.palette.divider}`
          }),
          borderBottom: (theme) => ({
            xs: `1px solid ${theme.palette.divider}`,
            md: 'none'
          }),
          display: 'flex',
          justifyContent: 'space-between',
          p: 3
        }}
      >
        <div>
          <Typography
            color="textSecondary"
            variant="overline"
          >
            Last Month
          </Typography>
          <Typography variant="h5">
            {data.Last1MonthQuantity} orders
          </Typography>
          <Typography
            color="textSecondary"
            variant="body2"
          >
          
            {numeral(data.Last1MonthAmount).format('$0,0.00')}
            &nbsp;
            last month
          </Typography>
        </div>
        <Box
          sx={{
            alignItems: 'center',
            display: 'flex',
            height: 54,
            width: 177
          }}
        >
          <ChartLine />
        </Box>
      </Grid>
      <Grid
        item
        md={4}
        xs={12}
        sx={{
          alignItems: 'center',
          display: 'flex',
          justifyContent: 'space-between',
          p: 3
        }}
      >
                      <div>
                      <Typography
                        color="textSecondary"
                        variant="overline"
                      >
                        Last 3 Month
                      </Typography>
                      <Typography variant="h5">
                        {data.Last3MonthQuantity} orders
            
                      </Typography>
                      <Typography
                        color="textSecondary"
                        variant="body2"
                      >
                        
                        {numeral(data.Last3MonthAmount).format('$0,0.00')}
                        &nbsp;
                        last 3 month
                      </Typography>
                    </div>

        <Box
          sx={{
            alignItems: 'center',
            display: 'flex',
            height: 54,
            width: 177
          }}
        >
          <ChartLine />
        </Box>
      </Grid>
    </Grid>
      
  </Card>
);}