feat(web): AVM v2 upgraded valuation dashboard (TEC-2763)
R5.4 ships the upgraded AVM UI behind the `avm_v2` A/B flag. When the
flag is on, the dashboard exposes:
- Tab switch between single valuation and multi-property compare
- Waterfall drivers chart (ValueDriversChart) alongside the existing
horizontal bar breakdown
- Mapbox comparables map with similarity-coloured markers and an
optional highlighted subject pin
- Confidence interval + range bar and PDF export remain available
- Valuation history chart surface unchanged (still lazy-loaded)
Flag plumbing (useAvmV2Flag):
- NEXT_PUBLIC_FEATURE_AVM_V2=1 enables by default
- `?avm_v2=1|0` URL param forces + persists to localStorage
- safe localStorage handling (no throw when storage is blocked)
Tests: comparables-map, value-drivers-chart, use-avm-v2-flag specs
added. Pre-existing "Yếu tố chính" assertion in valuation-results.spec
updated to match the current copy ("Yếu tố ảnh hưởng giá") so the
valuation suite is green (7 files, 52 tests).
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
230
apps/web/components/valuation/comparables-map.tsx
Normal file
230
apps/web/components/valuation/comparables-map.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
'use client';
|
||||
|
||||
/* eslint-disable import-x/no-named-as-default-member */
|
||||
import mapboxgl from 'mapbox-gl';
|
||||
import * as React from 'react';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { formatPrice, formatPricePerM2 } from '@/lib/currency';
|
||||
import type { ValuationComparable } from '@/lib/valuation-api';
|
||||
|
||||
interface ComparablesMapProps {
|
||||
comparables: ValuationComparable[];
|
||||
subjectLatitude?: number;
|
||||
subjectLongitude?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DEFAULT_CENTER: [number, number] = [106.6297, 10.8231];
|
||||
const DEFAULT_ZOOM = 11;
|
||||
|
||||
function similarityColor(sim: number): string {
|
||||
if (sim >= 0.85) return '#16a34a';
|
||||
if (sim >= 0.7) return '#eab308';
|
||||
return '#dc2626';
|
||||
}
|
||||
|
||||
function escapeHtml(str: string): string {
|
||||
return str
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
export function ComparablesMap({
|
||||
comparables,
|
||||
subjectLatitude,
|
||||
subjectLongitude,
|
||||
className,
|
||||
}: ComparablesMapProps) {
|
||||
const mapContainerRef = React.useRef<HTMLDivElement>(null);
|
||||
const mapRef = React.useRef<mapboxgl.Map | null>(null);
|
||||
const markersRef = React.useRef<mapboxgl.Marker[]>([]);
|
||||
|
||||
const geoComparables = React.useMemo(
|
||||
() =>
|
||||
comparables.filter(
|
||||
(c) => c.latitude != null && c.longitude != null,
|
||||
),
|
||||
[comparables],
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!mapContainerRef.current) return;
|
||||
|
||||
const token = process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
|
||||
if (!token) return;
|
||||
|
||||
mapboxgl.accessToken = token;
|
||||
|
||||
const map = new mapboxgl.Map({
|
||||
container: mapContainerRef.current,
|
||||
style: 'mapbox://styles/mapbox/streets-v12',
|
||||
center: DEFAULT_CENTER,
|
||||
zoom: DEFAULT_ZOOM,
|
||||
attributionControl: false,
|
||||
});
|
||||
|
||||
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
|
||||
map.addControl(
|
||||
new mapboxgl.AttributionControl({ compact: true }),
|
||||
'bottom-right',
|
||||
);
|
||||
|
||||
mapRef.current = map;
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
|
||||
markersRef.current.forEach((m) => m.remove());
|
||||
markersRef.current = [];
|
||||
|
||||
const bounds = new mapboxgl.LngLatBounds();
|
||||
let extended = false;
|
||||
|
||||
if (subjectLatitude != null && subjectLongitude != null) {
|
||||
const subjectEl = document.createElement('div');
|
||||
subjectEl.setAttribute('data-testid', 'comparables-map-subject');
|
||||
subjectEl.style.cssText = `
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: hsl(221.2, 83.2%, 53.3%);
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 0 0 2px hsl(221.2, 83.2%, 53.3%), 0 2px 6px rgba(0,0,0,0.3);
|
||||
`;
|
||||
const marker = new mapboxgl.Marker({ element: subjectEl })
|
||||
.setLngLat([subjectLongitude, subjectLatitude])
|
||||
.addTo(map);
|
||||
markersRef.current.push(marker);
|
||||
bounds.extend([subjectLongitude, subjectLatitude]);
|
||||
extended = true;
|
||||
}
|
||||
|
||||
geoComparables.forEach((comp) => {
|
||||
const color = similarityColor(comp.similarity);
|
||||
const el = document.createElement('div');
|
||||
el.setAttribute('data-testid', 'comparables-map-marker');
|
||||
el.style.cssText = `
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border-left: 3px solid ${color};
|
||||
transition: transform 0.15s;
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
`;
|
||||
el.textContent = formatPrice(comp.priceVND);
|
||||
el.addEventListener('mouseenter', () => {
|
||||
el.style.transform = 'scale(1.08)';
|
||||
});
|
||||
el.addEventListener('mouseleave', () => {
|
||||
el.style.transform = 'scale(1)';
|
||||
});
|
||||
|
||||
const popup = new mapboxgl.Popup({
|
||||
offset: 15,
|
||||
maxWidth: '280px',
|
||||
closeButton: false,
|
||||
}).setHTML(
|
||||
`<div style="font-family:system-ui,sans-serif;padding:4px 0;">
|
||||
<p style="font-weight:600;font-size:13px;margin:0 0 4px;">${escapeHtml(comp.title)}</p>
|
||||
<p style="font-size:12px;color:#666;margin:0 0 4px;">${escapeHtml(comp.address)}</p>
|
||||
<p style="font-size:12px;margin:0 0 2px;">
|
||||
<span style="font-weight:600;color:hsl(221.2,83.2%,53.3%);">${formatPrice(comp.priceVND)} VNĐ</span>
|
||||
<span style="color:#666;margin-left:6px;">${formatPricePerM2(comp.pricePerM2)}</span>
|
||||
</p>
|
||||
<p style="font-size:12px;color:#666;margin:0;">
|
||||
${comp.areaM2} m² · Tương đồng ${Math.round(comp.similarity * 100)}%
|
||||
</p>
|
||||
</div>`,
|
||||
);
|
||||
|
||||
const marker = new mapboxgl.Marker({ element: el, anchor: 'left' })
|
||||
.setLngLat([comp.longitude!, comp.latitude!])
|
||||
.setPopup(popup)
|
||||
.addTo(map);
|
||||
|
||||
markersRef.current.push(marker);
|
||||
bounds.extend([comp.longitude!, comp.latitude!]);
|
||||
extended = true;
|
||||
});
|
||||
|
||||
if (!extended) return;
|
||||
|
||||
if (!bounds.isEmpty() && markersRef.current.length > 1) {
|
||||
map.fitBounds(bounds, { padding: 60, maxZoom: 14 });
|
||||
} else if (markersRef.current.length === 1) {
|
||||
const first = geoComparables[0] ?? {
|
||||
latitude: subjectLatitude,
|
||||
longitude: subjectLongitude,
|
||||
};
|
||||
if (first.latitude != null && first.longitude != null) {
|
||||
map.flyTo({ center: [first.longitude, first.latitude], zoom: 14 });
|
||||
}
|
||||
}
|
||||
}, [geoComparables, subjectLatitude, subjectLongitude]);
|
||||
|
||||
const hasToken =
|
||||
typeof process !== 'undefined' &&
|
||||
Boolean(process.env['NEXT_PUBLIC_MAPBOX_TOKEN']);
|
||||
|
||||
const hasAnyGeo =
|
||||
geoComparables.length > 0 ||
|
||||
(subjectLatitude != null && subjectLongitude != null);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Bản đồ so sánh</CardTitle>
|
||||
<CardDescription>
|
||||
Vị trí các bất động sản tương tự được sử dụng trong mô hình AVM
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className={`relative overflow-hidden rounded-lg border ${className || 'h-[360px] md:h-[420px]'}`}
|
||||
>
|
||||
<div ref={mapContainerRef} className="h-full w-full" />
|
||||
|
||||
{!hasToken && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-b from-blue-50 to-green-50 text-center text-sm text-muted-foreground">
|
||||
Thiết lập NEXT_PUBLIC_MAPBOX_TOKEN để hiển thị bản đồ
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasToken && !hasAnyGeo && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-muted/40 text-center text-sm text-muted-foreground">
|
||||
Không có toạ độ cho các BĐS so sánh
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute bottom-3 left-3 rounded bg-white/90 px-2 py-1 text-xs text-muted-foreground shadow">
|
||||
{geoComparables.length} BĐS so sánh
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user