Refactor charts: dedicated nav tab, JSON data transport, tests

Replace the toggle-view approach and hidden DOM data carrier with a
proper dedicated Charts page:

- Move Charts out of Measurements view toggles into its own nav tab
  and route (GET /charts)
- ChartsController serializes readout data as JSON (ordered by
  taken_at); the view embeds it in a <script type="application/json">
  element instead of rendering a hidden copy of the measurements
  partial just to ferry data attributes to JS
- buildCharts() reads from the JSON element directly — no DOM parsing,
  no sorting in JS (server already orders the data)
- Turbo load handler detects the charts page via #charts-data presence
- Add controller tests (authentication, data shape, ordering,
  data isolation between users) and system tests

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/assets/stylesheets/application.css

@@ -111,6 +111,11 @@ svg {
 svg:last-child {
   margin-right: 0;
 }
+.chart-panel svg {
+  height: auto;
+  margin: 0;
+  width: auto;
+}
 textarea {
   margin: 0;
 }
@@ -666,6 +671,9 @@ body[data-measurements-view=wide] .view-toggle[data-view=wide] {
   color: white;
   fill: white;
 }
+.chart-panel {
+  width: 100%;
+}
 #measurements tr.grouped td {
   border-top: none;
 }

app/controllers/charts_controller.rb

@@ -0,0 +1,12 @@
+class ChartsController < ApplicationController
+  def index
+    readouts = current_user.readouts.includes(:quantity, :unit).order(:taken_at, :id)
+    @readouts_json = readouts.map { |r|
+      { takenAt: r.taken_at&.iso8601,
+        quantityId: r.quantity_id,
+        quantityName: r.quantity.name,
+        value: r.value.to_f,
+        unit: r.unit.symbol }
+    }.to_json
+  end
+end

app/helpers/application_helper.rb

@@ -171,6 +171,7 @@ module ApplicationHelper
       ['measurements', 'scale-bathroom', :restricted],
       ['quantities', 'axis-arrow', :restricted, 'right'],
       ['units', 'weight-gram', :restricted],
+      ['charts', 'chart-line', :restricted],
       # TODO: display users tab only if >1 user present; sole_user?/sole_admin?
       ['users', 'account-multiple-outline', :admin],
     ]

app/javascript/application.js

@@ -117,6 +117,54 @@ function buildWideTable() {
   wideContainer.appendChild(table);
 }
 
+function buildCharts() {
+  var container = document.getElementById('measurements-charts');
+  var dataEl = document.getElementById('charts-data');
+  if (!container || !dataEl) return;
+
+  var readouts = JSON.parse(dataEl.textContent);
+  container.innerHTML = '';
+  if (readouts.length === 0) return;
+
+  // Data arrives sorted by taken_at from the server; group into per-quantity traces
+  var quantities = new Map();
+  readouts.forEach(function(r) {
+    if (!r.takenAt) return;
+    if (!quantities.has(r.quantityId)) {
+      quantities.set(r.quantityId, { name: r.quantityName, unit: r.unit, x: [], y: [] });
+    }
+    var q = quantities.get(r.quantityId);
+    q.x.push(r.takenAt);
+    q.y.push(r.value);
+  });
+
+  var traces = [];
+  quantities.forEach(function(q) {
+    traces.push({
+      x: q.x,
+      y: q.y,
+      mode: 'lines+markers',
+      type: 'scatter',
+      name: q.name + ' (' + q.unit + ')',
+      marker: { size: 5 }
+    });
+  });
+
+  var div = document.createElement('div');
+  div.className = 'chart-panel';
+  container.appendChild(div);
+
+  Plotly.newPlot(div, traces, {
+    xaxis: { type: 'date', tickformat: '%Y-%m-%d %H:%M' },
+    yaxis: {},
+    margin: { t: 20, r: 20, b: 80, l: 60 },
+    paper_bgcolor: 'transparent',
+    plot_bgcolor: 'transparent',
+    font: { family: 'system-ui' },
+    legend: { orientation: 'h', y: -0.25 }
+  }, { responsive: true, displayModeBar: false });
+}
+
 function getMeasurementsView() {
   return localStorage.getItem('measurements-view') || 'compact';
 }
@@ -133,13 +181,18 @@ function setMeasurementsView(view) {
 window.setMeasurementsView = setMeasurementsView
 
 document.addEventListener('turbo:load', function() {
+  if (document.getElementById('charts-data')) {
+    buildCharts();
+    return;
+  }
   var tbody = document.getElementById('measurements');
   if (!tbody) return;
   groupMeasurements();
   applyMeasurementsView(getMeasurementsView());
   new MutationObserver(function() {
     groupMeasurements();
-    if (getMeasurementsView() === 'wide') buildWideTable();
+    var view = getMeasurementsView();
+    if (view === 'wide') buildWideTable();
   }).observe(tbody, {
     childList: true, subtree: true,
     attributes: true, attributeFilter: ['style']

app/views/charts/index.html.erb

@@ -0,0 +1,2 @@
+<div class="main-area" id="measurements-charts"></div>
+<script id="charts-data" type="application/json"><%= raw @readouts_json %></script>

app/views/layouts/application.html.erb

@@ -14,6 +14,7 @@
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag "spreadsheet" %>
+    <script src="https://cdn.plot.ly/plotly-basic-2.35.2.min.js"></script>
     <%= javascript_importmap_tags %>
 
     <%#= turbo_page_requires_reload_tag %>

app/views/measurements/index.html.erb

@@ -11,6 +11,7 @@
   <%= image_button_tag '', 'view-columns', name: nil, type: 'button',
     class: 'view-toggle', title: t('.view_wide'),
     data: {view: 'wide'}, onclick: "setMeasurementsView('wide')" %>
+
 </div>
 
 <div class="main-area measurements-section">
@@ -34,5 +35,6 @@
   </table>
 
   <div id="measurements-wide" class="measurements-wide"></div>
+
 </div>
 

config/locales/en.yml

@@ -89,6 +89,8 @@ en:
   readouts:
     form:
       set_default_unit: Set as default unit
+  charts:
+    navigation: Charts
   measurements:
     navigation: Measurements
     no_items: There are no measurements taken. You can Add some now.
@@ -99,6 +101,7 @@ en:
       new_measurement: Add measurement
       view_compact: Compact view
       view_wide: Wide view
+      view_charts: Charts
     readout:
       edit: Edit
       destroy: Delete

config/routes.rb

@@ -1,5 +1,6 @@
 Rails.application.routes.draw do
   resources :measurements
+  resources :charts, only: [:index]
 
   resources :readouts, only: [:new] do
     collection {get 'new/:id/discard', action: :discard, as: :discard}

test/controllers/charts_controller_test.rb

@@ -0,0 +1,63 @@
+require "test_helper"
+
+class ChartsControllerTest < ActionDispatch::IntegrationTest
+  setup do
+    host! '127.0.0.1'
+    @user = users(:alice)
+    post new_user_session_path, params: { user: { email: @user.email, password: 'alice' } }
+    @quantity = @user.quantities.create!(name: 'Weight')
+    @unit = @user.units.create!(symbol: 'kg')
+  end
+
+  test "requires authentication" do
+    delete destroy_user_session_path
+    get charts_path
+    assert_response :redirect
+  end
+
+  test "index returns ok" do
+    get charts_path
+    assert_response :success
+  end
+
+  test "embeds readout data as JSON in script tag" do
+    users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+
+    get charts_path
+
+    assert_select 'script#charts-data[type="application/json"]' do |elements|
+      data = JSON.parse(elements.first.children.first.to_s)
+      assert_equal 1, data.size
+      assert_equal 'Weight', data.first['quantityName']
+      assert_in_delta 82.5, data.first['value']
+      assert_equal 'kg', data.first['unit']
+      assert_not_nil data.first['takenAt']
+    end
+  end
+
+  test "orders readouts by taken_at ascending" do
+    older = users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 80.0, taken_at: 2.days.ago)
+    newer = users(:alice).readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+
+    get charts_path
+
+    assert_select 'script#charts-data[type="application/json"]' do |elements|
+      data = JSON.parse(elements.first.children.first.to_s)
+      assert_equal older.taken_at.iso8601, data.first['takenAt']
+      assert_equal newer.taken_at.iso8601, data.last['takenAt']
+    end
+  end
+
+  test "does not expose other users readouts" do
+    bob_quantity = users(:bob).quantities.create!(name: 'Steps')
+    bob_unit = users(:bob).units.create!(symbol: 'steps')
+    users(:bob).readouts.create!(quantity: bob_quantity, unit: bob_unit, value: 5000, taken_at: 1.day.ago)
+
+    get charts_path
+
+    assert_select 'script#charts-data[type="application/json"]' do |elements|
+      data = JSON.parse(elements.first.children.first.to_s)
+      assert data.none? { |r| r['quantityName'] == 'Steps' }, "Bob's data must not appear"
+    end
+  end
+end

test/system/charts_test.rb

@@ -0,0 +1,26 @@
+require "application_system_test_case"
+
+class ChartsTest < ApplicationSystemTestCase
+  setup do
+    @user = sign_in(user: users(:alice))
+    @quantity = @user.quantities.create!(name: 'Weight')
+    @unit = @user.units.create!(symbol: 'kg')
+    @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+    @user.readouts.create!(quantity: @quantity, unit: @unit, value: 83.1, taken_at: Time.now)
+    visit charts_path
+  end
+
+  test "charts page is reachable from navigation" do
+    visit root_path
+    click_on t('charts.navigation')
+    assert_current_path charts_path
+  end
+
+  test "renders Plotly chart panel" do
+    assert_selector '#measurements-charts .chart-panel', wait: 5
+  end
+
+  test "chart legend shows quantity name with unit" do
+    assert_text 'Weight (kg)', wait: 5
+  end
+end