Merge pull request #323 from AmbireTech/development

v0.69.71
AmbireTech · Dec 11, 2024 · 0785a43 · 0785a43
2 parents 9d98809 + c083196
commit 0785a43
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.70",
+  "version": "0.69.71",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",

diff --git a/src/components/AdminPanel/AdminAnalytics.tsx b/src/components/AdminPanel/AdminAnalytics.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState, useMemo, useCallback } from 'react'
-import { Select, Box, Text, Badge, ActionIcon, Stack, Group, LoadingOverlay } from '@mantine/core'
+import { useState, useEffect, useMemo, useCallback } from 'react'
+import { Select, Box, Text, Badge, ActionIcon, Stack, Group, Button, Loader } from '@mantine/core'
 import { AnalyticsPeriod, Timeframe, AnalyticsType, SSPs } from 'types'
 import useCampaignAnalytics from 'hooks/useCampaignAnalytics'
 import CustomTable from 'components/common/CustomTable'
@@ -126,29 +126,20 @@ const AdminAnalytics = () => {
   const headings = useMemo(() => [analType.toString(), ...headingsDefault], [analType])
 
   // TODO: change campaign analytics to analytics
-  const {
-    //  analyticsData,
-    getAnalyticsKeyAndUpdate,
-    mappedAnalytics
-  } = useCampaignAnalytics()
-
-  // const analytics = useMemo(
-  //   () => analyticsData.get(analyticsKey?.key || ''),
-  //   [analyticsData, analyticsKey]
-  // )
+  const { getAnalyticsKeyAndUpdate, mappedAnalytics } = useCampaignAnalytics()
 
   const adminMappedAnalytics = useMemo(
     () => mappedAnalytics.get(analyticsKey?.key || ''),
     [analyticsKey, mappedAnalytics]
   )
 
-  // useEffect(() => {
-  //   console.log({ analytics })
-  //   console.log({ mappedAnalytics })
-  //   console.log({ adminMappedAnalytics })
-  // }, [analytics, mappedAnalytics, adminMappedAnalytics])
+  const [fieldChanged, setFieldChanged] = useState(true)
 
   useEffect(() => {
+    setFieldChanged(true)
+  }, [analType, timeframe, startDate, placement, ssp])
+
+  const updateAnalytics = useCallback(() => {
     setAnalyticsKey(undefined)
 
     const end = dayjs(
@@ -168,7 +159,7 @@ const AdminAnalytics = () => {
         placement || undefined
       )
       setAnalyticsKey(key)
-      // console.log('key', key)
+      setFieldChanged(false)
     }
 
     checkAnalytics()
@@ -290,8 +281,17 @@ const AdminAnalytics = () => {
       </Group>
 
       <Stack>
+        <Button
+          size="sm"
+          onClick={updateAnalytics}
+          loading={loading}
+          loaderProps={{ type: 'dots' }}
+          disabled={!fieldChanged}
+          color="attention"
+        >
+          Submit
+        </Button>
         <Group align="center" justify="left" gap="xs" pos="relative">
-          <LoadingOverlay visible={loading} loaderProps={{ children: ' ' }} />
           <Box>Totals: </Box>
           <Badge
             leftSection={
@@ -301,9 +301,11 @@ const AdminAnalytics = () => {
             }
             size="lg"
           >
-            {typeof data.paid === 'number'
-              ? Number(data.paid.toFixed(2)).toLocaleString()
-              : data.paid}
+            {loading ? (
+              <Loader color="white" type="dots" size="sm" />
+            ) : (
+              Number(data.paid).toFixed(2).toLocaleString()
+            )}
           </Badge>
 
           <Badge
@@ -314,7 +316,7 @@ const AdminAnalytics = () => {
               </ActionIcon>
             }
           >
-            {data.imps.toLocaleString()}
+            {loading ? <Loader color="white" type="dots" size="sm" /> : data.imps.toLocaleString()}
           </Badge>
 
           <Badge
@@ -325,7 +327,11 @@ const AdminAnalytics = () => {
               </ActionIcon>
             }
           >
-            {data.clicks.toLocaleString()}
+            {loading ? (
+              <Loader color="white" type="dots" size="sm" />
+            ) : (
+              data.clicks.toLocaleString()
+            )}
           </Badge>
 
           <DownloadCSV
@@ -341,6 +347,7 @@ const AdminAnalytics = () => {
               ? 'Error occurred while loading analytics'
               : undefined
           }
+          dataLoaded={analyticsKey && !loading}
           defaultSortIndex={3}
           loading={loading}
           headings={headings}

diff --git a/src/components/AdminPanel/SSPsAnalytics.tsx b/src/components/AdminPanel/SSPsAnalytics.tsx
@@ -13,7 +13,8 @@ import {
   Divider,
   ThemeIcon,
   Center,
-  Button
+  Button,
+  SimpleGrid
 } from '@mantine/core'
 import { SSPs, RequestStatPlacement, SSPsAnalyticsDataQuery } from 'types'
 import useSSPsAnalytics from 'hooks/useCampaignAnalytics/useSSPsAnalytics'
@@ -157,7 +158,6 @@ const SSPsAnalytics = ({
       })
       setAnalyticsKey(key)
       setFieldChanged(false)
-      // console.log('key', key)
     }
 
     checkAnalytics()
@@ -207,56 +207,50 @@ const SSPsAnalytics = ({
       </Text>
       <Fieldset pos="relative">
         <Stack>
-          <Group align="start" justify="left" gap="xl" grow>
-            <Stack gap="xs">
-              <Select
-                label="Group by"
-                value={groupBy}
-                onChange={(val) => setGrop(val as SSPsAnalyticsDataQuery['groupBy'])}
-                data={groupByData}
-                searchable
-                size="sm"
-              />
-              <MultiSelect
-                label="Formats"
-                value={selectedFormats}
-                onChange={setFormats}
-                data={allowedBannerSizes}
-                clearable
-                searchable
-                size="sm"
-              />
-            </Stack>
-            <Stack>
-              <Select
-                label="SSP"
-                value={ssp}
-                onChange={(val) => setSsp(val as SSPs)}
-                data={sspsData}
-                searchable
-                size="sm"
-              />
-              <MultiSelect
-                label="Placement"
-                value={selectedPlacement?.values?.map((x) => x.toString())}
-                // @ts-ignore
-                onChange={(val) =>
-                  setPlacement(() => ({
-                    values: [...val.map((x) => Number(x))],
-                    operator: 'in'
-                  }))
-                }
-                clearable
-                data={placementsData}
-                size="sm"
-              />
-            </Stack>
-          </Group>
-
-          <Group grow gap="xl" align="baseline">
+          <SimpleGrid cols={{ md: 1, xl: 2 }} spacing="xl">
+            <Select
+              label="Group by"
+              value={groupBy}
+              onChange={(val) => setGrop(val as SSPsAnalyticsDataQuery['groupBy'])}
+              data={groupByData}
+              searchable
+              size="sm"
+            />
+            <MultiSelect
+              label="Formats"
+              value={selectedFormats}
+              onChange={setFormats}
+              data={allowedBannerSizes}
+              clearable
+              searchable
+              size="sm"
+            />
+            <Select
+              label="SSP"
+              value={ssp}
+              onChange={(val) => setSsp(val as SSPs)}
+              data={sspsData}
+              searchable
+              size="sm"
+            />
+            <MultiSelect
+              label="Placement"
+              value={selectedPlacement?.values?.map((x) => x.toString())}
+              // @ts-ignore
+              onChange={(val) =>
+                setPlacement(() => ({
+                  values: [...val.map((x) => Number(x))],
+                  operator: 'in'
+                }))
+              }
+              clearable
+              data={placementsData}
+              size="sm"
+            />
+          </SimpleGrid>
+          <SimpleGrid cols={{ md: 1, xl: 2 }} spacing="xl" mt="xl">
             <Stack>
               <Divider
-                mt="xl"
                 labelPosition="left"
                 label={
                   <Center style={{ gap: 10 }}>
@@ -286,7 +280,6 @@ const SSPsAnalytics = ({
             </Stack>
             <Stack>
               <Divider
-                mt="xl"
                 labelPosition="left"
                 label={
                   <Center style={{ gap: 10 }}>
@@ -315,13 +308,14 @@ const SSPsAnalytics = ({
                 size="sm"
               />
             </Stack>
-          </Group>
+          </SimpleGrid>
           <Button
             size="sm"
             onClick={updateAnalytics}
             loading={loading}
             disabled={!fieldChanged}
             color="attention"
+            loaderProps={{ type: 'dots' }}
           >
             Submit
           </Button>
@@ -359,6 +353,7 @@ const SSPsAnalytics = ({
           ]}
           data={data.elements}
           loading={loading}
+          dataLoaded={analyticsKey && !loading}
         />
         <Code block>
           {JSON.stringify(

diff --git a/src/components/common/CustomTable/CustomTable.tsx b/src/components/common/CustomTable/CustomTable.tsx
@@ -55,6 +55,7 @@ export type CustomTableProps = PropsWithChildren &
     actions?: TableRowAction[]
     shadow?: MantineShadow
     loading?: boolean
+    dataLoaded?: boolean
     selectedActions?: TableRowAction[]
     tableActions?: ReactNode
     error?: string | boolean
@@ -85,6 +86,7 @@ export const CustomTable = ({
   actions,
   shadow = 'none',
   loading,
+  dataLoaded,
   selectedActions,
   tableActions,
   error,
@@ -408,7 +410,7 @@ export const CustomTable = ({
         />
       )}
 
-      {!error && !loading && !rows.length && (
+      {!error && !loading && !rows.length && dataLoaded && (
         <Alert variant="outline" color="info" title="No data found" />
       )}