/** * 指标变化展示规则纯函数 * 规则来源:design.md §8 变化颜色与箭头规则 * 颜色映射:改善=绿 / 恶化=红 / 中性=灰 */ /** * 由 good_direction × movement 推导展示样式 * @param {string} goodDirection higher_is_better|lower_is_better|in_range_is_better|neutral * @param {string} movement up|down|flat * @returns {{trendLabel:string, cssClass:string, arrow:string}} */ export function resolveChangeStyle(goodDirection, movement) { var gd = goodDirection || 'neutral' var mv = movement || 'flat' if (mv === 'flat') { return { trendLabel: '中性', cssClass: 'flat', arrow: '→' } } // 是否"改善":higher_is_better 升=改善;lower_is_better 降=改善;in_range 视区间判定(此处交给 withRange 变体) var isImprove = false if (gd === 'higher_is_better') { isImprove = mv === 'up' } else if (gd === 'lower_is_better') { isImprove = mv === 'down' } else { // neutral / in_range_is_better(一期 in_range 的管理端手配方向;区间内移动判定留二期,先按中性展示) return { trendLabel: '中性', cssClass: gd === 'in_range_is_better' ? 'neutral-up' : mv === 'up' ? 'neutral-up' : 'neutral-down', arrow: mv === 'up' ? '↑' : '↓' } } if (isImprove) { return { trendLabel: '改善', cssClass: gd === 'higher_is_better' ? 'impr-up' : 'impr-down', arrow: mv === 'up' ? '↑' : '↓' } } return { trendLabel: '恶化', cssClass: gd === 'higher_is_better' ? 'worst-down' : 'worst-up', arrow: mv === 'up' ? '↑' : '↓' } } /** * Δ 展示文本 "±x (±x%)" * @param {number|null} delta * @param {number|null} deltaPct * @returns {string} */ export function formatDelta(delta, deltaPct) { if (delta === null || delta === undefined || isNaN(delta)) return '--' var sign = delta > 0 ? '+' : '' if (deltaPct === null || deltaPct === undefined || isNaN(deltaPct)) { return sign + delta } var pctSign = deltaPct > 0 ? '+' : '' return sign + delta + ' (' + pctSign + deltaPct + '%)' } /** * CSS 颜色类:改善=green-text 恶化=red-text 中性=gray-text * @param {string} cssClass resolveChangeStyle 返回的类 * @returns {string} */ export function colorClassFor(cssClass) { if (cssClass.indexOf('impr') === 0) return 'green-text' if (cssClass.indexOf('worst') === 0) return 'red-text' return 'gray-text' }