fixes for larger data

commonknowledge · Dec 19, 2024 · 5050da6 · 5050da6
1 parent 1ed6cdd
commit 5050da6
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
@@ -2,6 +2,7 @@ import { ConstituencyStatsOverviewQuery } from '@/__generated__/graphql'
 import {
   Card,
   CardContent,
+  CardDescription,
   CardHeader,
   CardTitle,
 } from '@/components/ChartCard'
@@ -43,6 +44,7 @@ export default function ReportDashboardHexMap({
     <Card className="w-full row-span-2 relative">
       <CardHeader>
         <CardTitle>Constituency Map </CardTitle>
+        <CardDescription>Regional Distribution</CardDescription>
       </CardHeader>
       <CardContent>
         <HexGrid

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
@@ -34,12 +34,31 @@ export default function ReportDashboardKeyStats({
       sourceTotals.set(source, currentTotal + constituency.count)
     })
 
-    // Convert to chart format
-    return Array.from(sourceTotals.entries()).map(([source, count], index) => ({
-      source: source,
-      members: count,
-      fill: `hsl(var(--chart-${index + 1}))`,
-    }))
+    // Convert to array and sort by count
+    const sortedEntries = Array.from(sourceTotals.entries()).sort(
+      ([, a], [, b]) => b - a
+    ) // Sort by count descending
+
+    // Take first 19 entries as is, combine the rest as "Other"
+    const mainEntries = sortedEntries
+      .slice(0, 19)
+      .map(([source, count], index) => ({
+        source,
+        members: count,
+        fill: `hsl(var(--chart-${index + 1}))`,
+      }))
+
+    const otherEntries = sortedEntries.slice(19)
+    if (otherEntries.length > 0) {
+      const otherCount = otherEntries.reduce((sum, [, count]) => sum + count, 0)
+      mainEntries.push({
+        source: 'Other',
+        members: otherCount,
+        fill: `hsl(var(--chart-20))`,
+      })
+    }
+
+    return mainEntries
   }, [constituencies])
 
   const totalMembers = React.useMemo(() => {

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMPs.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMPs.tsx
@@ -3,6 +3,7 @@ import { Person } from '@/app/reports/[id]/(components)/reportsConstituencyItem'
 import {
   Card,
   CardContent,
+  CardDescription,
   CardHeader,
   CardTitle,
 } from '@/components/ChartCard'
@@ -15,17 +16,25 @@ export default function ReportDashboardMPs({
     <Card>
       <CardHeader>
         <CardTitle>Key MPs</CardTitle>
+        <CardDescription>Showing the top 5 MPs by constituency</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="grid gap-6">
-          {constituencies?.map((constituency) => (
-            <Person
-              key={constituency.gss}
-              name={constituency.gssArea?.mp?.name ?? ''}
-              subtitle={constituency.gssArea?.mp?.party?.name ?? ''}
-              img={constituency.gssArea?.mp?.photo?.url ?? ''}
-            />
-          ))}
+          {constituencies?.map(
+            (constituency, index) =>
+              index < 5 && (
+                <div key={constituency.gss}>
+                  <Person
+                    name={constituency.gssArea?.mp?.name ?? ''}
+                    subtitle={constituency.gssArea?.mp?.party?.name ?? ''}
+                    img={constituency.gssArea?.mp?.photo?.url ?? ''}
+                  />
+                  <p className="text-sm opacity-80 rounded-md">
+                    ({constituency.gssArea?.name})
+                  </p>
+                </div>
+              )
+          )}
         </div>
       </CardContent>
     </Card>