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/controllers/measurements_controller.rb

@@ -6,7 +6,7 @@ class MeasurementsController < ApplicationController
   end
 
   def index
-    load_measurements
+    @measurements = current_user.readouts.includes(:quantity, :unit).order(taken_at: :desc, id: :desc)
   end
 
   def new
@@ -20,7 +20,6 @@ class MeasurementsController < ApplicationController
 
     if @readouts.present? && @readouts.all?(&:valid?)
       ActiveRecord::Base.transaction { @readouts.each(&:save!) }
-      load_measurements
       flash.now[:notice] = t('.success', count: @readouts.size)
     else
       errors = @readouts.flat_map { |r| r.errors.full_messages }
@@ -34,7 +33,6 @@ class MeasurementsController < ApplicationController
 
   def update
     if @readout.update(params.require(:readout).permit(:value, :unit_id, :taken_at))
-      load_measurements
       flash.now[:notice] = t('.success')
     else
       @user_units = current_user.units.ordered
@@ -44,7 +42,6 @@ class MeasurementsController < ApplicationController
 
   def destroy
     @readout.destroy!
-    load_measurements
     flash.now[:notice] = t('.success')
   end
 
@@ -53,10 +50,4 @@ class MeasurementsController < ApplicationController
   def find_readout
     @readout = current_user.readouts.find(params[:id])
   end
-
-  def load_measurements
-    @measurements = current_user.readouts.includes(:quantity, :unit).order(taken_at: :desc, id: :desc)
-    @wide_groups = @measurements.group_by(&:taken_at)
-    @wide_quantities = @measurements.map(&:quantity).uniq.sort_by(&:name)
-  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

@@ -22,6 +22,148 @@ function groupMeasurements() {
     });
 }
 
+function buildWideTable() {
+  var tbody = document.getElementById('measurements');
+  var wideContainer = document.getElementById('measurements-wide');
+  if (!tbody || !wideContainer) return;
+
+  var rows = Array.from(tbody.querySelectorAll('tr[data-taken-at]'));
+
+  if (rows.length === 0) { wideContainer.innerHTML = ''; return; }
+
+  // Unique quantities in alphabetical order
+  var qOrder = [], qSeen = new Set();
+  rows.forEach(function(r) {
+    var id = r.dataset.quantityId;
+    if (id && !qSeen.has(id)) { qSeen.add(id); qOrder.push({id: id, name: r.dataset.quantityName}); }
+  });
+  qOrder.sort(function(a, b) { return a.name.localeCompare(b.name); });
+
+  // Group rows by taken_at, preserving order
+  var groups = [], groupMap = new Map();
+  rows.forEach(function(r) {
+    var key = r.dataset.takenAt || '';
+    if (!groupMap.has(key)) { var g = {rows: []}; groups.push(g); groupMap.set(key, g); }
+    groupMap.get(key).rows.push(r);
+  });
+
+  // Read column headers from compact thead
+  var ths = document.querySelectorAll('.measurements-compact thead th');
+  var takenAtHeader = ths[3] ? ths[3].textContent : '';
+  var createdAtHeader = ths[4] ? ths[4].textContent : '';
+
+  var table = document.createElement('table');
+  table.className = 'items-table';
+
+  // Header
+  var thead = table.createTHead();
+  var hrow = thead.insertRow();
+  [takenAtHeader].concat(qOrder.map(function(q) { return q.name; })).concat([createdAtHeader]).forEach(function(text) {
+    var th = document.createElement('th');
+    th.textContent = text;
+    hrow.appendChild(th);
+  });
+
+  // Body
+  var tbodyEl = table.createTBody();
+  groups.forEach(function(group) {
+    var tr = tbodyEl.insertRow();
+
+    // Taken at
+    var tdTime = tr.insertCell();
+    var takenAtEl = group.rows[0].querySelector('.taken-at');
+    tdTime.textContent = takenAtEl ? takenAtEl.textContent : '';
+
+    // One cell per quantity
+    qOrder.forEach(function(q) {
+      var td = tr.insertCell();
+      var readoutRow = group.rows.find(function(r) { return r.dataset.quantityId === q.id; });
+      if (readoutRow) {
+        td.className = 'ralign';
+        var wrap = document.createElement('span');
+        wrap.className = 'wide-cell';
+        var editLink = readoutRow.querySelector('a.link');
+        if (editLink) {
+          var editUrl = editLink.href + (editLink.href.includes('?') ? '&' : '?') + 'view=wide';
+          var btn = document.createElement('button');
+          btn.className = 'link';
+          btn.type = 'button';
+          btn.dataset.editUrl = editUrl;
+          btn.addEventListener('click', function() { editMeasurementWide(this.dataset.editUrl); this.blur(); });
+          btn.textContent = readoutRow.dataset.value;
+          wrap.appendChild(btn);
+          wrap.appendChild(document.createTextNode('\u00a0' + readoutRow.dataset.unit));
+        } else {
+          wrap.appendChild(document.createTextNode(readoutRow.dataset.value + '\u00a0' + readoutRow.dataset.unit));
+        }
+        var srcActions = readoutRow.querySelector('td.flex');
+        if (srcActions) srcActions.querySelectorAll('form').forEach(function(f) {
+          var cloned = f.cloneNode(true);
+          var span = cloned.querySelector('button span');
+          if (span) span.remove();
+          wrap.appendChild(cloned);
+        });
+        td.appendChild(wrap);
+      }
+    });
+
+    // Created at (from first row of group)
+    var tdCreated = tr.insertCell();
+    var createdAtEl = group.rows[0].querySelector('.created-at');
+    tdCreated.textContent = createdAtEl ? createdAtEl.textContent : '';
+  });
+
+  wideContainer.innerHTML = '';
+  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';
@@ -29,6 +171,7 @@ function getMeasurementsView() {
 
 function applyMeasurementsView(view) {
   document.body.dataset.measurementsView = view;
+  if (view === 'wide') buildWideTable();
 }
 
 function setMeasurementsView(view) {
@@ -38,12 +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();
+    var view = getMeasurementsView();
+    if (view === 'wide') buildWideTable();
   }).observe(tbody, {
     childList: true, subtree: true,
     attributes: true, attributeFilter: ['style']
@@ -78,38 +227,62 @@ window.detailsObserver = new MutationObserver((mutations) => {
   mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
 });
 
+function editMeasurementWide(url) {
+  fetch(url, {
+    headers: {
+      'Accept': 'text/vnd.turbo-stream.html',
+      'X-Requested-With': 'XMLHttpRequest'
+    }
+  })
+  .then(response => response.text())
+  .then(html => {
+    Turbo.renderStreamMessage(html);
+    requestAnimationFrame(() => {
+      var panel = document.getElementById('measurement_edit_form');
+      if (panel && panel.firstElementChild) {
+        panel.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+      }
+    });
+  });
+}
+window.editMeasurementWide = editMeasurementWide
 
 function readoutUnitChanged(select) {
   var button = select.closest('tr').querySelector('.set-default-unit');
   if (select.value && select.value !== select.dataset.defaultUnitId) {
-    Turbo.StreamElement.prototype.enableElement(button);
+    button.removeAttribute('disabled');
+    button.removeAttribute('aria-disabled');
+    button.removeAttribute('tabindex');
   } else {
-    Turbo.StreamElement.prototype.disableElement(button);
+    button.setAttribute('disabled', 'disabled');
+    button.setAttribute('aria-disabled', 'true');
+    button.setAttribute('tabindex', '-1');
   }
 }
 window.readoutUnitChanged = readoutUnitChanged
 
 function setDefaultUnit(button) {
   var select = button.closest('tr').querySelector('select[data-default-unit-id]');
-  var form = document.createElement('form');
+  var params = new URLSearchParams();
-  form.action = button.dataset.path;
+  params.append('quantity[default_unit_id]', select.value);
-  form.method = 'post';
+
-  form.dataset.turboStream = 'true';
+  fetch(button.dataset.path, {
-  var methodInput = document.createElement('input');
+    body: params,
-  methodInput.type = 'hidden'; methodInput.name = '_method'; methodInput.value = 'patch';
+    headers: {
-  var unitInput = document.createElement('input');
+      'Accept': 'text/vnd.turbo-stream.html',
-  unitInput.type = 'hidden'; unitInput.name = 'quantity[default_unit_id]'; unitInput.value = select.value;
+      'X-CSRF-Token': document.head.querySelector('meta[name=csrf-token]').content,
-  form.appendChild(methodInput);
+      'X-Requested-With': 'XMLHttpRequest'
-  form.appendChild(unitInput);
+    },
-  form.addEventListener('turbo:submit-end', function(event) {
+    method: 'PATCH'
-    if (event.detail.success) {
+  })
+  .then(response => {
+    if (response.ok) {
       select.dataset.defaultUnitId = select.value;
       readoutUnitChanged(select);
     }
-    form.remove();
+    return response.text();
-  });
+  })
-  document.body.appendChild(form);
+  .then(html => Turbo.renderStreamMessage(html));
-  form.requestSubmit();
 }
 window.setDefaultUnit = setDefaultUnit
 
@@ -282,17 +455,22 @@ window.dragEnd = dragEnd
 
 function drop(event) {
   event.preventDefault()
-  var idParam = event.currentTarget.getAttribute("data-drop-id-param")
+
+  var params = new URLSearchParams()
+  var id_param = event.currentTarget.getAttribute("data-drop-id-param")
   var id = event.currentTarget.getAttribute("data-drop-id").split("_").pop()
-  var form = document.createElement('form');
+  params.append(id_param, id)
-  form.action = event.dataTransfer.getData("text/plain");
+
-  form.method = 'post';
+  fetch(event.dataTransfer.getData("text/plain"), {
-  form.dataset.turboStream = 'true';
+    body: params,
-  var input = document.createElement('input');
+    headers: {
-  input.type = 'hidden'; input.name = idParam; input.value = id;
+      "Accept": "text/vnd.turbo-stream.html",
-  form.appendChild(input);
+      "X-CSRF-Token": document.head.querySelector("meta[name=csrf-token]").content,
-  form.addEventListener('turbo:submit-end', function() { form.remove(); });
+      "X-Requested-With": "XMLHttpRequest"
-  document.body.appendChild(form);
+    },
-  form.requestSubmit();
+    method: "POST"
+  })
+  .then(response => response.text())
+  .then(html => Turbo.renderStreamMessage(html))
 }
 window.drop = drop

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/_wide_table.html.erb

@@ -1,41 +0,0 @@
-<table class="items-table">
-  <thead>
-    <tr>
-      <th><%= Readout.human_attribute_name(:taken_at) %></th>
-      <% wide_quantities.each do |q| %>
-        <th><%= q.name %></th>
-      <% end %>
-      <th><%= Readout.human_attribute_name(:created_at) %></th>
-    </tr>
-  </thead>
-  <tbody>
-    <% wide_groups.each do |taken_at, readouts| %>
-      <tr>
-        <td><%= l(taken_at) if taken_at %></td>
-        <% wide_quantities.each do |q| %>
-          <% readout = readouts.find { |r| r.quantity_id == q.id } %>
-          <td class="ralign">
-            <% if readout %>
-              <span class="wide-cell">
-                <% if current_user.at_least(:active) %>
-                  <%= link_to format("%.10g", readout.value),
-                    edit_measurement_path(readout, view: :wide),
-                    class: 'link', onclick: 'this.blur();',
-                    data: {turbo_stream: true} %>
-                <% else %>
-                  <%= format("%.10g", readout.value) %>
-                <% end %>
-                &nbsp;<%= readout.unit.symbol %>
-                <% if current_user.at_least(:active) %>
-                  <%= image_button_to '', 'delete-outline', measurement_path(readout),
-                    method: :delete, data: {turbo_stream: true} %>
-                <% end %>
-              </span>
-            <% end %>
-          </td>
-        <% end %>
-        <td><%= l(readouts.first.created_at) %></td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>

app/views/measurements/create.turbo_stream.erb

@@ -1,13 +0,0 @@
-<% if @readouts.present? && @readouts.all?(&:persisted?) %>
-  <%= turbo_stream.update :flashes %>
-  <%= turbo_stream.remove :measurement_form %>
-  <%= turbo_stream.enable :new_measurement_link %>
-  <%= turbo_stream.remove :no_items %>
-  <% @readouts.each do |readout| %>
-    <%= turbo_stream.prepend :measurements, partial: 'readout', locals: {readout: readout} %>
-  <% end %>
-  <%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
-    locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>
-<% else %>
-  <%= turbo_stream.update :flashes %>
-<% end %>

app/views/measurements/destroy.turbo_stream.erb

@@ -1,5 +0,0 @@
-<%= turbo_stream.update :flashes %>
-<%= turbo_stream.remove @readout %>
-<%= turbo_stream.append(:measurements, render_no_items) if current_user.readouts.empty? %>
-<%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
-  locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>

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">
@@ -21,8 +22,8 @@
         <th><%= Quantity.model_name.human %></th>
         <th><%= Readout.human_attribute_name(:value) %></th>
         <th><%= Unit.model_name.human %></th>
-        <th data-column="taken-at"><%= Readout.human_attribute_name(:taken_at) %></th>
+        <th><%= Readout.human_attribute_name(:taken_at) %></th>
-        <th data-column="created-at"><%= Readout.human_attribute_name(:created_at) %></th>
+        <th><%= Readout.human_attribute_name(:created_at) %></th>
         <% if current_user.at_least(:active) %>
           <th></th>
         <% end %>
@@ -33,8 +34,7 @@
     </tbody>
   </table>
 
-  <div id="measurements-wide" class="measurements-wide">
+  <div id="measurements-wide" class="measurements-wide"></div>
-    <%= render 'wide_table', wide_groups: @wide_groups, wide_quantities: @wide_quantities %>
+
-  </div>
 </div>
 

app/views/measurements/update.turbo_stream.erb

@@ -1,4 +1,2 @@
 <%= turbo_stream.close_form dom_id(@readout, :edit) %>
 <%= turbo_stream.replace @readout, partial: 'measurements/readout', locals: {readout: @readout} %>
-<%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
-  locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>

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/controllers/measurements_controller_test.rb

@@ -1,65 +1,7 @@
 require "test_helper"
 
 class MeasurementsControllerTest < ActionDispatch::IntegrationTest
-  setup do
+  # test "the truth" do
-    host! '127.0.0.1'
+  #   assert true
-    @user = users(:alice)
+  # end
-    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 "index returns ok" do
-    get measurements_path
-    assert_response :success
-  end
-
-  test "index requires authentication" do
-    delete destroy_user_session_path
-    get measurements_path
-    assert_response :redirect
-  end
-
-  test "create records readout with taken_at" do
-    taken_at = 1.day.ago.change(usec: 0)
-    assert_difference -> { @user.readouts.count } do
-      post measurements_path, params: {
-        taken_at: taken_at.iso8601,
-        readouts: [{ quantity_id: @quantity.id, value: '82.5', unit_id: @unit.id }]
-      }, as: :turbo_stream
-    end
-    assert_response :success
-    assert_equal taken_at, @user.readouts.last.taken_at
-  end
-
-  test "create with no readouts selected shows alert" do
-    post measurements_path, params: { taken_at: Time.now.iso8601 }, as: :turbo_stream
-    assert_response :success
-  end
-
-  test "destroy removes readout" do
-    readout = @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
-    assert_difference -> { @user.readouts.count }, -1 do
-      delete measurement_path(readout), as: :turbo_stream
-    end
-    assert_response :success
-  end
-
-  test "destroy cannot remove another user's readout" do
-    other_quantity = users(:bob).quantities.create!(name: 'Weight')
-    other_unit = users(:bob).units.create!(symbol: 'kg')
-    readout = users(:bob).readouts.create!(quantity: other_quantity, unit: other_unit, value: 70.0, taken_at: 1.day.ago)
-    assert_no_difference -> { users(:bob).readouts.count } do
-      delete measurement_path(readout), as: :turbo_stream
-    end
-  end
-
-  test "update changes readout value" do
-    readout = @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
-    patch measurement_path(readout), params: {
-      readout: { value: '83.0', unit_id: @unit.id, taken_at: readout.taken_at.iso8601 }
-    }, as: :turbo_stream
-    assert_response :success
-    assert_in_delta 83.0, readout.reload.value
-  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