Yield.IO is a simple app I wrote to analyze Treasury bond yields. After putting the project on hold for a few months, I made the following updates in the past week:
- Extract histogram computation into generic NPM module
- Show both negative and positive sides of distribution in the histogram
- Use 30 bins in the histogram
- Enable trimming 5% of the distribution from both tails in the histogram
- Fix some issues with the data feed
- Cleanup the CSS layout
- Add the ability to expand the yield curve chart across the entire page
I wrote Yield.IO primarily to learn React, but I would like to use it as a foundation for creating analytical dashboards, which is where I’m starting to head with the last point. Unfortunately React doesn’t provide much help in this area.
Each pane in Yield.IO is a separate React component which maintains its own state. Unfortunately when the layout of the DOM is changed, React destroys and recreates the components which moved. There is no way to tell the DOM diffing algorithm to re-use components. This is why the selections made for individual charts in Yield.IO are lost when the DOM is updated.
Portals maybe a solution, and I’m looking into it, but they generally seem to go against the React philosophy of defining your layout and allowing the library sort it out. I like React a lot, but there is no perfect JavaScript library. Every library is a compromise, it is just a question of which compromises you are willing to accept.