{children}
\n \n );\n};\n\nexport default EAControl;\n","import React, { useState, useEffect } from \"react\";\nimport { useLeaflet } from \"react-leaflet\";\nimport { Button, ButtonGroup } from \"reactstrap\";\n\nconst EAZoomControl = ({ size, color, cssClasses }) => {\n const { map } = useLeaflet();\n const [zoomLevel, setzoomLevel] = useState(map.getZoom());\n\n map.on(\"zoomend\", function () {\n setzoomLevel(map.getZoom());\n });\n useEffect(() => {\n map.setZoom(zoomLevel, { animate: false });\n }, [zoomLevel, map]);\n\n const setZoom = (value) => {\n setzoomLevel(map.getZoom() + value);\n };\n\n return (\n \n \n
\n\n setZoom(1)}\n >\n \n \n setZoom(-1)}\n >\n \n \n \n
\n );\n};\n\nexport default EAZoomControl;\n","import EAPreloaderScreen from \"./EAPreloaderScreen\";\n\nexport default EAPreloaderScreen;\n","import React from \"react\";\nimport \"./EAPreloaderScreen.css\";\n\nconst EAPreloaderScreen = ({ show }) => {\n return (\n show && (\n <>\n \n
\n {children}\n
\n \n );\n};\n\nexport default Sidebar;\n","import axios, { get } from \"axios\";\nimport { setupCache } from \"axios-cache-adapter\";\n\nconst {\n REACT_APP_PLANNED_REINFORCEMENT\n} = process.env;\n\nconst {\n REACT_APP_INTEREST_IN_CAPACITY\n} = process.env;\n\n// Create `axios-cache-adapter` instance\nconst cache = setupCache({\n maxAge: 15 * 60 * 1000,\n exclude: {\n // Store responses from requests with query parameters in cache\n query: false,\n },\n});\n\n// Create `axios` instance passing the newly created `cache.adapter`\nconst api = axios.create({\n adapter: cache.adapter,\n});\n\nconst getBounds = (bounds) => {\n return {\n southLat: bounds.getSouth(),\n westLng: bounds.getWest(),\n northLat: bounds.getNorth(),\n eastLng: bounds.getEast(),\n };\n};\n\nconst getParams = (params) => {\n let _params = \"\";\n Object.entries(params).forEach(([key, value]) => {\n _params += `${key}:${value};`;\n });\n return _params;\n}\n\nexport const getGeoJson2 = (layer) => {\n return get(`${layer.url}`)\n .then((result) => result.data)\n .catch((error) => console.log(error));\n};\n\nexport const getGeoJson = (layer) => {\n // Send a GET request to some REST api\n return api({\n url: `${layer.url}`,\n method: \"get\",\n })\n .then(async (response) => {\n // Do something fantastic with response.data \\o/\n console.log(\"Request response:\", response);\n // Interacting with the store, see `localForage` API.\n const length = await cache.store.length();\n console.log(\"Cache store length:\", length);\n return response.data;\n })\n .catch((error) => console.log(error));\n};\n\nexport const getGeoJsonWithBounds = (bounds, layer, viewParams = {}) => {\n \n let url = layer.url;\n const paramKeys = Object.keys(viewParams);\n \n if (paramKeys.length > 0) {\n const params = paramKeys.map(k => `${k}:${viewParams[k]}`).join(';');\n url = `${layer.url}&viewparams=${params}`;\n }\n \n const bb = getBounds(bounds);\n\n url = layer.format\n ? `${url}&bbox=${bb.southLat},${bb.westLng},${bb.northLat},${bb.eastLng}`\n : `${url}&bbox=${bb.westLng},${bb.southLat},${bb.eastLng},${bb.northLat}`;\n\n return get(url)\n .then((result) => result.data)\n .catch((error) => console.log(error));\n};\n\nexport const getGeoJsonWithParams = (params, layer) => {\n const _params = getParams(params);\n\n return get(`${layer.url}&viewparams=${_params}`)\n .then((result) => result.data)\n .catch((error) => console.log(error));\n};\n\nexport const getGeoJsonWithBoundsAndParams = (bounds, params, layer) => {\n const bb = getBounds(bounds);\n const _params = getParams(params);\n\n const url = layer.format\n ? `${layer.url}&bbox=${bb.southLat},${bb.westLng},${bb.northLat},${bb.eastLng}&viewparams=${_params}`\n : `${layer.url}&bbox=${bb.westLng},${bb.southLat},${bb.eastLng},${bb.northLat}&viewparams=${_params}`;\n\n return get(url)\n .then((result) => result.data)\n .catch((error) => console.log(error));\n};\n\nexport const getPlannedReinforcement = (bounds) => {\n const bb = getBounds(bounds);\n const url = `${REACT_APP_PLANNED_REINFORCEMENT}&bbox=${bb.westLng},${bb.southLat},${bb.eastLng},${bb.northLat}`;\n\n return get(url).then(r => r.data);\n}\n\nexport const getInterestInCapacity = (bounds) => {\n const bb = getBounds(bounds);\n const url = `${REACT_APP_INTEREST_IN_CAPACITY}&bbox=${bb.westLng},${bb.southLat},${bb.eastLng},${bb.northLat}`;\n\n return get(url).then(r => r.data);\n}\n\n// &viewparams=scenario:1;year:2025\n","import L from \"leaflet\";\n\nconst getCoords = (feature, nestingLevel) => {\n return L.GeoJSON.coordsToLatLngs(\n feature.geometry.coordinates,\n nestingLevel,\n L.GeoJSON.coordsToLatLng\n );\n};\n\nconst getCoord = (feature) => {\n return L.GeoJSON.coordsToLatLng(\n feature.geometry.coordinates,\n L.GeoJSON.coordsToLatLng\n );\n};\n\nexport const reverseCoords = (featureCollection) => {\n featureCollection.features.forEach((feature) => {\n const coords =\n feature.geometry.type === \"LineString\"\n ? getCoords(feature)\n : feature.geometry.type === \"Polygon\" ||\n feature.geometry.type === \"MultiPolygon\"\n ? getCoords(feature, 2)\n : getCoord(feature);\n feature.geometry.coordinates = coords;\n });\n return featureCollection;\n};\n\nexport const reverseCoordsOS = (featureCollection) => {\n featureCollection.features.forEach((feature) => {\n const coords =\n feature.geometry.type === \"LineString\"\n ? getCoords(feature, 0)\n : feature.geometry.type === \"Polygon\" ||\n feature.geometry.type === \"MultiPolygon\"\n ? getCoords(feature, 1)\n : getCoord(feature);\n feature.geometry.coordinates = coords;\n });\n return featureCollection;\n};","\nimport { configObj as config } from \"../config\";\n\nconst isInClientBounds = (clientSouth, clientWest, clientNorth, clientEast, zoomBounds) => {\n console.log(\"clientBounds: \" + clientSouth + \"-\" + clientWest + \"-\" + clientNorth + \"-\" + clientEast);\n console.log(\"zoomBounds: \" + zoomBounds.getSouth() + \"-\" + zoomBounds.getWest() + \"-\" + zoomBounds.getNorth() + \"-\" + zoomBounds.getEast());\n\n const inLat = zoomBounds.getSouth() > clientSouth && zoomBounds.getNorth() < clientNorth;\n console.log(\"inLat: \" + inLat);\n if (!inLat) return false\n\n const inLng = zoomBounds.getWest() > clientWest && zoomBounds.getEast() < clientEast;\n console.log(\"inLng: \" + inLng);\n return inLng;\n};\n\nexport const inClientBounds = (bounds) => {\n\n var cs = config.defaultSouth;\n var cw = config.defaultWest;\n var cn = config.defaultNorth;\n var ce = config.defaultEast;\n\n if (config.currentClient === \"spd\") {\n cs = config.spdSouth;\n cw = config.spdWest;\n cn = config.spdNorth;\n ce = config.spdEast;\n }\n\n if (config.currentClient === \"spm\") {\n cs = config.spmSouth;\n cw = config.spmWest;\n cn = config.spmNorth;\n ce = config.spmEast;\n }\n\n if (isInClientBounds(cs, cw, cn, ce, bounds)) {\n return true;\n }\n else {\n return false;\n }\n};","export const colors = [\n { id: 1, name: \"Blue\", value: \"blue\", color: \"#00aae4\" },\n { id: 2, name: \"Red\", value: \"red\", color: \"#e51e3d\" },\n { id: 3, name: \"Amber\", value: \"amber\", color: \"#fab721\" },\n { id: 4, name: \"Green\", value: \"green\", color: \"#1c9d5b\" },\n];\n\nexport const sizes = [\n { id: 1, name: \"Small\", value: \"small\" },\n { id: 2, name: \"Medium\", value: \"medium\" },\n { id: 3, name: \"Large\", value: \"large\" },\n];\n\nexport const icons = [\n { id: 1, icon: \"circle\", name: \"Circle\", value: \"circle\" },\n { id: 2, icon: \"triangle\", name: \"Triangle\", value: \"triangle\" },\n];\n\nexport const types = [\n { id: 1, name: \"Auto\", value: \"Auto\" },\n { id: 2, name: \"Point\", value: \"Point\" },\n { id: 3, name: \"Polyline\", value: \"Polyline\" },\n { id: 4, name: \"Polygon\", value: \"Polygon\" },\n];\n\nexport const conditions = [\n { id: 1, name: \"True\", value: true },\n { id: 2, name: \"False\", value: false },\n];\n\nexport const formats = [\n { id: 1, name: \"Normal\", value: true },\n { id: 2, name: \"ConnectMore\", value: false },\n];\n\nexport const operators = [\n { id: 1, name: \"=\", value: \"equals\" },\n { id: 2, name: \"<\", value: \"lessthan\" },\n];\n\nexport const weights = [\n { id: 1, name: 0.5, value: 0.5 },\n { id: 2, name: 1, value: 1 },\n { id: 3, name: 2, value: 2 },\n { id: 4, name: 3, value: 3 },\n { id: 5, name: 4, value: 4 },\n { id: 6, name: 5, value: 5 },\n];\n\nexport const opacities = [\n { id: 1, name: \"10%\", value: 0.1 },\n { id: 2, name: \"20%\", value: 0.2 },\n { id: 3, name: \"30%\", value: 0.3 },\n { id: 4, name: \"40%\", value: 0.4 },\n { id: 5, name: \"50%\", value: 0.5 },\n { id: 6, name: \"60%\", value: 0.6 },\n { id: 7, name: \"70%\", value: 0.7 },\n { id: 8, name: \"80%\", value: 0.8 },\n { id: 9, name: \"90%\", value: 0.9 },\n { id: 10, name: \"100%\", value: 1 },\n];\n\nexport const colorMap = {\n red: { class: \"danger\", hex: \"#e51e3d\", label: \"Poor\" },\n amber: { class: \"warning\", hex: \"#fab721\", label: \"Limited\" },\n green: { class: \"success\", hex: \"#1c9d5b\", label: \"Good\" },\n grey: { class: \"secondary\", hex: \"#adadad\", label: \"Insufficient Data\" },\n};\n\nexport const evChargingDemandLegendMap = {\n one: { \n hex: \"#BB8FCE\", \n altHex: \"#d2c8db\", \n label: \"Low\", \n icon: \"square\", \n margin: 5, \n fontSize: \"20px\", \n },\n two: { \n hex: \"#8E44AD\", \n altHex: \"#c0abcc\", \n label: \"Low-Mid\", \n icon: \"square\", \n margin: 5, \n fontSize: \"20px\", \n },\n three: { \n hex: \"#6C3483\", \n altHex: \"#b7a8c1\", \n label: \"Mid-High\", \n icon: \"square\", \n margin: 5, \n fontSize: \"20px\", \n },\n four: { \n hex: \"#4A235A\", \n altHex: \"#aca1ae\", \n label: \"High\", \n icon: \"square\", \n margin: 5, \n fontSize: \"20px\", \n },\n};\n\nexport const evChargingDemandEnRouteLegendMap = {\n one: { \n hex: \"#2471A3\", \n label: \" Very Low\", \n icon: \"circuit-legend\", \n height: \"1px\" \n },\n two: { \n hex: \"#2471A3\", \n label: \" Low\", \n icon: \"circuit-legend\", \n height: \"2px\" \n },\n three: { \n hex: \"#2471A3\", \n label: \" Medium\", \n icon: \"circuit-legend\", \n height: \"3px\" \n },\n four: { \n hex: \"#2471A3\", \n label: \" High\", \n icon: \"circuit-legend\", \n height: \"4px\" \n },\n five: { \n hex: \"#2471A3\", \n label: \" Very High\", \n icon: \"circuit-legend\", \n height: \"6px\" \n }, \n};\n\nexport const networkCapacityLegendMap = {\n substation: {\n id: 10,\n class: \"danger\",\n hex: \"#ffffff\",\n label: \"Substation\",\n icon: \"sub-legend\",\n description: \"The building which contains transformers, protection equipment, switchgear etc. when power may be transformed from one voltage level to another\",\n },\n circuit: {\n id: 20,\n class: \"light\",\n hex: \"#ffffff\",\n label: \"Circuit\",\n icon: \"underground-circuit-legend\",\n description: \"Segment of a conductor\",\n },\n red: {\n id: 30,\n class: \"danger\",\n hex: \"#e51e3d\",\n label: \"Poor\",\n icon: \"sub-circuit-legend\",\n description: \"At least one factor is close to its operational limit and so connection of new loads is highly unlikely. It may also require extensive reinforcement works or given the lack of a local connection, require an extensive amount of sole user assets to facilitate such connection. Alternative Smart Charging Connection may be suggested.\",\n },\n green: {\n id: 40,\n class: \"success\",\n hex: \"#1c9d5b\",\n label: \"Good\",\n icon: \"sub-circuit-legend\",\n description: \"All operational factors are within tolerable limits and so opportunities may exist to connect additional load without reinforcing the network (subject to detailed studies)\",\n },\n amber: {\n id: 50,\n class: \"warning\",\n hex: \"#fab721\",\n label: \"Limited\",\n icon: \"sub-circuit-legend\",\n description: \"At least one factor is nearing its operational limit and hence, network reinforcement may be required. However this can only be confirmed by detailed network analysis\",\n },\n grey: {\n id: 60,\n class: \"secondary\",\n hex: \"#adadad\",\n label: \"Insufficient Data\",\n icon: \"sub-circuit-legend\",\n description: \"The connection cannot be assessed at this location via this tool. Please contact SPEN for further information\",\n },\n};\n\nexport const costEstimatorLegendMap = {\n substation: {\n class: \"danger\",\n hex: \"#ffffff\",\n label: \"Substation\",\n icon: \"sub-legend\",\n col: 5,\n margin: \"0px 5px 0px 5px\"\n },\n undergroundCircuit: {\n class: \"light\",\n hex: \"#ffffff\",\n label: \"Underground Cable\",\n icon: \"underground-circuit-legend\",\n col: 7,\n margin: \"0px 5px 0px -10px\"\n },\n overheadPole: {\n class: \"light\",\n hex: \"#ffffff\",\n label: \"OH Line Pole\",\n icon: \"triangle\",\n col: 5,\n margin: \"0px 5px 0px 15px\" \n },\n overheadCircuit: {\n class: \"light\",\n hex: \"#ffffff\",\n label: \"Overhead Line\",\n icon: \"overhead-circuit-legend\",\n col: 7,\n margin: \"0px 5px 0px -10px\"\n }, \n spacer1: {\n class: \"light\",\n hex: \"#FFFFFF\",\n label: \"\",\n icon: \"\",\n col: 5\n },\n spacer2: {\n class: \"light\",\n hex: \"#FFFFFF\",\n label: \"\",\n icon: \"\",\n col: 7\n },\n red: {\n class: \"danger\",\n hex: \"#e51e3d\",\n label: \"Poor\",\n icon: \"sub-circuit-legend-alt\",\n col: 5,\n margin: \"0px 5px 0px 5px\"\n },\n green: {\n class: \"success\",\n hex: \"#1c9d5b\",\n label: \"Good\",\n icon: \"sub-circuit-legend-alt\",\n col: 7,\n margin: \"0px 5px 0px -10px\" \n },\n amber: {\n class: \"warning\",\n hex: \"#fab721\",\n label: \"Limited\",\n icon: \"sub-circuit-legend-alt\",\n col: 5,\n margin: \"0px 5px 0px 5px\"\n },\n grey: {\n class: \"secondary\",\n hex: \"#adadad\",\n label: \"Insufficient Data\",\n icon: \"sub-circuit-legend-alt\",\n col: 7,\n margin: \"0px 5px 0px -10px\" \n },\n};\n\nexport const plannedReinforcementMap = {\n plannedCluster: {\n css: \"marker-cluster-legend planned-marker ml-2 mr-2 mb-2\",\n label: \"Planned Reinforcement Group Pin\",\n key: \"plannedCluster\"\n },\n plannedPin: {\n css: \"planned-marker-color mr-2 ml-2\",\n label: \"Planned Reinforcement Individual Pin\",\n icon: \"icon-map-marker\",\n key: \"plannedPin\"\n }\n};\n\nexport const sizeMap = {\n small: { class: \"iconSmall\" },\n medium: { class: \"iconMedium\" },\n large: { class: \"iconLarge\" },\n};\n\nexport const opacityMap = {\n 0.1: { class: \"opacity-1\" },\n 0.2: { class: \"opacity-2\" },\n 0.3: { class: \"opacity-3\" },\n 0.4: { class: \"opacity-4\" },\n 0.5: { class: \"opacity-5\" },\n 0.6: { class: \"opacity-6\" },\n 0.7: { class: \"opacity-7\" },\n 0.8: { class: \"opacity-8\" },\n 0.9: { class: \"opacity-9\" },\n 1: { class: \"opacity-10\" },\n};\n\nexport const scenarioMap = [\n { evUptake: 1, chrgInfrastr: 1, scenario: \"D\" },\n { evUptake: 1, chrgInfrastr: 2, scenario: \"C\" },\n { evUptake: 2, chrgInfrastr: 1, scenario: \"B\" },\n { evUptake: 2, chrgInfrastr: 2, scenario: \"A\" },\n];\n\nexport const kVAMarks = {\n 50: {\n style: {\n color: \"#fff\",\n },\n label: \"50kVA\",\n },\n 100: {\n style: {\n color: \"#fff\",\n },\n label: \"100kVA\",\n },\n 150: {\n style: {\n color: \"#fff\",\n },\n label: \"150kVA\",\n },\n};\n\nexport const lvkVAMap = [\n { id: 1, name: \"25\", value: 25, label: \"lv-kva-25\" },\n { id: 2, name: \"50\", value: 50, label: \"lv-kva-50\" },\n { id: 3, name: \"75\", value: 75, label: \"lv-kva-75\" },\n { id: 4, name: \"100\", value: 100, label: \"lv-kva-100\" },\n { id: 5, name: \"125\", value: 125, label: \"lv-kva-125\" },\n { id: 6, name: \"150\", value: 150, label: \"lv-kva-150\" },\n];\n\nexport const hvkVAMap = [\n { id: 1, name: \"250\", value: 250, label: \"hv-kva-250\" },\n { id: 2, name: \"500\", value: 500, label: \"hv-kva-500\" },\n { id: 3, name: \"1000\", value: 1000, label: \"hv-kva-1000\" },\n { id: 4, name: \"1500\", value: 1500, label: \"hv-kva-1500\" },\n { id: 5, name: \"2000\", value: 2000, label: \"hv-kva-2000\" },\n { id: 6, name: \"2500\", value: 2500, label: \"hv-kva-2500\" },\n];\n\nexport const yearSliderMarks = {\n 2025: {\n style: {\n color: \"#fff\",\n },\n label: \"2025\",\n },\n 2030: {\n style: {\n color: \"#fff\",\n },\n label: \"2030\",\n },\n 2035: {\n style: {\n color: \"#fff\",\n },\n label: \"2035\",\n },\n 2040: {\n style: {\n color: \"#fff\",\n },\n label: \"2040\",\n },\n 2045: {\n style: {\n color: \"#fff\",\n },\n label: \"2045\",\n },\n 2050: {\n style: {\n color: \"#fff\",\n },\n label: \"2050\",\n },\n};\n\nexport const plannedReinforcementYearSliderMarks = {\n 2023: {\n style: {\n color: \"#fff\",\n },\n label: \"2023\",\n },\n 2024: {\n style: {\n color: \"#fff\",\n },\n label: \"2024\",\n },\n 2025: {\n style: {\n color: \"#fff\",\n },\n label: \"2025\",\n },\n 2026: {\n style: {\n color: \"#fff\",\n },\n label: \"2026\",\n },\n 2027: {\n style: {\n color: \"#fff\",\n },\n label: \"2027\",\n },\n 2028: {\n style: {\n color: \"#fff\",\n },\n label: \"2028\",\n },\n};\n\nexport const evUptakeMap = [\n { id: 1, name: \"Low\", value: 1, label: \"low\" },\n { id: 2, name: \"High\", value: 2, label: \"high\" },\n];\n\nexport const chrgInfrastrMap = [\n { id: 1, name: \"Sparse\", value: 1, label: \"sparse\" },\n { id: 2, name: \"Plentiful\", value: 2, label: \"plentiful\" },\n];\n\nexport const lsoaMapping = [\n {\n id: 1,\n name: \"DailykWh_Public\",\n label: \"Daily Energy Demand (kWh) - Public Chargers\",\n dp: 0,\n },\n {\n id: 2,\n name: \"DailykWh_Work\",\n label: \"Daily Energy Demand (kWh) - Workplace Chargers\",\n dp: 0,\n },\n {\n id: 3,\n name: \"Avg_kWh_perSession\",\n label: \"Average Energy per Charging Session (kWh)\",\n dp: 1,\n },\n {\n id: 4,\n name: \"DailyTotalEVs_Arriving\",\n label: \"EVs Arriving per Day\",\n dp: 0,\n },\n {\n id: 5,\n name: \"DailyTotalEVs_ArrivingCharging\",\n label: \"EVs Charging per Day\",\n dp: 0,\n },\n {\n id: 6,\n name: \"Avg_DwellTime\",\n label: \"Average Dwell Time (hours)\",\n dp: 1,\n },\n {\n id: 7,\n name: \"Percent_TripsEV\",\n label: \"EVs as a percentage of all car arrivals\",\n dp: 0,\n },\n {\n id: 8,\n name: \"Park_And_Charge_No_of_7kW_Sessions\",\n label: \"No. of Charge Sessions per day requiring a 7kW Charger\",\n dp: 0,\n },\n {\n id: 9,\n name: \"Park_And_Charge_No_of_22kW_Sessions\",\n label: \"No. of Charge Sessions per day requiring a 22kW Charger\",\n dp: 0,\n },\n {\n id: 10,\n name: \"Park_And_Charge_No_of_50kW_Sessions\",\n label: \"No. of Charge Sessions per day requiring a 50kW Charger\",\n dp: 0,\n },\n { id: 11, name: \"Park_And_Charge_No_of_150kW_Sessions\", dp: 0 },\n {\n id: 12,\n name: \"DailykWh_HomeOnStreet\",\n label: \"Daily Energy Demand (kWh) - Residential On-Street Chargers\",\n dp: 0,\n },\n {\n id: 13,\n name: \"DailykWh_HomeOffStreet\",\n label: \"Daily Energy Demand (kWh) - Residential Off-Street Chargers\",\n dp: 0,\n },\n { id: 14, name: \"TotalDailykWh_all_types\", dp: 0 },\n { id: 15, name: \"TotalDailykWh_exc_HomeOffStreet\", dp: 0 },\n { id: 16, name: \"DailyTotalCars_Arriving\", dp: 0 },\n { id: 17, name: \"DailyTotalEVs_Arriving_NotCharging\", dp: 0 },\n { id: 18, name: \"Daily_DwellPercent_0to1hours\", dp: null },\n { id: 19, name: \"Daily_DwellPercent_1to3hours\", dp: null },\n { id: 20, name: \"Daily_DwellPercent_3to6hours\", dp: null },\n { id: 21, name: \"Daily_DwellPercent_Over6hours\", dp: null },\n { id: 22, name: \"DailykWh_0to5\", dp: 0 },\n { id: 23, name: \"DailykWh_5to15\", dp: 0 },\n { id: 24, name: \"DailykWh_15to30\", dp: 0 },\n { id: 25, name: \"DailykWh_30to60\", dp: 0 },\n { id: 26, name: \"DailykWh_60to100\", dp: 0 },\n { id: 27, name: \"AllArrivals_Percent_NeedsMet_7kW\", dp: null },\n { id: 28, name: \"AllArrivals_Percent_NeedsMet_22kW\", dp: null },\n { id: 29, name: \"AllArrivals_Percent_NeedsMet_50kW\", dp: null },\n { id: 30, name: \"AllArrivals_Percent_NeedsMet_150kW\", dp: null },\n {\n id: 31,\n name: \"AllArrivals_Percent_NeedsMet_Over150kW\",\n dp: null,\n },\n { id: 32, name: \"AllArrivals_Percent_NeedsMetOver50kW\", dp: 0 },\n {\n id: 33,\n name: \"AllArrivals_Percent_Needs_Met_UPTO_7kW\",\n dp: 0,\n show: false,\n },\n {\n id: 34,\n name: \"AllArrivals_Percent_Needs_Met_UPTO_22kW\",\n dp: 0,\n show: false,\n },\n {\n id: 35,\n name: \"AllArrivals_Percent_Needs_Met_UPTO_50kW\",\n dp: 0,\n show: false,\n },\n {\n id: 36,\n name: \"AllArrivals_Percent_Needs_Met_UPTO_150kW\",\n dp: 0,\n show: false,\n },\n {\n id: 37,\n name: \"Park_And_Charge_No_of_Over150kW_Sessions\",\n dp: 0,\n show: false,\n },\n];\n","import { atom, selector } from 'recoil';\n\nimport { scenarioMap } from \"./helpers/lookups\"\nimport { locationTypeArr, networkAssetsArr, mapLayerTypeArr, costingMapLayerTypeArr } from './helpers/dataParser';\n\nexport const scenarioState = selector({\n key: 'scenarioState', \n get: ({get}) => {\n const evUptake = get(evUptakeState);\n const chrgInfrastr = get(chrgInfrastrState)\n\n const scenario = scenarioMap.find(sc => sc.evUptake === evUptake && sc.chrgInfrastr === chrgInfrastr).scenario;\n \n return scenario;\n },\n})\n\nexport const selectedFeatureState = atom({\n key: 'selectedFeature',\n default: null\n});\n \nexport const selectedInterestInCapacityFeatureState = atom({\n key: 'selectedInterestInCapacityFeature',\n default: null\n});\n\nexport const selectedPlannedReinforcementFeatureState = atom({\n key: 'selectedPlannedReinforcementFeature',\n default: null\n});\n\nexport const yearState = atom({\n key: 'yearState',\n default: 2025\n});\n\nexport const plannedReinforcementYearState = atom({\n key: 'plannedReinforcementYearState',\n default: 2023\n})\n\nexport const evUptakeState = atom({\n key: 'evUptakeState',\n default: 2\n});\n\nexport const chrgInfrastrState = atom({\n key: 'chrgInfrastrState',\n default: 2\n});\n\nexport const selectedCategoryState = atom({\n key: 'selectedCategoryState', \n default: null\n});\n\nexport const locationTypesState = atom({\n key: 'LocationTypesState',\n default: locationTypeArr\n});\n\nexport const lsoaLocationTypesState = atom({\n key: 'LsoaLocationTypesState',\n default: locationTypeArr\n});\n\nexport const mapLayerTypesState = atom({\n key: 'MapLayerTypesState',\n default: mapLayerTypeArr\n});\n\nexport const costingMapLayerTypesState = atom({\n key: 'CostingMapLayerTypesState',\n default: costingMapLayerTypeArr\n});\n\nexport const evLegendVisibleState = selector({\n key: 'evLegendVisibleState',\n get: ({ get }) => {\n const locationTypes = get(locationTypesState);\n const showEvChargingLayer = get(showEvChargingLayerState);\n\n return locationTypes.some(lt => lt.selected) && showEvChargingLayer;\n }\n})\n\nexport const selectedLsoaLocationTypesState = selector({\n key: 'selectedLsoaLocationTypesState',\n get: ({ get }) => {\n const locationTypes = get(locationTypesState);\n\n return locationTypes.filter(lt => lt.selected && lt.layer === \"lsoa\");\n }\n})\n\nexport const showEvChargingLayerState = atom({\n key: 'showEvChargingLayerState',\n default: false\n});\n\nexport const showMapLayerState = atom({\n key: 'showMapLayerState',\n default: false\n});\n\nexport const showLsoaLayerState = selector({\n key: 'showLsoaLayerState',\n get: ({ get }) => {\n const locationTypes = get(locationTypesState);\n const showEvChargingLayer = get(showEvChargingLayerState);\n const mapLayerTypes = get(mapLayerTypesState);\n\n return showEvChargingLayer && \n locationTypes.some(lt => lt.selected && lt.layer === \"lsoa\") &&\n mapLayerTypes.some(ml => ml.selected && ml.layer === \"lsoa\");\n }\n});\n\nexport const showRoadsLayerState = selector({\n key: 'showRoadsLayerState',\n get: ({ get }) => {\n const locationTypes = get(locationTypesState);\n const showEvChargingLayer = get(showEvChargingLayerState);\n const mapLayerTypes = get(mapLayerTypesState);\n\n return showEvChargingLayer && \n locationTypes.some(lt => lt.selected && lt.layer === \"roads\") &&\n mapLayerTypes.some(ml => ml.selected && ml.layer === \"roads\");\n }\n});\n\nexport const showPlannedReinforcementLayerState = atom({\n key: 'showPlannedReinforcementLayerState',\n default: false\n});\n\nexport const evChargingDemandWizardInProgressState = atom({\n key: 'evChargingDemandIsInProgressState',\n default: false\n})\n\nexport const networkCapacityWizardInProgressState = atom({\n key: 'networkCapacityWizardInProgressState',\n default: false\n})\n\nexport const smileyFeedbackSelectedState = atom({\n key: 'smileyFeedbackSelectedState',\n default: 0\n});\n\nexport const showNetworkCapacityLayerState = atom({\n key: 'showNetworkCapacityLayerState',\n default: false,\n});\n\nexport const showCapacityLayerState = selector({\n key: 'showCapacityLayerState',\n get: ({ get }) => {\n const networkCapacityTypes = get(networkCapacityLayersState);\n const showNetworkCapacityLayer = get(showNetworkCapacityLayerState);\n const mapLayerTypes = get(mapLayerTypesState);\n\n return showNetworkCapacityLayer && \n networkCapacityTypes.some(lt => lt.selected && (lt.layer === \"lv\" || lt.layer === \"hv\")) &&\n mapLayerTypes.some(ml => ml.selected && (ml.layer === \"lv\" || ml.layer === \"hv\"));\n }\n});\n\nexport const networkCapacityLayersState = atom({\n key: 'networkCapacityLayersState',\n default: networkAssetsArr\n});\n\nexport const selectedNetworkCapacityLayerNameState = selector({\n key: 'selectedNetworkCapacityLayerNameState',\n get: ({ get }) => {\n const capacityLayers = get(networkCapacityLayersState);\n\n return capacityLayers.find(l => l.selected)?.name ?? \"\";\n }\n});\n\nexport const clearHeatmapButtonIsVisibleState = selector({\n key: 'clearHeatmapButtonIsVisibleState',\n get: ({ get }) => {\n const showCapacityLayers = get(showNetworkCapacityLayerState);\n const capacityLayers = get(networkCapacityLayersState)\n\n return showCapacityLayers && capacityLayers.some(l => l.selected);\n }\n})\n\nexport const selectedKvaState = atom({\n key: 'selectedKvaState',\n default: 25\n});\n\nexport const selectedLvKvaState = atom({\n key: 'selectedLvKvaState',\n default: 25\n});\n\nexport const selectedHvKvaState = atom({\n key: 'selectedHvKvaState',\n default: 250\n});\n\nconst enrouteFilters = [\n { value: 1, selected: true, map: 'one' },\n { value: 2, selected: true, map: 'two' },\n { value: 3, selected: true, map: 'three' },\n { value: 4, selected: true, map: 'four' },\n { value: 5, selected: true, map: 'five' }\n];\n\nexport const enrouteFiltersState = atom({\n key: 'enrouteFiltersState',\n default: enrouteFilters\n});\n\nconst lsoaFilters = [\n { value: 1, selected: true, map: 'one' },\n { value: 2, selected: true, map: 'two' },\n { value: 3, selected: true, map: 'three' },\n { value: 4, selected: true, map: 'four' },\n];\n\nexport const lsoaFiltersState = atom({\n key: 'lsoaFiltersState',\n default: lsoaFilters\n});\n\nexport const costEstimatorFormState = atom({\n key: \"costEstimatorFormState\",\n default: \"costEstimator\"\n})","import React, { useState, useEffect } from \"react\";\nimport { useLeaflet, Polyline } from \"react-leaflet\";\nimport { useRecoilValue, useRecoilState, useSetRecoilState } from \"recoil\"\n\nimport { getGeoJsonWithBounds } from \"./services/geoServerService\";\nimport { reverseCoords } from \"./helpers/reverseCoords\";\nimport { inClientBounds } from \"./helpers/inClientBounds\";\n\nimport { \n scenarioState, \n selectedFeatureState, \n yearState, \n selectedCategoryState,\n enrouteFiltersState\n} from \"./atom\";\n\nconst TransportLayer = ({\n id,\n layer\n}) => {\n \n const [ selected, setSelected ] = useRecoilState(selectedFeatureState);\n const setCategory = useSetRecoilState(selectedCategoryState);\n\n const year = useRecoilValue(yearState);\n const scenario = useRecoilValue(scenarioState);\n const filters = useRecoilValue(enrouteFiltersState);\n \n const [ features, setFeatures ] = useState([]);\n const { map } = useLeaflet();\n\n const inScope = map.getZoom() >= layer.minZoom && map.getZoom() <= layer.maxZoom && inClientBounds(map.getBounds());\n\n useEffect(() => {\n const getFeatures = async () => {\n if (inScope) {\n const response = await getGeoJsonWithBounds(map.getBounds(), layer, { year });\n const reversedFeatureCollection = reverseCoords(response);\n \n convertFeatures(reversedFeatureCollection.features);\n }\n };\n getFeatures();\n }, [ year, id ]);\n\n const convertFeatures = (featureCollection) => {\n let features = [];\n featureCollection.forEach((feature) => {\n const color =\n layer.color.value || \n feature.properties[layer.color.property] ||\n 'grey';\n\n features.push({\n id: feature.id,\n type: feature.geometry.type,\n category: \"Roads\",\n coords: feature.geometry.coordinates,\n properties: feature.properties,\n color: color, \n size: layer.size,\n weight: layer.weight, \n opacity: layer.opacity,\n });\n });\n setFeatures(features);\n const feature = selected && features.find(filter => selected.properties.id === filter.properties.id);\n feature && setSelected(feature); \n };\n\n const onSelected = (feature) => { \n setSelected(feature);\n setCategory(feature.category);\n };\n\n const filterFeatures = (feature) => {\n const percentile = getPercentile(feature, scenario);\n return filters.some(filter => filter.selected && filter.value === percentile);\n }\n\n return (\n <>\n {inScope && features.filter(filterFeatures).map(feature => (\n ' + childCount + '
', \n className: 'planned-marker ' + mc, \n iconSize: childCount < 10 ? new L.Point(30, 30) : new L.Point(40,40) \n });\n },\n spiderfyOnMaxZoom: false, \n showCoverageOnHover: false, \n zoomToBoundsOnClick: false\n});\n\nconst PlannedReinforcementLayer = ({ \n id, \n layer\n}) => {\n\n const setSelected = useSetRecoilState(selectedPlannedReinforcementFeatureState);\n const setCategory = useSetRecoilState(selectedCategoryState); \n const showPlannedReinforcementLayer = useRecoilValue(showPlannedReinforcementLayerState);\n const year = useRecoilValue(plannedReinforcementYearState);\n\tconst [defaultZoom, setDefaultZoom] = useState(false);\n\n const { map } = useLeaflet();\n\n useEffect(() => {\n !showPlannedReinforcementLayer ? markers.clearLayers() : getFeatures();\n }, [showPlannedReinforcementLayer, id, year]);\n\n const inScope = layer && map.getZoom() >= layer.minZoom && map.getZoom() <= layer.maxZoom && inClientBounds(map.getBounds());\n\n let clickedMarker = undefined;\n let clickedCluster = undefined;\n\n const getFeatures = async () => {\n if (inScope) {\n const response = await getPlannedReinforcement(map.getBounds());\n const reversedFeatureCollection = reverseCoords(response);\n convertFeatures(reversedFeatureCollection.features);\n }\n if (!defaultZoom) {\n map.setZoom(PLANNED_REINFORCEMENT_INITIAL_ZOOM);\n setDefaultZoom(true);\n }\n }\n\n const convertFeatures = (featureCollection) => {\n markers.clearLayers();\n setSelected(null);\n const _features = [];\n\n featureCollection.forEach((feature) => {\n if (inScope && feature.properties.proxy_type !== 'CONNECTOR' && \n feature.properties.expected_by.substring(0,4) <= year.toString()) {\n _features.push({\n id: feature.id,\n type: feature.geometry.type,\n category: \"PlannedReinforcement\",\n coords: feature.geometry.coordinates,\n properties: feature.properties,\n marker: layer.iconMarker,\n size: layer.size,\n weight: layer.weight,\n opacity: layer.opacity,\n styles: {\n fillOpacity: layer.opacity\n }\n });\n\n var marker = L.marker(feature.geometry.coordinates, {icon: greenIcon, feature: feature });\n \n marker.on('click', function (e) {\n const feature = e.target.options.feature.properties;\n setSelected(feature);\n setCategory(\"PlannedReinforcement\");\n if (clickedCluster && clickedCluster._icon) {\n clickedCluster._icon.classList.remove('selected-planned-marker'); \n }\n clickedCluster = undefined;\n if (clickedMarker) {\n clickedMarker.setIcon(greenIcon); \n } \n e.target.setIcon(largeGreenIcon);\n clickedMarker = e.target;\n });\n marker.addTo(markers);\n }\n }); \n\n markers.on('clusterclick', function (e) {\n let capacityIncreaseMva = 0;\n let flexibilityMw = 0;\n const markers = e.layer.getAllChildMarkers(); \n markers.forEach((marker) => {\n capacityIncreaseMva += marker.options.feature.properties.capacity_increase_mva;\n flexibilityMw += marker.options.feature.properties.flexibility_mw; \n });\n const feature = { \n numberOfPins: e.layer.getChildCount(), \n capacityIncreaseMva: capacityIncreaseMva,\n flexibilityMw: flexibilityMw\n };\n setSelected(feature);\n setCategory(\"PlannedReinforcement\");\n if (clickedMarker) {\n clickedMarker.setIcon(greenIcon); \n }\n clickedMarker = undefined;\n if (clickedCluster && clickedCluster._icon) {\n clickedCluster._icon.classList.remove('selected-planned-marker'); \n }\n e.layer._icon.classList.add('selected-planned-marker');\n clickedCluster = e.layer;\n });\n \n map.addLayer(markers); \n };\n\n return null;\n}\n\nexport default PlannedReinforcementLayer;","import React from \"react\";\nimport { FormGroup } from \"reactstrap\";\nimport Slider from \"rc-slider\";\nimport \"rc-slider/assets/index.css\";\n\nconst EASlider = ({ min, max, step, marks, value, cssClasses, onChange }) => {\n return (\n \n
\n \n );\n};\n\nexport default EASlider;\n","import React, { useState } from \"react\";\nimport { Popover, PopoverBody } from \"reactstrap\";\nimport parse from \"html-react-parser\";\n\nconst EAPopover = ({ color, item }) => {\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n const toggle = (e) => {\n e.stopPropagation();\n setPopoverOpen(!popoverOpen);\n };\n\n return (\n <>\n \n onClick(e, item)}\n >\n \n \n {item.name}\n {children}\n \n \n
\n \n );\n};\n\nexport default EACheckboxListGroupItem;\n","import SelectChargerLocationTypes from \"./SelectChargerLocationTypes\";\n\nexport default SelectChargerLocationTypes;","import React from \"react\";\nimport { \n useRecoilState, \n useRecoilValue } from \"recoil\";\nimport EACheckboxListGroupItem from \"../EACheckboxListGroupItem\";\nimport EAPopover from \"../EAPopover\";\nimport { \n locationTypesState, \n mapLayerTypesState, \n showEvChargingLayerState } from \"../../atom\";\n\nconst SelectChargerLocationTypes = () => {\n\n const [ mapLayerTypes, setMapLayerTypes ] = useRecoilState(mapLayerTypesState);\n const [ locationTypes, setLocationTypes ] = useRecoilState(locationTypesState);\n const showEvChargingLayer = useRecoilValue(showEvChargingLayerState);\n\n const updateLocationType = (selected) => {\n const types = locationTypes.map(t => selected === t \n ? { ...t, selected: !t.selected } \n : t);\n setLocationTypes(types);\n if (showEvChargingLayer) {\n selected.layer === 'roads' \n ? updateRoadsMapFilter(selected) \n : updateLsoaMapFilter(selected);\n }\n }\n\n const updateRoadsMapFilter = (selected) => {\n const mapLayers = mapLayerTypes.map(m => m.layer === 'roads' \n ? {...m, selected: !selected.selected, disabled: selected.selected } \n : m);\n setMapLayerTypes(mapLayers);\n }\n \n const updateLsoaMapFilter = (selected) => {\n var count = locationTypes.filter(l => l.layer === 'lsoa' \n && l.selected).length + (!selected.selected \n ? 1 \n : -1);\n const mapLayers = mapLayerTypes.map(m => m.layer === 'lsoa' \n ? {...m, selected: count > 0, disabled: count === 0 } \n : m);\n setMapLayerTypes(mapLayers); \n }\n\n return (\n <>\n \n
\n );\n}\n\nconst Step1 = ({ currentStep }) =>\n currentStep === 1 &&\n The transport layer in ConnectMore displays a set of scenario-based forecasts for EV charging demand data across the SPEN license area. This data has been derived from a detailed transport model, with demand for public charging based on the number of EVs assumed, their likely trip patterns – including distance and energy consumption, and the likely provision of private, home-based charging.
\nThe EV charging demand data has been derived for a range of possible future situations. This data does not therefore provide a known outcome and should instead be used as a guide to inform decisions such as ‘Based on a plausible number of EVs in 2025, how many charging points might be required in this area?’
\nConfigure EV Charging Demand
\n\nconst Step2 = ({ currentStep }) =>\n currentStep === 2 &&\n\n
\n );\n } else if (showRoadLayer) {\n return (\n \n Select an area or road on the map to view further information.\n
\n\n
\n );\n } else {\n return (\n \n Select a road on the map to view further information\n
\n\n
\n );\n }\n } else {\n return <>\n }\n}\n\nexport default EVChargingDemandWizard;\n","import EVChargingDemandWizard from \"./EVChargingDemandWizard\";\n\nexport default EVChargingDemandWizard;","import { Button } from \"reactstrap\";\nimport React from \"react\";\n\nconst ClearHeatmapButton = ({onClick, isVisible}) => isVisible &&\n \n\n\nexport default ClearHeatmapButton;","import Legend from \"./Legend\";\n\nexport default Legend;","import React from \"react\";\nimport EAPopover from \"../EAPopover\";\n\n\nconst Legend = ({ title, header, array, cols, cssClasses, isEnroute }) => {\n return (\n \n );\n};\n\nexport default Legend;\n","import React from \"react\";\nimport Legend from \"../Legend\";\nimport { networkCapacityLegendMap } from \"../../helpers/lookups\";\n\nconst ElectricityNetworkCapacityLegend = ({cssClasses}) => {\n return \n Select an area on the map to view further information\n
\nConfigure Electricity Network Capacity
\n);\n\nconst Step2 = ({ currentStep, layers, updateLayers }) => (\n currentStep === 2 && \n <>\n- \n {errors.map((error) => (\n
- {error.description} \n ))}\n
{errorsDiv(value)}
\n);\nexport default FeedbackErrors;\n","import React from \"react\";\nimport { Button } from \"reactstrap\";\n\nconst SubmitButton = ({ disabled }) => {\n return (\n \n
\n {smileyFeedbackSelected > 0 && !cancelClicked && (\n \n
\n\n setSmiley(smileyFeedbackSelected, 3)}\n />\n setSmiley(smileyFeedbackSelected, 2)}\n />\n setSmiley(smileyFeedbackSelected, 1)}\n />\n
\n \n
\n One click feedback - how would you rate this tool?\n
\n \n 
\n
;\n};\n\nexport default Screenshot;\n","\nimport React from \"react\";\nimport { Button } from \"reactstrap\";\n\nconst ScreenImageButton = ({ onClick, isActive}) => {\n const iconClass = isActive ? \"icon-check-solid\" : \"icon-cross-solid\";\n const buttonClass = isActive ? \"active\" : \"\";\n\n return \n Include Screenshot\n \n
\n ;\n};\n\nexport default ScreenImageButton;","import React from \"react\";\nimport { ErrorMessage } from \"formik\";\n\nconst FormError = ({component, name}) => {\n return - \n {errors.map((error) => (\n
- {error.description} \n ))}\n
\n { errorsDiv(errors) }\n
;\n\nexport default FeedbackErrors;","import React from \"react\";\nimport { Button } from \"reactstrap\";\n\nconst SubmitButton = ({ disabled }) => {\n return (\n \n onClick(e, item)}> \n \n \n \n {item.name}\n \n
\n );\n};\n\nexport default EAHorizontalCheckboxListGroupItem;\n","import MapLayers from \"./MapLayers\";\n\nexport default MapLayers;","import React from \"react\";\nimport {\n mapLayerTypesState,\n locationTypesState,\n lsoaLocationTypesState,\n networkCapacityLayersState,\n selectedFeatureState,\n selectedKvaState,\n selectedLvKvaState,\n selectedHvKvaState,\n showPlannedReinforcementLayerState\n} from \"../../atom\";\nimport {\n useRecoilState,\n useSetRecoilState\n} from \"recoil\";\nimport EAHorizontalCheckboxListGroupItem from \"../EAHorizontalCheckboxListGroupItem\";\nimport { configObj as config } from \"../../config\";\nimport { useParams } from \"react-router-dom\";\nimport { useEffect } from \"react\";\n\nconst MapLayers = () => {\n const [mapLayerTypes, setMapLayerTypes] = useRecoilState(mapLayerTypesState);\n const [locationTypes, setLocationTypes] = useRecoilState(locationTypesState);\n const [lsoaLocationTypes, setLsoaLocationTypes] = useRecoilState(lsoaLocationTypesState);\n const [networkCapacityLayers, setNetworkCapacityLayers] = useRecoilState(networkCapacityLayersState);\n const setShowPlannedReinforcementLayer = useSetRecoilState(showPlannedReinforcementLayerState);\n const setKva = useSetRecoilState(selectedKvaState);\n const setSelectedFeature = useSetRecoilState(selectedFeatureState);\n const lvKva = useRecoilState(selectedLvKvaState);\n const hvKva = useRecoilState(selectedHvKvaState);\n const params = useParams();\n\n useEffect(() => {\n var client = params.client;\n\n if (client !== undefined){\n if (client.toLowerCase() === \"spd\") {\n setMapLayerTypes(mapLayerTypes.filter(function (item) {\n return item.value.toLowerCase() !== \"lsoa\" && item.value.toLowerCase() !== \"enroute\"\n }));\n }\n }\n }, []);\n\n const updateMapLayerFilters = (selected) => {\n if (selected.layer === \"lsoa\") {\n setLsoaChargingFilters(selected);\n setLsaoEnRouteMapFilters(selected);\n }\n if (selected.layer === \"roads\") {\n setEnRouteChargingFilter(selected);\n setLsaoEnRouteMapFilters(selected);\n }\n if (selected.layer === \"lv\" || selected.layer === \"hv\") {\n setLvHvCapacityFilters(selected);\n setLvHvMapFilters(selected);\n setSelectedFeature(null);\n }\n if (selected.layer === \"plannedReinforcement\") {\n setPlannedReinforcementMapFilter(selected);\n setShowPlannedReinforcementLayer(!selected.selected);\n }\n }\n\n const setEnRouteChargingFilter = (mapLayerType) => {\n const types = locationTypes.map(lt => lt.layer === \"roads\"\n ? { ...lt, selected: !mapLayerType.selected }\n : lt);\n setLocationTypes(types);\n }\n\n const setLvHvCapacityFilters = (selected) => {\n const types = networkCapacityLayers.map(ncl => (ncl)\n ? { ...ncl, selected: selected.layer === ncl.layer ? !selected.selected : false }\n : ncl);\n setNetworkCapacityLayers(types);\n const capacity = types.find(l => l.selected)?.name;\n if (capacity) {\n capacity === \"LV Network Capacity\" ? setKva(lvKva[0]) : setKva(hvKva[0]);\n }\n }\n\n const setLsoaChargingFilters = (mapLayerType) => {\n if (mapLayerType.selected) {\n const lsoaTypes = lsoaLocationTypes.map(lt => ({ ...lt, selected: getLocationType(lt.id).selected }));\n setLsoaLocationTypes(lsoaTypes);\n const types = locationTypes.map(lt => lt.layer === \"lsoa\"\n ? { ...lt, selected: false }\n : lt);\n setLocationTypes(types);\n } else {\n const types = locationTypes.map(lt => lt.layer === \"lsoa\"\n ? { ...lt, selected: getLsoaLocationType(lt.id).selected }\n : lt);\n setLocationTypes(types);\n const lsoaTypes = lsoaLocationTypes.map(lt => lt.layer === \"lsoa\"\n ? { ...lt, selected: false }\n : lt);\n setLsoaLocationTypes(lsoaTypes);\n }\n }\n\n const setLvHvMapFilters = (selected) => {\n const types = mapLayerTypes.map(mlt => mlt.layer === \"lv\" || mlt.layer === \"hv\"\n ? { ...mlt, selected: selected === mlt ? !selected.selected : false }\n : mlt);\n setMapLayerTypes(types);\n }\n\n const setLsaoEnRouteMapFilters = (selected) => {\n const types = mapLayerTypes.map(mlt => selected === mlt\n ? { ...mlt, selected: !mlt.selected }\n : mlt);\n setMapLayerTypes(types);\n }\n\n const setPlannedReinforcementMapFilter = (selected) => {\n const types = mapLayerTypes.map(mlt => mlt.layer === \"plannedReinforcement\"\n ? { ...mlt, selected: selected === mlt ? !selected.selected : false }\n : mlt);\n setMapLayerTypes(types);\n }\n\n const getLocationType = (id) => {\n return locationTypes.filter(t => t.id === id)[0];\n }\n\n const getLsoaLocationType = (id) => {\n return lsoaLocationTypes.filter(t => t.id === id)[0];\n }\n\n return (\n <>\n \n Map Layers\n
\n\n {mapLayerTypes.filter(f => config.showPlannedReinforcement ? f.id < 6 : f.id < 5).map((v) => (\n updateMapLayerFilters(layer)}\n cssClasses=\"text-light px-3 py-2 d-inline-block justify-content-between align-items-center\"\n disabled={v.disabled}\n />\n ))}\n
\n \n );\n};\n\nexport default MapLayers;","\nimport React from \"react\";\nimport Button from \"reactstrap/lib/Button\";\n\nimport './CollapseButton.css';\n\nconst CollapseButton = ({isExpanded, onClick}) => ;\n\nexport default CollapseButton;","import React, { useState } from \"react\";\nimport { FormGroup, Collapse } from \"reactstrap\";\nimport Scrollbar from \"react-scrollbars-custom\";\nimport EVChargingDemandWizard from \"./components/EVChargingDemandWizard\";\nimport ElectricityNetworkCapacityWizard from \"./ElectricityNetworkCapacityWizard\";\nimport PlannedReinforcementWizard from \"./components/PlannedReinforcementWizard\";\nimport SmileysFeedback from \"./components/SmileysFeedback\";\nimport GooglePlacesSearch from \"./GooglePlacesSearch\";\nimport Feedback from \"./components/Feedback\";\nimport MapLayers from \"./components/MapLayers\";\nimport CollapseButton from \"./components/CollapseButton/CollapseButton\";\nimport { useRecoilValue } from \"recoil\"\nimport { configObj as config } from \"./config\";\nimport { \n selectedCategoryState,\n smileyFeedbackSelectedState \n} from \"./atom\";\n\nconst Console = ({\n searchResult,\n onToggleShowConsole\n}) => {\n\n const [ collapse ] = useState(true);\n\n const selectedCategory = useRecoilValue(selectedCategoryState);\n const smileyFeedbackSelected = useRecoilValue(smileyFeedbackSelectedState); \n\n return (\n \n Group Pin Data\n
\n\n Pin Data\n
\n\n \n )\n );\n}\n\nexport default PlannedReinforcementInfo;","import React, { useState } from \"react\";\nimport { Tooltip } from \"reactstrap\";\n\nconst EATooltip = ({ text, target, placement }) => {\n const [tooltipOpen, setTooltipOpen] = useState(false);\n const toggle = () => setTooltipOpen(!tooltipOpen);\n\n return (\n
\n Asset Data\n
\n\n \n `${v*100} %`} \n tickValues={[0, 0.2, 0.4, 0.6, 0.8, 1]} \n tickTotal={6}\n />\n
\n \n )}\n \n );\n};\n\nexport default DwellTimeDistribution;\n","import EnergyPerChargingSessionDistribution from \"./EnergyPerChargingSessionDistribution\";\n\nexport default EnergyPerChargingSessionDistribution;","import React from \"react\";\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalBarSeries,\n DiscreteColorLegend,\n} from \"react-vis\";\nimport { dataHasNonZeroValues, mapDataToLocationTypeValues } from \"../../libs/reactVisLib\";\nimport { axisStyle, Kwh, locationTypesAsXAxisFormatter } from \"../ReactVis\";\nimport SidebarChartTitle from '../SidebarChartTitle';\n\nconst EnergyPerChargingSessionDistribution = ({ data }) => { \n\n if (!dataHasNonZeroValues(data)){\n return <>\n }\n\n const strokeWidth = 10;\n\n const {\n zeroToFive,\n fiveToFifteen,\n fifteenToThirty,\n thirtyToSixty,\n sixtyToOneHundred,\n } = {\n zeroToFive: mapDataToLocationTypeValues(data, 0),\n fiveToFifteen: mapDataToLocationTypeValues(data, 1),\n fifteenToThirty: mapDataToLocationTypeValues(data, 2),\n thirtyToSixty: mapDataToLocationTypeValues(data, 3),\n sixtyToOneHundred: mapDataToLocationTypeValues(data, 4),\n };\n\n const legendData = [\n { title: \"0 to 5 kWh\", strokeWidth },\n { title: \"5 to 15 kWh\", strokeWidth },\n { title: \"15 to 30 kWh\", strokeWidth },\n { title: \"30 to 60 kWh\", strokeWidth },\n { title: \"60 to 100 kWh\", strokeWidth },\n ];\n\n const BarSeries = VerticalBarSeries;\n\n return (\n <>\n {data && (\n <>\n \n \n `${v*100} %`} \n tickValues={[0, 0.2, 0.4, 0.6, 0.8, 1]} \n tickTotal={6}\n scale=\"linear\"\n /> \n
\n \n )}\n \n );\n};\n\nexport default EnergyPerChargingSessionDistribution;\n","import React from \"react\";\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalBarSeries,\n DiscreteColorLegend,\n} from \"react-vis\";\nimport { locationTypeName } from \"../../helpers/locationType\";\nimport { axisStyle, locationTypesAsXAxisFormatter } from \"../ReactVis\";\nimport SidebarChartTitle from \"../SidebarChartTitle\";\nimport { dataHasNonZeroValues, ticks } from \"../../libs/reactVisLib\";\n\nconst style = {\n fontSize: \".75rem\",\n text: { stroke: \"none\", fill: \"#fff\" },\n};\n\nconst SessionsByChargingSpeed = ({ data }) => {\n const strokeWidth = 10;\n\n if (!dataHasNonZeroValues(data)){\n return <>\n }\n \n const mapChartFromData = (data, index) => data.map((d) => ({ \n x: locationTypeName(d.locationTypeId), \n y: d.data[index] \n }));\n\n const chartData = {\n zeroToThree: mapChartFromData(data, 0),\n threeToSeven: mapChartFromData(data, 1),\n sevenToTwentyTwo: mapChartFromData(data, 2),\n twentyTwoToFifty: mapChartFromData(data, 3),\n aboveFifty: mapChartFromData(data, 4),\n };\n\n const maxY = Math.max(...data.map((d) => d.data.reduce((accumulator, currentValue) => accumulator + currentValue, 0)));\n\n const {\n zeroToThree,\n threeToSeven,\n sevenToTwentyTwo,\n twentyTwoToFifty,\n aboveFifty,\n } = chartData;\n\n const legendData = [\n { title: \"0 to 3.5 kW\", strokeWidth },\n { title: \"3.5 to 7 kW\", strokeWidth },\n { title: \"7 to 22 kW\", strokeWidth },\n { title: \"22 to 50 kW\", strokeWidth },\n { title: \"Above 50 kW\", strokeWidth },\n ];\n\n const BarSeries = VerticalBarSeries;\n\n return (\n <>\n data && (\n <>\n \n \n
\n \n )\n \n );\n};\n\nexport default SessionsByChargingSpeed;\n","import SessionsByChargingSpeed from \"./SessionsByChargingSpeed\";\n\nexport default SessionsByChargingSpeed;","import React from \"react\";\nimport { RadialChart, DiscreteColorLegend } from \"react-vis\";\n\nconst PieChart = ({ data, legendItems }) => {\n return (\n <>\n \n \n
\n \n )}\n \n );\n};\n\nexport default DailyProfileOfDemand;\n","import DailyProfileOfDemand from \"./DailyProfileOfDemand\";\n\nexport default DailyProfileOfDemand;","import React from \"react\";\nimport {\n XYPlot,\n XAxis,\n YAxis,\n LineSeries,\n HorizontalGridLines,\n DiscreteColorLegend,\n} from \"react-vis\";\nimport \"./energyDemandByYear.css\";\nimport SidebarChartTitle from \"../SidebarChartTitle\";\nimport { locationTypeArr } from \"../../helpers/dataParser\";\nimport groupBy from \"../../libs/groupBy\";\nimport { Kwh } from \"../ReactVis\";\nimport { ticks } from \"../../libs/reactVisLib\";\n\nconst style = {\n fontSize: \".75rem\",\n text: { stroke: \"none\", fill: \"#fff\" },\n};\n\nconst smallStyle = {\n fontSize: \".60rem\",\n text: { stroke: \"none\", fill: \"#fff\" },\n};\n\nconst EnergyDemandByYear = ({ data }) => {\n const strokeWidth = 10;\n console.log(groupBy(data, 'locationTypeId'))\n\n const kwHPerDayByLocation = [...Object.entries(groupBy(data, 'locationTypeId'))]\n .filter(d => d[0] !== '1')\n .map(([key, value]) => { \n const locationType = locationTypeArr.find(l => l.id === Number(key));\n return {\n locationName: locationType.name,\n colour: locationType.colour,\n data: value.map(d => ({\n x: d.year, \n y: d.kwhPerDay,\n })).sort((a, b) => a.x - b.x)\n }\n });\n\n const kwhPerDayTotals = [...Object.entries(groupBy(data, 'year'))]\n .map(d => ({ \n x: d[0], \n y: d[1]\n .filter(y => y.locationTypeId !== 1)\n .reduce((acc, curr) => acc += curr.kwhPerDay, 0) \n })).sort((a,b) => a.x - b.x);\n\n const kwhPerDayWithTotals = [\n ...kwHPerDayByLocation,\n {\n locationName: 'Total',\n colour: '#d46708',\n data: kwhPerDayTotals,\n }\n ];\n\n const legendData = kwhPerDayWithTotals.map(l => ({\n title: l.locationName,\n color: l.colour,\n strokeWidth,\n }));\n\n const maxY = Math.ceil(Math.max(...kwhPerDayTotals.map(d => d.y))/1000)*1000;\n\n const yDomain = [0, maxY];\n\n return (\n <>\n {kwhPerDayWithTotals && (\n <>\n \n \n `${v}`} \n />\n
\n \n )}\n \n );\n};\n\nexport default EnergyDemandByYear;","import EnergyDemandByYear from \"./EnergyDemandByYear\";\n\nexport default EnergyDemandByYear;","import { get } from \"axios\";\nconst { REACT_APP_API_URL } = process.env;\n\nexport const fetchData = async (zone, year, scenarioId, locationTypeIds) => {\n const url = `${REACT_APP_API_URL}/api/heatmap/day/dwell?zone=${zone}&scenarioId=${scenarioId}&year=${year}&locationTypeIds=${locationTypeIds}`;\n\n const {data} = await get(url);\n\n return data;\n};\n","import { get } from \"axios\";\nconst { REACT_APP_API_URL } = process.env;\n\nexport const fetchData = async (zone, year, scenarioId, locationTypeIds) => {\n const url = `${REACT_APP_API_URL}/api/heatmap/day/charge?zone=${zone}&scenarioId=${scenarioId}&year=${year}&locationTypeIds=${locationTypeIds}`;\n\n const {data} = await get(url);\n\n return data;\n\n};\n","import { get } from \"axios\";\nconst { REACT_APP_API_URL } = process.env;\n\nexport const fetchData = async (zone, year, scenarioId, locationTypeIds) => {\n const url = `${REACT_APP_API_URL}/api/heatmap/day/session?zone=${zone}&scenarioId=${scenarioId}&year=${year}&locationTypeIds=${locationTypeIds}`;\n\n const { data } = await get(url);\n\n return data;\n};\n","import { get } from \"axios\";\nconst { REACT_APP_API_URL } = process.env;\n\nexport const fetchHourlyEnergyDemandData = async (zone, year, scenarioId, locationTypeIds) => {\n const url = `${REACT_APP_API_URL}/api/heatmap/hour?zone=${zone}&scenarioId=${scenarioId}&year=${year}&locationTypeIds=${locationTypeIds}`;\n \n const {data} = await get(url);\n\n return data;\n};","import { getGeoJson } from \"./geoServerService\";\nimport { fetchData as fetchDwellData } from \"./dwellTimeService\";\nimport { fetchData as fetchEnergyPerChargingSessionDistributionData } from \"./energyPerChargingSessionDistributionService\";\nimport { fetchData as fetchSessionsByChargingSpeedServiceData } from \"./sessionsByChargingSpeedService\";\nimport { fetchHourlyEnergyDemandData } from './hourlyEnergyDemandService';\n\nconst { REACT_APP_API_URL } = process.env;\n\nexport const fetchLsoaData = async (zonenums, year, scenario, selectedLocationTypes) => {\n const lsoaPromise = getGeoJson({\n url: `${REACT_APP_API_URL}/api/heatmap/zone/${zonenums}`,\n });\n\n const dwellDataPromise = fetchDwellData(\n zonenums,\n year,\n scenario,\n selectedLocationTypes\n );\n\n const energyPerChargingSessionDistributionDataPromise = fetchEnergyPerChargingSessionDistributionData(\n zonenums,\n year,\n scenario,\n selectedLocationTypes\n );\n\n const sessionsByChargingSpeedServicePromise = fetchSessionsByChargingSpeedServiceData(\n zonenums,\n year,\n scenario,\n selectedLocationTypes\n );\n\n const hourlyEnergyDemandPromise = fetchHourlyEnergyDemandData( \n zonenums,\n year,\n scenario,\n selectedLocationTypes,\n ); \n\n const [\n lsoas,\n dwellData,\n energyPerChargingSessionDistributionData,\n sessionsByChargingSpeedServiceData,\n hourlyEnergyDemand,\n ] = await Promise.all([\n lsoaPromise,\n dwellDataPromise,\n energyPerChargingSessionDistributionDataPromise,\n sessionsByChargingSpeedServicePromise,\n hourlyEnergyDemandPromise,\n ]);\n\n return {\n lsoas,\n dwellData,\n energyPerChargingSessionDistributionData,\n sessionsByChargingSpeedServiceData,\n energyDemandPerDay: lsoas\n .filter(\n (l) =>\n l.zoneId === zonenums &&\n l.year === year &&\n l.scenarioId === scenario\n )\n .map((l) => ({\n locationTypeId: l.locationTypeId,\n kwhPerDay: Math.floor(l.kwhPerDay / 10 + 0.5) * 10,\n })),\n hourlyEnergyDemand,\n energyDemandByYear: lsoas\n .filter(\n (l) =>\n l.zoneId === zonenums &&\n l.scenarioId === scenario\n )\n .map((l) => ({\n year: l.year,\n locationTypeId: l.locationTypeId,\n kwhPerDay: l.kwhPerDay,\n }))\n };\n};\n","export const roundToNearest = (value, step) => Math.round(value / step) * step;\n\nexport const roundWithLessThan5 = valueToround => roundToNearest(valueToround, 5) || '<5';\n","import React from 'react';\nimport { Container, Row, Col } from 'reactstrap';\n\nimport { roundToNearest, roundWithLessThan5 } from '../../libs/mathsLib';\nimport EATooltip from '../EATooltip';\nimport { locationTypeArr } from '../../helpers/dataParser';\nimport { Kwh } from \"../ReactVis\";\nimport SidebarChartTitle from '../SidebarChartTitle';\n\nconst locationType = {\n workplace: 3,\n residential: 4,\n destination: 2,\n all: 1,\n};\n\nconst DailyEnergyDemandRows = (dailyEnergyDemand, selectedLocationTypes) => {\n return selectedLocationTypes.map(locationTypeId => {\n const locationType = locationTypeArr.find(l => l.id === locationTypeId);\n return (\n <>\n \n
\n );\n};\n\nexport default LSOAInformation;\n","export const getColor = (metric, data) => {\n return metric.find((p) => p.zonenum === data.properties.zonenum).color;\n};\n\nexport const colorLabel = (evChargingDemandLegendMap, hex) => {\n return Object.values(evChargingDemandLegendMap).find((t) => t.hex === hex)\n .label;\n};\n","import React, { useState, useEffect } from \"react\";\n\nimport DwellTimeDistribution from \"./components/DwellTimeDistribution\";\nimport EnergyPerChargingSessionDistribution from \"./components/EnergyPerChargingSessionDistribution\";\nimport SessionsByChargingSpeed from \"./components/SessionsByChargingSpeed\";\nimport DailyEnergyDemand from \"./components/DailyEnergyDemand\";\n\nimport DailyProfileOfDemand from \"./components/DailyProfileOfDemand\";\nimport EnergyDemandByYear from \"./components/EnergyDemandByYear\";\nimport { fetchLsoaData } from \"./services/lsoaChartDataService\";\nimport LSOADataTable from \"./components/LSOADataTable\";\nimport LSOAInformation from \"./components/LSOAInformation\";\n\nconst LSOAWrapper = ({ \n year, \n scenario,\n selectedLocationTypes,\n selectedFeature\n }) => {\n const zonenums = selectedFeature.properties.zonenum;\n\n const [lsoaData, setLsoaData] = useState();\n const [dailyEnergyDemandData, setDailyEnergyDemandData] = useState();\n const [dwellData, setDwellData] = useState();\n const [\n energyPerChargingSessionDistributionData,\n setEnergyPerChargingSessionDistributionData,\n ] = useState();\n const [\n sessionsByChargingSpeedServiceData,\n setSessionsByChargingSpeedServiceData,\n ] = useState();\n const [hourlyEnergyDemandData, setHourlyEnergyDemandData] = useState();\n const [energyDemandByYearData, setEnergyDemandByYearData] = useState();\n useEffect(() => {\n async function fetchData() {\n\n if(!zonenums)\n return;\n\n const {\n lsoas,\n dwellData,\n energyPerChargingSessionDistributionData,\n sessionsByChargingSpeedServiceData,\n energyDemandPerDay,\n hourlyEnergyDemand,\n energyDemandByYear,\n } = await fetchLsoaData(zonenums, year, scenario, selectedLocationTypes.map(lt => lt.id));\n\n setLsoaData(lsoas);\n setDwellData(dwellData);\n setEnergyPerChargingSessionDistributionData(\n energyPerChargingSessionDistributionData\n );\n setSessionsByChargingSpeedServiceData(sessionsByChargingSpeedServiceData);\n setDailyEnergyDemandData(energyDemandPerDay);\n setHourlyEnergyDemandData(hourlyEnergyDemand);\n setEnergyDemandByYearData(energyDemandByYear);\n\n }\n fetchData();\n }, [zonenums, year, scenario, selectedLocationTypes]);\n\n return !lsoaData ? (\n <>\n ) : (\n <>\n \n LSOA Information\n
\n\n
\n \n LSOA Code: \n {lsoaData && lsoaData[0].code}\n
\n LSOA Postcode: \n {lsoaData && lsoaData[0].postCode}\n
\n Zone Number: \n {lsoaData && lsoaData[0].zoneId}\n
\n Daily energy consumption for selected location types:{\" \"}\n \n {colorLabel(evChargingDemandLegendMap, selectedFeature.color)}\n {\" \"}\n ({kwhPerKm(selectedFeature)} kWh/km2){popover(\"z\")}\n
\n\n Number of charging events per day for selected location types:{\" \"}\n {Math.round(selectedFeature.eventsPerKm2)} per km2\n {popover(\"a\")}\n
\n\n LSOA Charts\n
\n\n {dailyEnergyDemandData && (\n\n LSOA Data\n
\n\n {lsoaData && dailyEnergyDemandData && (\n\n \n `${v}`} \n />\n
\n \n )}\n \n );\n};\n\nexport default EvChart;","import React from \"react\";\nimport {\n XYPlot,\n XAxis,\n YAxis,\n LineSeries,\n HorizontalGridLines,\n DiscreteColorLegend,\n} from \"react-vis\";\nimport \"./evChart.css\";\nimport SidebarChartTitle from \"../SidebarChartTitle\";\nimport { ticks } from \"../../libs/reactVisLib\";\n\nconst style = {\n fontSize: \".75rem\",\n text: { stroke: \"none\", fill: \"#fff\" },\n};\n\nconst smallStyle = {\n fontSize: \".60rem\",\n text: { stroke: \"none\", fill: \"#fff\" },\n};\n\nconst EvChart = ({ links, scenario }) => {\n\n const strokeWidth = 10;\n\n const series = [];\n\n const totalDailyCharging = {\n locationName: 'Total Energy kWh',\n data: links.map(link => ({\n x: link.year,\n y: link[`totalDailyChargingDemand${scenario.toUpperCase()}`]\n }))\n };\n\n if (Math.max(...totalDailyCharging.data.map(coord => coord.y)) > 0) series.push(totalDailyCharging);\n\n const legendData = series.map(s => ({\n title: s.locationName,\n strokeWidth,\n }));\n\n const maxY = Math.ceil(Math.max(...totalDailyCharging.data.map(d => d.y)));\n\n const yDomain = [0, maxY];\n\n return (\n <>\n {series.length > 0 && (\n <>\n \n \n `${v}`} \n />\n
\n \n )}\n \n );\n};\n\nexport default EvChart;","import React from \"react\";\nimport {\n XYPlot,\n XAxis,\n YAxis,\n LineSeries,\n HorizontalGridLines,\n DiscreteColorLegend,\n} from \"react-vis\";\nimport \"./evChart.css\";\nimport SidebarChartTitle from \"../SidebarChartTitle\";\nimport { ticks } from \"../../libs/reactVisLib\";\n\nconst style = {\n fontSize: \".75rem\",\n text: { stroke: \"none\", fill: \"#fff\" },\n};\n\nconst smallStyle = {\n fontSize: \".60rem\",\n text: { stroke: \"none\", fill: \"#fff\" },\n};\n\nconst EvEnrouteChart = ({ links, scenario }) => {\n\n const strokeWidth = 10;\n\n const series = [];\n\n const totalChargingEvs = {\n locationName: 'Total EVs Charging En-Route',\n colour: '#FFFF00',\n data: links.map(link => ({\n x: link.year,\n y: link[`totalChargingEvs${scenario.toUpperCase()}`]\n }))\n };\n \n if (Math.max(...totalChargingEvs.data.map(coord => coord.y)) > 0) series.push(totalChargingEvs);\n\n const legendData = series.map(s => ({\n title: s.locationName,\n strokeWidth,\n color: s.colour \n }));\n\n const maxY = Math.max(...totalChargingEvs.data.map(d => d.y));\n\n const yDomain = [0, maxY];\n\n return (\n <>\n {series.length > 0 && (\n <>\n \n \n `${v}`} \n />\n
\n \n )}\n \n );\n};\n\nexport default EvEnrouteChart;","import React from 'react';\nimport { useRecoilValue } from 'recoil'\nimport { Container, Row, Col } from 'reactstrap';\n\nimport EAPopover from \"../EAPopover\";\n\nimport { yearState } from '../../atom';\n\nconst carsTooltip = `Estimated total number of cars (all types) that travel along the specified link of road each day.`;\nconst evsTooltip = `Estimated total number of EVs that travel along the specified link of road each day.`;\nconst chargingEvsTooltip = `Estimated total number of EVs requiring en-route charging somewhere during their journey that travel along the specified link of road each day. This result can only be used on a per link basis, not summed across links.`;\nconst energyTooltip = `Estimated total energy required for en-route sessions somewhere during their journey by all EVs requiring a charge traveling along the specified link of road each day. This result can only be used on a per link basis, not summed across links.`;\n\nconst popover = (id, description) => (\n \n \n );\n}\nexport default EnrouteDataTable;","import React from \"react\";\n\nimport EAPopover from \"../EAPopover\";\n\nconst EnrouteInformation = ({ data }) => {\n\n const popover = (id) => (\n
\n
\n );\n};\n\nexport default EnrouteInformation;\n","import React, { useState, useEffect } from \"react\";\n\nimport { getTransportLinkData } from './services/transportDataService';\n\nimport { EvChart, EvChargeChart, EvEnrouteChart } from './components/EvChart';\n\nimport EnrouteDataTable from \"./components/EnrouteDataTable\";\nimport EnrouteInformation from \"./components/EnrouteInformation\";\n\nconst EnrouteWrapper = ({ selectedFeature, scenario }) => {\n\n const [ links, setLinks ] = useState(null);\n\n useEffect(() => {\n const getLinks = async () => {\n const links = await getTransportLinkData(selectedFeature.properties['link_fro~1']);\n setLinks(links);\n }\n getLinks();\n }, [ selectedFeature ]);\n\n console.log(links);\n\n const hasData = links && links.some(\n link => Object.entries(link).filter(([key]) => key.startsWith('total')).some(([, value]) => value > 0));\n\n return (\n <>\n \n Road Information\n
\n\n
\n \n {data.roadnumber && \n <>\n Road Name: \n {data.roadnumber}\n
\n \n }\n Link Number: \n {data['link_fro~1']}\n
\n Bidirectional: \n {data.bi_directional ? \"Yes\" : \"No\"}\n {popover('bi')}\n
\n Predicted Road Data\n
\n {links &&\n Predicted Road Charts\n
\n\n Information\n
\n\n
\n \n The data shown in the Network Capacity is based on network modelling and the asset colouring is based on a load flow assessment, made with Debut 2.0, of the thermal and existing voltage capacity of the network. \n
\n\n Reinforcements add expense to the connection costs and take longer to complete.\n
\nSP Energy Networks data is updated on a regular basis.
\n\n Disclaimer: This Network Capacity heatmaps provides a general overview of areas where connections can be made and there is existing capacity for connections. Results are based on thermal and existing voltage drop assessments only. Connections applications will require further assessments to be carried out such as voltage drops due to the new load and fault level at the specified connection site and for the specified connection parameters.\n
\n\n \n
\n );\n};\n\nexport default IconMsg;\n","import ElectricityNetworkCapacityLegend from \"./ElectricityNetworkCapacityLegend\";\n\nexport default ElectricityNetworkCapacityLegend;","import React from \"react\";\nimport { useRecoilValue, useRecoilState } from \"recoil\"\nimport { Button, FormGroup } from \"reactstrap\";\nimport Scrollbar from \"react-scrollbars-custom\";\nimport EvChargingDemandLegend from \"./components/EvChargingDemandLegend\";\nimport SelectPlannedReinforcementYear from \"./components/SelectPlannedReinforcementYear\";\nimport PlannedReinforcementInfo from \"./components/PlannedReinforcementInfo\";\nimport ScenarioControl from \"./components/ScenarioControl\";\nimport FeatureProperties from \"./FeatureProperties\";\nimport LSOAWrapper from \"./LSOAWrapper\";\nimport EnrouteWrapper from \"./EnrouteWrapper\";\nimport MetricInfo from \"./MetricInfo\";\nimport IconMsg from \"./IconMsg\";\nimport { ListGroupItem } from \"reactstrap\";\nimport EACheckboxButtonGroup from \"./components/EACheckboxButtonGroup\";\nimport {\n lvkVAMap,\n hvkVAMap\n} from \"./helpers/lookups\";\nimport Feedback from \"./components/Feedback\";\nimport ElectricityNetworkCapacityLegend from \"./components/ElectricityNetworkCapacityLegend\";\nimport GooglePlacesSearch from \"./GooglePlacesSearch\";\nimport CollapseButton from \"./components/CollapseButton\";\nimport SelectChargerLocationTypes from \"./components/SelectChargerLocationTypes\";\nimport MapLayers from \"./components/MapLayers\";\nimport SmileysFeedback from \"./components/SmileysFeedback\";\nimport PlannedAndInterestLegend from \"./components/PlannedAndInterestLegend\";\n\nimport {\n selectedFeatureState,\n selectedCategoryState,\n scenarioState,\n yearState,\n selectedLsoaLocationTypesState,\n evLegendVisibleState,\n selectedNetworkCapacityLayerNameState,\n selectedKvaState,\n selectedLvKvaState,\n selectedHvKvaState,\n showCapacityLayerState,\n mapLayerTypesState,\n smileyFeedbackSelectedState,\n showPlannedReinforcementLayerState,\n selectedPlannedReinforcementFeatureState\n} from \"./atom\";\n\nconst Metric = ({\n searchResult,\n onToggleShowConsole\n}) => {\n\n const [selectedFeature, setSelectedFeature] = useRecoilState(selectedFeatureState);\n const [selectedPlannedReinforcementFeature, setSelectedPlannedReinforcementFeature] = useRecoilState(selectedPlannedReinforcementFeatureState);\n const [kva, setKva] = useRecoilState(selectedKvaState);\n const [hvKva, setHvKva] = useRecoilState(selectedHvKvaState);\n const [lvKva, setLvKva] = useRecoilState(selectedLvKvaState);\n const [selectedCategory, setSelectedCategory] = useRecoilState(selectedCategoryState);\n const year = useRecoilValue(yearState);\n const scenario = useRecoilValue(scenarioState);\n const selectedLocationTypes = useRecoilValue(selectedLsoaLocationTypesState);\n const evLegendIsVisible = useRecoilValue(evLegendVisibleState);\n const selectedNetworkCapacityName = useRecoilValue(selectedNetworkCapacityLayerNameState);\n const smileyFeedbackSelected = useRecoilValue(smileyFeedbackSelectedState);\n\n const showCapacityMapLayer = useRecoilValue(showCapacityLayerState);\n const showPlannedReinforcementMapLayer = useRecoilValue(showPlannedReinforcementLayerState);\n const mapLayerTypes = useRecoilValue(mapLayerTypesState);\n\n const kvaMap = selectedNetworkCapacityName === \"LV Network Capacity\" ? lvkVAMap : hvkVAMap;\n\n const canDisplayFeature = () => {\n if (selectedCategory === \"EvChargingDemand\") {\n return mapLayerTypes.some(m => m.layer === \"lsoa\" && m.selected) ? true : false;\n }\n if (selectedCategory === \"Roads\") {\n return mapLayerTypes.some(m => m.layer === \"roads\" && m.selected) ? true : false;\n }\n if (selectedCategory === \"NetworkCapacity\") {\n return mapLayerTypes.some(m => (m.layer === \"lv\" || m.layer === \"hv\") && m.selected) ? true : false;\n }\n if (selectedCategory === \"PlannedReinforcement\") {\n return mapLayerTypes.some(m => m.layer === \"plannedReinforcement\" && m.selected) ? true : false;\n }\n return true;\n }\n\n return (\n {text}
\n\n\n
\n );\n};\n\nconst EVChargingDemandDisclaimer = () => {\n return (\n \n \n \n 0 ? 'calc(100% - 360px)' : 'calc(100% - 105px)' }}>\n \n \n {selectedFeature || (selectedPlannedReinforcementFeature && canDisplayFeature()) ? (\n <>\n {selectedCategory === \"NetworkCapacity\" && (\n <>\n \n
\n \n {\n setSelectedFeature(null);\n setSelectedCategory(null);\n setSelectedPlannedReinforcementFeature(null);\n }}\n >\n Previous\n \n
\n {(selectedCategory === \"EvChargingDemand\" || selectedCategory === \"Roads\") && (\n \n \n EV Charging Demand\n
\n )}\n {selectedCategory === \"NetworkCapacity\" && (\n\n \n {selectedNetworkCapacityName !== \"\" ? selectedNetworkCapacityName : \"Network Capacity\"}\n
\n )}\n {selectedCategory === \"PlannedReinforcement\" && (\n\n \n Planned Reinforcement\n
\n )}\n\n {evLegendIsVisible &&\n \n Select capacity to be connected\n \n \n k.value === kva).value}\n size=\"sm\"\n onCheckboxBtnClick={(selected) => {\n setKva(selected.value);\n selectedNetworkCapacityName === \"LV Network Capacity\"\n ? setLvKva(selected.value)\n : setHvKva(selected.value)\n }}\n />\n kVA\n \n \n )}\n {selectedCategory === \"PlannedReinforcement\" && showPlannedReinforcementMapLayer && (\n
\n \n
\n )}\n {selectedCategory === \"Roads\" && (\n \n
\n );\n}\n\nexport default Metric;\n","import DialogModal from \"./DialogModal\";\n\nexport default DialogModal;\n","import React, { useState } from \"react\";\nimport { ButtonGroup, Button, Modal, ModalBody } from \"reactstrap\";\n\nimport { useAppSelector, useAppDispatch } from \"../../app/hooks\";\nimport { selectApp, updateDialog } from \"../../app/appSlice\";\n\nconst DialogModal = ({\n affirmDialogAction = false,\n dismissDialogAction = false,\n}) => {\n const app = useAppSelector(selectApp);\n const dispatch = useAppDispatch();\n\n const [modal, setModal] = useState(true);\n const {\n affirmLabel,\n dismissLabel,\n props,\n messages,\n className,\n hideButtons = false,\n close,\n link,\n } = app.dialog;\n\n const includeLinkInMessage = (message, link) => {\n const before = message.substr(0, message.indexOf(\"[\"));\n const after = message.substring(message.indexOf(\"]\") + 1);\n return (\n <>\n \n {before}\n {link}\n {after}\n \n \n );\n };\n\n const toggle = () => {\n setModal(!modal);\n const timeout = setTimeout(() => {\n dispatch(updateDialog({}));\n }, 10);\n return () => clearTimeout(timeout);\n };\n\n const affirmAction = () => {\n toggle();\n affirmLabel && affirmDialogAction(props);\n };\n\n const dismissAction = () => {\n toggle();\n dismissLabel && dismissDialogAction(props);\n };\n\n return (\n The transport layer in ConnectMore displays a set of scenario-based forecasts for EV charging demand data across the SPEN license area. This data has been derived from a detailed transport model, with demand for public charging based on the number of EVs assumed, their likely trip patterns – including distance and energy consumption, and the likely provision of private, home-based charging.
\nThe EV charging demand data has been derived for a range of possible future situations. This data does not therefore provide a known outcome and should instead be used as a guide to inform decisions such as ‘Based on a plausible number of EVs in 2025, how many charging points might be required in this area?’
\n\n \n
\n );\n};\n\nexport default DialogModal;\n","\nimport React from \"react\";\nimport CollapseButton from \"../CollapseButton/CollapseButton\";\nimport \"./CollapsedBar.css\";\n\nconst CollapsedBar = ({onClick, isExpanded}) => \n \n {messages.length > 1 ? (\n \n {affirmLabel && (\n \n {affirmLabel}\n \n )}\n\n \n \n )}\n \n
\n \n - \n {messages.map((message) => (\n
- {message.description} \n ))}\n
\n
;\n\nexport default CollapsedBar;","import React, { useContext, useState, useEffect } from \"react\";\nimport { Map, TileLayer, Pane } from \"react-leaflet\";\nimport { useRecoilValue } from \"recoil\";\nimport * as L from 'leaflet';\nimport { v4 as uuid } from \"uuid\";\n\nimport { \n configObj as config, \n EV_CHARGING_DEMAND_INITIAL_ZOOM,\n ELECTRICITY_NETWORK_CAPACITY_INITIAL_ZOOM\n} from \"../../config\";\n\nimport {\n getLsoaLayerConfig,\n getRoadsLayerConfig,\n getPlannedReinforcementLayerConfig\n} from \"../../helpers/dataParser\";\nimport { isEmpty } from \"../../helpers/isEmpty\";\n\n// EA components\nimport EAControl from \"../../components/EAControl\";\nimport EAZoomControl from \"../../components/EAZoomControl\";\nimport EAPreloaderScreen from \"../../components/EAPreloaderScreen\";\n\n// Custom components\nimport Sidebar from \"../../Sidebar\";\nimport TransportLayer from \"../../TransportLayer\";\nimport LsoaLayer from \"../../LsoaLayer\";\nimport NetworkCapacityLayer from \"../../NetworkCapacityLayer\";\nimport PlannedReinforcementLayer from \"../../PlannedReinforcementLayer\";\nimport Console from \"../../Console\";\nimport Metric from \"../../Metric\";\nimport DialogModal from \"../../components/DialogModal\";\n\n// Context\nimport { AppContext } from \"../../context/AppContext\";\nimport { useAppSelector } from \"../../app/hooks\";\nimport { selectApp } from \"../../app/appSlice\";\n\n// Styles\nimport \"../../App.css\";\nimport CollapsedBar from \"../../components/CollapsedBar\";\n\nimport { \n selectedCategoryState, \n showLsoaLayerState, \n showRoadsLayerState, \n showCapacityLayerState,\n networkCapacityLayersState\n} from \"../../atom\";\n\nlet map = React.createRef();\n\nvar mapMarkers = [];\n\nfunction ConnectMoreHeatmap({ marginX, marginY }) {\n const app = useAppSelector(selectApp);\n const { dialog } = app;\n const { appState, setAppState } = useContext(AppContext);\n const [id, setId] = useState();\n const [leafletmap, setLeafletmap] = useState();\n const [initLoading ] = useState(false);\n const [loading, setLoading] = useState(false);\n const [zoom, setZoom] = useState();\n\n const lsoaLayerConfig = getLsoaLayerConfig()\n const roadsLayerConfig = getRoadsLayerConfig();\n const plannedReinforcementLayerConfig = getPlannedReinforcementLayerConfig();\n\n const { showConsole } = appState;\n\n const selectedCat = useRecoilValue(selectedCategoryState);\n const showRoadLayer = useRecoilValue(showRoadsLayerState);\n const showLsoaLayer = useRecoilValue(showLsoaLayerState);\n const showCapacityLayer = useRecoilValue(showCapacityLayerState);\n const capacityLayers = useRecoilValue(networkCapacityLayersState);\n\n useEffect(() => {\n setLeafletmap(map.current.leafletElement);\n }, []);\n\n useEffect(() => {\n const leafletmap = map.current.leafletElement; \n L.control.scale({maxWidth:300, imperial:false}).addTo(leafletmap);\n }, []);\n\n useEffect(() => {\n if (showRoadLayer || showCapacityLayer) {\n const newMinZoom = showRoadLayer \n ? EV_CHARGING_DEMAND_INITIAL_ZOOM \n : ELECTRICITY_NETWORK_CAPACITY_INITIAL_ZOOM;\n\n if (zoom < newMinZoom) {\n leafletmap.setZoom(newMinZoom, { animate: false });\n }\n }\n }, [showRoadLayer, showCapacityLayer ])\n\n const _onMoveEnd = (e) => {\n setId(uuid());\n setZoom(e.target.getZoom());\n };\n\n const _onZoomEnd = (e) => {\n setZoom(e.target.getZoom());\n };\n\n const handleSearchResult = (obj) => {\n const viewport = obj.geometry.viewport;\n const northeast = {\n lat: viewport.getNorthEast().lat(),\n lng: viewport.getNorthEast().lng(),\n };\n const southwest = {\n lat: viewport.getSouthWest().lat(),\n lng: viewport.getSouthWest().lng(),\n };\n leafletmap.fitBounds([northeast, southwest]);\n\n var lat = (northeast.lat + southwest.lat) / 2;\n var lng = (northeast.lng + southwest.lng) / 2;\n\n if (mapMarkers !== undefined)\n {\n for(var i = 0; i < mapMarkers.length; i++){\n leafletmap.removeLayer(mapMarkers[i]);\n }\n }\n };\n\n const handleToggleShowConsole = () =>\n setAppState({\n showConsole: !showConsole,\n });\n\n const sideBar = showConsole ? (\n <>\n Heatmap
;\n\nconst ShowRootPage = () => {\n if (config.showBlankRootPage) {\n return{HoldingPage}
;\n }\n\n config.currentClient = null;\n return ConnectMoreHeatmap(\"0\", \"0\");\n}\n\nconst SelectRouting = () => {\n //we can be guaranteed that params.client is populated\n //as SelectRouting is only called if there is a url param.\n const params = useParams();\n var client = params.client.toLowerCase();\n var clients = config.allClients.toLowerCase().split(',');\n\n if (clients.includes(client)) {\n config.currentClient = client;\n var noneEVChargingDemandClients = config.noneEVChargingDemandClients.toLowerCase().split(',');\n config.showEVChargingDemand = (!noneEVChargingDemandClients.includes(client));\n CentreMapForClient(config, client);\n return ConnectMoreHeatmap(\"0\", \"0\");\n }\n\n //if we get this far someone has added a random client text in the URL\n return {HoldingPage}
;\n}\n\nfunction App() {\n return (\n