feat: baseURL for image paths (#855)

vega · Dec 18, 2023 · 136e38c · 136e38c
1 parent 31c3b54
commit 136e38c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/docs/APIs.md b/docs/APIs.md
@@ -64,7 +64,8 @@ var view = new vega.View(runtime)
 | `disableDefaultStyle` | Boolean  | Disable the default style completely. |
 | `sanitize`      | Function       | Function to convert value to string, and sanitize the HTML. |
 | `maxDepth`      | Number         | The maximum recursion depth when printing objects in the tooltip. |
-| `formatTooltip`      | Function         | Function to specify custom HTML inside tooltip element. It is highly recommended to `sanitize` any data from `value` before returning an HTML string. |
+| `formatTooltip` | Function       | Function to specify custom HTML inside tooltip element. It is highly recommended to `sanitize` any data from `value` before returning an HTML string. |
+| `baseURL`       | String         | The base URL to use for resolving relative URLs for images. |
 
 
 The default values are:
@@ -79,7 +80,8 @@ var DEFAULT_OPTIONS =
   theme: 'light',
   disableDefaultStyle: false,
   sanitize: (value) => String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;'),
-  formatTooltip: vegaTooltip.formatValue
+  formatTooltip: vegaTooltip.formatValue,
+  baseURL: ''
 };
 ```
 

diff --git a/src/Handler.ts b/src/Handler.ts
@@ -74,7 +74,12 @@ export class Handler {
     }
 
     // set the tooltip content
-    this.el.innerHTML = this.options.formatTooltip(value, this.options.sanitize, this.options.maxDepth);
+    this.el.innerHTML = this.options.formatTooltip(
+      value,
+      this.options.sanitize,
+      this.options.maxDepth,
+      this.options.baseURL,
+    );
 
     // make the tooltip visible
     this.el.classList.add('visible', `${this.options.theme}-theme`);

diff --git a/src/defaults.ts b/src/defaults.ts
@@ -52,9 +52,15 @@ export const DEFAULT_OPTIONS = {
    * A function to customize the rendered HTML of the tooltip.
    * @param value A value string, or object of value strings keyed by field
    * @param sanitize The `sanitize` function from `options.sanitize`
+   * @param baseURL The `baseURL` from `options.baseURL`
    * @returns {string} The returned string will become the `innerHTML` of the tooltip element
    */
   formatTooltip: formatValue,
+
+  /**
+   * The baseurl to use in image paths.
+   */
+  baseURL: '',
 };
 
 export type Options = Partial<typeof DEFAULT_OPTIONS>;

diff --git a/src/formatValue.ts b/src/formatValue.ts
@@ -6,7 +6,12 @@ import {isArray, isObject, isString} from 'vega-util';
  * @param value The value to show in the tooltip.
  * @param valueToHtml Function to convert a single cell value to an HTML string
  */
-export function formatValue(value: any, valueToHtml: (value: any) => string, maxDepth: number): string {
+export function formatValue(
+  value: any,
+  valueToHtml: (value: any) => string,
+  maxDepth: number,
+  baseURL: string,
+): string {
   if (isArray(value)) {
     return `[${value.map((v) => valueToHtml(isString(v) ? v : stringify(v, maxDepth))).join(', ')}]`;
   }
@@ -21,7 +26,7 @@ export function formatValue(value: any, valueToHtml: (value: any) => string, max
     }
 
     if (image) {
-      content += `<img src="${valueToHtml(image)}">`;
+      content += `<img src="${new URL(valueToHtml(image), baseURL || location.href).href}">`;
     }
 
     const keys = Object.keys(rest);