Add Stat Spark Lines & Energy Mix Pie Chart

src/components/BarGraph.vue

@@ -5,7 +5,7 @@
       v-html="graphTitle"
     />
 
-    <svg><!-- D3 inserts here --></svg>
+    <svg id="bar-graph"><!-- D3 inserts here --></svg>
   </div>
 </template>
 
@@ -21,10 +21,7 @@ export interface IGraphPoint {
 /**
  * A component that can graph an arbitrary array of numeric data
  */
-@Component({
-  components: {
-  },
-})
+@Component({})
 export default class BarGraph extends Vue {
   @Prop({required: true}) graphTitle!: string;
 
@@ -48,7 +45,7 @@ export default class BarGraph extends Vue {
     const outerHeight = this.height + this.graphMargins.top + this.graphMargins.bottom;
 
     this.svg = d3
-      .select("svg")
+      .select("svg#bar-graph")
       .attr("width", outerWidth)
       .attr("height", outerHeight)
       .attr("viewBox", `0 0 ${outerWidth} ${outerHeight}`)

src/components/SparkLine.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="spark-graph-cont">
+    <div
+      class="label"
+      v-html="graphTitle"
+    />
+
+    <svg :id="'spark' + randomId"><!-- 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 INumGraphPoint {
+  x: number;
+  y: number;
+}
+
+/**
+ * A component that can graph an arbitrary array of numeric data as a spark line, a simple line
+ * graph (like might be used in a news chevron for a stock)
+ */
+@Component({})
+export default class BarGraph extends Vue {
+  @Prop({required: true}) graphTitle!: string;
+
+  @Prop({required: true}) graphData!: Array<INumGraphPoint>;
+
+  @Watch('graphData')
+  onDataChanged(): void {
+    this.renderGraph();
+  }
+
+  /** Underlying size */
+  readonly width = 400;
+  readonly height = 150;
+
+  // The amount to shift the x-axis down by
+  readonly xAxisOffset = 20;
+
+  readonly graphMargins = { top: 30, right: 0, bottom: 80, left: 60 };
+  readonly barMargin = 0.2;
+
+  randomId = Math.round(Math.random() * 1000);
+
+  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#spark" + this.randomId)
+      .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);
+
+    // TODO: Fix passed years being strings and remove this conversion
+    this.graphData.forEach((point: INumGraphPoint) => point.x = parseInt(point.x.toString()));
+
+    const xVals: Array<number> = this.graphData.map((d) => d.x);
+    const yVals: Array<number> = this.graphData.map((d) => d.y);
+
+    const x = d3
+      .scaleLinear()
+      .range([0, this.width])
+      .domain(d3.extent(xVals) as [number, number])
+
+    const y = d3
+      .scaleLinear()
+      .domain([ d3.min(yVals) as number, d3.max(yVals) as number])
+      .rangeRound([this.height, 0]);
+
+    // Render X axis
+    this.svg.append("g")
+      .attr('class', 'x-axis')
+      .attr("transform", `translate(0, ${this.height + this.xAxisOffset})`)
+      .call(
+        d3.axisBottom(x)
+          .tickFormat(d3.format('d'))
+          // For spark line, only show first and last year (e.g. 2018 and 2022)
+          .tickValues(d3.extent(xVals) as [number, number])
+      )
+      .selectAll("text")
+        .attr("transform", "translate(-10,0)rotate(-45)")
+        .style("text-anchor", "end");
+
+    // Render Y axis
+    this.svg.append("g")
+      .attr('class', 'y-axis')
+      .call(
+        d3.axisLeft(y)
+          .tickValues(d3.extent(yVals) as [number, number])
+    );
+
+    // Add the line
+    this.svg.append("path")
+      .datum(this.graphData)
+      .attr("fill", "none")
+      .attr("stroke", "steelblue")
+      .attr("stroke-width", 10)
+      .attr("d", (d3.line() as any)
+        .x((d: INumGraphPoint) => { return x(d.x as number) })
+        .y((d: INumGraphPoint) => { return y(d.y) })
+        )
+  }
+}
+</script>
+
+<style lang="scss">
+.spark-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: 20rem; // 320px
+  }
+
+  .tick {
+    font-weight: bold;
+    font-size: 1.25rem;
+  }
+
+  // Hide tick lines on x-axis
+  .tick line { display: none; }
+
+  // Hide main y-axis line
+  .y-axis .domain { display: none; }
+}
+</style>

src/templates/BuildingDetails.vue

@@ -231,32 +231,6 @@ query ($id: ID!, $ID: String) {
           </dd>
         </div>
 
-        <div>
-          <dt>Source Energy Usage Intensity</dt>
-          <dd>
-            <StatTile
-              :building="$page.building"
-              :stat-key="'SourceEUI'"
-              :stats="BuildingBenchmarkStats"
-              :unit="'kBtu / sqft'"
-            />
-          </dd>
-        </div>
-
-        <div>
-          <dt>Site Energy Usage Intensity</dt>
-          <dd>
-            <StatTile
-              :building="$page.building"
-              :stat-key="'SiteEUI'"
-              :stats="BuildingBenchmarkStats"
-              :unit="'kBtu / sqft'"
-            />
-
-            {{ $page.buildingSiteEUIRank }}
-          </dd>
-        </div>
-
         <div>
           <dt>Natural Gas Use</dt>
           <dd>
@@ -308,6 +282,40 @@ query ($id: ID!, $ID: String) {
         </div>
       </dl>
 
+      <details>
+        <summary class="bold">
+          View Technical Info
+        </summary>
+
+        <dl class="supp-info">
+          <div>
+            <dt>Source Energy Usage Intensity</dt>
+            <dd>
+              <StatTile
+                :building="$page.building"
+                :stat-key="'SourceEUI'"
+                :stats="BuildingBenchmarkStats"
+                :unit="'kBtu / sqft'"
+              />
+            </dd>
+          </div>
+
+          <div>
+            <dt>Site Energy Usage Intensity</dt>
+            <dd>
+              <StatTile
+                :building="$page.building"
+                :stat-key="'SiteEUI'"
+                :stats="BuildingBenchmarkStats"
+                :unit="'kBtu / sqft'"
+              />
+
+              {{ $page.buildingSiteEUIRank }}
+            </dd>
+          </div>
+        </dl>
+      </details>
+
       <h2>Historical Data</h2>
 
       <HistoricalBuildingDataTable :historic-benchmarks="historicData" />
@@ -346,6 +354,11 @@ query ($id: ID!, $ID: String) {
         :graph-title="currGraphTitle"
       />
 
+      <SparkLine
+        :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
@@ -463,6 +476,7 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import { LatestDataYear } from '../constants/globals.vue';
 import BarGraph from '~/components/BarGraph.vue';
+import SparkLine from '~/components/SparkLine.vue';
 import BuildingImage from '~/components/BuildingImage.vue';
 import DataSourceFootnote from '~/components/DataSourceFootnote.vue';
 import HistoricalBuildingDataTable from '~/components/HistoricalBuildingDataTable.vue';
@@ -491,6 +505,7 @@ import { IGraphPoint } from '../components/BarGraph.vue';
   },
   components: {
     BarGraph,
+    SparkLine,
     BuildingImage,
     DataSourceFootnote,
     NewTabIcon,
@@ -711,6 +726,8 @@ export default class BuildingDetails  extends Vue {
     flex-wrap: wrap;
     gap: 2rem;
     margin: 0;
+
+    &.supp-info { margin-top: 1rem; }
   }
 
   .emission-stats {
@@ -736,6 +753,11 @@ export default class BuildingDetails  extends Vue {
     .stat-tile { min-width: 18rem; }
   }
 
+  details {
+    border: solid 0.01625rem $grey-dark;
+    padding: 1rem;
+  }
+
   ul {
     margin-top: 0.5rem;