52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
const { getBarPercent } = require('../../utils/util')
|
|
|
|
/**
|
|
* 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 strictly proportional to value/max. Zero values render a
|
|
* faint stub so empty dates remain visible without distorting the data.
|
|
*/
|
|
Component({
|
|
properties: {
|
|
chartData: { type: Array, value: [] },
|
|
variant: { type: String, value: 'total' }
|
|
},
|
|
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: getBarPercent(v, max)
|
|
}
|
|
})
|
|
this.setData({ bars })
|
|
}
|
|
}
|
|
})
|