From dcac853b713b842779547a0bb1bc116dab849961 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 30 Mar 2023 16:12:26 +0200 Subject: [PATCH] Improve graph tooltips (#15887 * Improve graph tooltips * Use xy for state charts * intersect, bigger hitRadius * improve energy * fix position tooltips --- src/components/chart/ha-chart-base.ts | 1 + src/components/chart/state-history-chart-line.ts | 10 +++++----- src/components/chart/statistics-chart.ts | 12 +++++++----- .../cards/energy/hui-energy-gas-graph-card.ts | 13 +++++-------- .../cards/energy/hui-energy-solar-graph-card.ts | 11 ++++------- .../cards/energy/hui-energy-usage-graph-card.ts | 13 ++++--------- .../cards/energy/hui-energy-water-graph-card.ts | 13 +++++-------- 7 files changed, 31 insertions(+), 42 deletions(-) diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index 0235fcdf88..3ffe16f64c 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -302,6 +302,7 @@ export default class HaChartBase extends LitElement { return css` :host { display: block; + position: relative; } .chartContainer { overflow: hidden; diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index c4b735d488..064a23d27a 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -61,6 +61,10 @@ class StateHistoryChartLine extends LitElement { this._chartOptions = { parsing: false, animation: false, + interaction: { + mode: "nearest", + axis: "x", + }, scales: { x: { type: "time", @@ -108,7 +112,6 @@ class StateHistoryChartLine extends LitElement { }, plugins: { tooltip: { - mode: "nearest", callbacks: { label: (context) => `${context.dataset.label}: ${formatNumber( @@ -127,16 +130,13 @@ class StateHistoryChartLine extends LitElement { }, }, }, - hover: { - mode: "nearest", - }, elements: { line: { tension: 0.1, borderWidth: 1.5, }, point: { - hitRadius: 5, + hitRadius: 50, }, }, // @ts-expect-error diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index 906b265143..1374d9dbf6 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -102,6 +102,7 @@ class StatisticsChart extends LitElement { if ( changedProps.has("statisticsData") || changedProps.has("statTypes") || + changedProps.has("chartType") || changedProps.has("hideLegend") ) { this._generateData(); @@ -149,6 +150,10 @@ class StatisticsChart extends LitElement { this._chartOptions = { parsing: false, animation: false, + interaction: { + mode: "nearest", + axis: "x", + }, scales: { x: { type: "time", @@ -186,7 +191,6 @@ class StatisticsChart extends LitElement { }, plugins: { tooltip: { - mode: "nearest", callbacks: { label: (context) => `${context.dataset.label}: ${formatNumber( @@ -208,9 +212,6 @@ class StatisticsChart extends LitElement { }, }, }, - hover: { - mode: "nearest", - }, elements: { line: { tension: 0.4, @@ -219,7 +220,7 @@ class StatisticsChart extends LitElement { }, bar: { borderWidth: 1.5, borderRadius: 4 }, point: { - hitRadius: 5, + hitRadius: 50, }, }, // @ts-expect-error @@ -316,6 +317,7 @@ class StatisticsChart extends LitElement { } statDataSets.forEach((d, i) => { if ( + this.chartType === "line" && prevEndTime && prevValues && prevEndTime.getTime() !== start.getTime() diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts index 3dd3e0ca3d..b081a62ff0 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts @@ -157,6 +157,9 @@ export class HuiEnergyGasGraphCard const options: ChartOptions = { parsing: false, animation: false, + interaction: { + mode: "x", + }, scales: { x: { type: "time", @@ -171,9 +174,6 @@ export class HuiEnergyGasGraphCard maxRotation: 0, sampleSize: 5, autoSkipPadding: 20, - major: { - enabled: true, - }, font: (context) => context.tick && context.tick.major ? ({ weight: "bold" } as any) @@ -213,7 +213,7 @@ export class HuiEnergyGasGraphCard }, plugins: { tooltip: { - mode: "nearest", + position: "nearest", callbacks: { title: (datasets) => { if (dayDifference > 0) { @@ -244,13 +244,10 @@ export class HuiEnergyGasGraphCard }, }, }, - hover: { - mode: "nearest", - }, elements: { bar: { borderWidth: 1.5, borderRadius: 4 }, point: { - hitRadius: 5, + hitRadius: 50, }, }, // @ts-expect-error diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts index 6d00ed3209..df3ad940c3 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts @@ -154,6 +154,9 @@ export class HuiEnergySolarGraphCard const options: ChartOptions = { parsing: false, animation: false, + interaction: { + mode: "x", + }, scales: { x: { type: "time", @@ -168,9 +171,6 @@ export class HuiEnergySolarGraphCard maxRotation: 0, sampleSize: 5, autoSkipPadding: 20, - major: { - enabled: true, - }, font: (context) => context.tick && context.tick.major ? ({ weight: "bold" } as any) @@ -209,7 +209,7 @@ export class HuiEnergySolarGraphCard }, plugins: { tooltip: { - mode: "nearest", + position: "nearest", callbacks: { title: (datasets) => { if (dayDifference > 0) { @@ -240,9 +240,6 @@ export class HuiEnergySolarGraphCard }, }, }, - hover: { - mode: "nearest", - }, elements: { line: { tension: 0.3, diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts index e65a621b15..fc1ff68cf3 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts @@ -148,6 +148,9 @@ export class HuiEnergyUsageGraphCard const options: ChartOptions = { parsing: false, animation: false, + interaction: { + mode: "x", + }, scales: { x: { type: "time", @@ -162,9 +165,6 @@ export class HuiEnergyUsageGraphCard maxRotation: 0, sampleSize: 5, autoSkipPadding: 20, - major: { - enabled: true, - }, font: (context) => context.tick && context.tick.major ? ({ weight: "bold" } as any) @@ -204,8 +204,6 @@ export class HuiEnergyUsageGraphCard }, plugins: { tooltip: { - mode: "x", - intersect: true, position: "nearest", filter: (val) => val.formattedValue !== "0", callbacks: { @@ -265,13 +263,10 @@ export class HuiEnergyUsageGraphCard }, }, }, - hover: { - mode: "nearest", - }, elements: { bar: { borderWidth: 1.5, borderRadius: 4 }, point: { - hitRadius: 5, + hitRadius: 50, }, }, // @ts-expect-error diff --git a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts index e5b751cbf9..08370783cf 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts @@ -157,6 +157,9 @@ export class HuiEnergyWaterGraphCard const options: ChartOptions = { parsing: false, animation: false, + interaction: { + mode: "x", + }, scales: { x: { type: "time", @@ -171,9 +174,6 @@ export class HuiEnergyWaterGraphCard maxRotation: 0, sampleSize: 5, autoSkipPadding: 20, - major: { - enabled: true, - }, font: (context) => context.tick && context.tick.major ? ({ weight: "bold" } as any) @@ -213,7 +213,7 @@ export class HuiEnergyWaterGraphCard }, plugins: { tooltip: { - mode: "nearest", + position: "nearest", callbacks: { title: (datasets) => { if (dayDifference > 0) { @@ -244,13 +244,10 @@ export class HuiEnergyWaterGraphCard }, }, }, - hover: { - mode: "nearest", - }, elements: { bar: { borderWidth: 1.5, borderRadius: 4 }, point: { - hitRadius: 5, + hitRadius: 50, }, }, // @ts-expect-error