diff --git a/readme.md b/readme.md index effbcce..92ccdc3 100644 --- a/readme.md +++ b/readme.md @@ -258,6 +258,44 @@ entities: Note that `5minute` period statistics are limited in time as normal recorder history is, contrary to other periods which keep data for years. +## show_value: + +Shows the value of the last datapoint as text in the plot. + +Examples: + +```yaml +type: custom:plotly-graph +entities: + - entity: sensor.temperature + show_value: true +``` + +Often one wants this to be the case for all entities + +```yaml +defaults: + entity: + show_value: true +``` + +If you want to make extra room for the value, you can either increase the right margin of the whole plot like this: + +```yaml +layout: + margin: + r: 100 +``` + +Or make space inside the the plot like this: + +```yaml +defaults: + entity: + show_value: + right_margin: 20 # this is 20% of the space in the x axis +``` + ## Offsets Offsets are useful to shift data in the temporal axis. For example, if you have a sensor that reports the forecasted temperature 3 hours from now, it means that the current value should be plotted in the future. With the `offset` attribute you can shift the data so it is placed in the correct position. @@ -365,8 +403,7 @@ entities: lambda: |- # Transforms the data (ys) => ys.map(y => (y × 9/5) + 32) unit_of_measurement: °F # Overrides the unit - show_value: # shows the last value with 40% right margin - right_margin: 40 + show_value: true # shows the last value as text texttemplate: >- # custom format for show_value %{y}%{customdata.unit_of_measurement}
%{customdata.name} diff --git a/src/plotly-graph-card.ts b/src/plotly-graph-card.ts index 46098df..87c0fc5 100644 --- a/src/plotly-graph-card.ts +++ b/src/plotly-graph-card.ts @@ -285,7 +285,7 @@ export class PlotlyGraph extends HTMLElement { const padPercent = Math.max( ...this.parsed_config.entities.map(({ show_value }) => { if (show_value === false) return 0 / 100; - if (show_value === true) return 10 / 100; + if (show_value === true) return 0 / 100; return show_value.right_margin / 100; }) ); @@ -545,6 +545,7 @@ export class PlotlyGraph extends HTMLElement { show_value_traces.push({ texttemplate: `%{y:.2~f}%{customdata.unit_of_measurement}`, // here so it can be overwritten ...mergedTrace, + cliponaxis: false, // allows the marker + text to be rendered above the right y axis. See https://github.com/dbuezas/lovelace-plotly-graph-card/issues/171 mode: "text+markers", showlegend: false, hoverinfo: "skip", diff --git a/src/themed-layout.ts b/src/themed-layout.ts index 109fd77..7e4abdb 100644 --- a/src/themed-layout.ts +++ b/src/themed-layout.ts @@ -7,6 +7,9 @@ const defaultExtraYAxes: Partial = { overlaying: "y", showgrid: false, visible: false, + // This makes sure that the traces are rendered above the right y axis, + // including the marker and its text. Useful for show_value. See cliponaxis in entity + layer: "below traces", }; const defaultLayout: Partial = {