@emuanalytics/flow-rdf-ui 0.0.18 → 0.0.20

package/dist/flow-rdf-ui.d.ts

@@ -6,6 +6,7 @@ import { ChartOptions } from 'chart.js';
 import { ChartTypeRegistry } from 'chart.js';
 import { CSSResultGroup } from 'lit';
 import { LitElement } from 'lit';
+import { MatrixDataPoint } from 'chartjs-chart-matrix';
 import { Plugin as Plugin_2 } from 'chart.js';
 import { Point } from 'chart.js';
 import { PropertyValueMap } from 'lit';
@@ -691,7 +692,7 @@ export declare class FlowChart extends FlowRdfElement {
     private _chartRef;
     private _chart;
     /** The Chart.js chart instance. */
-    get chart(): ChartJs<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>;
+    get chart(): ChartJs<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | MatrixDataPoint | null)[], unknown>;
     /** The Chart.js chart type (e.g `line`, `bar` or a custom type). */
     type: string;
     /** The Chart.js `options` object. */
@@ -3215,6 +3216,10 @@ export declare class FlowTabPanel extends FlowRdfElement {
     name: string;
     /** When true, the tab panel will be shown. */
     active: boolean;
+    /**
+     * Indicates whether the panel is scrollable. By default overflow is hidden.
+     */
+    scrollable: boolean;
     connectedCallback(): void;
     handleActiveChange(): void;
     render(): TemplateResult<1>;

package/dist/flow-rdf-ui.js

@@ -1,4 +1,10 @@
-import { defaults as defaults$1, Chart, Element as Element$1, Animations, _adapters, DoughnutController, PolarAreaController, Scale, LinearScale, BarController, LineController, ScatterController, LineElement, PointElement, BarElement, CategoryScale, LogarithmicScale, TimeScale, TimeSeriesScale, Legend, Tooltip, Title, Interaction } from "chart.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { DatasetController, Element as Element$1, defaults as defaults$1, Chart, Animations, _adapters, DoughnutController, PolarAreaController, Scale, LinearScale, BarController, LineController, ScatterController, LineElement, PointElement, BarElement, CategoryScale, LogarithmicScale, TimeScale, TimeSeriesScale, Legend, Tooltip, Title, Interaction } from "chart.js";
 import { Chart as Chart2 } from "chart.js";
 /**
  * @license
@@ -8081,7 +8087,7 @@ const styles$I = i$8`
     position: relative;
     width: 100%;
     height: 100%;
-    padding: var(--flow-ui-spacing-x-small);
+    /* padding: var(--flow-ui-spacing-x-small); */
   }
 `;
 /*!
@@ -9236,6 +9242,216 @@ function _isDomSupported() {
   }
   return passiveSupported;
 })();
+/*!
+ * chartjs-chart-matrix v2.0.1
+ * https://chartjs-chart-matrix.pages.dev/
+ * (c) 2023 Jukka Kurkela
+ * Released under the MIT license
+ */
+var version$2 = "2.0.1";
+class MatrixController extends DatasetController {
+  initialize() {
+    this.enableOptionSharing = true;
+    super.initialize();
+  }
+  update(mode) {
+    const me = this;
+    const meta = me._cachedMeta;
+    me.updateElements(meta.data, 0, meta.data.length, mode);
+  }
+  updateElements(rects, start, count, mode) {
+    const me = this;
+    const reset = mode === "reset";
+    const { xScale, yScale } = me._cachedMeta;
+    const firstOpts = me.resolveDataElementOptions(start, mode);
+    const sharedOptions = me.getSharedOptions(mode, rects[start], firstOpts);
+    for (let i3 = start; i3 < start + count; i3++) {
+      const parsed = !reset && me.getParsed(i3);
+      const x2 = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
+      const y2 = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
+      const options = me.resolveDataElementOptions(i3, mode);
+      const { width, height, anchorX, anchorY } = options;
+      const properties = {
+        x: resolveX(anchorX, x2, width),
+        y: resolveY(anchorY, y2, height),
+        width,
+        height,
+        options
+      };
+      me.updateElement(rects[i3], i3, properties, mode);
+    }
+    me.updateSharedOptions(sharedOptions, mode);
+  }
+  draw() {
+    const me = this;
+    const data = me.getMeta().data || [];
+    let i3, ilen;
+    for (i3 = 0, ilen = data.length; i3 < ilen; ++i3) {
+      data[i3].draw(me._ctx);
+    }
+  }
+}
+__publicField(MatrixController, "id", "matrix");
+__publicField(MatrixController, "version", version$2);
+__publicField(MatrixController, "defaults", {
+  dataElementType: "matrix",
+  animations: {
+    numbers: {
+      type: "number",
+      properties: ["x", "y", "width", "height"]
+    }
+  }
+});
+__publicField(MatrixController, "overrides", {
+  interaction: {
+    mode: "nearest",
+    intersect: true
+  },
+  scales: {
+    x: {
+      type: "linear",
+      offset: true
+    },
+    y: {
+      type: "linear",
+      reverse: true
+    }
+  }
+});
+function resolveX(anchorX, x2, width) {
+  if (anchorX === "left" || anchorX === "start") {
+    return x2;
+  }
+  if (anchorX === "right" || anchorX === "end") {
+    return x2 - width;
+  }
+  return x2 - width / 2;
+}
+function resolveY(anchorY, y2, height) {
+  if (anchorY === "top" || anchorY === "start") {
+    return y2;
+  }
+  if (anchorY === "bottom" || anchorY === "end") {
+    return y2 - height;
+  }
+  return y2 - height / 2;
+}
+function getBounds(rect, useFinalPosition) {
+  const { x: x2, y: y2, width, height } = rect.getProps(["x", "y", "width", "height"], useFinalPosition);
+  return { left: x2, top: y2, right: x2 + width, bottom: y2 + height };
+}
+function limit(value, min2, max2) {
+  return Math.max(Math.min(value, max2), min2);
+}
+function parseBorderWidth(rect, maxW, maxH) {
+  const value = rect.options.borderWidth;
+  let t2, r2, b2, l2;
+  if (isObject$1(value)) {
+    t2 = +value.top || 0;
+    r2 = +value.right || 0;
+    b2 = +value.bottom || 0;
+    l2 = +value.left || 0;
+  } else {
+    t2 = r2 = b2 = l2 = +value || 0;
+  }
+  return {
+    t: limit(t2, 0, maxH),
+    r: limit(r2, 0, maxW),
+    b: limit(b2, 0, maxH),
+    l: limit(l2, 0, maxW)
+  };
+}
+function boundingRects(rect) {
+  const bounds = getBounds(rect);
+  const width = bounds.right - bounds.left;
+  const height = bounds.bottom - bounds.top;
+  const border = parseBorderWidth(rect, width / 2, height / 2);
+  return {
+    outer: {
+      x: bounds.left,
+      y: bounds.top,
+      w: width,
+      h: height
+    },
+    inner: {
+      x: bounds.left + border.l,
+      y: bounds.top + border.t,
+      w: width - border.l - border.r,
+      h: height - border.t - border.b
+    }
+  };
+}
+function inRange(rect, x2, y2, useFinalPosition) {
+  const skipX = x2 === null;
+  const skipY = y2 === null;
+  const bounds = !rect || skipX && skipY ? false : getBounds(rect, useFinalPosition);
+  return bounds && (skipX || x2 >= bounds.left && x2 <= bounds.right) && (skipY || y2 >= bounds.top && y2 <= bounds.bottom);
+}
+class MatrixElement extends Element$1 {
+  constructor(cfg) {
+    super();
+    this.options = void 0;
+    this.width = void 0;
+    this.height = void 0;
+    if (cfg) {
+      Object.assign(this, cfg);
+    }
+  }
+  draw(ctx) {
+    const options = this.options;
+    const { inner, outer } = boundingRects(this);
+    const radius = toTRBLCorners(options.borderRadius);
+    ctx.save();
+    if (outer.w !== inner.w || outer.h !== inner.h) {
+      ctx.beginPath();
+      addRoundedRectPath(ctx, { x: outer.x, y: outer.y, w: outer.w, h: outer.h, radius });
+      addRoundedRectPath(ctx, { x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius });
+      ctx.fillStyle = options.backgroundColor;
+      ctx.fill();
+      ctx.fillStyle = options.borderColor;
+      ctx.fill("evenodd");
+    } else {
+      ctx.beginPath();
+      addRoundedRectPath(ctx, { x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius });
+      ctx.fillStyle = options.backgroundColor;
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+  inRange(mouseX, mouseY, useFinalPosition) {
+    return inRange(this, mouseX, mouseY, useFinalPosition);
+  }
+  inXRange(mouseX, useFinalPosition) {
+    return inRange(this, mouseX, null, useFinalPosition);
+  }
+  inYRange(mouseY, useFinalPosition) {
+    return inRange(this, null, mouseY, useFinalPosition);
+  }
+  getCenterPoint(useFinalPosition) {
+    const { x: x2, y: y2, width, height } = this.getProps(["x", "y", "width", "height"], useFinalPosition);
+    return {
+      x: x2 + width / 2,
+      y: y2 + height / 2
+    };
+  }
+  tooltipPosition() {
+    return this.getCenterPoint();
+  }
+  getRange(axis) {
+    return axis === "x" ? this.width / 2 : this.height / 2;
+  }
+}
+__publicField(MatrixElement, "id", "matrix");
+__publicField(MatrixElement, "defaults", {
+  backgroundColor: void 0,
+  borderColor: void 0,
+  borderWidth: void 0,
+  borderRadius: 0,
+  anchorX: "center",
+  anchorY: "center",
+  width: 20,
+  height: 20
+});
 /*!
 * chartjs-plugin-annotation v3.0.1
 * https://www.chartjs.org/chartjs-plugin-annotation/index
@@ -10044,15 +10260,15 @@ function verifyScaleOptions(annotations, scales) {
     verifyScaleIDs(annotation2, scales);
   }
 }
-function changeScaleLimit(scale, range, limit, suggestedLimit) {
-  if (isNumberFinite(range[limit]) && !scaleLimitDefined(scale.options, limit, suggestedLimit)) {
-    const changed = scale[limit] !== range[limit];
-    scale[limit] = range[limit];
+function changeScaleLimit(scale, range, limit2, suggestedLimit) {
+  if (isNumberFinite(range[limit2]) && !scaleLimitDefined(scale.options, limit2, suggestedLimit)) {
+    const changed = scale[limit2] !== range[limit2];
+    scale[limit2] = range[limit2];
     return changed;
   }
 }
-function scaleLimitDefined(scaleOptions, limit, suggestedLimit) {
-  return defined(scaleOptions[limit]) || defined(scaleOptions[suggestedLimit]);
+function scaleLimitDefined(scaleOptions, limit2, suggestedLimit) {
+  return defined(scaleOptions[limit2]) || defined(scaleOptions[suggestedLimit]);
 }
 function verifyScaleIDs(annotation2, scales) {
   for (const key of ["scaleID", "xScaleID", "yScaleID"]) {
@@ -10621,8 +10837,8 @@ LineAnnotation.defaultRoutes = {
   borderColor: "color"
 };
 function inAxisRange(element, { mouseX, mouseY }, axis, { hBorderWidth, useFinalPosition }) {
-  const limit = rangeLimit(mouseX, mouseY, element.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis);
-  return limit.value >= limit.start - hBorderWidth && limit.value <= limit.end + hBorderWidth || isOnLabel(element, { mouseX, mouseY }, useFinalPosition, axis);
+  const limit2 = rangeLimit(mouseX, mouseY, element.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis);
+  return limit2.value >= limit2.start - hBorderWidth && limit2.value <= limit2.end + hBorderWidth || isOnLabel(element, { mouseX, mouseY }, useFinalPosition, axis);
 }
 function isLineInArea({ x: x2, y: y2, x2: x22, y2: y22 }, { top, right, bottom, left }) {
   return !(x2 < left && x22 < left || x2 > right && x22 > right || y2 < top && y22 < top || y2 > bottom && y22 > bottom);
@@ -10861,9 +11077,9 @@ class EllipseAnnotation extends Element$1 {
     }
     const { x: x2, y: y2, x2: x22, y2: y22 } = this.getProps(["x", "y", "x2", "y2"], useFinalPosition);
     const hBorderWidth = borderWidth / 2;
-    const limit = axis === "y" ? { start: y2, end: y22 } : { start: x2, end: x22 };
+    const limit2 = axis === "y" ? { start: y2, end: y22 } : { start: x2, end: x22 };
     const rotatedPoint = rotated({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), toRadians(-rotation));
-    return rotatedPoint[axis] >= limit.start - hBorderWidth - EPSILON && rotatedPoint[axis] <= limit.end + hBorderWidth + EPSILON;
+    return rotatedPoint[axis] >= limit2.start - hBorderWidth - EPSILON && rotatedPoint[axis] <= limit2.end + hBorderWidth + EPSILON;
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -10946,8 +11162,8 @@ class PointAnnotation extends Element$1 {
       return inPointRange({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), width / 2, borderWidth);
     }
     const hBorderWidth = borderWidth / 2;
-    const limit = axis === "y" ? { start: y2, end: y22, value: mouseY } : { start: x2, end: x22, value: mouseX };
-    return limit.value >= limit.start - hBorderWidth && limit.value <= limit.end + hBorderWidth;
+    const limit2 = axis === "y" ? { start: y2, end: y22, value: mouseY } : { start: x2, end: x22, value: mouseX };
+    return limit2.value >= limit2.start - hBorderWidth && limit2.value <= limit2.end + hBorderWidth;
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -13166,16 +13382,27 @@ function initializeChartJs() {
     Legend,
     Tooltip,
     Title,
-    annotation
+    annotation,
+    MatrixController,
+    MatrixElement
   );
   Tooltip.positioners.cursor = CursorPositioner;
   Interaction.modes.interpolate = Interpolate;
   Chart.defaults.animation = false;
   Chart.defaults.responsive = true;
   Chart.defaults.maintainAspectRatio = false;
+  Chart.defaults.layout.padding = {
+    top: 5,
+    right: 10,
+    bottom: 5,
+    left: 5
+  };
   Chart.defaults.plugins.legend.position = "bottom";
   Chart.defaults.plugins.legend.align = "start";
   Chart.defaults.plugins.tooltip.position = "cursor";
+  Chart.defaults.plugins.title.font = { size: 12 };
+  Chart.defaults.plugins.title.align = "start";
+  Chart.defaults.plugins.title.padding = { top: 0, bottom: 10 };
 }
 function registerChartComponent(...components) {
   Chart.register(...components);
@@ -19540,14 +19767,24 @@ const styles$r = i$8`
     overflow: hidden;
   }
 
+  /* For scrollable panel - enable scroll and (optionally) add padding to scrollable content */
   .panel--scrollable .panel__body-wrapper {
     overflow-y: auto;
   }
 
-  .panel--with-padding .panel__body {
+  .panel--scrollable.panel--with-padding .panel__body {
+    padding: var(--padding);
+  }
+
+  /* For non-scrollable panel - fix body at 100% and disable scroll. Padding is added to wrapper */
+  .panel.panel--with-padding:not(.panel--scrollable) .panel__body-wrapper {
     padding: var(--padding);
   }
 
+  .panel:not(.panel--scrollable) .panel__body {
+    height: 100%;
+    overflow-y: hidden;
+  }
 `;
 var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
@@ -27835,7 +28072,8 @@ const styles$9 = i$8`
   }
 
   /* Ensure nav is positioned when tab-group is placed in a split panel and the panel is closed */
-  .tab-group--end, .tab-group--bottom {
+  .tab-group--end,
+  .tab-group--bottom {
     justify-content: end;
   }
 
@@ -27902,6 +28140,11 @@ const styles$9 = i$8`
     width: var(--flow-ui-spacing-x-large);
   }
 
+  /* Make tab panels take up full height */
+  ::slotted(flow-ui-tab-panel) {
+    height: 100%;
+  }
+
   /*
    * Top
    */
@@ -28040,7 +28283,7 @@ const styles$9 = i$8`
 
   .tab-group--start .tab-group__track {
     height: 100%;
-    right:0;
+    right: 0;
     border-right: solid var(--track-width) var(--track-color);
   }
 
@@ -28181,7 +28424,6 @@ const styles$9 = i$8`
     top: auto;
     bottom: 0;
   }
-
 `;
 var __defProp$9 = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
@@ -28580,18 +28822,47 @@ const styles$8 = i$8`
   ${componentStyles}
 
   :host {
-    --padding: 0;
     display: none;
+    min-height: 0;
+
+    --padding: 0;
   }
 
   :host([active]) {
     display: block;
   }
 
-  .tab-panel {
-    display: block;
+  .panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Body */
+  .panel__body-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* For scrollable panel - enable scroll and (optionally) add padding to scrollable content */
+  .panel--scrollable .panel__body-wrapper {
+    overflow-y: auto;
+  }
+
+  .panel--scrollable .panel__body {
+    padding: var(--padding);
+  }
+
+  /* For non-scrollable panel - fix body at 100% and disable scroll. Padding is added to wrapper */
+  .panel:not(.panel--scrollable) .panel__body-wrapper {
     padding: var(--padding);
   }
+
+  .panel:not(.panel--scrollable) .panel__body {
+    height: 100%;
+    overflow-y: hidden;
+  }
 `;
 var __defProp$8 = Object.defineProperty;
 var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
@@ -28612,6 +28883,7 @@ let FlowTabPanel = class extends FlowRdfElement {
     this.componentId = `flow-ui-tab-panel-${this.attrId}`;
     this.name = "";
     this.active = false;
+    this.scrollable = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -28623,13 +28895,19 @@ let FlowTabPanel = class extends FlowRdfElement {
   }
   render() {
     return x$2`
-      <slot
-        part="base"
+      <div
         class=${o$9({
-      "tab-panel": true,
-      "tab-panel--active": this.active
+      panel: true,
+      "panel--active": this.active,
+      "panel--scrollable": this.scrollable
     })}
-      ></slot>
+      >
+        <div class="panel__body-wrapper">
+          <div part="body" class="panel__body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
     `;
   }
 };
@@ -28640,6 +28918,9 @@ __decorateClass$8([
 __decorateClass$8([
   n$8({ type: Boolean, reflect: true })
 ], FlowTabPanel.prototype, "active", 2);
+__decorateClass$8([
+  n$8({ type: Boolean, reflect: true })
+], FlowTabPanel.prototype, "scrollable", 2);
 __decorateClass$8([
   watch("active")
 ], FlowTabPanel.prototype, "handleActiveChange", 1);
@@ -31526,7 +31807,7 @@ const styles = i$8`
   }
 
 `;
-var __defProp = Object.defineProperty;
+var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
@@ -31534,7 +31815,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp(target, key, result);
+    __defProp2(target, key, result);
   return result;
 };
 class FlowToolButton extends FlowRdfElement {
@@ -31743,7 +32024,7 @@ const translation = {
   toggleColorFormat: "Toggle color format"
 };
 registerTranslation(translation);
-const version = "0.0.18";
+const version = "0.0.20";
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
   border-radius: 2px;