Skip to content

Add Nitro ad slots to AuctionHouse and Bazaar price graphs #1476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
matthias-luger merged 2 commits into from
Mar 4, 2026
Merged

Add Nitro ad slots to AuctionHouse and Bazaar price graphs #1476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c9a252
Add Nitro ad slots to AuctionHouse and Bazaar price graphs
matthias-luger Mar 4, 2026
224f533
Update components/PriceGraph/BazaarPriceGraph/BazaarPriceGraph.tsx
matthias-luger Mar 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 44 additions & 32 deletions components/PriceGraph/AuctionHousePriceGraph/AuctionHousePriceGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client'
/* eslint-disable react-hooks/exhaustive-deps */
import ReactECharts from 'echarts-for-react'
import { useEffect, useId, useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import useRotatingMessages from '../../../hooks/useRotatingMessages'
import api from '../../../api/ApiHelper'
import { getLoadingElement } from '../../../utils/LoadingUtils'
Expand All @@ -27,6 +27,7 @@ import { v4 as generateUUID } from 'uuid'
import { useGetApiMayor } from '../../../api/_generated/skyApi'
import type { PriceStatistics, CoflnetSkyMayorModelsModelElectionPeriod, AuctionPreview } from '../../../api/_generated/skyApi.schemas'
import { hasHighEnoughPremium, PREMIUM_RANK } from '../../../utils/PremiumTypeUtils'
import NitroAdSlot from '../../Ads/NitroAdSlot'

const HOUR_IN_MS = 60 * 60 * 1000

Expand Down Expand Up @@ -153,7 +154,7 @@ function AuctionHousePriceGraph(props: Props) {
updateChart(DateRange.YEAR, itemFilter)
}
})
.catch(() => {})
.catch(() => { })
}

const now = new Date()
Expand All @@ -163,9 +164,9 @@ function AuctionHousePriceGraph(props: Props) {
const mayorParams =
fetchspan === DateRange.YEAR
? {
from: currentMayorFrom.toISOString(),
to: currentMayorTo.toISOString()
}
from: currentMayorFrom.toISOString(),
to: currentMayorTo.toISOString()
}
: undefined

const mayorQuery = useGetApiMayor(mayorParams, { query: { enabled: fetchspan === DateRange.YEAR } })
Expand Down Expand Up @@ -329,11 +330,11 @@ function AuctionHousePriceGraph(props: Props) {
if (
!mounted ||
currentLoadingString !==
JSON.stringify({
tag: props.item.tag,
fetchspan,
itemFilter
})
JSON.stringify({
tag: props.item.tag,
fetchspan,
itemFilter
})
) {
return
}
Expand Down Expand Up @@ -365,7 +366,7 @@ function AuctionHousePriceGraph(props: Props) {
let mayorData = await api.getMayorData(minDate, maxDate)
setMayorData(mayorData)
applyMayorDataToChart(chartOptions, mayorData, 4)
} catch (e) {}
} catch (e) { }

setAvgPrice(Math.round(priceSum / prices.length))
setNoDataFound(prices.length === 0)
Expand Down Expand Up @@ -514,8 +515,9 @@ function AuctionHousePriceGraph(props: Props) {
graphOverlayElement
)}
</div>
<div className={styles.additionalInfos}>
<span className={styles.avgPrice}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
<div />
<div className='text-center'>
Comment thread
matthias-luger marked this conversation as resolved.
<b>Avg Price:</b>{' '}
{isLoading ? (
'-'
Expand All @@ -524,10 +526,17 @@ function AuctionHousePriceGraph(props: Props) {
<Number number={avgPrice} /> Coins
</span>
)}
</span>
</div>

<div className="d-flex align-items-center" style={{ gap: '8px', minWidth: '220px', justifyContent: 'flex-end' }}>
<SubscribeButton type="item" topic={props.item.tag} />
<ShareButton
title={'Prices for ' + props.item.name}
text="See list, search and filter item prices from the auction house and bazar in Hypixel Skyblock"
/>
</div>
</div>

{/* Year Statistics Section */}
{fetchspan === DateRange.YEAR && yearStatistics && (
<div style={{ marginTop: '20px', padding: '15px', backgroundColor: 'var(--bs-secondary)', borderRadius: '5px' }}>
<h6 style={{ marginBottom: '15px', color: 'var(--bs-warning)' }}>📊 Statistics Summary</h6>
Expand Down Expand Up @@ -606,17 +615,20 @@ function AuctionHousePriceGraph(props: Props) {
)}
</div>
)}

<div className="d-flex justify-content-between align-items-center flex-wrap" style={{ gap: '8px' }}>
<div style={{ flex: '1 1 auto' }} />
<div className="d-flex align-items-center" style={{ gap: '8px', minWidth: '220px', justifyContent: 'flex-end' }}>
<SubscribeButton type="item" topic={props.item.tag} />
<ShareButton
title={'Prices for ' + props.item.name}
text="See list, search and filter item prices from the auction house and bazar in Hypixel Skyblock"
/>
</div>
</div>
<NitroAdSlot
slotId="below-auction-graph"
className='mt-2'
config={{
sizes: [[970, 90]],
delayLoading: true,
report: {
enabled: true,
icon: true,
wording: 'Report Ad',
position: 'bottom-right'
}
}}
/>
<hr />
</div>

Expand All @@ -631,12 +643,12 @@ function AuctionHousePriceGraph(props: Props) {
yearRecentSamples={
fetchspan === DateRange.YEAR && yearStatistics
? (yearStatistics.recentSamples || yearStatistics.recentAuctions || []).map(s => ({
end: s.end ? new Date(s.end) : new Date(),
price: s.price,
seller: { name: s.seller || '', uuid: '', iconUrl: undefined },
uuid: s.uuid || '',
playerName: s.playerName || ''
}))
end: s.end ? new Date(s.end) : new Date(),
price: s.price,
seller: { name: s.seller || '', uuid: '', iconUrl: undefined },
uuid: s.uuid || '',
playerName: s.playerName || ''
}))
: undefined
}
isYearView={fetchspan === DateRange.YEAR}
Expand Down
4 changes: 2 additions & 2 deletions components/PriceGraph/BazaarPriceGraph/BazaarPriceGraph.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@
}

.chartWrapperSingle {
height: 60vh;
height: 55vh;
width: 100%;
margin-top: 10px;
margin-bottom: 50px;
}

.chartWrapperSplit {
height: 30vh;
height: 27.5vh;
width: 100%;
margin-bottom: 50px;
}
Expand Down
37 changes: 26 additions & 11 deletions components/PriceGraph/BazaarPriceGraph/BazaarPriceGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ import BazaarSnapshot from './BazaarSnapshot/BazaarSnapshot'
import getPriceGraphConfigSingle from './PriceGraphConfigSingle'
import getPriceGraphConfigSplit from './PriceGraphConfigSplit'
import { applyMayorDataToChart } from '../../../utils/GraphUtils'
import { toast } from 'react-toastify'
import SubscribeButton from '../../SubscribeButton/SubscribeButton'
import NitroAdSlot from '../../Ads/NitroAdSlot'

interface Props {
item: Item
Expand Down Expand Up @@ -304,11 +304,11 @@ function BazaarPriceGraph(props: Props) {
fetchspan === DateRange.HOUR
? item.sellData.price?.toFixed(2)
: [
item.sellData.price?.toFixed(2),
prices[i + 1] ? prices[i + 1].sellData.price?.toFixed(2) : item.sellData.price?.toFixed(2),
item.sellData.min?.toFixed(2),
item.sellData.max?.toFixed(2)
]
item.sellData.price?.toFixed(2),
prices[i + 1] ? prices[i + 1].sellData.price?.toFixed(2) : item.sellData.price?.toFixed(2),
item.sellData.min?.toFixed(2),
item.sellData.max?.toFixed(2)
]
)
chartOptionsPrimary.series[6].data.push(item.sellData.min?.toFixed(2))
chartOptionsPrimary.series[7].data.push(item.sellData.max?.toFixed(2))
Expand All @@ -325,11 +325,11 @@ function BazaarPriceGraph(props: Props) {
fetchspan === DateRange.HOUR
? item.sellData.price?.toFixed(2)
: [
item.sellData.price?.toFixed(2),
prices[i + 1] ? prices[i + 1].sellData.price?.toFixed(2) : item.sellData.price?.toFixed(2),
item.sellData.min?.toFixed(2),
item.sellData.max?.toFixed(2)
]
item.sellData.price?.toFixed(2),
prices[i + 1] ? prices[i + 1].sellData.price?.toFixed(2) : item.sellData.price?.toFixed(2),
item.sellData.min?.toFixed(2),
item.sellData.max?.toFixed(2)
]
)
chartOptionsSecondary.series[1].data.push(item.sellData.min?.toFixed(2))
chartOptionsSecondary.series[2].data.push(item.sellData.max?.toFixed(2))
Expand Down Expand Up @@ -459,7 +459,22 @@ function BazaarPriceGraph(props: Props) {
<ShareButton title={'Prices for ' + props.item.name} text="Browse the Bazaar history in Hypixel Skyblock" />
</div>
</div>

</div>
<NitroAdSlot
slotId="below-bazaar-graph"
className='mt-2'
config={{
sizes: [[970, 90]],
delayLoading: true,
report: {
enabled: true,
icon: true,
wording: 'Report Ad',
position: 'bottom-right'
}
}}
/>
<hr />
<RelatedItems tag={props.item.tag} isBazaarItem={true} />
<BazaarSnapshot item={props.item} />
Expand Down