(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (global = global || self, factory(global.vegaTooltip = {})); }(this, function (exports) { 'use strict'; // generated with build-style.sh var defaultStyle = `#vg-tooltip-element { visibility: hidden; padding: 8px; position: fixed; z-index: 1000; font-family: sans-serif; font-size: 11px; border-radius: 3px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* The default theme is the light theme. */ background-color: rgba(255, 255, 255, 0.95); border: 1px solid #d9d9d9; color: black; } #vg-tooltip-element.visible { visibility: visible; } #vg-tooltip-element h2 { margin-top: 0; margin-bottom: 10px; font-size: 13px; } #vg-tooltip-element table { border-spacing: 0; } #vg-tooltip-element table tr { border: none; } #vg-tooltip-element table tr td { overflow: hidden; text-overflow: ellipsis; padding-top: 2px; padding-bottom: 2px; } #vg-tooltip-element table tr td.key { color: #808080; max-width: 150px; text-align: right; padding-right: 4px; } #vg-tooltip-element table tr td.value { display: block; max-width: 300px; max-height: 7em; text-align: left; } #vg-tooltip-element.dark-theme { background-color: rgba(32, 32, 32, 0.9); border: 1px solid #f5f5f5; color: white; } #vg-tooltip-element.dark-theme td.key { color: #bfbfbf; } `; const EL_ID = 'vg-tooltip-element'; const DEFAULT_OPTIONS = { /** * X offset. */ offsetX: 10, /** * Y offset. */ offsetY: 10, /** * ID of the tooltip element. */ id: EL_ID, /** * ID of the tooltip CSS style. */ styleId: 'vega-tooltip-style', /** * The name of the theme. You can use the CSS class called [THEME]-theme to style the tooltips. * * There are two predefined themes: "light" (default) and "dark". */ theme: 'light', /** * Do not use the default styles provided by Vega Tooltip. If you enable this option, you need to use your own styles. It is not necessary to disable the default style when using a custom theme. */ disableDefaultStyle: false, /** * HTML sanitizer function that removes dangerous HTML to prevent XSS. * * This should be a function from string to string. You may replace it with a formatter such as a markdown formatter. */ sanitize: escapeHTML, /** * The maximum recursion depth when printing objects in the tooltip. */ maxDepth: 2 }; /** * Escape special HTML characters. * * @param value A value to convert to string and HTML-escape. */ function escapeHTML(value) { return String(value) .replace(/&/g, '&') .replace(/ i) { push(); } else { i = j + 1; } } else if (c === '[') { if (j > i) push(); b = i = j + 1; } else if (c === ']') { if (!b) error('Access path missing open bracket: ' + p); if (b > 0) push(); b = 0; i = j + 1; } } if (b) error('Access path missing closing bracket: ' + p); if (q) error('Access path missing closing quote: ' + p); if (j > i) { j++; push(); } return path; } var isArray = Array.isArray; function isObject(_) { return _ === Object(_); } function isString(_) { return typeof _ === 'string'; } function $(x) { return isArray(x) ? '[' + x.map($) + ']' : isObject(x) || isString(x) ? // Output valid JSON and JS source strings. // See http://timelessrepo.com/json-isnt-a-javascript-subset JSON.stringify(x).replace('\u2028','\\u2028').replace('\u2029', '\\u2029') : x; } function field(field, name) { var path = splitAccessPath(field), code = 'return _[' + path.map($).join('][') + '];'; return accessor( Function('_', code), [(field = path.length===1 ? path[0] : field)], name || field ); } var empty = []; var id = field('id'); var identity = accessor(function(_) { return _; }, empty, 'identity'); var zero = accessor(function() { return 0; }, empty, 'zero'); var one = accessor(function() { return 1; }, empty, 'one'); var truthy = accessor(function() { return true; }, empty, 'true'); var falsy = accessor(function() { return false; }, empty, 'false'); var __rest = (undefined && undefined.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; /** * Format the value to be shown in the toolip. * * @param value The value to show in the tooltip. * @param valueToHtml Function to convert a single cell value to an HTML string */ function formatValue(value, valueToHtml, maxDepth) { if (isArray(value)) { return `[${value.map(v => valueToHtml(isString(v) ? v : stringify(v, maxDepth))).join(', ')}]`; } if (isObject(value)) { let content = ''; const _a = value, { title } = _a, rest = __rest(_a, ["title"]); if (title) { content += `
${valueToHtml(key)}: | ${valueToHtml(val)} |