christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:35:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: show category names next to BSR chart headers when single ASIN selected

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-03-04 08:40:46 +01:00
parent 5eb42f5e33
commit 8d849dfb63
1 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/VendorDataView.tsx
+28 -3
View File
@@ -36,13 +36,24 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
const asin = uniqueAsins[0]; const asin = uniqueAsins[0];
const metadata = asinMetadata?.get(asin); const metadata = asinMetadata?.get(asin);
if (!metadata) return null; if (!metadata) return null;
let topCategory = '';
let detailCategory = '';
for (const r of bsrData) {
if (!topCategory && r.topLevelName) topCategory = r.topLevelName;
if (!detailCategory && r.detailLevelName) detailCategory = r.detailLevelName;
if (topCategory && detailCategory) break;
}
return { return {
asin, asin,
sku: metadata.sku, sku: metadata.sku,
title: metadata.title, title: metadata.title,
line: metadata.line, line: metadata.line,
topCategory,
detailCategory
}; };
}, [uniqueAsins, asinMetadata]); }, [uniqueAsins, asinMetadata, bsrData]);
const { topBsrChartData, detailBsrChartData, ratingChartData } = useMemo(() => { const { topBsrChartData, detailBsrChartData, ratingChartData } = useMemo(() => {
const byBucket = new Map<string, BSRRecord[]>(); const byBucket = new Map<string, BSRRecord[]>();
@@ -162,7 +173,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
{/* Top Level BSR Trend Chart */} {/* Top Level BSR Trend Chart */}
<div className="bg-[#161b24] border border-[#2a3040] rounded-2xl p-6 shadow-md flex flex-col"> <div className="bg-[#161b24] border border-[#2a3040] rounded-2xl p-6 shadow-md flex flex-col">
<div className="mb-4"> <div className="mb-4">
<h3 className="text-[17px] font-semibold text-white tracking-wide mb-1">Top Level BSR Trend</h3> <div className="flex flex-wrap items-center gap-3 mb-1">
<h3 className="text-[17px] font-semibold text-white tracking-wide">Top Level BSR Trend</h3>
{productInfo?.topCategory && (
<span className="text-[11px] font-medium text-[#e2e8f0] bg-[#334155]/60 px-2.5 py-0.5 rounded border border-[#475569]/50 tracking-wider">
{productInfo.topCategory}
</span>
)}
</div>
<p className="text-[13px] text-[#64748b]">Weekly Average Rank • Lower is better</p> <p className="text-[13px] text-[#64748b]">Weekly Average Rank • Lower is better</p>
</div> </div>
@@ -229,7 +247,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
{/* Detail Level BSR Trend Chart */} {/* Detail Level BSR Trend Chart */}
<div className="bg-[#161b24] border border-[#2a3040] rounded-2xl p-6 shadow-md flex flex-col"> <div className="bg-[#161b24] border border-[#2a3040] rounded-2xl p-6 shadow-md flex flex-col">
<div className="mb-4"> <div className="mb-4">
<h3 className="text-[17px] font-semibold text-white tracking-wide mb-1">Detail Level BSR Trend</h3> <div className="flex flex-wrap items-center gap-3 mb-1">
<h3 className="text-[17px] font-semibold text-white tracking-wide">Detail Level BSR Trend</h3>
{productInfo?.detailCategory && (
<span className="text-[11px] font-medium text-[#e2e8f0] bg-[#334155]/60 px-2.5 py-0.5 rounded border border-[#475569]/50 tracking-wider">
{productInfo.detailCategory}
</span>
)}
</div>
<p className="text-[13px] text-[#64748b]">Sub-category Performance • Filtered ASINs</p> <p className="text-[13px] text-[#64748b]">Sub-category Performance • Filtered ASINs</p>
</div> </div>