@gorazdo/material-you
Version:
Material You theme for @material-ui library
95 lines (94 loc) • 3.85 kB
JavaScript
import { alpha, Card, CardContent, lighten, makeStyles, Typography, } from "@material-ui/core";
import React from "react";
import { logDevError } from "../services/errors";
const useStyles = makeStyles((theme) => ({
bars: {
height: "100%",
position: "absolute",
width: "100%",
left: 0,
top: 0,
display: "grid",
gridAutoFlow: "column",
},
stats: {
display: "grid",
gridAutoFlow: "column",
justifyItems: "center",
marginInlineStart: theme.spacing(-3),
marginInlineEnd: theme.spacing(-3),
["& $value:first-child"]: {
justifySelf: "start",
paddingInlineStart: theme.spacing(3),
marginInlineEnd: theme.spacing(-1.5),
},
["& $value:last-child"]: {
justifySelf: "center",
},
},
bar: {
backgroundColor: lighten(theme.palette.primary.light, 0.5),
transformOrigin: "center bottom",
},
ratio: {
maxWidth: theme.spacing(50),
minWidth: theme.spacing(28),
},
card: {
backgroundColor: alpha(theme.palette.primary.light, 0.1),
},
title: {
marginInlineEnd: "20%",
fontWeight: 500,
"&:not(:first-child)": {
marginBlockStart: theme.spacing(1),
},
},
value: {
marginBlockStart: "auto",
lineHeight: 0.75,
fontWeight: 500,
marginBlockEnd: 0,
},
content: {
height: "100%",
display: "grid",
minHeight: 0,
minWidth: 0,
gridTemplateRows: "minmax(0, 1fr)",
gap: theme.spacing(2),
alignItems: "stretch",
position: "relative",
zIndex: 2,
flexDirection: "column",
},
}));
export const PercentageWidget = ({ title, avatar, value, values, }) => {
const classes = useStyles();
if (value === undefined && values === undefined) {
logDevError("Neither value nor values were not provided. At least one is required");
}
if (value !== undefined && values !== undefined) {
logDevError("Both value nor values were provided. Please, provide only one of them");
}
const theValues = values ? values : [{ value: value ?? 0, label: "" }];
return (React.createElement(Card, { elevation: 0, className: classes.card },
React.createElement("div", { className: classes.ratio },
React.createElement(CardContent, { className: classes.content },
React.createElement("div", null,
avatar,
React.createElement(Typography, { variant: "subtitle1", className: classes.title }, title)),
value && (React.createElement(Typography, { variant: "h3", color: "primary", className: classes.value },
React.createElement(Percent, { value: value }))),
values && (React.createElement("div", { className: classes.stats }, theValues.map(({ label, value }) => {
return (React.createElement(Typography, { variant: "h6", color: "primary", className: classes.value },
React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, label),
React.createElement(Percent, { value: value })));
})))),
React.createElement("div", { className: classes.bars }, theValues.map(({ value }, index) => (React.createElement("div", { key: index, className: classes.bar, style: { transform: `scaleY(${value})` } })))))));
};
const Percent = ({ value }) => (React.createElement(React.Fragment, null,
(value * 100).toLocaleString(undefined, {
maximumFractionDigits: 0,
}),
React.createElement("small", null, "%")));