Real-time Visitors

packages/aesirx-bi-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aesirx-bi-app",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "license": "GPL-3.0-only",
   "author": "AesirX",
   "main": "dist/index.js",

packages/aesirx-bi-app/src/containers/Dashboard/Dashboard.jsx

@@ -35,6 +35,7 @@ const Dashboard = observer(
       this.dashboardListViewModel = this.viewModel
         ? this.viewModel.getDashboardListViewModel()
         : null;
+      this.realtimeInterval = null;
     }
 
     componentDidUpdate = (prevProps) => {
@@ -61,7 +62,7 @@ const Dashboard = observer(
           ?.reduce((acc, curr) => ({ ...acc, ...curr }), {}),
       });
       try {
-        setInterval(async () => {
+        this.realtimeInterval = setInterval(async () => {
           this.dashboardListViewModel.getLiveVisitorsTotal(
             {
               ...this.context.biListViewModel.activeDomain
@@ -82,12 +83,19 @@ const Dashboard = observer(
             },
             true
           );
-        }, 30000);
+        }, 15000);
       } catch (e) {
         console.log(e);
       }
     };
 
+    componentWillUnmount() {
+      if (this.realtimeInterval) {
+        clearInterval(this.realtimeInterval);
+        this.realtimeInterval = null;
+      }
+    }
+
     handleDateRangeChange = (startDate, endDate) => {
       this.dashboardListViewModel.handleFilterDateRange(startDate ?? endDate, endDate ?? startDate);
     };
@@ -228,14 +236,14 @@ const Dashboard = observer(
                           {this.props.integration ? (
                             <a
                               href="#"
-                              onClick={(e) => this.props.handleChangeLink(e, `/flow-list`)}
+                              onClick={(e) => this.props.handleChangeLink(e, `/visitors/realtime`)}
                               className={'text-secondary-50 text-nowrap fw-medium'}
                             >
                               {t('txt_view_more')}
                             </a>
                           ) : (
                             <Link
-                              to="/flow-list"
+                              to="/visitors/realtime"
                               className="text-secondary-50 text-nowrap fw-medium"
                             >
                               {t('txt_view_more')}

packages/aesirx-bi-app/src/containers/Dashboard/DashboardViewModels/DashboardListViewModel.js

@@ -115,6 +115,7 @@ class DashboardListViewModel {
     this.dashboardStore.getVisitors(
       {
         ...this.dataFilter,
+        'filter_not[visibility_change]': 'true',
         page_size: '1000',
       },
       dateRangeFilter,
@@ -248,6 +249,7 @@ class DashboardListViewModel {
       ...this.dataFilterPages,
       ...dataFilter,
       ...this.sortByAttribute,
+      'filter_not[visibility_change]': 'true',
     };
     const dateRangeFilter = { ...this.globalStoreViewModel.dateFilter, ...dateFilter };
 

packages/aesirx-bi-app/src/containers/RealTimePage/Component/Overview.jsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
+import { observer } from 'mobx-react';
+import { withRouter } from 'react-router-dom';
+import BarChartComponent from 'components/BarChartComponent';
+
+const OverviewComponent = observer(
+  class OverviewComponent extends Component {
+    constructor(props) {
+      super(props);
+      const { listViewModel } = props;
+      this.listViewModel = listViewModel ? listViewModel : null;
+      this.state = { loading: false };
+    }
+
+    render() {
+      const { t, status, bars, barColors, data, filterData } = this.props;
+      return (
+        <div className="position-relative h-100">
+          <BarChartComponent
+            height={450}
+            data={data}
+            colors={['#1AB394']}
+            layout="horizontal"
+            barColors={barColors}
+            bars={bars}
+            hiddenGrid={{ vertical: false }}
+            XAxisOptions={{ axisLine: true, padding: { left: 50, right: 50 } }}
+            defaultValue={{ label: 'Action', value: 'action' }}
+            options={[{ label: 'Action', value: 'action' }]}
+            loading={status}
+            tooltipComponent={{
+              header: t('txt_in_total'),
+              value: bars?.length === 1 && bars[0] + ':',
+            }}
+            status={status}
+            filterData={filterData}
+            isSelection={false}
+            isLegend={true}
+            filterButtons={['days', 'months', 'weeks']}
+            chartTitle={t('txt_statistics')}
+          />
+        </div>
+      );
+    }
+  }
+);
+export default withTranslation()(withRouter(OverviewComponent));

packages/aesirx-bi-app/src/containers/RealTimePage/Component/RealTimeTable.jsx

@@ -0,0 +1,107 @@
+import Table from '../../../components/Table';
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { Tooltip } from 'react-tooltip';
+import { PAGE_STATUS, RingLoaderComponent } from 'aesirx-uikit';
+import ComponentNoData from 'components/ComponentNoData';
+import { env } from 'aesirx-lib';
+import ComponentSVG from 'components/ComponentSVG';
+const RealTimeTable = (props) => {
+  const {
+    data,
+    t,
+    isPagination = true,
+    simplePagination = false,
+    pagination,
+    selectPage,
+    selectPageSize,
+    status,
+    limit,
+    isPaginationAPI = isPagination ? true : false,
+    sortAPI,
+    handleSort,
+    sortBy,
+  } = props;
+  const columnsTable = React.useMemo(
+    () =>
+      data?.header.map((item, index) => {
+        let tooltip = '';
+        switch (item?.accessor) {
+          default:
+            tooltip = '';
+        }
+        return {
+          ...item,
+          className: `px-3 py-16 fs-sm fw-semibold border-bottom ${
+            index + 1 === data?.header.length ? 'rounded-top-end-3' : ''
+          } ${index === 0 ? 'rounded-top-start-3' : ''}`,
+          width: item.width ? item.width : index === 0 ? 'auto' : 170,
+          allowSort: item?.allowSort || false,
+          Header: (
+            <span
+              className="align-middle position-relative"
+              data-tooltip-id="tooltipTable"
+              data-tooltip-content={t(tooltip)}
+              data-tooltip-place={`${index === data?.header?.length - 1 ? 'top-end' : 'top'}`}
+            >
+              {t(item.Header)}
+              {tooltip && (
+                <>
+                  <div
+                    className="mx-sm fs-12 mb-1"
+                    style={{ position: 'absolute', right: '-5px', top: '-12px' }}
+                  >
+                    <ComponentSVG
+                      url={env.PUBLIC_URL + '/assets/images/info.svg'}
+                      width={'12px'}
+                      height={'12px'}
+                      color={'#5F5E70'}
+                    />
+                  </div>
+                  <Tooltip id="tooltipTable" />
+                </>
+              )}
+            </span>
+          ),
+        };
+      }),
+    [data?.header]
+  );
+  const dataTable = React.useMemo(() => data?.data, [data?.data]);
+  return (
+    <div className="h-100 position-relative">
+      {status === PAGE_STATUS.LOADING ? (
+        <RingLoaderComponent className="d-flex justify-content-center align-items-center bg-white rounded-3 shadow-sm" />
+      ) : data ? (
+        <Table
+          classNameTable={'mb-0'}
+          columns={columnsTable}
+          data={dataTable}
+          canSort={true}
+          pagination={isPagination}
+          paginationClass={'fs-14 border-top mt-2'}
+          isPaginationAPI={isPaginationAPI}
+          paginationResponse={pagination}
+          selectPage={selectPage}
+          selectPageSize={selectPageSize}
+          simplePagination={simplePagination}
+          limit={limit}
+          sortAPI={sortAPI}
+          sortAPIHandle={handleSort}
+          sortBy={sortBy}
+        />
+      ) : (
+        <div className="position-relative ChartWrapper bg-white rounded-3 shadow-sm">
+          <div className="position-absolute top-50 start-50 translate-middle">
+            <ComponentNoData
+              icons={env.PUBLIC_URL + '/assets/images/ic_project.svg'}
+              title={t('txt_no_data')}
+              width="w-50"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default withTranslation()(RealTimeTable);