Compare View Revamp: TR-55 Water Quality Charts and Table #2177
Conversation
|
Finally taking a look! |
|
Taking a look at the code now. Testing went well except I think the rounding is making the loading rates all zero:
|
|
The tooltips will be redone in #2158, so can be ignored for now. |
|
It's on the y-axis ticks as well. |
Ah, that's a real problem. Looking in to it. |
| .findWhere({ name: 'quality' }) | ||
| .get('result'); | ||
| }), | ||
| get = function(key) { |
|
The code for this looks good! Once the loading rates axis is fixed, we should be good to go. |
|
Okay, so we have 0s in the charts because the values are too small, as small as 0.006 kg / ha:
There's two ways to solve this:
I'm leaning towards the latter, but want some feedback /cc @ajrobbins. Suspended Solids will remain in kg/ha, but Nitrogen and Phosphorus may work better as g/ha. Not sure if we'll want to change the values in the table as well, to match the charts, or keep them as kg/ha to better align with the first row. |
|
Just pushed a fix that makes it look like this:
|
|
I think for comparison, we have to use the same units for all metrics on the page. Let's do three units of precision for now. |
rajadain
force-pushed
the
tt/compare-view-revamp-tr55-water-quality-charts-table
branch
from
10054e0
to
dbdcee8
Compare
|
Added a commit that makes tick precision dynamic on the chart:
while maintaining the same units. Table is left as before, so same units all the way through. One final look @arottersman ? |
|
Thanks for reviewing! Going to squash, rebase on develop, then merge. |
When a tab is clicked, it's model is set to have {active: true}.
We use Marionette events that bubble up the chain, triggering
re-renders of all relevant features.
Previously the switching would work, but the icons would not
update. Now we add or remove the `active` class as necessary.
I tried doing this via `modelEvents: { 'change:mode': 'render' }`,
but that would get rid of the precipitation control added in
`onShow`. This seemed like the best second option.
In case of a stacked chart, or when the minimum y-value is more than 1, we use the 0.1f format which is 1 decimal place. For when the value is less than 1, we calculate how deep is the most significant digit of the smallest non-zero y-value, and set that as the tick precision. See https://github.com/d3/d3-format for details.
rajadain
force-pushed
the
tt/compare-view-revamp-tr55-water-quality-charts-table
branch
from
5b28a56
to
85a3820
Compare
rajadain
deleted the
tt/compare-view-revamp-tr55-water-quality-charts-table
branch
Overview
Adds Water Quality charts and table for TR-55. Also enables tab switching, and adds visualization for chart / table switching. Builds on the work done in #2148.
I talked to @jfrankl about how to show the many values of Water Quality in the app:
On his recommendation, we're showing only the Loading Rate (kg/ha) values, corresponding to the values shown in the charts. All the values are simple mathematical transformations of the same value, thus the trend seen in the charts would hold for all of them.
Connects #2076
Demo
Testing Instructions
bundle