Skip to content

Spot price touch UX + dev QR/proxy - #981

Merged
eetu merged 2 commits into
mainfrom
eetu/feat/spot-price-touch-ux
Jun 20, 2026
Merged

eetu merged 2 commits into
mainfrom
eetu/feat/spot-price-touch-ux

Conversation

@eetu

@eetu eetu commented Jun 20, 2026

Copy link
Copy Markdown
Owner

Spot price chart (touch UX)

Reworks the pörssisähkö chart interaction for the wall dashboard's touch screen:

  • Title readout instead of popup — the scrubbed hour's price shows next to "pörssisähkö" in the card title (reverting after a short idle timer), replacing the Chart.js tooltip that the fingertip covered.
  • Circular touch loupe — magnifies the bottom strip of the chart (bars + hour labels) above the fingertip, so you can aim at the hour your finger hides.
  • Grid-level touch + x-based selection — a drag can glide between the today/tomorrow charts (a per-chart touch was captured by the chart it started on), and near-zero bars tucked under the x-axis labels stay reachable.
  • Clearer selection — scrubbed bar gets a solid accent fill (not a border); near-zero bars get a minimum height so they're visible and aimable.
  • -0.0 → 0.0 for tiny negative prices.

Mouse hover still works (Chart.js handles mouse; touch is handled at the grid level).

Dev tooling

  • vite-plugin-qrcode so yarn dev --host prints a scannable QR for the LAN URL.
  • /api dev proxy so the frontend uses same-origin relative URLs (VITE_API_URL=""), keeping the dashboard reachable from other LAN devices instead of their own localhost.

Note: frontend/.env is gitignored — set VITE_API_URL= locally for the proxy path.

eetu added 2 commits June 20, 2026 17:49
Rework the pörssisähkö chart interaction for the wall dashboard's touch
screen:

- Move the price readout from the overlapping Chart.js tooltip to the card
  title (next to "pörssisähkö"), reverting after a short idle timer.
- Add a circular touch loupe that magnifies the bottom strip of the chart
  (bars + hour labels) above the fingertip, so you can aim at the hour your
  finger covers.
- Handle touch at the grid level and select by x-position, so a drag can
  glide between the today/tomorrow charts and near-zero bars stay reachable.
- Highlight the scrubbed bar with a solid accent fill instead of a border;
  give near-zero bars a minimum height so they're visible and aimable.
- Show a plain 0.0 instead of -0.0 for tiny negative prices.
- Add vite-plugin-qrcode so `yarn dev --host` prints a scannable QR for the
  LAN URL.
- Proxy /api to the backend in dev so the frontend can use same-origin
  relative URLs (VITE_API_URL=""), which keeps the dashboard reachable from
  other LAN devices instead of their own localhost.
@eetu
eetu merged commit b547509 into main Jun 20, 2026
3 checks passed
@eetu
eetu deleted the eetu/feat/spot-price-touch-ux branch June 20, 2026 14:56
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.

1 participant