Feat/dashboard experimentation combined view

nextjs/package.json

@@ -93,13 +93,17 @@
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.4",
     "react-grid-layout-next": "^2.2.0",
+    "react-hexgrid": "^2.0.1",
     "react-hook-form": "^7.51.0",
     "react-loader-spinner": "^6.1.6",
     "react-map-gl": "^7.1.7",
     "react-quill": "^2.0.0",
+    "react-resizable-panels": "^2.1.7",
     "react-simple-code-editor": "^0.13.1",
+    "recharts": "^2.15.0",
     "slug": "^9.1.0",
     "sonner": "^1.4.3",
+    "swr": "^2.3.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "theme-colors": "^0.1.0",

nextjs/src/app/globals.css

@@ -78,16 +78,16 @@
     --labour: 4, 100%, 58%;
     --conservative: 222, 100%, 58%;
     --foreground: var(--meep-gray-200);
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: var(--meep-gray-600);
+    --card-foreground: var(--meep-gray-200);
     --popover: var(--meep-gray-800);
     --popover-foreground: 0, 0%, 100%;
     --primary: 222, 14%, 34%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
     --secondary-foreground: var(--meep-gray-600);
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 222, 14%, 64%;
+    --muted: var(--meep-gray-600);
+    --muted-foreground: var(--meep-gray-200);
     --accent: var(--meep-gray-600);
     --accent-foreground: var(--meep-gray-200);
     --border: 0, 0%, 100%, 0.32;
@@ -111,6 +111,26 @@
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --chart-1: 222 69% 65%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --chart-6: 220 70% 50%;
+    --chart-7: 160 60% 45%;
+    --chart-8: 30 80% 55%;
+    --chart-9: 280 65% 60%;
+    --chart-10: 340 75% 55%;
+    --chart-11: 220 70% 50%;
+    --chart-12: 160 60% 45%;
+    --chart-13: 30 80% 55%;
+    --chart-14: 280 65% 60%;
+    --chart-15: 340 75% 55%;
+    --chart-16: 220 70% 50%;
+    --chart-17: 160 60% 45%;
+    --chart-18: 30 80% 55%;
+    --chart-19: 280 65% 60%;
+    --chart-20: 340 75% 55%;
   }
   .dark {
     --sidebar-background: 240 5.9% 10%;
@@ -121,6 +141,22 @@
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --chart-6: 220 70% 50%;
+    --chart-7: 160 60% 45%;
+    --chart-8: 30 80% 55%;
+    --chart-9: 280 65% 60%;
+    --chart-10: 340 75% 55%;
+    --chart-11: 220 70% 50%;
+    --chart-12: 160 60% 45%;
+    --chart-13: 30 80% 55%;
+    --chart-14: 280 65% 60%;
+    --chart-15: 340 75% 55%;
   }
 }
 

nextjs/src/app/reports/[id]/(components)/MapLayers/PoliticalChoropleths.tsx

@@ -1,4 +1,5 @@
 import { AnalyticalAreaType } from '@/__generated__/graphql'
+import { INITIAL_VIEW_STATES } from '@/components/LocalisedMap'
 import { useLoadedMap } from '@/lib/map'
 import { useAtom } from 'jotai'
 import React, { useEffect } from 'react'
@@ -66,6 +67,30 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
     }
   }, [map.loaded, dataByBoundary, report])
 
+  // When the selected boundary changes, fly to it
+  useEffect(() => {
+    if (selectedBoundary) {
+      const coordinates = dataByBoundary.find((d) => d.gss === selectedBoundary)
+        ?.gssArea?.point?.geometry?.coordinates
+      map.loadedMap?.flyTo({
+        center: (coordinates as [number, number]) || [
+          INITIAL_VIEW_STATES.uk.longitude,
+          INITIAL_VIEW_STATES.uk.latitude,
+        ],
+        zoom: 11 || INITIAL_VIEW_STATES.uk.zoom,
+      })
+    }
+    if (!selectedBoundary) {
+      map.loadedMap?.flyTo({
+        center: [
+          INITIAL_VIEW_STATES.uk.longitude,
+          INITIAL_VIEW_STATES.uk.latitude,
+        ],
+        zoom: INITIAL_VIEW_STATES.uk.zoom,
+      })
+    }
+  }, [selectedBoundary])
+
   if (!map.loaded) return null
   if (!dataByBoundary || !tileset) return null
 

nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { BACKEND_URL } from '@/env'
-import { selectedSourceMarkerAtom, useLoadedMap } from '@/lib/map'
+import { layerColour, selectedSourceMarkerAtom, useLoadedMap } from '@/lib/map'
+import { Point } from 'geojson'
 import { useAtom } from 'jotai'
 import { MapMouseEvent } from 'mapbox-gl'
 import { useEffect } from 'react'
@@ -43,8 +44,16 @@ export function MembersListPointMarkers({
 
       const handleClick = (event: MapMouseEvent) => {
         const feature = event.features?.[0]
-        if (feature?.properties?.id) {
-          setSelectedSourceMarker(feature)
+        if (feature?.properties?.id && feature.geometry.type === 'Point') {
+          const pointGeometry = feature.geometry as Point
+          const [longitude, latitude] = pointGeometry.coordinates
+          if (longitude !== undefined && latitude !== undefined) {
+            setSelectedSourceMarker(feature)
+            map.flyTo({
+              center: [longitude, latitude],
+              zoom: 16,
+            })
+          }
         }
       }
 

nextjs/src/app/reports/[id]/(components)/ReportDisplaySettings.tsx

@@ -8,22 +8,13 @@ import { isConstituencyPanelOpenAtom } from '@/lib/map'
 import { MixerHorizontalIcon } from '@radix-ui/react-icons'
 import { useAtomValue } from 'jotai'
 import React from 'react'
-import { NAVBAR_HEIGHT } from './ReportNavbar'
 import ReportConfigLegacyControls from './_ReportConfigLegacyControls'
 
 const ReportDisplaySettings: React.FC = () => {
   const isConstituencyPanelOpen = useAtomValue(isConstituencyPanelOpenAtom)
 
   return (
-    <div
-      id="report-display-settings"
-      style={{
-        top: NAVBAR_HEIGHT + 15 + 'px',
-        right: isConstituencyPanelOpen ? '400px' : '15px',
-        // right: 'calc(var(--sidebar-width) + 15px)',
-      }}
-      className="fixed z-10"
-    >
+    <div id="report-display-settings">
       <Popover>
         <PopoverTrigger asChild>
           <Button size="sm" variant="muted">

nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx

@@ -0,0 +1,169 @@
+import {
+  ConstituencyStatsOverviewQuery,
+  ConstituencyStatsOverviewQueryVariables,
+} from '@/__generated__/graphql'
+import { gql, useQuery } from '@apollo/client'
+import { scaleLinear } from 'd3-scale'
+import { useAtom } from 'jotai'
+import { useMemo, useState } from 'react'
+import { HexGrid, Hexagon, Layout } from 'react-hexgrid'
+import { hexData } from '../dashboard/uk-hex-data'
+import { selectedBoundaryAtom } from '../useSelectBoundary'
+import { useReport } from './ReportProvider'
+
+const CONSTITUENCY_STATS_OVERVIEW = gql`
+  query ConstituencyStatsOverview(
+    $reportID: ID!
+    $analyticalAreaType: AnalyticalAreaType!
+    $layerIds: [String!]!
+  ) {
+    mapReport(pk: $reportID) {
+      id
+      importedDataCountByConstituency: importedDataCountByArea(
+        analyticalAreaType: $analyticalAreaType
+        layerIds: $layerIds
+      ) {
+        label
+        gss
+        count
+        gssArea {
+          id
+          name
+          fitBounds
+        }
+      }
+    }
+  }
+`
+
+interface TooltipState {
+  content: string
+  x: number
+  y: number
+}
+
+export default function ReportDashboardHexMap() {
+  const [tooltip, setTooltip] = useState<TooltipState | null>(null)
+  const [selectedBoundary, setSelectedBoundary] = useAtom(selectedBoundaryAtom)
+  const { report } = useReport()
+
+  const { data: constituencyAnalytics } = useQuery<
+    ConstituencyStatsOverviewQuery,
+    ConstituencyStatsOverviewQueryVariables
+  >(CONSTITUENCY_STATS_OVERVIEW, {
+    variables: {
+      reportID: report.id,
+      analyticalAreaType:
+        report.displayOptions?.dataVisualisation?.boundaryType!,
+      layerIds: [report.displayOptions?.dataVisualisation?.dataSource!],
+    },
+  })
+
+  const activeConstituencies =
+    constituencyAnalytics?.mapReport.importedDataCountByConstituency
+
+  const activeGssCodes = useMemo(
+    () => new Set(activeConstituencies?.map((c) => c.gss)),
+    [activeConstituencies]
+  )
+
+  const handleMouseEnter = (
+    event: React.MouseEvent,
+    hex: (typeof hexData.hexes)[keyof typeof hexData.hexes]
+  ) => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    setTooltip({
+      content: hex.n,
+      x: rect.left + rect.width / 2,
+      y: rect.top,
+    })
+  }
+
+  console.log('Constituency data:', {
+    activeConstituencies: activeConstituencies?.map((c) => ({
+      gss: c.gss,
+      name: c.label,
+      count: c.count,
+    })),
+    sampleHexes: Object.entries(hexData.hexes)
+      .slice(0, 5)
+      .map(([id, hex]) => ({
+        id,
+        name: hex.n,
+        gss: id,
+      })),
+  })
+
+  const getHexCount = (id: string) => {
+    const constituency = activeConstituencies?.find((c) => c.gss === id)
+    if (constituency) {
+      return constituency.count
+    }
+    return 0
+  }
+
+  const colorScale = useMemo(() => {
+    if (!activeConstituencies?.length) return () => '#262C3B'
+
+    const counts = activeConstituencies.map((c) => c.count).filter((c) => c > 0)
+    const max = Math.max(...counts)
+    const min = 0
+
+    return scaleLinear<string>()
+      .domain([min, max])
+      .range(['#CCEEF7', '#00A8D5'])
+  }, [activeConstituencies])
+
+  return (
+    <div className="w-full h-full bg-[#262C3B]">
+      <HexGrid
+        width={'100%'}
+        height={'100%'}
+        viewBox="0 0 220 460"
+        className=""
+      >
+        <Layout
+          size={{ x: 4, y: 4 }}
+          spacing={1.05}
+          origin={{ x: -250, y: -150 }}
+        >
+          {Object.entries(hexData.hexes).map(([id, hex]) => {
+            const count = getHexCount(id)
+            const fillColor = count > 0 ? colorScale(count) : '#969EB0'
+
+            return (
+              <Hexagon
+                key={id}
+                q={hex.q}
+                r={hex.r * -1}
+                s={hex.q - hex.r}
+                style={{ fill: fillColor }}
+                className={`transition-colors duration-1000 hover:brightness-125
+                  ${selectedBoundary === id ? 'stroke-1 stroke-pink-700 animate-pulse' : ''}
+                  ${count > 0 ? 'opacity-100' : 'opacity-50'}
+                `}
+                onMouseEnter={(e) => handleMouseEnter(e, hex)}
+                onMouseLeave={() => setTooltip(null)}
+                onClick={() => setSelectedBoundary?.(id)}
+              ></Hexagon>
+            )
+          })}
+        </Layout>
+      </HexGrid>
+
+      {tooltip && (
+        <div
+          className="fixed z-50 bg-meepGray-600 text-popover-foreground px-3 py-1.5 text-sm rounded-md shadow-md"
+          style={{
+            left: tooltip.x,
+            top: tooltip.y - 40,
+            transform: 'translateX(-50%)',
+            pointerEvents: 'none',
+          }}
+        >
+          {tooltip.content}
+        </div>
+      )}
+    </div>
+  )
+}

nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx

@@ -1,18 +1,28 @@
 import ReportActions from '@/app/reports/[id]/(components)/ReportActions'
 import { useReport } from '@/app/reports/[id]/(components)/ReportProvider'
 import { useSidebar } from '@/components/ui/sidebar'
+import { useParams, usePathname } from 'next/navigation'
 
 import { contentEditableMutation } from '@/lib/html'
 import { atom, useAtomValue } from 'jotai'
 import { PanelRight } from 'lucide-react'
 import Link from 'next/link'
 import { MappedIcon } from '../../../../components/icons/MappedIcon'
+import ReportDashboardConsSelector from '../dashboard/ReportDashboardConsSelector'
+import ReportDisplaySettings from './ReportDisplaySettings'
+
+type Params = {
+  id: string
+}
 
 // You can set the title & href of the top left icon link based on route & context
 export const navbarTitleAtom = atom('')
 export const NAVBAR_HEIGHT = 48
 
 export default function ReportNavbar() {
+  const pathname = usePathname()
+  const params = useParams()
+  const id = params.id
   const title = useAtomValue(navbarTitleAtom)
   const { updateReport } = useReport()
   const { toggleSidebar } = useSidebar()
@@ -41,7 +51,12 @@ export default function ReportNavbar() {
           />{' '}
         </div>
       </section>
-      <section className="flex space-x-4"> </section>
+      <div className="flex flex-row gap-2 absolute left-1/2 -translate-x-1/2">
+        <ReportDashboardConsSelector />
+      </div>
+      <section className="flex space-x-4">
+        <ReportDisplaySettings />
+      </section>
     </nav>
   )
 }