barbie-bot/fixin.me
0
0
Fork 0
forked from fixin.me/fixin.me
Code Pull Requests Activity

Add Plotly line charts view to Measurements page

Browse Source 
Users can now switch to a Charts view that renders a separate
time-series line chart for each tracked quantity, using Plotly.js
loaded via CDN. Charts are sorted chronologically and styled to
match the app palette. A dedicated toggle button and matching
CSS visibility rules mirror the existing Compact/Wide view pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
barbie-bot
2026-04-03 22:36:24 +00:00
parent bfd427c9b2
commit 71c22f2280
6 changed files with 85 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
app/assets/images/pictograms/chart-line.svg Normal file
View File

23
app/assets/stylesheets/application.css
View File

@@ -111,6 +111,11 @@ svg {
svg:last-child {
margin-right: 0;
}
.chart-panel svg {
height: auto;
margin: 0;
width: auto;
}
textarea {
margin: 0;
}
@@ -656,16 +661,30 @@ li::marker {
overflow-x: auto;
}
body[data-measurements-view=wide] .measurements-compact,
body[data-measurements-view=compact] .measurements-wide {
body[data-measurements-view=wide] .measurements-charts,
body[data-measurements-view=compact] .measurements-wide,
body[data-measurements-view=compact] .measurements-charts,
body[data-measurements-view=charts] .measurements-compact,
body[data-measurements-view=charts] .measurements-wide {
display: none;
}
body[data-measurements-view=compact] .view-toggle[data-view=compact],
body[data-measurements-view=wide] .view-toggle[data-view=wide] {
body[data-measurements-view=wide] .view-toggle[data-view=wide],
body[data-measurements-view=charts] .view-toggle[data-view=charts] {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: white;
fill: white;
}
.measurements-charts {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.chart-panel {
flex: 1 1 400px;
min-width: 300px;
}
#measurements tr.grouped td {
border-top: none;
}