@plusscommunities/pluss-core-web 1.4.19 → 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 }; }
 
@@ -549,6 +552,10 @@ var getAnalyticsFilterOptions = function getAnalyticsFilterOptions() {
     text: 'Last 90 days',
     dayCount: 90,
     prevText: 'previous 90 days'
+  }, {
+    text: 'Last 365 days',
+    dayCount: 365,
+    prevText: 'previous 365 days'
   }, {
     text: 'Custom Range',
     dayCount: 0,
@@ -572,6 +579,15 @@ var countActivities = function countActivities(data, activityKey, countType) {
 
           break;
 
+        case 'uniquearray':
+          if (entityStats[activityKey]) {
+            ___default['default'].values(entityStats[activityKey]).forEach(function (value) {
+              set.add(value);
+            });
+          }
+
+          break;
+
         case 'total':
           if (entityStats[activityKey]) {
             count += entityStats[activityKey];
@@ -584,6 +600,8 @@ var countActivities = function countActivities(data, activityKey, countType) {
 
   switch (countType) {
     case 'unique':
+    case 'uniquearray':
+      console.log(countType, set);
       return set.size;
 
     case 'total':
@@ -594,6 +612,7 @@ var countActivities = function countActivities(data, activityKey, countType) {
   }
 };
 var generateDateRangeObjects = function generateDateRangeObjects(startTime, endTime) {
+  var groupBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'day';
   var startDate = moment__default['default'](startTime);
   var endDate = moment__default['default'](endTime);
   var dates = {};
@@ -605,24 +624,42 @@ var generateDateRangeObjects = function generateDateRangeObjects(startTime, endT
       Timestamp: startDate.valueOf(),
       Stats: {}
     };
-    startDate.add(1, 'days');
+    startDate.add(1, groupBy);
   }
 
   return dates;
 };
 var generateDateActivities = function generateDateActivities(data, activityKey, countType, startTime, endTime) {
-  var dates = generateDateRangeObjects(startTime, endTime);
+  var groupBy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'day';
+  var dates = generateDateRangeObjects(startTime, endTime, groupBy);
   var result = [];
+  var formatToUse = 'DD-MM-YYYY';
+  var labelFormat = 'D MMM';
+
+  switch (groupBy) {
+    case 'month':
+      formatToUse = 'MM-YYYY';
+      labelFormat = 'MMMM';
+      break;
+
+    case 'week':
+      formatToUse = 'w-gggg';
+      labelFormat = '[Week of] D MMM';
+      break;
+  }
+
   Object.keys(dates).forEach(function (d) {
-    var dateToUse = ___default['default'].find(data, function (date) {
-      return date.Date === d;
-    }) || dates[d];
+    var datesToUse = ___default['default'].filter(data, function (date) {
+      return moment__default['default'](date.Date, 'DD-MM-YYYY').format(formatToUse) === moment__default['default'](d, 'DD-MM-YYYY').format(formatToUse);
+    }) || [dates[d]];
     var compiledValue = {
       date: d,
-      value: countActivities([dateToUse], activityKey, countType)
+      label: moment__default['default'](d, 'DD-MM-YYYY').format(labelFormat),
+      value: countActivities(datesToUse, activityKey, countType)
     };
     result.push(compiledValue);
   });
+  console.log(result);
   return result;
 };
 
@@ -8690,7 +8727,7 @@ var AnalyticsFilter = /*#__PURE__*/function (_PureComponent) {
   _createClass__default['default'](AnalyticsFilter, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "analyticsFilter__dropDown"
       }, /*#__PURE__*/React__default['default'].createElement(reactBootstrap.DropdownButton, {
         id: "secondLevelSort",
@@ -11513,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,
@@ -11555,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: {
@@ -519,6 +522,10 @@ var getAnalyticsFilterOptions = function getAnalyticsFilterOptions() {
     text: 'Last 90 days',
     dayCount: 90,
     prevText: 'previous 90 days'
+  }, {
+    text: 'Last 365 days',
+    dayCount: 365,
+    prevText: 'previous 365 days'
   }, {
     text: 'Custom Range',
     dayCount: 0,
@@ -542,6 +549,15 @@ var countActivities = function countActivities(data, activityKey, countType) {
 
           break;
 
+        case 'uniquearray':
+          if (entityStats[activityKey]) {
+            _.values(entityStats[activityKey]).forEach(function (value) {
+              set.add(value);
+            });
+          }
+
+          break;
+
         case 'total':
           if (entityStats[activityKey]) {
             count += entityStats[activityKey];
@@ -554,6 +570,8 @@ var countActivities = function countActivities(data, activityKey, countType) {
 
   switch (countType) {
     case 'unique':
+    case 'uniquearray':
+      console.log(countType, set);
       return set.size;
 
     case 'total':
@@ -564,6 +582,7 @@ var countActivities = function countActivities(data, activityKey, countType) {
   }
 };
 var generateDateRangeObjects = function generateDateRangeObjects(startTime, endTime) {
+  var groupBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'day';
   var startDate = moment(startTime);
   var endDate = moment(endTime);
   var dates = {};
@@ -575,24 +594,42 @@ var generateDateRangeObjects = function generateDateRangeObjects(startTime, endT
       Timestamp: startDate.valueOf(),
       Stats: {}
     };
-    startDate.add(1, 'days');
+    startDate.add(1, groupBy);
   }
 
   return dates;
 };
 var generateDateActivities = function generateDateActivities(data, activityKey, countType, startTime, endTime) {
-  var dates = generateDateRangeObjects(startTime, endTime);
+  var groupBy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'day';
+  var dates = generateDateRangeObjects(startTime, endTime, groupBy);
   var result = [];
+  var formatToUse = 'DD-MM-YYYY';
+  var labelFormat = 'D MMM';
+
+  switch (groupBy) {
+    case 'month':
+      formatToUse = 'MM-YYYY';
+      labelFormat = 'MMMM';
+      break;
+
+    case 'week':
+      formatToUse = 'w-gggg';
+      labelFormat = '[Week of] D MMM';
+      break;
+  }
+
   Object.keys(dates).forEach(function (d) {
-    var dateToUse = _.find(data, function (date) {
-      return date.Date === d;
-    }) || dates[d];
+    var datesToUse = _.filter(data, function (date) {
+      return moment(date.Date, 'DD-MM-YYYY').format(formatToUse) === moment(d, 'DD-MM-YYYY').format(formatToUse);
+    }) || [dates[d]];
     var compiledValue = {
       date: d,
-      value: countActivities([dateToUse], activityKey, countType)
+      label: moment(d, 'DD-MM-YYYY').format(labelFormat),
+      value: countActivities(datesToUse, activityKey, countType)
     };
     result.push(compiledValue);
   });
+  console.log(result);
   return result;
 };
 
@@ -8660,7 +8697,7 @@ var AnalyticsFilter = /*#__PURE__*/function (_PureComponent) {
   _createClass(AnalyticsFilter, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "analyticsFilter__dropDown"
       }, /*#__PURE__*/React.createElement(DropdownButton, {
         id: "secondLevelSort",
@@ -11483,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,
@@ -11525,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 }; }
 
@@ -520,6 +520,10 @@
       text: 'Last 90 days',
       dayCount: 90,
       prevText: 'previous 90 days'
+    }, {
+      text: 'Last 365 days',
+      dayCount: 365,
+      prevText: 'previous 365 days'
     }, {
       text: 'Custom Range',
       dayCount: 0,
@@ -543,6 +547,15 @@
 
             break;
 
+          case 'uniquearray':
+            if (entityStats[activityKey]) {
+              ___default['default'].values(entityStats[activityKey]).forEach(function (value) {
+                set.add(value);
+              });
+            }
+
+            break;
+
           case 'total':
             if (entityStats[activityKey]) {
               count += entityStats[activityKey];
@@ -555,6 +568,8 @@
 
     switch (countType) {
       case 'unique':
+      case 'uniquearray':
+        console.log(countType, set);
         return set.size;
 
       case 'total':
@@ -565,6 +580,7 @@
     }
   };
   var generateDateRangeObjects = function generateDateRangeObjects(startTime, endTime) {
+    var groupBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'day';
     var startDate = moment__default['default'](startTime);
     var endDate = moment__default['default'](endTime);
     var dates = {};
@@ -576,24 +592,42 @@
         Timestamp: startDate.valueOf(),
         Stats: {}
       };
-      startDate.add(1, 'days');
+      startDate.add(1, groupBy);
     }
 
     return dates;
   };
   var generateDateActivities = function generateDateActivities(data, activityKey, countType, startTime, endTime) {
-    var dates = generateDateRangeObjects(startTime, endTime);
+    var groupBy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'day';
+    var dates = generateDateRangeObjects(startTime, endTime, groupBy);
     var result = [];
+    var formatToUse = 'DD-MM-YYYY';
+    var labelFormat = 'D MMM';
+
+    switch (groupBy) {
+      case 'month':
+        formatToUse = 'MM-YYYY';
+        labelFormat = 'MMMM';
+        break;
+
+      case 'week':
+        formatToUse = 'w-gggg';
+        labelFormat = '[Week of] D MMM';
+        break;
+    }
+
     Object.keys(dates).forEach(function (d) {
-      var dateToUse = ___default['default'].find(data, function (date) {
-        return date.Date === d;
-      }) || dates[d];
+      var datesToUse = ___default['default'].filter(data, function (date) {
+        return moment__default['default'](date.Date, 'DD-MM-YYYY').format(formatToUse) === moment__default['default'](d, 'DD-MM-YYYY').format(formatToUse);
+      }) || [dates[d]];
       var compiledValue = {
         date: d,
-        value: countActivities([dateToUse], activityKey, countType)
+        label: moment__default['default'](d, 'DD-MM-YYYY').format(labelFormat),
+        value: countActivities(datesToUse, activityKey, countType)
       };
       result.push(compiledValue);
     });
+    console.log(result);
     return result;
   };
 
@@ -8661,7 +8695,7 @@
     _createClass__default['default'](AnalyticsFilter, [{
       key: "render",
       value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "analyticsFilter__dropDown"
         }, /*#__PURE__*/React__default['default'].createElement(reactBootstrap.DropdownButton, {
           id: "secondLevelSort",
@@ -11484,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,
@@ -11526,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.19",
+  "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/analytics.js

@@ -70,6 +70,11 @@ export const getAnalyticsFilterOptions = () => {
       dayCount: 90,
       prevText: 'previous 90 days',
     },
+    {
+      text: 'Last 365 days',
+      dayCount: 365,
+      prevText: 'previous 365 days',
+    },
     {
       text: 'Custom Range',
       dayCount: 0,
@@ -94,6 +99,13 @@ export const countActivities = (data, activityKey, countType) => {
             set.add(entity);
           }
           break;
+        case 'uniquearray':
+          if (entityStats[activityKey]) {
+            _.values(entityStats[activityKey]).forEach((value) => {
+              set.add(value);
+            });
+          }
+          break;
         case 'total':
           if (entityStats[activityKey]) {
             count += entityStats[activityKey];
@@ -107,6 +119,8 @@ export const countActivities = (data, activityKey, countType) => {
 
   switch (countType) {
     case 'unique':
+    case 'uniquearray':
+      console.log(countType, set);
       return set.size;
     case 'total':
       return count;
@@ -115,7 +129,7 @@ export const countActivities = (data, activityKey, countType) => {
   }
 };
 
-export const generateDateRangeObjects = (startTime, endTime) => {
+export const generateDateRangeObjects = (startTime, endTime, groupBy = 'day') => {
   const startDate = moment(startTime);
   const endDate = moment(endTime);
   const dates = {};
@@ -127,22 +141,43 @@ export const generateDateRangeObjects = (startTime, endTime) => {
       Timestamp: startDate.valueOf(),
       Stats: {},
     };
-    startDate.add(1, 'days');
+    startDate.add(1, groupBy);
   }
 
   return dates;
 };
 
-export const generateDateActivities = (data, activityKey, countType, startTime, endTime) => {
-  const dates = generateDateRangeObjects(startTime, endTime);
+export const generateDateActivities = (data, activityKey, countType, startTime, endTime, groupBy = 'day') => {
+  const dates = generateDateRangeObjects(startTime, endTime, groupBy);
 
   const result = [];
+  let formatToUse = 'DD-MM-YYYY';
+  let labelFormat = 'D MMM';
+  switch (groupBy) {
+    case 'month':
+      formatToUse = 'MM-YYYY';
+      labelFormat = 'MMMM';
+      break;
+    case 'week':
+      formatToUse = 'w-gggg';
+      labelFormat = '[Week of] D MMM';
+      break;
+    default:
+      break;
+  }
 
   Object.keys(dates).forEach((d) => {
-    const dateToUse = _.find(data, (date) => date.Date === d) || dates[d];
-    const compiledValue = { date: d, value: countActivities([dateToUse], activityKey, countType) };
+    const datesToUse = _.filter(data, (date) => {
+      return moment(date.Date, 'DD-MM-YYYY').format(formatToUse) === moment(d, 'DD-MM-YYYY').format(formatToUse);
+    }) || [dates[d]];
+    const compiledValue = {
+      date: d,
+      label: moment(d, 'DD-MM-YYYY').format(labelFormat),
+      value: countActivities(datesToUse, activityKey, countType),
+    };
 
     result.push(compiledValue);
   });
+  console.log(result);
   return result;
 };

package/src/components/AnalyticsFilter.js

@@ -78,7 +78,7 @@ class AnalyticsFilter extends PureComponent {
 
   render() {
     return (
-      <div>
+      <>
         <div className="analyticsFilter__dropDown">
           <DropdownButton
             id="secondLevelSort"
@@ -106,7 +106,7 @@ class AnalyticsFilter extends PureComponent {
             <DatePicker hideTop selectedDate={this.state.endDate} selectDate={this.endDateChanged} />
           </div>
         )}
-      </div>
+      </>
     );
   }
 }

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';