17 add logos to the plot uob metoffice national centre for atmospheric science

src/components/DensityMap/DensityMap.js

@@ -2,10 +2,10 @@
 import React from "react";
 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"
 
 class DensityMap extends React.Component {
   render() {
@@ -26,6 +26,10 @@ class DensityMap extends React.Component {
     const height = 400;
     const width = this.props.width;
 
+    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: {
@@ -35,6 +39,12 @@ class DensityMap extends React.Component {
       margin: { t: 30, b: 30, l: 30, r: 30 },
       width: width,
       height: height,
+      images: [
+        createImage(openghg, 0.1),
+        createImage(uniOfBristol, 0.22),
+        createImage(metOffice, 0.31),
+        createImage(ncas, 0.41),
+      ],
     };
 
     return (

src/components/LineChart/LineChart.js

@@ -1,8 +1,9 @@
 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"
+
 
 class LineChart extends React.Component {
   render() {
@@ -70,6 +71,11 @@ class LineChart extends React.Component {
 
     const widthScaleFactor = 0.925;
 
+    const uniOfBristol = require(`../../images/UniOfBristolLogo.png`);
+    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,
@@ -110,6 +116,12 @@ class LineChart extends React.Component {
         pad: 5,
       },
       shapes: [dateMarkObject],
+      images: [
+        createImage(openghg, 0.1),
+        createImage(uniOfBristol, 0.22),
+        createImage(metOffice, 0.31),
+        createImage(ncas, 0.41),
+      ],
     };
 
     return (

src/components/MultiSiteLineChart/MultiSiteLineChart.js

@@ -3,6 +3,8 @@ import React from "react";
 import Plot from "react-plotly.js";
 import { toTitleCase } from "../../util/helpers";
 import styles from "./MultiSiteLineChart.module.css";
+import { createImage } from "../../util/helpers"
+
 import colours from "../../data/colours.json";
 
 class MultiSiteLineChart extends React.Component {
@@ -81,6 +83,10 @@ class MultiSiteLineChart extends React.Component {
     }
 
     const widthScaleFactor = 0.925;
+    const uniOfBristol = require(`../../images/UniOfBristolLogo.png`);
+    const metOffice = require(`../../images/Metoffice.png`);
+    const ncas = require(`../../images/ncas.png`);
+    const openghg = require(`../../images/OpenGHG_Logo_Landscape.png`);
 
     const layout = {
       title: {
@@ -92,6 +98,12 @@ class MultiSiteLineChart extends React.Component {
         y: 0.97,
         yanchor: "top",
       },
+      images: [
+        createImage(openghg, 0.1),
+        createImage(uniOfBristol, 0.22),
+        createImage(metOffice, 0.31),
+        createImage(ncas, 0.41),
+      ],
       xaxis: {
         range: this.props.xRange ? this.props.xRange : null,
         showgrid: false,
@@ -134,6 +146,7 @@ class MultiSiteLineChart extends React.Component {
       <div data-testid={"linePlot"} className={styles.container}>
         <Plot data={plotData} layout={layout} />
       </div>
+
     );
   }
 }

src/components/ScatterMap/ScatterMap.js

@@ -4,6 +4,9 @@ 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"
+
 
 class ScatterMap extends React.Component {
   constructor(props) {
@@ -63,12 +66,22 @@ class ScatterMap extends React.Component {
     const width = this.props.width;
     const plotData = this.state.plotData;
 
+    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 } } },
       },
+      images: [
+        createImage(openghg, 0.1),
+        createImage(uniOfBristol, 0.22),
+        createImage(metOffice, 0.31),
+        createImage(ncas, 0.41),
+      ],
       margin: { t: 30, b: 30, l: 30, r: 30 },
       width: width,
       height: height,

src/util/helpers.js

@@ -8,6 +8,27 @@ export function getVisID() {
 export function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
+/**
+ * Creates an image object for the layout.
+ *
+ * @param {string} source - The image source URL.
+ * @param {number} x - The horizontal position of the image.
+ * @param {number} [opacity=0.6] - The opacity of the image.
+ * @returns {Object} The image object for the layout.
+ */
+export function createImage(source, x, opacity = 0.6) {
+  return {
+    source: source,
+    xref: 'paper',
+    yref: 'paper',
+    x: x,
+    y: 0.89,
+    sizex: 0.12,
+    sizey: 0.12,
+    opacity: opacity,
+    xanchor: 'center',
+    yanchor: 'middle',
+  }};
 
 // export function importSVGs() {
 //   let footprints = {};