cloudhubui
Version:
Various components to use in react projects
200 lines (172 loc) • 8.16 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx2 = _interopRequireDefault(require("clsx"));
var _reactCountup = _interopRequireDefault(require("react-countup"));
var _styles = require("@material-ui/styles");
var _styles2 = require("@material-ui/core/styles");
var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _react2 = require("@iconify/react");
var _reactApexcharts = _interopRequireDefault(require("react-apexcharts"));
var _trendingUpFill = _interopRequireDefault(require("@iconify-icons/eva/trending-up-fill"));
var _trendingDownFill = _interopRequireDefault(require("@iconify-icons/eva/trending-down-fill"));
var _formatNumber = require("../utils/formatNumber");
var _Text = _interopRequireDefault(require("../Text"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = 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.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// ----------------------------------------------------------------------
var useStyles = function useStyles(color) {
return (0, _styles.makeStyles)(function (theme) {
return {
root: _objectSpread({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(3)
}, theme.palette[color] && {
color: theme.palette[color].darker,
backgroundColor: theme.palette[color].lighter
}),
trending: {
display: 'flex',
alignItems: 'center',
marginTop: theme.spacing(1.5),
marginBottom: theme.spacing(0.5)
},
trendingIcon: {
width: 24,
height: 24,
display: 'flex',
borderRadius: '50%',
alignItems: 'center',
justifyContent: 'center',
marginRight: theme.spacing(1),
color: theme.palette.primary.main,
backgroundColor: (0, _styles2.alpha)(theme.palette.primary.main, 0.16)
},
isTrendingDown: {
color: theme.palette.error.main,
backgroundColor: (0, _styles2.alpha)(theme.palette.error.main, 0.16)
}
};
});
};
function StatisticPaper(_ref) {
var className = _ref.className,
_ref$title = _ref.title,
title = _ref$title === void 0 ? 'Stat' : _ref$title,
_ref$color = _ref.color,
color = _ref$color === void 0 ? 'info' : _ref$color,
_ref$prefix = _ref.prefix,
prefix = _ref$prefix === void 0 ? '' : _ref$prefix,
_ref$suffix = _ref.suffix,
suffix = _ref$suffix === void 0 ? '' : _ref$suffix,
_ref$right = _ref.right,
right = _ref$right === void 0 ? '' : _ref$right,
_ref$data = _ref.data,
data = _ref$data === void 0 ? [] : _ref$data,
countup = _ref.countup,
figure = _ref.figure,
other = _objectWithoutProperties(_ref, ["className", "title", "color", "prefix", "suffix", "right", "data", "countup", "figure"]);
var classes = useStyles(color)();
var theme = (0, _styles2.useTheme)();
var length = data.length || 0;
var hasData = length > 0;
var PERCENT = 0;
var FIGURE = data[length - 1] || figure;
if (data && length > 2) {
var secondlast = data[length - 2];
PERCENT = FIGURE * 100 / secondlast;
}
var chartData = [{
data: data
}];
var chartOptions = {
colors: [theme.palette.primary.main],
chart: {
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: '68%',
endingShape: 'rounded'
}
},
labels: [1, 2, 3, 4, 5, 6, 7, 8],
tooltip: {
x: {
show: false
},
y: {
formatter: function formatter(seriesName) {
return (0, _formatNumber.fNumber)(seriesName);
},
title: {
formatter: function formatter(seriesName) {
return '';
}
}
},
marker: {
show: false
}
}
};
var showCountUp = countup && FIGURE !== 0;
return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
elevation: 3,
className: (0, _clsx2.default)(classes.root, className)
}, other), /*#__PURE__*/_react.default.createElement(_Box.default, {
sx: {
flexGrow: 1
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
subHeader: true
}, title, " "), /*#__PURE__*/_react.default.createElement("div", {
className: classes.trending
}, hasData && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx2.default)(classes.trendingIcon, _defineProperty({}, classes.isTrendingDown, PERCENT < 0))
}, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
width: 16,
height: 16,
icon: PERCENT >= 0 ? _trendingUpFill.default : _trendingDownFill.default
})), hasData && /*#__PURE__*/_react.default.createElement(_Typography.default, {
component: "span",
variant: "subtitle2",
color: PERCENT >= 0 ? 'primary' : 'error'
}, PERCENT > 0 && '+', (0, _formatNumber.fPercent)(PERCENT))), /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "h3"
}, prefix, showCountUp ? /*#__PURE__*/_react.default.createElement(_reactCountup.default, {
start: 0,
end: FIGURE,
duration: 4,
delay: 2,
separator: "",
decimals: 2,
decimal: "."
}) : (0, _formatNumber.fNumber)(FIGURE), suffix)), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
subTitle: true,
style: {
marginRight: theme.sizes.margin
}
}, right), hasData && /*#__PURE__*/_react.default.createElement(_reactApexcharts.default, {
type: "bar",
series: chartData,
options: chartOptions,
width: 60,
height: 36
})));
}
var _default = StatisticPaper;
exports.default = _default;