@popmenu/dashboard - npm Package Compare versions

Comparing version 0.40.0 to 0.40.2

build/components/KpiMetric/KpiMetric.d.ts

@@ -5,3 +5,2 @@ /// <reference types="react" />
     trendStatus: string;
-    trendMessage: string;
 };
@@ -12,5 +11,4 @@ export declare const KpiMetric: {
         trendStatus: string;
-        trendMessage: string;
     };
 };
 export {};

build/index.es.js

@@ -765,5 +765,7 @@ import * as React from 'react';
         borderRadius: theme.spacing(1),
+        width: '100%',
     },
     content: {
         padding: theme.spacing(3),
+        height: '100%',
     },
@@ -828,2 +830,20 @@ }); });
 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: {
@@ -838,3 +858,2 @@ '&&': {
     trendStatus: 'natural',
-    trendMessage: 'data unavailable',
 };
@@ -846,11 +865,11 @@ var KpiMetric = function (props) {
     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))));
 };
@@ -857,0 +876,0 @@ KpiMetric.defaultProps = defaultProps;

build/index.js

@@ -810,5 +810,7 @@ 'use strict';
         borderRadius: theme.spacing(1),
+        width: '100%',
     },
     content: {
         padding: theme.spacing(3),
+        height: '100%',
     },
@@ -873,2 +875,20 @@ }); });
 var useKpiMetricStyles = core.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: {
@@ -883,3 +903,2 @@ '&&': {
     trendStatus: 'natural',
-    trendMessage: 'data unavailable',
 };
@@ -891,11 +910,11 @@ var KpiMetric = function (props) {
     var trendColorMap = { up: 0, down: 1, level: 1 };
-    return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", alignItems: "center", fontSize: '0.75rem' },
-        KpiIcon && (React__default['default'].createElement(core.Box, { fontSize: 24, display: "flex", bgcolor: "grey.100", borderRadius: "50%", padding: 2, mb: 2 },
+    return (React__default['default'].createElement(core.Box, { className: classes.root },
+        KpiIcon && (React__default['default'].createElement(core.Box, { className: classes.iconContainer },
             React__default['default'].createElement(Icon, { icon: KpiIcon, size: "inherit" }))),
         React__default['default'].createElement(Typography, { color: "secondary.light", variant: "body2" }, metric),
         React__default['default'].createElement(Typography, { color: "secondary", variant: "h4" }, value ? value : '-'),
-        React__default['default'].createElement(Typography, { style: { fontSize: 'inherit' }, variant: "body2", color: trend ? trendColors[trendColorMap[trend]] : 'grey.500' },
+        trendMessage && (React__default['default'].createElement(Typography, { style: { fontSize: 'inherit' }, variant: "body2", color: trend ? trendColors[trendColorMap[trend]] : 'grey.500' },
             trend === 'up' && React__default['default'].createElement(Icon, { className: classes.trendIcon, icon: SvgTrend, size: "inherit" }),
             trend === 'down' && React__default['default'].createElement(Icon, { className: classes.trendIcon, icon: SvgTrendDown, size: "inherit" }),
-            trendMessage)));
+            trendMessage))));
 };
@@ -902,0 +921,0 @@ KpiMetric.defaultProps = defaultProps;

package.json

 {
   "name": "@popmenu/dashboard",
-  "version": "0.40.0",
+  "version": "0.40.2",
   "license": "MIT",
@@ -32,3 +32,3 @@ "author": "Popmenu Design System Team",
   "sideEffects": false,
-  "gitHead": "14af249a5dae110b62c6942a800d8df6ab5bb5f6"
+  "gitHead": "7e32f26af91c50f2de577d1989a4007ffe435414"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

581334

increased by0.15%

Lines of code

1801

increased by2.04%

No dependency changes