Merge pull request #354 from aesirxio/develop

Deploy to master

packages/aesirx-bi-app/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "AesirX - DMA",
-  "name": "AesirX - DMA",
+  "short_name": "AesirX BI App",
+  "name": "AesirX BI App",
   "icons": [
     {
       "src": "favicon.ico",

packages/aesirx-bi-app/src/components/BarChartComponent/index.jsx

@@ -84,7 +84,7 @@ const BarChartComponent = ({
   const renderLegend = (props) => {
     const { payload } = props;
     return (
-      <ul className="ms-3 mt-2 d-flex align-items-center">
+      <ul className="ms-3 mt-2 d-flex align-items-center flex-wrap">
         {payload.map((entry, index) => (
           <li key={`item-${index}`} className="me-24 fs-14 d-flex align-items-center">
             <div

packages/aesirx-bi-app/src/components/BehaviorTable/index.jsx

@@ -16,6 +16,7 @@ const BehaviorTable = ({
   sortAPI = true,
   handleSort,
   sortBy,
+  tdClass,
   // handleSearch,
   limit,
 }) => {
@@ -78,6 +79,7 @@ const BehaviorTable = ({
             });
           }}
           limit={limit}
+          tdClass={tdClass}
         />
       ) : (
         <div className="position-relative ChartWrapper bg-white rounded-3 shadow-sm">

packages/aesirx-bi-app/src/components/ComponentCard/index.jsx

@@ -4,6 +4,9 @@ import { AesirXSelect, PulseLoaderComponent } from 'aesirx-uikit';
 
 import PAGE_STATUS from '../../constants/PageStatus';
 import { env } from 'aesirx-lib';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import { Tooltip } from 'react-bootstrap';
 const ComponentCard = ({
   title,
   icon,
@@ -15,6 +18,7 @@ const ComponentCard = ({
   options,
   defaultValue,
   loading,
+  tooltip,
 }) => {
   const [defaultFilter, setDefaultFilter] = useState(defaultValue ?? null);
   const [selectedValue, setSelectedValue] = useState(value);
@@ -53,6 +57,17 @@ const ComponentCard = ({
             </div>
           )}
           <h6 className="mb-0 fw-medium text-gray-900">{title}</h6>
+          {tooltip && (
+            <>
+              <FontAwesomeIcon
+                data-tooltip-id="tooltipTable"
+                data-tooltip-content={tooltip}
+                className="mx-sm fs-12 mb-1"
+                icon={faCircleInfo}
+              />
+              <Tooltip id="tooltipTable" />
+            </>
+          )}
         </div>
         {options && (
           <AesirXSelect

packages/aesirx-bi-app/src/components/StackedBarChartComponent/index.jsx

@@ -95,12 +95,12 @@ const StackedBarChartComponent = ({
     const { payload } = props;
 
     return (
-      <ul className="ms-3 mt-2 d-flex align-items-center">
+      <ul className="ms-3 mt-2 d-flex align-items-center flex-wrap">
         {payload.map((entry, index) => (
           <li key={`item-${index}`} className="me-24 fs-14 d-flex align-items-center">
             <div
               className="rounded-circle me-8px d-flex align-items-center justify-content-center"
-              style={{ backgroundColor: entry?.color, width: 14, height: 14 }}
+              style={{ backgroundColor: entry?.color ?? '#000', width: 14, height: 14 }}
             ></div>
             {entry.value}
           </li>

packages/aesirx-bi-app/src/components/Table/index.jsx

@@ -37,6 +37,7 @@ const Table = ({
   status,
   hasSubRow,
   idKey,
+  tdClass,
   ...props
 }) => {
   const {
@@ -243,7 +244,7 @@ const Table = ({
                             <td
                               key={index}
                               {...cell.getCellProps({ style: { width: cell.column.width } })}
-                              className="py-2 wb-all align-middle"
+                              className={`py-2 wb-all ${tdClass ? tdClass : 'align-middle'}`}
                             >
                               {cell.render('Cell')}
                             </td>

packages/aesirx-bi-app/src/containers/AcquisitionCampaignPage/AcquisitionCampaign.jsx

@@ -83,9 +83,36 @@ const AcquisitionCampaignPage = observer((props) => {
             loading={statusAttribute}
             height={390}
             data={dataAttribute?.toAreaChartAcquisitionCampaign()}
-            colors={['#1AB394', '#9747FF', '#479CFF', '#024E6D']}
-            areaColors={['#1AB394', '#9747FF', '#479CFF', '#024E6D']}
-            lineColors={['#1AB394', '#9747FF', '#479CFF', '#024E6D']}
+            colors={[
+              '#1AB394',
+              '#9747FF',
+              '#479CFF',
+              '#024E6D',
+              '#3F51B5',
+              '#FFC107',
+              '#4CAF50',
+              '#FF5722',
+            ]}
+            areaColors={[
+              '#1AB394',
+              '#9747FF',
+              '#479CFF',
+              '#024E6D',
+              '#3F51B5',
+              '#FFC107',
+              '#4CAF50',
+              '#FF5722',
+            ]}
+            lineColors={[
+              '#1AB394',
+              '#9747FF',
+              '#479CFF',
+              '#024E6D',
+              '#3F51B5',
+              '#FFC107',
+              '#4CAF50',
+              '#FF5722',
+            ]}
             lines={dataAttribute?.getListLineAcquisitionCampaign()}
             filterData={dataAttribute?.getFilterNameAcquisitionCampaign()}
             tooltipComponent={{
@@ -98,7 +125,7 @@ const AcquisitionCampaignPage = observer((props) => {
         </div>
         <div className="col-lg-6 col-12">
           <BarChartComponent
-            chartTitle={t('txt_event') + ' count'}
+            chartTitle={t('txt_campaign') + ' count'}
             height={390}
             bars={['number']}
             barColors={['#2C94EA']}

packages/aesirx-bi-app/src/containers/AcquisitionCampaignPage/AcquisitionCampaignModel/AcquisitionCampaignModel.js

@@ -102,7 +102,7 @@ class AcquisitionCampaignModel {
     const date = {
       all: dateRange.map((date) => {
         return {
-          name: date && moment(date, 'YYYY-MM-DD').format('MM-DD'),
+          name: date && moment(date, 'YYYY-MM-DD').format('DD'),
           ...Object.keys(transform)
             .map((item) => {
               const filterDate = transform[item]?.filter(
@@ -125,7 +125,7 @@ class AcquisitionCampaignModel {
                 (_item) => moment(_item[BI_VISITORS_FIELD_KEY.DATE]).format('YYYY-MM-DD') === date
               );
               return {
-                name: date && moment(date, 'YYYY-MM-DD').format('MM-DD'),
+                name: date && moment(date, 'YYYY-MM-DD').format('DD'),
                 [item]: filterDate?.length
                   ? filterDate[0]?.values?.find((e) => e?.value === item)?.count
                   : 0,

packages/aesirx-bi-app/src/containers/AcquisitionCampaignPage/AcquisitionCampaignViewModels/AcquisitionCampaignListModel.js

@@ -107,7 +107,7 @@ class AcquisitionCampaignListModel {
     };
 
     this.dateFilter = { ...this.dateFilter, ...dateRangeFilter };
-    this.acquisitionCampaignStore.getAttributeTable(
+    this.acquisitionCampaignStore.getAttribute(
       this.dataFilterTable,
       dateRangeFilter,
       this.callbackOnDataSuccessHandler,
@@ -119,6 +119,12 @@ class AcquisitionCampaignListModel {
       this.callbackOnDataAttributeSuccessHandler,
       this.callbackOnErrorHandler
     );
+    this.acquisitionCampaignStore.getAttributeList(
+      this.dataFilterAttributeList,
+      dateRangeFilter,
+      this.callbackOnDataAttributeSuccessHandler,
+      this.callbackOnErrorHandler
+    );
   };
 
   handleFilterTable = async (dataFilter) => {

packages/aesirx-bi-app/src/containers/AcquisitionDetail/AcquisitionDetailModel/AcquisitionDetailModel.js

@@ -55,7 +55,7 @@ class AcquisitionDetailModel {
         this.data?.length &&
         this.data?.find((_item) => moment(_item.date).format('YYYY-MM-DD') === date);
       return {
-        name: date && moment(date, 'YYYY-MM-DD').format('DD MMM'),
+        name: date && moment(date, 'YYYY-MM-DD').format('DD'),
         visits: filterDate?.[BI_VISITORS_FIELD_KEY.VISITS] ?? 0,
         acquisition_views: filterDate?.[BI_VISITORS_FIELD_KEY.TOTAL_PAGE_VIEWS] ?? 0,
         unique_visits: filterDate?.['unique_visits'] ?? 0,
@@ -206,13 +206,18 @@ class AcquisitionDetailModel {
                       }}
                     ></div>
                     <div className="z-1">
-                      {browserImg && (
+                      {browserImg ? (
                         <Image
                           className={`me-12px`}
                           style={{ width: 22, height: 22 }}
                           src={env.PUBLIC_URL + browserImg}
                           alt={'icons'}
                         />
+                      ) : (
+                        <div
+                          style={{ width: 22, height: 22 }}
+                          className="d-inline-block me-12px"
+                        ></div>
                       )}
                       {cell?.value === '' ? 'Unknown' : cell?.value}
                     </div>
@@ -286,9 +291,9 @@ class AcquisitionDetailModel {
               <>
                 {column.id === BI_DEVICES_FIELD_KEY.DEVICE ? (
                   <div
-                    className={
-                      'd-flex align-items-center text-capitalize py-sm px-20 position-relative'
-                    }
+                    className={`d-flex align-items-center py-sm px-20 position-relative ${
+                      cell?.value === 'iPhone' || cell?.value === 'iPad' ? '' : 'text-capitalize'
+                    }`}
                   >
                     <div
                       className="position-absolute top-0 start-0 h-100 z-0"

packages/aesirx-bi-app/src/containers/AcquisitionDetail/Component/TopTable.jsx

@@ -69,6 +69,7 @@ const TopTableComponent = (props) => {
                     data-tooltip-id="tooltipTable"
                     data-tooltip-content={t(tooltip)}
                     className="mx-sm fs-12 mb-1"
+                    data-tooltip-place={`${index === data?.header?.length - 1 ? 'top-end' : 'top'}`}
                     icon={faCircleInfo}
                   />
                   <Tooltip id="tooltipTable" />

packages/aesirx-bi-app/src/containers/AcquisitionPage/Acquisition.jsx

@@ -74,6 +74,7 @@ const AcquisitionPage = observer(
           ),
           isIncrease: false,
           loading: this.acquisitionListViewModel.statusMetrics,
+          tooltip: t('txt_tooltip_visitors'),
         },
 
         {
@@ -86,6 +87,7 @@ const AcquisitionPage = observer(
           ),
           isIncrease: false,
           loading: this.acquisitionListViewModel?.statusMetrics,
+          tooltip: t('txt_tooltip_page_session'),
         },
         {
           className: 'col-3 mb-24',
@@ -96,6 +98,7 @@ const AcquisitionPage = observer(
             ) + '%',
           isIncrease: false,
           loading: this.acquisitionListViewModel?.statusMetrics,
+          tooltip: t('txt_tooltip_bounce_rate'),
         },
         {
           className: 'col-3 mb-24',
@@ -114,12 +117,13 @@ const AcquisitionPage = observer(
               : '00:00:00') + 's',
           isIncrease: false,
           loading: this.acquisitionListViewModel.statusMetrics,
+          tooltip: t('txt_tooltip_avg_session_duration'),
         },
       ];
     };
 
     handleSort = async (column) => {
-      this.acquisitionListViewModel.getPages(
+      this.acquisitionListViewModel.getChannel(
         {
           'filter[domain]': this.context.biListViewModel.activeDomain,
         },
@@ -133,7 +137,7 @@ const AcquisitionPage = observer(
     };
 
     handleSearch = async (search) => {
-      this.acquisitionListViewModel.getPages(
+      this.acquisitionListViewModel.getChannel(
         {
           'filter[domain]': this.context.biListViewModel.activeDomain,
         },
@@ -146,7 +150,6 @@ const AcquisitionPage = observer(
     render() {
       const { t } = this.props;
       const card = this.generateCard();
-      console.log('teste', this.acquisitionListViewModel?.channelTableData?.list);
       return (
         <div className="py-4 px-4">
           <div className="d-flex align-items-center justify-content-between mb-24">
@@ -176,7 +179,7 @@ const AcquisitionPage = observer(
                 <div className="w-100">
                   {this.acquisitionListViewModel?.channelTableData?.list?.data?.length ? (
                     <PieChartComponent
-                      height={300}
+                      height={400}
                       data={this.acquisitionListViewModel?.channelTableData?.list?.toPieChart()}
                       status={this.acquisitionListViewModel?.statusTopTable}
                       colors={['#0066FF', '#4747EB', '#96C0FF', '#D5EEFF']}

packages/aesirx-bi-app/src/containers/AcquisitionPage/Component/TopTable.jsx

@@ -32,7 +32,7 @@ const TopTableComponent = (props) => {
         let tooltip = '';
         switch (item?.accessor) {
           case BI_SUMMARY_FIELD_KEY.NUMBER_OF_VISITORS:
-            tooltip = 'txt_tooltip_acquisition';
+            tooltip = 'txt_tooltip_visitors';
             break;
           case BI_SUMMARY_FIELD_KEY.NUMBER_OF_PAGE_VIEWS:
             tooltip = 'txt_tooltip_page_views';
@@ -69,6 +69,7 @@ const TopTableComponent = (props) => {
                     data-tooltip-id="tooltipTable"
                     data-tooltip-content={t(tooltip)}
                     className="mx-sm fs-12 mb-1"
+                    data-tooltip-place={`${index === data?.header?.length - 1 ? 'top-end' : 'top'}`}
                     icon={faCircleInfo}
                   />
                   <Tooltip id="tooltipTable" />