@bigbinary/neeto-molecules 1.15.8 → 1.15.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Insights.js +305 -0
- package/dist/Insights.js.map +1 -0
- package/dist/cjs/Insights.js +311 -0
- package/dist/cjs/Insights.js.map +1 -0
- package/package.json +1 -1
- package/src/translations/en.json +41 -0
- package/types/Insights.d.ts +108 -0
package/dist/Insights.js
ADDED
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
import React__default, { memo } from 'react';
|
|
2
|
+
import { Warning } from '@bigbinary/neeto-icons';
|
|
3
|
+
import { Typography, Tooltip } from '@bigbinary/neetoui';
|
|
4
|
+
import { useTranslation } from 'react-i18next';
|
|
5
|
+
import DateRangeFilter from './DateRangeFilter.js';
|
|
6
|
+
import PageLoader from './PageLoader.js';
|
|
7
|
+
import { t } from 'i18next';
|
|
8
|
+
import { sum, values, pluck } from 'ramda';
|
|
9
|
+
import { existsBy } from '@bigbinary/neeto-cist';
|
|
10
|
+
import HelpPopover from './HelpPopover.js';
|
|
11
|
+
import './slicedToArray-b4278ecd.js';
|
|
12
|
+
import 'dayjs';
|
|
13
|
+
import '@bigbinary/neeto-commons-frontend/initializers';
|
|
14
|
+
import './extends-093996c9.js';
|
|
15
|
+
import './objectWithoutProperties-a0edb288.js';
|
|
16
|
+
import './inject-css-c86de496.js';
|
|
17
|
+
import './defineProperty-549061a7.js';
|
|
18
|
+
import 'classnames';
|
|
19
|
+
|
|
20
|
+
var DEFAULT_DEVICES = [{
|
|
21
|
+
label: t("neetoMolecules.insights.labels.devices.desktop"),
|
|
22
|
+
value: "desktop"
|
|
23
|
+
}, {
|
|
24
|
+
label: t("neetoMolecules.insights.labels.devices.mobile"),
|
|
25
|
+
value: "smartphone"
|
|
26
|
+
}];
|
|
27
|
+
var DEFAULT_OS = [{
|
|
28
|
+
label: t("neetoMolecules.insights.labels.os.macos"),
|
|
29
|
+
value: "mac"
|
|
30
|
+
}, {
|
|
31
|
+
label: t("neetoMolecules.insights.labels.os.windows"),
|
|
32
|
+
value: "windows"
|
|
33
|
+
}];
|
|
34
|
+
var DEFAULT_BROWSERS = [{
|
|
35
|
+
label: t("neetoMolecules.insights.labels.browsers.chrome"),
|
|
36
|
+
value: "chrome"
|
|
37
|
+
}, {
|
|
38
|
+
label: t("neetoMolecules.insights.labels.browsers.safari"),
|
|
39
|
+
value: "safari"
|
|
40
|
+
}];
|
|
41
|
+
({
|
|
42
|
+
label: t("neetoMolecules.insights.labels.allTime"),
|
|
43
|
+
value: {
|
|
44
|
+
startDate: null,
|
|
45
|
+
endDate: null,
|
|
46
|
+
rangeType: "all"
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
var PercentageBar = function PercentageBar(_ref) {
|
|
51
|
+
var value = _ref.value;
|
|
52
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, value && /*#__PURE__*/React__default.createElement("div", {
|
|
53
|
+
className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2",
|
|
54
|
+
style: {
|
|
55
|
+
width: "".concat(value, "%")
|
|
56
|
+
}
|
|
57
|
+
}), /*#__PURE__*/React__default.createElement(Typography, {
|
|
58
|
+
style: "body3"
|
|
59
|
+
}, value, "%"));
|
|
60
|
+
};
|
|
61
|
+
var PercentageBar$1 = /*#__PURE__*/memo(PercentageBar);
|
|
62
|
+
|
|
63
|
+
var MetaInfoItem = function MetaInfoItem(_ref) {
|
|
64
|
+
var name = _ref.name,
|
|
65
|
+
value = _ref.value;
|
|
66
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
|
|
67
|
+
style: "body2",
|
|
68
|
+
textTransform: "capitalize"
|
|
69
|
+
}, name), /*#__PURE__*/React__default.createElement("div", {
|
|
70
|
+
className: "col-span-3 flex items-center gap-2"
|
|
71
|
+
}, /*#__PURE__*/React__default.createElement(PercentageBar$1, {
|
|
72
|
+
value: value
|
|
73
|
+
})));
|
|
74
|
+
};
|
|
75
|
+
var MetaInfoItem$1 = /*#__PURE__*/memo(MetaInfoItem);
|
|
76
|
+
|
|
77
|
+
var DataDistribution = function DataDistribution(_ref) {
|
|
78
|
+
var data = _ref.data;
|
|
79
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
80
|
+
className: "grid grid-cols-4 gap-2"
|
|
81
|
+
}, data.map(function (_ref2) {
|
|
82
|
+
var name = _ref2.name,
|
|
83
|
+
value = _ref2.value;
|
|
84
|
+
return /*#__PURE__*/React__default.createElement(MetaInfoItem$1, {
|
|
85
|
+
name: name,
|
|
86
|
+
value: value,
|
|
87
|
+
key: name
|
|
88
|
+
});
|
|
89
|
+
}));
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
var getSum = function getSum(data, searchKey) {
|
|
93
|
+
var sum = 0;
|
|
94
|
+
for (var key in data) {
|
|
95
|
+
if (key.includes(searchKey)) sum += data[key];
|
|
96
|
+
}
|
|
97
|
+
return sum;
|
|
98
|
+
};
|
|
99
|
+
var transformInsights = function transformInsights(data, defaultItems) {
|
|
100
|
+
var othersData = Object.keys(data).filter(function (key) {
|
|
101
|
+
return !existsBy({
|
|
102
|
+
value: key
|
|
103
|
+
}, defaultItems);
|
|
104
|
+
}).map(function (key) {
|
|
105
|
+
return {
|
|
106
|
+
name: key,
|
|
107
|
+
value: data[key]
|
|
108
|
+
};
|
|
109
|
+
});
|
|
110
|
+
var defaultData = defaultItems.map(function (_ref) {
|
|
111
|
+
var label = _ref.label,
|
|
112
|
+
value = _ref.value;
|
|
113
|
+
return {
|
|
114
|
+
name: label,
|
|
115
|
+
value: getSum(data, value) || 0
|
|
116
|
+
};
|
|
117
|
+
});
|
|
118
|
+
return {
|
|
119
|
+
defaultData: defaultData,
|
|
120
|
+
othersData: othersData
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
var MetaInfo = function MetaInfo(_ref) {
|
|
125
|
+
var type = _ref.type,
|
|
126
|
+
data = _ref.data,
|
|
127
|
+
defaultItems = _ref.defaultItems;
|
|
128
|
+
var _useTranslation = useTranslation(),
|
|
129
|
+
t = _useTranslation.t;
|
|
130
|
+
var _transformInsights = transformInsights(data, defaultItems),
|
|
131
|
+
defaultData = _transformInsights.defaultData,
|
|
132
|
+
othersData = _transformInsights.othersData;
|
|
133
|
+
var othersSum = sum(values(pluck("value", othersData)));
|
|
134
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
135
|
+
className: "neeto-ui-bg-gray-100 neeto-ui-rounded p-4"
|
|
136
|
+
}, /*#__PURE__*/React__default.createElement(Typography, {
|
|
137
|
+
className: "mb-4",
|
|
138
|
+
style: "h6",
|
|
139
|
+
textTransform: "uppercase",
|
|
140
|
+
weight: "bold"
|
|
141
|
+
}, type), /*#__PURE__*/React__default.createElement(DataDistribution, {
|
|
142
|
+
data: defaultData
|
|
143
|
+
}), /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
144
|
+
content: /*#__PURE__*/React__default.createElement(DataDistribution, {
|
|
145
|
+
data: othersData
|
|
146
|
+
}),
|
|
147
|
+
disabled: !othersSum,
|
|
148
|
+
position: "bottom"
|
|
149
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
150
|
+
className: "mt-2 grid grid-cols-4 gap-2"
|
|
151
|
+
}, /*#__PURE__*/React__default.createElement(MetaInfoItem$1, {
|
|
152
|
+
name: t("neetoMolecules.insights.others"),
|
|
153
|
+
value: othersSum
|
|
154
|
+
}))));
|
|
155
|
+
};
|
|
156
|
+
var MetaInfo$1 = /*#__PURE__*/memo(MetaInfo);
|
|
157
|
+
|
|
158
|
+
var TimeItem = function TimeItem(_ref) {
|
|
159
|
+
var value = _ref.value,
|
|
160
|
+
suffix = _ref.suffix;
|
|
161
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
162
|
+
className: "flex items-end",
|
|
163
|
+
"data-testid": "time-item"
|
|
164
|
+
}, /*#__PURE__*/React__default.createElement(Typography, {
|
|
165
|
+
className: "mr-1",
|
|
166
|
+
style: "h1",
|
|
167
|
+
weight: "semibold"
|
|
168
|
+
}, value), /*#__PURE__*/React__default.createElement(Typography, {
|
|
169
|
+
lineHeight: "loose",
|
|
170
|
+
style: "body2"
|
|
171
|
+
}, suffix));
|
|
172
|
+
};
|
|
173
|
+
var TimeItem$1 = /*#__PURE__*/memo(TimeItem);
|
|
174
|
+
|
|
175
|
+
var MetricItem = function MetricItem(_ref) {
|
|
176
|
+
var metric = _ref.metric,
|
|
177
|
+
value = _ref.value,
|
|
178
|
+
helpText = _ref.helpText,
|
|
179
|
+
isTime = _ref.isTime,
|
|
180
|
+
isPercentage = _ref.isPercentage;
|
|
181
|
+
var renderTime = function renderTime(value) {
|
|
182
|
+
var hours = value.h,
|
|
183
|
+
minutes = value.m,
|
|
184
|
+
seconds = value.s;
|
|
185
|
+
var showSeconds = !hours && !minutes;
|
|
186
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
187
|
+
className: "flex gap-2"
|
|
188
|
+
}, !!hours && /*#__PURE__*/React__default.createElement(TimeItem$1, {
|
|
189
|
+
suffix: "H",
|
|
190
|
+
value: hours
|
|
191
|
+
}), !!minutes && /*#__PURE__*/React__default.createElement(TimeItem$1, {
|
|
192
|
+
suffix: "M",
|
|
193
|
+
value: minutes
|
|
194
|
+
}), (!!seconds || showSeconds) && /*#__PURE__*/React__default.createElement(TimeItem$1, {
|
|
195
|
+
suffix: "S",
|
|
196
|
+
value: seconds
|
|
197
|
+
}));
|
|
198
|
+
};
|
|
199
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
200
|
+
className: "nf-insights__metric-item neeto-ui-border-gray-200 border-b pb-4"
|
|
201
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
202
|
+
className: "flex items-center justify-between gap-2"
|
|
203
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
204
|
+
className: "flex items-end"
|
|
205
|
+
}, isTime ? renderTime(value) : /*#__PURE__*/React__default.createElement(Typography, {
|
|
206
|
+
className: "mr-1",
|
|
207
|
+
"data-testid": "insights-count",
|
|
208
|
+
style: "h1",
|
|
209
|
+
weight: "semibold"
|
|
210
|
+
}, value || 0, isPercentage ? "%" : "")), helpText && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HelpPopover, {
|
|
211
|
+
description: helpText
|
|
212
|
+
}))), /*#__PURE__*/React__default.createElement(Typography, {
|
|
213
|
+
className: "neeto-ui-text-gray-700",
|
|
214
|
+
"data-cy": "insights-type",
|
|
215
|
+
style: "body2"
|
|
216
|
+
}, metric));
|
|
217
|
+
};
|
|
218
|
+
var MetricItem$1 = /*#__PURE__*/memo(MetricItem);
|
|
219
|
+
|
|
220
|
+
var Insights = function Insights(_ref) {
|
|
221
|
+
var insightsData = _ref.insightsData,
|
|
222
|
+
isLoading = _ref.isLoading,
|
|
223
|
+
timePeriod = _ref.timePeriod,
|
|
224
|
+
setTimePeriod = _ref.setTimePeriod,
|
|
225
|
+
_ref$helpTexts = _ref.helpTexts,
|
|
226
|
+
helpTexts = _ref$helpTexts === void 0 ? {} : _ref$helpTexts,
|
|
227
|
+
_ref$showWarningMessa = _ref.showWarningMessage,
|
|
228
|
+
showWarningMessage = _ref$showWarningMessa === void 0 ? false : _ref$showWarningMessa;
|
|
229
|
+
var _useTranslation = useTranslation(),
|
|
230
|
+
t = _useTranslation.t;
|
|
231
|
+
var visitCount = insightsData.visitCount,
|
|
232
|
+
startCount = insightsData.startCount,
|
|
233
|
+
submissionCount = insightsData.submissionCount,
|
|
234
|
+
completionRate = insightsData.completionRate,
|
|
235
|
+
averageSubmissionTime = insightsData.averageSubmissionTime,
|
|
236
|
+
devices = insightsData.devices,
|
|
237
|
+
operatingSystems = insightsData.operatingSystems,
|
|
238
|
+
browsers = insightsData.browsers;
|
|
239
|
+
if (isLoading) return /*#__PURE__*/React__default.createElement(PageLoader, null);
|
|
240
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
241
|
+
className: "mx-auto pt-10",
|
|
242
|
+
"data-testid": "insights"
|
|
243
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
244
|
+
className: "mb-11 flex w-full items-center "
|
|
245
|
+
}, /*#__PURE__*/React__default.createElement(Typography, {
|
|
246
|
+
"data-cy": "submissions-insights-title",
|
|
247
|
+
style: "h2"
|
|
248
|
+
}, t("neetoMolecules.insights.title")), showWarningMessage && /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
249
|
+
content: t("neetoMolecules.insights.dataInaccuracyWarning"),
|
|
250
|
+
position: "right"
|
|
251
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
252
|
+
className: "ml-3"
|
|
253
|
+
}, /*#__PURE__*/React__default.createElement(Warning, {
|
|
254
|
+
className: "neeto-ui-text-warning-500",
|
|
255
|
+
"data-testid": "insights-warning",
|
|
256
|
+
size: 20
|
|
257
|
+
}))), /*#__PURE__*/React__default.createElement("span", {
|
|
258
|
+
className: "ml-auto"
|
|
259
|
+
}, /*#__PURE__*/React__default.createElement(DateRangeFilter, {
|
|
260
|
+
setTimePeriod: setTimePeriod,
|
|
261
|
+
timePeriod: timePeriod
|
|
262
|
+
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
263
|
+
className: "mb-8 flex flex-wrap justify-between"
|
|
264
|
+
}, /*#__PURE__*/React__default.createElement(MetricItem$1, {
|
|
265
|
+
helpText: helpTexts["visitCount"],
|
|
266
|
+
metric: t("neetoMolecules.insights.metrics.visits"),
|
|
267
|
+
value: visitCount
|
|
268
|
+
}), /*#__PURE__*/React__default.createElement(MetricItem$1, {
|
|
269
|
+
helpText: helpTexts["startCount"],
|
|
270
|
+
metric: t("neetoMolecules.insights.metrics.starts"),
|
|
271
|
+
value: startCount
|
|
272
|
+
}), /*#__PURE__*/React__default.createElement(MetricItem$1, {
|
|
273
|
+
helpText: helpTexts["submissions"],
|
|
274
|
+
metric: t("neetoMolecules.insights.metrics.submissions"),
|
|
275
|
+
value: submissionCount
|
|
276
|
+
}), /*#__PURE__*/React__default.createElement(MetricItem$1, {
|
|
277
|
+
isPercentage: true,
|
|
278
|
+
helpText: helpTexts["completionRate"],
|
|
279
|
+
metric: t("neetoMolecules.insights.metrics.completionRate"),
|
|
280
|
+
value: completionRate
|
|
281
|
+
}), /*#__PURE__*/React__default.createElement(MetricItem$1, {
|
|
282
|
+
isTime: true,
|
|
283
|
+
helpText: helpTexts["averageSubmissionTime"],
|
|
284
|
+
metric: t("neetoMolecules.insights.metrics.avgTimeToComplete"),
|
|
285
|
+
timeSuffix: t("neetoMolecules.insights.mins"),
|
|
286
|
+
value: averageSubmissionTime
|
|
287
|
+
})), /*#__PURE__*/React__default.createElement("div", {
|
|
288
|
+
className: "grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3"
|
|
289
|
+
}, /*#__PURE__*/React__default.createElement(MetaInfo$1, {
|
|
290
|
+
data: devices,
|
|
291
|
+
defaultItems: DEFAULT_DEVICES,
|
|
292
|
+
type: t("neetoMolecules.insights.devices")
|
|
293
|
+
}), /*#__PURE__*/React__default.createElement(MetaInfo$1, {
|
|
294
|
+
data: operatingSystems,
|
|
295
|
+
defaultItems: DEFAULT_OS,
|
|
296
|
+
type: t("neetoMolecules.insights.os")
|
|
297
|
+
}), /*#__PURE__*/React__default.createElement(MetaInfo$1, {
|
|
298
|
+
data: browsers,
|
|
299
|
+
defaultItems: DEFAULT_BROWSERS,
|
|
300
|
+
type: t("neetoMolecules.insights.browsers")
|
|
301
|
+
})));
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
export { Insights as default };
|
|
305
|
+
//# sourceMappingURL=Insights.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Insights.js","sources":["../src/components/Insights/constants.js","../src/components/Insights/MetaInfo/PercentageBar.jsx","../src/components/Insights/MetaInfo/MetaInfoItem.jsx","../src/components/Insights/MetaInfo/DataDistribution.jsx","../src/components/Insights/utils.js","../src/components/Insights/MetaInfo/index.jsx","../src/components/Insights/TimeItem.jsx","../src/components/Insights/MetricItem.jsx","../src/components/Insights/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\n\nexport const DEFAULT_DEVICES = [\n {\n label: t(\"neetoMolecules.insights.labels.devices.desktop\"),\n value: \"desktop\",\n },\n {\n label: t(\"neetoMolecules.insights.labels.devices.mobile\"),\n value: \"smartphone\",\n },\n];\n\nexport const DEFAULT_OS = [\n { label: t(\"neetoMolecules.insights.labels.os.macos\"), value: \"mac\" },\n {\n label: t(\"neetoMolecules.insights.labels.os.windows\"),\n value: \"windows\",\n },\n];\n\nexport const DEFAULT_BROWSERS = [\n {\n label: t(\"neetoMolecules.insights.labels.browsers.chrome\"),\n value: \"chrome\",\n },\n {\n label: t(\"neetoMolecules.insights.labels.browsers.safari\"),\n value: \"safari\",\n },\n];\n\nexport const INITIAL_TIME_PERIOD_VALUE = {\n label: t(\"neetoMolecules.insights.labels.allTime\"),\n value: { startDate: null, endDate: null, rangeType: \"all\" },\n};\n","import React, { memo } from \"react\";\n\nimport { Typography } from \"neetoui\";\n\nconst PercentageBar = ({ value }) => (\n <>\n {value && (\n <div\n className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2\"\n style={{ width: `${value}%` }}\n />\n )}\n <Typography style=\"body3\">{value}%</Typography>\n </>\n);\n\nexport default memo(PercentageBar);\n","import React, { memo } from \"react\";\n\nimport { Typography } from \"neetoui\";\n\nimport PercentageBar from \"./PercentageBar\";\n\nconst MetaInfoItem = ({ name, value }) => (\n <>\n <Typography style=\"body2\" textTransform=\"capitalize\">\n {name}\n </Typography>\n <div className=\"col-span-3 flex items-center gap-2\">\n <PercentageBar {...{ value }} />\n </div>\n </>\n);\n\nexport default memo(MetaInfoItem);\n","import React from \"react\";\n\nimport MetaInfoItem from \"./MetaInfoItem\";\n\nconst DataDistribution = ({ data }) => (\n <div className=\"grid grid-cols-4 gap-2\">\n {data.map(({ name, value }) => (\n <MetaInfoItem {...{ name, value }} key={name} />\n ))}\n </div>\n);\n\nexport default DataDistribution;\n","import { existsBy } from \"neetocist\";\n\nconst getSum = (data, searchKey) => {\n let sum = 0;\n for (const key in data) {\n if (key.includes(searchKey)) sum += data[key];\n }\n\n return sum;\n};\n\nexport const transformInsights = (data, defaultItems) => {\n const othersData = Object.keys(data)\n .filter(key => !existsBy({ value: key }, defaultItems))\n .map(key => ({ name: key, value: data[key] }));\n\n const defaultData = defaultItems.map(({ label, value }) => ({\n name: label,\n value: getSum(data, value) || 0,\n }));\n\n return { defaultData, othersData };\n};\n","import React, { memo } from \"react\";\n\nimport { Tooltip, Typography } from \"neetoui\";\nimport { pluck, sum, values } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport DataDistribution from \"./DataDistribution\";\nimport MetaInfoItem from \"./MetaInfoItem\";\n\nimport { transformInsights } from \"../utils\";\n\nconst MetaInfo = ({ type, data, defaultItems }) => {\n const { t } = useTranslation();\n const { defaultData, othersData } = transformInsights(data, defaultItems);\n\n const othersSum = sum(values(pluck(\"value\", othersData)));\n\n return (\n <div className=\"neeto-ui-bg-gray-100 neeto-ui-rounded p-4\">\n <Typography\n className=\"mb-4\"\n style=\"h6\"\n textTransform=\"uppercase\"\n weight=\"bold\"\n >\n {type}\n </Typography>\n <DataDistribution data={defaultData} />\n <Tooltip\n content={<DataDistribution data={othersData} />}\n disabled={!othersSum}\n position=\"bottom\"\n >\n <div className=\"mt-2 grid grid-cols-4 gap-2\">\n <MetaInfoItem\n name={t(\"neetoMolecules.insights.others\")}\n value={othersSum}\n />\n </div>\n </Tooltip>\n </div>\n );\n};\n\nexport default memo(MetaInfo);\n","import React, { memo } from \"react\";\n\nimport { Typography } from \"neetoui\";\n\nconst TimeItem = ({ value, suffix }) => (\n <div className=\"flex items-end\" data-testid=\"time-item\">\n <Typography className=\"mr-1\" style=\"h1\" weight=\"semibold\">\n {value}\n </Typography>\n <Typography lineHeight=\"loose\" style=\"body2\">\n {suffix}\n </Typography>\n </div>\n);\n\nexport default memo(TimeItem);\n","import React, { memo } from \"react\";\n\nimport { Typography } from \"neetoui\";\n\nimport HelpPopover from \"components/HelpPopover\";\n\nimport TimeItem from \"./TimeItem\";\n\nconst MetricItem = ({ metric, value, helpText, isTime, isPercentage }) => {\n const renderTime = value => {\n const { h: hours, m: minutes, s: seconds } = value;\n const showSeconds = !hours && !minutes;\n\n return (\n <div className=\"flex gap-2\">\n {!!hours && <TimeItem suffix=\"H\" value={hours} />}\n {!!minutes && <TimeItem suffix=\"M\" value={minutes} />}\n {(!!seconds || showSeconds) && <TimeItem suffix=\"S\" value={seconds} />}\n </div>\n );\n };\n\n return (\n <div className=\"nf-insights__metric-item neeto-ui-border-gray-200 border-b pb-4\">\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"flex items-end\">\n {isTime ? (\n renderTime(value)\n ) : (\n <Typography\n className=\"mr-1\"\n data-testid=\"insights-count\"\n style=\"h1\"\n weight=\"semibold\"\n >\n {value || 0}\n {isPercentage ? \"%\" : \"\"}\n </Typography>\n )}\n </div>\n {helpText && (\n <div>\n <HelpPopover description={helpText} />\n </div>\n )}\n </div>\n <Typography\n className=\"neeto-ui-text-gray-700\"\n data-cy=\"insights-type\"\n style=\"body2\"\n >\n {metric}\n </Typography>\n </div>\n );\n};\n\nexport default memo(MetricItem);\n","import React from \"react\";\n\nimport { Warning } from \"neetoicons\";\nimport { Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport DateRangeFilter from \"components/DateRangeFilter\";\nimport PageLoader from \"components/PageLoader\";\n\nimport { DEFAULT_DEVICES, DEFAULT_BROWSERS, DEFAULT_OS } from \"./constants\";\nimport MetaInfo from \"./MetaInfo\";\nimport MetricItem from \"./MetricItem\";\n\nconst Insights = ({\n insightsData,\n isLoading,\n timePeriod,\n setTimePeriod,\n helpTexts = {},\n showWarningMessage = false,\n}) => {\n const { t } = useTranslation();\n\n const {\n visitCount,\n startCount,\n submissionCount,\n completionRate,\n averageSubmissionTime,\n devices,\n operatingSystems,\n browsers,\n } = insightsData;\n\n if (isLoading) return <PageLoader />;\n\n return (\n <div className=\"mx-auto pt-10\" data-testid=\"insights\">\n <div className=\"mb-11 flex w-full items-center \">\n <Typography data-cy=\"submissions-insights-title\" style=\"h2\">\n {t(\"neetoMolecules.insights.title\")}\n </Typography>\n {showWarningMessage && (\n <Tooltip\n content={t(\"neetoMolecules.insights.dataInaccuracyWarning\")}\n position=\"right\"\n >\n <span className=\"ml-3\">\n <Warning\n className=\"neeto-ui-text-warning-500\"\n data-testid=\"insights-warning\"\n size={20}\n />\n </span>\n </Tooltip>\n )}\n <span className=\"ml-auto\">\n <DateRangeFilter {...{ setTimePeriod, timePeriod }} />\n </span>\n </div>\n <div className=\"mb-8 flex flex-wrap justify-between\">\n <MetricItem\n helpText={helpTexts[\"visitCount\"]}\n metric={t(\"neetoMolecules.insights.metrics.visits\")}\n value={visitCount}\n />\n <MetricItem\n helpText={helpTexts[\"startCount\"]}\n metric={t(\"neetoMolecules.insights.metrics.starts\")}\n value={startCount}\n />\n <MetricItem\n helpText={helpTexts[\"submissions\"]}\n metric={t(\"neetoMolecules.insights.metrics.submissions\")}\n value={submissionCount}\n />\n <MetricItem\n isPercentage\n helpText={helpTexts[\"completionRate\"]}\n metric={t(\"neetoMolecules.insights.metrics.completionRate\")}\n value={completionRate}\n />\n <MetricItem\n isTime\n helpText={helpTexts[\"averageSubmissionTime\"]}\n metric={t(\"neetoMolecules.insights.metrics.avgTimeToComplete\")}\n timeSuffix={t(\"neetoMolecules.insights.mins\")}\n value={averageSubmissionTime}\n />\n </div>\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3\">\n <MetaInfo\n data={devices}\n defaultItems={DEFAULT_DEVICES}\n type={t(\"neetoMolecules.insights.devices\")}\n />\n <MetaInfo\n data={operatingSystems}\n defaultItems={DEFAULT_OS}\n type={t(\"neetoMolecules.insights.os\")}\n />\n <MetaInfo\n data={browsers}\n defaultItems={DEFAULT_BROWSERS}\n type={t(\"neetoMolecules.insights.browsers\")}\n />\n </div>\n </div>\n );\n};\n\nInsights.propTypes = {\n /**\n * Object containing metrics and statistics for insights\n */\n insightsData: PropTypes.shape({\n visitCount: PropTypes.number,\n startCount: PropTypes.number,\n submissionCount: PropTypes.number,\n completionRate: PropTypes.number,\n averageSubmissionTime: PropTypes.shape({\n h: PropTypes.number,\n m: PropTypes.number,\n s: PropTypes.number,\n }),\n devices: PropTypes.shape({\n desktop: PropTypes.number,\n smartphone: PropTypes.number,\n }),\n operatingSystems: PropTypes.shape({\n mac: PropTypes.number,\n windows: PropTypes.number,\n }),\n browsers: PropTypes.shape({\n chrome: PropTypes.number,\n safari: PropTypes.number,\n }),\n }),\n /**\n * Indicates whether insights data is currently being fetched from an API\n */\n isLoading: PropTypes.bool,\n /**\n * The state corresponding to the currently selected date range.\n */\n timePeriod: PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.object,\n }),\n /**\n * The setter method for `timePeriod` state.\n */\n setTimePeriod: PropTypes.func,\n /**\n * Object containing explanatory text for each metric, providing additional context that can help users understand the significance of the metrics displayed.\n */\n helpTexts: PropTypes.shape({\n visitCount: PropTypes.string,\n startCount: PropTypes.string,\n submissions: PropTypes.string,\n completionRate: PropTypes.string,\n averageSubmissionTime: PropTypes.string,\n }),\n /**\n * Displays a warning to indicate that the insights may not be accurate, as the insights integration occurred after the record's creation.\n */\n showWarningMessage: PropTypes.bool,\n};\n\nexport default Insights;\n"],"names":["DEFAULT_DEVICES","label","t","value","DEFAULT_OS","DEFAULT_BROWSERS","startDate","endDate","rangeType","PercentageBar","_ref","React","createElement","Fragment","className","style","width","concat","Typography","memo","MetaInfoItem","name","textTransform","DataDistribution","data","map","_ref2","key","getSum","searchKey","sum","includes","transformInsights","defaultItems","othersData","Object","keys","filter","existsBy","defaultData","MetaInfo","type","_useTranslation","useTranslation","_transformInsights","othersSum","values","pluck","weight","Tooltip","content","disabled","position","TimeItem","suffix","lineHeight","MetricItem","metric","helpText","isTime","isPercentage","renderTime","hours","h","minutes","m","seconds","s","showSeconds","HelpPopover","description","Insights","insightsData","isLoading","timePeriod","setTimePeriod","_ref$helpTexts","helpTexts","_ref$showWarningMessa","showWarningMessage","visitCount","startCount","submissionCount","completionRate","averageSubmissionTime","devices","operatingSystems","browsers","PageLoader","Warning","size","DateRangeFilter","timeSuffix"],"mappings":"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"}
|
|
@@ -0,0 +1,311 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var neetoIcons = require('@bigbinary/neeto-icons');
|
|
5
|
+
var neetoui = require('@bigbinary/neetoui');
|
|
6
|
+
var reactI18next = require('react-i18next');
|
|
7
|
+
var DateRangeFilter = require('./DateRangeFilter.js');
|
|
8
|
+
var PageLoader = require('./PageLoader.js');
|
|
9
|
+
var i18next = require('i18next');
|
|
10
|
+
var ramda = require('ramda');
|
|
11
|
+
var neetoCist = require('@bigbinary/neeto-cist');
|
|
12
|
+
var HelpPopover = require('./HelpPopover.js');
|
|
13
|
+
require('./slicedToArray-f320d9e7.js');
|
|
14
|
+
require('dayjs');
|
|
15
|
+
require('@bigbinary/neeto-commons-frontend/initializers');
|
|
16
|
+
require('./extends-1b35a664.js');
|
|
17
|
+
require('./objectWithoutProperties-2fed2d7d.js');
|
|
18
|
+
require('./inject-css-80a5faa3.js');
|
|
19
|
+
require('./defineProperty-886ed289.js');
|
|
20
|
+
require('classnames');
|
|
21
|
+
|
|
22
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
|
+
|
|
24
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
25
|
+
|
|
26
|
+
var DEFAULT_DEVICES = [{
|
|
27
|
+
label: i18next.t("neetoMolecules.insights.labels.devices.desktop"),
|
|
28
|
+
value: "desktop"
|
|
29
|
+
}, {
|
|
30
|
+
label: i18next.t("neetoMolecules.insights.labels.devices.mobile"),
|
|
31
|
+
value: "smartphone"
|
|
32
|
+
}];
|
|
33
|
+
var DEFAULT_OS = [{
|
|
34
|
+
label: i18next.t("neetoMolecules.insights.labels.os.macos"),
|
|
35
|
+
value: "mac"
|
|
36
|
+
}, {
|
|
37
|
+
label: i18next.t("neetoMolecules.insights.labels.os.windows"),
|
|
38
|
+
value: "windows"
|
|
39
|
+
}];
|
|
40
|
+
var DEFAULT_BROWSERS = [{
|
|
41
|
+
label: i18next.t("neetoMolecules.insights.labels.browsers.chrome"),
|
|
42
|
+
value: "chrome"
|
|
43
|
+
}, {
|
|
44
|
+
label: i18next.t("neetoMolecules.insights.labels.browsers.safari"),
|
|
45
|
+
value: "safari"
|
|
46
|
+
}];
|
|
47
|
+
({
|
|
48
|
+
label: i18next.t("neetoMolecules.insights.labels.allTime"),
|
|
49
|
+
value: {
|
|
50
|
+
startDate: null,
|
|
51
|
+
endDate: null,
|
|
52
|
+
rangeType: "all"
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
var PercentageBar = function PercentageBar(_ref) {
|
|
57
|
+
var value = _ref.value;
|
|
58
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, value && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
59
|
+
className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2",
|
|
60
|
+
style: {
|
|
61
|
+
width: "".concat(value, "%")
|
|
62
|
+
}
|
|
63
|
+
}), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
64
|
+
style: "body3"
|
|
65
|
+
}, value, "%"));
|
|
66
|
+
};
|
|
67
|
+
var PercentageBar$1 = /*#__PURE__*/React.memo(PercentageBar);
|
|
68
|
+
|
|
69
|
+
var MetaInfoItem = function MetaInfoItem(_ref) {
|
|
70
|
+
var name = _ref.name,
|
|
71
|
+
value = _ref.value;
|
|
72
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
73
|
+
style: "body2",
|
|
74
|
+
textTransform: "capitalize"
|
|
75
|
+
}, name), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
76
|
+
className: "col-span-3 flex items-center gap-2"
|
|
77
|
+
}, /*#__PURE__*/React__default["default"].createElement(PercentageBar$1, {
|
|
78
|
+
value: value
|
|
79
|
+
})));
|
|
80
|
+
};
|
|
81
|
+
var MetaInfoItem$1 = /*#__PURE__*/React.memo(MetaInfoItem);
|
|
82
|
+
|
|
83
|
+
var DataDistribution = function DataDistribution(_ref) {
|
|
84
|
+
var data = _ref.data;
|
|
85
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
86
|
+
className: "grid grid-cols-4 gap-2"
|
|
87
|
+
}, data.map(function (_ref2) {
|
|
88
|
+
var name = _ref2.name,
|
|
89
|
+
value = _ref2.value;
|
|
90
|
+
return /*#__PURE__*/React__default["default"].createElement(MetaInfoItem$1, {
|
|
91
|
+
name: name,
|
|
92
|
+
value: value,
|
|
93
|
+
key: name
|
|
94
|
+
});
|
|
95
|
+
}));
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
var getSum = function getSum(data, searchKey) {
|
|
99
|
+
var sum = 0;
|
|
100
|
+
for (var key in data) {
|
|
101
|
+
if (key.includes(searchKey)) sum += data[key];
|
|
102
|
+
}
|
|
103
|
+
return sum;
|
|
104
|
+
};
|
|
105
|
+
var transformInsights = function transformInsights(data, defaultItems) {
|
|
106
|
+
var othersData = Object.keys(data).filter(function (key) {
|
|
107
|
+
return !neetoCist.existsBy({
|
|
108
|
+
value: key
|
|
109
|
+
}, defaultItems);
|
|
110
|
+
}).map(function (key) {
|
|
111
|
+
return {
|
|
112
|
+
name: key,
|
|
113
|
+
value: data[key]
|
|
114
|
+
};
|
|
115
|
+
});
|
|
116
|
+
var defaultData = defaultItems.map(function (_ref) {
|
|
117
|
+
var label = _ref.label,
|
|
118
|
+
value = _ref.value;
|
|
119
|
+
return {
|
|
120
|
+
name: label,
|
|
121
|
+
value: getSum(data, value) || 0
|
|
122
|
+
};
|
|
123
|
+
});
|
|
124
|
+
return {
|
|
125
|
+
defaultData: defaultData,
|
|
126
|
+
othersData: othersData
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
var MetaInfo = function MetaInfo(_ref) {
|
|
131
|
+
var type = _ref.type,
|
|
132
|
+
data = _ref.data,
|
|
133
|
+
defaultItems = _ref.defaultItems;
|
|
134
|
+
var _useTranslation = reactI18next.useTranslation(),
|
|
135
|
+
t = _useTranslation.t;
|
|
136
|
+
var _transformInsights = transformInsights(data, defaultItems),
|
|
137
|
+
defaultData = _transformInsights.defaultData,
|
|
138
|
+
othersData = _transformInsights.othersData;
|
|
139
|
+
var othersSum = ramda.sum(ramda.values(ramda.pluck("value", othersData)));
|
|
140
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
141
|
+
className: "neeto-ui-bg-gray-100 neeto-ui-rounded p-4"
|
|
142
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
143
|
+
className: "mb-4",
|
|
144
|
+
style: "h6",
|
|
145
|
+
textTransform: "uppercase",
|
|
146
|
+
weight: "bold"
|
|
147
|
+
}, type), /*#__PURE__*/React__default["default"].createElement(DataDistribution, {
|
|
148
|
+
data: defaultData
|
|
149
|
+
}), /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
|
|
150
|
+
content: /*#__PURE__*/React__default["default"].createElement(DataDistribution, {
|
|
151
|
+
data: othersData
|
|
152
|
+
}),
|
|
153
|
+
disabled: !othersSum,
|
|
154
|
+
position: "bottom"
|
|
155
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
156
|
+
className: "mt-2 grid grid-cols-4 gap-2"
|
|
157
|
+
}, /*#__PURE__*/React__default["default"].createElement(MetaInfoItem$1, {
|
|
158
|
+
name: t("neetoMolecules.insights.others"),
|
|
159
|
+
value: othersSum
|
|
160
|
+
}))));
|
|
161
|
+
};
|
|
162
|
+
var MetaInfo$1 = /*#__PURE__*/React.memo(MetaInfo);
|
|
163
|
+
|
|
164
|
+
var TimeItem = function TimeItem(_ref) {
|
|
165
|
+
var value = _ref.value,
|
|
166
|
+
suffix = _ref.suffix;
|
|
167
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
168
|
+
className: "flex items-end",
|
|
169
|
+
"data-testid": "time-item"
|
|
170
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
171
|
+
className: "mr-1",
|
|
172
|
+
style: "h1",
|
|
173
|
+
weight: "semibold"
|
|
174
|
+
}, value), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
175
|
+
lineHeight: "loose",
|
|
176
|
+
style: "body2"
|
|
177
|
+
}, suffix));
|
|
178
|
+
};
|
|
179
|
+
var TimeItem$1 = /*#__PURE__*/React.memo(TimeItem);
|
|
180
|
+
|
|
181
|
+
var MetricItem = function MetricItem(_ref) {
|
|
182
|
+
var metric = _ref.metric,
|
|
183
|
+
value = _ref.value,
|
|
184
|
+
helpText = _ref.helpText,
|
|
185
|
+
isTime = _ref.isTime,
|
|
186
|
+
isPercentage = _ref.isPercentage;
|
|
187
|
+
var renderTime = function renderTime(value) {
|
|
188
|
+
var hours = value.h,
|
|
189
|
+
minutes = value.m,
|
|
190
|
+
seconds = value.s;
|
|
191
|
+
var showSeconds = !hours && !minutes;
|
|
192
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
193
|
+
className: "flex gap-2"
|
|
194
|
+
}, !!hours && /*#__PURE__*/React__default["default"].createElement(TimeItem$1, {
|
|
195
|
+
suffix: "H",
|
|
196
|
+
value: hours
|
|
197
|
+
}), !!minutes && /*#__PURE__*/React__default["default"].createElement(TimeItem$1, {
|
|
198
|
+
suffix: "M",
|
|
199
|
+
value: minutes
|
|
200
|
+
}), (!!seconds || showSeconds) && /*#__PURE__*/React__default["default"].createElement(TimeItem$1, {
|
|
201
|
+
suffix: "S",
|
|
202
|
+
value: seconds
|
|
203
|
+
}));
|
|
204
|
+
};
|
|
205
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
206
|
+
className: "nf-insights__metric-item neeto-ui-border-gray-200 border-b pb-4"
|
|
207
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
208
|
+
className: "flex items-center justify-between gap-2"
|
|
209
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
210
|
+
className: "flex items-end"
|
|
211
|
+
}, isTime ? renderTime(value) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
212
|
+
className: "mr-1",
|
|
213
|
+
"data-testid": "insights-count",
|
|
214
|
+
style: "h1",
|
|
215
|
+
weight: "semibold"
|
|
216
|
+
}, value || 0, isPercentage ? "%" : "")), helpText && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(HelpPopover, {
|
|
217
|
+
description: helpText
|
|
218
|
+
}))), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
219
|
+
className: "neeto-ui-text-gray-700",
|
|
220
|
+
"data-cy": "insights-type",
|
|
221
|
+
style: "body2"
|
|
222
|
+
}, metric));
|
|
223
|
+
};
|
|
224
|
+
var MetricItem$1 = /*#__PURE__*/React.memo(MetricItem);
|
|
225
|
+
|
|
226
|
+
var Insights = function Insights(_ref) {
|
|
227
|
+
var insightsData = _ref.insightsData,
|
|
228
|
+
isLoading = _ref.isLoading,
|
|
229
|
+
timePeriod = _ref.timePeriod,
|
|
230
|
+
setTimePeriod = _ref.setTimePeriod,
|
|
231
|
+
_ref$helpTexts = _ref.helpTexts,
|
|
232
|
+
helpTexts = _ref$helpTexts === void 0 ? {} : _ref$helpTexts,
|
|
233
|
+
_ref$showWarningMessa = _ref.showWarningMessage,
|
|
234
|
+
showWarningMessage = _ref$showWarningMessa === void 0 ? false : _ref$showWarningMessa;
|
|
235
|
+
var _useTranslation = reactI18next.useTranslation(),
|
|
236
|
+
t = _useTranslation.t;
|
|
237
|
+
var visitCount = insightsData.visitCount,
|
|
238
|
+
startCount = insightsData.startCount,
|
|
239
|
+
submissionCount = insightsData.submissionCount,
|
|
240
|
+
completionRate = insightsData.completionRate,
|
|
241
|
+
averageSubmissionTime = insightsData.averageSubmissionTime,
|
|
242
|
+
devices = insightsData.devices,
|
|
243
|
+
operatingSystems = insightsData.operatingSystems,
|
|
244
|
+
browsers = insightsData.browsers;
|
|
245
|
+
if (isLoading) return /*#__PURE__*/React__default["default"].createElement(PageLoader, null);
|
|
246
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
247
|
+
className: "mx-auto pt-10",
|
|
248
|
+
"data-testid": "insights"
|
|
249
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
250
|
+
className: "mb-11 flex w-full items-center "
|
|
251
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
252
|
+
"data-cy": "submissions-insights-title",
|
|
253
|
+
style: "h2"
|
|
254
|
+
}, t("neetoMolecules.insights.title")), showWarningMessage && /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
|
|
255
|
+
content: t("neetoMolecules.insights.dataInaccuracyWarning"),
|
|
256
|
+
position: "right"
|
|
257
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
258
|
+
className: "ml-3"
|
|
259
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Warning, {
|
|
260
|
+
className: "neeto-ui-text-warning-500",
|
|
261
|
+
"data-testid": "insights-warning",
|
|
262
|
+
size: 20
|
|
263
|
+
}))), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
264
|
+
className: "ml-auto"
|
|
265
|
+
}, /*#__PURE__*/React__default["default"].createElement(DateRangeFilter, {
|
|
266
|
+
setTimePeriod: setTimePeriod,
|
|
267
|
+
timePeriod: timePeriod
|
|
268
|
+
}))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
269
|
+
className: "mb-8 flex flex-wrap justify-between"
|
|
270
|
+
}, /*#__PURE__*/React__default["default"].createElement(MetricItem$1, {
|
|
271
|
+
helpText: helpTexts["visitCount"],
|
|
272
|
+
metric: t("neetoMolecules.insights.metrics.visits"),
|
|
273
|
+
value: visitCount
|
|
274
|
+
}), /*#__PURE__*/React__default["default"].createElement(MetricItem$1, {
|
|
275
|
+
helpText: helpTexts["startCount"],
|
|
276
|
+
metric: t("neetoMolecules.insights.metrics.starts"),
|
|
277
|
+
value: startCount
|
|
278
|
+
}), /*#__PURE__*/React__default["default"].createElement(MetricItem$1, {
|
|
279
|
+
helpText: helpTexts["submissions"],
|
|
280
|
+
metric: t("neetoMolecules.insights.metrics.submissions"),
|
|
281
|
+
value: submissionCount
|
|
282
|
+
}), /*#__PURE__*/React__default["default"].createElement(MetricItem$1, {
|
|
283
|
+
isPercentage: true,
|
|
284
|
+
helpText: helpTexts["completionRate"],
|
|
285
|
+
metric: t("neetoMolecules.insights.metrics.completionRate"),
|
|
286
|
+
value: completionRate
|
|
287
|
+
}), /*#__PURE__*/React__default["default"].createElement(MetricItem$1, {
|
|
288
|
+
isTime: true,
|
|
289
|
+
helpText: helpTexts["averageSubmissionTime"],
|
|
290
|
+
metric: t("neetoMolecules.insights.metrics.avgTimeToComplete"),
|
|
291
|
+
timeSuffix: t("neetoMolecules.insights.mins"),
|
|
292
|
+
value: averageSubmissionTime
|
|
293
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
294
|
+
className: "grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3"
|
|
295
|
+
}, /*#__PURE__*/React__default["default"].createElement(MetaInfo$1, {
|
|
296
|
+
data: devices,
|
|
297
|
+
defaultItems: DEFAULT_DEVICES,
|
|
298
|
+
type: t("neetoMolecules.insights.devices")
|
|
299
|
+
}), /*#__PURE__*/React__default["default"].createElement(MetaInfo$1, {
|
|
300
|
+
data: operatingSystems,
|
|
301
|
+
defaultItems: DEFAULT_OS,
|
|
302
|
+
type: t("neetoMolecules.insights.os")
|
|
303
|
+
}), /*#__PURE__*/React__default["default"].createElement(MetaInfo$1, {
|
|
304
|
+
data: browsers,
|
|
305
|
+
defaultItems: DEFAULT_BROWSERS,
|
|
306
|
+
type: t("neetoMolecules.insights.browsers")
|
|
307
|
+
})));
|
|
308
|
+
};
|
|
309
|
+
|
|
310
|
+
module.exports = Insights;
|
|
311
|
+
//# sourceMappingURL=Insights.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Insights.js","sources":["../../src/components/Insights/constants.js","../../src/components/Insights/MetaInfo/PercentageBar.jsx","../../src/components/Insights/MetaInfo/MetaInfoItem.jsx","../../src/components/Insights/MetaInfo/DataDistribution.jsx","../../src/components/Insights/utils.js","../../src/components/Insights/MetaInfo/index.jsx","../../src/components/Insights/TimeItem.jsx","../../src/components/Insights/MetricItem.jsx","../../src/components/Insights/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\n\nexport const DEFAULT_DEVICES = [\n {\n label: t(\"neetoMolecules.insights.labels.devices.desktop\"),\n value: \"desktop\",\n },\n {\n label: t(\"neetoMolecules.insights.labels.devices.mobile\"),\n value: \"smartphone\",\n },\n];\n\nexport const DEFAULT_OS = [\n { label: t(\"neetoMolecules.insights.labels.os.macos\"), value: \"mac\" },\n {\n label: t(\"neetoMolecules.insights.labels.os.windows\"),\n value: \"windows\",\n },\n];\n\nexport const DEFAULT_BROWSERS = [\n {\n label: t(\"neetoMolecules.insights.labels.browsers.chrome\"),\n value: \"chrome\",\n },\n {\n label: t(\"neetoMolecules.insights.labels.browsers.safari\"),\n value: \"safari\",\n },\n];\n\nexport const INITIAL_TIME_PERIOD_VALUE = {\n label: t(\"neetoMolecules.insights.labels.allTime\"),\n value: { startDate: null, endDate: null, rangeType: \"all\" },\n};\n","import React, { memo } from \"react\";\n\nimport { Typography } from \"neetoui\";\n\nconst PercentageBar = ({ value }) => (\n <>\n {value && (\n <div\n className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2\"\n style={{ width: `${value}%` }}\n />\n )}\n <Typography style=\"body3\">{value}%</Typography>\n </>\n);\n\nexport default memo(PercentageBar);\n","import React, { memo } from \"react\";\n\nimport { Typography } from \"neetoui\";\n\nimport PercentageBar from \"./PercentageBar\";\n\nconst MetaInfoItem = ({ name, value }) => (\n <>\n <Typography style=\"body2\" textTransform=\"capitalize\">\n {name}\n </Typography>\n <div className=\"col-span-3 flex items-center gap-2\">\n <PercentageBar {...{ value }} />\n </div>\n </>\n);\n\nexport default memo(MetaInfoItem);\n","import React from \"react\";\n\nimport MetaInfoItem from \"./MetaInfoItem\";\n\nconst DataDistribution = ({ data }) => (\n <div className=\"grid grid-cols-4 gap-2\">\n {data.map(({ name, value }) => (\n <MetaInfoItem {...{ name, value }} key={name} />\n ))}\n </div>\n);\n\nexport default DataDistribution;\n","import { existsBy } from \"neetocist\";\n\nconst getSum = (data, searchKey) => {\n let sum = 0;\n for (const key in data) {\n if (key.includes(searchKey)) sum += data[key];\n }\n\n return sum;\n};\n\nexport const transformInsights = (data, defaultItems) => {\n const othersData = Object.keys(data)\n .filter(key => !existsBy({ value: key }, defaultItems))\n .map(key => ({ name: key, value: data[key] }));\n\n const defaultData = defaultItems.map(({ label, value }) => ({\n name: label,\n value: getSum(data, value) || 0,\n }));\n\n return { defaultData, othersData };\n};\n","import React, { memo } from \"react\";\n\nimport { Tooltip, Typography } from \"neetoui\";\nimport { pluck, sum, values } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport DataDistribution from \"./DataDistribution\";\nimport MetaInfoItem from \"./MetaInfoItem\";\n\nimport { transformInsights } from \"../utils\";\n\nconst MetaInfo = ({ type, data, defaultItems }) => {\n const { t } = useTranslation();\n const { defaultData, othersData } = transformInsights(data, defaultItems);\n\n const othersSum = sum(values(pluck(\"value\", othersData)));\n\n return (\n <div className=\"neeto-ui-bg-gray-100 neeto-ui-rounded p-4\">\n <Typography\n className=\"mb-4\"\n style=\"h6\"\n textTransform=\"uppercase\"\n weight=\"bold\"\n >\n {type}\n </Typography>\n <DataDistribution data={defaultData} />\n <Tooltip\n content={<DataDistribution data={othersData} />}\n disabled={!othersSum}\n position=\"bottom\"\n >\n <div className=\"mt-2 grid grid-cols-4 gap-2\">\n <MetaInfoItem\n name={t(\"neetoMolecules.insights.others\")}\n value={othersSum}\n />\n </div>\n </Tooltip>\n </div>\n );\n};\n\nexport default memo(MetaInfo);\n","import React, { memo } from \"react\";\n\nimport { Typography } from \"neetoui\";\n\nconst TimeItem = ({ value, suffix }) => (\n <div className=\"flex items-end\" data-testid=\"time-item\">\n <Typography className=\"mr-1\" style=\"h1\" weight=\"semibold\">\n {value}\n </Typography>\n <Typography lineHeight=\"loose\" style=\"body2\">\n {suffix}\n </Typography>\n </div>\n);\n\nexport default memo(TimeItem);\n","import React, { memo } from \"react\";\n\nimport { Typography } from \"neetoui\";\n\nimport HelpPopover from \"components/HelpPopover\";\n\nimport TimeItem from \"./TimeItem\";\n\nconst MetricItem = ({ metric, value, helpText, isTime, isPercentage }) => {\n const renderTime = value => {\n const { h: hours, m: minutes, s: seconds } = value;\n const showSeconds = !hours && !minutes;\n\n return (\n <div className=\"flex gap-2\">\n {!!hours && <TimeItem suffix=\"H\" value={hours} />}\n {!!minutes && <TimeItem suffix=\"M\" value={minutes} />}\n {(!!seconds || showSeconds) && <TimeItem suffix=\"S\" value={seconds} />}\n </div>\n );\n };\n\n return (\n <div className=\"nf-insights__metric-item neeto-ui-border-gray-200 border-b pb-4\">\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"flex items-end\">\n {isTime ? (\n renderTime(value)\n ) : (\n <Typography\n className=\"mr-1\"\n data-testid=\"insights-count\"\n style=\"h1\"\n weight=\"semibold\"\n >\n {value || 0}\n {isPercentage ? \"%\" : \"\"}\n </Typography>\n )}\n </div>\n {helpText && (\n <div>\n <HelpPopover description={helpText} />\n </div>\n )}\n </div>\n <Typography\n className=\"neeto-ui-text-gray-700\"\n data-cy=\"insights-type\"\n style=\"body2\"\n >\n {metric}\n </Typography>\n </div>\n );\n};\n\nexport default memo(MetricItem);\n","import React from \"react\";\n\nimport { Warning } from \"neetoicons\";\nimport { Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport DateRangeFilter from \"components/DateRangeFilter\";\nimport PageLoader from \"components/PageLoader\";\n\nimport { DEFAULT_DEVICES, DEFAULT_BROWSERS, DEFAULT_OS } from \"./constants\";\nimport MetaInfo from \"./MetaInfo\";\nimport MetricItem from \"./MetricItem\";\n\nconst Insights = ({\n insightsData,\n isLoading,\n timePeriod,\n setTimePeriod,\n helpTexts = {},\n showWarningMessage = false,\n}) => {\n const { t } = useTranslation();\n\n const {\n visitCount,\n startCount,\n submissionCount,\n completionRate,\n averageSubmissionTime,\n devices,\n operatingSystems,\n browsers,\n } = insightsData;\n\n if (isLoading) return <PageLoader />;\n\n return (\n <div className=\"mx-auto pt-10\" data-testid=\"insights\">\n <div className=\"mb-11 flex w-full items-center \">\n <Typography data-cy=\"submissions-insights-title\" style=\"h2\">\n {t(\"neetoMolecules.insights.title\")}\n </Typography>\n {showWarningMessage && (\n <Tooltip\n content={t(\"neetoMolecules.insights.dataInaccuracyWarning\")}\n position=\"right\"\n >\n <span className=\"ml-3\">\n <Warning\n className=\"neeto-ui-text-warning-500\"\n data-testid=\"insights-warning\"\n size={20}\n />\n </span>\n </Tooltip>\n )}\n <span className=\"ml-auto\">\n <DateRangeFilter {...{ setTimePeriod, timePeriod }} />\n </span>\n </div>\n <div className=\"mb-8 flex flex-wrap justify-between\">\n <MetricItem\n helpText={helpTexts[\"visitCount\"]}\n metric={t(\"neetoMolecules.insights.metrics.visits\")}\n value={visitCount}\n />\n <MetricItem\n helpText={helpTexts[\"startCount\"]}\n metric={t(\"neetoMolecules.insights.metrics.starts\")}\n value={startCount}\n />\n <MetricItem\n helpText={helpTexts[\"submissions\"]}\n metric={t(\"neetoMolecules.insights.metrics.submissions\")}\n value={submissionCount}\n />\n <MetricItem\n isPercentage\n helpText={helpTexts[\"completionRate\"]}\n metric={t(\"neetoMolecules.insights.metrics.completionRate\")}\n value={completionRate}\n />\n <MetricItem\n isTime\n helpText={helpTexts[\"averageSubmissionTime\"]}\n metric={t(\"neetoMolecules.insights.metrics.avgTimeToComplete\")}\n timeSuffix={t(\"neetoMolecules.insights.mins\")}\n value={averageSubmissionTime}\n />\n </div>\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3\">\n <MetaInfo\n data={devices}\n defaultItems={DEFAULT_DEVICES}\n type={t(\"neetoMolecules.insights.devices\")}\n />\n <MetaInfo\n data={operatingSystems}\n defaultItems={DEFAULT_OS}\n type={t(\"neetoMolecules.insights.os\")}\n />\n <MetaInfo\n data={browsers}\n defaultItems={DEFAULT_BROWSERS}\n type={t(\"neetoMolecules.insights.browsers\")}\n />\n </div>\n </div>\n );\n};\n\nInsights.propTypes = {\n /**\n * Object containing metrics and statistics for insights\n */\n insightsData: PropTypes.shape({\n visitCount: PropTypes.number,\n startCount: PropTypes.number,\n submissionCount: PropTypes.number,\n completionRate: PropTypes.number,\n averageSubmissionTime: PropTypes.shape({\n h: PropTypes.number,\n m: PropTypes.number,\n s: PropTypes.number,\n }),\n devices: PropTypes.shape({\n desktop: PropTypes.number,\n smartphone: PropTypes.number,\n }),\n operatingSystems: PropTypes.shape({\n mac: PropTypes.number,\n windows: PropTypes.number,\n }),\n browsers: PropTypes.shape({\n chrome: PropTypes.number,\n safari: PropTypes.number,\n }),\n }),\n /**\n * Indicates whether insights data is currently being fetched from an API\n */\n isLoading: PropTypes.bool,\n /**\n * The state corresponding to the currently selected date range.\n */\n timePeriod: PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.object,\n }),\n /**\n * The setter method for `timePeriod` state.\n */\n setTimePeriod: PropTypes.func,\n /**\n * Object containing explanatory text for each metric, providing additional context that can help users understand the significance of the metrics displayed.\n */\n helpTexts: PropTypes.shape({\n visitCount: PropTypes.string,\n startCount: PropTypes.string,\n submissions: PropTypes.string,\n completionRate: PropTypes.string,\n averageSubmissionTime: PropTypes.string,\n }),\n /**\n * Displays a warning to indicate that the insights may not be accurate, as the insights integration occurred after the record's creation.\n */\n showWarningMessage: PropTypes.bool,\n};\n\nexport default Insights;\n"],"names":["DEFAULT_DEVICES","label","t","value","DEFAULT_OS","DEFAULT_BROWSERS","startDate","endDate","rangeType","PercentageBar","_ref","React","createElement","Fragment","className","style","width","concat","Typography","memo","MetaInfoItem","name","textTransform","DataDistribution","data","map","_ref2","key","getSum","searchKey","sum","includes","transformInsights","defaultItems","othersData","Object","keys","filter","existsBy","defaultData","MetaInfo","type","_useTranslation","useTranslation","_transformInsights","othersSum","values","pluck","weight","Tooltip","content","disabled","position","TimeItem","suffix","lineHeight","MetricItem","metric","helpText","isTime","isPercentage","renderTime","hours","h","minutes","m","seconds","s","showSeconds","HelpPopover","description","Insights","insightsData","isLoading","timePeriod","setTimePeriod","_ref$helpTexts","helpTexts","_ref$showWarningMessa","showWarningMessage","visitCount","startCount","submissionCount","completionRate","averageSubmissionTime","devices","operatingSystems","browsers","PageLoader","Warning","size","DateRangeFilter","timeSuffix"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neeto-molecules",
|
|
3
|
-
"version": "1.15.
|
|
3
|
+
"version": "1.15.9",
|
|
4
4
|
"description": "A package of reusable molecular components for neeto products.",
|
|
5
5
|
"repository": "git@github.com:bigbinary/neeto-molecules.git",
|
|
6
6
|
"author": "Amaljith K <amaljith.k@bigbinary.com>",
|
package/src/translations/en.json
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
+
"taxonomyDefaultLabels": {
|
|
3
|
+
"insightsEntity": {
|
|
4
|
+
"singular": "Form",
|
|
5
|
+
"plural": "Forms"
|
|
6
|
+
}
|
|
7
|
+
},
|
|
2
8
|
"neetoMolecules": {
|
|
3
9
|
"common": {
|
|
4
10
|
"actions": {
|
|
@@ -470,6 +476,41 @@
|
|
|
470
476
|
"removeButton": "Remove"
|
|
471
477
|
}
|
|
472
478
|
},
|
|
479
|
+
"insights": {
|
|
480
|
+
"title": "Insights",
|
|
481
|
+
"others": "Others",
|
|
482
|
+
"metrics": {
|
|
483
|
+
"completionRate": "Completion rate",
|
|
484
|
+
"avgTimeToComplete": "Avg. time to complete",
|
|
485
|
+
"submissions": "Submissions",
|
|
486
|
+
"visits": "Visits",
|
|
487
|
+
"starts": "Starts"
|
|
488
|
+
},
|
|
489
|
+
"helpTexts": {
|
|
490
|
+
"avgTimeToComplete": "Avg. time updates only with time duration feature enabled."
|
|
491
|
+
},
|
|
492
|
+
"browsers": "browsers",
|
|
493
|
+
"os": "os",
|
|
494
|
+
"devices": "devices",
|
|
495
|
+
"mins": "Mins",
|
|
496
|
+
"dataInaccuracyWarning": "Insights for this {{taxonomies.insightsEntity.singular}} might not be accurate as this {{taxonomies.insightsEntity.singular}} was created before the insights feature was introduced.",
|
|
497
|
+
"labels": {
|
|
498
|
+
"devices": {
|
|
499
|
+
"desktop": "Desktop",
|
|
500
|
+
"mobile": "Mobile"
|
|
501
|
+
},
|
|
502
|
+
"os": {
|
|
503
|
+
"macos": "MacOS",
|
|
504
|
+
"windows": "Windows"
|
|
505
|
+
},
|
|
506
|
+
"browsers": {
|
|
507
|
+
"chrome": "Chrome",
|
|
508
|
+
"safari": "Safari"
|
|
509
|
+
},
|
|
510
|
+
"allTime": "All time",
|
|
511
|
+
"custom": "Custom"
|
|
512
|
+
}
|
|
513
|
+
},
|
|
473
514
|
"themeSidebar": {
|
|
474
515
|
"theme_one": "theme",
|
|
475
516
|
"theme_other": "themes",
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { ButtonProps, DropdownProps, InputProps, TypographyProps } from "@bigbinary/neetoui";
|
|
2
|
+
import React from "react";
|
|
3
|
+
interface Time {
|
|
4
|
+
h: number;
|
|
5
|
+
m: number;
|
|
6
|
+
s: number;
|
|
7
|
+
}
|
|
8
|
+
interface Devices {
|
|
9
|
+
desktop: number;
|
|
10
|
+
smartphone: number;
|
|
11
|
+
[key: string]: number;
|
|
12
|
+
}
|
|
13
|
+
interface OperatingSystems {
|
|
14
|
+
mac: number;
|
|
15
|
+
windows: number;
|
|
16
|
+
[key: string]: number;
|
|
17
|
+
}
|
|
18
|
+
interface Browsers {
|
|
19
|
+
chrome: number;
|
|
20
|
+
safari: number;
|
|
21
|
+
[key: string]: number;
|
|
22
|
+
}
|
|
23
|
+
interface InsightsData {
|
|
24
|
+
visitCount: number;
|
|
25
|
+
startCount: number;
|
|
26
|
+
submissionCount: number;
|
|
27
|
+
completionRate: number;
|
|
28
|
+
averageSubmissionTime: Time;
|
|
29
|
+
devices: Devices;
|
|
30
|
+
operatingSystems: OperatingSystems;
|
|
31
|
+
browsers: Browsers;
|
|
32
|
+
}
|
|
33
|
+
interface TimePeriodValue {
|
|
34
|
+
startDate: Dayjs;
|
|
35
|
+
endDate: Dayjs;
|
|
36
|
+
rangeType: string;
|
|
37
|
+
}
|
|
38
|
+
interface TimePeriod {
|
|
39
|
+
label: string;
|
|
40
|
+
value: TimePeriodValue;
|
|
41
|
+
}
|
|
42
|
+
interface HelpTexts {
|
|
43
|
+
visitCount?: string;
|
|
44
|
+
startCount?: string;
|
|
45
|
+
submissions?: string;
|
|
46
|
+
completionRate?: string;
|
|
47
|
+
averageSubmissionTime?: string;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
*
|
|
51
|
+
* The Insights molecule displays key record insights, including a date range
|
|
52
|
+
*
|
|
53
|
+
* filter, offering a quick overview of user engagement in a user-friendly format.
|
|
54
|
+
*
|
|
55
|
+
* 
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
*
|
|
59
|
+
* import Insights from "@bigbinary/neeto-molecules/Insights";
|
|
60
|
+
*
|
|
61
|
+
* const DEFAULT_DATE_RANGE = {
|
|
62
|
+
* label: "All time",
|
|
63
|
+
* value: { startDate: null, endDate: null, rangeType: "all" },
|
|
64
|
+
* };
|
|
65
|
+
*
|
|
66
|
+
* const Summary = () => {
|
|
67
|
+
* const [timePeriod, setTimePeriod] = useState(DEFAULT_DATE_RANGE);
|
|
68
|
+
*
|
|
69
|
+
* return (
|
|
70
|
+
* <Insights
|
|
71
|
+
* {...{ setTimePeriod, timePeriod, isLoading }}
|
|
72
|
+
* showWarningMessage
|
|
73
|
+
* insightsData={{
|
|
74
|
+
* visitCount: 6,
|
|
75
|
+
* startCount: 6,
|
|
76
|
+
* submissionCount: 6,
|
|
77
|
+
* completionRate: 100,
|
|
78
|
+
* averageSubmissionTime: { h: 0, m: 11, s: 37 },
|
|
79
|
+
* devices: { desktop: 80, smartphone: 20 },
|
|
80
|
+
* operatingSystems: { mac: 40, windows: 40, android: 15, ios: 5 },
|
|
81
|
+
* browsers: { chrome: 60, safari: 30, opera: 10 },
|
|
82
|
+
* }}
|
|
83
|
+
* helpTexts={{
|
|
84
|
+
* averageSubmissionTime:
|
|
85
|
+
* "Avg. time updates only with time duration feature enabled.",
|
|
86
|
+
* }}
|
|
87
|
+
* />
|
|
88
|
+
* );
|
|
89
|
+
* };
|
|
90
|
+
*
|
|
91
|
+
* export default Summary;
|
|
92
|
+
* @endexample
|
|
93
|
+
* Note: The value of timePeriod state will contain the startDate, endDate and
|
|
94
|
+
*
|
|
95
|
+
* range_type of the selected filter. This can be passed into the filterParams of
|
|
96
|
+
*
|
|
97
|
+
* your API.
|
|
98
|
+
*
|
|
99
|
+
*/
|
|
100
|
+
const Insights: React.FC<{
|
|
101
|
+
insightsData: InsightsData;
|
|
102
|
+
isLoading: boolean;
|
|
103
|
+
timePeriod: TimePeriod;
|
|
104
|
+
setTimePeriod: (timePeriod: TimePeriod) => void;
|
|
105
|
+
helpTexts?: HelpTexts;
|
|
106
|
+
showWarningMessage: boolean;
|
|
107
|
+
}>;
|
|
108
|
+
export default Insights;
|