@popmenu/dashboard 0.40.0 → 0.40.3

package/build/components/KpiMetric/KpiMetric.d.ts

@@ -2,13 +2,11 @@
 import { KpiMetricProps } from './KpiMetricProps';
 declare const defaultProps: {
     trendStatus: string;
-    trendMessage: string;
 };
 export declare const KpiMetric: {
     (props: KpiMetricProps & typeof defaultProps): JSX.Element;
     defaultProps: {
         trendStatus: string;
-        trendMessage: string;
     };
 };
 export {};

package/build/index.es.js

@@ -762,9 +762,11 @@ var MoreLink = function (props) {
 var useTileStyles = makeStyles(function (theme) { return ({
     root: {
         borderRadius: theme.spacing(1),
+        width: '100%',
     },
     content: {
         padding: theme.spacing(3),
+        height: '100%',
     },
 }); });
 
@@ -824,6 +826,24 @@ function SvgTrendDown(props) {
 }
 
 var useKpiMetricStyles = makeStyles(function (theme) { return ({
+    iconContainer: {
+        fontSize: theme.spacing(3),
+        display: 'flex',
+        backgroundColor: theme.palette.grey[100],
+        color: theme.palette.secondary.light,
+        borderRadius: '50%',
+        padding: theme.spacing(2),
+        marginBottom: theme.spacing(2),
+    },
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+        justifyContent: 'space-between',
+        textAlign: 'center',
+        fontSize: '0.75rem',
+    },
     trendIcon: {
         '&&': {
             paddingInlineEnd: theme.spacing(1),
@@ -833,22 +853,21 @@ var useKpiMetricStyles = makeStyles(function (theme) { return ({
 
 var defaultProps = {
     trendStatus: 'natural',
-    trendMessage: 'data unavailable',
 };
 var KpiMetric = function (props) {
     var KpiIcon = props.Icon, metric = props.metric, value = props.value, trend = props.trend, trendMessage = props.trendMessage, trendStatus = props.trendStatus;
     var classes = useKpiMetricStyles(props);
     var trendColors = trendStatus === 'natural' ? ['success', 'warning'] : ['warning', 'success'];
     var trendColorMap = { up: 0, down: 1, level: 1 };
-    return (React__default.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center", fontSize: '0.75rem' },
-        KpiIcon && (React__default.createElement(Box, { fontSize: 24, display: "flex", bgcolor: "grey.100", borderRadius: "50%", padding: 2, mb: 2 },
+    return (React__default.createElement(Box, { className: classes.root },
+        KpiIcon && (React__default.createElement(Box, { className: classes.iconContainer },
             React__default.createElement(Icon, { icon: KpiIcon, size: "inherit" }))),
         React__default.createElement(Typography, { color: "secondary.light", variant: "body2" }, metric),
         React__default.createElement(Typography, { color: "secondary", variant: "h4" }, value ? value : '-'),
-        React__default.createElement(Typography, { style: { fontSize: 'inherit' }, variant: "body2", color: trend ? trendColors[trendColorMap[trend]] : 'grey.500' },
+        trendMessage && (React__default.createElement(Typography, { style: { fontSize: 'inherit' }, variant: "body2", color: trend ? trendColors[trendColorMap[trend]] : 'grey.500' },
             trend === 'up' && React__default.createElement(Icon, { className: classes.trendIcon, icon: SvgTrend, size: "inherit" }),
             trend === 'down' && React__default.createElement(Icon, { className: classes.trendIcon, icon: SvgTrendDown, size: "inherit" }),
-            trendMessage)));
+            trendMessage))));
 };
 KpiMetric.defaultProps = defaultProps;