mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 21:30:45 +00:00
93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
/*
|
|
* QQQ - Low-code Application Framework for Engineers.
|
|
* Copyright (C) 2021-2022. Kingsrook, LLC
|
|
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
|
* contact@kingsrook.com
|
|
* https://github.com/Kingsrook/
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import Card from "@mui/material/Card";
|
|
import Grid from "@mui/material/Grid";
|
|
import {useMaterialUIController} from "context";
|
|
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
|
|
import MDBox from "qqq/components/Temporary/MDBox";
|
|
import MDTypography from "qqq/components/Temporary/MDTypography";
|
|
import shipmentsByCarrierPieChartData from "qqq/pages/dashboards/Widgets/Data/ShipmentsByCarrierPieChartData";
|
|
import PieChart from "qqq/pages/dashboards/Widgets/PieChart";
|
|
|
|
function ShipmentsByCarrierPieChart(): JSX.Element
|
|
{
|
|
const [controller] = useMaterialUIController();
|
|
const {darkMode} = controller;
|
|
|
|
return (
|
|
<Card sx={{height: "100%"}}>
|
|
<MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}>
|
|
<MDTypography variant="h6">Shipments By Carrier YTD</MDTypography>
|
|
</MDBox>
|
|
<MDBox mt={3}>
|
|
<Grid container alignItems="center">
|
|
<Grid item xs={7}>
|
|
<PieChart chart={shipmentsByCarrierPieChartData} height="12.5rem" />
|
|
</Grid>
|
|
<Grid item xs={5}>
|
|
<MDBox pr={1}>
|
|
<MDBox mb={1}>
|
|
<MDBadgeDot color="dark" size="sm" badgeContent="AxleHire" />
|
|
</MDBox>
|
|
<MDBox mb={1}>
|
|
<MDBadgeDot color="info" size="sm" badgeContent="CDL" />
|
|
</MDBox>
|
|
<MDBox mb={1}>
|
|
<MDBadgeDot color="primary" size="sm" badgeContent="DHL" />
|
|
</MDBox>
|
|
<MDBox mb={1}>
|
|
<MDBadgeDot color="success" size="sm" badgeContent="FedEx" />
|
|
</MDBox>
|
|
<MDBox mb={1}>
|
|
<MDBadgeDot color="error" size="sm" badgeContent="LSO" />
|
|
</MDBox>
|
|
<MDBox mb={1}>
|
|
<MDBadgeDot color="secondary" size="sm" badgeContent="OnTrac" />
|
|
</MDBox>
|
|
<MDBox mb={1}>
|
|
<MDBadgeDot color="warning" size="sm" badgeContent="UPS" />
|
|
</MDBox>
|
|
</MDBox>
|
|
</Grid>
|
|
</Grid>
|
|
</MDBox>
|
|
<MDBox
|
|
pt={4}
|
|
pb={2}
|
|
px={2}
|
|
display="flex"
|
|
flexDirection={{xs: "column", sm: "row"}}
|
|
mt="auto"
|
|
>
|
|
<MDBox width={{xs: "100%", sm: "60%"}} lineHeight={1}>
|
|
<MDTypography variant="button" color="text" fontWeight="light">
|
|
More than <strong>1,200,000</strong> sales are made using referral marketing, and{" "}
|
|
<strong>700,000</strong> are from social media.
|
|
</MDTypography>
|
|
</MDBox>
|
|
</MDBox>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default ShipmentsByCarrierPieChart;
|