Add new metric tiles

- Add drag factor (int)
- Add distance per stroke (meters with 1 decimal place)
- Add drive length (meters with 2 decimal places)
- Add drive duration (seconds with 2 decimal places)
- Add recovery duration (seconds with 2 decimal places)
This commit is contained in:
Abász 2023-03-25 14:27:18 +01:00
parent 594f8099c3
commit bf55638e82
2 changed files with 24 additions and 5 deletions

View File

@ -28,3 +28,4 @@ export const icon_upload = svg`<svg aria-hidden="true" focusable="false" class="
export const icon_antplus = svg`<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="536.723163841808" viewBox="0 0 380 532" aria-hidden="true" focusable="false" class="icon" role="img"><path fill="currentColor" d="M176.836 0.707 C 60.266 18.305,-16.078 120.160,3.321 232.203 C 26.151 364.067,169.680 436.811,288.977 376.981 C 437.287 302.601,434.584 89.747,284.426 18.617 C 254.109 4.256,206.179 -3.723,176.836 0.707 M229.910 16.544 C 360.710 37.096,427.877 190.879,354.055 300.782 C 274.148 419.742,97.047 408.376,33.765 280.226 C -32.417 146.205,81.393 -6.791,229.910 16.544 M176.836 66.680 C 134.648 79.679,142.046 142.642,186.099 145.521 L 194.232 146.052 200.634 162.009 C 204.154 170.786,207.236 178.475,207.481 179.096 C 207.726 179.718,205.374 181.657,202.253 183.407 C 194.503 187.753,184.428 197.342,179.661 204.911 C 174.868 212.521,176.571 212.453,158.757 205.752 L 144.068 200.227 143.344 192.293 C 138.554 139.803,61.050 143.994,63.509 196.610 C 65.127 231.232,106.117 247.599,131.274 223.668 L 135.841 219.323 152.418 225.525 L 168.995 231.727 168.554 239.542 C 164.794 306.084,254.502 335.622,292.084 280.216 C 322.809 234.919,290.211 174.246,235.028 174.021 L 227.684 173.991 220.504 155.893 L 213.324 137.796 217.881 132.852 C 245.378 103.021,215.455 54.781,176.836 66.680 M61.315 483.337 C 54.332 502.445,47.085 522.295,45.209 527.447 L 41.798 536.815 51.028 536.486 L 60.257 536.158 63.781 526.554 L 67.304 516.949 82.428 516.949 L 97.552 516.949 100.847 526.836 L 104.143 536.723 113.653 536.723 C 118.884 536.723,123.164 536.580,123.164 536.406 C 123.164 536.231,117.013 519.325,109.496 498.835 C 101.978 478.346,94.813 458.658,93.573 455.085 L 91.318 448.588 82.665 448.591 L 74.011 448.595 61.315 483.337 M138.983 492.655 L 138.983 536.723 148.003 536.723 L 157.023 536.723 157.325 508.567 L 157.627 480.410 175.019 508.567 L 192.410 536.723 200.725 536.723 L 209.040 536.723 209.040 492.655 L 209.040 448.588 200.019 448.588 L 190.999 448.588 190.697 476.878 L 190.395 505.168 173.063 476.878 L 155.731 448.588 147.357 448.588 L 138.983 448.588 138.983 492.655 M225.989 456.497 L 225.989 464.407 238.983 464.407 L 251.977 464.407 251.977 500.565 L 251.977 536.723 261.017 536.723 L 270.056 536.723 270.056 500.565 L 270.056 464.407 283.051 464.407 L 296.045 464.407 296.045 456.497 L 296.045 448.588 261.017 448.588 L 225.989 448.588 225.989 456.497 M332.957 464.030 C 332.542 464.444,332.203 469.783,332.203 475.895 L 332.203 487.006 322.034 487.006 L 311.864 487.006 311.864 494.915 L 311.864 502.825 321.994 502.825 L 332.124 502.825 332.446 514.407 L 332.768 525.989 340.395 526.323 L 348.023 526.657 348.023 514.783 L 348.023 502.910 358.475 502.585 L 368.927 502.260 368.927 494.915 L 368.927 487.571 358.475 487.246 L 348.023 486.921 348.023 475.099 L 348.023 463.277 340.866 463.277 C 336.930 463.277,333.371 463.616,332.957 464.030 M86.513 485.028 C 88.831 492.020,90.962 498.376,91.247 499.153 C 91.638 500.213,89.366 500.565,82.141 500.565 L 72.514 500.565 77.190 486.441 C 79.762 478.672,81.963 472.316,82.082 472.316 C 82.202 472.316,84.195 478.037,86.513 485.028 " ></path></g></svg>`
export const icon_settings = svg`<svg viewBox="0 0 1000 1000" focusable="false" class="icon" role="img"><path fill="currentColor" d="M983.8,425.7c-2.3-15.3-12.9-28.1-27.5-33.3L879.2,365c-4.6-12.9-9.7-25.5-15.5-37.7l35.1-73.9c6.6-13.9,5.1-30.4-4.1-42.9c-29.6-40.3-65-75.7-105.2-105.1c-12.5-9.2-28.9-10.7-42.9-4.1l-73.9,35.1c-12.2-5.7-24.8-10.9-37.7-15.5l-27.5-77.2c-5.2-14.5-17.9-25.1-33.2-27.4c-54.3-8.3-94.4-8.3-148.8,0c-15.3,2.4-28,12.9-33.2,27.4L365,120.9c-12.9,4.6-25.5,9.7-37.7,15.5l-73.9-35.1c-13.9-6.6-30.4-5.1-42.9,4.1c-40.2,29.5-75.6,64.9-105.2,105.1c-9.2,12.5-10.7,29-4.1,42.9l35.1,73.9c-5.7,12.1-10.9,24.7-15.5,37.7l-77.2,27.5c-14.6,5.2-25.1,17.9-27.4,33.2C12,453.3,10,476.9,10,500c0,23,2,46.7,6.2,74.4c2.3,15.3,12.9,28.1,27.5,33.3l77.2,27.5c4.6,13,9.8,25.5,15.5,37.7l-35.1,73.9c-6.6,13.9-5.1,30.4,4.1,42.9c29.6,40.2,65,75.6,105.2,105.2c12.5,9.2,28.9,10.7,42.9,4.1l73.9-35.1c12.2,5.7,24.8,10.9,37.7,15.5l27.5,77.2c5.2,14.5,17.9,25.1,33.2,27.4c27.2,4.2,51.5,6.2,74.4,6.2s47.3-2,74.4-6.2c15.3-2.4,28-12.9,33.2-27.4l27.5-77.2c12.9-4.6,25.5-9.7,37.7-15.5l73.9,35.1c14,6.7,30.4,5.1,42.9-4.1c40.3-29.6,75.7-65,105.2-105.2c9.1-12.4,10.7-28.9,4.1-42.9l-35.1-73.9c5.7-12.2,10.9-24.8,15.5-37.7l77.2-27.5c14.6-5.2,25.1-17.9,27.5-33.3c4.2-27.7,6.2-51.3,6.2-74.4C990,477,988,453.3,983.8,425.7z M904,537.1l-72.4,25.8c-12.7,4.5-22.4,14.8-26.2,27.7c-6.5,21.9-15,42.6-25.3,61.5c-6.4,11.8-6.8,26-1.1,38.1l32.9,69.1c-15.9,19.1-33.4,36.6-52.5,52.5L690.2,779c-12.2-5.8-26.3-5.4-38.1,1c-19,10.3-39.7,18.8-61.6,25.3c-12.9,3.8-23.2,13.5-27.7,26.2L537.1,904c-26.3,2.7-47.8,2.7-74.1,0l-25.8-72.5c-4.5-12.6-14.8-22.4-27.7-26.2c-21.9-6.5-42.6-15-61.6-25.3c-11.8-6.5-26-6.9-38.1-1l-69.1,32.8c-19.1-15.9-36.6-33.4-52.5-52.5l32.9-69.1c5.8-12.1,5.4-26.3-1.1-38.1c-10.3-18.9-18.8-39.6-25.3-61.6c-3.8-12.9-13.6-23.2-26.2-27.6L96,537.1c-1.4-13.2-2-25.3-2-37.1s0.7-23.9,2-37l72.4-25.8c12.6-4.5,22.4-14.8,26.2-27.6c6.5-21.9,15-42.6,25.3-61.6c6.4-11.8,6.8-26,1.1-38.1l-32.9-69.1c15.9-19.1,33.5-36.7,52.5-52.5l69.1,32.8c12.1,5.8,26.3,5.4,38.1-1c19-10.3,39.7-18.8,61.6-25.3c12.9-3.8,23.2-13.6,27.7-26.2l25.8-72.5c26.1-2.7,47.6-2.7,74.1,0l25.8,72.5c4.5,12.6,14.8,22.4,27.7,26.2c21.9,6.5,42.6,15,61.6,25.3c11.8,6.5,26,6.9,38.1,1l69.1-32.8c19.1,15.9,36.6,33.4,52.5,52.5L779,309.8c-5.8,12.1-5.4,26.3,1.1,38.1c10.4,19.1,18.9,39.8,25.3,61.6c3.8,12.9,13.5,23.2,26.2,27.7l72.4,25.8c1.4,13.2,2,25.3,2,37.1C906,511.8,905.3,523.9,904,537.1z"/><path fill="currentColor" d="M500,295.7c-107.2,0-194.4,87.2-194.4,194.4S392.8,684.6,500,684.6c107.2,0,194.4-87.2,194.4-194.4S607.2,295.7,500,295.7z M500,600.6c-60.9,0-110.4-49.5-110.4-110.4c0-60.9,49.5-110.4,110.4-110.4c60.9,0,110.4,49.5,110.4,110.4C610.4,551,560.9,600.6,500,600.6z"/></svg>`
export const rower_icon = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 4 26 20" class="icon"><path fill="currentColor" d="M 6 5 C 4.8954305 5 4 5.8954305 4 7 C 4 8.1045695 4.8954305 9 6 9 C 7.1045695 9 8 8.1045695 8 7 C 8 5.8954305 7.1045695 5 6 5 z M 3.6875 9 C 3.2021484 9.0849609 2.78125 9.40625 2.59375 9.90625 L 0.09375 16.09375 C -0.30625 17.09375 0.1875 18.2875 1.1875 18.6875 L 1.5 18.8125 C 1.5612745 18.83701 1.6249537 18.825906 1.6875 18.84375 A 1.250125 1.250125 0 0 0 1.8125 18.875 C 1.8352334 18.87983 1.8521829 18.902252 1.875 18.90625 A 1.250125 1.250125 0 0 0 2.0625 18.9375 A 1.250125 1.250125 0 0 0 2.53125 18.9375 L 7.15625 18.46875 L 9.25 20 L 6.25 20 L 4.4375 19.09375 L 4.25 19 L 4 19 L 0 19 L 0 21 L 3.75 21 L 5.5625 21.90625 L 5.75 22 L 6 22 L 20 22 L 20.625 22 L 20.90625 21.4375 L 23.65625 15.90625 C 24.984128 15.598635 26 14.415394 26 13 C 26 11.35499 24.64501 10 23 10 C 21.707982 10 20.605718 10.844255 20.1875 12 L 13.8125 12 L 13.8125 13 L 20 13 C 20 14.125993 20.63434 15.112309 21.5625 15.625 L 19.375 20 L 12.34375 20 A 1.2533159 1.2533159 0 0 0 11.84375 18.78125 L 8.21875 16.1875 A 1.250125 1.250125 0 0 0 7.53125 15.9375 A 1.250125 1.250125 0 0 0 7.375 15.96875 L 7.25 15.96875 L 3.40625 15.6875 L 5.1875 15.09375 L 6.59375 11.65625 L 11.75 12.96875 A 1.0004882 1.0004882 0 1 0 12.25 11.03125 L 4.34375 9.03125 A 1.0001 1.0001 0 0 0 4.28125 9 C 4.202105 8.9852648 4.141238 9.0037209 4.0625 9 A 1.0001 1.0001 0 0 0 4 9 C 3.8992188 8.9992187 3.7845703 8.9830078 3.6875 9 z M 23 12 C 23.564128 12 24 12.435872 24 13 C 24 13.564128 23.564128 14 23 14 C 22.435872 14 22 13.564128 22 13 C 22 12.435872 22.435872 12 23 12 z"/></svg>`

View File

@ -1,6 +1,6 @@
import { html } from 'lit'
import { simpleMetricFactory, formatDistance, formatNumber, secondsToPace } from '../lib/helper'
import { icon_bolt, icon_clock, icon_fire, icon_heartbeat, icon_paddle, icon_route, icon_stopwatch } from '../lib/icons'
import { icon_bolt, icon_clock, icon_fire, icon_heartbeat, icon_paddle, icon_route, icon_stopwatch, rower_icon } from '../lib/icons'
import '../components/DashboardForceCurve.js'
import '../components/DashboardActions.js'
import '../components/BatteryIcon.js'
@ -15,21 +15,39 @@ export const DASHBOARD_METRICS = {
return simpleMetricFactory(linearDistance.distance, linearDistance.unit, config.guiConfigs.showIcons ? icon_route : '')
}
},
pace: { displayName: 'Pace/500', size: 1, template: (metrics, config) => simpleMetricFactory(secondsToPace(500 / metrics?.cycleLinearVelocity), '/500m', config.guiConfigs.showIcons ? icon_stopwatch : '') },
power: { displayName: 'Power', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cyclePower), 'watt', config.guiConfigs.showIcons ? icon_bolt : '') },
stkRate: { displayName: 'Stroke rate', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cycleStrokeRate), '/min', config.guiConfigs.showIcons ? icon_paddle : '') },
heartRate: {
displayName: 'Heart rate',
size: 1,
template: (metrics, config) => html`<dashboard-metric .icon=${config.guiConfigs.showIcons ? icon_heartbeat : ''} unit="bpm" .value=${formatNumber(metrics?.heartrate)}>
${metrics?.heartrateBatteryLevel
? html`<battery-icon .batteryLevel=${metrics?.heartrateBatteryLevel}></battery-icon>`
: ''}
</dashboard-metric>`
${metrics?.heartrateBatteryLevel
? html`<battery-icon .batteryLevel=${metrics?.heartrateBatteryLevel}></battery-icon>`
: ''}
</dashboard-metric>`
},
totalStk: { displayName: 'Total strokes', size: 1, template: (metrics, config) => simpleMetricFactory(metrics?.totalNumberOfStrokes, 'stk', config.guiConfigs.showIcons ? icon_paddle : '') },
calories: { displayName: 'Calories', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.totalCalories), 'kcal', config.guiConfigs.showIcons ? icon_fire : '') },
timer: { displayName: 'Timer', size: 1, template: (metrics, config) => simpleMetricFactory(secondsToPace(metrics?.totalMovingTime), '', config.guiConfigs.showIcons ? icon_clock : '') },
distancePerStk: { displayName: 'Dist per Stroke', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cycleDistance, 1), 'm', config.guiConfigs.showIcons ? rower_icon : '') },
dragFactor: { displayName: 'Drag factor', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.dragFactor), '', config.guiConfigs.showIcons ? 'Drag' : '') },
driveLength: { displayName: 'Drive length', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.driveLength, 2), 'm', config.guiConfigs.showIcons ? 'Drive' : '') },
driveDuration: { displayName: 'Drive duration', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.driveDuration, 2), 'sec', config.guiConfigs.showIcons ? 'Drive' : '') },
recoveryDuration: { displayName: 'Recovery duration', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.recoveryDuration, 2), 'sec', config.guiConfigs.showIcons ? 'Recovery' : '') },
forceCurve: { displayName: 'Force curve', size: 2, template: (metrics) => html`<dashboard-force-curve .value=${metrics.driveHandleForceCurve} style="grid-column: span 2"></dashboard-force-curve>` },
actions: { displayName: 'Actions', size: 1, template: (appState, config) => html`<dashboard-actions .appMode=${appState.appMode} .config=${config}></dashboard-actions>` }
}