Skip to content

Conversation

@RobertJoonas
Copy link
Contributor

Changes

Note: this PR targets the liveview-dashboard POC branch, not master.

Adds optimistic datepicker label updates as well as arrows for prev/next period navigation. The arrows currently need to be clicked. Keyboard shortcuts are out of scope. The logic is built up as follows:

  • LiveView generates an array of dates by shifting the current dashboard relative_date (or today by default) in both directions by 10 units (either day, month, or year). Any future dates are cut off by today(site.timezone). Also, currently out of scope, but we should also cut off any dates that fall before site.stats_start_date.
  • The current dashboard relative_date also belongs to this array. Its index is passed as a data-* attribute as well.
  • Given the array and the index, the JS hook can do the following:
    • Increase/decrease the index by one and optimistically update the period label
    • when the index hits 0, left arrow instantly becomes disabled (same with index being of the last array element and right arrow becoming disabled)

@RobertJoonas RobertJoonas requested a review from zoldar January 14, 2026 15:43
Copy link
Contributor

@zoldar zoldar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢 😄

phx-value-goal-type="scroll"
x-data
x-on:click={Modal.JS.preopen("goals-form-modal")}
:for={
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice ✨

@RobertJoonas RobertJoonas merged commit 13f5eed into liveview-dashboard Jan 14, 2026
28 of 31 checks passed
@RobertJoonas RobertJoonas deleted the liveview-dashboard-datepicker branch January 14, 2026 16:11
@barron-ito
Copy link

Hey 👋 - I ran this through Ito.ai to test and it flagged a potential issue:

❌️ 1 potential issue flagged — 17 test cases ran

  • Datepicker obstructs the account dropdown

We found it by pulling down the PR, running it in a local environment, and thoroughly testing against it. There may be minor issues because we didn't have a perfect data to seed the environment. I see that the change was already merged so it may have been a visual library issue.

Test screenshot
datepicker-test

16 other passed testcases:

  1. Dashboard loads via LiveView route
    Notes: Dashboard loads with live-dashboard-container, DatePicker, Sources/Pages tiles
    ────────────────────────────────────────
  2. Test ID: DATEPICKER-1
    Title: DatePicker dropdown period selection
    Result: PASS
    Notes: All periods selectable, URL updates correctly
    ────────────────────────────────────────
  3. Test ID: DATEPICKER-2
    Title: Quick navigation for day period
    Result: PASS
    Notes: Prev/next buttons work for day navigation
    ────────────────────────────────────────
  4. Test ID: DATEPICKER-3
    Title: Quick navigation for month period
    Result: PASS
    Notes: Prev/next buttons work for month navigation
    ────────────────────────────────────────
  5. Test ID: DATEPICKER-4
    Title: Hides quick nav for non-relative periods
    Result: PASS
    Notes: Buttons hidden for Last 7 days, All, etc.
    ────────────────────────────────────────
  6. Test ID: SOURCES-1
    Title: Sources tile displays Channels default
    Result: PASS
    Notes: Channels tab active with "Channel" header
    ────────────────────────────────────────
  7. Test ID: SOURCES-2
    Title: Sources tile tab switching
    Result: PASS
    Notes: Tabs switch correctly, headers update
    ────────────────────────────────────────
  8. Test ID: SOURCES-3
    Title: Sources tab persistence
    Result: PASS
    Notes: Tab persists in localStorage across reloads
    ────────────────────────────────────────
  9. Test ID: PAGES-1
    Title: Pages tile displays Top pages default
    Result: PASS
    Notes: Top pages tab active with "Page" header
    ────────────────────────────────────────
  10. Test ID: PAGES-2
    Title: Pages tile tab switching
    Result: PASS
    Notes: Tabs switch correctly, headers update
    ────────────────────────────────────────
  11. Test ID: PAGES-3
    Title: Pages tab persistence
    Result: PASS
    Notes: Tab persists in localStorage across reloads
    ────────────────────────────────────────
  12. Test ID: DETAILS-1
    Title: Details link navigation
    Result: PASS
    Notes: Expand icons navigate to detail views with params
    ────────────────────────────────────────
  13. Test ID: LOADING-1
    Title: Loading states during navigation
    Result: PASS
    Notes: Smooth transitions, no persistent spinners
    ────────────────────────────────────────
  14. Test ID: AUTH-1
    Title: Role-based access control
    Result: PASS
    Notes: Owner and viewer roles can access dashboards
    ────────────────────────────────────────
  15. Test ID: CONVERSION-1
    Title: Conversion goal filter
    Result: PARTIAL
    Notes: Metrics show correctly, but tab label doesn't change to "Conversion pages"
    ────────────────────────────────────────
  16. Test ID: URL-1
    Title: URL query parameter handling
    Result: PASS
    Notes: Valid params work, invalid params fallback gracefully

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants