From 5c27d28ba43e87ec12b8538be229fc574d67324a Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Tue, 5 Mar 2024 16:25:12 -0700
Subject: [PATCH] Canvas: Add datalink support to rectangle and ellipse
 elements (#83870)

---
 .../panels-visualizations/visualizations/canvas/index.md       | 2 +-
 public/app/features/canvas/elements/ellipse.tsx                | 3 +++
 public/app/features/canvas/elements/rectangle.tsx              | 3 +++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/sources/panels-visualizations/visualizations/canvas/index.md b/docs/sources/panels-visualizations/visualizations/canvas/index.md
index 162639163a9..106b7d03d3d 100644
--- a/docs/sources/panels-visualizations/visualizations/canvas/index.md
+++ b/docs/sources/panels-visualizations/visualizations/canvas/index.md
@@ -127,7 +127,7 @@ The inline editing toggle lets you lock or unlock the canvas. When turned off th
 
 ### Data links
 
-Canvases support [data links](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-data-links/). You can create a data link for a metric-value element and display it for all elements that use the field name by following these steps:
+Canvases support [data links](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-data-links/), but only for metric-value, text, rectangle, and ellipse elements. You can add a data link by following these steps:
 
 1. Set an element to be tied to a field value.
 1. Turn off the inline editing toggle.
diff --git a/public/app/features/canvas/elements/ellipse.tsx b/public/app/features/canvas/elements/ellipse.tsx
index 2cac9ba1de4..c16b1cf057c 100644
--- a/public/app/features/canvas/elements/ellipse.tsx
+++ b/public/app/features/canvas/elements/ellipse.tsx
@@ -6,6 +6,7 @@ import { config } from 'app/core/config';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
+import { getDataLinks } from 'app/plugins/panel/canvas/utils';
 
 import { CanvasElementItem, CanvasElementProps, defaultBgColor, defaultTextColor } from '../element';
 import { Align, VAlign, EllipseConfig, EllipseData } from '../types';
@@ -98,6 +99,8 @@ export const ellipseItem: CanvasElementItem<EllipseConfig, EllipseData> = {
       data.color = ctx.getColor(cfg.color).value();
     }
 
+    data.links = getDataLinks(ctx, cfg, data.text);
+
     return data;
   },
 
diff --git a/public/app/features/canvas/elements/rectangle.tsx b/public/app/features/canvas/elements/rectangle.tsx
index 4f0f515dc1a..c91e86dcf17 100644
--- a/public/app/features/canvas/elements/rectangle.tsx
+++ b/public/app/features/canvas/elements/rectangle.tsx
@@ -7,6 +7,7 @@ import { config } from 'app/core/config';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
+import { getDataLinks } from 'app/plugins/panel/canvas/utils';
 
 import { CanvasElementItem, CanvasElementProps, defaultBgColor, defaultTextColor } from '../element';
 import { Align, TextConfig, TextData, VAlign } from '../types';
@@ -81,6 +82,8 @@ export const rectangleItem: CanvasElementItem<TextConfig, TextData> = {
       data.color = ctx.getColor(cfg.color).value();
     }
 
+    data.links = getDataLinks(ctx, cfg, data.text);
+
     return data;
   },