box-ui-elements 16.0.0-beta.8 → 16.0.0

package/es/features/content-insights/MetricSummary.js

@@ -0,0 +1,85 @@
+var _METRIC_MAP;
+
+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; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+import * as React from 'react';
+import isFinite from 'lodash/isFinite';
+import isNaN from 'lodash/isNaN';
+import { injectIntl } from 'react-intl';
+import HeaderWithCount from './HeaderWithCount';
+import messages from './messages';
+import TrendPill from './TrendPill';
+import { formatCount } from './numberUtils';
+import { METRIC } from './constants';
+import './MetricSummary.scss';
+var METRIC_MAP = (_METRIC_MAP = {}, _defineProperty(_METRIC_MAP, METRIC.PREVIEWS, {
+  headerMessage: messages.previewGraphType,
+  getPeriodCount: function getPeriodCount(data) {
+    return data.reduce(function (count, _ref) {
+      var previewsCount = _ref.previewsCount;
+      return count + previewsCount;
+    }, 0);
+  }
+}), _defineProperty(_METRIC_MAP, METRIC.DOWNLOADS, {
+  getPeriodCount: function getPeriodCount(data) {
+    return data.reduce(function (count, _ref2) {
+      var downloadsCount = _ref2.downloadsCount;
+      return count + downloadsCount;
+    }, 0);
+  },
+  headerMessage: messages.downloadGraphType
+}), _defineProperty(_METRIC_MAP, METRIC.USERS, {
+  getPeriodCount: function getPeriodCount(data) {
+    var periodUsers = data.reduce(function (totalUsers, _ref3) {
+      var users = _ref3.users;
+      return new Set([].concat(_toConsumableArray(Array.from(totalUsers)), _toConsumableArray(Array.from(users))));
+    }, new Set());
+    return periodUsers.size;
+  },
+  headerMessage: messages.peopleTitle
+}), _METRIC_MAP); // Limit the trend to a finite number (in case the previous period count was 0 and the calculated trend is Infinity)
+
+var formatTrend = function formatTrend(calculatedTrend) {
+  return !isFinite(calculatedTrend) ? 1 : calculatedTrend;
+};
+
+function MetricSummary(_ref4) {
+  var _ref4$data = _ref4.data,
+      data = _ref4$data === void 0 ? [] : _ref4$data,
+      intl = _ref4.intl,
+      metric = _ref4.metric,
+      period = _ref4.period,
+      _ref4$previousPeriodC = _ref4.previousPeriodCount,
+      previousPeriodCount = _ref4$previousPeriodC === void 0 ? 0 : _ref4$previousPeriodC,
+      totalCount = _ref4.totalCount;
+  var _METRIC_MAP$metric = METRIC_MAP[metric],
+      getPeriodCount = _METRIC_MAP$metric.getPeriodCount,
+      headerMessage = _METRIC_MAP$metric.headerMessage;
+  var periodCount = getPeriodCount(data);
+  var calculatedTrend = (periodCount - previousPeriodCount) / previousPeriodCount;
+  var trend = isNaN(calculatedTrend) ? 0 : formatTrend(calculatedTrend);
+  return React.createElement("div", {
+    className: "MetricSummary"
+  }, React.createElement(HeaderWithCount, {
+    title: intl.formatMessage(headerMessage),
+    totalCount: totalCount
+  }), React.createElement("div", {
+    className: "MetricSummary-period"
+  }, React.createElement("span", {
+    className: "MetricSummary-periodCount"
+  }, formatCount(periodCount, intl)), React.createElement(TrendPill, {
+    period: period,
+    trend: trend
+  })));
+}
+
+export default injectIntl(MetricSummary);
+//# sourceMappingURL=MetricSummary.js.map

package/es/features/content-insights/MetricSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-insights/MetricSummary.tsx"],"names":["React","isFinite","isNaN","injectIntl","HeaderWithCount","messages","TrendPill","formatCount","METRIC","METRIC_MAP","PREVIEWS","headerMessage","previewGraphType","getPeriodCount","data","reduce","count","previewsCount","DOWNLOADS","downloadsCount","downloadGraphType","USERS","periodUsers","totalUsers","users","Set","Array","from","size","peopleTitle","formatTrend","calculatedTrend","MetricSummary","intl","metric","period","previousPeriodCount","totalCount","periodCount","trend","formatMessage"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport isFinite from 'lodash/isFinite';\nimport isNaN from 'lodash/isNaN';\nimport { injectIntl, IntlShape } from 'react-intl';\n\nimport HeaderWithCount from './HeaderWithCount';\nimport messages from './messages';\nimport TrendPill from './TrendPill';\nimport { formatCount } from './numberUtils';\nimport { METRIC } from './constants';\nimport { GraphData, Metric, Period } from './types';\n\nimport './MetricSummary.scss';\n\ninterface Props {\n    data: GraphData;\n    intl: IntlShape;\n    metric: Metric;\n    period: Period;\n    previousPeriodCount: number;\n    totalCount?: number;\n}\n\nconst METRIC_MAP = {\n    [METRIC.PREVIEWS]: {\n        headerMessage: messages.previewGraphType,\n        getPeriodCount: (data: GraphData) => data.reduce((count, { previewsCount }) => count + previewsCount, 0),\n    },\n    [METRIC.DOWNLOADS]: {\n        getPeriodCount: (data: GraphData) => data.reduce((count, { downloadsCount }) => count + downloadsCount, 0),\n        headerMessage: messages.downloadGraphType,\n    },\n    [METRIC.USERS]: {\n        getPeriodCount: (data: GraphData) => {\n            const periodUsers = data.reduce(\n                (totalUsers, { users }) => new Set([...Array.from(totalUsers), ...Array.from(users)]),\n                new Set(),\n            );\n            return periodUsers.size;\n        },\n        headerMessage: messages.peopleTitle,\n    },\n} as const;\n\n// Limit the trend to a finite number (in case the previous period count was 0 and the calculated trend is Infinity)\nconst formatTrend = (calculatedTrend: number) => (!isFinite(calculatedTrend) ? 1 : calculatedTrend);\n\nfunction MetricSummary({ data = [], intl, metric, period, previousPeriodCount = 0, totalCount }: Props) {\n    const { getPeriodCount, headerMessage } = METRIC_MAP[metric];\n    const periodCount = getPeriodCount(data);\n    const calculatedTrend = (periodCount - previousPeriodCount) / previousPeriodCount;\n    const trend = isNaN(calculatedTrend) ? 0 : formatTrend(calculatedTrend);\n\n    return (\n        <div className=\"MetricSummary\">\n            <HeaderWithCount title={intl.formatMessage(headerMessage)} totalCount={totalCount} />\n            <div className=\"MetricSummary-period\">\n                <span className=\"MetricSummary-periodCount\">{formatCount(periodCount, intl)}</span>\n                <TrendPill period={period} trend={trend} />\n            </div>\n        </div>\n    );\n}\n\nexport default injectIntl(MetricSummary);\n"],"file":"MetricSummary.js"}

package/es/features/content-insights/MetricSummary.scss

@@ -0,0 +1,14 @@
+@import '../../styles/variables';
+
+.MetricSummary-periodCount {
+    font-size: 21px;
+}
+
+.MetricSummary-period {
+    display: flex;
+    margin-top: $bdl-grid-unit * 1.5;
+
+    .MetricSummary-periodCount {
+        margin-right: $bdl-grid-unit * 2;
+    }
+}

package/es/features/content-insights/OpenContentInsightsButton.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Button, { ButtonType } from '../../components/button';
+import messages from './messages';
+
+var OpenContentInsightsButton = function OpenContentInsightsButton(_ref) {
+  var onClick = _ref.onClick;
+  return React.createElement(Button, {
+    className: "OpenContentInsightsButton",
+    onClick: onClick,
+    type: ButtonType.BUTTON
+  }, React.createElement(FormattedMessage, messages.openContentInsightsButton));
+};
+
+export default OpenContentInsightsButton;
+//# sourceMappingURL=OpenContentInsightsButton.js.map

package/es/features/content-insights/OpenContentInsightsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-insights/OpenContentInsightsButton.tsx"],"names":["React","FormattedMessage","Button","ButtonType","messages","OpenContentInsightsButton","onClick","BUTTON","openContentInsightsButton"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AAEA,OAAOC,MAAP,IAAiBC,UAAjB,QAAmC,yBAAnC;AAEA,OAAOC,QAAP,MAAqB,YAArB;;AAMA,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B,OAAwB;AAAA,MAArBC,OAAqB,QAArBA,OAAqB;AACtD,SACI,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC,2BAAlB;AAA8C,IAAA,OAAO,EAAEA,OAAvD;AAAgE,IAAA,IAAI,EAAEH,UAAU,CAACI;AAAjF,KACI,oBAAC,gBAAD,EAAsBH,QAAQ,CAACI,yBAA/B,CADJ,CADJ;AAKH,CAND;;AAQA,eAAeH,yBAAf","sourcesContent":["import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport Button, { ButtonType } from '../../components/button';\n\nimport messages from './messages';\n\ninterface Props {\n    onClick: () => void;\n}\n\nconst OpenContentInsightsButton = ({ onClick }: Props) => {\n    return (\n        <Button className=\"OpenContentInsightsButton\" onClick={onClick} type={ButtonType.BUTTON}>\n            <FormattedMessage {...messages.openContentInsightsButton} />\n        </Button>\n    );\n};\n\nexport default OpenContentInsightsButton;\n"],"file":"OpenContentInsightsButton.js"}

package/es/features/content-insights/TrendPill.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import LabelPill from '../../components/label-pill';
+import messages from './messages';
+import './TrendPill.scss';
+
+var getTrendStatus = function getTrendStatus(trend) {
+  if (trend === 0) {
+    return 'neutral';
+  }
+
+  return trend > 0 ? 'up' : 'down';
+};
+
+var getTrendByPeriod = function getTrendByPeriod(period) {
+  switch (period) {
+    case 'month':
+      return messages.trendMonth;
+
+    case 'threemonths':
+      return messages.trendThreeMonths;
+
+    case 'year':
+      return messages.trendYear;
+
+    case 'week':
+    default:
+      return messages.trendWeek;
+  }
+};
+
+function TrendPill(_ref) {
+  var intl = _ref.intl,
+      period = _ref.period,
+      trend = _ref.trend;
+
+  var getTrendLabel = function getTrendLabel(value) {
+    return intl.formatMessage(value > 0 ? messages.trendUp : messages.trendDown);
+  };
+
+  var trendStatus = getTrendStatus(trend);
+  var trendLabel = getTrendLabel(trend);
+  return React.createElement(LabelPill.Pill, {
+    className: classNames('TrendPill', {
+      'TrendPill--up': trendStatus === 'up',
+      'TrendPill--down': trendStatus === 'down'
+    })
+  }, React.createElement(React.Fragment, null, trendStatus !== 'neutral' && React.createElement("span", {
+    "aria-label": trendLabel,
+    className: "TrendPill-trend",
+    role: "img"
+  }), React.createElement(LabelPill.Text, null, React.createElement(React.Fragment, null, React.createElement("span", {
+    className: "TrendPill-percentage"
+  }, intl.formatNumber(trend, {
+    style: 'percent'
+  })), React.createElement(FormattedMessage, getTrendByPeriod(period))))));
+}
+
+export default injectIntl(TrendPill);
+//# sourceMappingURL=TrendPill.js.map

package/es/features/content-insights/TrendPill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-insights/TrendPill.tsx"],"names":["React","classNames","FormattedMessage","injectIntl","LabelPill","messages","getTrendStatus","trend","getTrendByPeriod","period","trendMonth","trendThreeMonths","trendYear","trendWeek","TrendPill","intl","getTrendLabel","value","formatMessage","trendUp","trendDown","trendStatus","trendLabel","formatNumber","style"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,gBAAT,EAA2BC,UAA3B,QAAwD,YAAxD;AAEA,OAAOC,SAAP,MAAsB,6BAAtB;AACA,OAAOC,QAAP,MAAqB,YAArB;AAIA,OAAO,kBAAP;;AAUA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAA0B;AAC7C,MAAIA,KAAK,KAAK,CAAd,EAAiB;AACb,WAAO,SAAP;AACH;;AAED,SAAOA,KAAK,GAAG,CAAR,GAAY,IAAZ,GAAmB,MAA1B;AACH,CAND;;AAQA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,MAAD,EAAoB;AACzC,UAAQA,MAAR;AACI,SAAK,OAAL;AACI,aAAOJ,QAAQ,CAACK,UAAhB;;AACJ,SAAK,aAAL;AACI,aAAOL,QAAQ,CAACM,gBAAhB;;AACJ,SAAK,MAAL;AACI,aAAON,QAAQ,CAACO,SAAhB;;AACJ,SAAK,MAAL;AACA;AACI,aAAOP,QAAQ,CAACQ,SAAhB;AATR;AAWH,CAZD;;AAcA,SAASC,SAAT,OAAmD;AAAA,MAA9BC,IAA8B,QAA9BA,IAA8B;AAAA,MAAxBN,MAAwB,QAAxBA,MAAwB;AAAA,MAAhBF,KAAgB,QAAhBA,KAAgB;;AAC/C,MAAMS,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA2B;AAC7C,WAAOF,IAAI,CAACG,aAAL,CAAmBD,KAAK,GAAG,CAAR,GAAYZ,QAAQ,CAACc,OAArB,GAA+Bd,QAAQ,CAACe,SAA3D,CAAP;AACH,GAFD;;AAIA,MAAMC,WAAW,GAAGf,cAAc,CAACC,KAAD,CAAlC;AACA,MAAMe,UAAU,GAAGN,aAAa,CAACT,KAAD,CAAhC;AAEA,SACI,oBAAC,SAAD,CAAW,IAAX;AACI,IAAA,SAAS,EAAEN,UAAU,CAAC,WAAD,EAAc;AAC/B,uBAAiBoB,WAAW,KAAK,IADF;AAE/B,yBAAmBA,WAAW,KAAK;AAFJ,KAAd;AADzB,KAMI,0CACKA,WAAW,KAAK,SAAhB,IAA6B;AAAM,kBAAYC,UAAlB;AAA8B,IAAA,SAAS,EAAC,iBAAxC;AAA0D,IAAA,IAAI,EAAC;AAA/D,IADlC,EAEI,oBAAC,SAAD,CAAW,IAAX,QACI,0CACI;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAwCP,IAAI,CAACQ,YAAL,CAAkBhB,KAAlB,EAAyB;AAAEiB,IAAAA,KAAK,EAAE;AAAT,GAAzB,CAAxC,CADJ,EAEI,oBAAC,gBAAD,EAAsBhB,gBAAgB,CAACC,MAAD,CAAtC,CAFJ,CADJ,CAFJ,CANJ,CADJ;AAkBH;;AAED,eAAeN,UAAU,CAACW,SAAD,CAAzB","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { FormattedMessage, injectIntl, IntlShape } from 'react-intl';\n\nimport LabelPill from '../../components/label-pill';\nimport messages from './messages';\n\nimport { Period } from './types';\n\nimport './TrendPill.scss';\n\ninterface Props {\n    intl: IntlShape;\n    period: Period;\n    trend: number;\n}\n\ntype Trend = 'up' | 'down' | 'neutral';\n\nconst getTrendStatus = (trend: number): Trend => {\n    if (trend === 0) {\n        return 'neutral';\n    }\n\n    return trend > 0 ? 'up' : 'down';\n};\n\nconst getTrendByPeriod = (period: Period) => {\n    switch (period) {\n        case 'month':\n            return messages.trendMonth;\n        case 'threemonths':\n            return messages.trendThreeMonths;\n        case 'year':\n            return messages.trendYear;\n        case 'week':\n        default:\n            return messages.trendWeek;\n    }\n};\n\nfunction TrendPill({ intl, period, trend }: Props) {\n    const getTrendLabel = (value: number): string => {\n        return intl.formatMessage(value > 0 ? messages.trendUp : messages.trendDown);\n    };\n\n    const trendStatus = getTrendStatus(trend);\n    const trendLabel = getTrendLabel(trend);\n\n    return (\n        <LabelPill.Pill\n            className={classNames('TrendPill', {\n                'TrendPill--up': trendStatus === 'up',\n                'TrendPill--down': trendStatus === 'down',\n            })}\n        >\n            <>\n                {trendStatus !== 'neutral' && <span aria-label={trendLabel} className=\"TrendPill-trend\" role=\"img\" />}\n                <LabelPill.Text>\n                    <>\n                        <span className=\"TrendPill-percentage\">{intl.formatNumber(trend, { style: 'percent' })}</span>\n                        <FormattedMessage {...getTrendByPeriod(period)} />\n                    </>\n                </LabelPill.Text>\n            </>\n        </LabelPill.Pill>\n    );\n}\n\nexport default injectIntl(TrendPill);\n"],"file":"TrendPill.js"}

package/es/features/content-insights/TrendPill.scss

@@ -0,0 +1,33 @@
+@import '../../styles/variables';
+
+.TrendPill {
+    display: flex;
+    align-items: center;
+    color: $bdl-gray-80;
+    font-weight: bold;
+    background-color: $bdl-gray-05;
+}
+
+.TrendPill-trend {
+    position: relative;
+    margin-left: $bdl-grid-unit;
+    border: 5px solid transparent;
+}
+
+.TrendPill--up {
+    .TrendPill-trend {
+        bottom: 2px;
+        border-bottom-color: $bdl-green-light;
+    }
+}
+
+.TrendPill--down {
+    .TrendPill-trend {
+        top: 3px;
+        border-top-color: $bdl-watermelon-red;
+    }
+}
+
+.TrendPill-percentage {
+    margin-right: $bdl-grid-unit;
+}

package/es/features/content-insights/_mixins.scss

@@ -0,0 +1,7 @@
+@import '../../styles/variables';
+
+@mixin ContentInsightsHeaderText {
+    color: $bdl-gray-62;
+    font-weight: bold;
+    font-size: $bdl-fontSize-minimum;
+}

package/es/features/content-insights/_variables.scss

@@ -0,0 +1,4 @@
+@import '../../styles/variables';
+
+$ContentInsights-chart-color-previews: linear-gradient($bdl-light-blue, rgba($bdl-light-blue, .7));
+$ContentInsights-chart-height-small: 80px;

package/es/features/content-insights/charts/bar/Bar.js

@@ -0,0 +1,57 @@
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import './Bar.scss';
+var DEFAULT_SIZE = 50;
+
+function Bar(_ref) {
+  var color = _ref.color,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
+      _ref$onMouseEnter = _ref.onMouseEnter,
+      onMouseEnter = _ref$onMouseEnter === void 0 ? noop : _ref$onMouseEnter,
+      _ref$onMouseLeave = _ref.onMouseLeave,
+      onMouseLeave = _ref$onMouseLeave === void 0 ? noop : _ref$onMouseLeave,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size;
+  var isHorizontal = direction === 'horizontal';
+  var cssProperty = direction === 'horizontal' ? 'width' : 'height';
+
+  var _React$useState = React.useState(_defineProperty({
+    backgroundColor: color
+  }, cssProperty, '0%')),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      style = _React$useState2[0],
+      setStyle = _React$useState2[1];
+
+  var adjustedSize = Math.max(0, size);
+  React.useEffect(function () {
+    setStyle(_defineProperty({
+      backgroundColor: color
+    }, cssProperty, adjustedSize === 0 ? '2px' : "".concat(adjustedSize, "%")));
+  }, [adjustedSize, color, cssProperty]);
+  return React.createElement("div", {
+    className: classNames('ca-Bar', {
+      'is-horizontal': isHorizontal
+    }),
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    role: "presentation"
+  }, React.createElement("div", {
+    className: "ca-Bar-value",
+    style: style
+  }));
+}
+
+export default Bar;
+//# sourceMappingURL=Bar.js.map

package/es/features/content-insights/charts/bar/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/content-insights/charts/bar/Bar.tsx"],"names":["React","classNames","noop","DEFAULT_SIZE","Bar","color","direction","onMouseEnter","onMouseLeave","size","isHorizontal","cssProperty","useState","backgroundColor","style","setStyle","adjustedSize","Math","max","useEffect"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AAIA,OAAO,YAAP;AAEA,IAAMC,YAAY,GAAG,EAArB;;AAUA,SAASC,GAAT,OAAsH;AAAA,MAAvGC,KAAuG,QAAvGA,KAAuG;AAAA,4BAAhGC,SAAgG;AAAA,MAAhGA,SAAgG,+BAApF,UAAoF;AAAA,+BAAxEC,YAAwE;AAAA,MAAxEA,YAAwE,kCAAzDL,IAAyD;AAAA,+BAAnDM,YAAmD;AAAA,MAAnDA,YAAmD,kCAApCN,IAAoC;AAAA,uBAA9BO,IAA8B;AAAA,MAA9BA,IAA8B,0BAAvBN,YAAuB;AAClH,MAAMO,YAAY,GAAGJ,SAAS,KAAK,YAAnC;AACA,MAAMK,WAAW,GAAGL,SAAS,KAAK,YAAd,GAA6B,OAA7B,GAAuC,QAA3D;;AAFkH,wBAGxFN,KAAK,CAACY,QAAN;AACtBC,IAAAA,eAAe,EAAER;AADK,KAErBM,WAFqB,EAEP,IAFO,EAHwF;AAAA;AAAA,MAG3GG,KAH2G;AAAA,MAGpGC,QAHoG;;AAQlH,MAAMC,YAAY,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYT,IAAZ,CAArB;AAEAT,EAAAA,KAAK,CAACmB,SAAN,CAAgB,YAAM;AAClBJ,IAAAA,QAAQ;AACJF,MAAAA,eAAe,EAAER;AADb,OAEHM,WAFG,EAEWK,YAAY,KAAK,CAAjB,GAAqB,KAArB,aAAgCA,YAAhC,MAFX,EAAR;AAIH,GALD,EAKG,CAACA,YAAD,EAAeX,KAAf,EAAsBM,WAAtB,CALH;AAOA,SACI;AACI,IAAA,SAAS,EAAEV,UAAU,CAAC,QAAD,EAAW;AAAE,uBAAiBS;AAAnB,KAAX,CADzB;AAEI,IAAA,YAAY,EAAEH,YAFlB;AAGI,IAAA,YAAY,EAAEC,YAHlB;AAII,IAAA,IAAI,EAAC;AAJT,KAMI;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,IAAA,KAAK,EAAEM;AAArC,IANJ,CADJ;AAUH;;AAED,eAAeV,GAAf","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport noop from 'lodash/noop';\n\nimport { Direction } from '../types';\n\nimport './Bar.scss';\n\nconst DEFAULT_SIZE = 50;\n\ninterface Props {\n    color?: string;\n    direction?: Direction;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    size: number;\n}\n\nfunction Bar({ color, direction = 'vertical', onMouseEnter = noop, onMouseLeave = noop, size = DEFAULT_SIZE }: Props) {\n    const isHorizontal = direction === 'horizontal';\n    const cssProperty = direction === 'horizontal' ? 'width' : 'height';\n    const [style, setStyle] = React.useState({\n        backgroundColor: color,\n        [cssProperty]: '0%',\n    });\n\n    const adjustedSize = Math.max(0, size);\n\n    React.useEffect(() => {\n        setStyle({\n            backgroundColor: color,\n            [cssProperty]: adjustedSize === 0 ? '2px' : `${adjustedSize}%`,\n        });\n    }, [adjustedSize, color, cssProperty]);\n\n    return (\n        <div\n            className={classNames('ca-Bar', { 'is-horizontal': isHorizontal })}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            role=\"presentation\"\n        >\n            <div className=\"ca-Bar-value\" style={style} />\n        </div>\n    );\n}\n\nexport default Bar;\n"],"file":"Bar.js"}

package/es/features/content-insights/charts/bar/Bar.scss

@@ -0,0 +1,27 @@
+@import '../../../../styles/variables';
+
+$ca-Bar-borderRadius: 10px;
+
+.ca-Bar-value {
+    flex: 1 1 auto;
+    background-color: $bdl-box-blue;
+    border-radius: $ca-Bar-borderRadius;
+
+    @include bdl-transition($bdl-transitionDurationBase, height);
+}
+
+.ca-Bar {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: flex-end;
+    height: 100%;
+    border-radius: $ca-Bar-borderRadius;
+
+    &.is-horizontal {
+        width: 100%;
+
+        .ca-Bar-value {
+            @include bdl-transition($bdl-transitionDurationBase, width);
+        }
+    }
+}

package/es/features/content-insights/charts/bar/BarChart.js

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import Bar from './Bar';
+import './BarChart.scss';
+
+function isFunction(valueAccessor) {
+  return typeof valueAccessor === 'function';
+}
+
+function BarChart(_ref) {
+  var className = _ref.className,
+      _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
+      label = _ref.label,
+      onBarMouseEnter = _ref.onBarMouseEnter,
+      onBarMouseLeave = _ref.onBarMouseLeave,
+      labelAccessor = _ref.labelAccessor,
+      valueAccessor = _ref.valueAccessor;
+  var isHorizontal = direction === 'horizontal';
+  var isInteractive = !!onBarMouseEnter || !!onBarMouseLeave;
+  var max = data.map(function (datum) {
+    return isFunction(valueAccessor) ? valueAccessor(datum) : datum[valueAccessor];
+  }).reduce(function (previousValue, currentValue) {
+    return Math.max(previousValue, currentValue);
+  }, 0);
+
+  var getSize = function getSize(datum) {
+    // If max is 0 then all other values in the data array are 0 so return 0
+    // instead of allowing the following calculation to return Infinity
+    if (max === 0) {
+      return 0;
+    }
+
+    return (isFunction(valueAccessor) ? valueAccessor(datum) : datum[valueAccessor]) / max * 100;
+  };
+
+  var handleBarMouseEnter = onBarMouseEnter || noop;
+  var handleBarMouseLeave = onBarMouseLeave || noop;
+  return React.createElement("div", {
+    "aria-label": label,
+    className: classNames('ca-BarChart', className, {
+      'is-horizontal': isHorizontal,
+      'is-interactive': isInteractive
+    }),
+    role: "img"
+  }, data.map(function (datum) {
+    return React.createElement(Bar, {
+      key: datum[labelAccessor],
+      direction: direction,
+      onMouseEnter: function onMouseEnter() {
+        return handleBarMouseEnter({
+          datum: datum
+        });
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleBarMouseLeave({
+          datum: datum
+        });
+      },
+      size: getSize(datum)
+    });
+  }));
+}
+
+export default BarChart;
+//# sourceMappingURL=BarChart.js.map

package/es/features/content-insights/charts/bar/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/content-insights/charts/bar/BarChart.tsx"],"names":["React","classNames","noop","Bar","isFunction","valueAccessor","BarChart","className","data","direction","label","onBarMouseEnter","onBarMouseLeave","labelAccessor","isHorizontal","isInteractive","max","map","datum","reduce","previousValue","currentValue","Math","getSize","handleBarMouseEnter","handleBarMouseLeave"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,OAAOC,GAAP,MAAgB,OAAhB;AAGA,OAAO,iBAAP;;AAeA,SAASC,UAAT,CAAoBC,aAApB,EAAqF;AACjF,SAAO,OAAOA,aAAP,KAAyB,UAAhC;AACH;;AAED,SAASC,QAAT,OASU;AAAA,MARNC,SAQM,QARNA,SAQM;AAAA,uBAPNC,IAOM;AAAA,MAPNA,IAOM,0BAPC,EAOD;AAAA,4BANNC,SAMM;AAAA,MANNA,SAMM,+BANM,UAMN;AAAA,MALNC,KAKM,QALNA,KAKM;AAAA,MAJNC,eAIM,QAJNA,eAIM;AAAA,MAHNC,eAGM,QAHNA,eAGM;AAAA,MAFNC,aAEM,QAFNA,aAEM;AAAA,MADNR,aACM,QADNA,aACM;AACN,MAAMS,YAAY,GAAGL,SAAS,KAAK,YAAnC;AACA,MAAMM,aAAa,GAAG,CAAC,CAACJ,eAAF,IAAqB,CAAC,CAACC,eAA7C;AACA,MAAMI,GAAG,GAAGR,IAAI,CACXS,GADO,CACH,UAAAC,KAAK;AAAA,WAAKd,UAAU,CAACC,aAAD,CAAV,GAA4BA,aAAa,CAACa,KAAD,CAAzC,GAAmDA,KAAK,CAACb,aAAD,CAA7D;AAAA,GADF,EAEPc,MAFO,CAEA,UAACC,aAAD,EAAgBC,YAAhB;AAAA,WAAiCC,IAAI,CAACN,GAAL,CAASI,aAAT,EAAwBC,YAAxB,CAAjC;AAAA,GAFA,EAEwE,CAFxE,CAAZ;;AAIA,MAAME,OAAO,GAAG,SAAVA,OAAU,CAACL,KAAD,EAAgB;AAC5B;AACA;AACA,QAAIF,GAAG,KAAK,CAAZ,EAAe;AACX,aAAO,CAAP;AACH;;AAED,WAAQ,CAACZ,UAAU,CAACC,aAAD,CAAV,GAA4BA,aAAa,CAACa,KAAD,CAAzC,GAAmDA,KAAK,CAACb,aAAD,CAAzD,IAA4EW,GAA7E,GAAoF,GAA3F;AACH,GARD;;AAUA,MAAMQ,mBAAmB,GAAGb,eAAe,IAAIT,IAA/C;AACA,MAAMuB,mBAAmB,GAAGb,eAAe,IAAIV,IAA/C;AAEA,SACI;AACI,kBAAYQ,KADhB;AAEI,IAAA,SAAS,EAAET,UAAU,CAAC,aAAD,EAAgBM,SAAhB,EAA2B;AAC5C,uBAAiBO,YAD2B;AAE5C,wBAAkBC;AAF0B,KAA3B,CAFzB;AAMI,IAAA,IAAI,EAAC;AANT,KAQKP,IAAI,CAACS,GAAL,CAAS,UAAAC,KAAK;AAAA,WACX,oBAAC,GAAD;AACI,MAAA,GAAG,EAAEA,KAAK,CAACL,aAAD,CADd;AAEI,MAAA,SAAS,EAAEJ,SAFf;AAGI,MAAA,YAAY,EAAE;AAAA,eAAMe,mBAAmB,CAAC;AAAEN,UAAAA,KAAK,EAALA;AAAF,SAAD,CAAzB;AAAA,OAHlB;AAII,MAAA,YAAY,EAAE;AAAA,eAAMO,mBAAmB,CAAC;AAAEP,UAAAA,KAAK,EAALA;AAAF,SAAD,CAAzB;AAAA,OAJlB;AAKI,MAAA,IAAI,EAAEK,OAAO,CAACL,KAAD;AALjB,MADW;AAAA,GAAd,CARL,CADJ;AAoBH;;AAED,eAAeZ,QAAf","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport noop from 'lodash/noop';\nimport Bar from './Bar';\nimport { AccessorFunction, Direction } from '../types';\n\nimport './BarChart.scss';\n\ntype ValueAccessor = string | AccessorFunction;\n\ninterface Props {\n    className?: string;\n    data: Array<any>;\n    direction?: Direction;\n    label: string;\n    labelAccessor: string;\n    onBarMouseEnter?: (arg1: { datum: any }) => void;\n    onBarMouseLeave?: (arg1: { datum: any }) => void;\n    valueAccessor: ValueAccessor;\n}\n\nfunction isFunction(valueAccessor: ValueAccessor): valueAccessor is AccessorFunction {\n    return typeof valueAccessor === 'function';\n}\n\nfunction BarChart({\n    className,\n    data = [],\n    direction = 'vertical',\n    label,\n    onBarMouseEnter,\n    onBarMouseLeave,\n    labelAccessor,\n    valueAccessor,\n}: Props) {\n    const isHorizontal = direction === 'horizontal';\n    const isInteractive = !!onBarMouseEnter || !!onBarMouseLeave;\n    const max = data\n        .map(datum => (isFunction(valueAccessor) ? valueAccessor(datum) : datum[valueAccessor]))\n        .reduce((previousValue, currentValue) => Math.max(previousValue, currentValue), 0);\n\n    const getSize = (datum: any) => {\n        // If max is 0 then all other values in the data array are 0 so return 0\n        // instead of allowing the following calculation to return Infinity\n        if (max === 0) {\n            return 0;\n        }\n\n        return ((isFunction(valueAccessor) ? valueAccessor(datum) : datum[valueAccessor]) / max) * 100;\n    };\n\n    const handleBarMouseEnter = onBarMouseEnter || noop;\n    const handleBarMouseLeave = onBarMouseLeave || noop;\n\n    return (\n        <div\n            aria-label={label}\n            className={classNames('ca-BarChart', className, {\n                'is-horizontal': isHorizontal,\n                'is-interactive': isInteractive,\n            })}\n            role=\"img\"\n        >\n            {data.map(datum => (\n                <Bar\n                    key={datum[labelAccessor]}\n                    direction={direction}\n                    onMouseEnter={() => handleBarMouseEnter({ datum })}\n                    onMouseLeave={() => handleBarMouseLeave({ datum })}\n                    size={getSize(datum)}\n                />\n            ))}\n        </div>\n    );\n}\n\nexport default BarChart;\n"],"file":"BarChart.js"}

package/es/features/content-insights/charts/bar/BarChart.scss

@@ -0,0 +1,56 @@
+@import '../../../../styles/variables';
+
+.ca-BarChart {
+    $Bar-margin: .5px;
+    $Bar-minSize: 2px;
+
+    display: flex;
+    flex: 1 1 auto;
+    align-items: flex-end;
+    justify-content: space-between;
+
+    .ca-Bar {
+        flex: 1 1 auto;
+        margin: 0 $Bar-margin;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    .ca-Bar-value {
+        min-height: $Bar-minSize;
+    }
+
+    &.is-horizontal {
+        flex-direction: column;
+        align-items: start;
+        min-width: $Bar-minSize;
+        margin: $Bar-margin 0;
+
+        .ca-Bar {
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &.is-interactive {
+        .ca-Bar:hover {
+            background-color: $bdl-gray-05;
+            cursor: pointer;
+
+            .ca-Bar-value {
+                background-color: $bdl-gray-80;
+            }
+        }
+    }
+}

package/es/features/content-insights/charts/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/es/{common/types/threadedComments.js.map → features/content-insights/charts/types.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"threadedComments.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

package/es/features/content-insights/constants.js

@@ -0,0 +1,54 @@
+var _PRESET_TO_TIMESTAMPS;
+
+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 DOWNLOADS = 'DOWNLOADS';
+var PREVIEWS = 'PREVIEWS';
+var USERS = 'USERS';
+export var METRIC = Object.freeze({
+  DOWNLOADS: DOWNLOADS,
+  PREVIEWS: PREVIEWS,
+  USERS: USERS
+});
+var WEEK = 'week';
+var MONTH = 'month';
+var THREEMONTHS = 'threemonths';
+var YEAR = 'year';
+export var PERIOD = Object.freeze({
+  WEEK: WEEK,
+  MONTH: MONTH,
+  THREEMONTHS: THREEMONTHS,
+  YEAR: YEAR
+});
+var ONE_WEEK = 'one_week';
+var TWO_WEEKS = 'two_weeks';
+var ONE_MONTH = 'one_month';
+var TWO_MONTHS = 'two_months';
+var THREE_MONTHS = 'three_months';
+var SIX_MONTHS = 'six_months';
+var ONE_YEAR = 'one_year';
+var TWO_YEARS = 'two_years';
+export var PRESET_TIMES = Object.freeze({
+  ONE_WEEK: ONE_WEEK,
+  TWO_WEEKS: TWO_WEEKS,
+  ONE_MONTH: ONE_MONTH,
+  TWO_MONTHS: TWO_MONTHS,
+  THREE_MONTHS: THREE_MONTHS,
+  SIX_MONTHS: SIX_MONTHS,
+  ONE_YEAR: ONE_YEAR,
+  TWO_YEARS: TWO_YEARS
+});
+export var PRESET_TO_TIMESTAMPS_MAP = (_PRESET_TO_TIMESTAMPS = {}, _defineProperty(_PRESET_TO_TIMESTAMPS, PERIOD.WEEK, {
+  currentPeriod: PRESET_TIMES.ONE_WEEK,
+  previousPeriod: PRESET_TIMES.TWO_WEEKS
+}), _defineProperty(_PRESET_TO_TIMESTAMPS, PERIOD.MONTH, {
+  currentPeriod: PRESET_TIMES.ONE_MONTH,
+  previousPeriod: PRESET_TIMES.TWO_MONTHS
+}), _defineProperty(_PRESET_TO_TIMESTAMPS, PERIOD.THREEMONTHS, {
+  currentPeriod: PRESET_TIMES.THREE_MONTHS,
+  previousPeriod: PRESET_TIMES.SIX_MONTHS
+}), _defineProperty(_PRESET_TO_TIMESTAMPS, PERIOD.YEAR, {
+  currentPeriod: PRESET_TIMES.ONE_YEAR,
+  previousPeriod: PRESET_TIMES.TWO_YEARS
+}), _PRESET_TO_TIMESTAMPS);
+//# sourceMappingURL=constants.js.map

package/es/features/content-insights/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-insights/constants.ts"],"names":["DOWNLOADS","PREVIEWS","USERS","METRIC","Object","freeze","WEEK","MONTH","THREEMONTHS","YEAR","PERIOD","ONE_WEEK","TWO_WEEKS","ONE_MONTH","TWO_MONTHS","THREE_MONTHS","SIX_MONTHS","ONE_YEAR","TWO_YEARS","PRESET_TIMES","PRESET_TO_TIMESTAMPS_MAP","currentPeriod","previousPeriod"],"mappings":";;;;AAAA,IAAMA,SAAS,GAAG,WAAlB;AACA,IAAMC,QAAQ,GAAG,UAAjB;AACA,IAAMC,KAAK,GAAG,OAAd;AAEA,OAAO,IAAMC,MAAM,GAAGC,MAAM,CAACC,MAAP,CAAc;AAChCL,EAAAA,SAAS,EAATA,SADgC;AAEhCC,EAAAA,QAAQ,EAARA,QAFgC;AAGhCC,EAAAA,KAAK,EAALA;AAHgC,CAAd,CAAf;AAMP,IAAMI,IAAI,GAAG,MAAb;AACA,IAAMC,KAAK,GAAG,OAAd;AACA,IAAMC,WAAW,GAAG,aAApB;AACA,IAAMC,IAAI,GAAG,MAAb;AAEA,OAAO,IAAMC,MAAM,GAAGN,MAAM,CAACC,MAAP,CAAc;AAChCC,EAAAA,IAAI,EAAJA,IADgC;AAEhCC,EAAAA,KAAK,EAALA,KAFgC;AAGhCC,EAAAA,WAAW,EAAXA,WAHgC;AAIhCC,EAAAA,IAAI,EAAJA;AAJgC,CAAd,CAAf;AAOP,IAAME,QAAQ,GAAG,UAAjB;AACA,IAAMC,SAAS,GAAG,WAAlB;AACA,IAAMC,SAAS,GAAG,WAAlB;AACA,IAAMC,UAAU,GAAG,YAAnB;AACA,IAAMC,YAAY,GAAG,cAArB;AACA,IAAMC,UAAU,GAAG,YAAnB;AACA,IAAMC,QAAQ,GAAG,UAAjB;AACA,IAAMC,SAAS,GAAG,WAAlB;AAEA,OAAO,IAAMC,YAAY,GAAGf,MAAM,CAACC,MAAP,CAAc;AACtCM,EAAAA,QAAQ,EAARA,QADsC;AAEtCC,EAAAA,SAAS,EAATA,SAFsC;AAGtCC,EAAAA,SAAS,EAATA,SAHsC;AAItCC,EAAAA,UAAU,EAAVA,UAJsC;AAKtCC,EAAAA,YAAY,EAAZA,YALsC;AAMtCC,EAAAA,UAAU,EAAVA,UANsC;AAOtCC,EAAAA,QAAQ,EAARA,QAPsC;AAQtCC,EAAAA,SAAS,EAATA;AARsC,CAAd,CAArB;AAWP,OAAO,IAAME,wBAAwB,uEAChCV,MAAM,CAACJ,IADyB,EAClB;AACXe,EAAAA,aAAa,EAAEF,YAAY,CAACR,QADjB;AAEXW,EAAAA,cAAc,EAAEH,YAAY,CAACP;AAFlB,CADkB,0CAKhCF,MAAM,CAACH,KALyB,EAKjB;AACZc,EAAAA,aAAa,EAAEF,YAAY,CAACN,SADhB;AAEZS,EAAAA,cAAc,EAAEH,YAAY,CAACL;AAFjB,CALiB,0CAShCJ,MAAM,CAACF,WATyB,EASX;AAClBa,EAAAA,aAAa,EAAEF,YAAY,CAACJ,YADV;AAElBO,EAAAA,cAAc,EAAEH,YAAY,CAACH;AAFX,CATW,0CAahCN,MAAM,CAACD,IAbyB,EAalB;AACXY,EAAAA,aAAa,EAAEF,YAAY,CAACF,QADjB;AAEXK,EAAAA,cAAc,EAAEH,YAAY,CAACD;AAFlB,CAbkB,yBAA9B","sourcesContent":["const DOWNLOADS = 'DOWNLOADS';\nconst PREVIEWS = 'PREVIEWS';\nconst USERS = 'USERS';\n\nexport const METRIC = Object.freeze({\n    DOWNLOADS,\n    PREVIEWS,\n    USERS,\n});\n\nconst WEEK = 'week';\nconst MONTH = 'month';\nconst THREEMONTHS = 'threemonths';\nconst YEAR = 'year';\n\nexport const PERIOD = Object.freeze({\n    WEEK,\n    MONTH,\n    THREEMONTHS,\n    YEAR,\n});\n\nconst ONE_WEEK = 'one_week';\nconst TWO_WEEKS = 'two_weeks';\nconst ONE_MONTH = 'one_month';\nconst TWO_MONTHS = 'two_months';\nconst THREE_MONTHS = 'three_months';\nconst SIX_MONTHS = 'six_months';\nconst ONE_YEAR = 'one_year';\nconst TWO_YEARS = 'two_years';\n\nexport const PRESET_TIMES = Object.freeze({\n    ONE_WEEK,\n    TWO_WEEKS,\n    ONE_MONTH,\n    TWO_MONTHS,\n    THREE_MONTHS,\n    SIX_MONTHS,\n    ONE_YEAR,\n    TWO_YEARS,\n});\n\nexport const PRESET_TO_TIMESTAMPS_MAP = {\n    [PERIOD.WEEK]: {\n        currentPeriod: PRESET_TIMES.ONE_WEEK,\n        previousPeriod: PRESET_TIMES.TWO_WEEKS,\n    },\n    [PERIOD.MONTH]: {\n        currentPeriod: PRESET_TIMES.ONE_MONTH,\n        previousPeriod: PRESET_TIMES.TWO_MONTHS,\n    },\n    [PERIOD.THREEMONTHS]: {\n        currentPeriod: PRESET_TIMES.THREE_MONTHS,\n        previousPeriod: PRESET_TIMES.SIX_MONTHS,\n    },\n    [PERIOD.YEAR]: {\n        currentPeriod: PRESET_TIMES.ONE_YEAR,\n        previousPeriod: PRESET_TIMES.TWO_YEARS,\n    },\n} as const;\n"],"file":"constants.js"}

package/es/features/content-insights/messages.js

@@ -0,0 +1,69 @@
+import { defineMessages } from 'react-intl';
+var messages = defineMessages({
+  contentAnalyticsErrorText: {
+    "id": "be.contentInsights.contentAnalyticsErrorText",
+    "defaultMessage": "There was a problem loading content insights. Please try again."
+  },
+  contentAnalyticsPermissionError: {
+    "id": "be.contentInsights.contentAnalyticsPermissionError",
+    "defaultMessage": "Oops! You no longer have access to view content insights."
+  },
+  contentInsightsTitle: {
+    "id": "be.contentInsights.contentInsightsTitle",
+    "defaultMessage": "Content Insights"
+  },
+  downloadGraphLabel: {
+    "id": "be.contentInsights.downloadGraphLabel",
+    "defaultMessage": "Chart displaying the number of downloads over the selected time period"
+  },
+  downloadGraphType: {
+    "id": "be.contentInsights.downloadGraphType",
+    "defaultMessage": "DOWNLOADS"
+  },
+  trendMonth: {
+    "id": "be.contentInsights.trendMonth",
+    "defaultMessage": "PAST MONTH"
+  },
+  trendThreeMonths: {
+    "id": "be.contentInsights.trendThreeMonths",
+    "defaultMessage": "PAST 3 MONTHS"
+  },
+  trendWeek: {
+    "id": "be.contentInsights.trendWeek",
+    "defaultMessage": "PAST WEEK"
+  },
+  trendYear: {
+    "id": "be.contentInsights.trendYear",
+    "defaultMessage": "PAST YEAR"
+  },
+  trendDown: {
+    "id": "be.contentInsights.trendDown",
+    "defaultMessage": "Trending down"
+  },
+  trendUp: {
+    "id": "be.contentInsights.trendUp",
+    "defaultMessage": "Trending up"
+  },
+  peopleGraphLabel: {
+    "id": "be.contentInsights.peopleGraphLabel",
+    "defaultMessage": "Chart displaying the number of users over the selected time period"
+  },
+  peopleTitle: {
+    "id": "be.contentInsights.peopleTitle",
+    "defaultMessage": "PEOPLE"
+  },
+  previewGraphLabel: {
+    "id": "be.contentInsights.previewGraphLabel",
+    "defaultMessage": "Chart displaying the number of previews over the selected time period"
+  },
+  previewGraphType: {
+    "id": "be.contentInsights.previewGraphType",
+    "defaultMessage": "PREVIEWS"
+  },
+  openContentInsightsButton: {
+    "id": "be.contentInsights.openContentInsightsButton",
+    "defaultMessage": "See Details"
+  }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/es/features/content-insights/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-insights/messages.ts"],"names":["defineMessages","messages","contentAnalyticsErrorText","contentAnalyticsPermissionError","contentInsightsTitle","downloadGraphLabel","downloadGraphType","trendMonth","trendThreeMonths","trendWeek","trendYear","trendDown","trendUp","peopleGraphLabel","peopleTitle","previewGraphLabel","previewGraphType","openContentInsightsButton"],"mappings":"AAAA,SAASA,cAAT,QAA+B,YAA/B;AAEA,IAAMC,QAAQ,GAAGD,cAAc,CAAC;AAC5BE,EAAAA,yBAAyB;AAAA;AAAA;AAAA,GADG;AAM5BC,EAAAA,+BAA+B;AAAA;AAAA;AAAA,GANH;AAW5BC,EAAAA,oBAAoB;AAAA;AAAA;AAAA,GAXQ;AAgB5BC,EAAAA,kBAAkB;AAAA;AAAA;AAAA,GAhBU;AAqB5BC,EAAAA,iBAAiB;AAAA;AAAA;AAAA,GArBW;AA0B5BC,EAAAA,UAAU;AAAA;AAAA;AAAA,GA1BkB;AAgC5BC,EAAAA,gBAAgB;AAAA;AAAA;AAAA,GAhCY;AAsC5BC,EAAAA,SAAS;AAAA;AAAA;AAAA,GAtCmB;AA4C5BC,EAAAA,SAAS;AAAA;AAAA;AAAA,GA5CmB;AAkD5BC,EAAAA,SAAS;AAAA;AAAA;AAAA,GAlDmB;AAuD5BC,EAAAA,OAAO;AAAA;AAAA;AAAA,GAvDqB;AA4D5BC,EAAAA,gBAAgB;AAAA;AAAA;AAAA,GA5DY;AAiE5BC,EAAAA,WAAW;AAAA;AAAA;AAAA,GAjEiB;AAsE5BC,EAAAA,iBAAiB;AAAA;AAAA;AAAA,GAtEW;AA2E5BC,EAAAA,gBAAgB;AAAA;AAAA;AAAA,GA3EY;AAgF5BC,EAAAA,yBAAyB;AAAA;AAAA;AAAA;AAhFG,CAAD,CAA/B;AAuFA,eAAehB,QAAf","sourcesContent":["import { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n    contentAnalyticsErrorText: {\n        defaultMessage: 'There was a problem loading content insights. Please try again.',\n        description: 'Text shown to users when opening the content insights flyout and there is an error',\n        id: 'be.contentInsights.contentAnalyticsErrorText',\n    },\n    contentAnalyticsPermissionError: {\n        defaultMessage: 'Oops! You no longer have access to view content insights.',\n        description: 'Message shown when the user does not have access to view content insights anymore',\n        id: 'be.contentInsights.contentAnalyticsPermissionError',\n    },\n    contentInsightsTitle: {\n        defaultMessage: 'Content Insights',\n        description: 'Title for Content Insights section in file sidebar',\n        id: 'be.contentInsights.contentInsightsTitle',\n    },\n    downloadGraphLabel: {\n        defaultMessage: 'Chart displaying the number of downloads over the selected time period',\n        description: 'Label for the chart displaying the number of downloads over the selected time period',\n        id: 'be.contentInsights.downloadGraphLabel',\n    },\n    downloadGraphType: {\n        defaultMessage: 'DOWNLOADS',\n        description: 'Title for the content insights graph card regarding number of Previews',\n        id: 'be.contentInsights.downloadGraphType',\n    },\n    trendMonth: {\n        defaultMessage: 'PAST MONTH',\n        description:\n            'Trend description for the content insights graph card regarding the count of events from the past month',\n        id: 'be.contentInsights.trendMonth',\n    },\n    trendThreeMonths: {\n        defaultMessage: 'PAST 3 MONTHS',\n        description:\n            'Trend description for the content insights graph card regarding the count of events from the past three months',\n        id: 'be.contentInsights.trendThreeMonths',\n    },\n    trendWeek: {\n        defaultMessage: 'PAST WEEK',\n        description:\n            'Trend description for the content insights graph card regarding the count of events from the past week',\n        id: 'be.contentInsights.trendWeek',\n    },\n    trendYear: {\n        defaultMessage: 'PAST YEAR',\n        description:\n            'Trend description for the content insights graph card regarding the count of events from the past year',\n        id: 'be.contentInsights.trendYear',\n    },\n    trendDown: {\n        defaultMessage: 'Trending down',\n        description: 'Label for the arrow indicator in the trend pill',\n        id: 'be.contentInsights.trendDown',\n    },\n    trendUp: {\n        defaultMessage: 'Trending up',\n        description: 'Label for the arrow indicator in the trend pill',\n        id: 'be.contentInsights.trendUp',\n    },\n    peopleGraphLabel: {\n        defaultMessage: 'Chart displaying the number of users over the selected time period',\n        description: 'Label for the chart displaying the number of users over the selected time period',\n        id: 'be.contentInsights.peopleGraphLabel',\n    },\n    peopleTitle: {\n        defaultMessage: 'PEOPLE',\n        description: 'Title used to represent how many users have interacted with the file',\n        id: 'be.contentInsights.peopleTitle',\n    },\n    previewGraphLabel: {\n        defaultMessage: 'Chart displaying the number of previews over the selected time period',\n        description: 'Label for the chart displaying the number of previews over the selected time period',\n        id: 'be.contentInsights.previewGraphLabel',\n    },\n    previewGraphType: {\n        defaultMessage: 'PREVIEWS',\n        description: 'Title for the content insights graph card regarding number of Previews',\n        id: 'be.contentInsights.previewGraphType',\n    },\n    openContentInsightsButton: {\n        defaultMessage: 'See Details',\n        description: 'Open Content Insights button which opens the Content Insights Modal',\n        id: 'be.contentInsights.openContentInsightsButton',\n    },\n});\n\nexport default messages;\n"],"file":"messages.js"}