Air quality data [DRAFT]

i18n/en.pot

@@ -228,6 +228,33 @@ msgstr "Heat"
 msgid "Climate change"
 msgstr "Climate change"
 
+msgid "Air quality"
+msgstr "Air quality"
+
+msgid "{{name}}: Carbon monoxide {{period}}"
+msgstr "{{name}}: Carbon monoxide {{period}}"
+
+msgid "Total column carbon monoxide"
+msgstr "Total column carbon monoxide"
+
+msgid "{{name}}: Nitrogen dioxide {{period}}"
+msgstr "{{name}}: Nitrogen dioxide {{period}}"
+
+msgid "Total column nitrogen dioxide"
+msgstr "Total column nitrogen dioxide"
+
+msgid "{{name}}: Particle pollution {{period}}"
+msgstr "{{name}}: Particle pollution {{period}}"
+
+msgid "Particulate matter d < 2.5 um (PM2.5)"
+msgstr "Particulate matter d < 2.5 um (PM2.5)"
+
+msgid "{{name}}: Sulphur dioxide {{period}}"
+msgstr "{{name}}: Sulphur dioxide {{period}}"
+
+msgid "Total column sulphur dioxide"
+msgstr "Total column sulphur dioxide"
+
 msgid ""
 "Temperature anomaly is the difference of a temperature from a reference "
 "value, calculated as the average temperature over a period of 30 years. "
@@ -866,6 +893,9 @@ msgstr "Approximately 31 km (0.25°)"
 msgid "Approximately 9 km (0.1°)"
 msgstr "Approximately 9 km (0.1°)"
 
+msgid "Approximately 40 km"
+msgstr "Approximately 40 km"
+
 msgid "Approximately 5 km (0.05°)"
 msgstr "Approximately 5 km (0.05°)"
 

src/components/Routes.js

@@ -15,6 +15,7 @@ import HumidityDaily from "./explore/humidity/HumidityDaily";
 import HeatMonthly from "./explore/heat/HeatMonthly";
 import HeatDaily from "./explore/heat/HeatDaily";
 import ClimateChange from "./explore/climateChange/ClimateChange";
+import AirQuality from "./explore/airQuality/AirQuality";
 import ImportPage from "./import/ImportPage";
 import SetupPage from "./setup/SetupPage";
 import SettingsPage from "./settings/SettingsPage";
@@ -104,6 +105,17 @@ const tabRoutes = [
       },
     ],
   },
+  {
+    path: "airquality",
+    element: <Tabs />,
+    children: [
+      {
+        // path: ":month/:referencePeriodId",
+        index: true,
+        element: <AirQuality />,
+      },
+    ],
+  },
 ];
 
 const Routes = () => {

src/components/explore/Tabs.js

@@ -13,6 +13,7 @@ const tabs = [
   { id: "humidity", label: i18n.t("Humidity") },
   { id: "heat", label: i18n.t("Heat") },
   { id: "climatechange", label: i18n.t("Climate change") },
+  { id: "airquality", label: i18n.t("Air quality") },
 ];
 
 const Tabs = () => {

src/components/explore/airQuality/AirQuality.js

@@ -0,0 +1,50 @@
+import Chart from "../Chart";
+import DailyPeriodSelect from "../DailyPeriodSelect";
+import DataLoader from "../../shared/DataLoader";
+import Resolution from "../../shared/Resolution";
+import getParticulateMatterConfig from "./charts/particulateMatter";
+import getCarbonMonoxideConfig from "./charts/carbonMonoxide";
+import getNitrogetDioxideConfig from "./charts/nitrogenDioxide";
+import getSulfurDioxideConfig from "./charts/sulfurDioxide";
+import exploreStore from "../../../store/exploreStore";
+import useEarthEngineTimeSeries from "../../../hooks/useEarthEngineTimeSeries";
+import { camsDaily } from "../../../data/datasets";
+
+const filter = [
+  {
+    type: "eq",
+    arguments: ["model_forecast_hour", 0],
+  },
+  {
+    type: "eq",
+    arguments: ["model_initialization_hour", 0],
+  },
+];
+
+const AirQuality = () => {
+  const orgUnit = exploreStore((state) => state.orgUnit);
+  const period = exploreStore((state) => state.dailyPeriod);
+
+  const data = useEarthEngineTimeSeries(camsDaily, period, orgUnit, filter);
+
+  const { name } = orgUnit.properties;
+
+  return (
+    <>
+      {data ? (
+        <>
+          <Chart config={getParticulateMatterConfig(name, data)} />
+          <Chart config={getCarbonMonoxideConfig(name, data)} />
+          <Chart config={getNitrogetDioxideConfig(name, data)} />
+          <Chart config={getSulfurDioxideConfig(name, data)} />
+        </>
+      ) : (
+        <DataLoader />
+      )}
+      <DailyPeriodSelect />
+      <Resolution resolution={camsDaily.resolution} />
+    </>
+  );
+};
+
+export default AirQuality;

src/components/explore/airQuality/charts/carbonMonoxide.js

@@ -0,0 +1,63 @@
+import i18n from "@dhis2/d2-i18n";
+import { colors } from "@dhis2/ui";
+import { animation, credits, getDailyPeriod } from "../../../../utils/chart";
+
+const getChart = (name, data) => {
+  const series = data.map((d) => ({
+    x: new Date(d.id).getTime(),
+    y: d["total_column_carbon_monoxide_surface"] * 1000000,
+  }));
+
+  return {
+    title: {
+      text: i18n.t("{{name}}: Carbon monoxide {{period}}", {
+        name,
+        period: getDailyPeriod(data),
+        nsSeparator: ";",
+      }),
+    },
+    credits,
+    tooltip: {
+      valueSuffix: " mg/m^2",
+    },
+    chart: {
+      type: "column",
+      height: 480,
+      zoomType: "x",
+      marginBottom: 75,
+    },
+    plotOptions: {
+      series: {
+        pointPadding: 0,
+        groupPadding: 0,
+        borderWidth: 0,
+        animation,
+      },
+    },
+    xAxis: {
+      type: "datetime",
+      tickInterval: 2592000000,
+      labels: {
+        format: "{value: %b}",
+      },
+    },
+    yAxis: {
+      min: 0,
+      // max: 0.1,
+      title: false,
+      labels: {
+        format: "{value} mg/m^2",
+      },
+    },
+    series: [
+      {
+        data: series,
+        name: i18n.t("Total column carbon monoxide"),
+        color: colors.yellow800,
+        zIndex: 1,
+      },
+    ],
+  };
+};
+
+export default getChart;

src/components/explore/airQuality/charts/nitrogenDioxide.js

@@ -0,0 +1,63 @@
+import i18n from "@dhis2/d2-i18n";
+import { colors } from "@dhis2/ui";
+import { animation, credits, getDailyPeriod } from "../../../../utils/chart";
+
+const getChart = (name, data) => {
+  const series = data.map((d) => ({
+    x: new Date(d.id).getTime(),
+    y: d["total_column_nitrogen_dioxide_surface"] * 1000000,
+  }));
+
+  return {
+    title: {
+      text: i18n.t("{{name}}: Nitrogen dioxide {{period}}", {
+        name,
+        period: getDailyPeriod(data),
+        nsSeparator: ";",
+      }),
+    },
+    credits,
+    tooltip: {
+      valueSuffix: " mg/m^2",
+    },
+    chart: {
+      type: "column",
+      height: 480,
+      zoomType: "x",
+      marginBottom: 75,
+    },
+    plotOptions: {
+      series: {
+        pointPadding: 0,
+        groupPadding: 0,
+        borderWidth: 0,
+        animation,
+      },
+    },
+    xAxis: {
+      type: "datetime",
+      tickInterval: 2592000000,
+      labels: {
+        format: "{value: %b}",
+      },
+    },
+    yAxis: {
+      min: 0,
+      //  max: 0.1,
+      title: false,
+      labels: {
+        format: "{value} mg/m^2",
+      },
+    },
+    series: [
+      {
+        data: series,
+        name: i18n.t("Total column nitrogen dioxide"),
+        color: colors.yellow800,
+        zIndex: 1,
+      },
+    ],
+  };
+};
+
+export default getChart;

src/components/explore/airQuality/charts/particulateMatter.js

@@ -0,0 +1,63 @@
+import i18n from "@dhis2/d2-i18n";
+import { colors } from "@dhis2/ui";
+import { animation, credits, getDailyPeriod } from "../../../../utils/chart";
+
+const getChart = (name, data) => {
+  const series = data.map((d) => ({
+    x: new Date(d.id).getTime(),
+    y: d["particulate_matter_d_less_than_25_um_surface"] * 1000000,
+  }));
+
+  return {
+    title: {
+      text: i18n.t("{{name}}: Particle pollution {{period}}", {
+        name,
+        period: getDailyPeriod(data),
+        nsSeparator: ";",
+      }),
+    },
+    credits,
+    tooltip: {
+      valueSuffix: " mg/m^3",
+    },
+    chart: {
+      type: "column",
+      height: 480,
+      zoomType: "x",
+      marginBottom: 75,
+    },
+    plotOptions: {
+      series: {
+        pointPadding: 0,
+        groupPadding: 0,
+        borderWidth: 0,
+        animation,
+      },
+    },
+    xAxis: {
+      type: "datetime",
+      tickInterval: 2592000000,
+      labels: {
+        format: "{value: %b}",
+      },
+    },
+    yAxis: {
+      min: 0,
+      max: 0.1,
+      title: false,
+      labels: {
+        format: "{value} mg/m^3",
+      },
+    },
+    series: [
+      {
+        data: series,
+        name: i18n.t("Particulate matter d < 2.5 um (PM2.5)"),
+        color: colors.yellow800,
+        zIndex: 1,
+      },
+    ],
+  };
+};
+
+export default getChart;

src/components/explore/airQuality/charts/sulfurDioxide.js

@@ -0,0 +1,63 @@
+import i18n from "@dhis2/d2-i18n";
+import { colors } from "@dhis2/ui";
+import { animation, credits, getDailyPeriod } from "../../../../utils/chart";
+
+const getChart = (name, data) => {
+  const series = data.map((d) => ({
+    x: new Date(d.id).getTime(),
+    y: d["total_column_sulphur_dioxide_surface"] * 1000000,
+  }));
+
+  return {
+    title: {
+      text: i18n.t("{{name}}: Sulphur dioxide {{period}}", {
+        name,
+        period: getDailyPeriod(data),
+        nsSeparator: ";",
+      }),
+    },
+    credits,
+    tooltip: {
+      valueSuffix: " mg/m^2",
+    },
+    chart: {
+      type: "column",
+      height: 480,
+      zoomType: "x",
+      marginBottom: 75,
+    },
+    plotOptions: {
+      series: {
+        pointPadding: 0,
+        groupPadding: 0,
+        borderWidth: 0,
+        animation,
+      },
+    },
+    xAxis: {
+      type: "datetime",
+      tickInterval: 2592000000,
+      labels: {
+        format: "{value: %b}",
+      },
+    },
+    yAxis: {
+      min: 0,
+      // max: 0.1,
+      title: false,
+      labels: {
+        format: "{value} mg/m^2",
+      },
+    },
+    series: [
+      {
+        data: series,
+        name: i18n.t("Total column sulphur dioxide"),
+        color: colors.yellow800,
+        zIndex: 1,
+      },
+    ],
+  };
+};
+
+export default getChart;