Fix Hard Coded 2020 Years By Moving to Constant

README.md

@@ -100,3 +100,6 @@ cd src/data
 pip install --no-cache-dir -r requirements.txt
 bash run_all.sh
 ```
+
+**Important!** When you update the data, make sure to update the `LatestDataYear` in
+`globals.vue`, as well as the filter year in all page queries.

src/components/DataDisclaimer.vue

@@ -1,6 +1,9 @@
 <template>
   <details class="data-disclaimer">
-    <summary>Note: Data only includes large Chicago buildings from 2020</summary>
+    <summary>
+      Note: Data only includes large Chicago buildings from {{ LatestDataYear }}, 
+      unless explicitly stated otherwise.
+    </summary>
 
     <p class="constrained">
       <strong>Note:</strong> This data only includes buildings whose emissions are reported
@@ -18,22 +21,29 @@
     </p>
 
     <p class="constrained">
-      This data is also from 2020, but when new benchmark data is available, we'll update the site.
+      This data is also from {{ LatestDataYear }}, but when new benchmark data 
+      is available, we'll update the site.
     </p>
   </details>
 </template>
 
 <script lang="ts">
 import NewTabIcon from './NewTabIcon.vue';
+import { LatestDataYear } from '../constants/globals.vue';
+import { Component, Vue } from 'vue-property-decorator';
 
 /**
  * A  tile that can show the stats for a building, including whether it's
  * doing better or worse than average, it's rank and percentile rank
  */
-export default {
+
+@Component({
   name: 'DataDisclaimer',
   components: {NewTabIcon},
-};
+})
+export default class DataDisclaimer extends Vue {
+  readonly LatestDataYear: number = LatestDataYear;
+}
 </script>
 
 <style lang="scss">

src/constants/globals.vue

@@ -0,0 +1,10 @@
+<script lang="ts">
+/**
+ * Global Constants Used Across Multiple Pages
+ */
+
+export default {};
+
+/** The latest year we have emissions data for, shown in global disclaimers */
+export const LatestDataYear = 2021;
+</script>

src/pages/About.vue

@@ -2,6 +2,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import NewTabIcon from '~/components/NewTabIcon.vue';
+import { LatestDataYear } from '../constants/globals.vue';
 
 // TODO: Figure out a way to get metaInfo working without any
 // https://github.com/xerebede/gridsome-starter-typescript/issues/37
@@ -14,6 +15,7 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
   },
 })
 export default class About extends Vue {
+  readonly LatestDataYear: number = LatestDataYear;
 }
 </script>
 <template>
@@ -117,8 +119,9 @@ export default class About extends Vue {
         </a>, which is data collected and published under the
         <a href="https://www.chicago.gov/city/en/progs/env/building-energy-benchmarking---transparency.html">
           Chicago Energy Benchmarking Ordinance <NewTabIcon />
-        </a>. This site shows data for the year 2020 (the latest available of March 2023) and
-        filtered down to buildings with total emissions > 1,000 metric tons CO<sub>2</sub>
+        </a>. This site shows data for the year {{ LatestDataYear }} 
+        (the latest available of March 2023) and filtered down to buildings 
+        with total emissions > 1,000 metric tons CO<sub>2</sub>
         equivalent.
       </p>
 

src/pages/BiggestBuildings.vue

@@ -4,6 +4,7 @@ import { Component, Vue } from 'vue-property-decorator';
 import BuildingsTable from '~/components/BuildingsTable.vue';
 import DataDisclaimer from '~/components/DataDisclaimer.vue';
 import NewTabIcon from '~/components/NewTabIcon.vue';
+import { LatestDataYear } from '../constants/globals.vue';
 
 // TODO: Figure out a way to get metaInfo working without any
 // https://github.com/xerebede/gridsome-starter-typescript/issues/37
@@ -18,6 +19,7 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
   },
 })
 export default class BiggestBuildings extends Vue {
+  readonly LatestDataYear: number = LatestDataYear;
 }
 </script>
 
@@ -64,10 +66,10 @@ export default class BiggestBuildings extends Vue {
 
     <p class="constrained -wide">
       These are the biggest buildings in our dataset, which should encompass all of the largest
-      buildings in the city that submitted their energy use for 2020. Being a big building does
-      basically guarantee that you use a lot of energy (and emit a lot of CO<sub>2</sub>), but a lot
-      of big buildings are very energy efficient and use less energy per square foot than much
-      smaller buildings!
+      buildings in the city that submitted their energy use for {{ LatestDataYear }}.
+      Being a big building does basically guarantee that you use a lot of energy 
+      (and emit a lot of CO<sub>2</sub>), but a lot of big buildings are very energy 
+      efficient and use less energy per square foot than much smaller buildings!
     </p>
 
     <DataDisclaimer />

src/templates/BuildingDetails.vue

@@ -409,6 +409,7 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
 import OverallRankEmoji from '~/components/OverallRankEmoji.vue';
 import OwnerLogo from '~/components/OwnerLogo.vue';
 import StatTile from '~/components/StatTile.vue';
+import { LatestDataYear } from '../constants/globals.vue';
 
 // This simple JSON is a lot easier to just use directly than going through GraphQL and it's
 // tiny
@@ -447,7 +448,7 @@ export default class BuildingDetails  extends Vue {
    * The year most/the latest buildings data is from - if this building's year is older than this,
    *  we show a warning that the data is old
    */
-  readonly LatestDataYear: number = 2021;
+  readonly LatestDataYear: number = LatestDataYear;
 
    /** Set by Gridsome to results of GraphQL query */
   $page: any;