https://www.richard-stanton.com/assets/js/carbon-intensity/main.js

1function submitPostcode(plottingFcn = adjustPlot) {
2  var postCode = getPostcodeForm()
3  postCode = formatPostcode(postCode)
4  // document.getElementById("postcodeInput").value = postCode
5  updatePageURL(postCode)
6
7  resetPlot()
8  getForecast(postCode, plottingFcn)
9}
10
11function getPostcodeForm() {
12  var postCode = document.getElementById("postcodeInput").value;
13  if (postCode == "") {
14    postCode = document.getElementById("postcodeInput").getAttribute("placeholder");
15  }
16  return postCode
17}
18
19function formatPostcode(postCode) {
20  // limit to first part of the postcode
21  var spacePos = postCode.search(' ')
22  if (spacePos > -1) {
23    postCode = postCode.substring(0, spacePos)
24  }
25  return postCode
26}
27
28function getCarbonIntensityForecast(postcode, plottingFcn) {
29  var today = new Date();
30  datestr = today.toISOString()
31
32  var url = "https://api.carbonintensity.org.uk/regional/intensity/" + datestr + "/fw48h/postcode/" + postcode
33
34  fetch(url)
35    .then(res => {
36      if (!res.ok) {
37        throw new Error('Network response was not ok');
38      }
39      return res.json();
40    })
41    .then(data => processForcast(standardiseCarbonForecast(data), plottingFcn))
42    .catch(err => { throw err });
43}
44
45function getCarbonIntensityData(postcode, plottingFcn) {
46  var today = new Date();
47  datestr = today.toISOString()
48
49  var urls = [['region forecast', "https://api.carbonintensity.org.uk/regional/intensity/" + datestr + "/fw48h/postcode/" + postcode],
50  ['national forecast', "https://api.carbonintensity.org.uk/intensity/" + datestr + "/fw48h"],
51  ['region historic', "https://api.carbonintensity.org.uk/regional/intensity/" + datestr + "/pt24h/postcode/" + postcode],
52  ['national historic', "https://api.carbonintensity.org.uk/intensity/" + datestr + "/pt24h"]]
53
54  urls.forEach(function (url) {
55    fetch(url[1])
56      .then(res => {
57        if (!res.ok) {
58          throw new Error('Network response was not ok');
59        }
60        return res.json();
61      })
62      .then(data => {
63        var stanData = standardiseCarbonForecast(data, seriesName = url[0])
64        var traces = createTraces(stanData)
65        addToPlot(traces)
66      })
67      .catch(err => { throw err });
68  })
69}
70
71
72
73
74function standardiseCarbonForecast(data, seriesName = 'intensity') {
75  // get output format of {date:, intensity:}
76  var outputData = []
77
78  if ('data' in data['data']) {
79    data = data['data']['data']
80  } else {
81    data = data['data']
82  }
83
84  data.forEach(function (element) {
85    var date = new Date(element['from'])
86    var intensity = element['intensity']['forecast']
87    outputData.push({ date: date, [seriesName]: intensity })
88  })
89  return outputData
90}
91
92
93function getForecast(postcode, plottingFcn, source = 'carbon_intensity') {
94  if (source == 'carbon_intensity') {
95    return getCarbonIntensityData(postcode, plottingFcn)
96  }
97}
98
99function processForcast(data, plottingFcn) {
100  var traces = []
101  data.forEach(function (time_series) {
102    traces = traces.concat(createTraces(time_series))
103  })
104  plottingFcn(traces)
105}
106
107function createTraces(data) {
108  var dateList = listFromDicts(data, 'date')
109
110  // create trace for all non-date keys in the data
111  var traces = []
112  Object.keys(data[0]).forEach(function (key) {
113    if (key == 'date') {
114      return
115    }
116    traces.push(createTrace(dateList, listFromDicts(data, key), key))
117  })
118  return traces
119}
120
121function listFromDicts(data, key) {
122  var list = []
123  data.forEach(function (element) {
124    list.push(element[key])
125  })
126  return list
127}
128
129function createTrace(x, y, name, visible = true) {
130  var trace = {
131    type: "scatter",
132    mode: "lines",
133    name: name,
134    x: x,
135    y: y,
136    visible: visible,
137  }
138  return trace
139}
140
141function createPlot(traces) {
142  var layout = {
143    title: plotTitle,
144    height: 800,
145    yaxis: {
146      range: [0, 600],
147    },
148    legend: {
149      x: 0
150    }
151  };
152  updatePlotData(traces)
153  Plotly.newPlot(plotDiv, plotData, layout);
154}
155
156function updatePlotData(traces) {
157  plotData.length = 0
158  traces.forEach(trace => {
159    plotData.push(trace)
160  });
161}
162
163function adjustPlot(traces) {
164  updatePlotData(traces)
165  Plotly.redraw(plotDiv);
166}
167
168function addToPlot(traces) {

169  traces.forEach(trace => {
170    plotData.push(trace)
171  });
172  try {
173    Plotly.redraw(plotDiv);
174  } catch (error) {
175    createPlot(traces);
176  }
177}
178
179function resetPlot() {
180  plotData.length = 0
181}
182
183function findGetParameter(parameterName) {
184  // https://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript
185  var result = null,
186    tmp = [];
187  location.search
188    .substr(1)
189    .split("&")
190    .forEach(function (item) {
191      tmp = item.split("=");
192      if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
193    });
194  return result;
195}
196
197function updatePageURL(postCode) {
198  var path = window.location.pathname;
199  var page = path.split("/").pop();
200
201  history.pushState({}, null, page + "?postcode=" + postCode)
202}
203
204function defaultSetup() {
205  var postCode = findGetParameter('postcode')
206  if (postCode != null) {
207    postCode = formatPostcode(postCode)
208    document.getElementById("postcodeInput").value = postCode
209  }
210  submitPostcode(createPlot)
211}
212
213function handleForm(event) {
214  // prevents submit button refreshing page
215  event.preventDefault();
216  submitPostcode();
217}
218
219// page setup
220var form = document.getElementById("postCodeForm");
221form.addEventListener('submit', handleForm);
222
223const plotDiv = 'plotDiv'
224const plotTitle = ''
225var plotData = []
226
227defaultSetup()