From 69d5e6103f92ae86912120f2ce19839eca6d16df Mon Sep 17 00:00:00 2001 From: IvoPaunov Date: Mon, 9 Dec 2024 13:50:28 +0200 Subject: [PATCH 1/4] wip: removing common stats --- src/components/AdminPanel/AdminPanel.tsx | 6 - src/components/AdminPanel/SspStats.tsx | 130 ------------------ src/components/EditCampaign/EditCampaign.tsx | 23 +--- .../CampaignsContext/CampaignsDataContext.tsx | 38 +---- src/contexts/CampaignsContext/defaultData.ts | 98 ------------- src/helpers/createCampaignHelpers.ts | 34 ----- src/types/createCampaignCommon.ts | 18 --- 7 files changed, 7 insertions(+), 340 deletions(-) delete mode 100644 src/components/AdminPanel/SspStats.tsx delete mode 100644 src/contexts/CampaignsContext/defaultData.ts diff --git a/src/components/AdminPanel/AdminPanel.tsx b/src/components/AdminPanel/AdminPanel.tsx index 46a903cd..d31bf23f 100644 --- a/src/components/AdminPanel/AdminPanel.tsx +++ b/src/components/AdminPanel/AdminPanel.tsx @@ -7,7 +7,6 @@ import Invoices from 'components/Billing/Invoices' import AdminAnalytics from './AdminAnalytics' import Accounts from './Accounts' import SSPsAnalytics from './SSPsAnalytics' -import { SspStats } from './SspStats' // import { AccountDetails } from './AccountDetails' const AdminPanel = () => { @@ -29,7 +28,6 @@ const AdminPanel = () => { Invoices Validator Analytics SSPs Analytics - SSP stats Accounts Account details @@ -53,10 +51,6 @@ const AdminPanel = () => { - - - - diff --git a/src/components/AdminPanel/SspStats.tsx b/src/components/AdminPanel/SspStats.tsx deleted file mode 100644 index 15586670..00000000 --- a/src/components/AdminPanel/SspStats.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { useMemo } from 'react' -import { SimpleGrid, Box, Tabs, Paper, Loader } from '@mantine/core' -import { useCampaignsData } from 'hooks/useCampaignsData' -import { SupplyStatsDetails } from 'types' -import CustomTable from 'components/common/CustomTable' -import { parseRange } from 'helpers/createCampaignHelpers' - -const toTableDta = (stats: SupplyStatsDetails[], title: string, isCpmRange?: boolean) => { - return { - headings: [title, 'count'], - data: stats.slice(0, 200).map(({ value, count }) => ({ - id: value, - columns: [ - { - value, - element: isCpmRange - ? JSON.stringify(parseRange(value), null, 4).replace(/\{|\}|"/g, '') - : value - }, - { value: count, element: count.toLocaleString() } - ] - })) - } -} - -function SspStats() { - const { supplyStats } = useCampaignsData() - - const data = useMemo(() => { - const { - appBannerFormats, - siteBannerFormatsMobile, - siteBannerFormatsDesktop, - appBidFloors, - siteDesktopBidFloors, - siteMobileBidFloors - } = supplyStats - - return { - appBannerFormats: toTableDta(appBannerFormats, 'App Format'), - siteBannerFormatsMobile: toTableDta(siteBannerFormatsMobile, 'Mobile site Format'), - siteBannerFormatsDesktop: toTableDta(siteBannerFormatsDesktop, 'Desktop site Format'), - appBidFloors: toTableDta(appBidFloors, 'App Bid Floor', true), - siteDesktopBidFloors: toTableDta(siteDesktopBidFloors, 'Desktop site bid floor', true), - siteMobileBidFloors: toTableDta(siteMobileBidFloors, 'Mobil site bid floor', true) - } - }, [supplyStats]) - - const loading = useMemo( - () => !supplyStats.appBannerFormats.length, - [supplyStats.appBannerFormats.length] - ) - - return ( - - - - Apps - Mobile sites - Desktop sites - - - - {loading && } - - - - - - - - - - - - - {loading && } - - - - - - - - - - - - - {loading && } - - - - - - - - - - - - - ) -} - -export { SspStats } diff --git a/src/components/EditCampaign/EditCampaign.tsx b/src/components/EditCampaign/EditCampaign.tsx index 5144e789..2d33a0fc 100644 --- a/src/components/EditCampaign/EditCampaign.tsx +++ b/src/components/EditCampaign/EditCampaign.tsx @@ -3,7 +3,6 @@ import { Button, Group, Text, - Tooltip, ActionIcon, Checkbox, NumberInput, @@ -25,8 +24,7 @@ import { parseBigNumTokenAmountToDecimal, parseToBigNumPrecision } from 'helpers import { campaignToCampaignUI, - findArrayWithLengthInObjectAsValue, - getRecommendedCPMRange + findArrayWithLengthInObjectAsValue } from 'helpers/createCampaignHelpers' import useAccount from 'hooks/useAccount' import { useCallback, useEffect, useMemo } from 'react' @@ -63,12 +61,7 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo } = useAccount() const { tabValue = 'budget' } = useParams() const navigate = useNavigate() - const { supplyStats, editCampaign } = useCampaignsData() - - const recommendedPaymentBounds = useMemo( - () => getRecommendedCPMRange(supplyStats, campaign), - [campaign, supplyStats] - ) + const { editCampaign } = useCampaignsData() const form = useForm({ initialValues: { @@ -277,14 +270,10 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo CPM - - - - - + + + + { } interface ICampaignsDataContext { campaignsData: Map - supplyStats: SupplyStats // TODO: all campaigns event aggregations by account // eventAggregates: Map updateCampaignDataById: (params: Campaign['id']) => void updateAllCampaignsData: (updateAdvanced?: boolean) => void - updateSupplyStats: () => void // updateEventAggregates: (params: Campaign['id']) => void initialDataLoading: boolean changeCampaignStatus: (status: CampaignStatus, campaignId: Campaign['id']) => void @@ -139,7 +136,6 @@ const CampaignsDataProvider: FC // const { authenticated } = useAccount() const [initialDataLoading, setInitialDataLoading] = useState(true) - const [supplyStats, setSupplyStats] = useState(defaultSupplyStats) const [campaignsData, setCampaignData] = useState( new Map() @@ -289,34 +285,6 @@ const CampaignsDataProvider: FC [adexServicesRequest, showNotification, type] ) - const updateSupplyStats = useCallback(async () => { - let result - - try { - result = await adexServicesRequest('backend', { - route: '/dsp/stats/common', - method: 'GET' - }) - - if (!result) { - throw new Error('No supply stats') - } - - const hasEmptyValueResponse = Object.values(result).every( - (value) => Array.isArray(value) && value.length === 0 - ) - - if (hasEmptyValueResponse) { - throw new Error('Invalid supply stats response') - } - - setSupplyStats(result as SupplyStats) - } catch (e: any) { - console.error(e) - showNotification('error', e?.message || e.toString(), 'Supply stats error') - } - }, [adexServicesRequest, showNotification]) - // TODO: move to separate context delete and archive const deleteDraftCampaign = useCallback( async (id: string) => { @@ -458,27 +426,23 @@ const CampaignsDataProvider: FC const contextValue = useMemo( () => ({ campaignsData, - supplyStats, updateCampaignDataById, updateAllCampaignsData, initialDataLoading, changeCampaignStatus, deleteDraftCampaign, toggleArchived, - updateSupplyStats, editCampaign, filterSources }), [ campaignsData, - supplyStats, updateCampaignDataById, updateAllCampaignsData, initialDataLoading, changeCampaignStatus, deleteDraftCampaign, toggleArchived, - updateSupplyStats, editCampaign, filterSources ] diff --git a/src/contexts/CampaignsContext/defaultData.ts b/src/contexts/CampaignsContext/defaultData.ts deleted file mode 100644 index a4273f42..00000000 --- a/src/contexts/CampaignsContext/defaultData.ts +++ /dev/null @@ -1,98 +0,0 @@ -export const defaultSupplyStats = { - appBannerFormats: [ - { - value: '320x50', - count: 5583960 - }, - { - value: '300x50', - count: 3862456 - }, - { - value: '250x50', - count: 2240770 - }, - { - value: '728x90', - count: 1735665 - }, - { - value: '300x250', - count: 1136181 - } - ], - siteBannerFormatsDesktop: [ - { - value: '300x250', - count: 727348 - }, - { - value: '728x90', - count: 689367 - }, - { - value: '300x50', - count: 657506 - }, - { - value: '160x90', - count: 630174 - } - ], - siteBannerFormatsMobile: [ - { - value: '300x250', - count: 1432677 - }, - { - value: '320x50', - count: 863368 - }, - { - value: '300x50', - count: 819345 - } - ], - appBidFloors: [ - { - value: '0_20-0_30', - count: 2355568 - }, - { - value: '0_50-1_00', - count: 425406 - }, - { - value: '1_00-2_00', - count: 339714 - }, - { - value: '0_30-0_50', - count: 333687 - } - ], - siteDesktopBidFloors: [ - { - value: '1_00-2_00', - count: 101983 - }, - { - value: '0_50-1_00', - count: 95211 - }, - { - value: '0_20-0_30', - count: 77664 - } - ], - siteMobileBidFloors: [ - { - value: '1_00-2_00', - count: 94638 - }, - { - value: '0_50-1_00', - count: 93996 - } - ] -} diff --git a/src/helpers/createCampaignHelpers.ts b/src/helpers/createCampaignHelpers.ts index 04d7bf98..cf9810c3 100644 --- a/src/helpers/createCampaignHelpers.ts +++ b/src/helpers/createCampaignHelpers.ts @@ -4,8 +4,6 @@ import { ImageSizes, FileWithPath, HTMLBannerDimensions, - SupplyStats, - SupplyStatsDetails, SSPsAnalyticsData, CampaignUI } from 'types' @@ -25,14 +23,6 @@ export const checkSelectedDevices = (devices: Devices[]) => { export const findArrayWithLengthInObjectAsValue = (obj: object) => Object.entries(obj).find(([, value]) => Array.isArray(value) && value.length > 0) -export const selectBannerSizes = ( - supplyStats: SupplyStats -): Record => ({ - app: [supplyStats.appBannerFormats, supplyStats.appBidFloors], - mobile: [supplyStats.siteBannerFormatsMobile, supplyStats.siteMobileBidFloors], - desktop: [supplyStats.siteBannerFormatsDesktop, supplyStats.siteDesktopBidFloors] -}) - export const findDuplicates = (array: string[]) => { const countMap: any = {} const uniqueValues: string[] = [] @@ -269,30 +259,6 @@ export const parseRange = (str: string): { min: number; max: number } => { return { min, max } } -export const getRecommendedCPMRange = (supplyStats: SupplyStats, campaign: Campaign) => { - if (!supplyStats || !campaign) { - return { min: 0, max: 0 } - } - const mostRequests = campaign.targetingInput.inputs.placements.in - .map((placement) => { - switch (placement) { - case 'app': - return supplyStats.appBidFloors - - case 'site': - return [...supplyStats.siteDesktopBidFloors, ...supplyStats.siteMobileBidFloors] - default: - return [] - } - }) - .flat() - .sort((a, b) => b.count - a.count)?.[0] - - return { - ...parseRange(mostRequests?.value || '0_42-0_69') - } -} - export const cpmToStatisticsPrecision = (price: number): number => { return Number(price.toPrecision(4)) } diff --git a/src/types/createCampaignCommon.ts b/src/types/createCampaignCommon.ts index 115f0dd4..f3ae2e41 100644 --- a/src/types/createCampaignCommon.ts +++ b/src/types/createCampaignCommon.ts @@ -29,24 +29,6 @@ export type ImageSizes = { height: number } -type SupplyStatsTypes = - | 'appBannerFormats' - | 'siteBannerFormatsDesktop' - | 'siteBannerFormatsMobile' - | 'appBidFloors' - | 'siteDesktopBidFloors' - | 'siteMobileBidFloors' - -export type SupplyStatsDetails = { - value: string - count: number - checked?: boolean -} - -export type SupplyStats = { - [key in SupplyStatsTypes]: SupplyStatsDetails[] -} - export type CreateCampaignType = { step: number nextStep: () => void From 74eafcc199c9121566f08b662bae10eb3ef8c4b4 Mon Sep 17 00:00:00 2001 From: IvoPaunov Date: Mon, 9 Dec 2024 14:43:28 +0200 Subject: [PATCH 2/4] remove info icon from cpm at campaign edit --- src/components/EditCampaign/EditCampaign.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/EditCampaign/EditCampaign.tsx b/src/components/EditCampaign/EditCampaign.tsx index 2d33a0fc..d432a843 100644 --- a/src/components/EditCampaign/EditCampaign.tsx +++ b/src/components/EditCampaign/EditCampaign.tsx @@ -3,7 +3,6 @@ import { Button, Group, Text, - ActionIcon, Checkbox, NumberInput, Paper, @@ -31,7 +30,6 @@ import { useCallback, useEffect, useMemo } from 'react' import { useCampaignsData } from 'hooks/useCampaignsData' import type { Blocker, BlockerFunction } from 'react-router-dom' import { useBlocker, useParams, useNavigate } from 'react-router-dom' -import InfoFilledIcon from 'resources/icons/InfoFilled' import throttle from 'lodash.throttle' import { defaultConfirmModalProps } from 'components/common/Modals/CustomConfirmModal' import Placements from 'components/CampaignAnalytics/Placements' @@ -266,15 +264,10 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo - - - CPM - + + CPM + - - - - Date: Mon, 9 Dec 2024 14:57:39 +0200 Subject: [PATCH 3/4] update looseSourceCTR prop label and add tooltips --- .../CreateCampaign/StepThree/StepThree.tsx | 31 ++++++++++++++----- src/components/EditCampaign/EditCampaign.tsx | 30 +++++++++++++----- 2 files changed, 46 insertions(+), 15 deletions(-) diff --git a/src/components/CreateCampaign/StepThree/StepThree.tsx b/src/components/CreateCampaign/StepThree/StepThree.tsx index 46ab2f4b..8afa0433 100644 --- a/src/components/CreateCampaign/StepThree/StepThree.tsx +++ b/src/components/CreateCampaign/StepThree/StepThree.tsx @@ -7,7 +7,9 @@ import { Radio, Text, TextInput, - SimpleGrid + SimpleGrid, + Tooltip, + ActionIcon } from '@mantine/core' import { useMemo } from 'react' import useCreateCampaignContext from 'hooks/useCreateCampaignContext' @@ -180,13 +182,26 @@ const StepThree = () => { (learn more) - + + + + + + + + - + + + + + + + +