This displays the “total” cost-price value of my power for every hour of a certain day (at "startAt). How can I change the --f7-list-item-after-text-color for the top 5 items in this list? Or use some gradient green to red colour to show expensive (red) and cheap (green) times during the day? Prices currently vary from 0.15 to 0.30 € / kWh, but that might change off course, so for the gradient it would need to have the lowest and highest value during the day…
Specific answers would have to depend on what the actual content of your JSON is. But the general answer is that when you have a repeater, in addition to the loop variable (e.g., loop.day in your case) you have access to the full array the repeater is using in the expressions as well by appending _source (in your case, loop.day_source).
The expression parser recognizes many of the standard javascript array methods (using arrow function syntax for the methods that require function input parameters). So, with the full array you can sort or map or anything else.
In that case, I’d do something like the following. I would modify the repeater array itself using the map property to add a rank key to each of the array elements. This collects the total values, sorts them and then reorders that sorting from highest (index 0) to lowest (index last):
map: '{"startsAt":loop.day.startsAt,"total":loop.day.total,"rank":loop.day_source.map( d => d.total).sort().reverse().indexOf(loop.day.total)}'
And then the gradient option of red → green would be very easy just using the css hsl function where hue is the ratio of the rank of that element to the overall array length times 120. So, highest total or rank 0 = 0 hue (red) and lowest total or rank max = 120 hue (green).
