feat: add BSR vs Units correlation chart to Vendor tab

New BSRUnitsCorrelationChart component added to the Vendor tab showing:
- Per-marketplace tabs (DE, ES, FR, IT, UK) with market accent colors
- Dual-axis combo chart: bars (units sold, right axis) + line (BSR rank, left axis)
- Inverted BSR axis by default (lower rank = top) with toggle to flip
- Pearson r correlation calculated and displayed with strength interpretation
- Wired to existing combinedAdsData (filtered) and filteredBsrData

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/VendorDataView.tsx

@@ -1,12 +1,14 @@
 import React, { useMemo } from 'react';
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-import { BSRRecord } from '../types';
+import { BSRRecord, CombinedKPIs } from '../types';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
+import { BSRUnitsCorrelationChart } from './BSRUnitsCorrelationChart';
 
 interface VendorDataViewProps {
   bsrData: BSRRecord[];
   asinMetadata?: Map<string, { sku: string; title: string; line: string }>;
   buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
+  combinedSalesData?: CombinedKPIs[];
 }
 
 interface ChartPoint {
@@ -304,7 +306,7 @@ const CATEGORY_TRANSLATIONS: Record<string, string> = {
 const translateCategory = (name: string): string =>
   CATEGORY_TRANSLATIONS[name] ?? name;
 
-const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetadata, buyBoxLostMap }) => {
+const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetadata, buyBoxLostMap, combinedSalesData = [] }) => {
   const activeMarkets = useMemo(() => {
     const m = new Set(bsrData.map(r => r.market));
     return Array.from(m).sort();
@@ -466,6 +468,9 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
         </div>
       )}
 
+      {/* BSR vs Units Correlation Chart */}
+      <BSRUnitsCorrelationChart bsrData={bsrData} combinedSalesData={combinedSalesData} />
+
       {/* Top Level BSR Trend Chart */}
       <div className="bg-[#161b24] border border-[#2a3040] rounded-2xl p-6 shadow-md flex flex-col">
         <div className="mb-4">