Add Stat Spark Lines & Energy Mix Pie Chart #116
Conversation
✅ Deploy Preview for radiant-cucurucho-d09bae ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| randomId = Math.round(Math.random() * 1000); | ||
|
|
||
| svg!: d3.Selection<SVGGElement, unknown, HTMLElement, any>; |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
vkoves
changed the title
| const xVals: Array<number> = this.graphData.map((d) => d.x); | ||
| const yVals: Array<number> = this.graphData.map((d) => d.y); | ||
|
|
||
| const minYear = d3.min(xVals)!; |
Check warning
Code scanning / ESLint
Disallow non-null assertions using the `!` postfix operator Warning
| const yVals: Array<number> = this.graphData.map((d) => d.y); | ||
|
|
||
| const minYear = d3.min(xVals)!; | ||
| const maxYear = d3.max(xVals)!; |
Check warning
Code scanning / ESLint
Disallow non-null assertions using the `!` postfix operator Warning
This lets us actually investigate the underlying values
|
|
||
| randomId = Math.round(Math.random() * 1000); | ||
|
|
||
| tooltip?: d3.Selection<HTMLDivElement, unknown, HTMLElement, any>; |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
| .enter() | ||
| .append("circle") | ||
| .attr('class', (d) => { | ||
| const isMinMax = d.x === this.minAndMaxPoints![0].x |
Check warning
Code scanning / ESLint
Disallow non-null assertions using the `!` postfix operator Warning
| .append("circle") | ||
| .attr('class', (d) => { | ||
| const isMinMax = d.x === this.minAndMaxPoints![0].x | ||
| || d.x === this.minAndMaxPoints![1].x; |
Check warning
Code scanning / ESLint
Disallow non-null assertions using the `!` postfix operator Warning
| // Calculate a scale factor to match the internal SVG space to the rendered HTML space | ||
| const outerWidth = this.width + this.graphMargins.left + this.graphMargins.right; | ||
| const svgElem = document.getElementById(`${this.svgIdPrefix}${this.randomId}`); | ||
| const scaleFactor = svgElem!.clientWidth / outerWidth; |
Check warning
Code scanning / ESLint
Disallow non-null assertions using the `!` postfix operator Warning
| const tooltipX = d3.pointer(event)[0] * scaleFactor + 20; | ||
| const tooltipY = d3.pointer(event)[1] * scaleFactor; | ||
|
|
||
| this.tooltip! |
Check warning
Code scanning / ESLint
Disallow non-null assertions using the `!` postfix operator Warning
|
|
||
| readonly graphMargins = { top: 0, right: 0, bottom: 0, left: 0 }; | ||
|
|
||
| svg!: d3.Selection<SVGGElement, unknown, HTMLElement, any>; |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
|
|
||
| // Compute the position of each group on the pie: | ||
| var pie = d3.pie() | ||
| .value((d: any) => d.value); |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
| // Compute the position of each group on the pie: | ||
| var pie = d3.pie() | ||
| .value((d: any) => d.value); | ||
| var dataReady = pie(this.graphData as any); |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
| .data(dataReady) | ||
| .enter() | ||
| .append('path') | ||
| .attr('d', arcGenerator as any) |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
| return ''; | ||
| } | ||
|
|
||
| let data = d.data as any as IPieSlice; |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
vkoves
changed the title
See 5948 N Broadway
See 6045-kenwood-building
|
@derekeder - would you be down to tackle review? |
It is now confusing when right next to a spark line
| </template> | ||
| {{ statValue }} <span | ||
| class="unit" | ||
| v-html="unit" |
Check warning
Code scanning / ESLint
disallow use of v-html to prevent XSS attack Warning
|
sure I can take a look |
There was a problem hiding this comment.
overall, a great improvement. i think the pie charts are especially informative for quickly seeing the energy mix for a particular building. I clicked through about 30 different buildings and they all looked good to me.
one issue - the sparkline text is very tiny and almost impossible to read. I realize the units are whats taking the most space here. since the units are already stated in the large number in the same box, could we hide it from the sparkline and make the text bigger?
Upped font size, dropped units, and dropped decimals on large numbers
| .attr("fill", "none") | ||
| .attr("stroke", "black") | ||
| .attr("stroke-width", 8) | ||
| .attr("d", (d3.line() as any) |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
| let yPos = y(d.y); | ||
|
|
||
| // The min point should have its label below | ||
| if (d.x === this.minAndMaxPoints![0].x) { |
Check warning
Code scanning / ESLint
Disallow non-null assertions using the `!` postfix operator Warning
|
@derekeder - updated! I'm a little torn, my chemistry teacher would always want a unit on a graph, but I think you're right that the unit is right there. We can always revise it and add it to a title:
|
|
One thing to tackle later is buildings with data gaps don't render the spark line correctly, like Willis Tower:
|
|
Final update, I added a note to Release Notes, going to merge it in!
|
|
@vkoves nice! i think its a great improvement! |
Description
Added a new
SparkLinecomponent that can render a basic line graph, and added a spark line for each of the main four stat tiles (after hiding site and source EUI), as well as a newPieChartthat shows the mix of energy uses:Example from Merch Mart:
Additionally, there's a hover behavior that shows all the underlying data points, and lets you hover over them to view exact values:
Peek.2024-08-27.21-30.mp4
Resolves #108, works on #110.
Testing Instructions
Tested several buildings and confirmed the spark lines look good on desktop and mobile, with the min and max point values staying in the graph bounds. For example, here's Crown Hall (which bucks the trend of stats going down):
Checklist: