History tooltip RTL fix (#24917)

* History tooltip RTL fix

* Fix background color
This commit is contained in:
Yosi Levy 2025-04-28 16:30:26 +03:00 committed by GitHub
parent ca642d46cc
commit 7c46d2d2f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 3 deletions

View File

@ -590,6 +590,10 @@ export class HaChartBase extends LitElement {
lineStyle: { color: style.getPropertyValue("--info-color") },
crossStyle: { color: style.getPropertyValue("--info-color") },
},
extraCssText:
"direction:" +
style.getPropertyValue("--direction") +
";margin-inline-start:3px;margin-inline-end:8px;",
},
timeline: {},
};

View File

@ -135,7 +135,7 @@ export class StateHistoryChartLine extends LitElement {
seriesIndex: index,
value: lastData,
// HTML copied from echarts. May change based on options
marker: `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
marker: `<span style="display:inline-block;margin-right:4px;margin-inline-end:4px;margin-inline-start:initial;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
});
});
const unit = this.unit

View File

@ -127,7 +127,7 @@ export class StateHistoryChartTimeline extends LitElement {
private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
(params: TooltipPositionCallbackParams) => {
const { value, name, marker, seriesName } = Array.isArray(params)
const { value, name, marker, seriesName, color } = Array.isArray(params)
? params[0]
: params;
const title = seriesName
@ -138,8 +138,12 @@ export class StateHistoryChartTimeline extends LitElement {
"ui.components.history_charts.duration"
)}: ${millisecondsToDuration(durationInMs)}`;
const markerLocalized = !computeRTL(this.hass)
? marker
: `<span style="direction: rtl;display:inline-block;margin-right:4px;margin-inline-end:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
const lines = [
marker + name,
markerLocalized + name,
formatDateTimeWithSeconds(
new Date(value![1]),
this.hass.locale,