lc
75bad477b1
- 新增 trend-chart 柱状图组件(CSS,近7天/近6月切换) - records 页加训练趋势卡片(统计卡片后) - 训练记录列表时长从秒数改为 MM:SS 显示 Co-Authored-By: Claude <noreply@anthropic.com>
49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
/**
|
|
* Trend bar chart - pure CSS (no canvas), matches the calendar-heatmap's
|
|
* rendering approach for consistency.
|
|
*
|
|
* chartData: [{ label, value, valueText, highlight }]
|
|
* - label: bottom caption (e.g. "一" / "7月")
|
|
* - value: numeric magnitude (seconds); drives bar height
|
|
* - valueText: formatted string shown above the bar (e.g. "1分30秒")
|
|
* - highlight: truthy -> theme glow + bold label (today / this month)
|
|
*
|
|
* Bar height is value/max*100%, with an 8% floor for any non-zero value so
|
|
* short sessions stay visible. Zero values render a faint stub.
|
|
*/
|
|
Component({
|
|
properties: {
|
|
chartData: { type: Array, value: [] }
|
|
},
|
|
data: {
|
|
bars: []
|
|
},
|
|
observers: {
|
|
'chartData'(chartData) {
|
|
this._compute(chartData)
|
|
}
|
|
},
|
|
lifetimes: {
|
|
ready() {
|
|
this._compute(this.properties.chartData)
|
|
}
|
|
},
|
|
methods: {
|
|
_compute(chartData) {
|
|
const arr = Array.isArray(chartData) ? chartData : []
|
|
const max = arr.reduce((m, d) => Math.max(m, Number(d && d.value) || 0), 0)
|
|
const bars = arr.map((d) => {
|
|
const v = Number(d && d.value) || 0
|
|
return {
|
|
label: (d && d.label) || '',
|
|
value: v,
|
|
valueText: (d && d.valueText) || '',
|
|
highlight: !!(d && d.highlight),
|
|
percent: max > 0 ? Math.max((v / max) * 100, v > 0 ? 8 : 0) : 0
|
|
}
|
|
})
|
|
this.setData({ bars })
|
|
}
|
|
}
|
|
})
|