50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
/** Shared recommendation-card visuals (bars + confidence badge).
|
|
*
|
|
* The visual layout is shared between the panel's task-detail page
|
|
* (maintenance-panel._renderRecommendationCard) and the Lovelace
|
|
* task-quick-actions dialog (task-quick-actions-dialog._renderRecommendation).
|
|
*
|
|
* The two contexts disagree on:
|
|
* - Whether ha-button or native <button> is used (ha-button isn't always
|
|
* registered in Lovelace context — same lazy-load issue that bit
|
|
* complete-dialog with ha-textfield in #50)
|
|
* - Which actions are exposed (panel has Apply/Reanalyze/Dismiss; the
|
|
* dialog has Apply/Reanalyze, Dismiss is panel-only)
|
|
*
|
|
* So this renderer only emits the **bars + labels + confidence badge** —
|
|
* every caller wraps it with its own header + actions row. CSS classes
|
|
* are in sharedStyles (.interval-comparison, .interval-bar,
|
|
* .interval-label, .interval-visual.current/.suggested, .confidence-badge).
|
|
*/
|
|
|
|
import { html, type TemplateResult } from "lit";
|
|
import { t } from "../styles";
|
|
|
|
export function renderRecommendationBars(
|
|
current: number | null | undefined,
|
|
suggested: number,
|
|
confidence: string,
|
|
lang: string,
|
|
): TemplateResult {
|
|
const maxBar = Math.max(current || 1, suggested);
|
|
return html`
|
|
<div class="interval-comparison">
|
|
<div class="interval-bar">
|
|
<div class="interval-label">
|
|
${t("current", lang)}: ${current ?? "—"} ${current != null ? t("days", lang) : ""}
|
|
</div>
|
|
<div class="interval-visual current"
|
|
style="width: ${current != null ? Math.min((current / maxBar) * 100, 100) : 0}%"></div>
|
|
</div>
|
|
<div class="interval-bar">
|
|
<div class="interval-label">
|
|
${t("recommended", lang)}: ${suggested} ${t("days", lang)}
|
|
<span class="confidence-badge ${confidence}">${t(`confidence_${confidence}`, lang)}</span>
|
|
</div>
|
|
<div class="interval-visual suggested"
|
|
style="width: ${Math.min((suggested / maxBar) * 100, 100)}%"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|