Add support for annotation and button click (#525)

dbuezas · Jan 20, 2025 · 966afa4 · 966afa4
1 parent afc72e2
commit 966afa4
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 0 deletions.
diff --git a/readme.md b/readme.md
@@ -758,6 +758,44 @@ on_dblclick: |-
   }
 ```
 
+## Annotation and button click handlers
+
+In a similar way, you can respond to clicks on annotations (requiring `captureevents: true`).
+
+```yaml
+type: custom:plotly-graph
+entities:
+  - entity: sensor.temperature1
+layout:
+  annotations:
+    - x: 1
+      xref: paper
+      "y": 1
+      yref: paper
+      showarrow: false
+      text: "📊"
+      captureevents: true
+      on_click: $ex () => { window.location="/history?entity_id=sensor.temperature1"; }
+```
+
+Or to clicks on custom update menu buttons.
+
+```yaml
+type: custom:plotly-graph
+entities:
+  - entity: sensor.temperature1
+layout:
+  updatemenus:
+    - buttons:
+        - label: History
+          method: skip
+          on_click: $ex () => { window.location="/history?entity_id=sensor.temperature1"; }
+      showactive: false
+      type: buttons
+      x: 1
+      "y": 1
+```
+
 See more in plotly's [official docs](https://plotly.com/javascript/plotlyjs-events)
 
 ## Universal functions

diff --git a/src/plotly-graph-card.ts b/src/plotly-graph-card.ts
@@ -54,6 +54,8 @@ export class PlotlyGraph extends HTMLElement {
     legendItemDoubleclick?: EventEmitter;
     dataClick?: EventEmitter;
     doubleclick?: EventEmitter;
+    annotationClick?: EventEmitter;
+    buttonClick?: EventEmitter;
   } = {};
 
   constructor() {
@@ -178,6 +180,15 @@ export class PlotlyGraph extends HTMLElement {
       "plotly_doubleclick",
       this.onDoubleclick
     )!;
+    this.handles.annotationClick = this.contentEl.on(
+      "plotly_clickannotation",
+      this.onAnnotationClick
+    )!;
+    this.handles.buttonClick = this.contentEl.on(
+      // @ts-ignore Not properly typed in @types/plotly.js
+      "plotly_buttonclicked",
+      this.onButtonClick
+    )!;
     this.resetButtonEl.addEventListener("click", this.exitBrowsingMode);
     this.touchController.connect();
     this.plot({ should_fetch: true });
@@ -197,6 +208,8 @@ export class PlotlyGraph extends HTMLElement {
     );
     this.handles.dataClick?.off("plotly_click", this.onDataClick);
     this.handles.doubleclick?.off("plotly_doubleclick", this.onDoubleclick);
+    this.handles.annotationClick?.off("plotly_clickannotation", this.onAnnotationClick);
+    this.handles.buttonClick?.off("plotly_buttonclicked", this.onButtonClick);
     clearTimeout(this.handles.refreshTimeout!);
     this.resetButtonEl.removeEventListener("click", this.exitBrowsingMode);
     this.touchController.disconnect();
@@ -309,6 +322,18 @@ export class PlotlyGraph extends HTMLElement {
   onDoubleclick = () => {
     return this.parsed_config.on_dblclick();
   };
+  onAnnotationClick = ({ annotation, ...rest }) => {
+    if (annotation.on_click) {
+        return annotation.on_click({ annotation, ...rest });
+    }
+    return true;
+  };
+  onButtonClick = ({ button, ...rest }) => {
+    if (button._input.on_click) {
+        return button._input.on_click({ button, ...rest });
+    }
+    return true;
+  };
   onRestyle = async () => {
     // trace visibility changed, fetch missing traces
     if (this.isInternalRelayout) return;

diff --git a/yaml-editor/src/schema.json b/yaml-editor/src/schema.json
@@ -3498,6 +3498,17 @@
                     "$ref": "#/definitions/With$fn<string|undefined>",
                     "description": "Sets text to appear when hovering over this annotation.\nIf omitted or blank, no hover label will appear."
                 },
+                "onclick": {
+                    "anyOf": [
+                        {
+                            "pattern": "^[\\s]*\\$(ex|fn)\\s[\\s\\S]+$",
+                            "type": "string"
+                        },
+                        {
+                            "$ref": "#/definitions/With$fn<Function>"
+                        }
+                    ]
+                },
                 "opacity": {
                     "anyOf": [
                         {
@@ -4028,6 +4039,17 @@
                     "$ref": "#/definitions/With$fn<string|undefined>",
                     "description": "Sets text to appear when hovering over this annotation.\nIf omitted or blank, no hover label will appear."
                 },
+                "onclick": {
+                    "anyOf": [
+                        {
+                            "pattern": "^[\\s]*\\$(ex|fn)\\s[\\s\\S]+$",
+                            "type": "string"
+                        },
+                        {
+                            "$ref": "#/definitions/With$fn<Function>"
+                        }
+                    ]
+                },
                 "opacity": {
                     "anyOf": [
                         {