Add Historical Graph to Building Details Over Any Tracked Column

README.md

@@ -29,17 +29,21 @@ for data processing
 
 Docker is the recommended approach to quickly getting started with local development. Docker helps create a version of the Electrify Chicago website on your computer so you can test out your code before submitting a pull request.
 
-- The recommended installation method for your operating system can be found [here](https://docs.docker.com/install/). 
+- The recommended installation method for your operating system can be found [here](https://docs.docker.com/install/).
 - [Get started with Docker](https://docs.docker.com/get-started/)
 
 ### **2. Start Docker**
 
-This command starts server locally. To start it, `cd` into the project directory in your terminal then run the following command: 
+This command starts server locally. To start it, `cd` into the project directory in your terminal then run the following command:
 
 ```bash
  docker-compose up
 ```
 
+**Tip:** Added a new dependency? Once you've updated the `package.json` run
+`docker-compose up --build` to rebuild the image, which will re-run the setup steps in the
+`Dockerfile`.
+
 Running the above command will result in the following output in your terminal
 
 <details>
@@ -68,7 +72,7 @@ docker-compose run --rm electrify-chicago yarn lint-fix
 ### Run Data Processing
 
 1. If you update the raw data CSVs or the data scripts that post-process them (like if you are adding
-a new statistical analysis), you need to re-run the data processing. 
+a new statistical analysis), you need to re-run the data processing.
 
 2. To then process a new CSV file (at `src/data/source/ChicagoEnergyBenchmarking.csv`), you need to run the following command:
 
@@ -146,4 +150,3 @@ const BuildingOwnerIds = [
 ## Deploys
 
 This site deploys automatically via Netlify by running `gridsome build`.
-

package.json

@@ -4,7 +4,9 @@
   "main": "index.js",
   "repository": "[email protected]:vkoves/electrify-chicago.git",
   "author": "Viktor Köves <[email protected]>",
-  "engines" : { "node" : ">=16.00 < 17.0.0" },
+  "engines": {
+    "node": ">=16.00 < 17.0.0"
+  },
   "license": "MIT",
   "scripts": {
     "build": "gridsome build",
@@ -16,6 +18,7 @@
   },
   "dependencies": {
     "csv-parse": "^5.3.6",
+    "d3": "^7.9.0",
     "gridsome": "^0.7.0",
     "leaflet": "~1.7.0",
     "leaflet.gridlayer.googlemutant": "^0.14.0",
@@ -25,6 +28,7 @@
   },
   "devDependencies": {
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
+    "@types/d3": "^7.4.3",
     "@types/leaflet": "^1.9.3",
     "@types/sindresorhus__slugify": "^0.9.3",
     "@typescript-eslint/eslint-plugin": "^5.56.0",

src/common-functions.vue

@@ -59,14 +59,16 @@ export interface IBuildingNode { node: IBuilding }
 export interface IHistoricData {
   ID: string;
   DataYear: string;
-  GrossFloorArea: string;
+  // The actual data
   ChicagoEnergyRating: string;
-  ENERGYSTARScore: string;
-  SourceEUI: string;
+  DistrictSteamUse: string;
   ElectricityUse: string;
+  ENERGYSTARScore: string;
   GHGIntensity: string;
+  GrossFloorArea: string;
   NaturalGasUse: string;
-  DistrictSteamUse: string;
+  SourceEUI: string;
+  TotalGHGEmissions: string;
 }
 
 /**

src/components/BarGraph.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="bar-graph-cont">
+    <div
+      class="label"
+      v-html="graphTitle"
+    />
+
+    <svg><!-- D3 inserts here --></svg>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import * as d3 from 'd3';
+
+export interface IGraphPoint {
+  x: number | string;
+  y: number;
+}
+
+/**
+ * A component that can graph an arbitrary array of numeric data
+ */
+@Component({
+  components: {
+  },
+})
+export default class BarGraph extends Vue {
+  @Prop({required: true}) graphTitle!: string;
+
+  @Prop({required: true}) graphData!: Array<IGraphPoint>;
+
+  @Watch('graphData')
+  onDataChanged(): void {
+    this.renderGraph();
+  }
+
+  readonly width = 800;
+  readonly height = 400;
+
+  readonly graphMargins = { top: 30, right: 30, bottom: 50, left: 50 };
+  readonly barMargin = 0.2;
+
+  svg!: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
+
+  mounted(): void {
+    const outerWidth = this.width + this.graphMargins.left + this.graphMargins.right;
+    const outerHeight = this.height + this.graphMargins.top + this.graphMargins.bottom;
+
+    this.svg = d3
+      .select("svg")
+      .attr("width", outerWidth)
+      .attr("height", outerHeight)
+      .attr("viewBox", `0 0 ${outerWidth} ${outerHeight}`)
+      .attr("preserveAspectRatio", "xMidYMid meet")
+      .append("g")
+        .attr("transform", `translate(${this.graphMargins.left},${this.graphMargins.top})`);
+
+    this.renderGraph();
+  }
+
+  renderGraph(): void {
+    // Empty the SVG
+    this.svg.html(null);
+
+    const g = this.svg.append("g");
+
+    const xVals: Array<string> = this.graphData.map((d) => d.x.toString());
+    const yVals: Array<number> = this.graphData.map((d) => d.y);
+
+    const x = d3
+      .scaleBand()
+      .range([0, this.width])
+      .domain(xVals)
+      .padding(this.barMargin);
+
+    const y = d3
+      .scaleLinear()
+      .domain([ 0, d3.max(yVals) as number])
+      .rangeRound([this.height, 0]);
+
+    // Render X axis
+    this.svg.append("g")
+      .attr("transform", `translate(0, ${this.height})`)
+      .call(d3.axisBottom(x))
+      .selectAll("text")
+        .attr("transform", "translate(-10,0)rotate(-45)")
+        .style("text-anchor", "end");
+
+    // Render Y axis
+    this.svg.append("g")
+      .call(d3.axisLeft(y));
+
+    this.svg.selectAll("mybar")
+      .data(this.graphData)
+      .enter()
+      .append("rect")
+        .attr("x", (d) => {
+          return x(d.x.toString() as string) as number;
+        })
+        .attr("y", (d) => y(d.y))
+        .attr("width", x.bandwidth())
+        .attr("height", (d) => this.height - y(d.y))
+        .attr("fill", "#69b3a2");
+  }
+}
+</script>
+
+<style lang="scss">
+.bar-graph-cont {
+  margin: 1rem 0;
+
+  .label {
+    font-weight: bold;
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem;
+  }
+
+  svg {
+    width: 100%;
+    border: solid $border-thin $grey-light;
+    aspect-ratio: 2;
+    height: auto;
+    max-width: 50rem;
+  }
+
+  .tick {
+    font-weight: bold;
+    font-size: 1rem;
+  }
+}
+</style>

src/components/HistoricalBuildingDataTable.vue

@@ -31,20 +31,20 @@
             GHG Emissions <span class="unit">metric tons CO<sub>2</sub>e</span>
           </th>
           <th scope="col">
-            Source EUI <span class="unit">kBtu / sqft</span>
+            Source EUI <span class="unit">kBTU / sqft</span>
           </th>
 
           <th scope="col">
-            Electricity Use <span class="unit">kBtu</span>
+            Electricity Use <span class="unit">kBTU</span>
           </th>
           <th scope="col">
-            Natural Gas Use <span class="unit">kBtu</span>
+            Natural Gas Use <span class="unit">kBTU</span>
           </th>
           <th
             v-if="renderedColumns.includes('DistrictSteamUse')"
             scope="col"
           >
-            District Steam Use <span class="unit">kBtu</span>
+            District Steam Use <span class="unit">kBTU</span>
           </th>
         </tr>
       </thead>

src/templates/BuildingDetails.vue

@@ -312,6 +312,40 @@
 
       <HistoricalBuildingDataTable :historic-benchmarks="historicData" />
 
+      <form class="graph-controls">
+        <label for="col-to-graph">Column to Graph</label>
+        <select
+          id="col-to-graph"
+          v-model="colToGraph"
+        >
+          <!-- TODO: Make this based on the rendered graph columns -->
+          <option value="TotalGHGEmissions">
+            Total GHG Emissions
+          </option>
+          <option value="GHGIntensity">
+            GHG Intensity
+          </option>
+          <option value="ElectricityUse">
+            Electricity Use
+          </option>
+          <option value="NaturalGasUse">
+            Gas Use
+          </option>
+        </select>
+
+        <button
+          type="submit"
+          @click="updateGraph"
+        >
+          Update
+        </button>
+      </form>
+
+      <BarGraph
+        :graph-data="currGraphData"
+        :graph-title="currGraphTitle"
+      />
+
       <p class="constrained">
         <strong>* Note on Rankings:</strong> Rankings and medians are among <em>included</em>
         buildings, which are those who reported under the Chicago Energy Benchmarking Ordinance for
@@ -428,6 +462,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import { LatestDataYear } from '../constants/globals.vue';
+import BarGraph from '~/components/BarGraph.vue';
 import BuildingImage from '~/components/BuildingImage.vue';
 import DataSourceFootnote from '~/components/DataSourceFootnote.vue';
 import HistoricalBuildingDataTable from '~/components/HistoricalBuildingDataTable.vue';
@@ -446,6 +481,7 @@
   UtilityCosts,
   IBuildingBenchmarkStats,
 } from '../common-functions.vue';
+import { IGraphPoint } from '../components/BarGraph.vue';
 
 @Component<any>({
   metaInfo() {
@@ -454,6 +490,7 @@
     };
   },
   components: {
+    BarGraph,
     BuildingImage,
     DataSourceFootnote,
     NewTabIcon,
@@ -469,6 +506,14 @@
   },
 })
 export default class BuildingDetails  extends Vue {
+  // TODO: Move to constant
+  graphTitles = {
+    TotalGHGEmissions:  'Total GHG Emissions (metric tons CO<sub>2</sub>e)',
+    GHGIntensity: 'GHG Intensity (metric tons CO<sub>2</sub>e/sqft)',
+    ElectricityUse: 'Electricity Use (kBTU)',
+    NaturalGasUse: 'Natural Gas Use (kBTU)',
+  };
+
   /** Expose stats to template */
   readonly BuildingBenchmarkStats: IBuildingBenchmarkStats = BuildingBenchmarkStats;
 
@@ -487,6 +532,13 @@
   /** All benchmarks (reported and not) for this building */
   historicData!: Array<IHistoricData>;
 
+  /** The data we are currently rendering in the historic data graph */
+  currGraphData?: Array<IGraphPoint> = [];
+  currGraphTitle?: string = '';
+
+  /** The key from the historical data we are graphing */
+  colToGraph = 'TotalGHGEmissions';
+
   /** A helper to get the current building, but with proper typing */
   get building(): IBuilding {
     return this.$page.building;
@@ -533,6 +585,19 @@
   created(): void {
     this.historicData = this.$page.allBenchmark.edges
       .map((nodeObj: { node: IHistoricData }) => nodeObj.node) || [];
+
+    this.updateGraph();
+  }
+
+  updateGraph(event?: Event): void {
+    event?.preventDefault();
+
+    this.currGraphData = this.historicData.map((datum: IHistoricData) => ({
+      x: datum.DataYear,
+      y: parseFloat((datum as any)[this.colToGraph] as string),
+    }));
+
+    this.currGraphTitle = (this.graphTitles as any)[this.colToGraph];
   }
 }
 </script>
@@ -677,6 +742,11 @@
     li + li { margin-top: 0.25rem; }
   }
 
+  .graph-controls {
+    label { display: block; font-weight: bold; }
+    select { margin-right: 1rem; }
+  }
+
   @media (max-width: $mobile-max-width) {
     .building-header {
       .building-img-cont, .building-header-text { width: 100%; }