diff --git a/src/App.vue b/src/App.vue
index 86359a7..a092f76 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,6 +28,7 @@
             <b-dropdown-item :disabled="menuItemsDisabled" :to="{ name: 'visualization-map' }"><BIconPinMapFill /> {{ $t('menuVisualizationMap') }}</b-dropdown-item>
           </b-nav-item-dropdown>
           <b-nav-item :disabled="menuItemsDisabled" :active="$route.name === 'trial-export'" :to="{ name: 'trial-export' }"><BIconCloudDownload /> {{ $t('menuDataExport') }}</b-nav-item>
+          <b-nav-item :active="$route.name === 'data-statistics'" :to="{ name: 'data-statistics' }"><BIconClipboardData /> {{ $t('menuDataStatistics') }}</b-nav-item>
           <b-nav-item :active="$route.name === 'settings'" :to="{ name: 'settings' }"><BIconGear /> {{ $t('menuSettings') }}</b-nav-item>
         </b-navbar-nav>
 
@@ -124,7 +125,7 @@ import { VuePlausible } from 'vue-plausible'
 import Vue from 'vue'
 import { axiosCall, getServerSettings } from '@/plugins/api'
 
-import { BIconInfoCircle, BIconFlag, BIconHouse, BIconGear, BIconGithub, BIconGlobe2, BIconTwitter, BIconUiChecksGrid, BIconGraphUp, BIconPinMapFill, BIconGridFill, BIconBarChartSteps, BIconEasel, BIconMoon, BIconSun, BIconCloudDownload } from 'bootstrap-vue'
+import { BIconInfoCircle, BIconFlag, BIconHouse, BIconGear, BIconGithub, BIconGlobe2, BIconClipboardData, BIconTwitter, BIconUiChecksGrid, BIconGraphUp, BIconPinMapFill, BIconGridFill, BIconBarChartSteps, BIconEasel, BIconMoon, BIconSun, BIconCloudDownload } from 'bootstrap-vue'
 import { getId } from '@/plugins/id'
 import { gridScoreVersion } from '@/plugins/constants'
 import { isOffline } from '@/plugins/misc'
@@ -150,6 +151,7 @@ export default {
     BIconPinMapFill,
     BIconSun,
     BIconCloudDownload,
+    BIconClipboardData,
     BIconGithub,
     BIconGlobe2,
     BIconTwitter,
diff --git a/src/components/charts/DataCalendarHeatmapChart.vue b/src/components/charts/DataCalendarHeatmapChart.vue
new file mode 100644
index 0000000..94e50d8
--- /dev/null
+++ b/src/components/charts/DataCalendarHeatmapChart.vue
@@ -0,0 +1,179 @@
+<template>
+  <div ref="wrapper">
+    <div ref="chart" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+const Plotly = require('plotly.js/lib/core')
+
+// Only register the chart types we're actually using to reduce the final bundle size
+Plotly.register([
+  require('plotly.js/lib/heatmap')
+])
+
+export default {
+  props: {
+    chartData: {
+      type: Map,
+      default: () => new Map()
+    }
+  },
+  data: function () {
+    return {
+      width: 1000
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'storeLocale',
+      'storeDarkMode'
+    ]),
+    dateFormat: function () {
+      return new Intl.DateTimeFormat(this.storeLocale || 'en', { month: 'short' })
+    },
+    months: function () {
+      if (this.dateFormat) {
+        return [...Array(12).keys()].map(m => this.dateFormat.format(new Date(Date.UTC(2000, m, 1, 0, 0, 0)))).reverse()
+      } else {
+        return []
+      }
+    },
+    isHorizontal: function () {
+      return this.width < 720
+    }
+  },
+  watch: {
+    isHorizontal: function () {
+      this.update()
+    },
+    storeDarkMode: function () {
+      this.update()
+    },
+    chartData: function () {
+      this.update()
+    }
+  },
+  methods: {
+    update: function () {
+      try {
+        Plotly.purge(this.$refs.chart)
+      } catch {
+      }
+
+      let z = [
+        new Array(31).fill(0),
+        new Array(30).fill(0),
+        new Array(31).fill(0),
+        new Array(30).fill(0),
+        new Array(31).fill(0),
+        new Array(31).fill(0),
+        new Array(30).fill(0),
+        new Array(31).fill(0),
+        new Array(30).fill(0),
+        new Array(31).fill(0),
+        new Array(29).fill(0),
+        new Array(31).fill(0)
+      ]
+
+      let max = 0
+
+      this.chartData.forEach((value, key) => {
+        const d = new Date(key)
+        z[11 - d.getMonth()][d.getDate() - 1] = value
+
+        max = Math.max(max, value)
+      })
+
+      const x = Array.from(Array(31).keys()).map(i => i + 1)
+      const y = this.months
+
+      if (this.isHorizontal) {
+        z = z[0].map((col, i) => z.reverse().map(row => row[i]))
+      }
+
+      const data = [{
+        z: z,
+        x: this.isHorizontal ? y.reverse() : x,
+        y: this.isHorizontal ? x : y,
+        name: '',
+        type: 'heatmap',
+        hoverongaps: false,
+        xgap: 1,
+        ygap: 1,
+        colorscale: [
+          [0, this.storeDarkMode ? '#2f2f2f' : '#e4e4e4'],
+          [1, '#00a0f1']
+        ],
+        colorbar: {
+          title: {
+            side: 'right',
+            font: { color: this.storeDarkMode ? 'white' : 'black' }
+          },
+          tickfont: { color: this.storeDarkMode ? 'white' : 'black' },
+          orientation: this.isHorizontal ? 'h' : 'v'
+        },
+        hovertemplate: '%{x}. %{y}: %{z}'
+      }]
+
+      let xAxis = {
+        showgrid: false,
+        tickmode: 'array',
+        // nticks: 31,
+        tickvals: Array.from(Array(31).keys()).map(i => i + 1),
+        title: { text: this.$t('widgetChartHeatmapAxisTitleDay'), font: { color: this.storeDarkMode ? 'white' : 'black' } },
+        tickfont: { color: this.storeDarkMode ? 'white' : 'black' }
+      }
+      let yAxis = {
+        showgrid: false,
+        title: { text: this.$t('widgetChartHeatmapAxisTitleMonth'), font: { color: this.storeDarkMode ? 'white' : 'black' } },
+        tickfont: { color: this.storeDarkMode ? 'white' : 'black' }
+      }
+
+      if (this.isHorizontal) {
+        [xAxis, yAxis] = [yAxis, xAxis]
+      }
+
+      const layout = {
+        height: this.isHorizontal ? 800 : 500,
+        margin: {
+          t: 0
+        },
+        paper_bgcolor: 'transparent',
+        plot_bgcolor: 'transparent',
+        xaxis: xAxis,
+        yaxis: yAxis
+      }
+
+      const config = {
+        responsive: true,
+        displaylogo: false
+      }
+
+      Plotly.newPlot(this.$refs.chart, data, layout, config)
+    },
+    onResize: function () {
+      this.width = this.$refs.wrapper.clientWidth
+    }
+  },
+  beforeDestroy: function () {
+    try {
+      Plotly.purge(this.$refs.chart)
+    } catch {
+    }
+
+    window.removeEventListener('resize', this.onResize)
+  },
+  mounted: function () {
+    this.onResize()
+    window.addEventListener('resize', this.onResize)
+    this.update()
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/plugins/color.js b/src/plugins/color.js
new file mode 100644
index 0000000..1d98789
--- /dev/null
+++ b/src/plugins/color.js
@@ -0,0 +1,52 @@
+/**
+ * Converts a HEX value into an RGB object
+ * @param {String} hex The hex color
+ */
+const hexToRgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null
+}
+
+const rgbToHex = (c) => `#${((1 << 24) + (c.r << 16) + (c.g << 8) + c.b).toString(16).slice(1)}`
+
+/**
+ * Determines the best text color (either white or black) given the background color
+ * @param {String} backgroundColor The background color in HEX
+ */
+const getHighContrastTextColor = (backgroundColor) => {
+  if (backgroundColor) {
+    const rgb = hexToRgb(backgroundColor)
+    if (!rgb) {
+      return 'black'
+    }
+    const o = Math.round(((rgb.r * 299) + (rgb.g * 587) + (rgb.b * 114)) / 1000)
+    return (o > 125) ? 'black' : 'white'
+  } else {
+    return 'black'
+  }
+}
+
+const shadeColor = (hex, percent) => {
+  const rgb = hexToRgb(hex)
+
+  let r = parseInt(rgb.r * (100 + percent) / 100)
+  let g = parseInt(rgb.g * (100 + percent) / 100)
+  let b = parseInt(rgb.b * (100 + percent) / 100)
+
+  r = (r < 255) ? r : 255
+  g = (g < 255) ? g : 255
+  b = (b < 255) ? b : 255
+
+  r = Math.round(r)
+  g = Math.round(g)
+  b = Math.round(b)
+
+  return rgbToHex({ r, g, b })
+}
+
+export {
+  getHighContrastTextColor,
+  shadeColor,
+  hexToRgb,
+  rgbToHex
+}
diff --git a/src/plugins/i18n/de_DE.json b/src/plugins/i18n/de_DE.json
index 1f40302..835761f 100644
--- a/src/plugins/i18n/de_DE.json
+++ b/src/plugins/i18n/de_DE.json
@@ -316,6 +316,7 @@
   "menuDataEntry": "Dateneingabe",
   "menuDataExport": "Exportieren",
   "menuDataVisualization": "Datenvisualisierung",
+  "menuDataStatistics": "Datenstatistiken",
   "menuToggleDarkMode": "Dark-Mode umschalten",
   "menuLocale": "Sprache",
   "menuAbout": "Über",
@@ -792,5 +793,25 @@
   "widgetGuideOrderTabZigzag": "Zickzack",
   "widgetGuideOrderTabSnake": "Schlangenförmig",
   "widgetTraitInputPreviousMeasures": "Vorheriger Wert ({date}): <strong><span style='color: {color}'>{values}</span></strong>",
-  "widgetTraitInputCurrentMeasures": "Aktueller Wert ({date}): <strong><span style='color: {color}'>{values}</span></strong>"
+  "widgetTraitInputCurrentMeasures": "Aktueller Wert ({date}): <strong><span style='color: {color}'>{values}</span></strong>",
+  "widgetTrialDataStatsPlots": "{count} Beete bewertet",
+  "widgetTrialDataStatsTraits": "{count} Merkmale bewertet",
+  "widgetTrialDataStatsComments": "{count} Kommentare aufgezeichnet",
+  "widgetTrialDataStatsEvents": "{count} Ereignisse aufgezeichnet",
+  "widgetTrialDataStatsMeasurements": "{count} Messungen aufgezeichnet",
+  "widgetTrialDataStatsArea": "{area} {unit} abgedeckt",
+  "widgetTrialDataStatsAreaUnknown": "Unbekannte Fläche",
+  "areaUnitMeter": "Quadratmeter",
+  "areaUnitKilometer": "Quadratkilometer",
+  "areaUnitHectare": "Hektar",
+  "areaUnitAcre": "Acker",
+  "areaUnitMiles": "Quadratmeilen",
+  "areaUnitFoot": "Quadratfuß",
+  "areaUnitYard": "Quadratyard",
+  "pageDataStatisticsTitle": "Übersichtsstatistiken",
+  "pageDataStatisticsText": "Diese Seite zeigt eine statistische Sicht auf die Versuche auf diesem Gerät. Wähle die Versuche zum darstellen unten aus.",
+  "formLabelDataStatsTrial": "Versuch auswählen",
+  "formLabelDataStatsAreaUnit": "Flächeneinheit auswählen",
+  "widgetChartHeatmapAxisTitleMonth": "Monat",
+  "widgetChartHeatmapAxisTitleDay": "Tag"
 }
diff --git a/src/plugins/i18n/en_GB.json b/src/plugins/i18n/en_GB.json
index b261b6f..f6ba1eb 100644
--- a/src/plugins/i18n/en_GB.json
+++ b/src/plugins/i18n/en_GB.json
@@ -325,6 +325,7 @@
   "menuDataEntry": "Data entry",
   "menuDataExport": "Export",
   "menuDataVisualization": "Data visualizations",
+  "menuDataStatistics": "Data statistics",
   "menuToggleDarkMode": "Toggle dark mode",
   "menuLocale": "Locale",
   "menuAbout": "About",
@@ -803,5 +804,25 @@
   "widgetGuideOrderTabZigzag": "Zig-zag",
   "widgetGuideOrderTabSnake": "Snake",
   "widgetTraitInputPreviousMeasures": "Previous measurement ({date}): <strong><span style='color: {color}'>{values}</span></strong>",
-  "widgetTraitInputCurrentMeasures": "Current measurement ({date}): <strong><span style='color: {color}'>{values}</strong>"
+  "widgetTraitInputCurrentMeasures": "Current measurement ({date}): <strong><span style='color: {color}'>{values}</strong>",
+  "widgetTrialDataStatsPlots": "{count} plots scored",
+  "widgetTrialDataStatsTraits": "{count} traits scored",
+  "widgetTrialDataStatsComments": "{count} comments recorded",
+  "widgetTrialDataStatsEvents": "{count} events recorded",
+  "widgetTrialDataStatsMeasurements": "{count} measurements taken",
+  "widgetTrialDataStatsArea": "{area} {unit} covered",
+  "widgetTrialDataStatsAreaUnknown": "Unknown area",
+  "areaUnitMeter": "Square metres",
+  "areaUnitKilometer": "Square kilometres",
+  "areaUnitHectare": "Hectare",
+  "areaUnitAcre": "Acres",
+  "areaUnitMiles": "Square miles",
+  "areaUnitFoot": "Square feet",
+  "areaUnitYard": "Square yards",
+  "pageDataStatisticsTitle": "Overview statistics",
+  "pageDataStatisticsText": "This page gives you a statistical view onto the trials on your device. Select the trials to visualize below.",
+  "formLabelDataStatsTrial": "Select trial",
+  "formLabelDataStatsAreaUnit": "Select area unit",
+  "widgetChartHeatmapAxisTitleMonth": "Month",
+  "widgetChartHeatmapAxisTitleDay": "Day"
 }
diff --git a/src/plugins/location.js b/src/plugins/location.js
index ff54c26..8326f90 100644
--- a/src/plugins/location.js
+++ b/src/plugins/location.js
@@ -81,7 +81,7 @@ const trialLayoutToPlots = (corners, rows, cols) => {
   return result
 }
 
-const plotInfoToGeoJson = (plotInfo) => {
+const plotInfoToGeoJson = (plotInfo, includePoints = true) => {
   const geoJson = {
     type: 'FeatureCollection',
     features: []
@@ -104,7 +104,7 @@ const plotInfoToGeoJson = (plotInfo) => {
             ]]
           }
         })
-      } else if (p.center) {
+      } else if (p.center && includePoints) {
         geoJson.features.push({
           type: 'Feature',
           geometry: {
@@ -188,6 +188,49 @@ const isGeographyValid = (geography) => {
   return topLeft && topRight && bottomRight && bottomLeft
 }
 
+const removeMiddle = (a, b, c) => {
+  const cross = (a.x - b.x) * (c.y - b.y) - (a.y - b.y) * (c.x - b.x)
+  const dot = (a.x - b.x) * (c.x - b.x) + (a.y - b.y) * (c.y - b.y)
+  return cross < 0 || (cross === 0 && dot <= 0)
+}
+
+const convexHull = (points) => {
+  points.sort((a, b) => a.x !== b.x ? a.x - b.x : a.y - b.y)
+
+  const n = points.length
+  const hull = []
+
+  for (let i = 0; i < 2 * n; i++) {
+    const j = i < n ? i : 2 * n - 1 - i
+    while (hull.length >= 2 && removeMiddle(hull[hull.length - 2], hull[hull.length - 1], points[j])) {
+      hull.pop()
+    }
+    hull.push(points[j])
+  }
+
+  hull.pop()
+  return hull
+}
+
+const toRadians = (angleInDegrees) => (angleInDegrees * Math.PI) / 180
+
+const geodesicArea = (latLngs) => {
+  let area = 0
+  const len = latLngs.length
+  let x1 = latLngs[latLngs.length - 1].lng
+  let y1 = latLngs[latLngs.length - 1].lat
+
+  for (let i = 0; i < len; i++) {
+    const x2 = latLngs[i].lng
+    const y2 = latLngs[i].lat
+    area += toRadians(x2 - x1) * (2 + Math.sin(toRadians(y1)) + Math.sin(toRadians(y2)))
+    x1 = x2
+    y1 = y2
+  }
+
+  return Math.abs((area * 6378137.0 * 6378137.0) / 2.0)
+}
+
 export {
   euclideanSpace,
   projectToEuclidean,
@@ -197,5 +240,7 @@ export {
   plotInfoToGeoJson,
   isLocationValid,
   isGeographyValid,
-  isGeographyAllNull
+  isGeographyAllNull,
+  convexHull,
+  geodesicArea
 }
diff --git a/src/router/index.js b/src/router/index.js
index db81edb..04b663d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -93,6 +93,10 @@ const routes = [
     path: '/visualization/map',
     name: 'visualization-map',
     component: () => import('@/views/VizMapView.vue')
+  }, {
+    path: '/data-statistics',
+    name: 'data-statistics',
+    component: () => import('@/views/DataStatistics.vue')
   }
 ]
 
diff --git a/src/views/DataStatistics.vue b/src/views/DataStatistics.vue
new file mode 100644
index 0000000..8f67da8
--- /dev/null
+++ b/src/views/DataStatistics.vue
@@ -0,0 +1,456 @@
+<template>
+  <div>
+    <b-container fluid class="my-4">
+      <h1 class="display-4">{{ $t('pageDataStatisticsTitle') }}</h1>
+      <p>{{ $t('pageDataStatisticsText') }}</p>
+
+      <b-row>
+        <b-col cols=12 md=6>
+          <b-form-group :label="$t('formLabelDataStatsTrial')" label-for="trials">
+            <b-form-select id="trials" multiple v-model="selectedTrials" :options="trialOptions" />
+          </b-form-group>
+        </b-col>
+        <b-col cols=12 md=6>
+          <b-form-group :label="$t('formLabelDataStatsAreaUnit')" label-for="areaunit">
+            <b-form-select id="areaunit" v-model="areaUnit" :options="areaUnitOptions" />
+          </b-form-group>
+        </b-col>
+      </b-row>
+
+      <template v-if="selectedTrials && selectedTrials.length > 0">
+        <div v-for="trial in selectedTrials" :key="`trial-${trial.localId}`">
+          <hr />
+
+          <h2>{{ trial.name }}</h2>
+
+          <b-row class="my-3 text-center" v-if="stats[trial.localId]">
+            <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
+              <b-card class="h-100 bg-dark text-light">
+                <h3 class="mb-0" :style="{ color: storeTraitColors[0] }"><BIconUiChecksGrid /></h3>
+                <span>{{ $t('widgetTrialDataStatsPlots', { count: (stats[trial.localId].plots || 0).toLocaleString() }) }}</span>
+              </b-card>
+            </b-col>
+            <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
+              <b-card class="h-100 bg-dark text-light">
+                <h3 class="mb-0" :style="{ color: storeTraitColors[1] }"><BIconTags /></h3>
+                <span>{{ $t('widgetTrialDataStatsTraits', { count: (stats[trial.localId].traits || 0).toLocaleString() }) }}</span>
+              </b-card>
+            </b-col>
+            <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
+              <b-card class="h-100 bg-dark text-light">
+                <h3 class="mb-0" :style="{ color: storeTraitColors[2] }"><BIconChatLeftText /></h3>
+                <span>{{ $t('widgetTrialDataStatsComments', { count: (stats[trial.localId].comments || 0).toLocaleString() }) }}</span>
+              </b-card>
+            </b-col>
+            <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
+              <b-card class="h-100 bg-dark text-light">
+                <h3 class="mb-0" :style="{ color: storeTraitColors[3] }"><BIconFlag /></h3>
+                <span>{{ $t('widgetTrialDataStatsEvents', { count: (stats[trial.localId].events || 0).toLocaleString() }) }}</span>
+              </b-card>
+            </b-col>
+            <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
+              <b-card class="h-100 bg-dark text-light">
+                <h3 class="mb-0" :style="{ color: storeTraitColors[4] }"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-123" viewBox="0 0 16 16">
+                  <path d="M2.873 11.297V4.142H1.699L0 5.379v1.137l1.64-1.18h.06v5.961zm3.213-5.09v-.063c0-.618.44-1.169 1.196-1.169.676 0 1.174.44 1.174 1.106 0 .624-.42 1.101-.807 1.526L4.99 10.553v.744h4.78v-.99H6.643v-.069L8.41 8.252c.65-.724 1.237-1.332 1.237-2.27C9.646 4.849 8.723 4 7.308 4c-1.573 0-2.36 1.064-2.36 2.15v.057zm6.559 1.883h.786c.823 0 1.374.481 1.379 1.179.01.707-.55 1.216-1.421 1.21-.77-.005-1.326-.419-1.379-.953h-1.095c.042 1.053.938 1.918 2.464 1.918 1.478 0 2.642-.839 2.62-2.144-.02-1.143-.922-1.651-1.551-1.714v-.063c.535-.09 1.347-.66 1.326-1.678-.026-1.053-.933-1.855-2.359-1.845-1.5.005-2.317.88-2.348 1.898h1.116c.032-.498.498-.944 1.206-.944.703 0 1.206.435 1.206 1.07.005.64-.504 1.106-1.2 1.106h-.75z"/>
+                </svg></h3>
+                <span>{{ $t('widgetTrialDataStatsMeasurements', { count: (stats[trial.localId].measurements || 0).toLocaleString() }) }}</span>
+              </b-card>
+            </b-col>
+            <b-col cols=6 md=4 lg=3 xl=2 class="mb-3">
+              <b-card class="h-100 bg-dark text-light">
+                <h3 class="mb-0" :style="{ color: storeTraitColors[5] }"><BIconBoundingBoxCircles /></h3>
+                <span v-if="stats[trial.localId].area">{{ $t('widgetTrialDataStatsArea', { area: (areaUnits[areaUnit].convert(stats[trial.localId].area) || 0).toLocaleString(), unit: areaUnits[areaUnit].unit }) }}</span>
+                <span v-else>{{ $t('widgetTrialDataStatsAreaUnknown') }}</span>
+              </b-card>
+            </b-col>
+          </b-row>
+          <b-row v-if="stats[trial.localId] && stats[trial.localId].measurements">
+            <b-col cols=12 md=6 v-if="chartData && chartData[trial.localId] && Object.keys(chartData[trial.localId]).length > 0">
+              <div v-for="year in Object.keys(chartData[trial.localId])" :key="`trial-${trial.localId}-year-${year}`">
+                <h3>{{ year }}</h3>
+                <DataCalendarHeatmapChart :chartData="chartData[trial.localId][year]" />
+              </div>
+            </b-col>
+            <b-col cols=12 md=6>
+              <div :ref="`map-${trial.localId}`" class="data-map" />
+            </b-col>
+          </b-row>
+        </div>
+      </template>
+    </b-container>
+  </div>
+</template>
+
+<script>
+import DataCalendarHeatmapChart from '@/components/charts/DataCalendarHeatmapChart'
+import { BIconUiChecksGrid, BIconTags, BIconBoundingBoxCircles, BIconChatLeftText, BIconFlag } from 'bootstrap-vue'
+
+import { mapGetters } from 'vuex'
+import { getTrialData, getTrials } from '@/plugins/idb'
+import { getNumberWithSuffix, toLocalDateString } from '@/plugins/misc'
+import { convexHull, geodesicArea } from '@/plugins/location'
+
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+
+// Set the leaflet marker icon
+delete L.Icon.Default.prototype._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+})
+
+let plotInfo = {}
+
+export default {
+  components: {
+    DataCalendarHeatmapChart,
+    BIconUiChecksGrid,
+    BIconTags,
+    BIconBoundingBoxCircles,
+    BIconChatLeftText,
+    BIconFlag
+  },
+  data: function () {
+    return {
+      trials: [],
+      selectedTrials: [],
+      chartData: null,
+      stats: {},
+      areaUnit: 'meter'
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'storeDarkMode',
+      'storeMapLayer',
+      'storeTraitColors'
+    ]),
+    trialOptions: function () {
+      return this.trials.map(t => {
+        return {
+          text: t.name,
+          value: t
+        }
+      })
+    },
+    areaUnitOptions: function () {
+      if (this.areaUnits) {
+        const result = []
+
+        Object.keys(this.areaUnits).forEach(au => {
+          result.push({
+            text: this.areaUnits[au].text,
+            value: au
+          })
+        })
+
+        result.sort((a, b) => a.text.localeCompare(b.text))
+
+        return result
+      } else {
+        return []
+      }
+    },
+    areaUnits: function () {
+      return {
+        meter: {
+          text: this.$t('areaUnitMeter'),
+          convert: (v) => v,
+          unit: 'm²'
+        },
+        kilometer: {
+          text: this.$t('areaUnitKilometer'),
+          convert: (v) => v / 1_000_000.0,
+          unit: 'km²'
+        },
+        hectare: {
+          text: this.$t('areaUnitHectare'),
+          convert: (v) => v / 10_000.0,
+          unit: 'hectare'
+        },
+        acre: {
+          text: this.$t('areaUnitAcre'),
+          convert: (v) => v * 0.000247,
+          unit: 'acres'
+        },
+        miles: {
+          text: this.$t('areaUnitMiles'),
+          convert: (v) => v * 3.861e-7,
+          unit: 'sq mi'
+        },
+        foot: {
+          text: this.$t('areaUnitFoot'),
+          convert: (v) => v * 10.76391,
+          unit: 'sq ft'
+        },
+        yard: {
+          text: this.$t('areaUnitYard'),
+          convert: (v) => v * 1.19599,
+          unit: 'sq yd'
+        }
+      }
+    }
+  },
+  watch: {
+    storeDarkMode: function () {
+      this.updateThemeLayer()
+    },
+    selectedTrials: async function (newValue) {
+      const calendarData = {}
+      const tempStats = {}
+      plotInfo = {}
+
+      for (const trial of newValue) {
+        const d = await getTrialData(trial.localId)
+
+        tempStats[trial.localId] = {
+          plots: new Set(),
+          traits: new Set(),
+          measurements: 0,
+          comments: (trial.comments || []).length,
+          events: (trial.events || []).length,
+          area: 0,
+          areaUnit: 'meter'
+        }
+        calendarData[trial.localId] = {}
+        plotInfo[trial.localId] = []
+
+        Object.values(d).forEach(plot => {
+          Object.keys(plot.measurements).forEach(t => {
+            const m = plot.measurements[t]
+
+            if (m.length > 0) {
+              tempStats[trial.localId].traits.add(t)
+              tempStats[trial.localId].plots.add(`${t.localId}|${plot.row}|${plot.column}`)
+            }
+
+            m.forEach(mm => {
+              const date = toLocalDateString(mm.timestamp)
+              const d = new Date(date)
+              const year = d.getFullYear()
+
+              tempStats[trial.localId].measurements += mm.values.length
+
+              if (!calendarData[trial.localId][year]) {
+                calendarData[trial.localId][year] = new Map()
+              }
+
+              if (!calendarData[trial.localId][year].get(date)) {
+                calendarData[trial.localId][year].set(date, 1)
+              } else {
+                calendarData[trial.localId][year].set(date, calendarData[trial.localId][year].get(date) + 1)
+              }
+            })
+          })
+
+          if (plot.geography && (plot.geography.corners || plot.geography.center)) {
+            plotInfo[trial.localId].push({
+              corners: plot.geography.corners,
+              center: plot.geography.center
+            })
+          }
+
+          if (plot.comments) {
+            tempStats[trial.localId].comments += plot.comments.length
+          }
+        })
+
+        // Create the geojson and the layer, then add to the map
+        if (plotInfo[trial.localId]) {
+          const points = []
+
+          plotInfo[trial.localId].forEach(p => {
+            if (p.center) {
+              points.push(p.center)
+            } else if (p.corners) {
+              if (p.corners.topLeft) {
+                points.push(p.corners.topLeft)
+              }
+              if (p.corners.topRight) {
+                points.push(p.corners.topRight)
+              }
+              if (p.corners.bottomRight) {
+                points.push(p.corners.bottomRight)
+              }
+              if (p.corners.bottomLeft) {
+                points.push(p.corners.bottomLeft)
+              }
+            }
+          })
+
+          plotInfo[trial.localId] = {
+            // plots: plotInfoToGeoJson(plotInfo[trial.localId], false),
+            plots: null,
+            points: points
+          }
+        }
+
+        tempStats[trial.localId] = {
+          plots: tempStats[trial.localId].plots.size,
+          traits: tempStats[trial.localId].traits.size,
+          measurements: tempStats[trial.localId].measurements,
+          comments: tempStats[trial.localId].comments,
+          events: tempStats[trial.localId].events,
+          area: 0,
+          areaUnit: null
+        }
+      }
+
+      this.chartData = calendarData
+      this.stats = tempStats
+
+      this.$nextTick(() => this.updateMaps())
+    }
+  },
+  methods: {
+    getNumberWithSuffix,
+    updateThemeLayer: function () {
+      if (this.themeLayer) {
+        this.themeLayer.setUrl(`//services.arcgisonline.com/arcgis/rest/services/Canvas/${this.storeDarkMode ? 'World_Dark_Gray_Base' : 'World_Light_Gray_Base'}/MapServer/tile/{z}/{y}/{x}`)
+      }
+    },
+    updateMaps: function () {
+      Object.keys(plotInfo).forEach(trialId => {
+        const pi = plotInfo[trialId]
+
+        if (!this.$refs[`map-${trialId}`] || this.$refs[`map-${trialId}`].length < 1) {
+          return
+        }
+
+        const div = this.$refs[`map-${trialId}`][0]
+
+        const map = L.map(div)
+
+        map.setView([22.5937, 2.1094], 3)
+
+        // Add OSM as the default
+        const openstreetmap = L.tileLayer('//tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          id: 'OpenStreetMap',
+          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+          maxZoom: 21,
+          maxNativeZoom: 19
+        })
+        this.themeLayer = L.tileLayer(`//services.arcgisonline.com/arcgis/rest/services/Canvas/${this.storeDarkMode ? 'World_Dark_Gray_Base' : 'World_Light_Gray_Base'}/MapServer/tile/{z}/{y}/{x}`, {
+          id: this.storeDarkMode ? 'Esri Dark Gray Base' : 'Esri Light Gray Base',
+          attribution: 'Esri, HERE, Garmin, FAO, NOAA, USGS, © OpenStreetMap contributors, and the GIS User Community',
+          maxZoom: 21,
+          maxNativeZoom: 15
+        })
+        // Add an additional satellite layer
+        const satellite = L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+          id: 'Esri WorldImagery',
+          attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+          maxZoom: 21,
+          maxNativeZoom: 19
+        })
+
+        switch (this.storeMapLayer) {
+          case 'theme':
+            map.addLayer(this.themeLayer)
+            break
+          case 'satellite':
+            map.addLayer(satellite)
+            break
+          case 'osm':
+          default:
+            map.addLayer(openstreetmap)
+            break
+        }
+
+        const baseMaps = {
+          'Theme-based': this.themeLayer,
+          OpenStreetMap: openstreetmap,
+          'Esri WorldImagery': satellite
+        }
+
+        L.control.layers(baseMaps).addTo(map)
+
+        // Listen for layer changes and store the user selection in the store
+        map.on('baselayerchange', e => {
+          switch (e.name) {
+            case 'Theme-based':
+              this.$store.dispatch('setMapLayer', 'theme')
+              break
+            case 'OpenStreetMap':
+              this.$store.dispatch('setMapLayer', 'osm')
+              break
+            case 'Esri WorldImagery':
+              this.$store.dispatch('setMapLayer', 'satellite')
+              break
+          }
+        })
+
+        // Disable zoom until focus gained, disable when blur
+        map.scrollWheelZoom.disable()
+        map.on('focus', () => map.scrollWheelZoom.enable())
+        map.on('blur', () => map.scrollWheelZoom.disable())
+
+        const bounds = L.latLngBounds()
+
+        if (pi.plots) {
+          const geoJsonLayer = L.geoJSON(pi.plots, {
+            style: (feature) => {
+              return {
+                fillColor: '#00a0f1',
+                color: '#00a0f1',
+                weight: 1
+              }
+            }
+          })
+
+          map.addLayer(geoJsonLayer)
+
+          // Get the bounds and fit the map to them
+          const gjb = geoJsonLayer.getBounds()
+
+          if (gjb & gjb.isValid()) {
+            bounds.extend(gjb)
+          }
+        }
+
+        if (pi.points && pi.points.length > 0) {
+          const convexHullPoints = convexHull(pi.points.map(p => {
+            return {
+              x: p.lng,
+              y: p.lat
+            }
+          }))
+
+          this.stats[trialId].areaUnit = 'meter'
+          this.stats[trialId].area = geodesicArea(convexHullPoints.map(p => { return { lng: p.x, lat: p.y } }))
+
+          const pts = []
+
+          convexHullPoints.forEach(e => {
+            bounds.extend([e.y, e.x])
+            pts.push([e.y, e.x])
+          })
+
+          L.polygon(pts).addTo(map)
+        }
+
+        if (bounds && bounds.isValid()) {
+          map.fitBounds(bounds, { padding: [50, 50] })
+        }
+      })
+    }
+  },
+  mounted: function () {
+    getTrials()
+      .then(result => {
+        if (result) {
+          result.sort((a, b) => a.name.localeCompare(b.name))
+          this.trials = result
+        }
+      })
+  }
+}
+</script>
+
+<style scoped>
+.data-map {
+  height: 500px;
+}
+</style>