@plusscommunities/pluss-core-web 1.4.20 → 1.4.21

package/dist/index.cjs.js

@@ -32,6 +32,9 @@ var reactCsv = require('react-csv');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var reactColor = require('react-color');
 var tinycolor = require('tinycolor2');
+var reactRouterDom = require('react-router-dom');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -11547,6 +11550,63 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
   return ColourPicker;
 }(React.Component);
 
+var StatBox = function StatBox(_ref) {
+  var title = _ref.title,
+      icon = _ref.icon,
+      value = _ref.value,
+      previousValue = _ref.previousValue,
+      prevText = _ref.prevText,
+      viewGraphLink = _ref.viewGraphLink,
+      isLoading = _ref.isLoading;
+  var change = (value / previousValue - 1) * 100;
+
+  if (isNaN(change)) {
+    change = 0;
+  }
+
+  if (!isFinite(change)) {
+    change = 100;
+  }
+
+  change = parseInt(change);
+  var opacity = isLoading ? 0 : 1;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "dashboardBox dashboardBox-stats dashboardBox-inline".concat(change > 0 ? ' dashboardBox-stats-positive' : '').concat(change < 0 ? ' dashboardBox-stats-negative' : '')
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "dashboardBox-stats_title"
+  }, /*#__PURE__*/React__default['default'].createElement(Text, {
+    type: "h6"
+  }, title)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "dashboardBox-stats_mid",
+    style: {
+      opacity: opacity
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: "dashboardBox-stats_icon",
+    icon: icon
+  }), /*#__PURE__*/React__default['default'].createElement(Text, {
+    type: "h2",
+    className: "dashboardBox-stats_count"
+  }, value), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "dashboardBox-stats_change"
+  }, change === 0 ? 'No change' : "".concat(change, "% ").concat(change < 0 ? '↓' : '↑'))), /*#__PURE__*/React__default['default'].createElement(Text, {
+    type: "help",
+    style: {
+      opacity: opacity
+    }
+  }, "Compared to ", prevText), viewGraphLink && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
+    to: "".concat(viewGraphLink, "&title=").concat(title)
+  }, /*#__PURE__*/React__default['default'].createElement(Text, {
+    type: "h5-noUpper",
+    className: "text-link marginTop-10"
+  }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faChartLine,
+    style: {
+      marginRight: 4
+    }
+  }), "View Graph")));
+};
+
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   AddButton: AddButton,
@@ -11589,6 +11649,7 @@ var index = /*#__PURE__*/Object.freeze({
   ExportCsvPopup: ExportCsvPopup,
   InputGroup: InputGroup,
   ColourPicker: ColourPicker,
+  StatBox: StatBox,
   Tabs: Tabs
 });
 

package/dist/index.esm.js

@@ -28,6 +28,9 @@ import { CSVLink } from 'react-csv';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ChromePicker } from 'react-color';
 import tinycolor from 'tinycolor2';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChartLine } from '@fortawesome/free-solid-svg-icons';
 
 var CoreConfig = {
   env: {
@@ -11517,6 +11520,63 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
   return ColourPicker;
 }(Component);
 
+var StatBox = function StatBox(_ref) {
+  var title = _ref.title,
+      icon = _ref.icon,
+      value = _ref.value,
+      previousValue = _ref.previousValue,
+      prevText = _ref.prevText,
+      viewGraphLink = _ref.viewGraphLink,
+      isLoading = _ref.isLoading;
+  var change = (value / previousValue - 1) * 100;
+
+  if (isNaN(change)) {
+    change = 0;
+  }
+
+  if (!isFinite(change)) {
+    change = 100;
+  }
+
+  change = parseInt(change);
+  var opacity = isLoading ? 0 : 1;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dashboardBox dashboardBox-stats dashboardBox-inline".concat(change > 0 ? ' dashboardBox-stats-positive' : '').concat(change < 0 ? ' dashboardBox-stats-negative' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dashboardBox-stats_title"
+  }, /*#__PURE__*/React.createElement(Text, {
+    type: "h6"
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: "dashboardBox-stats_mid",
+    style: {
+      opacity: opacity
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: "dashboardBox-stats_icon",
+    icon: icon
+  }), /*#__PURE__*/React.createElement(Text, {
+    type: "h2",
+    className: "dashboardBox-stats_count"
+  }, value), /*#__PURE__*/React.createElement("p", {
+    className: "dashboardBox-stats_change"
+  }, change === 0 ? 'No change' : "".concat(change, "% ").concat(change < 0 ? '↓' : '↑'))), /*#__PURE__*/React.createElement(Text, {
+    type: "help",
+    style: {
+      opacity: opacity
+    }
+  }, "Compared to ", prevText), viewGraphLink && /*#__PURE__*/React.createElement(Link, {
+    to: "".concat(viewGraphLink, "&title=").concat(title)
+  }, /*#__PURE__*/React.createElement(Text, {
+    type: "h5-noUpper",
+    className: "text-link marginTop-10"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faChartLine,
+    style: {
+      marginRight: 4
+    }
+  }), "View Graph")));
+};
+
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   AddButton: AddButton,
@@ -11559,6 +11619,7 @@ var index = /*#__PURE__*/Object.freeze({
   ExportCsvPopup: ExportCsvPopup,
   InputGroup: InputGroup,
   ColourPicker: ColourPicker,
+  StatBox: StatBox,
   Tabs: Tabs
 });
 

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('lodash'), require('axios'), require('aws-amplify'), require('@babel/runtime/helpers/defineProperty'), require('moment'), require('react'), require('jquery'), require('js-cookie'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('react-fontawesome'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('react-redux'), require('react-textarea-autosize'), require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/typeof'), require('react-dropzone'), require('react-router'), require('react-bootstrap'), require('@crello/react-lottie'), require('react-csv'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-color'), require('tinycolor2')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'lodash', 'axios', 'aws-amplify', '@babel/runtime/helpers/defineProperty', 'moment', 'react', 'jquery', 'js-cookie', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', 'react-fontawesome', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', 'react-redux', 'react-textarea-autosize', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/typeof', 'react-dropzone', 'react-router', 'react-bootstrap', '@crello/react-lottie', 'react-csv', '@babel/runtime/helpers/objectWithoutProperties', 'react-color', 'tinycolor2'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-core-web'] = {}, global._asyncToGenerator, global._regeneratorRuntime, global._, global.axios, global.awsAmplify, global._defineProperty, global.moment, global.React, global.$, global.Cookies, global._classCallCheck, global._createClass, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global.FontAwesome, global._extends, global._assertThisInitialized, global.reactRedux, global.Textarea, global._toConsumableArray, global._typeof, global.Dropzone, global.reactRouter, global.reactBootstrap, global.reactLottie, global.reactCsv, global._objectWithoutProperties, global.reactColor, global.tinycolor));
-}(this, (function (exports, _asyncToGenerator, _regeneratorRuntime, _, axios, awsAmplify, _defineProperty, moment, React, $, Cookies, _classCallCheck, _createClass, _inherits, _possibleConstructorReturn, _getPrototypeOf, FontAwesome, _extends, _assertThisInitialized, reactRedux, Textarea, _toConsumableArray, _typeof, Dropzone, reactRouter, reactBootstrap, reactLottie, reactCsv, _objectWithoutProperties, reactColor, tinycolor) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('lodash'), require('axios'), require('aws-amplify'), require('@babel/runtime/helpers/defineProperty'), require('moment'), require('react'), require('jquery'), require('js-cookie'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('react-fontawesome'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('react-redux'), require('react-textarea-autosize'), require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/typeof'), require('react-dropzone'), require('react-router'), require('react-bootstrap'), require('@crello/react-lottie'), require('react-csv'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-color'), require('tinycolor2'), require('react-router-dom'), require('@fortawesome/react-fontawesome'), require('@fortawesome/free-solid-svg-icons')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'lodash', 'axios', 'aws-amplify', '@babel/runtime/helpers/defineProperty', 'moment', 'react', 'jquery', 'js-cookie', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', 'react-fontawesome', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', 'react-redux', 'react-textarea-autosize', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/typeof', 'react-dropzone', 'react-router', 'react-bootstrap', '@crello/react-lottie', 'react-csv', '@babel/runtime/helpers/objectWithoutProperties', 'react-color', 'tinycolor2', 'react-router-dom', '@fortawesome/react-fontawesome', '@fortawesome/free-solid-svg-icons'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-core-web'] = {}, global._asyncToGenerator, global._regeneratorRuntime, global._, global.axios, global.awsAmplify, global._defineProperty, global.moment, global.React, global.$, global.Cookies, global._classCallCheck, global._createClass, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global.FontAwesome, global._extends, global._assertThisInitialized, global.reactRedux, global.Textarea, global._toConsumableArray, global._typeof, global.Dropzone, global.reactRouter, global.reactBootstrap, global.reactLottie, global.reactCsv, global._objectWithoutProperties, global.reactColor, global.tinycolor, global.reactRouterDom, global.reactFontawesome, global.freeSolidSvgIcons));
+}(this, (function (exports, _asyncToGenerator, _regeneratorRuntime, _, axios, awsAmplify, _defineProperty, moment, React, $, Cookies, _classCallCheck, _createClass, _inherits, _possibleConstructorReturn, _getPrototypeOf, FontAwesome, _extends, _assertThisInitialized, reactRedux, Textarea, _toConsumableArray, _typeof, Dropzone, reactRouter, reactBootstrap, reactLottie, reactCsv, _objectWithoutProperties, reactColor, tinycolor, reactRouterDom, reactFontawesome, freeSolidSvgIcons) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -11518,6 +11518,63 @@
     return ColourPicker;
   }(React.Component);
 
+  var StatBox = function StatBox(_ref) {
+    var title = _ref.title,
+        icon = _ref.icon,
+        value = _ref.value,
+        previousValue = _ref.previousValue,
+        prevText = _ref.prevText,
+        viewGraphLink = _ref.viewGraphLink,
+        isLoading = _ref.isLoading;
+    var change = (value / previousValue - 1) * 100;
+
+    if (isNaN(change)) {
+      change = 0;
+    }
+
+    if (!isFinite(change)) {
+      change = 100;
+    }
+
+    change = parseInt(change);
+    var opacity = isLoading ? 0 : 1;
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "dashboardBox dashboardBox-stats dashboardBox-inline".concat(change > 0 ? ' dashboardBox-stats-positive' : '').concat(change < 0 ? ' dashboardBox-stats-negative' : '')
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "dashboardBox-stats_title"
+    }, /*#__PURE__*/React__default['default'].createElement(Text, {
+      type: "h6"
+    }, title)), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "dashboardBox-stats_mid",
+      style: {
+        opacity: opacity
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
+      className: "dashboardBox-stats_icon",
+      icon: icon
+    }), /*#__PURE__*/React__default['default'].createElement(Text, {
+      type: "h2",
+      className: "dashboardBox-stats_count"
+    }, value), /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "dashboardBox-stats_change"
+    }, change === 0 ? 'No change' : "".concat(change, "% ").concat(change < 0 ? '↓' : '↑'))), /*#__PURE__*/React__default['default'].createElement(Text, {
+      type: "help",
+      style: {
+        opacity: opacity
+      }
+    }, "Compared to ", prevText), viewGraphLink && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
+      to: "".concat(viewGraphLink, "&title=").concat(title)
+    }, /*#__PURE__*/React__default['default'].createElement(Text, {
+      type: "h5-noUpper",
+      className: "text-link marginTop-10"
+    }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: freeSolidSvgIcons.faChartLine,
+      style: {
+        marginRight: 4
+      }
+    }), "View Graph")));
+  };
+
   var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     AddButton: AddButton,
@@ -11560,6 +11617,7 @@
     ExportCsvPopup: ExportCsvPopup,
     InputGroup: InputGroup,
     ColourPicker: ColourPicker,
+    StatBox: StatBox,
     Tabs: Tabs
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -29,6 +29,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "jquery": "^3.2.1",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.4",

package/src/components/StatBox.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChartLine } from '@fortawesome/free-solid-svg-icons';
+import { Text } from './Text';
+
+// StatBox Component
+const StatBox = ({ title, icon, value, previousValue, prevText, viewGraphLink, isLoading }) => {
+  let change = (value / previousValue - 1) * 100;
+  if (isNaN(change)) {
+    change = 0;
+  }
+  if (!isFinite(change)) {
+    change = 100;
+  }
+  change = parseInt(change);
+  const opacity = isLoading ? 0 : 1;
+  return (
+    <div
+      className={`dashboardBox dashboardBox-stats dashboardBox-inline${change > 0 ? ' dashboardBox-stats-positive' : ''}${
+        change < 0 ? ' dashboardBox-stats-negative' : ''
+      }`}
+    >
+      <div className="dashboardBox-stats_title">
+        <Text type="h6">{title}</Text>
+      </div>
+      <div className="dashboardBox-stats_mid" style={{ opacity }}>
+        <FontAwesomeIcon className="dashboardBox-stats_icon" icon={icon} />
+        <Text type="h2" className="dashboardBox-stats_count">
+          {value}
+        </Text>
+        <p className="dashboardBox-stats_change">{change === 0 ? 'No change' : `${change}% ${change < 0 ? '↓' : '↑'}`}</p>
+      </div>
+      <Text type="help" style={{ opacity }}>
+        Compared to {prevText}
+      </Text>
+      {viewGraphLink && (
+        <Link to={`${viewGraphLink}&title=${title}`}>
+          <Text type="h5-noUpper" className="text-link marginTop-10">
+            <FontAwesomeIcon icon={faChartLine} style={{ marginRight: 4 }} />
+            View Graph
+          </Text>
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export { StatBox };

package/src/components/index.js

@@ -40,4 +40,5 @@ export * from './MakerPopup';
 export * from './ExportCsvPopup';
 export * from './InputGroup';
 export * from './ColourPicker';
+export * from './StatBox';
 export * from './Tabs';