From 47c3f728821243dcaa87a197e788540019101ec2 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Thu, 19 Dec 2024 18:18:59 +0000
Subject: [PATCH 01/26] charts creation

---
 nextjs/package-lock.json                      | 257 +++++++++++-
 nextjs/package.json                           |   2 +
 nextjs/src/app/globals.css                    |  44 ++-
 .../[id]/dashboard/ReportDashboard.tsx        | 131 +++++++
 .../dashboard/ReportDashboardKeyStats.tsx     | 187 +++++++++
 .../[id]/dashboard/ReportDashboardList.tsx    |  34 ++
 .../[id]/dashboard/ReportDashboardMPs.tsx     |  33 ++
 .../ReportDashboardMembersOverTime.tsx        |  91 +++++
 .../src/app/reports/[id]/dashboard/page.tsx   |  78 ++++
 nextjs/src/components/ChartCard.tsx           |  82 ++++
 nextjs/src/components/ui/chart.tsx            | 365 ++++++++++++++++++
 nextjs/tsconfig.json                          |   2 +-
 12 files changed, 1299 insertions(+), 7 deletions(-)
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboardMPs.tsx
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboardMembersOverTime.tsx
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/page.tsx
 create mode 100644 nextjs/src/components/ChartCard.tsx
 create mode 100644 nextjs/src/components/ui/chart.tsx

diff --git a/nextjs/package-lock.json b/nextjs/package-lock.json
index aae164173..f679da66a 100644
--- a/nextjs/package-lock.json
+++ b/nextjs/package-lock.json
@@ -77,11 +77,13 @@
         "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-simple-code-editor": "^0.13.1",
+        "recharts": "^2.15.0",
         "slug": "^9.1.0",
         "sonner": "^1.4.3",
         "tailwind-merge": "^2.2.1",
@@ -7628,6 +7630,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-format": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
@@ -7635,11 +7655,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-scale": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
       "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/d3-time": "*"
@@ -7652,11 +7686,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
     "node_modules/@types/d3-time": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
       "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
     "node_modules/@types/date-fns": {
@@ -11263,6 +11311,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -12902,6 +12959,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-format": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
@@ -12923,6 +12989,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -12952,6 +13027,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-time": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
@@ -12976,6 +13063,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -13308,6 +13404,12 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "license": "MIT"
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/decode-uri-component": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
@@ -13647,6 +13749,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -15529,6 +15641,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "node_modules/filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -21792,6 +21910,12 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nan": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.22.0.tgz",
+      "integrity": "sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==",
+      "optional": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -24159,6 +24283,38 @@
         "node": ">=6"
       }
     },
+    "node_modules/react-hexgrid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-hexgrid/-/react-hexgrid-2.0.1.tgz",
+      "integrity": "sha512-5yBYUAhagw3SNeqgyzcRblxtQQHZFabCaNHufX1q6eXwaGHQx2wEaX+gNgBjB4RpC6VIMOBCjGE7AUK43k2rkg==",
+      "dependencies": {
+        "classnames": "^2.3.1"
+      },
+      "optionalDependencies": {
+        "fsevents": "^1.2.13"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-hexgrid/node_modules/fsevents": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "deprecated": "Upgrade to fsevents v2 to mitigate potential security issues",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.54.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.0.tgz",
@@ -24374,6 +24530,21 @@
         "react-dom": "*"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-spinners": {
       "version": "0.13.8",
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
@@ -24407,6 +24578,22 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -24493,6 +24680,50 @@
       "integrity": "sha512-EbrziT4s8cWPmzr47eYVW3wimS4HsvlnV5ri1xw1aR6JQo/OrJX5rkl32K/QQHdxeabJETtfeaROGhd8W7uBgg==",
       "license": "ISC"
     },
+    "node_modules/recharts": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.0.tgz",
+      "integrity": "sha512-cIvMxDfpAmqAmVgc4yb7pgm/O1tmmkl/CjrvXuW+62/+7jj/iF9Ykm+hb/UJt42TREHMyd3gb+pkgoa2MxgDIw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/reduce-object": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/reduce-object/-/reduce-object-0.1.3.tgz",
@@ -27992,6 +28223,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vinyl": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-1.2.0.tgz",
diff --git a/nextjs/package.json b/nextjs/package.json
index f3198f52d..0e094f8df 100644
--- a/nextjs/package.json
+++ b/nextjs/package.json
@@ -93,11 +93,13 @@
     "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-simple-code-editor": "^0.13.1",
+    "recharts": "^2.15.0",
     "slug": "^9.1.0",
     "sonner": "^1.4.3",
     "tailwind-merge": "^2.2.1",
diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css
index 928a9d6b2..e82a71aa2 100644
--- a/nextjs/src/app/globals.css
+++ b/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%;
   }
 }
 
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
new file mode 100644
index 000000000..045bce0f0
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -0,0 +1,131 @@
+import {
+  ConstituencyStatsOverviewQuery,
+  ConstituencyStatsOverviewQueryVariables,
+} from '@/__generated__/graphql'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { gql, useQuery } from '@apollo/client'
+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 ReportDashboardMembersOverTime from './ReportDashboardMembersOverTime'
+export default function ReportDashboard() {
+  const {
+    report: {
+      id,
+      displayOptions: { dataVisualisation },
+    },
+  } = useReport()
+
+  const constituencyAnalytics = useQuery<
+    ConstituencyStatsOverviewQuery,
+    ConstituencyStatsOverviewQueryVariables
+  >(CONSTITUENCY_STATS_OVERVIEW, {
+    variables: {
+      reportID: id,
+      analyticalAreaType: dataVisualisation?.boundaryType!,
+      layerIds: [dataVisualisation?.dataSource!],
+    },
+  })
+
+  const constituencies =
+    constituencyAnalytics.data?.mapReport.importedDataCountByConstituency
+      .filter((constituency) => constituency.gssArea)
+      .sort((a, b) => b.count - a.count) // Sort by count in descending order
+
+  if (constituencyAnalytics.loading) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <main className="flex flex-col w-full p-4 h-[calc(100vh-48px)] overflow-y-auto">
+      <div className="flex justify-between items-center w-full mb-4">
+        <h1 className="text-2xl font-bold ">Dashboard</h1>
+        <Dialog>
+          <DialogTrigger className="flex items-center gap-2 opacity-50 hover:opacity-100 transition-opacity duration-200">
+            <CogIcon className="w-4 h-4" /> Data Sources
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Data Sources</DialogTitle>
+              <ReportDataSources />
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      </div>
+      <div className="grid sm:grid-cols-3 grid-cols-1 gap-4 w-full ">
+        {constituencies && (
+          <>
+            <ReportDashboardKeyStats constituencies={constituencies} />
+            <ReportDashboardHexMap activeConstituencies={constituencies} />
+            <ReportDashboardMembersOverTime />
+            <ReportDashboardList constituencies={constituencies} />
+            <ReportDashboardMPs constituencies={constituencies} />
+          </>
+        )}
+      </div>
+    </main>
+  )
+}
+
+// Same query from TopConstituencies
+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
+          mp: person(filters: { personType: "MP" }) {
+            id
+            name
+            photo {
+              url
+            }
+            party: personDatum(filters: { dataType_Name: "party" }) {
+              name: data
+            }
+          }
+          lastElection {
+            stats {
+              date
+              majority
+              electorate
+              firstPartyResult {
+                party
+                shade
+                votes
+              }
+              secondPartyResult {
+                party
+                shade
+                votes
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
new file mode 100644
index 000000000..6a0386b58
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
@@ -0,0 +1,187 @@
+'use client'
+import { ConstituencyStatsOverviewQuery } from '@/__generated__/graphql'
+import * as React from 'react'
+import { Label, Pie, PieChart } from 'recharts'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ChartCard'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart'
+
+export default function ReportDashboardKeyStats({
+  constituencies,
+}: {
+  constituencies: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
+}) {
+  const chartData = React.useMemo(() => {
+    if (!constituencies) return []
+
+    // Create a map to store totals by data source
+    const sourceTotals = new Map<string, number>()
+
+    constituencies.forEach((constituency) => {
+      const source = constituency.gssArea?.name || 'Unknown'
+      const currentTotal = sourceTotals.get(source) || 0
+      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}))`,
+    }))
+  }, [constituencies])
+
+  const totalMembers = React.useMemo(() => {
+    return chartData.reduce((acc, curr) => acc + curr.members, 0)
+  }, [chartData])
+
+  const chartConfig = {
+    members: {
+      label: 'Members',
+    },
+    // Add config for each data source
+    ...Object.fromEntries(
+      chartData.map((item, index) => [
+        item.source,
+        {
+          label: item.source,
+          color: `hsl(var(--chart-${index + 1}))`,
+        },
+      ])
+    ),
+  } satisfies ChartConfig
+
+  return (
+    <>
+      {/* Pie Chart */}
+      <TotalMembersChart
+        chartConfig={chartConfig}
+        chartData={chartData}
+        totalMembers={totalMembers}
+      />
+      <TotalConstituencyChart
+        chartConfig={chartConfig}
+        chartData={chartData}
+        totalMembers={totalMembers}
+      />
+    </>
+  )
+}
+
+function TotalMembersChart({
+  chartConfig,
+  chartData,
+  totalMembers,
+}: {
+  chartConfig: ChartConfig
+  chartData: any[]
+  totalMembers: number
+}) {
+  return (
+    <Card>
+      <CardHeader className="items-center">
+        <CardTitle>Total Members</CardTitle>
+        <CardDescription>Distribution by Constituency</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="members"
+              nameKey="source"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                        className="fill-white"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {totalMembers.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="text-white "
+                        >
+                          Members
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </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="items-center">
+        <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>
+  )
+}
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
new file mode 100644
index 000000000..232f90cd0
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
@@ -0,0 +1,34 @@
+import { ConstituencyStatsOverviewQuery } from '@/__generated__/graphql'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ChartCard'
+
+export default function ReportDashboardList({
+  constituencies,
+}: {
+  constituencies: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
+}) {
+  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>
+    </Card>
+  )
+}
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMPs.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMPs.tsx
new file mode 100644
index 000000000..48463518d
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMPs.tsx
@@ -0,0 +1,33 @@
+import { ConstituencyStatsOverviewQuery } from '@/__generated__/graphql'
+import { Person } from '@/app/reports/[id]/(components)/reportsConstituencyItem'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ChartCard'
+export default function ReportDashboardMPs({
+  constituencies,
+}: {
+  constituencies: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Key MPs</CardTitle>
+      </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 ?? ''}
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMembersOverTime.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMembersOverTime.tsx
new file mode 100644
index 000000000..0b907850b
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMembersOverTime.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ChartCard'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart'
+const chartData = [
+  { month: 'July', signups: 186 },
+  { month: 'August', signups: 305 },
+  { month: 'September', signups: 237 },
+  { month: 'October', signups: 73 },
+  { month: 'November', signups: 209 },
+  { month: 'December', signups: 214 },
+]
+
+const chartConfig = {
+  signups: {
+    label: 'Sign Ups',
+    color: 'hsl(var(--chart-1))',
+  },
+} satisfies ChartConfig
+
+export default function ReportDashboardMembersOverTime() {
+  return (
+    <Card className="sm:col-span-1 col-span-1">
+      <CardHeader>
+        <CardTitle>Sign Ups</CardTitle>
+        <CardDescription>
+          Showing total sign ups for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="signups"
+              type="natural"
+              fill="var(--color-signups)"
+              fillOpacity={0.4}
+              stroke="var(--color-signups)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/nextjs/src/app/reports/[id]/dashboard/page.tsx b/nextjs/src/app/reports/[id]/dashboard/page.tsx
new file mode 100644
index 000000000..8c8cb123a
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/page.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { useQuery } from '@apollo/client'
+import { Provider as JotaiProvider, useAtomValue } from 'jotai'
+import 'mapbox-gl/dist/mapbox-gl.css'
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+import { MapProvider } from 'react-map-gl'
+
+import {
+  GetMapReportQuery,
+  GetMapReportQueryVariables,
+} from '@/__generated__/graphql'
+import { currentOrganisationIdAtom } from '@/lib/organisation'
+
+import { SidebarProvider } from '@/components/ui/sidebar'
+import { merge } from 'lodash'
+import ReportNavbar from '../(components)/ReportNavbar'
+import ReportProvider from '../(components)/ReportProvider'
+import { GET_MAP_REPORT } from '../gql_queries'
+import { getPoliticalTilesetsByCountry } from '../politicalTilesets'
+import { defaultReportConfig, MapReportExtended } from '../reportContext'
+import ReportDashboard from './ReportDashboard'
+
+type Params = {
+  id: string
+}
+
+export default function Page({ params: { id } }: { params: Params }) {
+  const router = useRouter()
+  const report = useQuery<GetMapReportQuery, GetMapReportQueryVariables>(
+    GET_MAP_REPORT,
+    { variables: { id } }
+  )
+  const orgId = useAtomValue(currentOrganisationIdAtom)
+
+  // TODO: Implement multi tenancy at the database level
+  // TODO: Move this logic to middleware (add orgIds as a custom data array on the user's JWT)
+  useEffect(() => {
+    if (
+      orgId &&
+      report.data &&
+      report.data.mapReport.organisation.id !== orgId
+    ) {
+      router.push('/reports')
+    }
+  }, [orgId, report, router])
+
+  // Really important to check if the report is null before rendering the page
+  // The ReportProvider component needs to be able to provide a report to its children
+  if (!report.data?.mapReport) return null
+  const mapReport = merge(
+    {
+      displayOptions: defaultReportConfig,
+      politicalBoundaries: getPoliticalTilesetsByCountry('uk'),
+    },
+    report.data.mapReport
+  ) as unknown as MapReportExtended
+
+  return (
+    <JotaiProvider key={id}>
+      <MapProvider>
+        <ReportProvider report={mapReport}>
+          <SidebarProvider
+            style={
+              {
+                '--sidebar-width': '360px',
+              } as React.CSSProperties
+            }
+          >
+            <ReportNavbar />
+            <ReportDashboard />
+          </SidebarProvider>
+        </ReportProvider>
+      </MapProvider>
+    </JotaiProvider>
+  )
+}
diff --git a/nextjs/src/components/ChartCard.tsx b/nextjs/src/components/ChartCard.tsx
new file mode 100644
index 000000000..a399e3786
--- /dev/null
+++ b/nextjs/src/components/ChartCard.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex flex-col space-y-1.5 p-6 border-b border-meepGray-800',
+      className
+    )}
+    {...props}
+  />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'text-xl font-IBMPlexMono leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm font-normal opacity-50', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 ', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
diff --git a/nextjs/src/components/ui/chart.tsx b/nextjs/src/components/ui/chart.tsx
new file mode 100644
index 000000000..32dc873f3
--- /dev/null
+++ b/nextjs/src/components/ui/chart.tsx
@@ -0,0 +1,365 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/nextjs/tsconfig.json b/nextjs/tsconfig.json
index 1cf6871c4..14d6b7ea1 100644
--- a/nextjs/tsconfig.json
+++ b/nextjs/tsconfig.json
@@ -29,6 +29,6 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
-  ],
+, "src/app/reports/[id]/dashboard/UK Constituencies 2024.hexjson"  ],
   "exclude": ["node_modules", ".next"]
 }

From 0c5b1192bd029e64a1419a24876b643fb706f2e9 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Thu, 19 Dec 2024 18:19:10 +0000
Subject: [PATCH 02/26] hexmap

---
 .../[id]/dashboard/ReportDashboardHexMap.tsx  |   94 +
 .../app/reports/[id]/dashboard/uk-hex-data.ts | 4877 +++++++++++++++++
 2 files changed, 4971 insertions(+)
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/uk-hex-data.ts

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
new file mode 100644
index 000000000..eeefe4cf9
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
@@ -0,0 +1,94 @@
+import { ConstituencyStatsOverviewQuery } from '@/__generated__/graphql'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ChartCard'
+import { useMemo, useState } from 'react'
+import { HexGrid, Hexagon, Layout } from 'react-hexgrid'
+import { hexData } from './uk-hex-data'
+
+interface TooltipState {
+  content: string
+  x: number
+  y: number
+}
+
+export default function ReportDashboardHexMap({
+  activeConstituencies,
+}: {
+  activeConstituencies?: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
+}) {
+  const [tooltip, setTooltip] = useState<TooltipState | null>(null)
+
+  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 + window.scrollX,
+      y: rect.top + window.scrollY,
+    })
+  }
+
+  return (
+    <Card className="w-full row-span-2 relative">
+      <CardHeader>
+        <CardTitle>Constituency Map </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <HexGrid
+          width={'100%'}
+          height={'100%'}
+          viewBox="0 0 220 420"
+          className="my0"
+        >
+          <Layout
+            size={{ x: 4, y: 4 }}
+            spacing={1.05}
+            origin={{ x: -250, y: -180 }}
+          >
+            {Object.entries(hexData.hexes).map(([id, hex]) => (
+              <Hexagon
+                key={id}
+                q={hex.q}
+                r={hex.r * -1}
+                s={hex.q - hex.r}
+                fill={
+                  activeGssCodes?.has(id)
+                    ? `hsl(var(--chart-1))`
+                    : `hsl(var(--chart-2))`
+                }
+                className={`fill-white transition-colors duration-200 hover:opacity-75 ${
+                  activeGssCodes?.has(id) ? 'opacity-100' : 'opacity-50'
+                }`}
+                onMouseEnter={(e) => handleMouseEnter(e, hex)}
+                onMouseLeave={() => setTooltip(null)}
+              />
+            ))}
+          </Layout>
+        </HexGrid>
+
+        {tooltip && (
+          <div
+            className="absolute z-50 bg-popover text-popover-foreground px-3 py-1.5 text-sm rounded-md shadow-md"
+            style={{
+              left: tooltip.x,
+              top: tooltip.y - 60,
+            }}
+          >
+            {tooltip.content}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/nextjs/src/app/reports/[id]/dashboard/uk-hex-data.ts b/nextjs/src/app/reports/[id]/dashboard/uk-hex-data.ts
new file mode 100644
index 000000000..3ebc28914
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/uk-hex-data.ts
@@ -0,0 +1,4877 @@
+// This file contains the hex coordinates for UK constituencies
+export const hexData = {
+  layout: 'odd-r',
+  version: '1.2',
+  hexes: {
+    E14001074: {
+      n: 'Barnsley North',
+      r: -23,
+      q: 57,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001075: {
+      n: 'Barnsley South',
+      r: -23,
+      q: 58,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001083: {
+      n: 'Beckenham and Penge',
+      r: -43,
+      q: 65,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001086: {
+      n: 'Bethnal Green and Stepney',
+      r: -39,
+      q: 65,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001090: {
+      n: 'Bicester and Woodstock',
+      r: -34,
+      q: 59,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001092: {
+      n: 'Birmingham Edgbaston',
+      r: -33,
+      q: 53,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001093: {
+      n: 'Birmingham Erdington',
+      r: -31,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001094: {
+      n: 'Birmingham Hall Green and Moseley',
+      r: -32,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001095: {
+      n: 'Birmingham Hodge Hill and Solihull North',
+      r: -31,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001096: {
+      n: 'Birmingham Ladywood',
+      r: -32,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001097: {
+      n: 'Birmingham Northfield',
+      r: -34,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001098: {
+      n: 'Birmingham Perry Barr',
+      r: -31,
+      q: 53,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001099: {
+      n: 'Birmingham Selly Oak',
+      r: -33,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001100: {
+      n: 'Birmingham Yardley',
+      r: -32,
+      q: 56,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001103: {
+      n: 'Blackley and Middleton South',
+      r: -23,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001104: {
+      n: 'Blackpool North and Fleetwood',
+      r: -18,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001106: {
+      n: 'Blaydon and Consett',
+      r: -14,
+      q: 55,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001107: {
+      n: 'Blyth and Ashington',
+      r: -12,
+      q: 55,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001111: {
+      n: 'Bolton South and Walkden',
+      r: -22,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001122: {
+      n: 'Brent East',
+      r: -38,
+      q: 61,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001123: {
+      n: 'Brent West',
+      r: -38,
+      q: 60,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001126: {
+      n: 'Bridgwater',
+      r: -41,
+      q: 48,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001127: {
+      n: 'Bridlington and The Wolds',
+      r: -20,
+      q: 63,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001128: {
+      n: 'Brigg and Immingham',
+      r: -24,
+      q: 62,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001129: {
+      n: 'Brighton Kemptown and Peacehaven',
+      r: -45,
+      q: 67,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001130: {
+      n: 'Brighton Pavilion',
+      r: -44,
+      q: 67,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001131: {
+      n: 'Bristol Central',
+      r: -38,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001133: {
+      n: 'Bristol North East',
+      r: -37,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001134: {
+      n: 'Bristol North West',
+      r: -38,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001135: {
+      n: 'Bristol South',
+      r: -39,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001136: {
+      n: 'Broadland and Fakenham',
+      r: -27,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001137: {
+      n: 'Bromley and Biggin Hill',
+      r: -42,
+      q: 67,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001138: {
+      n: 'Bromsgrove',
+      r: -33,
+      q: 52,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001139: {
+      n: 'Broxbourne',
+      r: -35,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001140: {
+      n: 'Broxtowe',
+      r: -27,
+      q: 59,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001141: {
+      n: 'Buckingham and Bletchley',
+      r: -34,
+      q: 60,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001142: {
+      n: 'Burnley',
+      r: -19,
+      q: 55,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001143: {
+      n: 'Burton and Uttoxeter',
+      r: -28,
+      q: 56,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001144: {
+      n: 'Bury North',
+      r: -21,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001145: {
+      n: 'Bury South',
+      r: -22,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001146: {
+      n: 'Bury St Edmunds and Stowmarket',
+      r: -31,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001147: {
+      n: 'Calder Valley',
+      r: -20,
+      q: 56,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001148: {
+      n: 'Camborne and Redruth',
+      r: -45,
+      q: 43,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001149: {
+      n: 'Cambridge',
+      r: -30,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001150: {
+      n: 'Cannock Chase',
+      r: -29,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001151: {
+      n: 'Canterbury',
+      r: -41,
+      q: 71,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001152: {
+      n: 'Carlisle',
+      r: -14,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001153: {
+      n: 'Carshalton and Wallington',
+      r: -43,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001154: {
+      n: 'Castle Point',
+      r: -36,
+      q: 69,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001155: {
+      n: 'Central Devon',
+      r: -42,
+      q: 47,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001156: {
+      n: 'Central Suffolk and North Ipswich',
+      r: -29,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001157: {
+      n: 'Chatham and Aylesford',
+      r: -40,
+      q: 69,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001158: {
+      n: 'Cheadle',
+      r: -26,
+      q: 55,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001159: {
+      n: 'Chelmsford',
+      r: -33,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001160: {
+      n: 'Chelsea and Fulham',
+      r: -40,
+      q: 61,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001161: {
+      n: 'Cheltenham',
+      r: -36,
+      q: 52,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001162: {
+      n: 'Chesham and Amersham',
+      r: -36,
+      q: 59,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001163: {
+      n: 'Chester North and Neston',
+      r: -28,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001164: {
+      n: 'Chester South and Eddisbury',
+      r: -27,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001165: {
+      n: 'Chesterfield',
+      r: -26,
+      q: 59,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001166: {
+      n: 'Chichester',
+      r: -44,
+      q: 60,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001167: {
+      n: 'Chingford and Woodford Green',
+      r: -35,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001168: {
+      n: 'Chippenham',
+      r: -39,
+      q: 52,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001169: {
+      n: 'Chipping Barnet',
+      r: -36,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001170: {
+      n: 'Chorley',
+      r: -20,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001171: {
+      n: 'Christchurch',
+      r: -42,
+      q: 53,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001172: {
+      n: 'Cities of London and Westminster',
+      r: -40,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001173: {
+      n: 'City of Durham',
+      r: -16,
+      q: 55,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001174: {
+      n: 'Clacton',
+      r: -32,
+      q: 69,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001175: {
+      n: 'Clapham and Brixton Hill',
+      r: -42,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001176: {
+      n: 'Colchester',
+      r: -32,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001177: {
+      n: 'Colne Valley',
+      r: -23,
+      q: 55,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001178: {
+      n: 'Congleton',
+      r: -27,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001179: {
+      n: 'Corby and East Northamptonshire',
+      r: -30,
+      q: 62,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001180: {
+      n: 'Coventry East',
+      r: -33,
+      q: 57,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001181: {
+      n: 'Coventry North West',
+      r: -33,
+      q: 56,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001182: {
+      n: 'Coventry South',
+      r: -34,
+      q: 57,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001183: {
+      n: 'Cramlington and Killingworth',
+      r: -12,
+      q: 56,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001184: {
+      n: 'Crawley',
+      r: -44,
+      q: 69,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001185: {
+      n: 'Crewe and Nantwich',
+      r: -27,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001186: {
+      n: 'Croydon East',
+      r: -42,
+      q: 65,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001187: {
+      n: 'Croydon South',
+      r: -43,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001188: {
+      n: 'Croydon West',
+      r: -43,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001189: {
+      n: 'Dagenham and Rainham',
+      r: -37,
+      q: 67,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001190: {
+      n: 'Darlington',
+      r: -17,
+      q: 55,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001191: {
+      n: 'Dartford',
+      r: -40,
+      q: 68,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001192: {
+      n: 'Daventry',
+      r: -32,
+      q: 60,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001193: {
+      n: 'Derby North',
+      r: -28,
+      q: 58,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001194: {
+      n: 'Derby South',
+      r: -28,
+      q: 57,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001195: {
+      n: 'Derbyshire Dales',
+      r: -26,
+      q: 57,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001196: {
+      n: 'Dewsbury and Batley',
+      r: -22,
+      q: 57,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001197: {
+      n: 'Didcot and Wantage',
+      r: -38,
+      q: 54,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001198: {
+      n: 'Doncaster Central',
+      r: -23,
+      q: 60,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001199: {
+      n: 'Doncaster East and the Isle of Axholme',
+      r: -23,
+      q: 61,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001200: {
+      n: 'Doncaster North',
+      r: -22,
+      q: 61,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001201: {
+      n: 'Dorking and Horley',
+      r: -43,
+      q: 59,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001202: {
+      n: 'Dover and Deal',
+      r: -41,
+      q: 72,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001203: {
+      n: 'Droitwich and Evesham',
+      r: -36,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001204: {
+      n: 'Dudley',
+      r: -31,
+      q: 51,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001205: {
+      n: 'Dulwich and West Norwood',
+      r: -42,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001206: {
+      n: 'Dunstable and Leighton Buzzard',
+      r: -33,
+      q: 62,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001207: {
+      n: 'Ealing Central and Acton',
+      r: -39,
+      q: 59,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001208: {
+      n: 'Ealing North',
+      r: -38,
+      q: 59,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001209: {
+      n: 'Ealing Southall',
+      r: -39,
+      q: 58,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001210: {
+      n: 'Earley and Woodley',
+      r: -36,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001211: {
+      n: 'Easington',
+      r: -16,
+      q: 57,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001212: {
+      n: 'East Grinstead and Uckfield',
+      r: -43,
+      q: 69,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001213: {
+      n: 'East Ham',
+      r: -38,
+      q: 67,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001214: {
+      n: 'East Hampshire',
+      r: -41,
+      q: 55,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001215: {
+      n: 'East Surrey',
+      r: -43,
+      q: 67,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001216: {
+      n: 'East Thanet',
+      r: -39,
+      q: 71,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001217: {
+      n: 'East Wiltshire',
+      r: -41,
+      q: 53,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001218: {
+      n: 'East Worthing and Shoreham',
+      r: -44,
+      q: 65,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001219: {
+      n: 'Eastbourne',
+      r: -45,
+      q: 69,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001220: {
+      n: 'Eastleigh',
+      r: -41,
+      q: 54,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001221: {
+      n: 'Edmonton and Winchmore Hill',
+      r: -36,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001222: {
+      n: 'Ellesmere Port and Bromborough',
+      r: -27,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001223: {
+      n: 'Eltham and Chislehurst',
+      r: -41,
+      q: 66,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001224: {
+      n: 'Ely and East Cambridgeshire',
+      r: -30,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001225: {
+      n: 'Enfield North',
+      r: -35,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001226: {
+      n: 'Epping Forest',
+      r: -35,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001227: {
+      n: 'Epsom and Ewell',
+      r: -43,
+      q: 60,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001228: {
+      n: 'Erewash',
+      r: -28,
+      q: 59,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001229: {
+      n: 'Erith and Thamesmead',
+      r: -40,
+      q: 67,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001230: {
+      n: 'Esher and Walton',
+      r: -42,
+      q: 58,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001231: {
+      n: 'Exeter',
+      r: -42,
+      q: 48,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001232: {
+      n: 'Exmouth and Exeter East',
+      r: -43,
+      q: 48,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001233: {
+      n: 'Fareham and Waterlooville',
+      r: -43,
+      q: 55,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001234: {
+      n: 'Farnham and Bordon',
+      r: -42,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001235: {
+      n: 'Faversham and Mid Kent',
+      r: -40,
+      q: 71,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001236: {
+      n: 'Feltham and Heston',
+      r: -40,
+      q: 59,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001237: {
+      n: 'Filton and Bradley Stoke',
+      r: -37,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001238: {
+      n: 'Finchley and Golders Green',
+      r: -37,
+      q: 61,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001239: {
+      n: 'Folkestone and Hythe',
+      r: -42,
+      q: 71,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001240: {
+      n: 'Forest of Dean',
+      r: -35,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001241: {
+      n: 'Frome and East Somerset',
+      r: -41,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001242: {
+      n: 'Fylde',
+      r: -19,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001243: {
+      n: 'Gainsborough',
+      r: -25,
+      q: 61,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001244: {
+      n: 'Gateshead Central and Whickham',
+      r: -15,
+      q: 56,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001245: {
+      n: 'Gedling',
+      r: -28,
+      q: 61,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001246: {
+      n: 'Gillingham and Rainham',
+      r: -40,
+      q: 70,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001247: {
+      n: 'Glastonbury and Somerton',
+      r: -41,
+      q: 49,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001248: {
+      n: 'Gloucester',
+      r: -35,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001249: {
+      n: 'Godalming and Ash',
+      r: -42,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001250: {
+      n: 'Goole and Pocklington',
+      r: -21,
+      q: 61,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001251: {
+      n: 'Gorton and Denton',
+      r: -24,
+      q: 55,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001252: {
+      n: 'Gosport',
+      r: -43,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001253: {
+      n: 'Grantham and Bourne',
+      r: -28,
+      q: 63,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001254: {
+      n: 'Gravesham',
+      r: -39,
+      q: 68,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001255: {
+      n: 'Great Grimsby and Cleethorpes',
+      r: -24,
+      q: 63,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001256: {
+      n: 'Great Yarmouth',
+      r: -27,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001257: {
+      n: 'Greenwich and Woolwich',
+      r: -40,
+      q: 66,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001258: {
+      n: 'Guildford',
+      r: -41,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001259: {
+      n: 'Hackney North and Stoke Newington',
+      r: -38,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001260: {
+      n: 'Hackney South and Shoreditch',
+      r: -39,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001261: {
+      n: 'Halesowen',
+      r: -33,
+      q: 51,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001262: {
+      n: 'Halifax',
+      r: -21,
+      q: 55,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001263: {
+      n: 'Hamble Valley',
+      r: -43,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001264: {
+      n: 'Hammersmith and Chiswick',
+      r: -39,
+      q: 60,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001265: {
+      n: 'Hampstead and Highgate',
+      r: -38,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001266: {
+      n: 'Harborough, Oadby and Wigston',
+      r: -31,
+      q: 61,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001267: {
+      n: 'Harlow',
+      r: -32,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001268: {
+      n: 'Harpenden and Berkhamsted',
+      r: -34,
+      q: 62,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001269: {
+      n: 'Harrogate and Knaresborough',
+      r: -18,
+      q: 59,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001270: {
+      n: 'Harrow East',
+      r: -37,
+      q: 60,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001271: {
+      n: 'Harrow West',
+      r: -37,
+      q: 59,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001272: {
+      n: 'Hartlepool',
+      r: -16,
+      q: 59,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001273: {
+      n: 'Harwich and North Essex',
+      r: -31,
+      q: 69,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001274: {
+      n: 'Hastings and Rye',
+      r: -43,
+      q: 70,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001275: {
+      n: 'Havant',
+      r: -44,
+      q: 59,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001276: {
+      n: 'Hayes and Harlington',
+      r: -38,
+      q: 58,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001277: {
+      n: 'Hazel Grove',
+      r: -25,
+      q: 55,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001278: {
+      n: 'Hemel Hempstead',
+      r: -34,
+      q: 64,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001279: {
+      n: 'Hendon',
+      r: -36,
+      q: 61,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001280: {
+      n: 'Henley and Thame',
+      r: -35,
+      q: 58,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001281: {
+      n: 'Hereford and South Herefordshire',
+      r: -34,
+      q: 51,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001282: {
+      n: 'Herne Bay and Sandwich',
+      r: -40,
+      q: 72,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001283: {
+      n: 'Hertford and Stortford',
+      r: -32,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001284: {
+      n: 'Hertsmere',
+      r: -34,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001285: {
+      n: 'Hexham',
+      r: -13,
+      q: 53,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001286: {
+      n: 'Heywood and Middleton North',
+      r: -20,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001287: {
+      n: 'High Peak',
+      r: -25,
+      q: 56,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001288: {
+      n: 'Hinckley and Bosworth',
+      r: -30,
+      q: 58,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001289: {
+      n: 'Hitchin',
+      r: -32,
+      q: 64,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001290: {
+      n: 'Holborn and St Pancras',
+      r: -39,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001291: {
+      n: 'Honiton and Sidmouth',
+      r: -43,
+      q: 49,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001292: {
+      n: 'Hornchurch and Upminster',
+      r: -37,
+      q: 66,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001293: {
+      n: 'Hornsey and Friern Barnet',
+      r: -36,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001294: {
+      n: 'Horsham',
+      r: -44,
+      q: 62,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001295: {
+      n: 'Houghton and Sunderland South',
+      r: -15,
+      q: 57,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001296: {
+      n: 'Hove and Portslade',
+      r: -44,
+      q: 66,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001297: {
+      n: 'Huddersfield',
+      r: -22,
+      q: 56,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001298: {
+      n: 'Huntingdon',
+      r: -31,
+      q: 63,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001299: {
+      n: 'Hyndburn',
+      r: -19,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001300: {
+      n: 'Ilford North',
+      r: -36,
+      q: 65,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001301: {
+      n: 'Ilford South',
+      r: -37,
+      q: 65,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001302: {
+      n: 'Ipswich',
+      r: -30,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001303: {
+      n: 'Isle of Wight East',
+      r: -45,
+      q: 54,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001304: {
+      n: 'Isle of Wight West',
+      r: -45,
+      q: 53,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001305: {
+      n: 'Islington North',
+      r: -38,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001306: {
+      n: 'Islington South and Finsbury',
+      r: -39,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001307: {
+      n: 'Jarrow and Gateshead East',
+      r: -14,
+      q: 57,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001308: {
+      n: 'Keighley and Ilkley',
+      r: -19,
+      q: 56,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001309: {
+      n: 'Kenilworth and Southam',
+      r: -34,
+      q: 56,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001310: {
+      n: 'Kensington and Bayswater',
+      r: -39,
+      q: 61,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001311: {
+      n: 'Kettering',
+      r: -30,
+      q: 61,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001312: {
+      n: 'Kingston and Surbiton',
+      r: -42,
+      q: 59,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001313: {
+      n: 'Kingston upon Hull East',
+      r: -22,
+      q: 63,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001314: {
+      n: 'Kingston upon Hull North and Cottingham',
+      r: -21,
+      q: 62,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001315: {
+      n: 'Kingston upon Hull West and Haltemprice',
+      r: -22,
+      q: 62,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001316: {
+      n: 'Kingswinford and South Staffordshire',
+      r: -30,
+      q: 52,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001317: {
+      n: 'Knowsley',
+      r: -23,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001318: {
+      n: 'Lancaster and Wyre',
+      r: -18,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001319: {
+      n: 'Leeds Central and Headingley',
+      r: -20,
+      q: 60,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001320: {
+      n: 'Leeds East',
+      r: -20,
+      q: 61,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001321: {
+      n: 'Leeds North East',
+      r: -19,
+      q: 59,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001322: {
+      n: 'Leeds North West',
+      r: -19,
+      q: 58,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001324: {
+      n: 'Leeds South West and Morley',
+      r: -21,
+      q: 58,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001323: {
+      n: 'Leeds South',
+      r: -21,
+      q: 59,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001325: {
+      n: 'Leeds West and Pudsey',
+      r: -20,
+      q: 59,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001326: {
+      n: 'Leicester East',
+      r: -30,
+      q: 60,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001327: {
+      n: 'Leicester South',
+      r: -31,
+      q: 60,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001328: {
+      n: 'Leicester West',
+      r: -31,
+      q: 59,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001329: {
+      n: 'Leigh and Atherton',
+      r: -25,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001330: {
+      n: 'Lewes',
+      r: -45,
+      q: 68,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001331: {
+      n: 'Lewisham East',
+      r: -42,
+      q: 66,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001332: {
+      n: 'Lewisham North',
+      r: -40,
+      q: 65,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001333: {
+      n: 'Lewisham West and East Dulwich',
+      r: -41,
+      q: 65,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001334: {
+      n: 'Leyton and Wanstead',
+      r: -37,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001335: {
+      n: 'Lichfield',
+      r: -29,
+      q: 56,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001336: {
+      n: 'Lincoln',
+      r: -25,
+      q: 62,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001337: {
+      n: 'Liverpool Garston',
+      r: -25,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001338: {
+      n: 'Liverpool Riverside',
+      r: -24,
+      q: 49,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001339: {
+      n: 'Liverpool Walton',
+      r: -23,
+      q: 49,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001340: {
+      n: 'Liverpool Wavertree',
+      r: -25,
+      q: 49,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001341: {
+      n: 'Liverpool West Derby',
+      r: -24,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001342: {
+      n: 'Loughborough',
+      r: -30,
+      q: 59,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001343: {
+      n: 'Louth and Horncastle',
+      r: -25,
+      q: 63,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001344: {
+      n: 'Lowestoft',
+      r: -28,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001345: {
+      n: 'Luton North',
+      r: -33,
+      q: 63,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001346: {
+      n: 'Luton South and South Bedfordshire',
+      r: -34,
+      q: 63,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001347: {
+      n: 'Macclesfield',
+      r: -26,
+      q: 56,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001348: {
+      n: 'Maidenhead',
+      r: -36,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001349: {
+      n: 'Maidstone and Malling',
+      r: -41,
+      q: 69,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001350: {
+      n: 'Makerfield',
+      r: -22,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001351: {
+      n: 'Maldon',
+      r: -33,
+      q: 69,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001352: {
+      n: 'Manchester Central',
+      r: -24,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001353: {
+      n: 'Manchester Rusholme',
+      r: -25,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001354: {
+      n: 'Manchester Withington',
+      r: -26,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001355: {
+      n: 'Mansfield',
+      r: -27,
+      q: 61,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001356: {
+      n: 'Melksham and Devizes',
+      r: -40,
+      q: 52,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001357: {
+      n: 'Melton and Syston',
+      r: -29,
+      q: 61,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001358: {
+      n: 'Meriden and Solihull East',
+      r: -33,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001359: {
+      n: 'Mid Bedfordshire',
+      r: -32,
+      q: 62,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001360: {
+      n: 'Mid Buckinghamshire',
+      r: -35,
+      q: 59,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001361: {
+      n: 'Mid Cheshire',
+      r: -27,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001362: {
+      n: 'Mid Derbyshire',
+      r: -27,
+      q: 57,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001363: {
+      n: 'Mid Dorset and North Poole',
+      r: -43,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001364: {
+      n: 'Mid Leicestershire',
+      r: -31,
+      q: 58,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001365: {
+      n: 'Mid Norfolk',
+      r: -28,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001366: {
+      n: 'Mid Sussex',
+      r: -43,
+      q: 68,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001367: {
+      n: 'Middlesbrough and Thornaby East',
+      r: -17,
+      q: 57,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001368: {
+      n: 'Middlesbrough South and East Cleveland',
+      r: -17,
+      q: 59,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001369: {
+      n: 'Milton Keynes Central',
+      r: -34,
+      q: 61,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001370: {
+      n: 'Milton Keynes North',
+      r: -33,
+      q: 61,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001371: {
+      n: 'Mitcham and Morden',
+      r: -43,
+      q: 61,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001372: {
+      n: 'Morecambe and Lunesdale',
+      r: -17,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001373: {
+      n: 'New Forest East',
+      r: -43,
+      q: 54,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001374: {
+      n: 'New Forest West',
+      r: -43,
+      q: 53,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001375: {
+      n: 'Newark',
+      r: -26,
+      q: 62,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001376: {
+      n: 'Newbury',
+      r: -37,
+      q: 54,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001377: {
+      n: 'Newcastle upon Tyne Central and West',
+      r: -13,
+      q: 54,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001378: {
+      n: 'Newcastle upon Tyne East and Wallsend',
+      r: -14,
+      q: 56,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001379: {
+      n: 'Newcastle upon Tyne North',
+      r: -13,
+      q: 55,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001380: {
+      n: 'Newcastle-under-Lyme',
+      r: -28,
+      q: 52,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001381: {
+      n: 'Newton Abbot',
+      r: -43,
+      q: 47,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001382: {
+      n: 'Newton Aycliffe and Spennymoor',
+      r: -16,
+      q: 56,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001383: {
+      n: 'Normanton and Hemsworth',
+      r: -23,
+      q: 59,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001384: {
+      n: 'North Bedfordshire',
+      r: -31,
+      q: 62,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001385: {
+      n: 'North Cornwall',
+      r: -43,
+      q: 45,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001386: {
+      n: 'North Cotswolds',
+      r: -37,
+      q: 53,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001387: {
+      n: 'North Devon',
+      r: -41,
+      q: 46,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001388: {
+      n: 'North Dorset',
+      r: -42,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001389: {
+      n: 'North Durham',
+      r: -15,
+      q: 54,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001390: {
+      n: 'North East Cambridgeshire',
+      r: -29,
+      q: 64,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001391: {
+      n: 'North East Derbyshire',
+      r: -26,
+      q: 58,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001392: {
+      n: 'North East Hampshire',
+      r: -38,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001393: {
+      n: 'North East Hertfordshire',
+      r: -32,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001394: {
+      n: 'North East Somerset and Hanham',
+      r: -39,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001395: {
+      n: 'North Herefordshire',
+      r: -34,
+      q: 52,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001396: {
+      n: 'North Norfolk',
+      r: -27,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001397: {
+      n: 'North Northumberland',
+      r: -12,
+      q: 54,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001398: {
+      n: 'North Shropshire',
+      r: -29,
+      q: 50,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001399: {
+      n: 'North Somerset',
+      r: -39,
+      q: 49,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001400: {
+      n: 'North Warwickshire and Bedworth',
+      r: -32,
+      q: 57,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001401: {
+      n: 'North West Cambridgeshire',
+      r: -30,
+      q: 64,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001402: {
+      n: 'North West Essex',
+      r: -31,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001403: {
+      n: 'North West Hampshire',
+      r: -39,
+      q: 54,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001404: {
+      n: 'North West Leicestershire',
+      r: -29,
+      q: 58,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001405: {
+      n: 'North West Norfolk',
+      r: -28,
+      q: 64,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001406: {
+      n: 'Northampton North',
+      r: -32,
+      q: 61,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001407: {
+      n: 'Northampton South',
+      r: -33,
+      q: 60,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001408: {
+      n: 'Norwich North',
+      r: -28,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001409: {
+      n: 'Norwich South',
+      r: -29,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001410: {
+      n: 'Nottingham East',
+      r: -29,
+      q: 60,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001411: {
+      n: 'Nottingham North and Kimberley',
+      r: -28,
+      q: 60,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001412: {
+      n: 'Nottingham South',
+      r: -29,
+      q: 59,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001413: {
+      n: 'Nuneaton',
+      r: -31,
+      q: 57,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001414: {
+      n: 'Old Bexley and Sidcup',
+      r: -41,
+      q: 67,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001415: {
+      n: 'Oldham East and Saddleworth',
+      r: -22,
+      q: 55,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001416: {
+      n: 'Oldham West, Chadderton and Royton',
+      r: -22,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001417: {
+      n: 'Orpington',
+      r: -43,
+      q: 66,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001418: {
+      n: 'Ossett and Denby Dale',
+      r: -22,
+      q: 58,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001419: {
+      n: 'Oxford East',
+      r: -34,
+      q: 58,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001420: {
+      n: 'Oxford West and Abingdon',
+      r: -35,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001421: {
+      n: 'Peckham',
+      r: -41,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001422: {
+      n: 'Pendle and Clitheroe',
+      r: -18,
+      q: 56,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001423: {
+      n: 'Penistone and Stocksbridge',
+      r: -23,
+      q: 56,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001424: {
+      n: 'Penrith and Solway',
+      r: -15,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001425: {
+      n: 'Peterborough',
+      r: -29,
+      q: 63,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001426: {
+      n: 'Plymouth Moor View',
+      r: -43,
+      q: 46,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001427: {
+      n: 'Plymouth Sutton and Devonport',
+      r: -44,
+      q: 47,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001428: {
+      n: 'Pontefract, Castleford and Knottingley',
+      r: -22,
+      q: 60,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001429: {
+      n: 'Poole',
+      r: -43,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001430: {
+      n: 'Poplar and Limehouse',
+      r: -39,
+      q: 66,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001431: {
+      n: 'Portsmouth North',
+      r: -43,
+      q: 58,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001432: {
+      n: 'Portsmouth South',
+      r: -44,
+      q: 58,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001433: {
+      n: 'Preston',
+      r: -19,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001434: {
+      n: 'Putney',
+      r: -41,
+      q: 61,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001435: {
+      n: "Queen's Park and Maida Vale",
+      r: -40,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001436: {
+      n: 'Rawmarsh and Conisbrough',
+      r: -24,
+      q: 60,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001437: {
+      n: 'Rayleigh and Wickford',
+      r: -34,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001438: {
+      n: 'Reading Central',
+      r: -37,
+      q: 55,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001439: {
+      n: 'Reading West and Mid Berkshire',
+      r: -36,
+      q: 55,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001440: {
+      n: 'Redcar',
+      r: -17,
+      q: 58,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001441: {
+      n: 'Redditch',
+      r: -35,
+      q: 53,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001442: {
+      n: 'Reigate',
+      r: -44,
+      q: 68,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001443: {
+      n: 'Ribble Valley',
+      r: -18,
+      q: 55,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001444: {
+      n: 'Richmond and Northallerton',
+      r: -18,
+      q: 57,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001445: {
+      n: 'Richmond Park',
+      r: -41,
+      q: 59,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001446: {
+      n: 'Rochdale',
+      r: -21,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001447: {
+      n: 'Rochester and Strood',
+      r: -39,
+      q: 69,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001448: {
+      n: 'Romford',
+      r: -36,
+      q: 66,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001449: {
+      n: 'Romsey and Southampton North',
+      r: -40,
+      q: 54,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001450: {
+      n: 'Rossendale and Darwen',
+      r: -20,
+      q: 55,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001451: {
+      n: 'Rother Valley',
+      r: -25,
+      q: 60,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001452: {
+      n: 'Rotherham',
+      r: -24,
+      q: 59,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001453: {
+      n: 'Rugby',
+      r: -32,
+      q: 58,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001454: {
+      n: 'Ruislip, Northwood and Pinner',
+      r: -36,
+      q: 60,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001455: {
+      n: 'Runcorn and Helsby',
+      r: -28,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001456: {
+      n: 'Runnymede and Weybridge',
+      r: -41,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001457: {
+      n: 'Rushcliffe',
+      r: -28,
+      q: 62,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001458: {
+      n: 'Rutland and Stamford',
+      r: -29,
+      q: 62,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001459: {
+      n: 'Salford',
+      r: -24,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001460: {
+      n: 'Salisbury',
+      r: -41,
+      q: 52,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001461: {
+      n: 'Scarborough and Whitby',
+      r: -19,
+      q: 61,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001462: {
+      n: 'Scunthorpe',
+      r: -24,
+      q: 61,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001463: {
+      n: 'Sefton Central',
+      r: -20,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001464: {
+      n: 'Selby',
+      r: -21,
+      q: 60,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001465: {
+      n: 'Sevenoaks',
+      r: -42,
+      q: 68,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001466: {
+      n: 'Sheffield Brightside and Hillsborough',
+      r: -24,
+      q: 58,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001467: {
+      n: 'Sheffield Central',
+      r: -25,
+      q: 58,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001468: {
+      n: 'Sheffield Hallam',
+      r: -24,
+      q: 57,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001469: {
+      n: 'Sheffield Heeley',
+      r: -25,
+      q: 57,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001470: {
+      n: 'Sheffield South East',
+      r: -25,
+      q: 59,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001471: {
+      n: 'Sherwood Forest',
+      r: -27,
+      q: 62,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001472: {
+      n: 'Shipley',
+      r: -19,
+      q: 57,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001473: {
+      n: 'Shrewsbury',
+      r: -30,
+      q: 51,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001474: {
+      n: 'Sittingbourne and Sheppey',
+      r: -39,
+      q: 70,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001475: {
+      n: 'Skipton and Ripon',
+      r: -18,
+      q: 58,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001476: {
+      n: 'Sleaford and North Hykeham',
+      r: -26,
+      q: 63,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001477: {
+      n: 'Slough',
+      r: -37,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001478: {
+      n: 'Smethwick',
+      r: -32,
+      q: 53,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001479: {
+      n: 'Solihull West and Shirley',
+      r: -34,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001480: {
+      n: 'South Basildon and East Thurrock',
+      r: -36,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001481: {
+      n: 'South Cambridgeshire',
+      r: -31,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001482: {
+      n: 'South Cotswolds',
+      r: -38,
+      q: 53,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001483: {
+      n: 'South Derbyshire',
+      r: -29,
+      q: 57,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001484: {
+      n: 'South Devon',
+      r: -45,
+      q: 48,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001485: {
+      n: 'South Dorset',
+      r: -44,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001486: {
+      n: 'South East Cornwall',
+      r: -44,
+      q: 46,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001487: {
+      n: 'South Holland and The Deepings',
+      r: -27,
+      q: 63,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001488: {
+      n: 'South Leicestershire',
+      r: -32,
+      q: 59,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001489: {
+      n: 'South Norfolk',
+      r: -29,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001490: {
+      n: 'South Northamptonshire',
+      r: -33,
+      q: 59,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001491: {
+      n: 'South Ribble',
+      r: -20,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001492: {
+      n: 'South Shields',
+      r: -14,
+      q: 58,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001493: {
+      n: 'South Shropshire',
+      r: -31,
+      q: 50,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001494: {
+      n: 'South Suffolk',
+      r: -30,
+      q: 69,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001495: {
+      n: 'South West Devon',
+      r: -45,
+      q: 47,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001496: {
+      n: 'South West Hertfordshire',
+      r: -35,
+      q: 61,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001497: {
+      n: 'South West Norfolk',
+      r: -29,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001498: {
+      n: 'South West Wiltshire',
+      r: -41,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001499: {
+      n: 'Southampton Itchen',
+      r: -42,
+      q: 55,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001500: {
+      n: 'Southampton Test',
+      r: -42,
+      q: 54,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001501: {
+      n: 'Southend East and Rochford',
+      r: -34,
+      q: 69,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001502: {
+      n: 'Southend West and Leigh',
+      r: -35,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001503: {
+      n: 'Southgate and Wood Green',
+      r: -35,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001504: {
+      n: 'Southport',
+      r: -19,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001505: {
+      n: 'Spelthorne',
+      r: -40,
+      q: 58,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001506: {
+      n: 'Spen Valley',
+      r: -21,
+      q: 57,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001507: {
+      n: 'St Albans',
+      r: -34,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001508: {
+      n: 'St Austell and Newquay',
+      r: -44,
+      q: 45,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001509: {
+      n: 'St Helens North',
+      r: -21,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001510: {
+      n: 'St Helens South and Whiston',
+      r: -22,
+      q: 50,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001511: {
+      n: 'St Ives',
+      r: -46,
+      q: 43,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001512: {
+      n: 'St Neots and Mid Cambridgeshire',
+      r: -31,
+      q: 64,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001513: {
+      n: 'Stafford',
+      r: -28,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001514: {
+      n: 'Staffordshire Moorlands',
+      r: -27,
+      q: 56,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001515: {
+      n: 'Stalybridge and Hyde',
+      r: -24,
+      q: 56,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001516: {
+      n: 'Stevenage',
+      r: -33,
+      q: 64,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001517: {
+      n: 'Stockport',
+      r: -25,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001518: {
+      n: 'Stockton North',
+      r: -16,
+      q: 58,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001519: {
+      n: 'Stockton West',
+      r: -17,
+      q: 56,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001520: {
+      n: 'Stoke-on-Trent Central',
+      r: -28,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001521: {
+      n: 'Stoke-on-Trent North',
+      r: -27,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001522: {
+      n: 'Stoke-on-Trent South',
+      r: -29,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001523: {
+      n: 'Stone, Great Wyrley and Penkridge',
+      r: -28,
+      q: 53,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001524: {
+      n: 'Stourbridge',
+      r: -32,
+      q: 51,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001525: {
+      n: 'Stratford and Bow',
+      r: -38,
+      q: 65,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001526: {
+      n: 'Stratford-on-Avon',
+      r: -35,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001527: {
+      n: 'Streatham and Croydon North',
+      r: -42,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001528: {
+      n: 'Stretford and Urmston',
+      r: -24,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001529: {
+      n: 'Stroud',
+      r: -37,
+      q: 52,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001530: {
+      n: 'Suffolk Coastal',
+      r: -29,
+      q: 69,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001531: {
+      n: 'Sunderland Central',
+      r: -15,
+      q: 58,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001532: {
+      n: 'Surrey Heath',
+      r: -39,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001533: {
+      n: 'Sussex Weald',
+      r: -42,
+      q: 70,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001534: {
+      n: 'Sutton and Cheam',
+      r: -42,
+      q: 60,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001535: {
+      n: 'Sutton Coldfield',
+      r: -31,
+      q: 56,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001536: {
+      n: 'Swindon North',
+      r: -39,
+      q: 53,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001537: {
+      n: 'Swindon South',
+      r: -40,
+      q: 53,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001538: {
+      n: 'Tamworth',
+      r: -30,
+      q: 57,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001539: {
+      n: 'Tatton',
+      r: -26,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001540: {
+      n: 'Taunton and Wellington',
+      r: -42,
+      q: 49,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001541: {
+      n: 'Telford',
+      r: -29,
+      q: 52,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001542: {
+      n: 'Tewkesbury',
+      r: -36,
+      q: 53,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001543: {
+      n: 'The Wrekin',
+      r: -29,
+      q: 51,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001544: {
+      n: 'Thirsk and Malton',
+      r: -18,
+      q: 60,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001545: {
+      n: 'Thornbury and Yate',
+      r: -36,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001546: {
+      n: 'Thurrock',
+      r: -36,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001547: {
+      n: 'Tipton and Wednesbury',
+      r: -31,
+      q: 52,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001548: {
+      n: 'Tiverton and Minehead',
+      r: -41,
+      q: 47,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001549: {
+      n: 'Tonbridge',
+      r: -41,
+      q: 68,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001550: {
+      n: 'Tooting',
+      r: -42,
+      q: 61,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001551: {
+      n: 'Torbay',
+      r: -44,
+      q: 48,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001552: {
+      n: 'Torridge and Tavistock',
+      r: -42,
+      q: 46,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001553: {
+      n: 'Tottenham',
+      r: -37,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001554: {
+      n: 'Truro and Falmouth',
+      r: -45,
+      q: 44,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001555: {
+      n: 'Tunbridge Wells',
+      r: -42,
+      q: 69,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001556: {
+      n: 'Twickenham',
+      r: -41,
+      q: 58,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001557: {
+      n: 'Tynemouth',
+      r: -13,
+      q: 56,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001558: {
+      n: 'Uxbridge and South Ruislip',
+      r: -37,
+      q: 58,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001559: {
+      n: 'Vauxhall and Camberwell Green',
+      r: -41,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001560: {
+      n: 'Wakefield and Rothwell',
+      r: -22,
+      q: 59,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001561: {
+      n: 'Wallasey',
+      r: -27,
+      q: 48,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001562: {
+      n: 'Walsall and Bloxwich',
+      r: -30,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001563: {
+      n: 'Walthamstow',
+      r: -37,
+      q: 63,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001564: {
+      n: 'Warrington North',
+      r: -23,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001565: {
+      n: 'Warrington South',
+      r: -24,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001566: {
+      n: 'Warwick and Leamington',
+      r: -35,
+      q: 55,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001567: {
+      n: 'Washington and Gateshead South',
+      r: -15,
+      q: 55,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001568: {
+      n: 'Watford',
+      r: -35,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001569: {
+      n: 'Waveney Valley',
+      r: -28,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001570: {
+      n: 'Weald of Kent',
+      r: -41,
+      q: 70,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001571: {
+      n: 'Wellingborough and Rushden',
+      r: -30,
+      q: 63,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001572: {
+      n: 'Wells and Mendip Hills',
+      r: -40,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001573: {
+      n: 'Welwyn Hatfield',
+      r: -33,
+      q: 65,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001574: {
+      n: 'West Bromwich',
+      r: -32,
+      q: 52,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001575: {
+      n: 'West Dorset',
+      r: -44,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001576: {
+      n: 'West Ham and Beckton',
+      r: -38,
+      q: 66,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001577: {
+      n: 'West Lancashire',
+      r: -21,
+      q: 49,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001578: {
+      n: 'West Suffolk',
+      r: -30,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001579: {
+      n: 'West Worcestershire',
+      r: -35,
+      q: 52,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001580: {
+      n: 'Westmorland and Lonsdale',
+      r: -15,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001581: {
+      n: 'Weston-super-Mare',
+      r: -40,
+      q: 49,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001582: {
+      n: 'Wetherby and Easingwold',
+      r: -20,
+      q: 62,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001583: {
+      n: 'Whitehaven and Workington',
+      r: -16,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001584: {
+      n: 'Widnes and Halewood',
+      r: -26,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001585: {
+      n: 'Wigan',
+      r: -20,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001586: {
+      n: 'Wimbledon',
+      r: -41,
+      q: 60,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001587: {
+      n: 'Winchester',
+      r: -40,
+      q: 55,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001588: {
+      n: 'Windsor',
+      r: -38,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001589: {
+      n: 'Wirral West',
+      r: -28,
+      q: 49,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001590: {
+      n: 'Witham',
+      r: -33,
+      q: 68,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001591: {
+      n: 'Witney',
+      r: -35,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001592: {
+      n: 'Woking',
+      r: -40,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001593: {
+      n: 'Wokingham',
+      r: -38,
+      q: 55,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001594: {
+      n: 'Wolverhampton North East',
+      r: -29,
+      q: 53,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001595: {
+      n: 'Wolverhampton South East',
+      r: -30,
+      q: 54,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001596: {
+      n: 'Wolverhampton West',
+      r: -30,
+      q: 53,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001597: {
+      n: 'Worcester',
+      r: -34,
+      q: 53,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001598: {
+      n: 'Worsley and Eccles',
+      r: -23,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001599: {
+      n: 'Worthing West',
+      r: -44,
+      q: 64,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001600: {
+      n: 'Wycombe',
+      r: -36,
+      q: 58,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001601: {
+      n: 'Wyre Forest',
+      r: -33,
+      q: 50,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001602: {
+      n: 'Wythenshawe and Sale East',
+      r: -26,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001603: {
+      n: 'Yeovil',
+      r: -42,
+      q: 50,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001604: {
+      n: 'York Central',
+      r: -19,
+      q: 60,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001605: {
+      n: 'York Outer',
+      r: -18,
+      q: 61,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    N05000005: {
+      n: 'East Antrim',
+      r: -15,
+      q: 45,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000014: {
+      n: 'South Antrim',
+      r: -16,
+      q: 44,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000009: {
+      n: 'Lagan Valley',
+      r: -18,
+      q: 44,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000017: {
+      n: 'Upper Bann',
+      r: -18,
+      q: 43,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000002: {
+      n: 'Belfast North',
+      r: -16,
+      q: 45,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000006: {
+      n: 'East Londonderry',
+      r: -15,
+      q: 43,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000018: {
+      n: 'West Tyrone',
+      r: -16,
+      q: 42,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000008: {
+      n: 'Foyle',
+      r: -15,
+      q: 42,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000012: {
+      n: 'North Antrim',
+      r: -15,
+      q: 44,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000010: {
+      n: 'Mid Ulster',
+      r: -16,
+      q: 43,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000007: {
+      n: 'Fermanagh and South Tyrone',
+      r: -17,
+      q: 42,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000015: {
+      n: 'South Down',
+      r: -18,
+      q: 46,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000013: {
+      n: 'North Down',
+      r: -16,
+      q: 46,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000016: {
+      n: 'Strangford',
+      r: -17,
+      q: 46,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000001: {
+      n: 'Belfast East',
+      r: -17,
+      q: 45,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000004: {
+      n: 'Belfast West',
+      r: -17,
+      q: 44,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000003: {
+      n: 'Belfast South and Mid Down',
+      r: -18,
+      q: 45,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    N05000011: {
+      n: 'Newry and Armagh',
+      r: -19,
+      q: 44,
+      region: 'N92000002',
+      colour: '#722EA5',
+    },
+    S14000108: {
+      n: 'Berwickshire, Roxburgh and Selkirk',
+      r: -12,
+      q: 53,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000066: {
+      n: 'Arbroath and Broughty Ferry',
+      r: -5,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000076: {
+      n: 'Dunfermline and Dollar',
+      r: -7,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000063: {
+      n: 'Airdrie and Shotts',
+      r: -11,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000077: {
+      n: 'East Kilbride and Strathaven',
+      r: -13,
+      q: 48,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000021: {
+      n: 'East Renfrewshire',
+      r: -11,
+      q: 48,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000078: {
+      n: 'Edinburgh East and Musselburgh',
+      r: -10,
+      q: 54,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000079: {
+      n: 'Edinburgh North and Leith',
+      r: -9,
+      q: 53,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000081: {
+      n: 'Edinburgh South West',
+      r: -10,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000064: {
+      n: 'Alloa and Grangemouth',
+      r: -7,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000088: {
+      n: 'Glasgow South West',
+      r: -10,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000093: {
+      n: 'Inverclyde and Renfrewshire West',
+      r: -8,
+      q: 48,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000110: {
+      n: 'Kilmarnock and Loudoun',
+      r: -13,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000095: {
+      n: 'Livingston',
+      r: -11,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000045: {
+      n: 'Midlothian',
+      r: -11,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000099: {
+      n: 'Motherwell, Wishaw and Carluke',
+      r: -12,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000102: {
+      n: 'Paisley and Renfrewshire South',
+      r: -10,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000065: {
+      n: 'Angus and Perthshire Glens',
+      r: -5,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000105: {
+      n: 'Stirling and Strathallan',
+      r: -6,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000106: {
+      n: 'West Dunbartonshire',
+      r: -7,
+      q: 48,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000098: {
+      n: 'Moray West, Nairn and Strathspey',
+      r: -4,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000067: {
+      n: 'Argyll, Bute and South Lochaber',
+      r: -5,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000111: {
+      n: 'West Aberdeenshire and Kincardine',
+      r: -4,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000091: {
+      n: 'Gordon and Buchan',
+      r: -4,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000071: {
+      n: 'Cowdenbeath and Kirkcaldy',
+      r: -7,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000061: {
+      n: 'Aberdeen South',
+      r: -4,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000082: {
+      n: 'Edinburgh West',
+      r: -9,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000096: {
+      n: 'Lothian East',
+      r: -11,
+      q: 53,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000107: {
+      n: 'Ayr, Carrick and Cumnock',
+      r: -13,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000109: {
+      n: 'Central Ayrshire',
+      r: -12,
+      q: 48,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000051: {
+      n: 'Orkney and Shetland',
+      r: 0,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000027: {
+      n: 'Na h-Eileanan an Iar',
+      r: -2,
+      q: 47,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000048: {
+      n: 'North Ayrshire and Arran',
+      r: -10,
+      q: 48,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000103: {
+      n: 'Perth and Kinross-shire',
+      r: -5,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000075: {
+      n: 'Dundee Central',
+      r: -6,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000083: {
+      n: 'Falkirk',
+      r: -8,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000068: {
+      n: 'Bathgate and Linlithgow',
+      r: -9,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000094: {
+      n: 'Inverness, Skye and West Ross-shire',
+      r: -3,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000080: {
+      n: 'Edinburgh South',
+      r: -10,
+      q: 53,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000073: {
+      n: 'Dumfries and Galloway',
+      r: -13,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000101: {
+      n: 'Paisley and Renfrewshire North',
+      r: -9,
+      q: 48,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000062: {
+      n: 'Aberdeenshire North and Moray East',
+      r: -3,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000069: {
+      n: 'Caithness, Sutherland and Easter Ross',
+      r: -2,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000084: {
+      n: 'Glasgow East',
+      r: -10,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000097: {
+      n: 'Mid Dunbartonshire',
+      r: -7,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000085: {
+      n: 'Glasgow North',
+      r: -9,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000087: {
+      n: 'Glasgow South',
+      r: -11,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000089: {
+      n: 'Glasgow West',
+      r: -8,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000072: {
+      n: 'Cumbernauld and Kirkintilloch',
+      r: -8,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000070: {
+      n: 'Coatbridge and Bellshill',
+      r: -12,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000092: {
+      n: 'Hamilton and Clyde Valley',
+      r: -12,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000104: {
+      n: 'Rutherglen',
+      r: -12,
+      q: 49,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000086: {
+      n: 'Glasgow North East',
+      r: -9,
+      q: 50,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000060: {
+      n: 'Aberdeen North',
+      r: -3,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000074: {
+      n: 'Dumfriesshire, Clydesdale and Tweeddale',
+      r: -13,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000100: {
+      n: 'North East Fife',
+      r: -6,
+      q: 51,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    S14000090: {
+      n: 'Glenrothes and Mid Fife',
+      r: -6,
+      q: 52,
+      region: 'S92000003',
+      colour: '#2254F4',
+    },
+    W07000081: {
+      n: 'Aberafan Maesteg',
+      r: -36,
+      q: 46,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000082: {
+      n: 'Alyn and Deeside',
+      r: -29,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000083: {
+      n: 'Bangor Aberconwy',
+      r: -31,
+      q: 47,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000084: {
+      n: 'Blaenau Gwent and Rhymney',
+      r: -33,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000085: {
+      n: 'Brecon, Radnor and Cwm Tawe',
+      r: -32,
+      q: 50,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000086: {
+      n: 'Bridgend',
+      r: -37,
+      q: 46,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000087: {
+      n: 'Caerfyrddin',
+      r: -32,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000088: {
+      n: 'Caerphilly',
+      r: -35,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000089: {
+      n: 'Cardiff East',
+      r: -37,
+      q: 48,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000090: {
+      n: 'Cardiff North',
+      r: -36,
+      q: 48,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000091: {
+      n: 'Cardiff South and Penarth',
+      r: -38,
+      q: 48,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000092: {
+      n: 'Cardiff West',
+      r: -37,
+      q: 47,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000093: {
+      n: 'Ceredigion Preseli',
+      r: -34,
+      q: 48,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000094: {
+      n: 'Clwyd East',
+      r: -30,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000095: {
+      n: 'Clwyd North',
+      r: -30,
+      q: 48,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000096: {
+      n: 'Dwyfor Meirionnydd',
+      r: -31,
+      q: 48,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000097: {
+      n: 'Gower',
+      r: -37,
+      q: 44,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000098: {
+      n: 'Llanelli',
+      r: -36,
+      q: 45,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000099: {
+      n: 'Merthyr Tydfil and Aberdare',
+      r: -34,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000100: {
+      n: 'Mid and South Pembrokeshire',
+      r: -36,
+      q: 44,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000101: {
+      n: 'Monmouthshire',
+      r: -36,
+      q: 50,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000102: {
+      n: 'Montgomeryshire and Glyndŵr',
+      r: -31,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000103: {
+      n: 'Neath and Swansea East',
+      r: -35,
+      q: 47,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000104: {
+      n: 'Newport East',
+      r: -37,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000105: {
+      n: 'Newport West and Islwyn',
+      r: -36,
+      q: 49,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000106: {
+      n: 'Pontypridd',
+      r: -35,
+      q: 48,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000107: {
+      n: 'Rhondda and Ogmore',
+      r: -36,
+      q: 47,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000108: {
+      n: 'Swansea West',
+      r: -37,
+      q: 45,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000109: {
+      n: 'Torfaen',
+      r: -34,
+      q: 50,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000110: {
+      n: 'Vale of Glamorgan',
+      r: -38,
+      q: 47,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000111: {
+      n: 'Wrexham',
+      r: -30,
+      q: 50,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    W07000112: {
+      n: 'Ynys Môn',
+      r: -29,
+      q: 46,
+      region: 'W92000004',
+      colour: '#0DBC37',
+    },
+    E14001063: {
+      n: 'Aldershot',
+      r: -40,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001064: {
+      n: 'Aldridge-Brownhills',
+      r: -30,
+      q: 56,
+      region: 'E12000005',
+      colour: '#E6007C',
+    },
+    E14001065: {
+      n: 'Altrincham and Sale West',
+      r: -25,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001066: {
+      n: 'Amber Valley',
+      r: -27,
+      q: 58,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001067: {
+      n: 'Arundel and South Downs',
+      r: -44,
+      q: 61,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001068: {
+      n: 'Ashfield',
+      r: -27,
+      q: 60,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001069: {
+      n: 'Ashford',
+      r: -42,
+      q: 72,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001070: {
+      n: 'Ashton-under-Lyne',
+      r: -23,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001071: {
+      n: 'Aylesbury',
+      r: -35,
+      q: 60,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001072: {
+      n: 'Banbury',
+      r: -33,
+      q: 58,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001073: {
+      n: 'Barking',
+      r: -38,
+      q: 68,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001076: {
+      n: 'Barrow and Furness',
+      r: -16,
+      q: 54,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001077: {
+      n: 'Basildon and Billericay',
+      r: -34,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001078: {
+      n: 'Basingstoke',
+      r: -39,
+      q: 55,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001079: {
+      n: 'Bassetlaw',
+      r: -26,
+      q: 61,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001080: {
+      n: 'Bath',
+      r: -40,
+      q: 51,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001081: {
+      n: 'Battersea',
+      r: -41,
+      q: 62,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001082: {
+      n: 'Beaconsfield',
+      r: -37,
+      q: 57,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001084: {
+      n: 'Bedford',
+      r: -32,
+      q: 63,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001085: {
+      n: 'Bermondsey and Old Southwark',
+      r: -40,
+      q: 64,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001087: {
+      n: 'Beverley and Holderness',
+      r: -22,
+      q: 64,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001088: {
+      n: 'Bexhill and Battle',
+      r: -44,
+      q: 70,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001089: {
+      n: 'Bexleyheath and Crayford',
+      r: -39,
+      q: 67,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001091: {
+      n: 'Birkenhead',
+      r: -27,
+      q: 49,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001101: {
+      n: 'Bishop Auckland',
+      r: -14,
+      q: 54,
+      region: 'E12000001',
+      colour: '#D60303',
+    },
+    E14001102: {
+      n: 'Blackburn',
+      r: -19,
+      q: 53,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001105: {
+      n: 'Blackpool South',
+      r: -18,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001108: {
+      n: 'Bognor Regis and Littlehampton',
+      r: -44,
+      q: 63,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001109: {
+      n: 'Bolsover',
+      r: -26,
+      q: 60,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001110: {
+      n: 'Bolton North East',
+      r: -21,
+      q: 52,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001112: {
+      n: 'Bolton West',
+      r: -21,
+      q: 51,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001113: {
+      n: 'Bootle',
+      r: -22,
+      q: 49,
+      region: 'E12000002',
+      colour: '#1DD3A7',
+    },
+    E14001114: {
+      n: 'Boston and Skegness',
+      r: -26,
+      q: 64,
+      region: 'E12000004',
+      colour: '#00B6FF',
+    },
+    E14001115: {
+      n: 'Bournemouth East',
+      r: -43,
+      q: 52,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001116: {
+      n: 'Bournemouth West',
+      r: -42,
+      q: 52,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+    E14001117: {
+      n: 'Bracknell',
+      r: -39,
+      q: 56,
+      region: 'E12000008',
+      colour: '#67E767',
+    },
+    E14001118: {
+      n: 'Bradford East',
+      r: -20,
+      q: 58,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001119: {
+      n: 'Bradford South',
+      r: -21,
+      q: 56,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001120: {
+      n: 'Bradford West',
+      r: -20,
+      q: 57,
+      region: 'E12000003',
+      colour: '#F9BC26',
+    },
+    E14001121: {
+      n: 'Braintree',
+      r: -31,
+      q: 67,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001124: {
+      n: 'Brentford and Isleworth',
+      r: -40,
+      q: 60,
+      region: 'E12000007',
+      colour: '#D73058',
+    },
+    E14001125: {
+      n: 'Brentwood and Ongar',
+      r: -33,
+      q: 66,
+      region: 'E12000006',
+      colour: '#FF6700',
+    },
+    E14001132: {
+      n: 'Bristol East',
+      r: -38,
+      q: 52,
+      region: 'E12000009',
+      colour: '#178CFF',
+    },
+  },
+  boundaries: {
+    'sc-en': {
+      type: 'country',
+      edges: [
+        { q: 53, r: -11, e: 3 },
+        { q: 53, r: -12, e: 2 },
+        { q: 53, r: -12, e: 3 },
+        { q: 52, r: -13, e: 2 },
+        { q: 52, r: -13, e: 3 },
+      ],
+    },
+    'wa-en': {
+      type: 'country',
+      edges: [
+        { q: 49, r: -29, e: 6 },
+        { q: 49, r: -29, e: 1 },
+        { q: 49, r: -29, e: 2 },
+        { q: 50, r: -30, e: 1 },
+        { q: 50, r: -30, e: 2 },
+        { q: 50, r: -30, e: 3 },
+        { q: 49, r: -31, e: 2 },
+        { q: 50, r: -32, e: 1 },
+        { q: 50, r: -32, e: 2 },
+        { q: 50, r: -32, e: 3 },
+        { q: 49, r: -33, e: 2 },
+        { q: 50, r: -34, e: 1 },
+        { q: 50, r: -34, e: 2 },
+        { q: 50, r: -34, e: 3 },
+        { q: 49, r: -35, e: 2 },
+        { q: 50, r: -36, e: 1 },
+        { q: 50, r: -36, e: 2 },
+        { q: 50, r: -36, e: 3 },
+        { q: 49, r: -37, e: 2 },
+        { q: 49, r: -37, e: 3 },
+      ],
+    },
+    'nw-ne': {
+      type: 'region',
+      edges: [
+        { q: 53, r: -14, e: 1 },
+        { q: 53, r: -14, e: 2 },
+        { q: 53, r: -15, e: 1 },
+        { q: 53, r: -15, e: 2 },
+        { q: 54, r: -16, e: 1 },
+        { q: 54, r: -16, e: 2 },
+        { q: 54, r: -17, e: 1 },
+        { q: 54, r: -17, e: 2 },
+        { q: 55, r: -18, e: 1 },
+        { q: 56, r: -18, e: 6 },
+        { q: 56, r: -18, e: 1 },
+      ],
+    },
+    'nw-yh': {
+      type: 'region',
+      edges: [
+        { q: 56, r: -18, e: 2 },
+        { q: 56, r: -18, e: 3 },
+        { q: 55, r: -19, e: 2 },
+        { q: 55, r: -19, e: 3 },
+        { q: 55, r: -20, e: 2 },
+        { q: 55, r: -20, e: 3 },
+        { q: 54, r: -21, e: 2 },
+        { q: 55, r: -22, e: 1 },
+        { q: 55, r: -22, e: 2 },
+        { q: 55, r: -22, e: 3 },
+        { q: 54, r: -23, e: 2 },
+        { q: 55, r: -24, e: 1 },
+        { q: 56, r: -24, e: 6 },
+        { q: 56, r: -24, e: 1 },
+        { q: 56, r: -24, e: 2 },
+      ],
+    },
+    'nw-em': {
+      type: 'region',
+      edges: [
+        { q: 56, r: -24, e: 3 },
+        { q: 55, r: -25, e: 2 },
+        { q: 56, r: -26, e: 1 },
+        { q: 56, r: -26, e: 2 },
+      ],
+    },
+    'nw-wm': {
+      type: 'region',
+      edges: [
+        { q: 56, r: -26, e: 3 },
+        { q: 56, r: -26, e: 4 },
+        { q: 55, r: -26, e: 3 },
+        { q: 54, r: -27, e: 2 },
+        { q: 54, r: -27, e: 3 },
+        { q: 54, r: -27, e: 4 },
+        { q: 53, r: -27, e: 3 },
+        { q: 53, r: -27, e: 4 },
+        { q: 52, r: -27, e: 3 },
+        { q: 52, r: -27, e: 4 },
+        { q: 51, r: -27, e: 3 },
+        { q: 51, r: -28, e: 2 },
+        { q: 51, r: -28, e: 3 },
+        { q: 51, r: -28, e: 4 },
+        { q: 50, r: -28, e: 3 },
+      ],
+    },
+    'ne-yh': {
+      type: 'region',
+      edges: [
+        { q: 56, r: -17, e: -3 },
+        { q: 57, r: -17, e: -4 },
+        { q: 57, r: -17, e: -3 },
+        { q: 58, r: -17, e: -4 },
+        { q: 58, r: -17, e: -3 },
+        { q: 59, r: -17, e: -4 },
+        { q: 59, r: -17, e: -3 },
+      ],
+    },
+    'yh-em': {
+      type: 'region',
+      edges: [
+        { q: 57, r: -24, e: -4 },
+        { q: 57, r: -25, e: -5 },
+        { q: 57, r: -25, e: -4 },
+        { q: 57, r: -25, e: -3 },
+        { q: 58, r: -25, e: -4 },
+        { q: 58, r: -25, e: -3 },
+        { q: 59, r: -25, e: -4 },
+        { q: 59, r: -25, e: -3 },
+        { q: 60, r: -25, e: -4 },
+        { q: 60, r: -25, e: -3 },
+        { q: 60, r: -25, e: -2 },
+        { q: 61, r: -24, e: -3 },
+        { q: 62, r: -24, e: -4 },
+        { q: 62, r: -24, e: -3 },
+        { q: 63, r: -24, e: -4 },
+        { q: 63, r: -24, e: -3 },
+      ],
+    },
+    'wm-em': {
+      type: 'region',
+      edges: [
+        { q: 56, r: -27, e: 1 },
+        { q: 56, r: -27, e: 2 },
+        { q: 56, r: -27, e: 3 },
+        { q: 56, r: -28, e: 2 },
+        { q: 56, r: -29, e: 1 },
+        { q: 56, r: -29, e: 2 },
+        { q: 57, r: -30, e: 1 },
+        { q: 57, r: -30, e: 2 },
+        { q: 57, r: -31, e: 1 },
+        { q: 57, r: -31, e: 2 },
+        { q: 58, r: -32, e: 1 },
+        { q: 58, r: -32, e: 2 },
+      ],
+    },
+    'wm-sw': {
+      type: 'region',
+      edges: [
+        { q: 51, r: -34, e: -4 },
+        { q: 51, r: -34, e: -3 },
+        { q: 52, r: -34, e: -4 },
+        { q: 52, r: -35, e: -5 },
+        { q: 52, r: -35, e: -4 },
+        { q: 52, r: -35, e: -3 },
+        { q: 53, r: -35, e: -4 },
+        { q: 54, r: -36, e: -5 },
+        { q: 54, r: -36, e: -4 },
+      ],
+    },
+    'wm-se': {
+      type: 'region',
+      edges: [
+        { q: 54, r: -36, e: -3 },
+        { q: 54, r: -36, e: -2 },
+        { q: 54, r: -35, e: -3 },
+        { q: 55, r: -35, e: -4 },
+        { q: 55, r: -35, e: -3 },
+        { q: 55, r: -35, e: -2 },
+        { q: 56, r: -34, e: -3 },
+        { q: 57, r: -34, e: -4 },
+        { q: 57, r: -34, e: -3 },
+        { q: 57, r: -34, e: -2 },
+        { q: 57, r: -33, e: -3 },
+        { q: 57, r: -33, e: -2 },
+        { q: 58, r: -32, e: -3 },
+      ],
+    },
+    'sw-se': {
+      type: 'region',
+      edges: [
+        { q: 53, r: -37, e: 2 },
+        { q: 53, r: -37, e: 3 },
+        { q: 53, r: -38, e: 2 },
+        { q: 53, r: -39, e: 1 },
+        { q: 53, r: -39, e: 2 },
+        { q: 53, r: -39, e: 3 },
+        { q: 53, r: -40, e: 2 },
+        { q: 53, r: -41, e: 1 },
+        { q: 53, r: -41, e: 2 },
+        { q: 53, r: -41, e: 3 },
+        { q: 53, r: -42, e: 2 },
+        { q: 53, r: -42, e: 3 },
+        { q: 52, r: -43, e: 2 },
+      ],
+    },
+    'se-em': {
+      type: 'region',
+      edges: [
+        { q: 58, r: -33, e: 1 },
+        { q: 58, r: -33, e: 2 },
+        { q: 59, r: -34, e: 1 },
+        { q: 60, r: -34, e: 6 },
+        { q: 60, r: -34, e: 1 },
+        { q: 61, r: -34, e: 6 },
+        { q: 61, r: -33, e: 5 },
+        { q: 61, r: -33, e: 6 },
+      ],
+    },
+    'ea-em': {
+      type: 'region',
+      edges: [
+        { q: 62, r: -32, e: 5 },
+        { q: 62, r: -32, e: 6 },
+        { q: 62, r: -31, e: 5 },
+        { q: 62, r: -31, e: 6 },
+        { q: 62, r: -31, e: 1 },
+        { q: 63, r: -31, e: 6 },
+        { q: 64, r: -30, e: 5 },
+        { q: 63, r: -29, e: 4 },
+        { q: 63, r: -29, e: 5 },
+        { q: 63, r: -29, e: 6 },
+        { q: 64, r: -28, e: 5 },
+        { q: 64, r: -28, e: 6 },
+      ],
+    },
+    'ea-se': {
+      type: 'region',
+      edges: [
+        { q: 62, r: -32, e: -4 },
+        { q: 62, r: -33, e: -5 },
+        { q: 62, r: -34, e: -6 },
+        { q: 62, r: -34, e: -5 },
+        { q: 61, r: -35, e: -6 },
+        { q: 61, r: -35, e: -5 },
+      ],
+    },
+    'lo-ea': {
+      type: 'region',
+      edges: [
+        { q: 61, r: -36, e: 1 },
+        { q: 62, r: -36, e: 6 },
+        { q: 62, r: -35, e: 5 },
+        { q: 62, r: -35, e: 6 },
+        { q: 62, r: -35, e: 1 },
+        { q: 63, r: -35, e: 6 },
+        { q: 63, r: -35, e: 1 },
+        { q: 64, r: -35, e: 6 },
+        { q: 64, r: -35, e: 1 },
+        { q: 64, r: -35, e: 2 },
+        { q: 65, r: -36, e: 1 },
+        { q: 66, r: -36, e: 6 },
+        { q: 66, r: -36, e: 1 },
+        { q: 66, r: -36, e: 2 },
+        { q: 66, r: -37, e: 1 },
+        { q: 67, r: -37, e: 6 },
+        { q: 67, r: -37, e: 1 },
+      ],
+    },
+    'lo-se': {
+      type: 'region',
+      edges: [
+        { q: 61, r: -36, e: -6 },
+        { q: 60, r: -36, e: -1 },
+        { q: 60, r: -36, e: -6 },
+        { q: 60, r: -36, e: -5 },
+        { q: 59, r: -37, e: -6 },
+        { q: 58, r: -37, e: -1 },
+        { q: 58, r: -37, e: -6 },
+        { q: 58, r: -37, e: -5 },
+        { q: 58, r: -38, e: -6 },
+        { q: 58, r: -38, e: -5 },
+        { q: 58, r: -38, e: -4 },
+        { q: 58, r: -39, e: -5 },
+        { q: 58, r: -39, e: -4 },
+        { q: 59, r: -40, e: -5 },
+        { q: 58, r: -41, e: -6 },
+        { q: 58, r: -41, e: -5 },
+        { q: 58, r: -41, e: -4 },
+        { q: 59, r: -42, e: -5 },
+        { q: 59, r: -42, e: -4 },
+        { q: 59, r: -42, e: -3 },
+        { q: 60, r: -42, e: -4 },
+        { q: 60, r: -42, e: -3 },
+        { q: 61, r: -42, e: -4 },
+        { q: 61, r: -43, e: -5 },
+        { q: 61, r: -43, e: -4 },
+        { q: 61, r: -43, e: -3 },
+        { q: 62, r: -43, e: -4 },
+        { q: 62, r: -43, e: -3 },
+        { q: 63, r: -43, e: -4 },
+        { q: 63, r: -43, e: -3 },
+        { q: 64, r: -43, e: -4 },
+        { q: 64, r: -43, e: -3 },
+        { q: 65, r: -43, e: -4 },
+        { q: 65, r: -43, e: -3 },
+        { q: 66, r: -43, e: -4 },
+        { q: 66, r: -43, e: -3 },
+        { q: 66, r: -43, e: -2 },
+        { q: 67, r: -42, e: -3 },
+        { q: 67, r: -42, e: -2 },
+        { q: 67, r: -41, e: -3 },
+        { q: 67, r: -41, e: -2 },
+        { q: 67, r: -41, e: -1 },
+        { q: 67, r: -40, e: -2 },
+        { q: 67, r: -39, e: -3 },
+        { q: 67, r: -39, e: -2 },
+        { q: 68, r: -38, e: -3 },
+      ],
+    },
+  },
+} as const
+
+// Optional: Create a type for the hex data
+export type UKHexData = typeof hexData
+export type ConstituencyId = keyof typeof hexData.hexes

From 1ed6cddb1ab16e11d7968d4cdb547cb3d3b6728c Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Thu, 19 Dec 2024 18:19:20 +0000
Subject: [PATCH 03/26] links between map and dashboard

---
 .../reports/[id]/(components)/ReportNavbar.tsx  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx b/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
index 2dde08464..e9b3e47e9 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
@@ -1,18 +1,26 @@
 import ReportActions from '@/app/reports/[id]/(components)/ReportActions'
 import { useReport } from '@/app/reports/[id]/(components)/ReportProvider'
 import { useSidebar } from '@/components/ui/sidebar'
+import { useParams } from 'next/navigation'
 
+import { Button } from '@/components/ui/button'
 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'
 
+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 params = useParams()
+  const id = params.id
   const title = useAtomValue(navbarTitleAtom)
   const { updateReport } = useReport()
   const { toggleSidebar } = useSidebar()
@@ -41,7 +49,14 @@ export default function ReportNavbar() {
           />{' '}
         </div>
       </section>
-      <section className="flex space-x-4"> </section>
+      <section className="flex space-x-4">
+        <Link href={`/reports/${id}`}>
+          <Button>Map</Button>
+        </Link>
+        <Link href={`/reports/${id}/dashboard`}>
+          <Button>Dashboard</Button>
+        </Link>
+      </section>
     </nav>
   )
 }

From 5050da610e1809aafde6f40412f2b43926c8720e Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Thu, 19 Dec 2024 18:39:44 +0000
Subject: [PATCH 04/26] fixes for larger data

---
 .../[id]/dashboard/ReportDashboardHexMap.tsx  |  2 ++
 .../dashboard/ReportDashboardKeyStats.tsx     | 31 +++++++++++++++----
 .../[id]/dashboard/ReportDashboardMPs.tsx     | 25 ++++++++++-----
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
index eeefe4cf9..672a1620f 100644
--- 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
index 6a0386b58..a71594649 100644
--- 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
index 48463518d..69c1db957 100644
--- 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>

From a28370b7e268e73f7b0a3b4c3db9089122848112 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:32:10 +0000
Subject: [PATCH 05/26] Pop over fix

---
 .../reports/[id]/dashboard/ReportDashboardHexMap.tsx   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
index 672a1620f..35e882c2a 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
@@ -35,8 +35,8 @@ export default function ReportDashboardHexMap({
     const rect = event.currentTarget.getBoundingClientRect()
     setTooltip({
       content: hex.n,
-      x: rect.left + window.scrollX,
-      y: rect.top + window.scrollY,
+      x: rect.left + rect.width / 2,
+      y: rect.top,
     })
   }
 
@@ -81,10 +81,12 @@ export default function ReportDashboardHexMap({
 
         {tooltip && (
           <div
-            className="absolute z-50 bg-popover text-popover-foreground px-3 py-1.5 text-sm rounded-md shadow-md"
+            className="fixed z-50 bg-popover text-popover-foreground px-3 py-1.5 text-sm rounded-md shadow-md"
             style={{
               left: tooltip.x,
-              top: tooltip.y - 60,
+              top: tooltip.y - 40,
+              transform: 'translateX(-50%)',
+              pointerEvents: 'none',
             }}
           >
             {tooltip.content}

From f97e3fbb28b29df9911223f432fa2ad5aeca3a5c Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:32:17 +0000
Subject: [PATCH 06/26] styling updates

---
 nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx     | 2 +-
 .../app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
index 045bce0f0..3025d28e3 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -62,7 +62,7 @@ export default function ReportDashboard() {
           </DialogContent>
         </Dialog>
       </div>
-      <div className="grid sm:grid-cols-3 grid-cols-1 gap-4 w-full ">
+      <div className="grid sm:grid-cols-2 md:grid-cols-3 grid-cols-1 gap-4 w-full ">
         {constituencies && (
           <>
             <ReportDashboardKeyStats constituencies={constituencies} />
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
index a71594649..9176c38a5 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
@@ -109,7 +109,7 @@ function TotalMembersChart({
 }) {
   return (
     <Card>
-      <CardHeader className="items-center">
+      <CardHeader className="">
         <CardTitle>Total Members</CardTitle>
         <CardDescription>Distribution by Constituency</CardDescription>
       </CardHeader>
@@ -184,7 +184,7 @@ function TotalConstituencyChart({
 
   return (
     <Card>
-      <CardHeader className="items-center">
+      <CardHeader className="">
         <CardTitle>Total Constituencies reached</CardTitle>
         <CardDescription>Total constituency distribution</CardDescription>
       </CardHeader>

From 4ae89130b3c631c2ac165fdd653ef4451b90c0ad Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Fri, 20 Dec 2024 00:55:47 +0000
Subject: [PATCH 07/26] clean up

---
 .../[id]/dashboard/ReportDashboard.tsx        |  6 +-
 .../[id]/dashboard/ReportDashboardHexMap.tsx  |  4 +
 .../[id]/dashboard/ReportDashboardList.tsx    | 73 ++++++++++++++++---
 ...ats.tsx => ReportDashboardMemberCount.tsx} | 44 +----------
 4 files changed, 69 insertions(+), 58 deletions(-)
 rename nextjs/src/app/reports/[id]/dashboard/{ReportDashboardKeyStats.tsx => ReportDashboardMemberCount.tsx} (78%)

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
index 3025d28e3..41b6ffc57 100644
--- 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
index 35e882c2a..2978098c8 100644
--- 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
index 232f90cd0..a51907cd5 100644
--- 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/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberCount.tsx
similarity index 78%
rename from nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
rename to nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberCount.tsx
index 9176c38a5..98e2f183c 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardKeyStats.tsx
+++ b/nextjs/src/app/reports/[id]/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>
-  )
-}

From 2367ee2879e5b2e30c7c9463478f087a797c672a Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:48:11 +0000
Subject: [PATCH 08/26] Update ReportNavbar.tsx

---
 .../[id]/(components)/ReportNavbar.tsx        | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx b/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
index e9b3e47e9..fc5605476 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
@@ -1,12 +1,11 @@
 import ReportActions from '@/app/reports/[id]/(components)/ReportActions'
 import { useReport } from '@/app/reports/[id]/(components)/ReportProvider'
 import { useSidebar } from '@/components/ui/sidebar'
-import { useParams } from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
 
-import { Button } from '@/components/ui/button'
 import { contentEditableMutation } from '@/lib/html'
 import { atom, useAtomValue } from 'jotai'
-import { PanelRight } from 'lucide-react'
+import { BarChartIcon, MapIcon, PanelRight } from 'lucide-react'
 import Link from 'next/link'
 import { MappedIcon } from '../../../../components/icons/MappedIcon'
 
@@ -14,11 +13,14 @@ type Params = {
   id: string
 }
 
+const activeTabAtom = atom('map')
+
 // 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)
@@ -48,15 +50,39 @@ export default function ReportNavbar() {
             className="text-meepGray-400 w-4 h-4 cursor-pointer"
           />{' '}
         </div>
+        <div className="flex flex-row items-center gap-2 px-10">
+          {navbarTabs(id as string).map((tab) => (
+            <Link href={tab.href} key={tab.name}>
+              <div
+                className={`py-1 px-2 font-normal flex flex-row items-center gap-2 rounded-md ${
+                  pathname === tab.href
+                    ? 'bg-meepGray-800 opacity-100'
+                    : 'hover:bg-meepGray-800 opacity-50'
+                }`}
+              >
+                {tab.icon}
+                {tab.name}
+              </div>
+            </Link>
+          ))}
+        </div>
       </section>
-      <section className="flex space-x-4">
-        <Link href={`/reports/${id}`}>
-          <Button>Map</Button>
-        </Link>
-        <Link href={`/reports/${id}/dashboard`}>
-          <Button>Dashboard</Button>
-        </Link>
-      </section>
+      <section className="flex space-x-4"></section>
     </nav>
   )
 }
+
+function navbarTabs(id: string) {
+  return [
+    {
+      name: 'Map',
+      href: `/reports/${id}`,
+      icon: <MapIcon className="w-4 h-4" />,
+    },
+    {
+      name: 'Dashboard',
+      href: `/reports/${id}/dashboard`,
+      icon: <BarChartIcon className="w-4 h-4" />,
+    },
+  ]
+}

From 5e051251e2c8657d597be6eb95322a97d7b1600d Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:48:21 +0000
Subject: [PATCH 09/26] added sidebar

---
 nextjs/src/app/reports/[id]/dashboard/page.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/nextjs/src/app/reports/[id]/dashboard/page.tsx b/nextjs/src/app/reports/[id]/dashboard/page.tsx
index 8c8cb123a..49bfc8c0a 100644
--- a/nextjs/src/app/reports/[id]/dashboard/page.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/page.tsx
@@ -17,6 +17,7 @@ import { SidebarProvider } from '@/components/ui/sidebar'
 import { merge } from 'lodash'
 import ReportNavbar from '../(components)/ReportNavbar'
 import ReportProvider from '../(components)/ReportProvider'
+import { ReportSidebarLeft } from '../(components)/ReportSidebarLeft'
 import { GET_MAP_REPORT } from '../gql_queries'
 import { getPoliticalTilesetsByCountry } from '../politicalTilesets'
 import { defaultReportConfig, MapReportExtended } from '../reportContext'
@@ -69,6 +70,8 @@ export default function Page({ params: { id } }: { params: Params }) {
             }
           >
             <ReportNavbar />
+            <ReportSidebarLeft />
+
             <ReportDashboard />
           </SidebarProvider>
         </ReportProvider>

From 874abc437654ed40a3f1f4865c1d5ee25ad8a8f6 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:48:29 +0000
Subject: [PATCH 10/26] Update ReportDashboardHexMap.tsx

---
 .../reports/[id]/dashboard/ReportDashboardHexMap.tsx   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
index 2978098c8..8d581b053 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
@@ -46,21 +46,21 @@ export default function ReportDashboardHexMap({
         <CardTitle>Constituency Map </CardTitle>
         <CardDescription>Regional Distribution</CardDescription>
       </CardHeader>
-      <CardContent>
-        <div className="text-7xl text-muted-foreground text-right">
+      <CardContent className="relative">
+        <div className="text-7xl text-muted-foreground text-right absolute top-2 right-2">
           {activeConstituencies?.length}
           <p className="text-sm text-muted-foreground"> constituencies</p>
         </div>
         <HexGrid
           width={'100%'}
           height={'100%'}
-          viewBox="0 0 220 420"
-          className="my0"
+          viewBox="0 0 220 410"
+          className=""
         >
           <Layout
             size={{ x: 4, y: 4 }}
             spacing={1.05}
-            origin={{ x: -250, y: -180 }}
+            origin={{ x: -250, y: -190 }}
           >
             {Object.entries(hexData.hexes).map(([id, hex]) => (
               <Hexagon

From 8617e2fade69692cd5d4cc72547b09443d3d0f75 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:48:40 +0000
Subject: [PATCH 11/26] testing conselector

---
 .../[id]/dashboard/ReportDashboard.tsx        |  87 +++++++------
 .../dashboard/ReportDashboardConsSelector.tsx | 117 ++++++++++++++++++
 2 files changed, 167 insertions(+), 37 deletions(-)
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
index 41b6ffc57..95c158416 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -2,27 +2,30 @@ import {
   ConstituencyStatsOverviewQuery,
   ConstituencyStatsOverviewQueryVariables,
 } from '@/__generated__/graphql'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { gql, useQuery } from '@apollo/client'
-import { CogIcon } from 'lucide-react'
-import { ReportDataSources } from '../(components)/ReportDataSources'
+import { useAtom } from 'jotai'
 import { useReport } from '../(components)/ReportProvider'
+import { ConstituencyElectionDeepDive } from '../(components)/reportsConstituencyItem'
+import { selectedBoundaryAtom } from '../useSelectBoundary'
+import ReportDashboardConsSelector from './ReportDashboardConsSelector'
 import ReportDashboardHexMap from './ReportDashboardHexMap'
 import ReportDashboardList from './ReportDashboardList'
 import ReportDashboardMPs from './ReportDashboardMPs'
 import ReportDashboardMemberCount from './ReportDashboardMemberCount'
 import ReportDashboardMembersOverTime from './ReportDashboardMembersOverTime'
+
 export default function ReportDashboard() {
+  const [selectedBoundary, setSelectedBoundary] = useAtom(selectedBoundaryAtom)
   const {
     report: {
       id,
-      displayOptions: { dataVisualisation },
+      displayOptions: {
+        dataVisualisation: {
+          boundaryType: analyticalAreaType,
+          dataSource,
+        } = {},
+      } = {},
     },
   } = useReport()
 
@@ -32,8 +35,8 @@ export default function ReportDashboard() {
   >(CONSTITUENCY_STATS_OVERVIEW, {
     variables: {
       reportID: id,
-      analyticalAreaType: dataVisualisation?.boundaryType!,
-      layerIds: [dataVisualisation?.dataSource!],
+      analyticalAreaType: analyticalAreaType!,
+      layerIds: [dataSource!],
     },
   })
 
@@ -48,31 +51,41 @@ export default function ReportDashboard() {
 
   return (
     <main className="flex flex-col w-full p-4 h-[calc(100vh-48px)] overflow-y-auto">
-      <div className="flex justify-between items-center w-full mb-4">
-        <h1 className="text-2xl font-bold ">Dashboard</h1>
-        <Dialog>
-          <DialogTrigger className="flex items-center gap-2 opacity-50 hover:opacity-100 transition-opacity duration-200">
-            <CogIcon className="w-4 h-4" /> Data Sources
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Data Sources</DialogTitle>
-              <ReportDataSources />
-            </DialogHeader>
-          </DialogContent>
-        </Dialog>
-      </div>
-      <div className="grid sm:grid-cols-2 md:grid-cols-3 grid-cols-1 gap-4 w-full ">
-        {constituencies && (
-          <>
-            <ReportDashboardMemberCount constituencies={constituencies} />
-            <ReportDashboardMembersOverTime />
-            <ReportDashboardHexMap activeConstituencies={constituencies} />
-            <ReportDashboardList constituencies={constituencies} />
-            <ReportDashboardMPs constituencies={constituencies} />
-          </>
-        )}
-      </div>
+      <Tabs defaultValue="Overview" className="">
+        <div className="flex gap-4 items-center">
+          <ReportDashboardConsSelector
+            constituencies={constituencies}
+            selectedBoundary={selectedBoundary}
+            setSelectedBoundary={setSelectedBoundary}
+          />
+          <TabsList>
+            <TabsTrigger value="Overview">Overview</TabsTrigger>
+            <TabsTrigger value="Foodbanks">Foodbanks</TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent value="Overview">
+          <div className="grid sm:grid-cols-2 md:grid-cols-3 grid-cols-1 gap-4 w-full">
+            {constituencies && !selectedBoundary && (
+              <>
+                <ReportDashboardMemberCount constituencies={constituencies} />
+                <ReportDashboardMembersOverTime />
+                <ReportDashboardHexMap activeConstituencies={constituencies} />
+                <ReportDashboardList constituencies={constituencies} />
+                <ReportDashboardMPs constituencies={constituencies} />
+              </>
+            )}
+            {selectedBoundary && analyticalAreaType && (
+              <div className="col-span-full">
+                <ConstituencyElectionDeepDive
+                  gss={selectedBoundary}
+                  analyticalAreaType={analyticalAreaType}
+                />
+              </div>
+            )}
+          </div>
+        </TabsContent>
+        <TabsContent value="Foodbanks">Foodbanks Data goes here</TabsContent>
+      </Tabs>
     </main>
   )
 }
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
new file mode 100644
index 000000000..aabe187d3
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import { Check, ChevronsUpDown, X } from 'lucide-react'
+import * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+
+export default function ReportDashboardConsSelector({
+  constituencies,
+  selectedBoundary,
+  setSelectedBoundary,
+}: {
+  constituencies: any[]
+  selectedBoundary: any
+  setSelectedBoundary: any
+}) {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState('')
+
+  function getGSSfromGSSAreaID(gssAreaID: string) {
+    return constituencies.find(
+      (constituency) => constituency.gssArea.id === gssAreaID
+    )?.gss
+  }
+
+  const [filteredConstituencies, setFilteredConstituencies] =
+    React.useState(constituencies)
+
+  function handleSearch(searchTerm: string) {
+    const filteredConstituencies = constituencies.filter((constituency) =>
+      constituency.gssArea.name.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+    setFilteredConstituencies(filteredConstituencies)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      {selectedBoundary && (
+        <Button
+          variant="ghost"
+          onClick={() => {
+            setSelectedBoundary(null)
+            setValue('')
+          }}
+        >
+          <X className="w-3 h-3" />
+        </Button>
+      )}
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[300px] justify-between"
+        >
+          {value
+            ? constituencies.find(
+                (constituency) => constituency.gssArea.id === value
+              )?.gssArea.name
+            : 'Select constituency...'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-[300px] p-0">
+        <Command>
+          <CommandInput
+            placeholder="Search framework..."
+            onChange={(e) => handleSearch(e.target.value)}
+          />
+          <CommandList>
+            <CommandEmpty>No constituency found.</CommandEmpty>
+            <CommandGroup>
+              {filteredConstituencies.map((constituency) => (
+                <CommandItem
+                  key={constituency.gssArea.id}
+                  value={constituency.gssArea.id}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? '' : currentValue)
+                    setOpen(false)
+                    setSelectedBoundary(
+                      getGSSfromGSSAreaID(currentValue as string)
+                    )
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      value === constituency.gssArea.id
+                        ? 'opacity-100'
+                        : 'opacity-0'
+                    )}
+                  />
+                  {constituency.gssArea.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

From f069a987f5332c7ee403aecc3a29855548c59743 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Fri, 20 Dec 2024 14:11:24 +0000
Subject: [PATCH 12/26] filtering fix

---
 .../dashboard/ReportDashboardConsSelector.tsx | 110 ++++++++++--------
 1 file changed, 62 insertions(+), 48 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
index aabe187d3..1a8caef64 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
@@ -3,6 +3,7 @@
 import { Check, ChevronsUpDown, X } from 'lucide-react'
 import * as React from 'react'
 
+import { ConstituencyStatsOverviewQuery } from '@/__generated__/graphql'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -18,94 +19,107 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 import { cn } from '@/lib/utils'
-
 export default function ReportDashboardConsSelector({
   constituencies,
   selectedBoundary,
   setSelectedBoundary,
 }: {
-  constituencies: any[]
+  constituencies: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
   selectedBoundary: any
   setSelectedBoundary: any
 }) {
   const [open, setOpen] = React.useState(false)
   const [value, setValue] = React.useState('')
+  const [searchQuery, setSearchQuery] = React.useState('')
 
   function getGSSfromGSSAreaID(gssAreaID: string) {
     return constituencies.find(
-      (constituency) => constituency.gssArea.id === gssAreaID
+      (constituency) => constituency?.gssArea?.id === gssAreaID
     )?.gss
   }
 
-  const [filteredConstituencies, setFilteredConstituencies] =
-    React.useState(constituencies)
-
-  function handleSearch(searchTerm: string) {
-    const filteredConstituencies = constituencies.filter((constituency) =>
-      constituency.gssArea.name.toLowerCase().includes(searchTerm.toLowerCase())
+  function getMatchingConstituencies(searchTerm: string) {
+    const search = searchTerm.toLowerCase().trim()
+    return constituencies.filter((constituency) =>
+      constituency?.gssArea?.name?.toLowerCase().includes(search)
     )
-    setFilteredConstituencies(filteredConstituencies)
   }
 
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [])
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      {selectedBoundary && (
-        <Button
-          variant="ghost"
-          onClick={() => {
-            setSelectedBoundary(null)
-            setValue('')
-          }}
-        >
-          <X className="w-3 h-3" />
-        </Button>
-      )}
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[300px] justify-between"
-        >
-          {value
-            ? constituencies.find(
-                (constituency) => constituency.gssArea.id === value
-              )?.gssArea.name
-            : 'Select constituency...'}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
+      <div className="flex gap-1 items-center">
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-[300px] justify-between text-sm font-normal"
+          >
+            {value
+              ? constituencies.find(
+                  (constituency) => constituency?.gssArea?.id === value
+                )?.gssArea?.name
+              : 'Filter by constituency...'}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        {selectedBoundary && (
+          <Button
+            variant="outline"
+            onClick={() => {
+              setSelectedBoundary(null)
+              setValue('')
+            }}
+            className="text-sm font-normal flex items-center gap-2"
+          >
+            <X className="w-3 h-3" />
+          </Button>
+        )}
+      </div>
 
       <PopoverContent className="w-[300px] p-0">
         <Command>
           <CommandInput
-            placeholder="Search framework..."
-            onChange={(e) => handleSearch(e.target.value)}
+            placeholder="Search constituencies..."
+            value={searchQuery}
+            onValueChange={setSearchQuery}
           />
           <CommandList>
             <CommandEmpty>No constituency found.</CommandEmpty>
             <CommandGroup>
-              {filteredConstituencies.map((constituency) => (
+              {getMatchingConstituencies(searchQuery).map((constituency) => (
                 <CommandItem
-                  key={constituency.gssArea.id}
-                  value={constituency.gssArea.id}
+                  key={constituency.gssArea?.id}
+                  value={constituency.gssArea?.name}
                   onSelect={(currentValue) => {
-                    setValue(currentValue === value ? '' : currentValue)
-                    setOpen(false)
-                    setSelectedBoundary(
-                      getGSSfromGSSAreaID(currentValue as string)
-                    )
+                    const selectedId = constituency?.gssArea?.id
+                    if (selectedId) {
+                      setValue(selectedId)
+                      setOpen(false)
+                      setSelectedBoundary(getGSSfromGSSAreaID(selectedId))
+                    }
                   }}
                 >
                   <Check
                     className={cn(
                       'mr-2 h-4 w-4',
-                      value === constituency.gssArea.id
+                      value === constituency.gssArea?.id
                         ? 'opacity-100'
                         : 'opacity-0'
                     )}
                   />
-                  {constituency.gssArea.name}
+                  {constituency.gssArea?.name}
                 </CommandItem>
               ))}
             </CommandGroup>

From d0905d2c39dca8a29fa23460a15e08ee7e195853 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Fri, 20 Dec 2024 14:11:31 +0000
Subject: [PATCH 13/26] Layout adjustment

---
 .../app/reports/[id]/dashboard/ReportDashboard.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
index 95c158416..2424b3127 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -51,17 +51,17 @@ export default function ReportDashboard() {
 
   return (
     <main className="flex flex-col w-full p-4 h-[calc(100vh-48px)] overflow-y-auto">
-      <Tabs defaultValue="Overview" className="">
-        <div className="flex gap-4 items-center">
-          <ReportDashboardConsSelector
-            constituencies={constituencies}
-            selectedBoundary={selectedBoundary}
-            setSelectedBoundary={setSelectedBoundary}
-          />
+      <Tabs defaultValue="Overview">
+        <div className="flex gap-4 items-center justify-between mb-4">
           <TabsList>
             <TabsTrigger value="Overview">Overview</TabsTrigger>
             <TabsTrigger value="Foodbanks">Foodbanks</TabsTrigger>
           </TabsList>
+          <ReportDashboardConsSelector
+            constituencies={constituencies ?? []}
+            selectedBoundary={selectedBoundary}
+            setSelectedBoundary={setSelectedBoundary}
+          />
         </div>
         <TabsContent value="Overview">
           <div className="grid sm:grid-cols-2 md:grid-cols-3 grid-cols-1 gap-4 w-full">

From 047e8e96a5a5db42c8eac8c7c9f814d3ea5fed0e Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Sat, 21 Dec 2024 14:42:16 +0000
Subject: [PATCH 14/26] updates

---
 .../[id]/dashboard/ReportDashboard.tsx        | 39 +++++++++-------
 .../dashboard/ReportDashboardConsSelector.tsx | 44 ++++++++++---------
 .../[id]/dashboard/ReportDashboardHexMap.tsx  | 17 ++++---
 .../[id]/dashboard/ReportDashboardList.tsx    |  2 +-
 .../dashboard/ReportDashboardMemberList.tsx   |  3 ++
 nextjs/src/components/ui/sidebar.tsx          |  2 +-
 6 files changed, 64 insertions(+), 43 deletions(-)
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
index 2424b3127..1f8e74e2d 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -13,6 +13,7 @@ import ReportDashboardHexMap from './ReportDashboardHexMap'
 import ReportDashboardList from './ReportDashboardList'
 import ReportDashboardMPs from './ReportDashboardMPs'
 import ReportDashboardMemberCount from './ReportDashboardMemberCount'
+import ReportDashboardMemberList from './ReportDashboardMemberList'
 import ReportDashboardMembersOverTime from './ReportDashboardMembersOverTime'
 
 export default function ReportDashboard() {
@@ -50,27 +51,32 @@ export default function ReportDashboard() {
   }
 
   return (
-    <main className="flex flex-col w-full p-4 h-[calc(100vh-48px)] overflow-y-auto">
-      <Tabs defaultValue="Overview">
-        <div className="flex gap-4 items-center justify-between mb-4">
-          <TabsList>
-            <TabsTrigger value="Overview">Overview</TabsTrigger>
-            <TabsTrigger value="Foodbanks">Foodbanks</TabsTrigger>
-          </TabsList>
-          <ReportDashboardConsSelector
-            constituencies={constituencies ?? []}
-            selectedBoundary={selectedBoundary}
-            setSelectedBoundary={setSelectedBoundary}
-          />
-        </div>
+    <main className="grid grid-cols-5 gap-4 w-full p-4 h-[calc(100vh-48px)] overflow-y-auto">
+      <div className="col-span-1 flex flex-col gap-2">
+        <ReportDashboardConsSelector
+          constituencies={constituencies ?? []}
+          selectedBoundary={selectedBoundary}
+          setSelectedBoundary={setSelectedBoundary}
+        />
+        <ReportDashboardHexMap
+          activeConstituencies={constituencies}
+          selectedBoundary={selectedBoundary}
+          setSelectedBoundary={setSelectedBoundary}
+        />
+      </div>
+      <Tabs defaultValue="Overview" className="col-span-4">
+        <TabsList>
+          <TabsTrigger value="Overview">Overview</TabsTrigger>
+          <TabsTrigger value="Members">Members</TabsTrigger>
+          <TabsTrigger value="Foodbanks">Foodbanks</TabsTrigger>
+        </TabsList>
         <TabsContent value="Overview">
           <div className="grid sm:grid-cols-2 md:grid-cols-3 grid-cols-1 gap-4 w-full">
             {constituencies && !selectedBoundary && (
               <>
                 <ReportDashboardMemberCount constituencies={constituencies} />
-                <ReportDashboardMembersOverTime />
-                <ReportDashboardHexMap activeConstituencies={constituencies} />
                 <ReportDashboardList constituencies={constituencies} />
+                <ReportDashboardMembersOverTime />
                 <ReportDashboardMPs constituencies={constituencies} />
               </>
             )}
@@ -84,6 +90,9 @@ export default function ReportDashboard() {
             )}
           </div>
         </TabsContent>
+        <TabsContent value="Members">
+          <ReportDashboardMemberList />
+        </TabsContent>
         <TabsContent value="Foodbanks">Foodbanks Data goes here</TabsContent>
       </Tabs>
     </main>
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
index 1a8caef64..058c76eb3 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
@@ -58,37 +58,41 @@ export default function ReportDashboardConsSelector({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <div className="flex gap-1 items-center">
+      <div className="flex flex-col gap-1 items-center">
         <PopoverTrigger asChild>
           <Button
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="w-[300px] justify-between text-sm font-normal"
+            className=" justify-between text-sm font-normal w-full"
           >
-            {value
-              ? constituencies.find(
-                  (constituency) => constituency?.gssArea?.id === value
-                )?.gssArea?.name
-              : 'Filter by constituency...'}
+            <div className="flex items-center gap-1">
+              {selectedBoundary && (
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    setSelectedBoundary(null)
+                    setValue('')
+                  }}
+                  className="text-sm font-normal flex items-center  -ml-4 hover:bg-white hover:text-red-400"
+                >
+                  <X className="w-3 h-3" />
+                </Button>
+              )}
+              <span className="truncate">
+                {value
+                  ? constituencies.find(
+                      (constituency) => constituency?.gssArea?.id === value
+                    )?.gssArea?.name
+                  : 'Filter by constituency...'}
+              </span>
+            </div>
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
-        {selectedBoundary && (
-          <Button
-            variant="outline"
-            onClick={() => {
-              setSelectedBoundary(null)
-              setValue('')
-            }}
-            className="text-sm font-normal flex items-center gap-2"
-          >
-            <X className="w-3 h-3" />
-          </Button>
-        )}
       </div>
 
-      <PopoverContent className="w-[300px] p-0">
+      <PopoverContent className="w-full  p-0" align="start">
         <Command>
           <CommandInput
             placeholder="Search constituencies..."
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
index 8d581b053..44a16c4ab 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardHexMap.tsx
@@ -18,8 +18,12 @@ interface TooltipState {
 
 export default function ReportDashboardHexMap({
   activeConstituencies,
+  selectedBoundary,
+  setSelectedBoundary,
 }: {
   activeConstituencies?: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
+  selectedBoundary?: string
+  setSelectedBoundary?: (boundary: string) => void
 }) {
   const [tooltip, setTooltip] = useState<TooltipState | null>(null)
 
@@ -41,8 +45,8 @@ export default function ReportDashboardHexMap({
   }
 
   return (
-    <Card className="w-full row-span-2 relative">
-      <CardHeader>
+    <Card className="w-full row-span-2 relative bg-meepGray-800">
+      <CardHeader className=" border-meepGray-600">
         <CardTitle>Constituency Map </CardTitle>
         <CardDescription>Regional Distribution</CardDescription>
       </CardHeader>
@@ -73,11 +77,12 @@ export default function ReportDashboardHexMap({
                     ? `hsl(var(--chart-1))`
                     : `hsl(var(--chart-2))`
                 }
-                className={`fill-white transition-colors duration-200 hover:opacity-75 ${
-                  activeGssCodes?.has(id) ? 'opacity-100' : 'opacity-50'
-                }`}
+                className={`fill-white transition-colors duration-200 hover:opacity-75 
+                  ${activeGssCodes?.has(id) ? 'opacity-100 ' : 'opacity-50'}
+                  ${selectedBoundary === id ? 'fill-brandBlue' : ''}`}
                 onMouseEnter={(e) => handleMouseEnter(e, hex)}
                 onMouseLeave={() => setTooltip(null)}
+                onClick={() => setSelectedBoundary?.(id)}
               />
             ))}
           </Layout>
@@ -85,7 +90,7 @@ export default function ReportDashboardHexMap({
 
         {tooltip && (
           <div
-            className="fixed z-50 bg-popover text-popover-foreground px-3 py-1.5 text-sm rounded-md shadow-md"
+            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,
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
index a51907cd5..43017ce2c 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
@@ -41,7 +41,7 @@ export default function ReportDashboardList({
       <CardHeader>
         <CardTitle>Key Constituencies</CardTitle>
       </CardHeader>
-      <CardContent className="h-[500px] overflow-y-auto">
+      <CardContent className="h-[400px] overflow-y-auto">
         <ChartContainer config={chartConfig} className={`h-[1000px] w-full`}>
           <BarChart
             accessibilityLayer
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx
new file mode 100644
index 000000000..2395d8c51
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx
@@ -0,0 +1,3 @@
+export default function ReportDashboardMemberList() {
+  return <div>ReportDashboardMemberList</div>
+}
diff --git a/nextjs/src/components/ui/sidebar.tsx b/nextjs/src/components/ui/sidebar.tsx
index e1e5c4996..8769493a4 100644
--- a/nextjs/src/components/ui/sidebar.tsx
+++ b/nextjs/src/components/ui/sidebar.tsx
@@ -57,7 +57,7 @@ const SidebarProvider = React.forwardRef<
 >(
   (
     {
-      defaultOpen = true,
+      defaultOpen = false,
       open: openProp,
       onOpenChange: setOpenProp,
       className,

From 4c59b082fa925faf2929dcfa241de6a32eade478 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Sat, 21 Dec 2024 21:16:34 +0000
Subject: [PATCH 15/26] combining views init commit

---
 nextjs/package-lock.json                      |  11 +
 nextjs/package.json                           |   1 +
 .../MapLayers/PoliticalChoropleths.tsx        |  25 ++
 .../(components)/ReportDisplaySettings.tsx    |  11 +-
 .../[id]/(components)/ReportHexMap.tsx        | 169 ++++++++++++
 .../[id]/(components)/ReportNavbar.tsx        |  44 +---
 .../reports/[id]/(components)/ReportPage.tsx  |  96 +++++--
 .../[id]/(components)/ReportSidebarLeft.tsx   |  15 +-
 .../(components)/reportsConstituencyItem.tsx  | 244 ++++++++++--------
 .../[id]/dashboard/ReportDashboard.tsx        | 125 +++++----
 .../dashboard/ReportDashboardConsSelector.tsx | 202 +++++++++++----
 .../dashboard/ReportDashboardMemberList.tsx   |  74 +++++-
 nextjs/src/app/reports/[id]/page.tsx          |   4 -
 nextjs/src/components/LocalisedMap.tsx        |  55 ++--
 nextjs/src/components/ui/resizable.tsx        |  45 ++++
 15 files changed, 814 insertions(+), 307 deletions(-)
 create mode 100644 nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx
 create mode 100644 nextjs/src/components/ui/resizable.tsx

diff --git a/nextjs/package-lock.json b/nextjs/package-lock.json
index f679da66a..cc661ca42 100644
--- a/nextjs/package-lock.json
+++ b/nextjs/package-lock.json
@@ -82,6 +82,7 @@
         "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",
@@ -24520,6 +24521,16 @@
         "react": ">= 16.3"
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.7.tgz",
+      "integrity": "sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-simple-code-editor": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.13.1.tgz",
diff --git a/nextjs/package.json b/nextjs/package.json
index 0e094f8df..8c1ad6939 100644
--- a/nextjs/package.json
+++ b/nextjs/package.json
@@ -98,6 +98,7 @@
     "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",
diff --git a/nextjs/src/app/reports/[id]/(components)/MapLayers/PoliticalChoropleths.tsx b/nextjs/src/app/reports/[id]/(components)/MapLayers/PoliticalChoropleths.tsx
index 345e6c848..166865f02 100644
--- a/nextjs/src/app/reports/[id]/(components)/MapLayers/PoliticalChoropleths.tsx
+++ b/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
 
diff --git a/nextjs/src/app/reports/[id]/(components)/ReportDisplaySettings.tsx b/nextjs/src/app/reports/[id]/(components)/ReportDisplaySettings.tsx
index 67a8aff48..38cdb3c04 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportDisplaySettings.tsx
+++ b/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">
diff --git a/nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx b/nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx
new file mode 100644
index 000000000..3a2f98f78
--- /dev/null
+++ b/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-200 hover:brightness-125
+                  ${selectedBoundary === id ? 'stroke-2 stroke-pink-700' : ''}
+                  ${count > 0 ? 'opacity-100' : 'opacity-50'}
+                `}
+                onMouseEnter={(e) => handleMouseEnter(e, hex)}
+                onMouseLeave={() => setTooltip(null)}
+                onClick={() => setSelectedBoundary?.(id)}
+              />
+            )
+          })}
+        </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>
+  )
+}
diff --git a/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx b/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
index fc5605476..9aad3672d 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx
@@ -5,16 +5,16 @@ import { useParams, usePathname } from 'next/navigation'
 
 import { contentEditableMutation } from '@/lib/html'
 import { atom, useAtomValue } from 'jotai'
-import { BarChartIcon, MapIcon, PanelRight } from 'lucide-react'
+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
 }
 
-const activeTabAtom = atom('map')
-
 // 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
@@ -50,39 +50,13 @@ export default function ReportNavbar() {
             className="text-meepGray-400 w-4 h-4 cursor-pointer"
           />{' '}
         </div>
-        <div className="flex flex-row items-center gap-2 px-10">
-          {navbarTabs(id as string).map((tab) => (
-            <Link href={tab.href} key={tab.name}>
-              <div
-                className={`py-1 px-2 font-normal flex flex-row items-center gap-2 rounded-md ${
-                  pathname === tab.href
-                    ? 'bg-meepGray-800 opacity-100'
-                    : 'hover:bg-meepGray-800 opacity-50'
-                }`}
-              >
-                {tab.icon}
-                {tab.name}
-              </div>
-            </Link>
-          ))}
-        </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>
   )
 }
-
-function navbarTabs(id: string) {
-  return [
-    {
-      name: 'Map',
-      href: `/reports/${id}`,
-      icon: <MapIcon className="w-4 h-4" />,
-    },
-    {
-      name: 'Dashboard',
-      href: `/reports/${id}/dashboard`,
-      icon: <BarChartIcon className="w-4 h-4" />,
-    },
-  ]
-}
diff --git a/nextjs/src/app/reports/[id]/(components)/ReportPage.tsx b/nextjs/src/app/reports/[id]/(components)/ReportPage.tsx
index 71ee5a3e6..d7d169777 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportPage.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportPage.tsx
@@ -2,50 +2,100 @@
 
 import LocalisedMap from '@/components/LocalisedMap'
 import { PlaceholderLayer } from '@/components/PlaceholderLayer'
-import { ConstituenciesPanel } from './ConstituenciesPanel'
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { MapIcon } from 'lucide-react'
+import { useRef } from 'react'
+import { MapRef } from 'react-map-gl'
+import ReportDashboard from '../dashboard/ReportDashboard'
 import PoliticalChoropleths from './MapLayers/PoliticalChoropleths'
 import ReportMapMarkers from './MapLayers/ReportMapMarkers'
+import ReportHexMap from './ReportHexMap'
 import { useReport } from './ReportProvider'
+import { ReportSidebarLeft } from './ReportSidebarLeft'
 
 export const PLACEHOLDER_LAYER_ID_CHOROPLETH = 'choropleths'
 export const PLACEHOLDER_LAYER_ID_MARKERS = 'markers'
 
 export default function ReportPage() {
+  const mapRef = useRef<MapRef>(null)
   const { report } = useReport()
   const boundaryType = report.displayOptions?.dataVisualisation?.boundaryType
   const tileset = report.politicalBoundaries.find(
     (boundary) => boundary.boundaryType === boundaryType
   )?.tileset
 
+  // Handle panel resize
+  const handlePanelResize = () => {
+    if (mapRef.current) {
+      // Force map resize after panel animation completes
+      setTimeout(() => {
+        mapRef.current?.resize()
+      }, 10) // matches transition duration
+    }
+  }
+
   return (
     <div className="absolute w-[-webkit-fill-available] h-full flex flex-row pointer-events-none">
       <div className="w-full h-full pointer-events-auto">
-        <LocalisedMap
-          showStreetDetails={report.displayOptions?.display?.showStreetDetails}
-          initViewCountry="uk"
-          mapKey={report.id}
+        <ResizablePanelGroup
+          direction="horizontal"
+          onLayout={handlePanelResize}
         >
-          <PlaceholderLayer id={PLACEHOLDER_LAYER_ID_CHOROPLETH} />
-          {/* We load and populate all available political boundaries first, then toggle their visibility later.
+          <ReportSidebarLeft />
+          <ResizablePanel>
+            <div className="relative w-full h-full transition-all duration-300">
+              <Tabs defaultValue="map" className="w-full h-full ">
+                <TabsList className="absolute top-[15px] left-[15px] z-10 ">
+                  <MapIcon className="w-4 h-4 mx-2 stroke-meepGray-400" />
+                  <TabsTrigger value="map" className="">
+                    GEO
+                  </TabsTrigger>
+                  <TabsTrigger value="hex">HEX</TabsTrigger>
+                </TabsList>
+                <TabsContent value="map" className="w-full h-full mt-0">
+                  <LocalisedMap
+                    ref={mapRef}
+                    showStreetDetails={
+                      report.displayOptions?.display?.showStreetDetails
+                    }
+                    initViewCountry="uk"
+                    mapKey={report.id}
+                  >
+                    <PlaceholderLayer id={PLACEHOLDER_LAYER_ID_CHOROPLETH} />
+                    {/* We load and populate all available political boundaries first, then toggle their visibility later.
           This prevents re-rendering and re-initialisting the layers and re-calculating stats when a user
           just wants to change the visible boundary type */}
-          {/* {report.politicalBoundaries.map(({ boundaryType, tileset }) => ( */}
-          {tileset && boundaryType && (
-            <PoliticalChoropleths
-              key={`${boundaryType}-${tileset.mapboxSourceId}`}
-              report={report}
-              boundaryType={boundaryType}
-              tileset={tileset}
-            />
-          )}
-          {/* ))} */}
-          <PlaceholderLayer id={PLACEHOLDER_LAYER_ID_MARKERS} />
-          <ReportMapMarkers />
-        </LocalisedMap>
+                    {/* {report.politicalBoundaries.map(({ boundaryType, tileset }) => ( */}
+                    {tileset && boundaryType && (
+                      <PoliticalChoropleths
+                        key={`${boundaryType}-${tileset.mapboxSourceId}`}
+                        report={report}
+                        boundaryType={boundaryType}
+                        tileset={tileset}
+                      />
+                    )}
+                    {/* ))} */}
+                    <PlaceholderLayer id={PLACEHOLDER_LAYER_ID_MARKERS} />
+                    <ReportMapMarkers />
+                  </LocalisedMap>
+                </TabsContent>
+                <TabsContent value="hex" className="w-full h-full mt-0">
+                  <ReportHexMap />
+                </TabsContent>
+              </Tabs>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle={true} />
+          <ResizablePanel>
+            <ReportDashboard />
+          </ResizablePanel>
+        </ResizablePanelGroup>
       </div>
-      <aside className="absolute top-0 right-0 p-5 w-[400px] h-full">
-        <ConstituenciesPanel />
-      </aside>
     </div>
   )
 }
diff --git a/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx b/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
index 7b2d6e00e..fcce0ef0e 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
@@ -14,7 +14,9 @@ import { ReportDataSources } from './ReportDataSources'
 import { NAVBAR_HEIGHT } from './ReportNavbar'
 import { useReport } from './ReportProvider'
 
-const classes = {
+export const TabTriggerClasses = {
+  tabsList:
+    'w-full justify-start text-white rounded-none px-4 border border-b-meepGray-800 pt-4 pb-0 h-fit flex gap-4',
   tabsTrigger:
     'pb-2 bg-transparent px-0 data-[state=active]:bg-transparent data-[state=active]:text-white data-[state=active]:border-b border-white rounded-none',
 }
@@ -30,7 +32,7 @@ export function ReportSidebarLeft() {
       style={{
         top: NAVBAR_HEIGHT + 'px',
       }}
-      className="border border-r-meepGray-800"
+      className="border border-r-meepGray-800 "
     >
       <SidebarContent className="bg-meepGray-600">
         <Tabs
@@ -38,13 +40,10 @@ export function ReportSidebarLeft() {
           className="w-full"
           onValueChange={setSelectedTab}
         >
-          <TabsList
-            className="w-full justify-start text-white rounded-none px-4
-          border border-b-meepGray-800 pt-4 pb-0 h-fit flex gap-4"
-          >
+          <TabsList className={TabTriggerClasses.tabsList}>
             <TabsTrigger
               value="data-sources"
-              className={classes.tabsTrigger}
+              className={TabTriggerClasses.tabsTrigger}
               disabled={dataLoading}
             >
               Data Sources {}
@@ -62,7 +61,7 @@ export function ReportSidebarLeft() {
               <HoverCardTrigger>
                 <TabsTrigger
                   value="configuration"
-                  className={classes.tabsTrigger}
+                  className={TabTriggerClasses.tabsTrigger}
                   disabled={dataLoading}
                 >
                   Configuration
diff --git a/nextjs/src/app/reports/[id]/(components)/reportsConstituencyItem.tsx b/nextjs/src/app/reports/[id]/(components)/reportsConstituencyItem.tsx
index 68d6df4cb..c623cdf35 100644
--- a/nextjs/src/app/reports/[id]/(components)/reportsConstituencyItem.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/reportsConstituencyItem.tsx
@@ -16,10 +16,11 @@ import {
 import {
   Card,
   CardContent,
+  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
+} from '@/components/ChartCard'
 import {
   Tooltip,
   TooltipContent,
@@ -76,128 +77,151 @@ export const ConstituencyElectionDeepDive = ({
     .filter((l) => !!l.source.importedDataCountForConstituency?.count)
 
   return (
-    <div key={data.constituency.id} className="divide-y space-y-4">
-      <h1 className="font-PPRightGrotesk text-hLgPP">
-        {data.constituency.name}
-      </h1>
-      {data.constituency.mp && showMPs && (
-        <section className="mb-8">
-          <div className="uppercase font-IBMPlexMono text-xs text-meepGray-400 mb-1">
-            MP
-          </div>
-          <Person
-            img={data.constituency.mp.photo?.url}
-            name={data.constituency.mp.name}
-            subtitle={data.constituency.mp.party?.name}
-          />
-        </section>
-      )}
-      {!!data.constituency.lastElection && showLastElectionData && (
-        <section className="font-IBMPlexMono mb-10">
-          <section>
-            {/* First and second parties */}
-            <article className="relative z-10 space-y-1">
-              <div className="uppercase text-xs text-meepGray-400">
-                1st in {getYear(data.constituency.lastElection.stats.date)}
-              </div>
-              <div>
-                {data.constituency.lastElection.stats.firstPartyResult.party}
-              </div>
-              <div
-                className="rounded w-full h-4"
-                style={{
-                  backgroundColor:
-                    data.constituency.lastElection.stats.firstPartyResult.shade,
-                }}
-              />
-            </article>
-            <article className="relative z-10 pt-6">
-              <div
-                aria-roledescription="Margin between first and second party votes"
-                className="bg-meepGray-700 border-l border-r border-meepGray-400 absolute right-0 top-0 h-full z-0"
-                style={{
-                  width: format('.0%')(
-                    1 -
-                      data.constituency.lastElection.stats.secondPartyResult
-                        .votes /
-                        data.constituency.lastElection.stats.firstPartyResult
-                          .votes
-                  ),
-                }}
-              />
-              <div className="relative z-10 space-y-1">
+    <Card key={data.constituency.id} className="divide-y space-y-4">
+      <CardHeader>
+        <CardTitle>{data.constituency.name}</CardTitle>
+        <CardDescription>
+          {data.mapReport.importedDataCountForConstituency?.count ? (
+            <>
+              {format(',')(
+                data.mapReport.importedDataCountForConstituency?.count
+              )}{' '}
+              {pluralize(
+                'member',
+                data.mapReport.importedDataCountForConstituency?.count || 0
+              )}
+            </>
+          ) : (
+            <div>You have no member data in this constituency</div>
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {data.constituency.mp && showMPs && (
+          <section className="mb-8">
+            <div className="uppercase font-IBMPlexMono text-xs text-meepGray-400 mb-1">
+              MP
+            </div>
+            <Person
+              img={data.constituency.mp.photo?.url}
+              name={data.constituency.mp.name}
+              subtitle={data.constituency.mp.party?.name}
+            />
+          </section>
+        )}
+        {!!data.constituency.lastElection && showLastElectionData && (
+          <section className="font-IBMPlexMono mb-10">
+            <section>
+              {/* First and second parties */}
+              <article className="relative z-10 space-y-1">
                 <div className="uppercase text-xs text-meepGray-400">
-                  2nd in {getYear(data.constituency.lastElection.stats.date)}
+                  1st in {getYear(data.constituency.lastElection.stats.date)}
                 </div>
                 <div>
-                  {data.constituency.lastElection.stats.secondPartyResult.party}
+                  {data.constituency.lastElection.stats.firstPartyResult.party}
                 </div>
                 <div
-                  className="rounded h-4"
+                  className="rounded w-full h-4"
                   style={{
                     backgroundColor:
-                      data.constituency.lastElection.stats.secondPartyResult
+                      data.constituency.lastElection.stats.firstPartyResult
                         .shade,
+                  }}
+                />
+              </article>
+              <article className="relative z-10 pt-6">
+                <div
+                  aria-roledescription="Margin between first and second party votes"
+                  className="bg-meepGray-700 border-l border-r border-meepGray-400 absolute right-0 top-0 h-full z-0"
+                  style={{
                     width: format('.0%')(
-                      data.constituency.lastElection.stats.secondPartyResult
-                        .votes /
-                        data.constituency.lastElection.stats.firstPartyResult
-                          .votes
+                      1 -
+                        data.constituency.lastElection.stats.secondPartyResult
+                          .votes /
+                          data.constituency.lastElection.stats.firstPartyResult
+                            .votes
                     ),
                   }}
                 />
-              </div>
-            </article>
-          </section>
-          <section className="grid grid-cols-2 gap-6 mt-8">
-            {/* Voting stats */}
-            <article>
-              <div className="uppercase text-xs text-meepGray-400">
-                Majority
-              </div>
-              <div>
-                {format(',')(data.constituency.lastElection.stats.majority)}
-              </div>
-            </article>
-            <article>
-              <div className="uppercase text-xs text-meepGray-400">
-                Swing to lose
-              </div>
-              <div>
-                {format('.2%')(
-                  data.constituency.lastElection.stats.majority /
-                    data.constituency.lastElection.stats.electorate
-                )}
-              </div>
-            </article>
-            <article>
-              <div className="uppercase text-xs text-meepGray-400">
-                Electorate
-              </div>
-              <div>
-                {format(',')(data.constituency.lastElection.stats.electorate)}
-              </div>
-            </article>
-            <article>
-              <div className="uppercase text-xs text-meepGray-400">Turnout</div>
-              <div>
-                {format('.2%')(
-                  data.constituency.lastElection.stats.validVotes /
-                    data.constituency.lastElection.stats.electorate
-                )}
-              </div>
-            </article>
+                <div className="relative z-10 space-y-1">
+                  <div className="uppercase text-xs text-meepGray-400">
+                    2nd in {getYear(data.constituency.lastElection.stats.date)}
+                  </div>
+                  <div>
+                    {
+                      data.constituency.lastElection.stats.secondPartyResult
+                        .party
+                    }
+                  </div>
+                  <div
+                    className="rounded h-4"
+                    style={{
+                      backgroundColor:
+                        data.constituency.lastElection.stats.secondPartyResult
+                          .shade,
+                      width: format('.0%')(
+                        data.constituency.lastElection.stats.secondPartyResult
+                          .votes /
+                          data.constituency.lastElection.stats.firstPartyResult
+                            .votes
+                      ),
+                    }}
+                  />
+                </div>
+              </article>
+            </section>
+            <section className="grid grid-cols-2 gap-6 mt-8">
+              {/* Voting stats */}
+              <article>
+                <div className="uppercase text-xs text-meepGray-400">
+                  Majority
+                </div>
+                <div>
+                  {format(',')(data.constituency.lastElection.stats.majority)}
+                </div>
+              </article>
+              <article>
+                <div className="uppercase text-xs text-meepGray-400">
+                  Swing to lose
+                </div>
+                <div>
+                  {format('.2%')(
+                    data.constituency.lastElection.stats.majority /
+                      data.constituency.lastElection.stats.electorate
+                  )}
+                </div>
+              </article>
+              <article>
+                <div className="uppercase text-xs text-meepGray-400">
+                  Electorate
+                </div>
+                <div>
+                  {format(',')(data.constituency.lastElection.stats.electorate)}
+                </div>
+              </article>
+              <article>
+                <div className="uppercase text-xs text-meepGray-400">
+                  Turnout
+                </div>
+                <div>
+                  {format('.2%')(
+                    data.constituency.lastElection.stats.validVotes /
+                      data.constituency.lastElection.stats.electorate
+                  )}
+                </div>
+              </article>
+            </section>
           </section>
-        </section>
-      )}
-      {!!data.mapReport.importedDataCountForConstituency && (
-        <MemberElectoralInsights
-          totalCount={data.mapReport.importedDataCountForConstituency.count}
-          layersInThisConstituency={layersInThisConstituency}
-          electionStats={data.constituency.lastElection?.stats}
-        />
-      )}
-    </div>
+        )}
+        {!!data.mapReport.importedDataCountForConstituency && (
+          <MemberElectoralInsights
+            totalCount={data.mapReport.importedDataCountForConstituency.count}
+            layersInThisConstituency={layersInThisConstituency}
+            electionStats={data.constituency.lastElection?.stats}
+          />
+        )}
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
index 1f8e74e2d..21493c72b 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -5,17 +5,52 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { gql, useQuery } from '@apollo/client'
 import { useAtom } from 'jotai'
+import { CalendarIcon, FileIcon, MapPinIcon, UsersIcon } from 'lucide-react'
 import { useReport } from '../(components)/ReportProvider'
+import { TabTriggerClasses } from '../(components)/ReportSidebarLeft'
 import { ConstituencyElectionDeepDive } from '../(components)/reportsConstituencyItem'
 import { selectedBoundaryAtom } from '../useSelectBoundary'
-import ReportDashboardConsSelector from './ReportDashboardConsSelector'
-import ReportDashboardHexMap from './ReportDashboardHexMap'
 import ReportDashboardList from './ReportDashboardList'
 import ReportDashboardMPs from './ReportDashboardMPs'
 import ReportDashboardMemberCount from './ReportDashboardMemberCount'
 import ReportDashboardMemberList from './ReportDashboardMemberList'
 import ReportDashboardMembersOverTime from './ReportDashboardMembersOverTime'
 
+const IconClasses = 'w-4 h-4 stroke-meepGray-400 stroke-1 mr-1'
+
+const dashboardTabItems = [
+  {
+    label: 'Overview',
+    value: 'overview',
+    bold: true,
+  },
+  {
+    label: 'Members',
+    value: 'members',
+    icon: <UsersIcon className={IconClasses} />,
+  },
+  {
+    label: 'Locations',
+    value: 'locations',
+    icon: <MapPinIcon className={IconClasses} />,
+  },
+  {
+    label: 'Groups',
+    value: 'groups',
+    icon: <UsersIcon className={IconClasses} />,
+  },
+  {
+    label: 'Events',
+    value: 'events',
+    icon: <CalendarIcon className={IconClasses} />,
+  },
+  {
+    label: 'Articles  ',
+    value: 'articles',
+    icon: <FileIcon className={IconClasses} />,
+  },
+]
+
 export default function ReportDashboard() {
   const [selectedBoundary, setSelectedBoundary] = useAtom(selectedBoundaryAtom)
   const {
@@ -51,49 +86,51 @@ export default function ReportDashboard() {
   }
 
   return (
-    <main className="grid grid-cols-5 gap-4 w-full p-4 h-[calc(100vh-48px)] overflow-y-auto">
-      <div className="col-span-1 flex flex-col gap-2">
-        <ReportDashboardConsSelector
-          constituencies={constituencies ?? []}
-          selectedBoundary={selectedBoundary}
-          setSelectedBoundary={setSelectedBoundary}
-        />
-        <ReportDashboardHexMap
-          activeConstituencies={constituencies}
-          selectedBoundary={selectedBoundary}
-          setSelectedBoundary={setSelectedBoundary}
-        />
-      </div>
-      <Tabs defaultValue="Overview" className="col-span-4">
-        <TabsList>
-          <TabsTrigger value="Overview">Overview</TabsTrigger>
-          <TabsTrigger value="Members">Members</TabsTrigger>
-          <TabsTrigger value="Foodbanks">Foodbanks</TabsTrigger>
+    <main className="flex flex-col gap-4 w-full  h-[calc(100vh-48px)] overflow-y-auto">
+      <Tabs defaultValue="overview" className="col-span-4">
+        <TabsList className={TabTriggerClasses.tabsList}>
+          {dashboardTabItems.map((item) => (
+            <TabsTrigger
+              key={item.value}
+              value={item.value}
+              className={`${TabTriggerClasses.tabsTrigger} ${
+                item.bold ? 'font-bold' : 'font-normal'
+              }`}
+            >
+              {item.icon}
+              {item.label}
+            </TabsTrigger>
+          ))}
         </TabsList>
-        <TabsContent value="Overview">
-          <div className="grid sm:grid-cols-2 md:grid-cols-3 grid-cols-1 gap-4 w-full">
-            {constituencies && !selectedBoundary && (
-              <>
-                <ReportDashboardMemberCount constituencies={constituencies} />
-                <ReportDashboardList constituencies={constituencies} />
-                <ReportDashboardMembersOverTime />
-                <ReportDashboardMPs constituencies={constituencies} />
-              </>
-            )}
-            {selectedBoundary && analyticalAreaType && (
-              <div className="col-span-full">
-                <ConstituencyElectionDeepDive
-                  gss={selectedBoundary}
-                  analyticalAreaType={analyticalAreaType}
-                />
-              </div>
-            )}
-          </div>
-        </TabsContent>
-        <TabsContent value="Members">
-          <ReportDashboardMemberList />
-        </TabsContent>
-        <TabsContent value="Foodbanks">Foodbanks Data goes here</TabsContent>
+        <div className="p-4">
+          <TabsContent value="overview">
+            <div className="grid sm:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-4 w-full">
+              {constituencies && !selectedBoundary && (
+                <>
+                  <ReportDashboardMemberCount constituencies={constituencies} />
+                  <ReportDashboardList constituencies={constituencies} />
+                  <ReportDashboardMembersOverTime />
+                  <ReportDashboardMPs constituencies={constituencies} />
+                </>
+              )}
+              {selectedBoundary && analyticalAreaType && (
+                <div className="col-span-full">
+                  <ConstituencyElectionDeepDive
+                    gss={selectedBoundary}
+                    analyticalAreaType={analyticalAreaType}
+                  />
+                </div>
+              )}
+            </div>
+          </TabsContent>
+          <TabsContent value="members">
+            <ReportDashboardMemberList />
+          </TabsContent>
+          <TabsContent value="locations">Foodbanks Data goes here</TabsContent>
+          <TabsContent value="groups">Groups Data goes here</TabsContent>
+          <TabsContent value="events">Events Data goes here</TabsContent>
+          <TabsContent value="articles">Articles Data goes here</TabsContent>
+        </div>
       </Tabs>
     </main>
   )
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
index 058c76eb3..f70a7f033 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardConsSelector.tsx
@@ -1,9 +1,12 @@
 'use client'
 
-import { Check, ChevronsUpDown, X } from 'lucide-react'
+import { Check, Locate, X } from 'lucide-react'
 import * as React from 'react'
 
-import { ConstituencyStatsOverviewQuery } from '@/__generated__/graphql'
+import {
+  ConstituencyStatsOverviewQuery,
+  ConstituencyStatsOverviewQueryVariables,
+} from '@/__generated__/graphql'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -19,34 +22,39 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 import { cn } from '@/lib/utils'
-export default function ReportDashboardConsSelector({
-  constituencies,
-  selectedBoundary,
-  setSelectedBoundary,
-}: {
-  constituencies: ConstituencyStatsOverviewQuery['mapReport']['importedDataCountByConstituency']
-  selectedBoundary: any
-  setSelectedBoundary: any
-}) {
+import { gql, useQuery } from '@apollo/client'
+import { useAtom } from 'jotai'
+import { useEffect } from 'react'
+import { useReport } from '../(components)/ReportProvider'
+import { selectedBoundaryAtom } from '../useSelectBoundary'
+
+export default function ReportDashboardConsSelector() {
   const [open, setOpen] = React.useState(false)
   const [value, setValue] = React.useState('')
   const [searchQuery, setSearchQuery] = React.useState('')
+  const [selectedBoundary, setSelectedBoundary] = useAtom(selectedBoundaryAtom)
+  const { report } = useReport()
 
-  function getGSSfromGSSAreaID(gssAreaID: string) {
-    return constituencies.find(
-      (constituency) => constituency?.gssArea?.id === gssAreaID
-    )?.gss
-  }
-
-  function getMatchingConstituencies(searchTerm: string) {
-    const search = searchTerm.toLowerCase().trim()
-    return constituencies.filter((constituency) =>
-      constituency?.gssArea?.name?.toLowerCase().includes(search)
-    )
-  }
+  const constituencyAnalytics = useQuery<
+    ConstituencyStatsOverviewQuery,
+    ConstituencyStatsOverviewQueryVariables
+  >(CONSTITUENCY_STATS_OVERVIEW, {
+    variables: {
+      reportID: report.id,
+      analyticalAreaType:
+        report.displayOptions?.dataVisualisation?.boundaryType!,
+      layerIds: [report.displayOptions?.dataVisualisation?.dataSource!],
+    },
+  })
 
-  React.useEffect(() => {
+  // Keyboard shortcuts
+  useEffect(() => {
     const down = (e: KeyboardEvent) => {
+      if (e.key === 'Backspace' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+
+        setSelectedBoundary(null)
+      }
       if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
         setOpen((open) => !open)
@@ -56,40 +64,86 @@ export default function ReportDashboardConsSelector({
     return () => document.removeEventListener('keydown', down)
   }, [])
 
+  useEffect(() => {
+    if (selectedBoundary) {
+      const gssAreaID = getGSSAreaIDfromGSS(selectedBoundary)
+      if (gssAreaID) {
+        setValue(gssAreaID)
+      }
+    }
+    if (!selectedBoundary) {
+      setValue('')
+    }
+  }, [selectedBoundary])
+
+  const constituencies =
+    constituencyAnalytics.data?.mapReport.importedDataCountByConstituency
+      .filter((constituency) => constituency.gssArea)
+      .sort((a, b) => b.count - a.count) // Sort by count in descending order
+
+  if (constituencyAnalytics.loading) {
+    return <div>Loading...</div>
+  }
+
+  function getGSSfromGSSAreaID(gssAreaID: string) {
+    return constituencies?.find(
+      (constituency) => constituency?.gssArea?.id === gssAreaID
+    )?.gss
+  }
+
+  function getGSSAreaIDfromGSS(gss: string) {
+    return constituencies?.find((constituency) => constituency?.gss === gss)
+      ?.gssArea?.id
+  }
+
+  function getMatchingConstituencies(searchTerm: string) {
+    const search = searchTerm.toLowerCase().trim()
+    return constituencies?.filter((constituency) =>
+      constituency?.gssArea?.name?.toLowerCase().includes(search)
+    )
+  }
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <div className="flex flex-col gap-1 items-center">
+      <div className="flex  gap-1 items-center">
         <PopoverTrigger asChild>
           <Button
-            variant="outline"
+            variant="ghost"
             role="combobox"
             aria-expanded={open}
-            className=" justify-between text-sm font-normal w-full"
+            className=" justify-between text-sm font-normal w-full hover:bg-meepGray-800 text-opacity-80 "
           >
+            <Locate className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+
             <div className="flex items-center gap-1">
-              {selectedBoundary && (
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    setSelectedBoundary(null)
-                    setValue('')
-                  }}
-                  className="text-sm font-normal flex items-center  -ml-4 hover:bg-white hover:text-red-400"
-                >
-                  <X className="w-3 h-3" />
-                </Button>
-              )}
-              <span className="truncate">
+              <span className="truncate =">
                 {value
-                  ? constituencies.find(
+                  ? constituencies?.find(
                       (constituency) => constituency?.gssArea?.id === value
                     )?.gssArea?.name
-                  : 'Filter by constituency...'}
+                  : 'Select Constituency'}
               </span>
             </div>
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            {!selectedBoundary && (
+              <div className="text-xs text-meepGray-400">CMD+K</div>
+            )}
           </Button>
         </PopoverTrigger>
+
+        {selectedBoundary && (
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setSelectedBoundary(null)
+              setValue('')
+            }}
+            className="text-xs font-normal flex items-center gap-1 bg-meepGray-600 px-2 py-1 text-red-200 hover:bg-white hover:text-red-400"
+          >
+            <X className="w-3 h-3" />
+            CLEAR
+            <div className="text-meepGray-400">| CMD+BACKSPACE</div>
+          </Button>
+        )}
       </div>
 
       <PopoverContent className="w-full  p-0" align="start">
@@ -102,7 +156,7 @@ export default function ReportDashboardConsSelector({
           <CommandList>
             <CommandEmpty>No constituency found.</CommandEmpty>
             <CommandGroup>
-              {getMatchingConstituencies(searchQuery).map((constituency) => (
+              {getMatchingConstituencies(searchQuery)?.map((constituency) => (
                 <CommandItem
                   key={constituency.gssArea?.id}
                   value={constituency.gssArea?.name}
@@ -111,7 +165,9 @@ export default function ReportDashboardConsSelector({
                     if (selectedId) {
                       setValue(selectedId)
                       setOpen(false)
-                      setSelectedBoundary(getGSSfromGSSAreaID(selectedId))
+                      setSelectedBoundary(
+                        getGSSfromGSSAreaID(selectedId) || null
+                      )
                     }
                   }}
                 >
@@ -124,6 +180,9 @@ export default function ReportDashboardConsSelector({
                     )}
                   />
                   {constituency.gssArea?.name}
+                  <span className="text-xs text-brandBlue ml-2">
+                    {constituency.count > 0 && ` ${constituency.count}`}
+                  </span>
                 </CommandItem>
               ))}
             </CommandGroup>
@@ -133,3 +192,56 @@ export default function ReportDashboardConsSelector({
     </Popover>
   )
 }
+
+// Same query from TopConstituencies
+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
+          mp: person(filters: { personType: "MP" }) {
+            id
+            name
+            photo {
+              url
+            }
+            party: personDatum(filters: { dataType_Name: "party" }) {
+              name: data
+            }
+          }
+          lastElection {
+            stats {
+              date
+              majority
+              electorate
+              firstPartyResult {
+                party
+                shade
+                votes
+              }
+              secondPartyResult {
+                party
+                shade
+                votes
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx
index 2395d8c51..93cb6af61 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx
@@ -1,3 +1,75 @@
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
+
+const dummyData = [
+  {
+    name: 'John Doe',
+    postcode: 'AB12 3CD',
+    email: 'john.doe@example.com',
+    phone: '07777 777777',
+    dateSource: 'Source',
+    dateCreated: '2024-01-01',
+    dateUpdated: '2024-01-01',
+    notes: 'Notes',
+  },
+  {
+    name: 'Jane Doe',
+    postcode: 'AB12 3CD',
+    email: 'jane.doe@example.com',
+    phone: '07777 777777',
+    dateSource: 'Source',
+    dateCreated: '2024-01-01',
+    dateUpdated: '2024-01-01',
+    notes: 'Notes',
+  },
+  {
+    name: 'John Doe',
+    postcode: 'AB12 3CD',
+    email: 'john.doe@example.com',
+    phone: '07777 777777',
+    dateSource: 'Source',
+    dateCreated: '2024-01-01',
+    dateUpdated: '2024-01-01',
+    notes: 'Notes',
+  },
+  {
+    name: 'John Doe',
+    postcode: 'AB12 3CD',
+    email: 'john.doe@example.com',
+    phone: '07777 777777',
+    dateSource: 'Source',
+    dateCreated: '2024-01-01',
+    dateUpdated: '2024-01-01',
+    notes: 'Notes',
+  },
+]
+
 export default function ReportDashboardMemberList() {
-  return <div>ReportDashboardMemberList</div>
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>Member</TableCell>
+          <TableCell>Postcode</TableCell>
+          <TableCell>Email</TableCell>
+          <TableCell>Phone</TableCell>
+          <TableCell>DateSource</TableCell>
+          <TableCell>DateCreated</TableCell>
+          <TableCell>DateUpdated</TableCell>
+          <TableCell>Notes</TableCell>
+        </TableRow>
+        {dummyData.map((item, index) => (
+          <TableRow key={index}>
+            <TableCell>{item.name}</TableCell>
+            <TableCell>{item.postcode}</TableCell>
+            <TableCell>{item.email}</TableCell>
+            <TableCell>{item.phone}</TableCell>
+            <TableCell>{item.dateSource}</TableCell>
+            <TableCell>{item.dateCreated}</TableCell>
+            <TableCell>{item.dateUpdated}</TableCell>
+            <TableCell>{item.notes}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
 }
diff --git a/nextjs/src/app/reports/[id]/page.tsx b/nextjs/src/app/reports/[id]/page.tsx
index 357aec99d..63ec58a21 100644
--- a/nextjs/src/app/reports/[id]/page.tsx
+++ b/nextjs/src/app/reports/[id]/page.tsx
@@ -15,11 +15,9 @@ import { currentOrganisationIdAtom } from '@/lib/organisation'
 
 import { SidebarProvider } from '@/components/ui/sidebar'
 import { merge } from 'lodash'
-import ReportDisplaySettings from './(components)/ReportDisplaySettings'
 import ReportNavbar from './(components)/ReportNavbar'
 import ReportPage from './(components)/ReportPage'
 import ReportProvider from './(components)/ReportProvider'
-import { ReportSidebarLeft } from './(components)/ReportSidebarLeft'
 import { GET_MAP_REPORT } from './gql_queries'
 import { getPoliticalTilesetsByCountry } from './politicalTilesets'
 import { defaultReportConfig, MapReportExtended } from './reportContext'
@@ -71,8 +69,6 @@ export default function Page({ params: { id } }: { params: Params }) {
             }
           >
             <ReportNavbar />
-            <ReportSidebarLeft />
-            <ReportDisplaySettings />
             <ReportPage />
           </SidebarProvider>
         </ReportProvider>
diff --git a/nextjs/src/components/LocalisedMap.tsx b/nextjs/src/components/LocalisedMap.tsx
index 1bd4a5617..4224c613a 100644
--- a/nextjs/src/components/LocalisedMap.tsx
+++ b/nextjs/src/components/LocalisedMap.tsx
@@ -1,8 +1,8 @@
 import { BACKEND_URL } from '@/env'
 import { authenticationHeaders } from '@/lib/auth'
 import { RequestTransformFunction } from 'mapbox-gl'
-import React from 'react'
-import Map from 'react-map-gl'
+import React, { forwardRef } from 'react'
+import Map, { MapRef } from 'react-map-gl'
 
 interface LocalisedMapProps {
   children?: React.ReactNode
@@ -11,7 +11,7 @@ interface LocalisedMapProps {
   mapKey?: string
 }
 
-const INITIAL_VIEW_STATES = {
+export const INITIAL_VIEW_STATES = {
   uk: {
     longitude: -2.296605,
     latitude: 53.593349,
@@ -19,30 +19,31 @@ const INITIAL_VIEW_STATES = {
   },
 }
 
-const LocalisedMap: React.FC<LocalisedMapProps> = ({
-  children,
-  showStreetDetails,
-  initViewCountry = 'uk',
-  mapKey,
-}) => {
-  return (
-    <Map
-      key={mapKey || Math.random().toString()}
-      initialViewState={{
-        ...INITIAL_VIEW_STATES[initViewCountry],
-      }}
-      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
-      mapStyle={
-        showStreetDetails
-          ? 'mapbox://styles/commonknowledge/clubx087l014y01mj1bv63yg8'
-          : `mapbox://styles/commonknowledge/cm4cjnvff01mx01sdcmpbfuz5${process.env.NODE_ENV !== 'production' ? '/draft' : ''}`
-      }
-      transformRequest={mapboxTransformRequest}
-    >
-      {children}
-    </Map>
-  )
-}
+const LocalisedMap = forwardRef<MapRef, LocalisedMapProps>(
+  ({ children, showStreetDetails, initViewCountry = 'uk', mapKey }, ref) => {
+    return (
+      <div style={{ width: '100%', height: '100%' }}>
+        <Map
+          ref={ref}
+          key={mapKey || Math.random().toString()}
+          style={{ position: 'relative', width: '100%', height: '100%' }}
+          initialViewState={{
+            ...INITIAL_VIEW_STATES[initViewCountry],
+          }}
+          mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
+          mapStyle={
+            showStreetDetails
+              ? 'mapbox://styles/commonknowledge/clubx087l014y01mj1bv63yg8'
+              : `mapbox://styles/commonknowledge/cm4cjnvff01mx01sdcmpbfuz5${process.env.NODE_ENV !== 'production' ? '/draft' : ''}`
+          }
+          transformRequest={mapboxTransformRequest}
+        >
+          {children}
+        </Map>
+      </div>
+    )
+  }
+)
 
 export default LocalisedMap
 
diff --git a/nextjs/src/components/ui/resizable.tsx b/nextjs/src/components/ui/resizable.tsx
new file mode 100644
index 000000000..f4bc5586b
--- /dev/null
+++ b/nextjs/src/components/ui/resizable.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

From d0aab5027b72bb861b7c8fe2453a4ae2b0b1a7fe Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Sat, 21 Dec 2024 21:20:55 +0000
Subject: [PATCH 16/26] Linting fix

---
 nextjs/src/components/LocalisedMap.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/nextjs/src/components/LocalisedMap.tsx b/nextjs/src/components/LocalisedMap.tsx
index 4224c613a..0a1633a75 100644
--- a/nextjs/src/components/LocalisedMap.tsx
+++ b/nextjs/src/components/LocalisedMap.tsx
@@ -45,6 +45,8 @@ const LocalisedMap = forwardRef<MapRef, LocalisedMapProps>(
   }
 )
 
+LocalisedMap.displayName = 'LocalisedMap'
+
 export default LocalisedMap
 
 const mapboxTransformRequest: RequestTransformFunction = (url) => {

From 503645c78bc85bd21ef546c7dd0cd47e86d45423 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Sat, 21 Dec 2024 21:52:17 +0000
Subject: [PATCH 17/26] dashboard responsivity

---
 .../app/reports/[id]/(components)/ReportSidebarLeft.tsx    | 2 +-
 nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx  | 4 ++--
 .../src/app/reports/[id]/dashboard/ReportDashboardList.tsx | 7 +++++--
 nextjs/src/components/ChartCard.tsx                        | 2 +-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx b/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
index fcce0ef0e..221fa20ad 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
@@ -18,7 +18,7 @@ export const TabTriggerClasses = {
   tabsList:
     'w-full justify-start text-white rounded-none px-4 border border-b-meepGray-800 pt-4 pb-0 h-fit flex gap-4',
   tabsTrigger:
-    'pb-2 bg-transparent px-0 data-[state=active]:bg-transparent data-[state=active]:text-white data-[state=active]:border-b border-white rounded-none',
+    'pb-2 bg-transparent px-0 data-[state=active]:bg-transparent text-meepGray-200 data-[state=active]:text-white data-[state=active]:border-b border-white rounded-none',
 }
 
 export function ReportSidebarLeft() {
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
index 21493c72b..b871b692d 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -86,7 +86,7 @@ export default function ReportDashboard() {
   }
 
   return (
-    <main className="flex flex-col gap-4 w-full  h-[calc(100vh-48px)] overflow-y-auto">
+    <main className="flex flex-col gap-4 w-full  h-[calc(100vh-48px)] overflow-y-auto z-30">
       <Tabs defaultValue="overview" className="col-span-4">
         <TabsList className={TabTriggerClasses.tabsList}>
           {dashboardTabItems.map((item) => (
@@ -104,7 +104,7 @@ export default function ReportDashboard() {
         </TabsList>
         <div className="p-4">
           <TabsContent value="overview">
-            <div className="grid sm:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-4 w-full">
+            <div className="flex flex-wrap gap-4 w-full">
               {constituencies && !selectedBoundary && (
                 <>
                   <ReportDashboardMemberCount constituencies={constituencies} />
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
index 43017ce2c..2f9617781 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
@@ -41,8 +41,11 @@ export default function ReportDashboardList({
       <CardHeader>
         <CardTitle>Key Constituencies</CardTitle>
       </CardHeader>
-      <CardContent className="h-[400px] overflow-y-auto">
-        <ChartContainer config={chartConfig} className={`h-[1000px] w-full`}>
+      <CardContent className="max-h-[400px] max-w-[600px] overflow-y-auto">
+        <ChartContainer
+          config={chartConfig}
+          className={`h-[500px] w-full overflow-y-auto`}
+        >
           <BarChart
             accessibilityLayer
             data={chartData}
diff --git a/nextjs/src/components/ChartCard.tsx b/nextjs/src/components/ChartCard.tsx
index a399e3786..f2adac64a 100644
--- a/nextjs/src/components/ChartCard.tsx
+++ b/nextjs/src/components/ChartCard.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      'rounded-lg border bg-card text-card-foreground shadow-sm flex-1 min-w-[300px]',
       className
     )}
     {...props}

From 03c69a0924a392ae511ec3e49d5720dc411404a6 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:44:06 +0000
Subject: [PATCH 18/26] Styling changes

---
 nextjs/src/app/reports/[id]/(components)/ReportPage.tsx      | 4 ++--
 .../src/app/reports/[id]/(components)/ReportSidebarLeft.tsx  | 4 ++--
 .../reports/[id]/(components)/reportsConstituencyItem.tsx    | 5 ++++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/(components)/ReportPage.tsx b/nextjs/src/app/reports/[id]/(components)/ReportPage.tsx
index d7d169777..d7f0285f2 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportPage.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportPage.tsx
@@ -47,7 +47,7 @@ export default function ReportPage() {
           onLayout={handlePanelResize}
         >
           <ReportSidebarLeft />
-          <ResizablePanel>
+          <ResizablePanel className="min-w-[300px]">
             <div className="relative w-full h-full transition-all duration-300">
               <Tabs defaultValue="map" className="w-full h-full ">
                 <TabsList className="absolute top-[15px] left-[15px] z-10 ">
@@ -91,7 +91,7 @@ export default function ReportPage() {
             </div>
           </ResizablePanel>
           <ResizableHandle withHandle={true} />
-          <ResizablePanel>
+          <ResizablePanel className="min-w-[300px]">
             <ReportDashboard />
           </ResizablePanel>
         </ResizablePanelGroup>
diff --git a/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx b/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
index 221fa20ad..01f1d3740 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
@@ -16,9 +16,9 @@ import { useReport } from './ReportProvider'
 
 export const TabTriggerClasses = {
   tabsList:
-    'w-full justify-start text-white rounded-none px-4 border border-b-meepGray-800 pt-4 pb-0 h-fit flex gap-4',
+    'w-full justify-start text-white rounded-none px-4 border border-b-meepGray-800 pt-4 pb-0 h-fit flex gap-6 overflow-x-auto scroll',
   tabsTrigger:
-    'pb-2 bg-transparent px-0 data-[state=active]:bg-transparent text-meepGray-200 data-[state=active]:text-white data-[state=active]:border-b border-white rounded-none',
+    'pb-2 bg-transparent px-0 data-[state=active]:bg-transparent  text-meepGray-400 border-b border-b-meepGray-600 data-[state=active]:text-white data-[state=active]:border-b-meepGray-200 hover:border-b hover:border-meepGray-400 rounded-none',
 }
 
 export function ReportSidebarLeft() {
diff --git a/nextjs/src/app/reports/[id]/(components)/reportsConstituencyItem.tsx b/nextjs/src/app/reports/[id]/(components)/reportsConstituencyItem.tsx
index c623cdf35..f4f65f837 100644
--- a/nextjs/src/app/reports/[id]/(components)/reportsConstituencyItem.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/reportsConstituencyItem.tsx
@@ -77,7 +77,10 @@ export const ConstituencyElectionDeepDive = ({
     .filter((l) => !!l.source.importedDataCountForConstituency?.count)
 
   return (
-    <Card key={data.constituency.id} className="divide-y space-y-4">
+    <Card
+      key={data.constituency.id}
+      className="divide-y space-y-4 w-full max-w-full"
+    >
       <CardHeader>
         <CardTitle>{data.constituency.name}</CardTitle>
         <CardDescription>

From 1b0253c26780a4753bc73777fd69bd9dea88a1fe Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:44:15 +0000
Subject: [PATCH 19/26] Memberlist

---
 .../dashboard/ReportDashboardMemberList.tsx   |  75 -----------
 .../reports/[id]/dashboard/ReportMembers.tsx  | 117 ++++++++++++++++++
 2 files changed, 117 insertions(+), 75 deletions(-)
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportMembers.tsx

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx
index 93cb6af61..e69de29bb 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardMemberList.tsx
@@ -1,75 +0,0 @@
-import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
-
-const dummyData = [
-  {
-    name: 'John Doe',
-    postcode: 'AB12 3CD',
-    email: 'john.doe@example.com',
-    phone: '07777 777777',
-    dateSource: 'Source',
-    dateCreated: '2024-01-01',
-    dateUpdated: '2024-01-01',
-    notes: 'Notes',
-  },
-  {
-    name: 'Jane Doe',
-    postcode: 'AB12 3CD',
-    email: 'jane.doe@example.com',
-    phone: '07777 777777',
-    dateSource: 'Source',
-    dateCreated: '2024-01-01',
-    dateUpdated: '2024-01-01',
-    notes: 'Notes',
-  },
-  {
-    name: 'John Doe',
-    postcode: 'AB12 3CD',
-    email: 'john.doe@example.com',
-    phone: '07777 777777',
-    dateSource: 'Source',
-    dateCreated: '2024-01-01',
-    dateUpdated: '2024-01-01',
-    notes: 'Notes',
-  },
-  {
-    name: 'John Doe',
-    postcode: 'AB12 3CD',
-    email: 'john.doe@example.com',
-    phone: '07777 777777',
-    dateSource: 'Source',
-    dateCreated: '2024-01-01',
-    dateUpdated: '2024-01-01',
-    notes: 'Notes',
-  },
-]
-
-export default function ReportDashboardMemberList() {
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>Member</TableCell>
-          <TableCell>Postcode</TableCell>
-          <TableCell>Email</TableCell>
-          <TableCell>Phone</TableCell>
-          <TableCell>DateSource</TableCell>
-          <TableCell>DateCreated</TableCell>
-          <TableCell>DateUpdated</TableCell>
-          <TableCell>Notes</TableCell>
-        </TableRow>
-        {dummyData.map((item, index) => (
-          <TableRow key={index}>
-            <TableCell>{item.name}</TableCell>
-            <TableCell>{item.postcode}</TableCell>
-            <TableCell>{item.email}</TableCell>
-            <TableCell>{item.phone}</TableCell>
-            <TableCell>{item.dateSource}</TableCell>
-            <TableCell>{item.dateCreated}</TableCell>
-            <TableCell>{item.dateUpdated}</TableCell>
-            <TableCell>{item.notes}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportMembers.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportMembers.tsx
new file mode 100644
index 000000000..20cdc05b0
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportMembers.tsx
@@ -0,0 +1,117 @@
+import { GenericData } from '@/__generated__/graphql'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { layerIdColour, selectedSourceMarkerAtom } from '@/lib/map'
+import { gql, useApolloClient } from '@apollo/client'
+import { useAtom } from 'jotai'
+import useSWR from 'swr'
+import { useReport } from '../(components)/ReportProvider'
+export default function ReportDashboardMemberList() {
+  const {
+    report: { layers },
+  } = useReport()
+
+  const sourceIds = layers.map((layer) => layer.source.id)
+  const {
+    data: records,
+    isLoading,
+    error,
+  } = useGenericDataByExternalDataSources(sourceIds)
+
+  const [selectedSourceMarker, setSelectedSourceMarker] = useAtom(
+    selectedSourceMarkerAtom
+  )
+
+  return (
+    <div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>ID</TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Postcode</TableHead>
+            <TableHead>Date Source</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Long/Lat</TableHead>
+            <TableHead>Date</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {records?.map((member) => (
+            <TableRow
+              key={member.id}
+              className="relative font-mono font-normal text-xs cursor-pointer hover:bg-meepGray-600"
+            >
+              <TableCell className="text-meepGray-400">{member.id}</TableCell>
+              <TableCell>{member.fullName}</TableCell>
+              <TableCell>{member.postcode}</TableCell>
+
+              <TableCell className="flex items-center gap-2">
+                <div
+                  style={{
+                    backgroundColor: member.sourceColour,
+                  }}
+                  className="absolute left-0 top-0 w-2 h-full"
+                />
+                <div style={{ color: member.sourceColour }}>
+                  {
+                    layers.find((layer) => layer.source.id === member.sourceId)
+                      ?.source.name
+                  }
+                </div>
+              </TableCell>
+              <TableCell>{member.email}</TableCell>
+              <TableCell>{member.postcodeData?.longitude}</TableCell>
+              <TableCell>{member.date}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+function useGenericDataByExternalDataSources(sourceIds: string[]) {
+  const client = useApolloClient()
+  return useSWR(sourceIds, async (sourceIds: string[]) => {
+    let array: GenericData[] = []
+    for (const sourceId of sourceIds) {
+      const { data } = await client.query({
+        query: gql`
+          query ReportMembers($sourceId: String!) {
+            genericDataByExternalDataSource(externalDataSourceId: $sourceId) {
+              id
+              data
+              fullName
+              email
+              postcode
+
+              publicUrl
+              date
+            }
+          }
+        `,
+        variables: {
+          sourceId,
+        },
+      })
+      if (data?.genericDataByExternalDataSource) {
+        array = [
+          ...array,
+          ...data?.genericDataByExternalDataSource.map((d) => ({
+            ...d,
+            sourceId,
+            sourceColour: layerIdColour(sourceId),
+          })),
+        ]
+      }
+    }
+    return array
+  })
+}

From e4fb78dc27597f6fe988b3b089858cdb61f999bd Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:44:31 +0000
Subject: [PATCH 20/26] SWR import

---
 nextjs/package-lock.json | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/nextjs/package-lock.json b/nextjs/package-lock.json
index cc661ca42..76e313446 100644
--- a/nextjs/package-lock.json
+++ b/nextjs/package-lock.json
@@ -87,6 +87,7 @@
         "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",
@@ -13672,6 +13673,14 @@
       "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
       "license": "ISC"
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-indent": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
@@ -26765,6 +26774,18 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/swr": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.0.tgz",
+      "integrity": "sha512-NyZ76wA4yElZWBHzSgEJc28a0u6QZvhb6w0azeL2k7+Q1gAzVK+IqQYXhVOC/mzi+HZIozrZvBVeSeOZNR2bqA==",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",

From 9c6490b590adadbe1c5e13802381221b15b18a35 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:44:36 +0000
Subject: [PATCH 21/26] Update package.json

---
 nextjs/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nextjs/package.json b/nextjs/package.json
index 8c1ad6939..126f79957 100644
--- a/nextjs/package.json
+++ b/nextjs/package.json
@@ -103,6 +103,7 @@
     "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",

From d01a1ea4633906fc23b0d3b18e05a3658750a1b8 Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:44:43 +0000
Subject: [PATCH 22/26] Fly to marker

---
 .../app/reports/[id]/(components)/MembersListPointMarkers.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx b/nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx
index 1d4d9553d..06d125da3 100644
--- a/nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx
@@ -45,6 +45,10 @@ export function MembersListPointMarkers({
         const feature = event.features?.[0]
         if (feature?.properties?.id) {
           setSelectedSourceMarker(feature)
+          map.flyTo({
+            center: feature.geometry.coordinates,
+            zoom: 16,
+          })
         }
       }
 

From 9f9e13a69aba11f2ebe782f423cae8e16e306c8f Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:44:54 +0000
Subject: [PATCH 23/26] Create ReportDashboardChat.tsx

---
 .../[id]/dashboard/ReportDashboardChat.tsx     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 nextjs/src/app/reports/[id]/dashboard/ReportDashboardChat.tsx

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardChat.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardChat.tsx
new file mode 100644
index 000000000..47886631e
--- /dev/null
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardChat.tsx
@@ -0,0 +1,18 @@
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import { MessageSquareIcon } from 'lucide-react'
+
+export default function ReportDashboardChat() {
+  return (
+    <div className="p-4 px-8 items-center justify-center flex flex-col gap-4 w-full h-[calc(100vh-120px)]">
+      <div className="flex items-center gap-2">
+        <MessageSquareIcon className="w-6 h-6 text-brandBlue" />
+        <h1 className="text-lg">Ask AI about your Data</h1>
+      </div>
+      <div className="w-full flex flex-col gap-2">
+        <Textarea placeholder="Ask a question" />
+        <Button>Send</Button>
+      </div>
+    </div>
+  )
+}

From f2fa289080991f7c0597330e8d1381517ea9c20f Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:44:58 +0000
Subject: [PATCH 24/26] Update ReportDashboard.tsx

---
 .../[id]/dashboard/ReportDashboard.tsx        | 79 +++++++++++--------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
index b871b692d..72217089f 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -5,16 +5,23 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { gql, useQuery } from '@apollo/client'
 import { useAtom } from 'jotai'
-import { CalendarIcon, FileIcon, MapPinIcon, UsersIcon } from 'lucide-react'
+import {
+  CalendarIcon,
+  FileIcon,
+  MapPinIcon,
+  MessageSquareIcon,
+  UsersIcon,
+} from 'lucide-react'
 import { useReport } from '../(components)/ReportProvider'
 import { TabTriggerClasses } from '../(components)/ReportSidebarLeft'
 import { ConstituencyElectionDeepDive } from '../(components)/reportsConstituencyItem'
 import { selectedBoundaryAtom } from '../useSelectBoundary'
+import ReportDashboardChat from './ReportDashboardChat'
 import ReportDashboardList from './ReportDashboardList'
 import ReportDashboardMPs from './ReportDashboardMPs'
 import ReportDashboardMemberCount from './ReportDashboardMemberCount'
-import ReportDashboardMemberList from './ReportDashboardMemberList'
 import ReportDashboardMembersOverTime from './ReportDashboardMembersOverTime'
+import ReportMembers from './ReportMembers'
 
 const IconClasses = 'w-4 h-4 stroke-meepGray-400 stroke-1 mr-1'
 
@@ -49,6 +56,11 @@ const dashboardTabItems = [
     value: 'articles',
     icon: <FileIcon className={IconClasses} />,
   },
+  {
+    label: 'Chat',
+    value: 'chat',
+    icon: <MessageSquareIcon className={IconClasses} />,
+  },
 ]
 
 export default function ReportDashboard() {
@@ -87,8 +99,10 @@ export default function ReportDashboard() {
 
   return (
     <main className="flex flex-col gap-4 w-full  h-[calc(100vh-48px)] overflow-y-auto z-30">
-      <Tabs defaultValue="overview" className="col-span-4">
-        <TabsList className={TabTriggerClasses.tabsList}>
+      <Tabs defaultValue="overview" className="col-span-4 h-full">
+        <TabsList
+          className={`${TabTriggerClasses.tabsList} bg-meepGray-800 border-0`}
+        >
           {dashboardTabItems.map((item) => (
             <TabsTrigger
               key={item.value}
@@ -102,35 +116,34 @@ export default function ReportDashboard() {
             </TabsTrigger>
           ))}
         </TabsList>
-        <div className="p-4">
-          <TabsContent value="overview">
-            <div className="flex flex-wrap gap-4 w-full">
-              {constituencies && !selectedBoundary && (
-                <>
-                  <ReportDashboardMemberCount constituencies={constituencies} />
-                  <ReportDashboardList constituencies={constituencies} />
-                  <ReportDashboardMembersOverTime />
-                  <ReportDashboardMPs constituencies={constituencies} />
-                </>
-              )}
-              {selectedBoundary && analyticalAreaType && (
-                <div className="col-span-full">
-                  <ConstituencyElectionDeepDive
-                    gss={selectedBoundary}
-                    analyticalAreaType={analyticalAreaType}
-                  />
-                </div>
-              )}
-            </div>
-          </TabsContent>
-          <TabsContent value="members">
-            <ReportDashboardMemberList />
-          </TabsContent>
-          <TabsContent value="locations">Foodbanks Data goes here</TabsContent>
-          <TabsContent value="groups">Groups Data goes here</TabsContent>
-          <TabsContent value="events">Events Data goes here</TabsContent>
-          <TabsContent value="articles">Articles Data goes here</TabsContent>
-        </div>
+        <TabsContent value="overview" className="mt-0 p-4">
+          <div className="flex flex-wrap gap-4 w-full">
+            {constituencies && !selectedBoundary && (
+              <>
+                <ReportDashboardMemberCount constituencies={constituencies} />
+                <ReportDashboardList constituencies={constituencies} />
+                <ReportDashboardMembersOverTime />
+                <ReportDashboardMPs constituencies={constituencies} />
+              </>
+            )}
+            {selectedBoundary && analyticalAreaType && (
+              <ConstituencyElectionDeepDive
+                gss={selectedBoundary}
+                analyticalAreaType={analyticalAreaType}
+              />
+            )}
+          </div>
+        </TabsContent>
+        <TabsContent value="members">
+          <ReportMembers />
+        </TabsContent>
+        <TabsContent value="locations">Foodbanks Data goes here</TabsContent>
+        <TabsContent value="groups">Groups Data goes here</TabsContent>
+        <TabsContent value="events">Events Data goes here</TabsContent>
+        <TabsContent value="articles">Articles Data goes here</TabsContent>
+        <TabsContent value="chat">
+          <ReportDashboardChat />
+        </TabsContent>
       </Tabs>
     </main>
   )

From 88d873b98cb8f29d4b63bfa9e9cd1a78ba0b038c Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:45:01 +0000
Subject: [PATCH 25/26] Update ReportHexMap.tsx

---
 nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx b/nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx
index 3a2f98f78..4ef39e41f 100644
--- a/nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/ReportHexMap.tsx
@@ -138,14 +138,14 @@ export default function ReportDashboardHexMap() {
                 r={hex.r * -1}
                 s={hex.q - hex.r}
                 style={{ fill: fillColor }}
-                className={`transition-colors duration-200 hover:brightness-125
-                  ${selectedBoundary === id ? 'stroke-2 stroke-pink-700' : ''}
+                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>

From 2a0adc590a7a725f0d0e5427667da3701a02fafb Mon Sep 17 00:00:00 2001
From: Arbyhisenaj <41119392+Arbyhisenaj@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:52:19 +0000
Subject: [PATCH 26/26] Linting fix

---
 .../(components)/MembersListPointMarkers.tsx    | 17 +++++++++++------
 .../reports/[id]/dashboard/ReportMembers.tsx    | 12 +++++++++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx b/nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx
index 06d125da3..e00e373be 100644
--- a/nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx
+++ b/nextjs/src/app/reports/[id]/(components)/MembersListPointMarkers.tsx
@@ -2,6 +2,7 @@
 
 import { BACKEND_URL } from '@/env'
 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,12 +44,16 @@ export function MembersListPointMarkers({
 
       const handleClick = (event: MapMouseEvent) => {
         const feature = event.features?.[0]
-        if (feature?.properties?.id) {
-          setSelectedSourceMarker(feature)
-          map.flyTo({
-            center: feature.geometry.coordinates,
-            zoom: 16,
-          })
+        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,
+            })
+          }
         }
       }
 
diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportMembers.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportMembers.tsx
index 20cdc05b0..ac79faded 100644
--- a/nextjs/src/app/reports/[id]/dashboard/ReportMembers.tsx
+++ b/nextjs/src/app/reports/[id]/dashboard/ReportMembers.tsx
@@ -12,6 +12,12 @@ import { gql, useApolloClient } from '@apollo/client'
 import { useAtom } from 'jotai'
 import useSWR from 'swr'
 import { useReport } from '../(components)/ReportProvider'
+
+interface ExtendedGenericData extends GenericData {
+  sourceColour: string
+  sourceId: string
+}
+
 export default function ReportDashboardMemberList() {
   const {
     report: { layers },
@@ -43,7 +49,7 @@ export default function ReportDashboardMemberList() {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {records?.map((member) => (
+          {records?.map((member: ExtendedGenericData) => (
             <TableRow
               key={member.id}
               className="relative font-mono font-normal text-xs cursor-pointer hover:bg-meepGray-600"
@@ -80,7 +86,7 @@ export default function ReportDashboardMemberList() {
 function useGenericDataByExternalDataSources(sourceIds: string[]) {
   const client = useApolloClient()
   return useSWR(sourceIds, async (sourceIds: string[]) => {
-    let array: GenericData[] = []
+    let array: ExtendedGenericData[] = []
     for (const sourceId of sourceIds) {
       const { data } = await client.query({
         query: gql`
@@ -104,7 +110,7 @@ function useGenericDataByExternalDataSources(sourceIds: string[]) {
       if (data?.genericDataByExternalDataSource) {
         array = [
           ...array,
-          ...data?.genericDataByExternalDataSource.map((d) => ({
+          ...data?.genericDataByExternalDataSource.map((d: GenericData) => ({
             ...d,
             sourceId,
             sourceColour: layerIdColour(sourceId),