From a6a76155e58e216b7cf2a0a04c3dab8935927646 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 24 Dec 2024 14:47:40 +0100 Subject: [PATCH] Fix chart tooltips (#23435) --- src/components/chart/ha-chart-base.ts | 77 ++++++++++++-------- src/dialogs/more-info/ha-more-info-dialog.ts | 4 - 2 files changed, 47 insertions(+), 34 deletions(-) diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index 8bf720f65b..22060e0b42 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -61,6 +61,8 @@ export class HaChartBase extends LitElement { @state() private _chartHeight?: number; + @state() private _legendHeight?: number; + @state() private _tooltip?: Tooltip; @state() private _hiddenDatasets: Set = new Set(); @@ -214,10 +216,22 @@ export class HaChartBase extends LitElement { this.chart.update("none"); } + protected updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); + if (changedProperties.has("data") || changedProperties.has("options")) { + if (this.options?.plugins?.legend?.display) { + this._legendHeight = + this.renderRoot.querySelector(".chart-legend")?.clientHeight; + } else { + this._legendHeight = 0; + } + } + } + protected render() { return html` ${this.options?.plugins?.legend?.display === true - ? html`
+ ? html`
    ${this._datasetOrder.map((index) => { const dataset = this.data.datasets[index]; @@ -249,7 +263,7 @@ export class HaChartBase extends LitElement {
` : ""}
${this._tooltip ? html`
${this._tooltip.title}
${this._tooltip.beforeBody - ? html`
+ ? html`
${this._tooltip.beforeBody}
` : ""} @@ -456,6 +470,7 @@ export class HaChartBase extends LitElement { private _handleChartScroll(ev: MouseEvent) { const modifier = isMac ? "metaKey" : "ctrlKey"; + this._tooltip = undefined; if (!ev[modifier] && !this._showZoomHint) { this._showZoomHint = true; setTimeout(() => { @@ -498,15 +513,20 @@ export class HaChartBase extends LitElement { this._tooltip = undefined; return; } + const boundingBox = this.getBoundingClientRect(); this._tooltip = { ...context.tooltip, - top: this.chart!.canvas.offsetTop + context.tooltip.caretY + 12 + "px", + top: + boundingBox.y + + (this._legendHeight || 0) + + context.tooltip.caretY + + 12 + + "px", left: - this.chart!.canvas.offsetLeft + clamp( - context.tooltip.caretX, - 100, - this.clientWidth - 100 - this._paddingYAxisInternal + boundingBox.x + context.tooltip.caretX, + boundingBox.x + 100, + boundingBox.x + boundingBox.width - 100 ) - 100 + "px", @@ -525,16 +545,13 @@ export class HaChartBase extends LitElement { return css` :host { display: block; - position: var(--chart-base-position, relative); + position: relative; } - .animationContainer { + .animation-container { overflow: hidden; height: 0; transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1); } - .chart-container { - position: relative; - } canvas { max-height: var(--chart-max-height, 400px); } @@ -542,10 +559,10 @@ export class HaChartBase extends LitElement { /* allow scrolling if the chart is not zoomed */ touch-action: pan-y !important; } - .chartLegend { + .chart-legend { text-align: center; } - .chartLegend li { + .chart-legend li { cursor: pointer; display: inline-grid; grid-auto-flow: column; @@ -554,16 +571,16 @@ export class HaChartBase extends LitElement { align-items: center; color: var(--secondary-text-color); } - .chartLegend .hidden { + .chart-legend .hidden { text-decoration: line-through; } - .chartLegend .label { + .chart-legend .label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } - .chartLegend .bullet, - .chartTooltip .bullet { + .chart-legend .bullet, + .chart-tooltip .bullet { border-width: 1px; border-style: solid; border-radius: 50%; @@ -577,13 +594,13 @@ export class HaChartBase extends LitElement { margin-inline-start: initial; direction: var(--direction); } - .chartTooltip .bullet { + .chart-tooltip .bullet { align-self: baseline; } - .chartTooltip { + .chart-tooltip { padding: 8px; font-size: 90%; - position: absolute; + position: fixed; background: rgba(80, 80, 80, 0.9); color: white; border-radius: 4px; @@ -596,17 +613,17 @@ export class HaChartBase extends LitElement { box-sizing: border-box; direction: var(--direction); } - .chartLegend ul, - .chartTooltip ul { + .chart-legend ul, + .chart-tooltip ul { display: inline-block; padding: 0 0px; margin: 8px 0 0 0; width: 100%; } - .chartTooltip ul { + .chart-tooltip ul { margin: 0 4px; } - .chartTooltip li { + .chart-tooltip li { display: flex; white-space: pre-line; word-break: break-word; @@ -614,16 +631,16 @@ export class HaChartBase extends LitElement { line-height: 16px; padding: 4px 0; } - .chartTooltip .title { + .chart-tooltip .title { text-align: center; font-weight: 500; word-break: break-word; direction: ltr; } - .chartTooltip .footer { + .chart-tooltip .footer { font-weight: 500; } - .chartTooltip .beforeBody { + .chart-tooltip .before-body { text-align: center; font-weight: 300; word-break: break-all; diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index e73438ac69..51d14f1cce 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -545,11 +545,7 @@ export class MoreInfoDialog extends LitElement { /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */ --vertical-align-dialog: flex-start; --dialog-surface-margin-top: 40px; - /* This is needed for the tooltip of the history charts to be positioned correctly */ - --dialog-surface-position: static; - --dialog-content-position: static; --dialog-content-padding: 0; - --chart-base-position: static; } .content {