@gorazdo/material-you
Version:
Material You theme for @material-ui library
102 lines (101 loc) • 4.42 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PercentageWidget = void 0;
const core_1 = require("@material-ui/core");
const react_1 = __importDefault(require("react"));
const errors_1 = require("../services/errors");
const useStyles = (0, core_1.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: (0, core_1.lighten)(theme.palette.primary.light, 0.5),
transformOrigin: "center bottom",
},
ratio: {
maxWidth: theme.spacing(50),
minWidth: theme.spacing(28),
},
card: {
backgroundColor: (0, core_1.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",
},
}));
const PercentageWidget = ({ title, avatar, value, values, }) => {
const classes = useStyles();
if (value === undefined && values === undefined) {
(0, errors_1.logDevError)("Neither value nor values were not provided. At least one is required");
}
if (value !== undefined && values !== undefined) {
(0, errors_1.logDevError)("Both value nor values were provided. Please, provide only one of them");
}
const theValues = values ? values : [{ value: value !== null && value !== void 0 ? value : 0, label: "" }];
return (react_1.default.createElement(core_1.Card, { elevation: 0, className: classes.card },
react_1.default.createElement("div", { className: classes.ratio },
react_1.default.createElement(core_1.CardContent, { className: classes.content },
react_1.default.createElement("div", null,
avatar,
react_1.default.createElement(core_1.Typography, { variant: "subtitle1", className: classes.title }, title)),
value && (react_1.default.createElement(core_1.Typography, { variant: "h3", color: "primary", className: classes.value },
react_1.default.createElement(Percent, { value: value }))),
values && (react_1.default.createElement("div", { className: classes.stats }, theValues.map(({ label, value }) => {
return (react_1.default.createElement(core_1.Typography, { variant: "h6", color: "primary", className: classes.value },
react_1.default.createElement(core_1.Typography, { variant: "subtitle2", gutterBottom: true }, label),
react_1.default.createElement(Percent, { value: value })));
})))),
react_1.default.createElement("div", { className: classes.bars }, theValues.map(({ value }, index) => (react_1.default.createElement("div", { key: index, className: classes.bar, style: { transform: `scaleY(${value})` } })))))));
};
exports.PercentageWidget = PercentageWidget;
const Percent = ({ value }) => (react_1.default.createElement(react_1.default.Fragment, null,
(value * 100).toLocaleString(undefined, {
maximumFractionDigits: 0,
}),
react_1.default.createElement("small", null, "%")));