@matdata/yasgui-chart-plugin 1.0.0 → 1.1.0

package/dist/yasgui-chart-plugin.esm.js

@@ -24962,9 +24962,9 @@ var ECharts = (
             var chartView = ecIns._chartsMap[seriesModel.__viewId];
             if (chartView.__alive) {
               chartView.eachRendered(function(el) {
-                var emphasis = el.states.emphasis;
-                if (emphasis && emphasis.hoverLayer !== HOVER_LAYER_FOR_INCREMENTAL) {
-                  emphasis.hoverLayer = shouldUseHoverLayer2 ? HOVER_LAYER_FROM_THRESHOLD : HOVER_LAYER_NO;
+                var emphasis2 = el.states.emphasis;
+                if (emphasis2 && emphasis2.hoverLayer !== HOVER_LAYER_FOR_INCREMENTAL) {
+                  emphasis2.hoverLayer = shouldUseHoverLayer2 ? HOVER_LAYER_FROM_THRESHOLD : HOVER_LAYER_NO;
                 }
               });
             }
@@ -42358,16 +42358,16 @@ function getLegendStyle(iconType, legendItemModel, lineVisualStyle, itemVisualSt
 }
 function getDefaultLegendIcon(opt) {
   var symboType = opt.icon || "roundRect";
-  var icon = createSymbol(symboType, 0, 0, opt.itemWidth, opt.itemHeight, opt.itemStyle.fill, opt.symbolKeepAspect);
-  icon.setStyle(opt.itemStyle);
-  icon.rotation = (opt.iconRotate || 0) * Math.PI / 180;
-  icon.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
+  var icon2 = createSymbol(symboType, 0, 0, opt.itemWidth, opt.itemHeight, opt.itemStyle.fill, opt.symbolKeepAspect);
+  icon2.setStyle(opt.itemStyle);
+  icon2.rotation = (opt.iconRotate || 0) * Math.PI / 180;
+  icon2.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
   if (symboType.indexOf("empty") > -1) {
-    icon.style.stroke = icon.style.fill;
-    icon.style.fill = tokens_default.color.neutral00;
-    icon.style.lineWidth = 2;
+    icon2.style.stroke = icon2.style.fill;
+    icon2.style.fill = tokens_default.color.neutral00;
+    icon2.style.lineWidth = 2;
   }
-  return icon;
+  return icon2;
 }
 function dispatchSelectAction(seriesName, dataName, api, excludeSeriesId) {
   dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId);
@@ -42590,7 +42590,7 @@ var ScrollableLegendView = (
       createPageButton("pageNext", 1);
       function createPageButton(name, iconIdx) {
         var pageDataIndexName = name + "DataIndex";
-        var icon = createIcon(legendModel.get("pageIcons", true)[legendModel.getOrient().name][iconIdx], {
+        var icon2 = createIcon(legendModel.get("pageIcons", true)[legendModel.getOrient().name][iconIdx], {
           // Buttons will be created in each render, so we do not need
           // to worry about avoiding using legendModel kept in scope.
           onclick: bind(self2._pageGo, self2, pageDataIndexName, legendModel, api)
@@ -42600,8 +42600,8 @@ var ScrollableLegendView = (
           width: pageIconSizeArr[0],
           height: pageIconSizeArr[1]
         });
-        icon.name = name;
-        controllerGroup.add(icon);
+        icon2.name = name;
+        controllerGroup.add(icon2);
       }
     };
     ScrollableLegendView2.prototype.layoutInner = function(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
@@ -42728,10 +42728,10 @@ var ScrollableLegendView = (
       each(["pagePrev", "pageNext"], function(name) {
         var key = name + "DataIndex";
         var canJump = pageInfo[key] != null;
-        var icon = controllerGroup.childOfName(name);
-        if (icon) {
-          icon.setStyle("fill", canJump ? legendModel.get("pageIconColor", true) : legendModel.get("pageIconInactiveColor", true));
-          icon.cursor = canJump ? "pointer" : "default";
+        var icon2 = controllerGroup.childOfName(name);
+        if (icon2) {
+          icon2.setStyle("fill", canJump ? legendModel.get("pageIconColor", true) : legendModel.get("pageIconInactiveColor", true));
+          icon2.cursor = canJump ? "pointer" : "default";
         }
       });
       var pageText = controllerGroup.childOfName("pageText");
@@ -46966,6 +46966,11 @@ function baseOption(colors, pointCount) {
     }
   };
 }
+function emphasis(colors, focusSeries) {
+  const result = focusSeries ? { focus: "series" } : {};
+  if (colors.highlight) result.itemStyle = { color: colors.highlight };
+  return result;
+}
 function axisStyle(colors) {
   return {
     axisLine: { lineStyle: { color: colors.border } },
@@ -47007,6 +47012,7 @@ function categoryOption(data, settings, colors) {
         center: ["50%", "55%"],
         avoidLabelOverlap: true,
         itemStyle: { borderColor: colors.background, borderWidth: 1 },
+        emphasis: emphasis(colors, false),
         label: { color: colors.text, formatter: "{b}: {d}%" },
         data: data.categories.map((c, i) => ({ name: c.label, value: values[i], categoryIndex: i })).filter((d) => d.value !== null && d.value !== void 0 && d.value > 0)
       }
@@ -47081,7 +47087,7 @@ function categoryOption(data, settings, colors) {
     areaStyle: settings.chartType === "area" ? { opacity: 0.25 } : void 0,
     connectNulls: isLine,
     showSymbol: isLine && labels.length <= 100,
-    emphasis: { focus: "series" },
+    emphasis: isLine ? { focus: "series" } : emphasis(colors, true),
     large: !isLine && labels.length > 1e3
   }));
   return option;
@@ -47124,7 +47130,7 @@ function xyOption(data, settings, colors) {
     symbolSize: scatter ? 8 : 4,
     showSymbol: !scatter && s.points.length <= 100,
     areaStyle: settings.chartType === "area" ? { opacity: 0.25 } : void 0,
-    emphasis: { focus: "series" },
+    emphasis: scatter ? emphasis(colors, true) : { focus: "series" },
     large: scatter && s.points.length > 2e3
   }));
   return option;
@@ -47156,7 +47162,13 @@ function histogramOption(data, colors) {
     return `${escapeHtml(data.column)}: ${escapeHtml(labels[p.dataIndex])}<br/>Count: <strong>${formatNumber(p.value)}</strong>`;
   };
   option.series = [
-    { type: "bar", name: "Count", data: data.bins.map((b) => b.count), barCategoryGap: "4%" }
+    {
+      type: "bar",
+      name: "Count",
+      data: data.bins.map((b) => b.count),
+      barCategoryGap: "4%",
+      emphasis: emphasis(colors, false)
+    }
   ];
   return option;
 }
@@ -47181,6 +47193,27 @@ function iriForClick(data, params) {
   return void 0;
 }
 
+// src/icons.ts
+var ICON_PATHS = {
+  "chart-column": '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
+  "sliders-horizontal": '<line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+  "chevrons-left": '<path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/>',
+  x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',
+  "rotate-ccw": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>'
+};
+function iconSvg(name, size = 16, strokeWidth = 1.75) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" class="chart-icon chart-icon-${name}" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${ICON_PATHS[name]}</svg>`;
+}
+function icon(name, size, strokeWidth) {
+  const template = document.createElement("template");
+  template.innerHTML = iconSvg(name, size, strokeWidth);
+  return template.content.firstElementChild;
+}
+
 // src/settings.ts
 var CHART_TYPES = [
   { value: "bar", label: "Bar" },
@@ -47283,9 +47316,10 @@ var KIND_LABEL = {
   iri: "IRI",
   text: "text"
 };
-function field(labelText, control) {
-  const wrapper = document.createElement("label");
-  wrapper.className = "chart-toolbar-field";
+var menuCounter = 0;
+function field(layout2, labelText, control, tag = "label") {
+  const wrapper = document.createElement(tag);
+  wrapper.className = layout2 === "host" ? "yasr_toolbarSelect chart-toolbar-field" : "chart-toolbar-field";
   const label = document.createElement("span");
   label.className = "chart-toolbar-label";
   label.textContent = labelText;
@@ -47293,9 +47327,9 @@ function field(labelText, control) {
   wrapper.appendChild(control);
   return wrapper;
 }
-function select(className, options, value, onChange) {
+function select(layout2, className, options, value, onChange) {
   const el = document.createElement("select");
-  el.className = `chart-toolbar-select ${className}`;
+  el.className = layout2 === "host" ? className : `chart-toolbar-select ${className}`;
   for (const o of options) {
     const option = document.createElement("option");
     option.value = o.value;
@@ -47319,11 +47353,10 @@ function button(className, text, title, onClick) {
 function columnLabel(c) {
   return `${c.name} (${KIND_LABEL[c.kind]})`;
 }
-function renderToolbar(state, callbacks) {
+function renderPickers(layout2, state, callbacks) {
   var _a2, _b2;
   const { columns, resolved } = state;
-  const toolbar = document.createElement("div");
-  toolbar.className = "chart-toolbar";
+  const fields = [];
   const current = () => {
     var _a3, _b3;
     return {
@@ -47335,10 +47368,12 @@ function renderToolbar(state, callbacks) {
   };
   const isHistogram = resolved.chartType === "histogram";
   const isPie = resolved.chartType === "pie" || resolved.chartType === "donut";
-  toolbar.appendChild(
+  fields.push(
     field(
-      "Chart",
+      layout2,
+      layout2 === "host" ? "Type" : "Chart",
       select(
+        layout2,
         "chart-type-select",
         CHART_TYPES,
         resolved.chartType,
@@ -47348,6 +47383,7 @@ function renderToolbar(state, callbacks) {
   );
   const candidates = categoryCandidates(columns);
   const categorySelect = select(
+    layout2,
     "chart-category-select",
     candidates.map((c) => ({ value: c.name, label: columnLabel(c) })),
     (_a2 = resolved.category) != null ? _a2 : "",
@@ -47361,8 +47397,9 @@ function renderToolbar(state, callbacks) {
     }
   );
   categorySelect.disabled = isHistogram || candidates.length === 0;
-  toolbar.appendChild(
+  fields.push(
     field(
+      layout2,
       isPie ? "Slices" : resolved.chartType === "horizontal-bar" ? "Y axis" : "X axis",
       categorySelect
     )
@@ -47371,8 +47408,12 @@ function renderToolbar(state, callbacks) {
   const valuesPicker = document.createElement("details");
   valuesPicker.className = "chart-values-picker";
   const summary = document.createElement("summary");
-  summary.className = "chart-toolbar-select";
-  summary.textContent = resolved.values.length > 0 ? resolved.values.join(", ") : "None";
+  summary.className = layout2 === "host" ? "chart-values-summary" : "chart-toolbar-select chart-values-summary";
+  const summaryText = document.createElement("span");
+  summaryText.className = "chart-values-summary-text";
+  summaryText.textContent = resolved.values.length > 0 ? resolved.values.join(", ") : "None";
+  summary.appendChild(summaryText);
+  summary.appendChild(icon("chevron-down", 14));
   valuesPicker.appendChild(summary);
   const list = document.createElement("div");
   list.className = "chart-values-list";
@@ -47403,18 +47444,32 @@ function renderToolbar(state, callbacks) {
     list.appendChild(item);
   }
   valuesPicker.appendChild(list);
-  toolbar.appendChild(field(isHistogram ? "Value" : isPie ? "Size" : "Values", valuesPicker));
+  fields.push(
+    field(
+      layout2,
+      isHistogram ? "Value" : isPie ? "Size" : "Values",
+      valuesPicker,
+      layout2 === "host" ? "div" : "label"
+    )
+  );
   const seriesOptions = [{ value: "", label: "None" }].concat(
     candidates.filter((c) => c.name !== resolved.category && !resolved.values.includes(c.name)).map((c) => ({ value: c.name, label: columnLabel(c) }))
   );
   const seriesSelect = select(
+    layout2,
     "chart-series-select",
     seriesOptions,
     (_b2 = resolved.series) != null ? _b2 : "",
     (value) => callbacks.onChange({ ...current(), series: value })
   );
   seriesSelect.disabled = isHistogram || isPie || seriesOptions.length <= 1;
-  toolbar.appendChild(field("Series", seriesSelect));
+  fields.push(field(layout2, "Series", seriesSelect));
+  return fields;
+}
+function renderToolbar(state, callbacks) {
+  const toolbar = document.createElement("div");
+  toolbar.className = "chart-toolbar";
+  for (const el of renderPickers("own", state, callbacks)) toolbar.appendChild(el);
   if (state.customised) {
     toolbar.appendChild(
       button(
@@ -47446,6 +47501,130 @@ function renderToolbar(state, callbacks) {
   );
   return toolbar;
 }
+function menuItem(className, iconName, text, title, onClick) {
+  const el = document.createElement("button");
+  el.type = "button";
+  el.className = `chart-view-settings-item ${className}`;
+  el.title = title;
+  el.appendChild(icon(iconName));
+  const label = document.createElement("span");
+  label.textContent = text;
+  el.appendChild(label);
+  el.addEventListener("click", onClick);
+  return el;
+}
+function renderViewSettings(state, callbacks) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "chart-view-settings";
+  const menuId = `chart-view-settings-menu-${++menuCounter}`;
+  const toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "yasr_toolbarButton chart-view-settings-button";
+  toggle.setAttribute("aria-haspopup", "true");
+  toggle.setAttribute("aria-expanded", "false");
+  toggle.setAttribute("aria-controls", menuId);
+  toggle.appendChild(icon("sliders-horizontal"));
+  const text = document.createElement("span");
+  text.textContent = "View settings";
+  toggle.appendChild(text);
+  const menu = document.createElement("div");
+  menu.className = "chart-view-settings-menu";
+  menu.id = menuId;
+  menu.setAttribute("role", "group");
+  menu.setAttribute("aria-label", "View settings");
+  menu.hidden = true;
+  const setOpen = (open) => {
+    menu.hidden = !open;
+    toggle.setAttribute("aria-expanded", String(open));
+    toggle.classList.toggle("is-active", open);
+  };
+  const run = (action) => () => {
+    setOpen(false);
+    action();
+  };
+  const reset = menuItem(
+    "chart-reset-button",
+    "rotate-ccw",
+    "Automatic chart",
+    "Go back to the automatic chart for these results",
+    run(callbacks.onReset)
+  );
+  reset.disabled = !state.customised;
+  menu.appendChild(reset);
+  const separator = document.createElement("div");
+  separator.className = "chart-view-settings-separator";
+  separator.setAttribute("role", "separator");
+  menu.appendChild(separator);
+  menu.appendChild(
+    menuItem(
+      "chart-export-png",
+      "download",
+      "Download PNG",
+      "Download the chart as a PNG image",
+      run(() => callbacks.onExport("png"))
+    )
+  );
+  menu.appendChild(
+    menuItem(
+      "chart-export-svg",
+      "download",
+      "Download SVG",
+      "Download the chart as an SVG image",
+      run(() => callbacks.onExport("svg"))
+    )
+  );
+  toggle.addEventListener("click", () => setOpen(menu.hidden));
+  wrapper.addEventListener("keydown", (e2) => {
+    if (e2.key === "Escape" && !menu.hidden) {
+      e2.stopPropagation();
+      setOpen(false);
+      toggle.focus();
+    }
+  });
+  wrapper.appendChild(toggle);
+  wrapper.appendChild(menu);
+  return wrapper;
+}
+function renderHostToolbar(slot, state, callbacks) {
+  const group = document.createElement("div");
+  group.className = "yasr_toolbarGroup chart-toolbar-pickers";
+  for (const el of renderPickers("host", state, callbacks)) group.appendChild(el);
+  const spacer = document.createElement("div");
+  spacer.className = "yasr_toolbarSpacer";
+  const nodes = [group, spacer, renderViewSettings(state, callbacks)];
+  for (const node of nodes) slot.appendChild(node);
+  return nodes;
+}
+function closeToolbarPopups(root, target) {
+  root.querySelectorAll(".chart-values-picker[open]").forEach((picker) => {
+    if (!target || !picker.contains(target)) picker.removeAttribute("open");
+  });
+  root.querySelectorAll(".chart-view-settings").forEach((wrapper) => {
+    const menu = wrapper.querySelector(".chart-view-settings-menu");
+    if (!menu || menu.hidden || target && wrapper.contains(target)) return;
+    menu.hidden = true;
+    const toggle = wrapper.querySelector(".chart-view-settings-button");
+    toggle == null ? void 0 : toggle.setAttribute("aria-expanded", "false");
+    toggle == null ? void 0 : toggle.classList.remove("is-active");
+  });
+}
+
+// src/host.ts
+function hasHostDescribe(yasr) {
+  var _a2;
+  return !!((_a2 = yasr == null ? void 0 : yasr.hostApi) == null ? void 0 : _a2.describe) && typeof yasr.describe === "function";
+}
+function getHostToolbar(yasr) {
+  var _a2;
+  if (!((_a2 = yasr == null ? void 0 : yasr.hostApi) == null ? void 0 : _a2.toolbar) || typeof yasr.getPluginToolbar !== "function") return null;
+  try {
+    const slot = yasr.getPluginToolbar();
+    return slot instanceof HTMLElement ? slot : null;
+  } catch (error2) {
+    console.warn("yasgui-chart-plugin: could not get the plugin toolbar", error2);
+    return null;
+  }
+}
 
 // src/theme.ts
 var LIGHT_PALETTE = [
@@ -47472,6 +47651,10 @@ var DARK_PALETTE = [
   "#ef8cc8",
   "#9aa8bb"
 ];
+var BRAND_LIGHT = "#0563bb";
+var BRAND_DARK = "#5aa8f2";
+var HIGHLIGHT_LIGHT = "#f2b300";
+var HIGHLIGHT_DARK = "#f5c242";
 function getCurrentTheme() {
   if (typeof document === "undefined") return "light";
   return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
@@ -47487,7 +47670,11 @@ function getThemeColors() {
     border: read("--yasgui-border-color", dark ? "#444444" : "#d0d0d0"),
     background: read("--yasgui-bg-primary", dark ? "#1e1e1e" : "#ffffff"),
     tooltipBackground: read("--yasgui-bg-secondary", dark ? "#2a2a2a" : "#ffffff"),
-    palette: dark ? DARK_PALETTE : LIGHT_PALETTE
+    palette: [
+      read("--yasgui-brand", dark ? BRAND_DARK : BRAND_LIGHT),
+      ...(dark ? DARK_PALETTE : LIGHT_PALETTE).slice(1)
+    ],
+    highlight: read("--yasgui-highlight", dark ? HIGHLIGHT_DARK : HIGHLIGHT_LIGHT)
   };
 }
 function watchThemeChanges(callback) {
@@ -50367,7 +50554,8 @@ var DescribeModal = class {
     title.title = uri;
     const closeButton = document.createElement("button");
     closeButton.className = "chart-modal-close";
-    closeButton.innerHTML = "&times;";
+    closeButton.type = "button";
+    closeButton.appendChild(icon("x", 20));
     closeButton.setAttribute("aria-label", "Close modal");
     closeButton.addEventListener("click", () => this.close());
     header.appendChild(this.createNavigation());
@@ -50389,7 +50577,7 @@ var DescribeModal = class {
     hint.textContent = "Ctrl+click a URI to describe it, Ctrl+Shift+click for the triples where it is the object.";
     const copyButton = document.createElement("button");
     copyButton.className = "chart-modal-button";
-    copyButton.textContent = "Copy Raw";
+    copyButton.textContent = "Copy raw";
     copyButton.addEventListener("click", () => {
       const rawText = payload.state === "results" ? payload.result.raw : payload.state === "error" ? payload.raw : "";
       this.copyToClipboard(rawText);
@@ -50428,11 +50616,11 @@ var DescribeModal = class {
   createNavigation() {
     const nav = document.createElement("div");
     nav.className = "chart-describe-modal-nav";
-    const button2 = (className, text, label, enabled, onClick) => {
+    const button2 = (className, iconName, label, enabled, onClick) => {
       const btn = document.createElement("button");
       btn.type = "button";
       btn.className = `chart-describe-modal-nav-button ${className}`;
-      btn.textContent = text;
+      btn.appendChild(icon(iconName));
       btn.title = label;
       btn.setAttribute("aria-label", label);
       btn.disabled = !enabled;
@@ -50442,19 +50630,25 @@ var DescribeModal = class {
     nav.appendChild(
       button2(
         "chart-describe-modal-start",
-        "\u23EE",
+        "chevrons-left",
         "Back to start",
         this.canGoBack(),
         () => this.backToStart()
       )
     );
     nav.appendChild(
-      button2("chart-describe-modal-back", "\u25C0", "Back (Alt+\u2190)", this.canGoBack(), () => this.back())
+      button2(
+        "chart-describe-modal-back",
+        "chevron-left",
+        "Back (Alt+\u2190)",
+        this.canGoBack(),
+        () => this.back()
+      )
     );
     nav.appendChild(
       button2(
         "chart-describe-modal-forward",
-        "\u25B6",
+        "chevron-right",
         "Forward (Alt+\u2192)",
         this.canGoForward(),
         () => this.forward()
@@ -50677,7 +50871,7 @@ use([
 ]);
 var DEFAULT_MAX_ROWS = 5e3;
 var MIN_CHART_HEIGHT = 320;
-var ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M3 3h2v16h16v2H3V3zm4 10h3v5H7v-5zm5-6h3v11h-3V7zm5 3h3v8h-3v-8z"/></svg>';
+var ICON_SVG = iconSvg("chart-column");
 var ChartPlugin = class {
   constructor(yasr, options = {}) {
     /** Below the table (10), so SELECT results still open in the table */
@@ -50697,6 +50891,9 @@ var ChartPlugin = class {
     this.outsideClickHandler = null;
     this.windowResizeHandler = null;
     this.fullscreenObserver = null;
+    /** Elements this plugin put in the host's toolbar slot */
+    this.hostToolbarNodes = [];
+    /** @deprecated Own describe modal, used only when the host has no shared describe panel */
     this.describeModal = null;
     this.describeAbortController = null;
     var _a2, _b2, _c2;
@@ -50711,11 +50908,11 @@ var ChartPlugin = class {
     return 5;
   }
   getIcon() {
-    const icon = document.createElement("div");
-    icon.innerHTML = ICON_SVG;
-    icon.setAttribute("role", "img");
-    icon.setAttribute("aria-label", "Chart view");
-    return icon;
+    const icon2 = document.createElement("div");
+    icon2.innerHTML = ICON_SVG;
+    icon2.setAttribute("role", "img");
+    icon2.setAttribute("aria-label", "Chart view");
+    return icon2;
   }
   /** Offered for SELECT results with at least one numeric column */
   canHandleResults() {
@@ -50792,20 +50989,23 @@ var ChartPlugin = class {
     this.data = buildChartData(rows, this.columns, this.resolved, this.getPrefixes());
     const wrapper = document.createElement("div");
     wrapper.className = "yasgui-chart-plugin";
-    wrapper.appendChild(
-      renderToolbar(
-        {
-          columns: this.columns,
-          resolved: this.resolved,
-          customised: Object.keys(this.saved).length > 0
-        },
-        {
-          onChange: (settings) => this.updateSettings(settings),
-          onReset: () => this.updateSettings({}),
-          onExport: (format2) => this.exportImage(format2)
-        }
-      )
-    );
+    const toolbarState = {
+      columns: this.columns,
+      resolved: this.resolved,
+      customised: Object.keys(this.saved).length > 0
+    };
+    const toolbarCallbacks = {
+      onChange: (settings) => this.updateSettings(settings),
+      onReset: () => this.updateSettings({}),
+      onExport: (format2) => this.exportImage(format2)
+    };
+    const slot = getHostToolbar(this.yasr);
+    if (slot) {
+      this.hostToolbarNodes = renderHostToolbar(slot, toolbarState, toolbarCallbacks);
+    } else {
+      wrapper.classList.add("chart-own-toolbar");
+      wrapper.appendChild(renderToolbar(toolbarState, toolbarCallbacks));
+    }
     const notes = [];
     if (allRows.length > maxRows) {
       notes.push(
@@ -50856,11 +51056,9 @@ var ChartPlugin = class {
       this.fullscreenObserver.observe(yasrRoot, { attributes: true, attributeFilter: ["class"] });
     }
     this.themeObserver = watchThemeChanges(() => this.applyOption());
+    const popupRoot = slot || wrapper;
     this.outsideClickHandler = (e2) => {
-      const picker = wrapper.querySelector(".chart-values-picker");
-      if (picker && picker.hasAttribute("open") && !picker.contains(e2.target)) {
-        picker.removeAttribute("open");
-      }
+      closeToolbarPopups(popupRoot, e2.target);
     };
     document.addEventListener("mousedown", this.outsideClickHandler);
   }
@@ -50902,15 +51100,37 @@ var ChartPlugin = class {
     if (!iri) return;
     this.runResourceQuery(iri, event.shiftKey ? "object" : "subject");
   }
+  /**
+   * Show the triples of `uri`: in the host's shared describe panel when YASR
+   * offers one, otherwise in the plugin's own describe modal.
+   */
+  runResourceQuery(uri, direction) {
+    if (hasHostDescribe(this.yasr)) {
+      const hostDirection = direction === "object" ? "incoming" : "outgoing";
+      const fail = (error2) => console.error("yasgui-chart-plugin: describe failed", uri, error2);
+      try {
+        Promise.resolve(
+          this.yasr.describe(uri, { direction: hostDirection, source: "Chart" })
+        ).catch(fail);
+      } catch (error2) {
+        fail(error2);
+      }
+      return;
+    }
+    void this.runOwnResourceQuery(uri, direction);
+  }
   /**
    * Run a background query for the triples where `iri` is the subject (or
-   * object) and show them in the describe modal, as the table and geo plugins do.
+   * object) and show them in the plugin's own describe modal.
+   *
+   * @deprecated Fallback for YASR versions without `yasr.describe()`; it will be
+   * removed in the next major version.
    */
-  async runResourceQuery(uri, direction, newHistory = true) {
+  async runOwnResourceQuery(uri, direction, newHistory = true) {
     var _a2, _b2, _c2, _d2;
     if (!this.describeModal) {
       this.describeModal = new DescribeModal({
-        onDescribe: (u, d) => this.runResourceQuery(u, d, false)
+        onDescribe: (u, d) => this.runOwnResourceQuery(u, d, false)
       });
     }
     if (typeof this.yasr.executeQuery !== "function") {
@@ -51029,6 +51249,8 @@ var ChartPlugin = class {
       this.chart.dispose();
       this.chart = null;
     }
+    for (const node of this.hostToolbarNodes) node.remove();
+    this.hostToolbarNodes = [];
     this.chartEl = null;
     this.option = null;
   }