@popmenu/dashboard 0.39.0 → 0.40.2

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

@@ -124,19 +124,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$H;
+var _path$I;
 
-function _extends$1l() { _extends$1l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1l.apply(this, arguments); }
+function _extends$1m() { _extends$1m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1m.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1l({
+  return /*#__PURE__*/React.createElement("svg", _extends$1m({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
@@ -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%',
     },
 }); });
 
@@ -781,19 +783,19 @@ var LeaderboardTile = function (props) {
         React__default.createElement(Leaderboard, __assign$1({}, restProps))));
 };
 
-var _g$F;
+var _g$G;
 
-function _extends$1n() { _extends$1n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1n.apply(this, arguments); }
+function _extends$1o() { _extends$1o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1o.apply(this, arguments); }
 
 function SvgTrend(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1n({
+  return /*#__PURE__*/React.createElement("svg", _extends$1o({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$F || (_g$F = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$G || (_g$G = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M15.333 4L9 10.333 5.667 7l-5 5"
@@ -802,19 +804,19 @@ function SvgTrend(props) {
   }))));
 }
 
-var _g$E;
+var _g$F;
 
-function _extends$1m() { _extends$1m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1m.apply(this, arguments); }
+function _extends$1n() { _extends$1n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1n.apply(this, arguments); }
 
 function SvgTrendDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1m({
+  return /*#__PURE__*/React.createElement("svg", _extends$1n({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$E || (_g$E = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$F || (_g$F = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M15.333 12L9 5.667 5.667 9l-5-5"
@@ -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;