@plusscommunities/pluss-core-web 1.6.19-beta.0 → 1.6.19-beta.2

package/dist/index.cjs.js

@@ -24,6 +24,7 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var reactColor = require('react-color');
 var tinycolor = require('tinycolor2');
 var reactRouterDom = require('react-router-dom');
+var recharts = require('recharts');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -357,25 +358,25 @@ var session = /*#__PURE__*/Object.freeze({
 });
 
 // Distinct colour palette for multi-site comparison charts
-const SITE_COLOURS = ['#5e9efc',
+const SITE_COLOURS = ["#5e9efc",
 // Blue
-'#49bdbb',
+"#49bdbb",
 // Teal
-'#ff8c75',
+"#ff8c75",
 // Tangerine
-'#6e79c5',
+"#6e79c5",
 // Purple
-'#00cc9c',
+"#00cc9c",
 // Green
-'#c02743',
+"#c02743",
 // Red
-'#bdbd27',
+"#bdbd27",
 // Citron
-'#191e78',
+"#191e78",
 // Dark Blue
-'#ff6363',
+"#ff6363",
 // Grapefruit
-'#536280' // Dusk
+"#536280" // Dusk
 ];
 const getSiteColour = index => {
   return SITE_COLOURS[index % SITE_COLOURS.length];
@@ -443,33 +444,33 @@ const getInsight = (stats, previousStats, source, key, activity) => {
 };
 const getAnalyticsFilterOptions = () => {
   return [{
-    text: 'Yesterday',
+    text: "Yesterday",
     dayCount: 1,
-    prevText: 'day before'
+    prevText: "day before"
   }, {
-    text: 'Last 7 days',
+    text: "Last 7 days",
     dayCount: 7,
-    prevText: 'previous 7 days'
+    prevText: "previous 7 days"
   }, {
-    text: 'Last 14 days',
+    text: "Last 14 days",
     dayCount: 14,
-    prevText: 'previous 14 days'
+    prevText: "previous 14 days"
   }, {
-    text: 'Last 30 days',
+    text: "Last 30 days",
     dayCount: 30,
-    prevText: 'previous 30 days'
+    prevText: "previous 30 days"
   }, {
-    text: 'Last 90 days',
+    text: "Last 90 days",
     dayCount: 90,
-    prevText: 'previous 90 days'
+    prevText: "previous 90 days"
   }, {
-    text: 'Last 365 days',
+    text: "Last 365 days",
     dayCount: 365,
-    prevText: 'previous 365 days'
+    prevText: "previous 365 days"
   }, {
-    text: 'Custom Range',
+    text: "Custom Range",
     dayCount: 0,
-    prevText: 'previous * days'
+    prevText: "previous * days"
   }];
 };
 const countActivities = (data, activityKey, countType) => {
@@ -480,19 +481,19 @@ const countActivities = (data, activityKey, countType) => {
     for (const entity in stats) {
       const entityStats = stats[entity];
       switch (countType) {
-        case 'unique':
+        case "unique":
           if (entityStats[activityKey]) {
             set.add(entity);
           }
           break;
-        case 'uniquearray':
+        case "uniquearray":
           if (entityStats[activityKey]) {
             ___default["default"].values(entityStats[activityKey]).forEach(value => {
               set.add(value);
             });
           }
           break;
-        case 'total':
+        case "total":
           if (entityStats[activityKey]) {
             count += entityStats[activityKey];
           }
@@ -501,23 +502,23 @@ const countActivities = (data, activityKey, countType) => {
     }
   });
   switch (countType) {
-    case 'unique':
-    case 'uniquearray':
+    case "unique":
+    case "uniquearray":
       console.log(countType, set);
       return set.size;
-    case 'total':
+    case "total":
       return count;
     default:
       return 0;
   }
 };
 const generateDateRangeObjects = function (startTime, endTime) {
-  let groupBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'day';
+  let groupBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "day";
   const startDate = moment__default["default"](startTime);
   const endDate = moment__default["default"](endTime);
   const dates = {};
   while (startDate.isSameOrBefore(endDate)) {
-    const dateString = startDate.format('DD-MM-YYYY');
+    const dateString = startDate.format("DD-MM-YYYY");
     dates[dateString] = {
       Date: dateString,
       Timestamp: startDate.valueOf(),
@@ -528,28 +529,28 @@ const generateDateRangeObjects = function (startTime, endTime) {
   return dates;
 };
 const generateDateActivities = function (data, activityKey, countType, startTime, endTime) {
-  let groupBy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'day';
+  let groupBy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "day";
   const dates = generateDateRangeObjects(startTime, endTime, groupBy);
   const result = [];
-  let formatToUse = 'DD-MM-YYYY';
-  let labelFormat = 'D MMM';
+  let formatToUse = "DD-MM-YYYY";
+  let labelFormat = "D MMM";
   switch (groupBy) {
-    case 'month':
-      formatToUse = 'MM-YYYY';
-      labelFormat = 'MMMM';
+    case "month":
+      formatToUse = "MM-YYYY";
+      labelFormat = "MMMM";
       break;
-    case 'week':
-      formatToUse = 'w-gggg';
-      labelFormat = '[Week of] D MMM';
+    case "week":
+      formatToUse = "w-gggg";
+      labelFormat = "[Week of] D MMM";
       break;
   }
   Object.keys(dates).forEach(d => {
     const datesToUse = ___default["default"].filter(data, date => {
-      return moment__default["default"](date.Date, 'DD-MM-YYYY').format(formatToUse) === moment__default["default"](d, 'DD-MM-YYYY').format(formatToUse);
+      return moment__default["default"](date.Date, "DD-MM-YYYY").format(formatToUse) === moment__default["default"](d, "DD-MM-YYYY").format(formatToUse);
     }) || [dates[d]];
     const compiledValue = {
       date: d,
-      label: moment__default["default"](d, 'DD-MM-YYYY').format(labelFormat),
+      label: moment__default["default"](d, "DD-MM-YYYY").format(labelFormat),
       value: countActivities(datesToUse, activityKey, countType)
     };
     result.push(compiledValue);
@@ -1201,8 +1202,8 @@ const addRecentlyCreated = feature => {
 const analyticsActions = {
   log: (site, actionType, entityType, entityId, data) => {
     return authedFunction({
-      method: 'POST',
-      url: getUrl('analytics', 'log'),
+      method: "POST",
+      url: getUrl("analytics", "log"),
       data: {
         site,
         actionType,
@@ -1214,8 +1215,8 @@ const analyticsActions = {
   },
   getEntityStats: (entityId, entityType) => {
     return authedFunction({
-      method: 'GET',
-      url: getUrl('analytics', 'getentity', {
+      method: "GET",
+      url: getUrl("analytics", "getentity", {
         entityId,
         entityType
       })
@@ -1240,14 +1241,14 @@ const analyticsActions = {
     if (userType) query.userType = userType;
     if (userCategory) query.userCategory = userCategory;
     return authedFunction({
-      method: 'GET',
-      url: getUrl('analytics', 'activity', query)
+      method: "GET",
+      url: getUrl("analytics", "activity", query)
     });
   },
   getAggregateUserStats: site => {
     return authedFunction({
-      method: 'GET',
-      url: getUrl('analytics', 'users', {
+      method: "GET",
+      url: getUrl("analytics", "users", {
         site
       })
     });
@@ -1267,8 +1268,8 @@ const analyticsActions = {
     if (userType) query.userType = userType;
     if (userCategory) query.userCategory = userCategory;
     return authedFunction({
-      method: 'GET',
-      url: getUrl('analytics', 'aggregate', query)
+      method: "GET",
+      url: getUrl("analytics", "aggregate", query)
     });
   },
   getUserRetention: function (site) {
@@ -1282,8 +1283,8 @@ const analyticsActions = {
     if (userType) query.userType = userType;
     if (userCategory) query.userCategory = userCategory;
     return authedFunction({
-      method: 'GET',
-      url: getUrl('analytics', 'get/userretention', query)
+      method: "GET",
+      url: getUrl("analytics", "get/userretention", query)
     });
   }
 };
@@ -9019,6 +9020,108 @@ class ColourPicker extends React.Component {
   }
 }
 
+const BAR_HEIGHT = 36;
+const CHART_PADDING = 20;
+const ComparisonStatBox = _ref => {
+  let {
+    title,
+    icon,
+    data,
+    previousValue,
+    prevText,
+    viewGraphLink,
+    isLoading
+  } = _ref;
+  const total = data.reduce((sum, d) => sum + (d.value || 0), 0);
+  let change = (total / previousValue - 1) * 100;
+  if (isNaN(change)) {
+    change = 0;
+  }
+  if (!isFinite(change)) {
+    change = 100;
+  }
+  change = parseInt(change);
+  const chartHeight = data.length * BAR_HEIGHT + CHART_PADDING;
+  const maxLabelLength = data.reduce((max, d) => Math.max(max, d.name.length), 0);
+  const yAxisWidth = Math.min(Math.max(maxLabelLength * 7, 80), 160);
+  const 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' : ''),
+    style: {
+      width: 'auto',
+      minWidth: 300
+    }
+  }, /*#__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
+    }
+  }, icon && /*#__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"
+  }, total), /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "dashboardBox-stats_change"
+  }, change === 0 ? 'No change' : change + '% ' + (change < 0 ? '↓' : '↑'))), /*#__PURE__*/React__default["default"].createElement(Text, {
+    type: "help",
+    style: {
+      opacity
+    }
+  }, "Compared to ", prevText), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      opacity,
+      marginTop: 12,
+      marginLeft: -8
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
+    width: "100%",
+    height: chartHeight
+  }, /*#__PURE__*/React__default["default"].createElement(recharts.BarChart, {
+    data: data,
+    layout: "vertical",
+    margin: {
+      top: 4,
+      right: 12,
+      bottom: 0,
+      left: 0
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(recharts.XAxis, {
+    type: "number",
+    hide: true
+  }), /*#__PURE__*/React__default["default"].createElement(recharts.YAxis, {
+    type: "category",
+    dataKey: "name",
+    width: yAxisWidth,
+    tick: {
+      fontSize: 12
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, {
+    formatter: value => [value, title]
+  }), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
+    dataKey: "value",
+    radius: [0, 4, 4, 0]
+  }, data.map((entry, index) => /*#__PURE__*/React__default["default"].createElement(recharts.Cell, {
+    key: entry.name,
+    fill: getSiteColour(index)
+  })))))), viewGraphLink && /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
+    to: viewGraphLink + '&title=' + 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")));
+};
+
 // StatBox Component
 const StatBox = _ref => {
   let {
@@ -9120,6 +9223,7 @@ var index = /*#__PURE__*/Object.freeze({
   InputGroup: InputGroup,
   ColourOptions: ColourOptions,
   ColourPicker: ColourPicker,
+  ComparisonStatBox: ComparisonStatBox,
   StatBox: StatBox,
   Tabs: Tabs
 });