Principal Investments needed a Drupal platform capable of updating its fund data every day through an automated API pipeline. This portfolio showcases the custom features I built for principaletfs.com—ranging from daily data ingestion to dynamic fund displays and investor-focused analytical views. Each slide highlights one of the interactive tools or data-driven components designed to help users explore ETFs, compare performance metrics, and quickly access detailed fund information.

Click any image to view a deeper explanation of the functionality behind it.

Category
Migrated Sites
Financial
This screenshot shows the Principal ETFs homepage featuring an autocomplete search component wired to a real-time fund index sourced from the Principal API. The type-ahead query asynchronously filters fund names and tickers client-side, returning ranked matches as the user types. Selecting a result (or submitting a fully matched query) triggers a programmatic redirect to the corresponding fund detail route, passing the fund’s unique identifier for server-side retrieval of its full data profile.
This screenshot shows the full ETF universe loaded from Principal’s daily fund-data API, surfaced through a Drupal View configured with category filters and three analytical modes (Overview, Fund Prices, Performance). The table consumes normalized API payloads to render sortable, field-mapped metrics—allowing investors to quickly compare assets across classes, expense ratios, inception dates, and other key data points.
This screenshot shows the dynamically filtered ETF results after applying both the Multi-Asset and Active Management criteria. The table is generated from API-synced fund data and re-queries the dataset client-side to display only funds that match both filters.
This screenshot shows the Fund Prices view, using the same filters as the prior slide. Data is refreshed daily from the Principal pricing API, displaying fields like market price, NAV, price change, NAV change, and YTD %. Columns are sortable, and the view is one of three synchronized Drupal displays (Overview, Fund Prices, Performance) that share the same filter state.
This screenshot shows a fund’s detail page, fully driven by a daily JSON API ingestion executed via cron. The top metrics—price, NAV, and their day-over-day deltas—are parsed from the latest payload and rendered in real time. All supporting documents (fact sheets, reports, dividend schedules) are also sourced from the same API feed, with URLs and metadata refreshed automatically, then exposed as download links through a custom Drupal entity template tied to the ETF data model.
This screenshot shows the fund’s Total Returns module, which I implemented as an embedded Drupal View inside a Paragraphs component. The view consumes normalized performance data pulled daily from the ETF JSON API and exposes three synchronized displays—Monthly, Quarterly, and Calendar Year. Because the layout required stacking multiple view modes within a single Paragraph instance, I had to work directly with Paragraphs’ delta-layer structure to bind the correct API fields to each tab and ensure the active
This portion of the detail page displays D3.js-driven chart components powered directly by the fund’s JSON payload. I built custom SVG visualizations (Morningstar Style Box and Interest-Rate Sensitivity), converting API values into normalized grid coordinates and applying lightweight animations. These widgets integrate into a Paragraphs layout, with custom theming and Drupal behaviors to bind each chart to its correct delta and ensure proper redraw during AJAX updates.
This component renders a D3.js-driven Premium/Discount-to-NAV chart, fed directly from the fund’s historical JSON dataset. The quarter selector on the right rebinds the visualization to a different time slice, triggering a full redraw of the underlying SVG bars based on recalculated distribution buckets. I wired this into the Paragraphs layout with custom Drupal behaviors so each instance loads the correct dataset, preserves state during AJAX navigation, and animates transitions cleanly between quarters.