Skip to content

Commit

Permalink
feat: climate charts for location
Browse files Browse the repository at this point in the history
  • Loading branch information
@turban
turban committed Oct 18, 2023
1 parent d811099 commit edcb6c4
Show file tree
Hide file tree
Showing 5 changed files with 8,644 additions and 0 deletions.
120 changes: 120 additions & 0 deletions src/components/climate/ClimateChange.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'
import React, { useRef, useEffect } from 'react'
import Highcharts from 'highcharts'

Check failure on line 4 in src/components/climate/ClimateChange.js

View workflow job for this annotation

GitHub Actions / lint 

`highcharts` import should occur before import of `prop-types`

const months = {
'01': i18n.t('Jauary'),
'02': i18n.t('February'),
'03': i18n.t('March'),
'04': i18n.t('April'),
'05': i18n.t('May'),
'06': i18n.t('June'),
'07': i18n.t('July'),
'08': i18n.t('August'),
'09': i18n.t('September'),
10: i18n.t('October'),
11: i18n.t('November'),
12: i18n.t('December'),
}

// https://climate.copernicus.eu/copernicus-september-2023-unprecedented-temperature-anomalies
// https://developers.google.com/earth-engine/datasets/catalog/ECMWF_ERA5_LAND_MONTHLY_AGGR
// https://developers.google.com/earth-engine/datasets/catalog/NASA_GDDP-CMIP6
// https://developers.google.com/earth-engine/datasets/catalog/NASA_NEX-GDDP
const ClimateChange = ({ data }) => {
const chartRef = useRef()

useEffect(() => {
if (data && chartRef.current) {
const lastMonth = data.slice(-1)[0].id.substring(5, 7)
const month = months[lastMonth]

const monthData = data.filter(
(d) => d.id.substring(5, 7) === lastMonth
)

const normal =
monthData
.filter((d) => {
const year = d.id.substring(0, 4)
return year >= 1991 && year <= 2020
})
.reduce((v, d) => v + d['temperature_2m'], 0) /
30 -
273.15

const years = monthData.map((d) => d.id.substring(0, 4))

const series = monthData.map(
(d) =>
Math.round((d['temperature_2m'] - 273.15 - normal) * 10) /
10
)

// console.log('normal', normal, series, years)

Highcharts.chart(chartRef.current, {
title: {
text: `Temperature anomalies - ${month}`,
},
subtitle: {
text: '',
},
credits: {
enabled: false,
},
exporting: {
enabled: false,
},
tooltip: {
shared: true,
},
plotOptions: {
column: {
pointWidth: 13,
pointPadding: 0,
borderWidth: 1,
},
},
chart: {
type: 'column',
},
xAxis: {
type: 'category',
categories: years,
labels: {
format: '{value: %b}',
},
},
yAxis: {
title: false,
labels: {
format: '{value}°C',
},
},
series: [
{
data: series,
name: 'Monthly temperature',
color: '#C60000',
negativeColor: '#0088FF',
},
],
legend: { enabled: false },
})
}
}, [data, chartRef])

if (!data) {
return <div>{i18n.t('Loading weather data')}...</div>
}

return <div ref={chartRef}>Climate change</div>
}

ClimateChange.propTypes = {
data: PropTypes.array,
}

export default ClimateChange
81 changes: 81 additions & 0 deletions src/components/climate/Precipitation.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'
import React, { useRef, useEffect } from 'react'
import Highcharts from 'highcharts'

const Precipitation = ({ data }) => {
const chartRef = useRef()

useEffect(() => {
if (data && chartRef.current) {
// Last 12 months
const series = data.slice(-12).map((d) => ({
x: new Date(d.id).getTime(),
y: Math.round(d['total_precipitation_sum'] * 1000 * 10) / 10,
}))

Highcharts.chart(chartRef.current, {
title: {
text: 'Precipitation last year',
},
subtitle: {
text: '',
},
credits: {
enabled: false,
},
exporting: {
enabled: false,
},
tooltip: {
shared: true,
},
/*
plotOptions: {
column: {
pointWidth: 2,
pointPadding: 0.2,
borderWidth: 0,
},
},
*/
chart: {
type: 'column',
},
xAxis: {
type: 'datetime',
tickInterval: 2592000000,
labels: {
format: '{value: %b}',
},
},
yAxis: {
min: 0,
title: false,
labels: {
format: '{value} mm',
},
},
series: [
{
data: series,
name: 'Monthly precipitation',
// color: '#C60000',
},
],
})
}
}, [data, chartRef])

if (!data) {
return <div>{i18n.t('Loading weather data')}...</div>
}

return <div ref={chartRef}></div>
}

Precipitation.propTypes = {
data: PropTypes.array,
}

export default Precipitation
79 changes: 79 additions & 0 deletions src/components/climate/Temperature.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'
import React, { useRef, useEffect } from 'react'
import Highcharts from 'highcharts'

const Temperature = ({ data }) => {
const chartRef = useRef()

useEffect(() => {
if (data && chartRef.current) {
// Last 12 months
const series = data.slice(-12).map((d) => ({
x: new Date(d.id).getTime(),
y: Math.round((d['temperature_2m'] - 273.15) * 10) / 10,
}))

// console.log(data)

Highcharts.chart(chartRef.current, {
title: {
text: 'Temperatures last year',
},
subtitle: {
text: '',
},
credits: {
enabled: false,
},
exporting: {
enabled: false,
},
tooltip: {
shared: true,
},
plotOptions: {
series: {
turboThreshold: 0,
},
},
chart: {
type: 'line',
},
xAxis: {
type: 'datetime',
tickInterval: 2592000000,
labels: {
format: '{value: %b}',
},
},
yAxis: {
// min: 0,
title: false,
labels: {
format: '{value}°C',
},
},
series: [
{
data: series,
name: 'Monthly temperature',
color: '#C60000',
},
],
})
}
}, [data, chartRef])

if (!data) {
return <div>{i18n.t('Loading weather data')}...</div>
}

return <div ref={chartRef}></div>
}

Temperature.propTypes = {
data: PropTypes.array,
}

export default Temperature
Loading

0 comments on commit edcb6c4

Please sign in to comment.