@matdata/yasgui-chart-plugin 1.1.0 → 1.2.0

package/dist/yasgui-chart-plugin.css

@@ -88,6 +88,11 @@
   background: var(--chart-control-hover);
 }
 
+.chart-toolbar-button[aria-pressed='true'] {
+  border-color: var(--yasgui-brand, #0563bb);
+  color: var(--yasgui-brand, #0563bb);
+}
+
 .chart-toolbar-spacer {
   flex: 1;
 }
@@ -196,24 +201,20 @@
   gap: 8px;
 }
 
+/* The .yasr_toolbarSelect field already draws the box: the summary sits in it
+   like a <select> does, without a border of its own */
 .yasr_toolbarSelect .chart-values-summary {
   box-sizing: border-box;
-  height: 30px;
-  padding: 0 10px;
+  height: 28px;
+  padding: 0 8px 0 0;
   gap: 2px;
-  border: 1px solid var(--yasgui-line-strong, var(--chart-border));
-  border-radius: var(--yasgui-radius-button, 8px);
-  background: var(--yasgui-surface-raised, var(--chart-background));
+  border: none;
+  background: transparent;
   color: var(--yasgui-ink, var(--chart-text));
   font: inherit;
-  font-weight: 500;
   cursor: pointer;
 }
 
-.yasr_toolbarSelect .chart-values-summary:hover {
-  background: var(--yasgui-surface-sunken, var(--chart-control-hover));
-}
-
 .yasr_toolbarSelect .chart-values-summary:focus-visible,
 .chart-view-settings-item:focus-visible {
   outline: 2px solid var(--yasgui-focus, #044a8c);

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

@@ -47203,6 +47203,8 @@ var ICON_PATHS = {
   "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"/>',
+  square: '<rect width="18" height="18" x="3" y="3" rx="2"/>',
+  "square-check": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/>',
   "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) {
@@ -47242,12 +47244,19 @@ function sanitizeSettings(raw) {
   if (typeof r.series === "string") settings.series = r.series;
   if (Array.isArray(r.columns))
     settings.columns = r.columns.filter((v) => typeof v === "string");
+  if (typeof r.shortenIris === "boolean") settings.shortenIris = r.shortenIris;
   return settings;
 }
+function isCustomised(saved) {
+  return Object.keys(saved).some((key) => key !== "columns" && key !== "shortenIris");
+}
+function displayOptions(saved) {
+  return saved.shortenIris === void 0 ? {} : { shortenIris: saved.shortenIris };
+}
 function settingsForColumns(saved, vars) {
   if (!saved.columns) return saved;
   const same = saved.columns.length === vars.length && saved.columns.every((v, i) => v === vars[i]);
-  return same ? saved : {};
+  return same ? saved : displayOptions(saved);
 }
 function categoryCandidates(columns) {
   return columns.filter((c) => !c.isLabel && c.bound > 0);
@@ -47483,6 +47492,14 @@ function renderToolbar(state, callbacks) {
   const spacer = document.createElement("div");
   spacer.className = "chart-toolbar-spacer";
   toolbar.appendChild(spacer);
+  const shorten = button(
+    "chart-shorten-iris",
+    "Prefixes",
+    "Show IRIs as prefixed names",
+    () => callbacks.onShortenIris(!state.shortenIris)
+  );
+  shorten.setAttribute("aria-pressed", String(state.shortenIris));
+  toolbar.appendChild(shorten);
   toolbar.appendChild(
     button(
       "chart-export-png",
@@ -47551,6 +47568,16 @@ function renderViewSettings(state, callbacks) {
   );
   reset.disabled = !state.customised;
   menu.appendChild(reset);
+  const shorten = menuItem(
+    "chart-shorten-iris",
+    state.shortenIris ? "square-check" : "square",
+    "Shorten IRIs with prefixes",
+    "Show IRIs as prefixed names, such as ex:Germany",
+    run(() => callbacks.onShortenIris(!state.shortenIris))
+  );
+  shorten.setAttribute("role", "menuitemcheckbox");
+  shorten.setAttribute("aria-checked", String(state.shortenIris));
+  menu.appendChild(shorten);
   const separator = document.createElement("div");
   separator.className = "chart-view-settings-separator";
   separator.setAttribute("role", "separator");
@@ -50857,6 +50884,18 @@ var DescribeModal = class {
 };
 
 // src/ChartPlugin.ts
+var COMMON_PREFIXES = {
+  rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
+  rdfs: "http://www.w3.org/2000/01/rdf-schema#",
+  owl: "http://www.w3.org/2002/07/owl#",
+  xsd: "http://www.w3.org/2001/XMLSchema#",
+  foaf: "http://xmlns.com/foaf/0.1/",
+  dc: "http://purl.org/dc/elements/1.1/",
+  dcterms: "http://purl.org/dc/terms/",
+  skos: "http://www.w3.org/2004/02/skos/core#",
+  schema: "http://schema.org/",
+  wd: "http://www.wikidata.org/entity/"
+};
 use([
   install2,
   install,
@@ -50976,6 +51015,14 @@ var ChartPlugin = class {
     }
     return prefixes;
   }
+  /**
+   * Prefixes used to show IRIs in the chart: well-known ones, then those of
+   * Yasr and the query. None when the user turned shortening off.
+   */
+  getLabelPrefixes() {
+    if (this.saved.shortenIris === false) return {};
+    return { ...COMMON_PREFIXES, ...this.getPrefixes() };
+  }
   /** Build the toolbar and chart for the current results and settings */
   render() {
     var _a2;
@@ -50986,17 +51033,19 @@ var ChartPlugin = class {
     const allRows = this.results.results.bindings;
     const rows = allRows.length > maxRows ? allRows.slice(0, maxRows) : allRows;
     this.resolved = resolveSettings(this.columns, this.saved, rows.length);
-    this.data = buildChartData(rows, this.columns, this.resolved, this.getPrefixes());
+    this.data = buildChartData(rows, this.columns, this.resolved, this.getLabelPrefixes());
     const wrapper = document.createElement("div");
     wrapper.className = "yasgui-chart-plugin";
     const toolbarState = {
       columns: this.columns,
       resolved: this.resolved,
-      customised: Object.keys(this.saved).length > 0
+      customised: isCustomised(this.saved),
+      shortenIris: this.saved.shortenIris !== false
     };
     const toolbarCallbacks = {
-      onChange: (settings) => this.updateSettings(settings),
-      onReset: () => this.updateSettings({}),
+      onChange: (settings) => this.updateSettings({ ...displayOptions(this.saved), ...settings }),
+      onReset: () => this.updateSettings(displayOptions(this.saved)),
+      onShortenIris: (shortenIris) => this.updateSettings({ ...this.saved, shortenIris }),
       onExport: (format2) => this.exportImage(format2)
     };
     const slot = getHostToolbar(this.yasr);
@@ -51081,8 +51130,7 @@ var ChartPlugin = class {
   }
   updateSettings(settings) {
     this.saved = sanitizeSettings(settings);
-    if (Object.keys(this.saved).length > 0 && this.results)
-      this.saved.columns = [...this.results.head.vars];
+    if (isCustomised(this.saved) && this.results) this.saved.columns = [...this.results.head.vars];
     if (typeof this.yasr.storePluginConfig === "function") {
       try {
         this.yasr.storePluginConfig(this.getPluginName(), this.saved);