diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..fcac576 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +# Ignore artifacts: +build +coverage + +# Ignore all HTML files: +**/*.html \ No newline at end of file diff --git a/src/Dashboard.js b/src/Dashboard.js index 0321ccd..d690926 100644 --- a/src/Dashboard.js +++ b/src/Dashboard.js @@ -1,6 +1,6 @@ import React from "react"; import { Routes, Route, Link, HashRouter } from "react-router-dom"; -import { cloneDeep, has, set} from "lodash"; +import { cloneDeep, has, set } from "lodash"; import ControlPanel from "./components/ControlPanel/ControlPanel"; import OverlayContainer from "./components/OverlayContainer/OverlayContainer"; @@ -17,7 +17,7 @@ import styles from "./Dashboard.module.css"; import siteInfoJSON from "./data/siteInfo.json"; import deccMeasData from "./data/dash_data_test_200_complete.json"; import { Button, MenuItem } from "@mui/material"; -import LaunchIcon from '@mui/icons-material/Launch'; +import LaunchIcon from "@mui/icons-material/Launch"; class Dashboard extends React.Component { constructor(props) { @@ -156,7 +156,7 @@ class Dashboard extends React.Component { let siteStructure = {}; let defaultSpecies = null; - let defaultSourceKey = 'decc_tac_54m_picarro';; + let defaultSourceKey = "decc_tac_54m_picarro"; let defaultNetwork = null; try { @@ -198,15 +198,12 @@ class Dashboard extends React.Component { const dataKey = `${species}.${sourceKey}`; - - const combinedData = { data: graphData, metadata: metadata}; + const combinedData = { data: graphData, metadata: metadata }; set(processedData, dataKey, combinedData); -; } } } - } } } catch (error) { @@ -324,7 +321,15 @@ class Dashboard extends React.Component {
- +
☰ @@ -352,7 +357,7 @@ class Dashboard extends React.Component { } /> - }/> + } /> {overlay}
diff --git a/src/Dashboard.test.js b/src/Dashboard.test.js index 68edb38..39d4f0b 100644 --- a/src/Dashboard.test.js +++ b/src/Dashboard.test.js @@ -6,7 +6,7 @@ import Dashboard from "./Dashboard"; jest.mock("./util/helpers", () => ({ importSVGs: () => { - return { "1609459200000": "siteName-2021-01-01T00:00:00.svg" }; + return { 1609459200000: "siteName-2021-01-01T00:00:00.svg" }; }, isEmpty: () => false, getVisID: () => "123", @@ -19,16 +19,15 @@ describe("Test Dashboard", () => { expect(screen.getByText("A new system for estimating London's emissions")).toBeInTheDocument(); expect(screen.getByText("Select visualisation type:")).toBeInTheDocument(); expect(screen.getByText("Footprint Analysis")).toBeInTheDocument(); - expect(screen.getByTestId("select-form")).toBeInTheDocument() - + expect(screen.getByTestId("select-form")).toBeInTheDocument(); }); test("Ensure select button selects", () => { render(); expect(screen.getByText("Select visualisation type:")).toBeInTheDocument(); - expect(screen.getByTestId("select-form")).toBeInTheDocument() - + expect(screen.getByTestId("select-form")).toBeInTheDocument(); + userEvent.selectOptions(screen.getByTestId("select-form"), ["footprint"]); expect(screen.getByTestId("sel-footprint").selected).toBe(true); expect(screen.getByTestId("sel-timeseries").selected).toBe(false); @@ -37,11 +36,9 @@ describe("Test Dashboard", () => { userEvent.selectOptions(screen.getByTestId("select-form"), ["timeseries"]); expect(screen.getByTestId("sel-footprint").selected).toBe(false); expect(screen.getByTestId("sel-timeseries").selected).toBe(true); - }); test("Ensure timeseries plotting panel rendered", () => { - render(); userEvent.selectOptions(screen.getByTestId("select-form"), ["timeseries"]); @@ -89,7 +86,6 @@ describe("Test Dashboard", () => { }); test("Ensure footprint analysis rendered", () => { - render(); userEvent.selectOptions(screen.getByTestId("select-form"), ["footprint"]); @@ -99,8 +95,6 @@ describe("Test Dashboard", () => { expect(screen.getByTestId("vis-unit-footprint-plot-CO2-fp-TMB")).toBeInTheDocument(); expect(screen.getByTestId("vis-unit-footprint-plot-CH4-fp-TMB")).toBeInTheDocument(); - expect(screen.getByText("Footprint Analysis")).toBeInTheDocument() - + expect(screen.getByText("Footprint Analysis")).toBeInTheDocument(); }); - }); diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js index 4dc338f..f91cc02 100644 --- a/src/components/Checkbox/Checkbox.js +++ b/src/components/Checkbox/Checkbox.js @@ -6,16 +6,13 @@ class Checkbox extends React.Component { render() { return (
-
- {this.props.label} -
+
{this.props.label}
{ test("Check ticking calls function", () => { const fn = jest.fn(); - render( - - ); + render(); const checkbox = screen.getByTestId("testbox"); diff --git a/src/components/ControlPanel/ControlPanel.js b/src/components/ControlPanel/ControlPanel.js index a27dee6..334fdc7 100644 --- a/src/components/ControlPanel/ControlPanel.js +++ b/src/components/ControlPanel/ControlPanel.js @@ -32,8 +32,11 @@ class ControlPanel extends React.Component { return (
- - +
DECC Network Dashboard
diff --git a/src/components/ControlPanel/ControlPanel.test.js b/src/components/ControlPanel/ControlPanel.test.js index 3795fc9..be6e771 100644 --- a/src/components/ControlPanel/ControlPanel.test.js +++ b/src/components/ControlPanel/ControlPanel.test.js @@ -63,9 +63,8 @@ // userEvent.selectOptions(screen.getByTestId("select-form"), ["footprint"]); // expect(screen.getByTestId("sel-footprint").selected).toBe(true); // expect(screen.getByTestId("sel-timeseries").selected).toBe(false); - + // expect(sel_fn).toHaveBeenCalledTimes(1); // }); - // }); diff --git a/src/components/DataSelector/DataSelector.test.js b/src/components/DataSelector/DataSelector.test.js index 7f0cf7c..ed2aab4 100644 --- a/src/components/DataSelector/DataSelector.test.js +++ b/src/components/DataSelector/DataSelector.test.js @@ -18,29 +18,29 @@ describe("Test DataSelector", () => { expect(screen.getByTestId("AAA_test_c")).toBeInTheDocument(); }); - test("Check ticking and clicking plot", () => { - const fn = jest.fn(); + test("Check ticking and clicking plot", () => { + const fn = jest.fn(); - render(); + render(); - const checkboxA = screen.getByTestId("AAA_test_a"); - const checkboxB = screen.getByTestId("AAA_test_b"); - const checkboxC = screen.getByTestId("AAA_test_c"); + const checkboxA = screen.getByTestId("AAA_test_a"); + const checkboxB = screen.getByTestId("AAA_test_b"); + const checkboxC = screen.getByTestId("AAA_test_c"); - expect(checkboxA).not.toBeChecked(); - expect(checkboxB).not.toBeChecked(); - expect(checkboxC).not.toBeChecked(); + expect(checkboxA).not.toBeChecked(); + expect(checkboxB).not.toBeChecked(); + expect(checkboxC).not.toBeChecked(); - userEvent.click(checkboxA); - userEvent.click(checkboxB); - userEvent.click(checkboxC); + userEvent.click(checkboxA); + userEvent.click(checkboxB); + userEvent.click(checkboxC); - expect(checkboxA).toBeChecked(); - expect(checkboxB).toBeChecked(); - expect(checkboxC).toBeChecked(); + expect(checkboxA).toBeChecked(); + expect(checkboxB).toBeChecked(); + expect(checkboxC).toBeChecked(); - userEvent.click(screen.getByRole("button", { name: /plot/i })); + userEvent.click(screen.getByRole("button", { name: /plot/i })); - expect(fn).toHaveBeenCalledTimes(1); - }); + expect(fn).toHaveBeenCalledTimes(1); + }); }); diff --git a/src/components/DensityMap/DensityMap.js b/src/components/DensityMap/DensityMap.js index e295df8..4ebcfca 100644 --- a/src/components/DensityMap/DensityMap.js +++ b/src/components/DensityMap/DensityMap.js @@ -4,8 +4,8 @@ import Plot from "react-plotly.js"; import { extend } from "lodash"; import styles from "./DensityMap.module.css"; import ch4MobileGlasgow from "../../data/ch4_mobile_glasgow.json"; -import { createImage } from "../../util/helpers" -import openghg from "../../images/OpenGHG_Logo_Landscape.png" +import { createImage } from "../../util/helpers"; +import openghg from "../../images/OpenGHG_Logo_Landscape.png"; class DensityMap extends React.Component { render() { @@ -29,13 +29,13 @@ class DensityMap extends React.Component { const uniOfBristol = require(`../../images/UniOfBristolLogo.png`); const metOffice = require(`../../images/Metoffice.png`); const ncas = require(`../../images/ncas.png`); - + const layout = { mapbox: { center: { lon: -4.212836, lat: 55.843658 }, style: "open-street-map", zoom: 10 }, coloraxis: { colorscale: "Viridis", colorbar: { title: { side: "right", text: "Methane (ppb)", font: { size: 16 } } }, - }, + }, margin: { t: 30, b: 30, l: 30, r: 30 }, width: width, height: height, diff --git a/src/components/DynamicDimensions/DynamicDimensions.js b/src/components/DynamicDimensions/DynamicDimensions.js index 4b6097f..123da6b 100644 --- a/src/components/DynamicDimensions/DynamicDimensions.js +++ b/src/components/DynamicDimensions/DynamicDimensions.js @@ -50,7 +50,7 @@ DynamicDimensions.propTypes = { children: PropTypes.node.isRequired, divID: PropTypes.string.isRequired, heightScale: PropTypes.string, - widthScale: PropTypes.string -} + widthScale: PropTypes.string, +}; export default DynamicDimensions; diff --git a/src/components/EmissionsBox/EmissionsBox.js b/src/components/EmissionsBox/EmissionsBox.js index f32d59b..c4e95d1 100644 --- a/src/components/EmissionsBox/EmissionsBox.js +++ b/src/components/EmissionsBox/EmissionsBox.js @@ -147,41 +147,39 @@ class EmissionsBox extends React.Component { [61.908634740966804, 4.908553108520451], ]; - const midpointLat = overlayBounds[0][0] + (overlayBounds[1][0] - overlayBounds[0][0]) / 2 - const midpointLon = overlayBounds[0][1] + (overlayBounds[1][1] - overlayBounds[0][1]) / 2 - const overlayMidpoint = [midpointLat, midpointLon] - const mapstyle = `proton` + const midpointLat = overlayBounds[0][0] + (overlayBounds[1][0] - overlayBounds[0][0]) / 2; + const midpointLon = overlayBounds[0][1] + (overlayBounds[1][1] - overlayBounds[0][1]) / 2; + const overlayMidpoint = [midpointLat, midpointLon]; + const mapstyle = `proton`; // const emissionsText = `Emission locations from the National Atmospheric Emissions Inventory (NAEI). Maps generated using ukghg model.`; return (
- +
-
+
{speciesButtons}
-
-
- +
+
{sectorButtons}
diff --git a/src/components/EmissionsExplainer/EmissionsExplainer.js b/src/components/EmissionsExplainer/EmissionsExplainer.js index 7310494..5c75358 100644 --- a/src/components/EmissionsExplainer/EmissionsExplainer.js +++ b/src/components/EmissionsExplainer/EmissionsExplainer.js @@ -12,29 +12,36 @@ class EmissionsExplainer extends React.Component { const style = this.props.nogap ? styles.containerNoGap : styles.container; return ( -
-
Emissions
-
- On the live dashboard page we showed measured concentrations of carbon dioxide and - methane gases in the atmosphere for each location. What we would really like - to know is where these greenhouse gases are being emitted.
- There are two primary methods for estimating greenhouse gas emissions: -
    -
  1. Inventory methods, in which emissions are estimated using socioeconomic data (e.g., the amount of fuel sold and used in the UK).
    2. -
  2. Atmospheric data-based methods, in which concentration data and atmospheric models are compared to determine whether the inventory is accurate.
    3. -
- A map showing the location of the UK's carbon dioxide and methane emissions, according to the inventory, - is shown here split by significant sector. -
+
+
Emissions
+
+ On the live dashboard page we showed measured concentrations of carbon dioxide and methane gases in the + atmosphere for each location. What we would really like to know is where these greenhouse gases are being + emitted. +
+ There are two primary methods for estimating greenhouse gas emissions: +
    +
  1. + Inventory methods, in which emissions are estimated using socioeconomic data (e.g., the amount of + fuel sold and used in the UK). +
    2. +
  2. + Atmospheric data-based methods, in which concentration data and atmospheric models are compared to + determine whether the inventory is accurate. +
    3. +
+ A map showing the location of the UK's carbon dioxide and methane emissions, according to the inventory, is + shown here split by significant sector.
+
); } } EmissionsExplainer.propTypes = { - explain: PropTypes.string, - header: PropTypes.string, - intro: PropTypes.string, - }; + explain: PropTypes.string, + header: PropTypes.string, + intro: PropTypes.string, +}; -export default EmissionsExplainer; \ No newline at end of file +export default EmissionsExplainer; diff --git a/src/components/Explainer/Explainer.js b/src/components/Explainer/Explainer.js index a4d39b7..a6ab83a 100644 --- a/src/components/Explainer/Explainer.js +++ b/src/components/Explainer/Explainer.js @@ -3,7 +3,7 @@ import React from "react"; import ExplanationBox from "../ExplanationBox/ExplanationBox"; import EstimatesExplainer from "../EstimatesExplainer/EstimatesExplainer"; import EmissionsBox from "../EmissionsBox/EmissionsBox"; -import EmissionsExplainer from "../EmissionsExplainer/EmissionsExplainer" +import EmissionsExplainer from "../EmissionsExplainer/EmissionsExplainer"; import styles from "../../Dashboard.module.css"; @@ -17,13 +17,7 @@ class Explainer extends React.Component { createEmissionsBox() { const emissionsHeader = "Emissions"; const emissionsText = `Emissions from the National Atmospheric Emissions Inventory (NAEI).`; - return ( - - ); + return ; } // createEmissionsExplainer() { @@ -55,7 +49,7 @@ class Explainer extends React.Component { const body = `To start with we can use inventory emissions as our initial “best guess” and compare this to real atmospheric measurements. We can then run simulations to make repeated small changes to the possible emissions to better match the measurements made at each site. - The animation below illustrates this process, using the UK DECC network site in Tacolneston, Norfolk.` + The animation below illustrates this process, using the UK DECC network site in Tacolneston, Norfolk.`; return ; } @@ -91,7 +85,7 @@ class Explainer extends React.Component { , BEIS, 2019
-
+
); } } diff --git a/src/components/FAQ/FAQ.js b/src/components/FAQ/FAQ.js index e35726c..e0bf0e6 100644 --- a/src/components/FAQ/FAQ.js +++ b/src/components/FAQ/FAQ.js @@ -1,7 +1,7 @@ import React from "react"; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; import { Typography } from "@mui/material"; class FAQ extends React.Component { @@ -65,60 +65,61 @@ class FAQ extends React.Component { return (
- + Frequently Asked Questions - + Q1: {Q1} {A1} - - + + Q2: {Q2} {A2} - - + + Q3: {Q3} {A3} - - + + Q4: {Q4} {A4} - - - + + + Q5: {Q5} {A5} - - - + + + Q6: {Q6} {A6} - - + + Q7: {Q7} {A7} - - + + Q8: {Q8} {A8} -
+
); - };} + } +} export default FAQ; diff --git a/src/components/FootprintAnalysis/FootprintAnalysis.js b/src/components/FootprintAnalysis/FootprintAnalysis.js index 0b3c89e..f671ce9 100644 --- a/src/components/FootprintAnalysis/FootprintAnalysis.js +++ b/src/components/FootprintAnalysis/FootprintAnalysis.js @@ -141,7 +141,7 @@ FootprintAnalysis.propTypes = { measurementData: PropTypes.object, siteData: PropTypes.object, width: PropTypes.string, - zoom: PropTypes.number.isRequired -} + zoom: PropTypes.number.isRequired, +}; export default FootprintAnalysis; diff --git a/src/components/LeafletMap/LeafletMap.js b/src/components/LeafletMap/LeafletMap.js index 15b3adc..6481c92 100644 --- a/src/components/LeafletMap/LeafletMap.js +++ b/src/components/LeafletMap/LeafletMap.js @@ -21,97 +21,87 @@ class LeafletMap extends React.Component { } createMarkers() { - const processedData = this.props.processedData; const siteStructure = this.props.siteStructure; const selectedSpecies = this.props.selectedSpecies; let markers = []; - if(siteStructure !== undefined && processedData !== undefined){ + if (siteStructure !== undefined && processedData !== undefined) { const speciesStructure = siteStructure[selectedSpecies]; - const speciesData = processedData[selectedSpecies]; - - - - // We want a marker for each site, with selection buttons within the popup - for (const siteData of Object.values(speciesStructure)) { - for (const inletData of Object.values(siteData)) { - let marker = null; - let sourceButtons = []; - // The site metadata we require will be the same for each inlet / instrument - let siteMetadata = null; - - const buttonStyling = { fontSize: "0.8em", width:"0.8em" }; - - for (const [inlet, instrumentData] of Object.entries(inletData)) { - for (const sourceKey of Object.values(instrumentData)) { - const button = ( - - {inlet} - - ); - - sourceButtons.push(button); - - if (!siteMetadata) { - siteMetadata = speciesData[sourceKey]["metadata"]; + const speciesData = processedData[selectedSpecies]; + + // We want a marker for each site, with selection buttons within the popup + for (const siteData of Object.values(speciesStructure)) { + for (const inletData of Object.values(siteData)) { + let marker = null; + let sourceButtons = []; + // The site metadata we require will be the same for each inlet / instrument + let siteMetadata = null; + + const buttonStyling = { fontSize: "0.8em", width: "0.8em" }; + + for (const [inlet, instrumentData] of Object.entries(inletData)) { + for (const sourceKey of Object.values(instrumentData)) { + const button = ( + + {inlet} + + ); + + sourceButtons.push(button); + + if (!siteMetadata) { + siteMetadata = speciesData[sourceKey]["metadata"]; + } } - } - } - try { - const station_latitude = siteMetadata["station_latitude"]; - const station_longitude = siteMetadata["station_longitude"]; - - const locationStr = `${station_latitude}, ${station_longitude}`; - const location = [station_latitude, station_longitude]; - const siteName = siteMetadata["station_long_name"]; - - marker = ( - - -
-
-
{siteName.toUpperCase()}
-
- Select inlet: - {sourceButtons}
-
- For more information please visit the  - - the DECC network website. - + try { + const station_latitude = siteMetadata["station_latitude"]; + const station_longitude = siteMetadata["station_longitude"]; + + const locationStr = `${station_latitude}, ${station_longitude}`; + const location = [station_latitude, station_longitude]; + const siteName = siteMetadata["station_long_name"]; + + marker = ( + + +
+
+
{siteName.toUpperCase()}
+
+ Select inlet: + {sourceButtons} +
+
+ For more information please visit the  + + the DECC network website. + +
+
Location: {locationStr}
-
Location: {locationStr}
-
- - - ); - - markers.push(marker); - } catch (error) { - console.log(error); - continue; + + + ); + + markers.push(marker); + } catch (error) { + console.log(error); + continue; + } } } } - - } return markers; } @@ -137,7 +127,7 @@ class LeafletMap extends React.Component { const markers = this.createMarkers(); const zoom = this.props.zoom ? this.props.zoom : 5; - const style = { width: "90%"}; + const style = { width: "90%" }; return (
diff --git a/src/components/LeafletMap/LeafletMap.test.js b/src/components/LeafletMap/LeafletMap.test.js index 2c0c571..51ad459 100644 --- a/src/components/LeafletMap/LeafletMap.test.js +++ b/src/components/LeafletMap/LeafletMap.test.js @@ -6,11 +6,10 @@ import siteData from "../../data/siteMetadata.json"; describe("Test LineChart", () => { test("Check correct chart rendered", () => { - const { asFragment} = render( + const { asFragment } = render( ); - expect(asFragment()).toMatchSnapshot() - + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/src/components/LineChart/LineChart.js b/src/components/LineChart/LineChart.js index 3c71772..cabb24e 100644 --- a/src/components/LineChart/LineChart.js +++ b/src/components/LineChart/LineChart.js @@ -2,8 +2,7 @@ import PropTypes from "prop-types"; import React from "react"; import Plot from "react-plotly.js"; import styles from "./LineChart.module.css"; -import { createImage } from "../../util/helpers" - +import { createImage } from "../../util/helpers"; class LineChart extends React.Component { render() { @@ -75,7 +74,7 @@ class LineChart extends React.Component { const metOffice = require(`../../images/Metoffice.png`); const ncas = require(`../../images/ncas.png`); const openghg = require(`../../images/OpenGHG_Logo_Landscape.png`); - + const layout = { title: { text: this.props.title ? this.props.title : null, diff --git a/src/components/LineChart/d3LineChart.js b/src/components/LineChart/d3LineChart.js index 47b5baf..afb7b64 100644 --- a/src/components/LineChart/d3LineChart.js +++ b/src/components/LineChart/d3LineChart.js @@ -92,11 +92,7 @@ const draw = (props) => { ); // Add the x-axis to the svg - svg - .append("g") - .attr("class", "x-axis") - .attr("transform", `translate(0, ${height})`) - .call(d3.axisBottom(x)); + svg.append("g").attr("class", "x-axis").attr("transform", `translate(0, ${height})`).call(d3.axisBottom(x)); // Add the y-axis svg.append("g").attr("class", "y-axis").call(d3.axisLeft(y).ticks(4)); diff --git a/src/components/MobileExplainer/MobileExplainer.js b/src/components/MobileExplainer/MobileExplainer.js index f4bb4a2..eb6a17c 100644 --- a/src/components/MobileExplainer/MobileExplainer.js +++ b/src/components/MobileExplainer/MobileExplainer.js @@ -11,9 +11,9 @@ class MobileExplainer extends React.Component {
Mobile methane study
- This map shows methane detected by a mobile study completed in August, 2021. - Methane was measured using a car-mounted instrument which was driven 350km around Glasgow to gather this data. - The diameter of the circles on the map is related to the size of the methane emissions measured. + This map shows methane detected by a mobile study completed in August, 2021. Methane was measured using a + car-mounted instrument which was driven 350km around Glasgow to gather this data. The diameter of the circles + on the map is related to the size of the methane emissions measured.

{ const chartContainer = document.getElementById("chart-container"); - let filenames = [species, ...sites].join('_'); - + let filenames = [species, ...sites].join("_"); + if (chartContainer) { html2canvas(chartContainer).then((canvas) => { const imgData = canvas.toDataURL("image/png"); - + const link = document.createElement("a"); link.href = imgData; link.download = `${filenames}.png`; @@ -34,8 +34,8 @@ class MultiSiteLineChart extends React.Component { console.error("Chart container not found."); } }; - - /* + + /* This method takes care of downloading the Plot on the website in format of PDF It fetches the html tag for plot and converts to PDF @@ -43,7 +43,7 @@ class MultiSiteLineChart extends React.Component { handleDownloadPDF = (species, sites) => { // Here we fetch the html element of chart-container that needs to be downloaded by id. const chartContainer = document.getElementById("chart-container"); - let filenames = [species, ...sites].join('_'); + let filenames = [species, ...sites].join("_"); if (chartContainer) { html2canvas(chartContainer).then((canvas) => { @@ -51,15 +51,15 @@ class MultiSiteLineChart extends React.Component { const chartWidth = chartContainer.offsetWidth; const chartHeight = chartContainer.offsetHeight; - + const pdf = new jsPDF({ orientation: chartWidth > chartHeight ? "landscape" : "portrait", unit: "mm", format: [chartWidth, chartHeight], }); - + pdf.addImage(imgData, "JPEG", 0, 0, chartWidth, chartHeight); - + pdf.save(filenames); }); } else { @@ -106,18 +106,18 @@ class MultiSiteLineChart extends React.Component { const colour = colours["pastelColours"]; units = metadata["units"]; - species = metadata["species"] - + species = metadata["species"]; + if (units === undefined) { - if (species === 'ch4' || species === 'co' || species === 'n2o') { - units = 'ppb'; - } else if (species === 'co2') { - units = 'ppm'; + if (species === "ch4" || species === "co" || species === "n2o") { + units = "ppb"; + } else if (species === "co2") { + units = "ppm"; } else { units = metadata["units"]; } } - + const trace = { x: xValues, y: yValues, @@ -138,8 +138,8 @@ class MultiSiteLineChart extends React.Component { using regex to remove and "-" within the name */ let sites = []; - sites = plotData.map(item => item.name); - sites = sites.map(item => item.replace(/<\/?b>/g, '').replace(/\s*-\s*/g, '')); + sites = plotData.map((item) => item.name); + sites = sites.map((item) => item.replace(/<\/?b>/g, "").replace(/\s*-\s*/g, "")); let dateMarkObject = null; const selectedDate = this.props.selectedDate; @@ -165,7 +165,7 @@ class MultiSiteLineChart extends React.Component { const metOffice = require(`../../images/Metoffice.png`); const ncas = require(`../../images/ncas.png`); const openghg = require(`../../images/OpenGHG_Logo_Landscape.png`); - + const layout = { title: { text: this.props.title ? this.props.title : null, @@ -188,7 +188,6 @@ class MultiSiteLineChart extends React.Component { linecolor: "black", autotick: true, ticks: "outside", - }, yaxis: { automargin: true, @@ -196,8 +195,8 @@ class MultiSiteLineChart extends React.Component { text: `${species.toUpperCase()} (${units})`, standoff: 10, font: { - size:16, - } + size: 16, + }, }, range: this.props.yRange ? this.props.yRange : null, showgrid: false, @@ -229,26 +228,26 @@ class MultiSiteLineChart extends React.Component {
- + size="small" + variant="contained" + color="primary" + startIcon={} + onClick={() => this.handleDownloadPNG(species, sites)} + style={{ width: "20px", height: "20px" }} + > + PNG +
); diff --git a/src/components/ObsBox/ObsBox.js b/src/components/ObsBox/ObsBox.js index 03e19f8..6cd1bba 100644 --- a/src/components/ObsBox/ObsBox.js +++ b/src/components/ObsBox/ObsBox.js @@ -6,7 +6,7 @@ import MultiSiteLineChart from "../MultiSiteLineChart/MultiSiteLineChart"; import { isEmpty, getVisID } from "../../util/helpers"; import styles from "./ObsBox.module.css"; -import SelectOptions from "../SelectOptions/SelectOptions" +import SelectOptions from "../SelectOptions/SelectOptions"; import { Button } from "@mui/material"; class ObsBox extends React.Component { @@ -85,7 +85,11 @@ class ObsBox extends React.Component { let clearButton = null; if (siteSelected) { - clearButton = ; + clearButton = ( + + ); } const availableSpecies = Object.keys(this.props.processedData); @@ -95,11 +99,11 @@ class ObsBox extends React.Component {
{this.createEmissionsGraphs()}
{clearButton}
- +
); diff --git a/src/components/ObsExplainer/ObsExplainer.js b/src/components/ObsExplainer/ObsExplainer.js index ce5ff57..f3216ee 100644 --- a/src/components/ObsExplainer/ObsExplainer.js +++ b/src/components/ObsExplainer/ObsExplainer.js @@ -9,7 +9,9 @@ class ObsExplainer extends React.Component { return (
-
Atmospheric Monitoring & Verification of the UK’s GHG Inventory
+
+ Atmospheric Monitoring & Verification of the UK’s GHG Inventory +
  • The UK DECC (Deriving Emissions linked to Climate Change) Network consists of four sites in the UK and diff --git a/src/components/ScatterMap/ScatterMap.js b/src/components/ScatterMap/ScatterMap.js index b899f24..9a0437f 100644 --- a/src/components/ScatterMap/ScatterMap.js +++ b/src/components/ScatterMap/ScatterMap.js @@ -4,9 +4,8 @@ import Plot from "react-plotly.js"; import styles from "./ScatterMap.module.css"; import ch4MobileGlasgow from "../../data/ch4_mobile_glasgow.json"; -import { createImage } from "../../util/helpers" -import openghg from "../../images/OpenGHG_Logo_Landscape.png" - +import { createImage } from "../../util/helpers"; +import openghg from "../../images/OpenGHG_Logo_Landscape.png"; class ScatterMap extends React.Component { constructor(props) { @@ -69,7 +68,7 @@ class ScatterMap extends React.Component { const uniOfBristol = require(`../../images/UniOfBristolLogo.png`); const metOffice = require(`../../images/Metoffice.png`); const ncas = require(`../../images/ncas.png`); - + const layout = { mapbox: { center: { lon: -4.212836, lat: 55.843658 }, style: "open-street-map", zoom: 10 }, coloraxis: { diff --git a/src/components/SelectOptions/SelectOptions.js b/src/components/SelectOptions/SelectOptions.js index e0a3871..571c5ac 100644 --- a/src/components/SelectOptions/SelectOptions.js +++ b/src/components/SelectOptions/SelectOptions.js @@ -13,25 +13,19 @@ class SelectOptions extends React.Component { render() { return ( - - Select Species - - {this.props.options.map((option) => { - const label = option.toUpperCase(); - return ( - - {label} - - ); - })} - - - + + Select Species + + {this.props.options.map((option) => { + const label = option.toUpperCase(); + return ( + + {label} + + ); + })} + + ); } } diff --git a/src/components/Sidepanel/SidePanel.js b/src/components/Sidepanel/SidePanel.js index 907bc6f..724a500 100644 --- a/src/components/Sidepanel/SidePanel.js +++ b/src/components/Sidepanel/SidePanel.js @@ -6,19 +6,14 @@ class SidePanel extends React.Component { render() { return (
    - +
    - +
  • @@ -28,17 +23,16 @@ class SidePanel extends React.Component {
  • -
    • diff --git a/src/components/TextButton/TextButton.js b/src/components/TextButton/TextButton.js index 5b02721..e0bee72 100644 --- a/src/components/TextButton/TextButton.js +++ b/src/components/TextButton/TextButton.js @@ -24,7 +24,7 @@ class TextButton extends React.Component { return (