Merge pull request #307 from AmbireTech/advanced-stats

Advanced stats

Author: ivopaunov

src/components/AdminPanel/SSPsAnalytics.tsx

@@ -10,7 +10,9 @@ import {
   NumberFormatter,
   MultiSelect,
   Fieldset,
-  Divider
+  Divider,
+  ThemeIcon,
+  Center
 } from '@mantine/core'
 import { SSPs, RequestStatPlacement, SSPsAnalyticsDataQuery } from 'types'
 import useSSPsAnalytics from 'hooks/useCampaignAnalytics/useSSPsAnalytics'
@@ -22,6 +24,8 @@ import { IabTaxonomyV3 } from 'adex-common'
 import { CATEGORIES, CAT_GROUPS, COUNTRIES, REGION_GROUPS } from 'constants/createCampaign'
 import MultiSelectAndRadioButtons from 'components/CreateCampaign/StepTwo/MultiSelectAndRadioButtons'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
+import GlobeIcon from 'resources/icons/Globe'
+import InvoiceIcon from 'resources/icons/Invoice'
 
 const sspsData: Array<{ value: SSPs | ''; label: string }> = [
   { value: '', label: 'All SSPs' },
@@ -31,11 +35,11 @@ const sspsData: Array<{ value: SSPs | ''; label: string }> = [
 ]
 
 const placementsData: Array<{ value: string; label: string }> = [
-  { value: '', label: 'All placements' },
   { value: RequestStatPlacement.app.toString(), label: 'App' },
   { value: RequestStatPlacement.siteMobile.toString(), label: 'Site - Mobile' },
   { value: RequestStatPlacement.siteDesktop.toString(), label: 'Site - Desktop' },
-  { value: RequestStatPlacement.other.toString(), label: 'Site - other' }
+  { value: RequestStatPlacement.siteOther.toString(), label: 'Site - other' },
+  { value: RequestStatPlacement.other.toString(), label: 'Other' }
 ]
 
 const groupByData: Array<{ value: string; label: string }> = [
@@ -83,11 +87,13 @@ const mapSegmentLabel = (
 const SSPsAnalytics = ({
   country,
   category,
-  format
+  format,
+  placement
 }: {
   category?: SSPsAnalyticsDataQuery['category']
   country?: SSPsAnalyticsDataQuery['country']
-  format?: string[]
+  format?: SSPsAnalyticsDataQuery['format']
+  placement?: SSPsAnalyticsDataQuery['placement']
 }) => {
   // TODO: get all formats once then use it for src
   // NOTE: temp
@@ -101,8 +107,10 @@ const SSPsAnalytics = ({
   >()
 
   const [ssp, setSsp] = useState<SSPs>('')
-  const [groupBy, setGrop] = useState<SSPsAnalyticsDataQuery['groupBy']>('country')
-  const [placement, setPlacement] = useState<RequestStatPlacement | ''>('')
+  const [groupBy, setGrop] = useState<SSPsAnalyticsDataQuery['groupBy']>('ssp')
+  const [selectedPlacement, setPlacement] = useState<SSPsAnalyticsDataQuery['placement']>(
+    placement || { values: [RequestStatPlacement.siteDesktop], operator: 'in' }
+  )
   const { analyticsData, getAnalyticsKeyAndUpdate } = useSSPsAnalytics()
   const [selectedCountries, setCountries] = useState<SSPsAnalyticsDataQuery['country']>(
     country || { values: [], operator: 'in' }
@@ -111,7 +119,7 @@ const SSPsAnalytics = ({
     category || { values: [], operator: 'in' }
   )
 
-  const [selectedFormats, setFormats] = useState<string[]>(format || [])
+  const [selectedFormats, setFormats] = useState<SSPsAnalyticsDataQuery['format']>(format || [])
 
   const analytics = useMemo(
     () => analyticsData.get(analyticsKey?.key || ''),
@@ -125,11 +133,12 @@ const SSPsAnalytics = ({
       const key = await getAnalyticsKeyAndUpdate({
         ...removeOptionalEmptyStringProps({
           ssp,
-          placement,
+          placement: selectedPlacement,
           category: selectedCategories,
           country: selectedCountries,
           format: selectedFormats
         }),
+        limit: 666,
         groupBy
       })
       setAnalyticsKey(key)
@@ -147,6 +156,7 @@ const SSPsAnalytics = ({
     selectedCategories,
     selectedCountries,
     selectedFormats,
+    selectedPlacement,
     ssp
   ])
 
@@ -208,11 +218,17 @@ const SSPsAnalytics = ({
                 searchable
                 size="sm"
               />
-              <Select
+              <MultiSelect
                 label="Placement"
-                value={placement?.toString()}
+                value={selectedPlacement?.values?.map((x) => x.toString())}
                 // @ts-ignore
-                onChange={(val) => setPlacement(val !== '' ? Number(val) : val)}
+                onChange={(val) =>
+                  setPlacement(() => ({
+                    values: [...val.map((x) => Number(x))],
+                    operator: 'in'
+                  }))
+                }
+                clearable
                 data={placementsData}
                 size="sm"
               />
@@ -221,7 +237,20 @@ const SSPsAnalytics = ({
 
           <Group grow gap="xl" align="baseline">
             <Stack>
-              <Divider size="md" label="Categories" color="mainText" />
+              <Divider
+                mt="xl"
+                labelPosition="left"
+                label={
+                  <Center style={{ gap: 10 }}>
+                    <Text c="mainText" size="sm">
+                      Categories
+                    </Text>
+                    <ThemeIcon size="sm" variant="transparent" color="mainText">
+                      <InvoiceIcon />
+                    </ThemeIcon>
+                  </Center>
+                }
+              />
               <MultiSelectAndRadioButtons
                 onCategoriesChange={(selectedRadio, values) =>
                   setCategories({
@@ -234,10 +263,24 @@ const SSPsAnalytics = ({
                 defaultSelectValue={selectedCategories?.values}
                 groups={CAT_GROUPS}
                 label="Categories"
+                size="sm"
               />
             </Stack>
             <Stack>
-              <Divider size="md" label="Countries" color="mainText" />
+              <Divider
+                mt="xl"
+                labelPosition="left"
+                label={
+                  <Center style={{ gap: 10 }}>
+                    <Text c="mainText" size="sm">
+                      Countries
+                    </Text>
+                    <ThemeIcon size="sm" variant="transparent" color="mainText">
+                      <GlobeIcon />
+                    </ThemeIcon>
+                  </Center>
+                }
+              />
 
               <MultiSelectAndRadioButtons
                 onCategoriesChange={(selectedRadio, values) =>
@@ -251,6 +294,7 @@ const SSPsAnalytics = ({
                 multiSelectData={COUNTRIES}
                 groups={REGION_GROUPS}
                 label="Countries"
+                size="sm"
               />
             </Stack>
           </Group>
@@ -285,10 +329,10 @@ const SSPsAnalytics = ({
           {JSON.stringify(
             {
               ssp,
-              placement,
+              placement: selectedPlacement,
               category: selectedCategories,
               country: selectedCountries,
-              format,
+              format: selectedFormats,
               groupBy
             },
             null,

src/components/CampaignAnalytics/CampaignAnalytics.tsx

@@ -8,7 +8,7 @@ import { StickyPanel } from 'components/TopBar/TopBarStickyPanel'
 import { AdminBadge } from 'components/common/AdminBadge'
 import { useCampaignsData } from 'hooks/useCampaignsData'
 import SSPsAnalytics from 'components/AdminPanel/SSPsAnalytics'
-import { IabTaxonomyV3 } from 'adex-common'
+import { campaignDataToSSPAnalyticsQuery } from 'helpers'
 import Placements from './Placements'
 import Creatives from './Creatives'
 import SSPs from './SSPs'
@@ -91,33 +91,7 @@ const CampaignAnalytics = ({ isAdminPanel = false }: { isAdminPanel?: boolean })
           <SSPs campaignId={id} forAdmin={isAdminPanel} />
         </Tabs.Panel>
         <Tabs.Panel value="sspAnalytics">
-          <SSPsAnalytics
-            category={{
-              values:
-                campaign?.targetingInput.inputs.categories.apply === 'all'
-                  ? []
-                  : (campaign?.targetingInput.inputs.categories[
-                      campaign?.targetingInput.inputs.categories.apply
-                    ] as IabTaxonomyV3[]),
-              operator:
-                campaign?.targetingInput.inputs.categories.apply === 'all'
-                  ? undefined
-                  : campaign?.targetingInput.inputs.categories.apply
-            }}
-            country={{
-              values:
-                campaign?.targetingInput.inputs.location.apply === 'all'
-                  ? []
-                  : campaign?.targetingInput.inputs.location[
-                      campaign?.targetingInput.inputs.location.apply
-                    ],
-              operator:
-                campaign?.targetingInput.inputs.location.apply === 'all'
-                  ? undefined
-                  : campaign?.targetingInput.inputs.location.apply
-            }}
-            format={campaign?.adUnits.map((x) => `${x.banner?.format.h}x${x.banner?.format.w}`)}
-          />
+          <SSPsAnalytics {...(campaign ? campaignDataToSSPAnalyticsQuery(campaign) : {})} />
         </Tabs.Panel>
       </Tabs>
     </Container>

src/components/CreateCampaign/StepThree/StepThree.tsx

@@ -10,23 +10,53 @@ import {
   TextInput,
   Tooltip
 } from '@mantine/core'
-import { useMemo } from 'react'
+import { useMemo, useState, useEffect } from 'react'
 import InfoFilledIcon from 'resources/icons/InfoFilled'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import InfoAlertMessage from 'components/common/InfoAlertMessage'
 import { parseRange } from 'helpers/createCampaignHelpers'
 import InfoIcon from 'resources/icons/Info'
 import DefaultCustomAnchor from 'components/common/customAnchor'
+import { campaignDataToSSPAnalyticsQuery } from 'helpers'
+import useSSPsAnalytics from 'hooks/useCampaignAnalytics/useSSPsAnalytics'
 import CampaignPeriod from './CampaignPeriod'
 import SelectCurrency from './SelectCurrency'
 
 const StepThree = () => {
   const {
-    campaign: { currency },
+    campaign,
     selectedBidFloors,
     form: { key, getInputProps, errors, setFieldValue }
   } = useCreateCampaignContext()
 
+  const { analyticsData, getAnalyticsKeyAndUpdate } = useSSPsAnalytics()
+
+  const [analyticsKey, setAnalyticsKey] = useState<
+    | {
+        key: string
+      }
+    | undefined
+  >()
+
+  useEffect(() => {
+    setAnalyticsKey(undefined)
+
+    const checkAnalytics = async () => {
+      const analKey = await getAnalyticsKeyAndUpdate({
+        ...campaignDataToSSPAnalyticsQuery(campaign),
+        limit: 666
+      })
+      setAnalyticsKey(analKey)
+    }
+
+    checkAnalytics()
+  }, [campaign, getAnalyticsKeyAndUpdate])
+
+  const recommendedCPM = useMemo(
+    () => analyticsData.get(analyticsKey?.key || '')?.data[0]?.value || 'N/A',
+    [analyticsData, analyticsKey]
+  )
+
   const recommendedPaymentBounds = useMemo(() => {
     const rangeUnparsed = selectedBidFloors.flat().sort((a, b) => b.count - a.count)[0]?.value
 
@@ -83,7 +113,7 @@ const StepThree = () => {
           3. Currency
         </Text>
         <SelectCurrency
-          defaultValue={currency}
+          defaultValue={campaign.currency}
           onChange={(value) => setFieldValue('currency', value)}
           error={(errors.currency && errors.currency) || ''}
         />
@@ -144,6 +174,7 @@ const StepThree = () => {
             </ActionIcon>
           </Tooltip>
         </Group>
+        {recommendedCPM}
 
         <Group wrap="nowrap" justify="stretch" grow>
           <TextInput