clean up

commonknowledge · Dec 20, 2024 · 4ae8913 · 4ae8913
1 parent f97e3fb
commit 4ae8913
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 58 deletions.
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -14,9 +14,9 @@ import { CogIcon } from 'lucide-react'
 import { ReportDataSources } from '../(components)/ReportDataSources'
 import { useReport } from '../(components)/ReportProvider'
 import ReportDashboardHexMap from './ReportDashboardHexMap'
-import ReportDashboardKeyStats from './ReportDashboardKeyStats'
 import ReportDashboardList from './ReportDashboardList'
 import ReportDashboardMPs from './ReportDashboardMPs'
+import ReportDashboardMemberCount from './ReportDashboardMemberCount'
 import ReportDashboardMembersOverTime from './ReportDashboardMembersOverTime'
 export default function ReportDashboard() {
   const {
@@ -65,9 +65,9 @@ export default function ReportDashboard() {
       <div className="grid sm:grid-cols-2 md:grid-cols-3 grid-cols-1 gap-4 w-full ">
         {constituencies && (
           <>
-            <ReportDashboardKeyStats constituencies={constituencies} />
-            <ReportDashboardHexMap activeConstituencies={constituencies} />
+            <ReportDashboardMemberCount constituencies={constituencies} />
             <ReportDashboardMembersOverTime />
+            <ReportDashboardHexMap activeConstituencies={constituencies} />
             <ReportDashboardList constituencies={constituencies} />
             <ReportDashboardMPs constituencies={constituencies} />
           </>

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
@@ -47,6 +47,10 @@ export default function ReportDashboardHexMap({
         <CardDescription>Regional Distribution</CardDescription>
       </CardHeader>
       <CardContent>
+        <div className="text-7xl text-muted-foreground text-right">
+          {activeConstituencies?.length}
+          <p className="text-sm text-muted-foreground"> constituencies</p>
+        </div>
         <HexGrid
           width={'100%'}
           height={'100%'}

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
@@ -5,29 +5,78 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ChartCard'
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart'
+import * as React from 'react'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+const chartConfig = {
+  browser: { label: 'Constituency', color: 'hsl(var(--chart-1))' },
+}
 
 export default function ReportDashboardList({
   constituencies,
 }: {
   constituencies: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
 }) {
+  const chartData = React.useMemo(() => {
+    if (!constituencies) return []
+
+    // Sort constituencies by count and take top 5
+    return constituencies
+      .slice(0, 40)
+      .map((constituency, index) => ({
+        name: constituency.gssArea?.name || 'Unknown',
+        count: constituency.count,
+        fill: `hsl(var(--chart-${(index % 20) + 1}))`,
+      }))
+      .sort((a, b) => b.count - a.count) // Sort by count descending
+  }, [constituencies])
+
   return (
     <Card>
       <CardHeader>
         <CardTitle>Key Constituencies</CardTitle>
       </CardHeader>
-      <CardContent className="max-h-[400px] overflow-y-auto">
-        <div className="grid gap-4">
-          {constituencies?.map((constituency) => (
-            <div
-              key={constituency.gss}
-              className="flex justify-between items-center p-2 bg-meepGray-700 rounded"
-            >
-              <span>{constituency.gssArea?.name}</span>
-              <span>{constituency.count} members</span>
-            </div>
-          ))}
-        </div>
+      <CardContent className="h-[500px] overflow-y-auto">
+        <ChartContainer config={chartConfig} className={`h-[1000px] w-full`}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            height={800}
+            margin={{
+              left: 10,
+            }}
+          >
+            <YAxis
+              dataKey="name"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              width={120}
+              style={{
+                fill: 'white',
+              }}
+            />
+
+            <YAxis
+              dataKey="name"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              height={100}
+            />
+            <XAxis dataKey="count" type="number" hide />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Bar dataKey="count" layout="vertical" radius={5} />
+          </BarChart>
+        </ChartContainer>
       </CardContent>
     </Card>
   )

diff --git a/...id]/dashboard/ReportDashboardKeyStats.tsx → .../dashboard/ReportDashboardMemberCount.tsx b/...id]/dashboard/ReportDashboardKeyStats.tsx → .../dashboard/ReportDashboardMemberCount.tsx
@@ -17,7 +17,7 @@ import {
   ChartTooltipContent,
 } from '@/components/ui/chart'
 
-export default function ReportDashboardKeyStats({
+export default function ReportDashboardMemberCount({
   constituencies,
 }: {
   constituencies: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
@@ -89,11 +89,6 @@ export default function ReportDashboardKeyStats({
         chartData={chartData}
         totalMembers={totalMembers}
       />
-      <TotalConstituencyChart
-        chartConfig={chartConfig}
-        chartData={chartData}
-        totalMembers={totalMembers}
-      />
     </>
   )
 }
@@ -167,40 +162,3 @@ function TotalMembersChart({
     </Card>
   )
 }
-
-function TotalConstituencyChart({
-  chartConfig,
-  chartData,
-  totalMembers,
-}: {
-  chartConfig: ChartConfig
-  chartData: any[]
-  totalMembers: number
-}) {
-  // Calculate total number of constituencies
-  const totalConstituencies = React.useMemo(() => {
-    return chartData.length
-  }, [chartData])
-
-  return (
-    <Card>
-      <CardHeader className="">
-        <CardTitle>Total Constituencies reached</CardTitle>
-        <CardDescription>Total constituency distribution</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1">
-        <ChartContainer
-          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <div className="flex flex-col items-center justify-center h-full">
-            <p className="text-white text-7xl font-bold">
-              {totalConstituencies.toLocaleString()}
-            </p>
-            <p className="text-white text-sm">Constituencies</p>
-          </div>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}