Skip to content

Commit

Permalink
Hide historical data table under technical info
Browse files Browse the repository at this point in the history
  • Loading branch information
@vkoves
vkoves committed Aug 28, 2024
1 parent 171765c commit 1fbd1a8
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 115 deletions.
56 changes: 26 additions & 30 deletions src/components/DataDisclaimer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,28 @@
unless explicitly stated otherwise.
</summary>

<p class="constrained">
<strong>Note:</strong> This data only includes buildings whose emissions are reported
under the
<a
href="https://www.chicago.gov/city/en/progs/env/building-energy-benchmarking---transparency.html"
target="_blank"
rel="noopener"
>
Chicago Energy Benchmarking Ordinance<NewTabIcon />
</a>. According to the City &ldquo;As of 2016,
this list includes all commercial, institutional, and residential buildings larger than
50,000 square feet.&rdquo; This dataset is also then filtered to only buildings with
reported emissions > 1,000 metric tons CO<sub>2</sub> equivalent.
</p>

<p class="constrained">
The latest year of data is from {{ LatestDataYear }}, but we update the site regularly when
new data is available, and some buildings may have failed to report that year, and only have
older data available.
</p>
<div class="details-content">
<p class="constrained">
<strong>Note:</strong> This data only includes buildings whose emissions are reported
under the
<a
href="https://www.chicago.gov/city/en/progs/env/building-energy-benchmarking---transparency.html"
target="_blank"
rel="noopener"
>
Chicago Energy Benchmarking Ordinance<NewTabIcon />
</a>. According to the City &ldquo;As of 2016,
this list includes all commercial, institutional, and residential buildings larger than
50,000 square feet.&rdquo; This dataset is also then filtered to only buildings with
reported emissions > 1,000 metric tons CO<sub>2</sub> equivalent.
</p>

<p class="constrained">
The latest year of data is from {{ LatestDataYear }}, but we update the site regularly when
new data is available, and some buildings may have failed to report that year, and only have
older data available.
</p>
</div>
</details>
</template>

Expand All @@ -49,19 +51,13 @@ export default class DataDisclaimer extends Vue {

<style lang="scss">
.data-disclaimer {
background: $grey;
border-radius: $brd-rad-medium;
margin-bottom: 1rem;
font-size: 0.825rem;
summary, p { padding: 0.5rem 1rem; }
summary, .details-content { padding: 0.5rem 1rem; }
summary {
font-weight: bold;
font-size: 0.825rem;
}
summary { font-weight: bold; }
p {
margin-top: 0.5rem;
}
p { margin-top: 0.5em; }
}
</style>
8 changes: 1 addition & 7 deletions src/components/SparkLine.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default class BarGraph extends Vue {
/** Underlying size */
readonly width = 400;
readonly height = 60;
readonly height = 80;
// The amount to shift the x-axis down by
readonly xAxisOffset = 60;
Expand Down Expand Up @@ -214,12 +214,6 @@ export default class BarGraph extends Vue {
const threeQuartersYear = Math.ceil(minYear + (0.75 * (maxYear - minYear)));
const halfwayYear = Math.ceil(minYear + (0.5 * (maxYear - minYear)));
console.log({
threeQuartersYear,
halfwayYear,
x: d.x
})
// If the min point is more than 3/4 along in the graph, it's near enough to the end
// that we align text to the left of the dot, otherwise to the start
if (d.x >= threeQuartersYear) {
Expand Down
1 change: 1 addition & 0 deletions src/components/StatTile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -591,6 +591,7 @@ export default class StatTile extends Vue {
.spark-graph-cont {
width: 40%;
max-width: 12.5rem;
float: right;
margin-left: 1rem;
}
Expand Down
18 changes: 16 additions & 2 deletions src/scss/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,22 @@ dl {
dd + dt { margin-top: 1rem; }
}

summary { cursor: pointer; }
summary:focus { outline-offset: 0; }
/** Style the basic disclosure widget <details> and <summary> */
details {
border: solid 0.01625rem $grey-dark;
margin-bottom: 1rem;
border-radius: $brd-rad-medium;

summary {
background-color: $grey-light;
padding: 1rem 1.5rem;
cursor: pointer;

&:focus { outline-offset: 0; }
}

.details-content { padding: 1.5rem; }
}

img { max-width: 100%; }

Expand Down
111 changes: 35 additions & 76 deletions src/templates/BuildingDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,74 +293,42 @@ query ($id: ID!, $ID: String) {
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"
:historic-data="historicData"
: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>
<div class="details-content">
<dl class="supp-info">
<div>
<dt>Source Energy Usage Intensity</dt>
<dd>
<StatTile
:building="$page.building"
:stat-key="'SourceEUI'"
:stats="BuildingBenchmarkStats"
:historic-data="historicData"
: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>

<h2>Full Historical Data Table</h2>

<HistoricalBuildingDataTable :historic-benchmarks="historicData" />
</div>
</details>

<h2>Historical Data Table</h2>

<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
Expand Down Expand Up @@ -727,11 +695,7 @@ export default class BuildingDetails extends Vue {
gap: 2rem;
margin: 0;

&.supp-info {
margin-top: 1rem;

> * { flex-basis: 40rem; }
}
&.supp-info * { flex-basis: 45%; }
}

.emission-stats {
Expand All @@ -757,11 +721,6 @@ 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;

Expand Down

0 comments on commit 1fbd1a8

Please sign in to comment.