MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add defensive null guards to all chart components and analytics
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m59s
Details

Browse Source 
All 9 chart components now have early-return null/empty checks before
calling .map() on data props. The diversity-metrics chart guards all
nested array fields (byCountry, byCategory, byOceanIssue, byTag).
Analytics backend guards p.tags in getDiversityMetrics. This prevents
any "Cannot read properties of null (reading 'map')" crashes even if
upstream data shapes are unexpected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-02-20 13:42:31 +01:00
parent 4519bc6080
commit fbcbf895be
10 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/charts/diversity-metrics.tsx
View File

@@ -39,7 +39,7 @@ function formatLabel(value: string): string {
}
export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
if (data.total === 0) {
if (!data || data.total === 0) {
return (
<Card>
<CardContent className="flex items-center justify-center py-12">
@@ -50,8 +50,8 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
}
// Top countries for pie chart (max 10, others grouped)
const topCountries = data.byCountry.slice(0, 10)
const otherCountries = data.byCountry.slice(10)
const topCountries = (data.byCountry || []).slice(0, 10)
const otherCountries = (data.byCountry || []).slice(10)
const countryPieData = otherCountries.length > 0
? [...topCountries, {
country: 'Others',
@@ -67,12 +67,12 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
}))
// Pre-format category and ocean issue data for display
const formattedCategories = data.byCategory.slice(0, 10).map((c) => ({
const formattedCategories = (data.byCategory || []).slice(0, 10).map((c) => ({
category: formatLabel(c.category),
count: c.count,
}))
const formattedOceanIssues = data.byOceanIssue.slice(0, 15).map((o) => ({
const formattedOceanIssues = (data.byOceanIssue || []).slice(0, 15).map((o) => ({
issue: formatLabel(o.issue),
count: o.count,
}))
@@ -89,19 +89,19 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
</Card>
<Card>
<CardContent className="pt-6">
<div className="text-2xl font-bold">{data.byCountry.length}</div>
<div className="text-2xl font-bold">{(data.byCountry || []).length}</div>
<p className="text-sm text-muted-foreground">Countries Represented</p>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="text-2xl font-bold">{data.byCategory.length}</div>
<div className="text-2xl font-bold">{(data.byCategory || []).length}</div>
<p className="text-sm text-muted-foreground">Categories</p>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="text-2xl font-bold">{data.byTag.length}</div>
<div className="text-2xl font-bold">{(data.byTag || []).length}</div>
<p className="text-sm text-muted-foreground">Unique Tags</p>
</CardContent>
</Card>
@@ -228,14 +228,14 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
)}
{/* Tags Cloud */}
{data.byTag.length > 0 && (
{(data.byTag || []).length > 0 && (
<Card>
<CardHeader>
<CardTitle>Project Tags</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{data.byTag.slice(0, 30).map((tag) => (
{(data.byTag || []).slice(0, 30).map((tag) => (
<Badge
key={tag.tag}
variant="secondary"