FWM (Test API)(Notes)
Fund Widget Model (Link)
// Notes on Dev //
This is our first attempt at developing our web‑based API workflow model:
Google Sheets → JSON API → External Chart.js Page (Netlify) → Squarespace iframe
When building our Interactive Dashboard, we’ve initially considered using Power BI, but updating values dynamically and frequently became a nuisance. While we’re comfortable with the Power BI dashboard interface and with updating DAX measures using AI, the effort required to maintain existing tables doesn’t justify using Power BI as our main dashboard, especially when it demands more time maintaining data values than assessing our investments.
We’ve also considered using Power Automate, as it offers a wide range of features and access to external APIs. We may choose to adopt it in the future, but it isn’t necessary for our current objectives.
Excel still wins. Google Sheets worth considering due to its API workflow model integration, but prefer to use advanced and complex formulas in our dashboards.
// Notes on UI //
It appears Squarespace uses a fixed site‑wide content width that’s tighter than what we’ve seen on other websites. However, since this site is for personal use and shared with the FI community, we don’t have a strong need to move to another platform for business features, especially since we’re not aiming for subscribers or marketing‑driven content.
In the Fund Widget Model (Test API), we’ll be using a 2-chart model: Values and Prices. We specifically chose the Hex Codes focusing on Orange, Blue, and Green, keeping the same for both charts, but different for each Category.
The bars columns appears to be wider, telling us that the chart fully utilizes the width section of the pane. We believe that the sizing can be adjusted, and can test in the later updates.
We’ve only populated with 4 Funds in our testing model, but using actual SEP26 Values and Prices.
As we expected in our design, shared filters for Fund and Period, but for 2-chart model: Values and Prices.
// Notes on Data Validation //
On both charts, the value and price ranges automatically adjust based on the selected filters. This differs from our Excel dashboards, where the min–max ranges must be fixed and applied across all Funds. Having the UI dynamically update these ranges is definitely a positive improvement.
Another interesting observation is that the interface changes its increment based on the fetch data. Prices ranges automatically adjust based on selected filters, regardless whether its viewed on laptop or mobile. When viewing on laptop, if it’s a tight margin, then the increments are in the 50-200, and lesser margin 1000-2000 ranges. However, when viewing on mobile, ranges differ by a larger margin, but the UI layout is perfectly aligned as both charts show on the same screen.
Currently showing actual amounts, instead of converted K. Worth considering if we decide to populate more Funds and Periods overtime.
Shows Values and Prices on mouseover action for all columns.
One Fund is missing Tar$. Need to confirm why by next update.
// Notes on Next Updates //
Since the interactive charts are working, we will look at integrating Metrics calculations alongside the chart to compute category variances. This will align more closely with our dashboard design. However, due to width constraints in the website layout, especially in mobile view, we will need to evaluate and adjust the design to determine whether including Metrics is suitable on the laptop view.
