@unovis/ts 1.5.1-ql.2 → 1.5.1-xplg.0

package/components/donut/index.js

@@ -6,6 +6,7 @@ import { getNumber, isNumber, clamp } from '../../utils/data.js';
 import { wrapSVGText } from '../../utils/text.js';
 import { DonutDefaultConfig } from './config.js';
 import { createArc, updateArc, removeArc } from './modules/arc.js';
+import { DONUT_HALF_ANGLE_RANGES } from './constants.js';
 import * as style from './style.js';
 import { centralLabel, centralSubLabel, segment, segmentExit, background } from './style.js';
 
@@ -40,8 +41,22 @@ class Donut extends ComponentCore {
         }))
             .filter(d => config.showEmptySegments || getNumber(d.datum, config.value, d.index));
         const duration = isNumber(customDuration) ? customDuration : config.duration;
-        const outerRadius = config.radius || Math.min(this._width - bleed.left - bleed.right, this._height - bleed.top - bleed.bottom) / 2;
+        // Handle half-donut cases, which adjust the scaling and positioning.
+        // One of these is true if we are dealing with a half-donut.
+        const [isHalfDonutTop, isHalfDonutRight, isHalfDonutBottom, isHalfDonutLeft,] = DONUT_HALF_ANGLE_RANGES.map(angleRange => config.angleRange && (config.angleRange[0] === angleRange[0] &&
+            config.angleRange[1] === angleRange[1]));
+        const isVerticalHalfDonut = isHalfDonutTop || isHalfDonutBottom;
+        const isHorizontalHalfDonut = isHalfDonutRight || isHalfDonutLeft;
+        // Compute the bounding box of the donut,
+        // considering it may be a half-donut
+        const width = this._width * (isHorizontalHalfDonut ? 2 : 1);
+        const height = this._height * (isVerticalHalfDonut ? 2 : 1);
+        const outerRadius = config.radius || Math.min(width - bleed.left - bleed.right, height - bleed.top - bleed.bottom) / 2;
         const innerRadius = config.arcWidth === 0 ? 0 : clamp(outerRadius - config.arcWidth, 0, outerRadius - 1);
+        const translateY = this._height / 2 + (isHalfDonutTop ? outerRadius / 2 : isHalfDonutBottom ? -outerRadius / 2 : 0);
+        const translateX = this._width / 2 + (isHalfDonutLeft ? outerRadius / 2 : isHalfDonutRight ? -outerRadius / 2 : 0);
+        const translate = `translate(${translateX},${translateY})`;
+        this.arcGroup.attr('transform', translate);
         this.arcGen
             .startAngle(d => d.startAngle)
             .endAngle(d => d.endAngle)
@@ -55,7 +70,6 @@ class Donut extends ComponentCore {
             .padAngle(config.padAngle)
             .value(d => getNumber(d.datum, config.value, d.index) || 0)
             .sort((a, b) => { var _a; return (_a = config.sortFunction) === null || _a === void 0 ? void 0 : _a.call(config, a.datum, b.datum); });
-        this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
         const arcData = pieGen(data).map(d => {
             const arc = Object.assign(Object.assign({}, d), { data: d.data.datum, index: d.data.index, innerRadius,
                 outerRadius });
@@ -79,20 +93,36 @@ class Donut extends ComponentCore {
             .attr('class', segmentExit)
             .call(removeArc, duration);
         // Label
+        const labelTextAnchor = isHalfDonutRight ? 'start' : isHalfDonutLeft ? 'end' : 'middle';
         this.centralLabel
-            .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
             .attr('dy', config.centralSubLabel ? '-0.55em' : null)
+            .style('text-anchor', labelTextAnchor)
             .text((_e = config.centralLabel) !== null && _e !== void 0 ? _e : null);
         this.centralSubLabel
-            .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
             .attr('dy', config.centralLabel ? '0.55em' : null)
+            .style('text-anchor', labelTextAnchor)
             .text((_f = config.centralSubLabel) !== null && _f !== void 0 ? _f : null);
         if (config.centralSubLabelWrap)
             wrapSVGText(this.centralSubLabel, innerRadius * 1.9);
+        // Label placement
+        const labelTranslateX = (config.centralLabelOffsetX || 0) + translateX;
+        let labelTranslateY = (config.centralLabelOffsetY || 0) + translateY;
+        // Special case label placement for half donut
+        if (isVerticalHalfDonut && config.centralLabelOffsetX === undefined && config.centralLabelOffsetY === undefined) {
+            const halfDonutLabelOffsetY = isHalfDonutTop
+                ? -this.centralSubLabel.node().getBoundingClientRect().height
+                : isHalfDonutBottom
+                    ? this.centralLabel.node().getBoundingClientRect().height
+                    : 0;
+            labelTranslateY = halfDonutLabelOffsetY + translateY;
+        }
+        const labelTranslate = `translate(${labelTranslateX},${labelTranslateY})`;
+        this.centralLabel.attr('transform', labelTranslate);
+        this.centralSubLabel.attr('transform', labelTranslate);
         // Background
         this.arcBackground.attr('class', background)
             .attr('visibility', config.showBackground ? null : 'hidden')
-            .attr('transform', `translate(${this._width / 2},${this._height / 2})`);
+            .attr('transform', translate);
         smartTransition(this.arcBackground, duration)
             .attr('d', this.arcGen({
             startAngle: (_k = (_h = (_g = config.backgroundAngleRange) === null || _g === void 0 ? void 0 : _g[0]) !== null && _h !== void 0 ? _h : (_j = config.angleRange) === null || _j === void 0 ? void 0 : _j[0]) !== null && _k !== void 0 ? _k : 0,

package/components/donut/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/donut/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { pie, arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\nimport { isNumber, clamp, getNumber } from 'utils/data'\nimport { wrapSVGText } from 'utils/text'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { DonutArcDatum, DonutArcAnimState, DonutDatum } from './types'\n\n// Config\nimport { DonutDefaultConfig, DonutConfigInterface } from './config'\n\n// Modules\nimport { createArc, updateArc, removeArc } from './modules/arc'\n\n// Styles\nimport * as s from './style'\n\nexport class Donut<Datum> extends ComponentCore<Datum[], DonutConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = DonutDefaultConfig as DonutConfigInterface<Datum>\n  public config: DonutConfigInterface<Datum> = this._defaultConfig\n\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>\n  arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n  centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n  arcGen = arc<DonutArcAnimState>()\n\n  events = {\n  }\n\n  constructor (config?: DonutConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n    this.arcBackground = this.g.append('path')\n    this.arcGroup = this.g.append('g')\n    this.centralLabel = this.g.append('text')\n      .attr('class', s.centralLabel)\n    this.centralSubLabel = this.g.append('text')\n      .attr('class', s.centralSubLabel)\n  }\n\n  get bleed (): Spacing {\n    return { top: 0, bottom: 0, left: 0, right: 0 }\n  }\n\n  _render (customDuration?: number): void {\n    const { config, datamodel, bleed } = this\n\n    // Wrap data to preserve original indices\n    const data: DonutDatum<Datum>[] = datamodel.data\n      .map((d, i) => ({\n        index: i,\n        datum: d,\n      }))\n      .filter(d => config.showEmptySegments || getNumber(d.datum, config.value, d.index))\n\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n    const outerRadius = config.radius || Math.min(this._width - bleed.left - bleed.right, this._height - bleed.top - bleed.bottom) / 2\n    const innerRadius = config.arcWidth === 0 ? 0 : clamp(outerRadius - config.arcWidth, 0, outerRadius - 1)\n\n    this.arcGen\n      .startAngle(d => d.startAngle)\n      .endAngle(d => d.endAngle)\n      .innerRadius(d => d.innerRadius)\n      .outerRadius(d => d.outerRadius)\n      .padAngle(d => d.padAngle)\n      .cornerRadius(config.cornerRadius)\n\n    const pieGen = pie<DonutDatum<Datum>>()\n      .startAngle(config.angleRange?.[0] ?? 0)\n      .endAngle(config.angleRange?.[1] ?? 2 * Math.PI)\n      .padAngle(config.padAngle)\n      .value(d => getNumber(d.datum, config.value, d.index) || 0)\n      .sort((a, b) => config.sortFunction?.(a.datum, b.datum))\n\n    this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    const arcData: DonutArcDatum<Datum>[] = pieGen(data).map(d => {\n      const arc = {\n        ...d,\n        data: d.data.datum,\n        index: d.data.index,\n        innerRadius,\n        outerRadius,\n      }\n\n      if (config.showEmptySegments && d.endAngle - d.startAngle - d.padAngle <= Number.EPSILON) {\n        arc.endAngle = d.startAngle + Math.max(config.emptySegmentAngle, config.padAngle)\n        arc.padAngle = d.padAngle / 2\n      }\n      return arc\n    })\n\n    // Arc segments\n    const arcsSelection = this.arcGroup\n      .selectAll<SVGPathElement, DonutArcDatum<Datum>>(`.${s.segment}`)\n      .data(arcData, (d: DonutArcDatum<Datum>) => config.id(d.data, d.index))\n\n    const arcsEnter = arcsSelection.enter().append('path')\n      .attr('class', s.segment)\n      .call(createArc, config)\n\n    const arcsMerged = arcsSelection.merge(arcsEnter)\n    arcsMerged.call(updateArc, config, this.arcGen, duration)\n    arcsMerged.sort((a, b) => b.value - a.value)\n\n    arcsSelection.exit<DonutArcDatum<Datum>>()\n      .attr('class', s.segmentExit)\n      .call(removeArc, duration)\n\n    // Label\n    this.centralLabel\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n      .attr('dy', config.centralSubLabel ? '-0.55em' : null)\n      .text(config.centralLabel ?? null)\n\n    this.centralSubLabel\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n      .attr('dy', config.centralLabel ? '0.55em' : null)\n      .text(config.centralSubLabel ?? null)\n\n    if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, innerRadius * 1.9)\n\n    // Background\n    this.arcBackground.attr('class', s.background)\n      .attr('visibility', config.showBackground ? null : 'hidden')\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    smartTransition(this.arcBackground, duration)\n      .attr('d', this.arcGen({\n        startAngle: config.backgroundAngleRange?.[0] ?? config.angleRange?.[0] ?? 0,\n        endAngle: config.backgroundAngleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,\n        innerRadius,\n        outerRadius,\n      }))\n  }\n}\n"],"names":["s.centralLabel","s.centralSubLabel","s.segment","s.segmentExit","s.background","s"],"mappings":";;;;;;;;;;;AA2BM,MAAO,KAAa,SAAQ,aAAmD,CAAA;AAgBnF,IAAA,WAAA,CAAa,MAAoC,EAAA;AAC/C,QAAA,KAAK,EAAE,CAAA;QAfC,IAAc,CAAA,cAAA,GAAG,kBAAiD,CAAA;AACrE,QAAA,IAAA,CAAA,MAAM,GAAgC,IAAI,CAAC,cAAc,CAAA;AAEhE,QAAA,IAAA,CAAA,SAAS,GAA2B,IAAI,eAAe,EAAE,CAAA;QAMzD,IAAM,CAAA,MAAA,GAAG,GAAG,EAAqB,CAAA;QAEjC,IAAM,CAAA,MAAA,GAAG,EACR,CAAA;AAIC,QAAA,IAAI,MAAM;AAAE,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QAClC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;QAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;AACtC,aAAA,IAAI,CAAC,OAAO,EAAEA,YAAc,CAAC,CAAA;QAChC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;AACzC,aAAA,IAAI,CAAC,OAAO,EAAEC,eAAiB,CAAC,CAAA;KACpC;AAED,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;KAChD;AAED,IAAA,OAAO,CAAE,cAAuB,EAAA;;QAC9B,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;;AAGzC,QAAA,MAAM,IAAI,GAAwB,SAAS,CAAC,IAAI;aAC7C,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM;AACd,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,KAAK,EAAE,CAAC;AACT,SAAA,CAAC,CAAC;aACF,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,iBAAiB,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;AAErF,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAA;AAC5E,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;AAClI,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,CAAA;AAExG,QAAA,IAAI,CAAC,MAAM;aACR,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC;aAC7B,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;aACzB,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;aAC/B,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;aAC/B,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;AACzB,aAAA,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;QAEpC,MAAM,MAAM,GAAG,GAAG,EAAqB;aACpC,UAAU,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAG,CAAC,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAC;AACvC,aAAA,QAAQ,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAG,CAAC,CAAC,mCAAI,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;AAC/C,aAAA,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;aACzB,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;aAC1D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAA,EAAA,GAAA,MAAM,CAAC,YAAY,MAAnB,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,MAAM,EAAgB,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAA;QAE1D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAG,CAAA,CAAA,CAAC,CAAA;QAEpF,MAAM,OAAO,GAA2B,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAG;YAC3D,MAAM,GAAG,mCACJ,CAAC,CAAA,EAAA,EACJ,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAClB,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EACnB,WAAW;AACX,gBAAA,WAAW,GACZ,CAAA;AAED,YAAA,IAAI,MAAM,CAAC,iBAAiB,IAAI,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ,IAAI,MAAM,CAAC,OAAO,EAAE;AACxF,gBAAA,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAA;gBACjF,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAA;AAC9B,aAAA;AACD,YAAA,OAAO,GAAG,CAAA;AACZ,SAAC,CAAC,CAAA;;AAGF,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ;AAChC,aAAA,SAAS,CAAuC,CAAI,CAAA,EAAAC,OAAS,EAAE,CAAC;aAChE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAuB,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;QAEzE,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACnD,aAAA,IAAI,CAAC,OAAO,EAAEA,OAAS,CAAC;AACxB,aAAA,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QAE1B,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;AACjD,QAAA,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;AACzD,QAAA,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAA;QAE5C,aAAa,CAAC,IAAI,EAAwB;AACvC,aAAA,IAAI,CAAC,OAAO,EAAEC,WAAa,CAAC;AAC5B,aAAA,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;;AAG5B,QAAA,IAAI,CAAC,YAAY;AACd,aAAA,IAAI,CAAC,WAAW,EAAE,CAAa,UAAA,EAAA,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;AACtE,aAAA,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;aACrD,IAAI,CAAC,MAAA,MAAM,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,IAAI,CAAC,CAAA;AAEpC,QAAA,IAAI,CAAC,eAAe;AACjB,aAAA,IAAI,CAAC,WAAW,EAAE,CAAa,UAAA,EAAA,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;AACtE,aAAA,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC;aACjD,IAAI,CAAC,MAAA,MAAM,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,IAAI,CAAC,CAAA;QAEvC,IAAI,MAAM,CAAC,mBAAmB;YAAE,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,GAAG,CAAC,CAAA;;QAGpF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,EAAEC,UAAY,CAAC;AAC3C,aAAA,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,cAAc,GAAG,IAAI,GAAG,QAAQ,CAAC;AAC3D,aAAA,IAAI,CAAC,WAAW,EAAE,CAAa,UAAA,EAAA,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,CAAA,CAAG,CAAC,CAAA;AAEzE,QAAA,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;AAC1C,aAAA,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC;AACrB,YAAA,UAAU,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,MAAM,CAAC,oBAAoB,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,UAAU,0CAAG,CAAC,CAAC,mCAAI,CAAC;YAC3E,QAAQ,EAAE,MAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,oBAAoB,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,MAAA,MAAM,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAG,CAAC,CAAC,mCAAI,CAAC,GAAG,IAAI,CAAC,EAAE;YACnF,WAAW;YACX,WAAW;AACZ,SAAA,CAAC,CAAC,CAAA;KACN;;AAxHM,KAAS,CAAA,SAAA,GAAGC,KAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/donut/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { pie, arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\nimport { isNumber, clamp, getNumber } from 'utils/data'\nimport { wrapSVGText } from 'utils/text'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { DonutArcDatum, DonutArcAnimState, DonutDatum } from './types'\n\n// Config\nimport { DonutDefaultConfig, DonutConfigInterface } from './config'\n\n// Modules\nimport { createArc, updateArc, removeArc } from './modules/arc'\n\n// Constants\nimport { DONUT_HALF_ANGLE_RANGES } from './constants'\n\n// Styles\nimport * as s from './style'\n\nexport class Donut<Datum> extends ComponentCore<Datum[], DonutConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = DonutDefaultConfig as DonutConfigInterface<Datum>\n  public config: DonutConfigInterface<Datum> = this._defaultConfig\n\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>\n  arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n  centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n  arcGen = arc<DonutArcAnimState>()\n\n  events = {\n  }\n\n  constructor (config?: DonutConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n    this.arcBackground = this.g.append('path')\n    this.arcGroup = this.g.append('g')\n    this.centralLabel = this.g.append('text')\n      .attr('class', s.centralLabel)\n    this.centralSubLabel = this.g.append('text')\n      .attr('class', s.centralSubLabel)\n  }\n\n  get bleed (): Spacing {\n    return { top: 0, bottom: 0, left: 0, right: 0 }\n  }\n\n  _render (customDuration?: number): void {\n    const { config, datamodel, bleed } = this\n\n    // Wrap data to preserve original indices\n    const data: DonutDatum<Datum>[] = datamodel.data\n      .map((d, i) => ({\n        index: i,\n        datum: d,\n      }))\n      .filter(d => config.showEmptySegments || getNumber(d.datum, config.value, d.index))\n\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    // Handle half-donut cases, which adjust the scaling and positioning.\n    // One of these is true if we are dealing with a half-donut.\n    const [\n      isHalfDonutTop,\n      isHalfDonutRight,\n      isHalfDonutBottom,\n      isHalfDonutLeft,\n    ] = DONUT_HALF_ANGLE_RANGES.map(angleRange =>\n      config.angleRange && (\n        config.angleRange[0] === angleRange[0] &&\n        config.angleRange[1] === angleRange[1]\n      )\n    )\n    const isVerticalHalfDonut = isHalfDonutTop || isHalfDonutBottom\n    const isHorizontalHalfDonut = isHalfDonutRight || isHalfDonutLeft\n\n    // Compute the bounding box of the donut,\n    // considering it may be a half-donut\n    const width = this._width * (isHorizontalHalfDonut ? 2 : 1)\n    const height = this._height * (isVerticalHalfDonut ? 2 : 1)\n\n    const outerRadius = config.radius || Math.min(width - bleed.left - bleed.right, height - bleed.top - bleed.bottom) / 2\n    const innerRadius = config.arcWidth === 0 ? 0 : clamp(outerRadius - config.arcWidth, 0, outerRadius - 1)\n\n    const translateY = this._height / 2 + (isHalfDonutTop ? outerRadius / 2 : isHalfDonutBottom ? -outerRadius / 2 : 0)\n    const translateX = this._width / 2 + (isHalfDonutLeft ? outerRadius / 2 : isHalfDonutRight ? -outerRadius / 2 : 0)\n    const translate = `translate(${translateX},${translateY})`\n\n    this.arcGroup.attr('transform', translate)\n\n    this.arcGen\n      .startAngle(d => d.startAngle)\n      .endAngle(d => d.endAngle)\n      .innerRadius(d => d.innerRadius)\n      .outerRadius(d => d.outerRadius)\n      .padAngle(d => d.padAngle)\n      .cornerRadius(config.cornerRadius)\n\n    const pieGen = pie<DonutDatum<Datum>>()\n      .startAngle(config.angleRange?.[0] ?? 0)\n      .endAngle(config.angleRange?.[1] ?? 2 * Math.PI)\n      .padAngle(config.padAngle)\n      .value(d => getNumber(d.datum, config.value, d.index) || 0)\n      .sort((a, b) => config.sortFunction?.(a.datum, b.datum))\n\n    const arcData: DonutArcDatum<Datum>[] = pieGen(data).map(d => {\n      const arc = {\n        ...d,\n        data: d.data.datum,\n        index: d.data.index,\n        innerRadius,\n        outerRadius,\n      }\n\n      if (config.showEmptySegments && d.endAngle - d.startAngle - d.padAngle <= Number.EPSILON) {\n        arc.endAngle = d.startAngle + Math.max(config.emptySegmentAngle, config.padAngle)\n        arc.padAngle = d.padAngle / 2\n      }\n      return arc\n    })\n\n    // Arc segments\n    const arcsSelection = this.arcGroup\n      .selectAll<SVGPathElement, DonutArcDatum<Datum>>(`.${s.segment}`)\n      .data(arcData, (d: DonutArcDatum<Datum>) => config.id(d.data, d.index))\n\n    const arcsEnter = arcsSelection.enter().append('path')\n      .attr('class', s.segment)\n      .call(createArc, config)\n\n    const arcsMerged = arcsSelection.merge(arcsEnter)\n    arcsMerged.call(updateArc, config, this.arcGen, duration)\n    arcsMerged.sort((a, b) => b.value - a.value)\n\n    arcsSelection.exit<DonutArcDatum<Datum>>()\n      .attr('class', s.segmentExit)\n      .call(removeArc, duration)\n\n    // Label\n    const labelTextAnchor = isHalfDonutRight ? 'start' : isHalfDonutLeft ? 'end' : 'middle'\n    this.centralLabel\n      .attr('dy', config.centralSubLabel ? '-0.55em' : null)\n      .style('text-anchor', labelTextAnchor)\n      .text(config.centralLabel ?? null)\n\n    this.centralSubLabel\n      .attr('dy', config.centralLabel ? '0.55em' : null)\n      .style('text-anchor', labelTextAnchor)\n      .text(config.centralSubLabel ?? null)\n\n    if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, innerRadius * 1.9)\n\n    // Label placement\n    const labelTranslateX = (config.centralLabelOffsetX || 0) + translateX\n    let labelTranslateY = (config.centralLabelOffsetY || 0) + translateY\n\n    // Special case label placement for half donut\n    if (isVerticalHalfDonut && config.centralLabelOffsetX === undefined && config.centralLabelOffsetY === undefined) {\n      const halfDonutLabelOffsetY = isHalfDonutTop\n        ? -this.centralSubLabel.node().getBoundingClientRect().height\n        : isHalfDonutBottom\n          ? this.centralLabel.node().getBoundingClientRect().height\n          : 0\n      labelTranslateY = halfDonutLabelOffsetY + translateY\n    }\n    const labelTranslate = `translate(${labelTranslateX},${labelTranslateY})`\n    this.centralLabel.attr('transform', labelTranslate)\n    this.centralSubLabel.attr('transform', labelTranslate)\n\n    // Background\n    this.arcBackground.attr('class', s.background)\n      .attr('visibility', config.showBackground ? null : 'hidden')\n      .attr('transform', translate)\n\n    smartTransition(this.arcBackground, duration)\n      .attr('d', this.arcGen({\n        startAngle: config.backgroundAngleRange?.[0] ?? config.angleRange?.[0] ?? 0,\n        endAngle: config.backgroundAngleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,\n        innerRadius,\n        outerRadius,\n      }))\n  }\n}\n\n"],"names":["s.centralLabel","s.centralSubLabel","s.segment","s.segmentExit","s.background","s"],"mappings":"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"}

package/components/donut/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: donut-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-donut-central-label-font-size: 16px;\n    --vis-donut-central-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-label-font-family: */\n    --vis-donut-central-label-font-weight: 600;\n\n    --vis-donut-central-sub-label-font-size: 12px;\n    --vis-donut-central-sub-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-sub-label-font-family: */\n    --vis-donut-central-sub-label-font-weight: 500;\n\n    --vis-donut-background-color: #E7E9F3;\n    --vis-donut-segment-stroke-width: 0;\n    // The line segment color variable is not defined by default\n    // to allow it to fallback to the donut background color\n    /* --vis-donut-segment-stroke-color: none; */\n\n    --vis-dark-donut-central-label-text-color: #C2BECE;\n    --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n    --vis-dark-donut-background-color: #18160C;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n    --vis-donut-background-color: var(--vis-dark-donut-background-color);\n  }\n`\nexport const background = css`\n  label: background;\n  fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n  label: segment;\n  stroke-width: var(--vis-donut-segment-stroke-width);\n  stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-label-font-size);\n  font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-label-font-weight);\n  fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-sub-label-font-size);\n  font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-sub-label-font-weight);\n  fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AACM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;EAIzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: donut-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-donut-central-label-font-size: 16px;\n    --vis-donut-central-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-label-font-family: */\n    --vis-donut-central-label-font-weight: 600;\n\n    --vis-donut-central-sub-label-font-size: 12px;\n    --vis-donut-central-sub-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-sub-label-font-family: */\n    --vis-donut-central-sub-label-font-weight: 500;\n\n    --vis-donut-background-color: #E7E9F3;\n    --vis-donut-segment-stroke-width: 0;\n    // The line segment color variable is not defined by default\n    // to allow it to fallback to the donut background color\n    /* --vis-donut-segment-stroke-color: none; */\n\n    --vis-dark-donut-central-label-text-color: #C2BECE;\n    --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n    --vis-dark-donut-background-color: #18160C;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n    --vis-donut-background-color: var(--vis-dark-donut-background-color);\n  }\n`\nexport const background = css`\n  label: background;\n  fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n  label: segment;\n  stroke-width: var(--vis-donut-segment-stroke-width);\n  stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-label-font-size);\n  font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-label-font-weight);\n  fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-sub-label-font-size);\n  font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-sub-label-font-weight);\n  fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AACM,MAAM,UAAU,GAAG,GAAG,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA;;;;EAIzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;"}

package/components/flow-legend/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const root = css`\n  label: flow-legend-component;\n\n  position: relative;\n  user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-flow-legend-label-background: #ffffff;\n    --vis-flow-legend-label-color: #71788a;\n    --vis-flow-legend-link-color: #E5E9F7;\n    --vis-flow-legend-arrow-color: #E5E9F7;\n    --vis-flow-legend-label-padding: 5px 15px;\n    --vis-flow-legend-arrow-padding: 0 10px;\n    /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n    --vis-dark-flow-legend-label-background: #292b34;\n    --vis-dark-flow-legend-label-color: #E5E9F7;\n    --vis-dark-flow-legend-link-color: #71788a;\n    --vis-dark-flow-legend-arrow-color: #71788a;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n    --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n    --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n    --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n  }\n`\n\nexport const line = (lineColor: string): string => css`\n  label: line;\n\n  height: 2px;\n  width: 100%;\n  background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n  position: absolute;\n  top: 50%;\n`\n\nexport const labels = css`\n  label: labels;\n\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`\n\nexport const item = css`\n  label: item;\n\n  position: relative;\n  max-width: 50px;\n\n  padding: 10px;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n  label: label;\n\n  transform: translate(-50%, 0%);\n  margin-left: 7px;\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-label-padding);\n  font-size: ${labelFontSize}px;\n  color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n  display: inline-table;\n  text-align: center;\n`\n\nexport const arrow = (arrowColor: string): string => css`\n  label: arrow;\n\n  font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n  font-size: 9px;\n  vertical-align: middle;\n  color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-arrow-padding);\n  transform: translate(-25%, 0%);\n  display: inline-table;\n  text-align: center;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;EAKtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;AAgBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEY,MAAA,IAAI,GAAG,CAAC,SAAiB,KAAa,GAAG,CAAA,CAAA;;;;;AAKhC,oBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;;;EAGrE;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA,CAAA;;;;;;;eAOhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEY,MAAA,KAAK,GAAG,CAAC,UAAkB,KAAa,GAAG,CAAA,CAAA;;;0DAGE,+BAA+B,CAAA;;;AAG9E,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const root = css`\n  label: flow-legend-component;\n\n  position: relative;\n  user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-flow-legend-label-background: #ffffff;\n    --vis-flow-legend-label-color: #71788a;\n    --vis-flow-legend-link-color: #E5E9F7;\n    --vis-flow-legend-arrow-color: #E5E9F7;\n    --vis-flow-legend-label-padding: 5px 15px;\n    --vis-flow-legend-arrow-padding: 0 10px;\n    /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n    --vis-dark-flow-legend-label-background: #292b34;\n    --vis-dark-flow-legend-label-color: #E5E9F7;\n    --vis-dark-flow-legend-link-color: #71788a;\n    --vis-dark-flow-legend-arrow-color: #71788a;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n    --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n    --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n    --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n  }\n`\n\nexport const line = (lineColor: string): string => css`\n  label: line;\n\n  height: 2px;\n  width: 100%;\n  background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n  position: absolute;\n  top: 50%;\n`\n\nexport const labels = css`\n  label: labels;\n\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`\n\nexport const item = css`\n  label: item;\n\n  position: relative;\n  max-width: 50px;\n\n  padding: 10px;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n  label: label;\n\n  transform: translate(-50%, 0%);\n  margin-left: 7px;\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-label-padding);\n  font-size: ${labelFontSize}px;\n  color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n  display: inline-table;\n  text-align: center;\n`\n\nexport const arrow = (arrowColor: string): string => css`\n  label: arrow;\n\n  font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n  font-size: 9px;\n  vertical-align: middle;\n  color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-arrow-padding);\n  transform: translate(-25%, 0%);\n  display: inline-table;\n  text-align: center;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;EAKtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;AAgBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEY,MAAA,IAAI,GAAG,CAAC,SAAiB,KAAa,GAAG,CAAA;;;;;AAKhC,oBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;;;EAGrE;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;EAQxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;EAOtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA;;;;;;;eAOhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEY,MAAA,KAAK,GAAG,CAAC,UAAkB,KAAa,GAAG,CAAA;;;0DAGE,+BAA+B,CAAA;;;AAG9E,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;;;;;;"}

package/components/free-brush/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/free-brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: free-brush-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-free-brush-selection-fill-color: #0b1640;\n    --vis-free-brush-selection-fill-opacity: 0.4;\n    --vis-free-brush-selection-stroke-color: #acb2b9;\n    --vis-free-brush-handle-fill-color: #6d778c;\n    --vis-free-brush-handle-stroke-color: none;\n\n    --vis-dark-free-brush-selection-fill-color: #344174;\n    --vis-dark-free-brush-selection-stroke-color: #0b1640;\n    --vis-dark-free-brush-handle-fill-color: #6d778c;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-free-brush-selection-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n    --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);\n    --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n  }\n`\n\nexport const brush = css`\n  label: brush;\n  fill: none;\n  stroke: none;\n\n  .selection {\n    fill: var(--vis-free-brush-selection-fill-color);\n    fill-opacity: var(--vis-free-brush-selection-fill-opacity);\n    stroke: var(--vis-free-brush-selection-stroke-color);\n    stroke-width: 0;\n    stroke-opacity: 0;\n  }\n\n  .handle {\n    fill: var(--vis-free-brush-handle-fill-color);\n    stroke: var(--vis-free-brush-handle-stroke-color);\n  }\n`\n\nexport const hide = css`\n  .selection, .handle {\n    display: none;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;AAajB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/free-brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: free-brush-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-free-brush-selection-fill-color: #0b1640;\n    --vis-free-brush-selection-fill-opacity: 0.4;\n    --vis-free-brush-selection-stroke-color: #acb2b9;\n    --vis-free-brush-handle-fill-color: #6d778c;\n    --vis-free-brush-handle-stroke-color: none;\n\n    --vis-dark-free-brush-selection-fill-color: #344174;\n    --vis-dark-free-brush-selection-stroke-color: #0b1640;\n    --vis-dark-free-brush-handle-fill-color: #6d778c;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-free-brush-selection-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n    --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);\n    --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n  }\n`\n\nexport const brush = css`\n  label: brush;\n  fill: none;\n  stroke: none;\n\n  .selection {\n    fill: var(--vis-free-brush-selection-fill-color);\n    fill-opacity: var(--vis-free-brush-selection-fill-opacity);\n    stroke: var(--vis-free-brush-selection-stroke-color);\n    stroke-width: 0;\n    stroke-opacity: 0;\n  }\n\n  .handle {\n    fill: var(--vis-free-brush-handle-fill-color);\n    stroke: var(--vis-free-brush-handle-stroke-color);\n  }\n`\n\nexport const hide = css`\n  .selection, .handle {\n    display: none;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;AAajB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;"}

package/components/graph/config.d.ts

@@ -2,9 +2,11 @@ import { D3BrushEvent } from 'd3-brush';
 import { D3DragEvent } from 'd3-drag';
 import { D3ZoomEvent, ZoomTransform } from 'd3-zoom';
 import { Selection } from 'd3-selection';
+import { ElkShape } from 'elkjs';
+import type { GraphDataModel } from "../../data-models/graph";
 import { ComponentConfigInterface } from "../../core/component/config";
 import { TrimMode } from "../../types/text";
-import { GraphInputLink, GraphInputNode } from "../../types/graph";
+import { GraphInputLink, GraphInputNode, GraphInputData } from "../../types/graph";
 import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from "../../types/accessor";
 import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape, GraphDagreLayoutSetting, GraphNode, GraphLink, GraphNodeSelectionHighlightMode } from './types';
 export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
@@ -79,6 +81,12 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
      * E.g.: `[n => n.group, n => n.subGroup]`.
      * Default: `undefined` */
     layoutElkNodeGroups?: StringAccessor<N>[];
+    /** A function to be called per graph node to get the ELK shape object.
+     * This enables you to provide custom node dimensions (through the `width` and `height` properties)
+     * and coordinates (through the `x` and `y` properties) if needed.
+     * Default: `undefined`
+    */
+    layoutElkGetNodeShape?: (d: GraphNode<N, L>, i: number) => ElkShape;
     /** Link width accessor function ot constant value. Default: `1` */
     linkWidth?: NumericAccessor<L>;
     /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */
@@ -94,9 +102,9 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
     /** Link flow animation accessor function or constant value. Default: `false` */
     linkFlow?: BooleanAccessor<L>;
     /** Animation duration of the flow (traffic) circles. Default: `20000` */
-    linkFlowAnimDuration?: number;
+    linkFlowAnimDuration?: NumericAccessor<L>;
     /** Size of the moving particles that represent traffic flow. Default: `2` */
-    linkFlowParticleSize?: number;
+    linkFlowParticleSize?: NumericAccessor<L>;
     /** Link label accessor function or constant value. Default: `undefined` */
     linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;
     /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */
@@ -109,6 +117,12 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
      * `1.5` - very curve.
      * Default: `0` */
     linkCurvature?: NumericAccessor<L>;
+    /** Highlight links on hover. Default: `true` */
+    linkHighlightOnHover?: boolean;
+    /** Offset [x,y] in pixels from the source node's center point where the link should start. Default: `undefined` */
+    linkSourcePointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;
+    /** Offset [x,y] in pixels from the target node's center point where the link should end. Default: `undefined` */
+    linkTargetPointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;
     /** Set selected link by its unique id. Default: `undefined` */
     selectedLinkId?: number | string;
     /** Node size accessor function or constant value. Default: `30` */
@@ -206,5 +220,12 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
     onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;
     /** Callback function to be called when the graph rendering is complete. Default: `undefined` */
     onRenderComplete?: (g: Selection<SVGGElement, unknown, null, undefined>, nodes: GraphNode<N, L>[], links: GraphLink<N, L>[], config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number, width: number, height: number) => void;
+    /** Determines whether the component should update when new data is provided.
+     * This function takes the previous and new data as parameters and returns a boolean
+     * indicating whether the update should proceed. Useful for fine-grained control over
+     * update behavior when your data has a complex nested structure.
+     * By default the `isEqual` function from Unovis will be used to do the comparison.
+     */
+    shouldDataUpdate?: (prevData: GraphInputData<N, L>, nextData: GraphInputData<N, L>, datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>) => boolean;
 }
 export declare const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink>;

package/components/graph/config.js

@@ -1,8 +1,9 @@
+import { isEqual } from '../../utils/data.js';
 import { ComponentDefaultConfig } from '../../core/component/config.js';
 import { TrimMode } from '../../types/text.js';
 import { GraphLayoutType, GraphLinkStyle, GraphNodeShape, GraphNodeSelectionHighlightMode } from './types.js';
 
-// Config
+// Utils
 const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, zoomEventFilter: undefined, disableDrag: false, disableBrush: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
         linkDistance: 60,
         linkStrength: 0.45,
@@ -14,7 +15,9 @@ const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfi
     }, dagreLayoutSettings: {
         rankdir: 'BT',
         ranker: 'longest-path',
-    }, layoutElkSettings: undefined, layoutElkNodeGroups: undefined, linkFlowAnimDuration: 20000, linkFlowParticleSize: 2, linkWidth: 1, linkStyle: GraphLinkStyle.Solid, linkBandWidth: 0, linkArrow: undefined, linkStroke: undefined, linkFlow: false, linkLabel: undefined, linkLabelShiftFromCenter: true, linkNeighborSpacing: 8, linkDisabled: false, linkCurvature: 0, selectedLinkId: undefined, nodeGaugeAnimDuration: 1500, nodeSize: 30, nodeStrokeWidth: 3, nodeShape: GraphNodeShape.Circle, nodeGaugeValue: 0, nodeIcon: (n) => n.icon, nodeIconSize: undefined, nodeLabel: (n) => n.label, nodeLabelTrim: true, nodeLabelTrimLength: 15, nodeLabelTrimMode: TrimMode.Middle, nodeSubLabel: '', nodeSubLabelTrim: true, nodeSubLabelTrimLength: 15, nodeSubLabelTrimMode: TrimMode.Middle, nodeSideLabels: undefined, nodeBottomIcon: undefined, nodeDisabled: false, nodeFill: (n) => n.fill, nodeGaugeFill: undefined, nodeStroke: (n) => n.stroke, nodeEnterPosition: undefined, nodeEnterScale: 0.75, nodeExitPosition: undefined, nodeExitScale: 0.75, nodeSort: undefined, nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected, selectedNodeId: undefined, selectedNodeIds: undefined, panels: undefined, onNodeDragStart: undefined, onNodeDrag: undefined, onNodeDragEnd: undefined, onZoom: undefined, onZoomStart: undefined, onZoomEnd: undefined, onLayoutCalculated: undefined, onNodeSelectionBrush: undefined, onNodeSelectionDrag: undefined, onRenderComplete: undefined });
+    }, layoutElkSettings: undefined, layoutElkNodeGroups: undefined, layoutElkGetNodeShape: undefined, linkFlowAnimDuration: 20000, linkFlowParticleSize: 2, linkWidth: 1, linkStyle: GraphLinkStyle.Solid, linkBandWidth: 0, linkArrow: undefined, linkStroke: undefined, linkFlow: false, linkLabel: undefined, linkLabelShiftFromCenter: true, linkNeighborSpacing: 8, linkDisabled: false, linkCurvature: 0, linkHighlightOnHover: true, linkSourcePointOffset: undefined, linkTargetPointOffset: undefined, selectedLinkId: undefined, nodeSize: 30, nodeStrokeWidth: 3, nodeShape: GraphNodeShape.Circle, nodeGaugeValue: 0, nodeIcon: (n) => n.icon, nodeIconSize: undefined, nodeLabel: (n) => n.label, nodeLabelTrim: true, nodeLabelTrimLength: 15, nodeLabelTrimMode: TrimMode.Middle, nodeSubLabel: '', nodeSubLabelTrim: true, nodeSubLabelTrimLength: 15, nodeSubLabelTrimMode: TrimMode.Middle, nodeSideLabels: undefined, nodeBottomIcon: undefined, nodeDisabled: false, nodeFill: (n) => n.fill, nodeGaugeFill: undefined, nodeStroke: (n) => n.stroke, nodeEnterPosition: undefined, nodeEnterScale: 0.75, nodeExitPosition: undefined, nodeExitScale: 0.75, nodeSort: undefined, nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected, nodeGaugeAnimDuration: 1500, selectedNodeId: undefined, selectedNodeIds: undefined, panels: undefined, onNodeDragStart: undefined, onNodeDrag: undefined, onNodeDragEnd: undefined, onZoom: undefined, onZoomStart: undefined, onZoomEnd: undefined, onLayoutCalculated: undefined, onNodeSelectionBrush: undefined, onNodeSelectionDrag: undefined, onRenderComplete: undefined, shouldDataUpdate: (prevData, nextData) => {
+        return !isEqual(prevData, nextData);
+    } });
 
 export { GraphDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/graph/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent, ZoomTransform } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n  GraphNodeSelectionHighlightMode,\n} from './types'\n\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Custom Zoom event filter to better control which actions should trigger zooming.\n   * Learn more: https://d3js.org/d3-zoom#zoom_filter.\n   * Default: `undefined` */\n  zoomEventFilter?: (event: PointerEvent) => boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Disable brush for multiple node selection. Default: `false` */\n  disableBrush?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles. Default: `20000` */\n  linkFlowAnimDuration?: number;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: number;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Custom \"enter\" function for node rendering. Default: `undefined` */\n  nodeEnterCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"update\" function for node rendering. Default: `undefined` */\n  nodeUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom partial \"update\" function for node rendering which will be triggered after the following events:\n   * - Full node update (`nodeUpdateCustomRenderFunction`);\n   * - Background click;\n   * - Node and Link mouseover and mouseout;\n   * - Node brushing,\n   * Default: `undefined` */\n  nodePartialUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"exit\" function for node rendering. Default: `undefined` */\n  nodeExitCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom render function that will be called while zooming / panning the graph. Default: `undefined` */\n  nodeOnZoomCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, zoomLevel: number) => void;\n  /** Define the mode for highlighting selected nodes in the graph. Default: `GraphNodeSelectionHighlightMode.GreyoutNonConnected` */\n  nodeSelectionHighlightMode?: GraphNodeSelectionHighlightMode;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n  /** Set selected nodes by unique id. Default: `undefined` */\n  selectedNodeIds?: number[] | string[];\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom start event callback. Default: `undefined` */\n  onZoomStart?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom end event callback. Default: `undefined` */\n  onZoomEnd?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (nodes: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n  /** Graph node selection brush callback function. Default: `undefined` */\n  onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n  /** Graph multiple node drag callback function. Default: `undefined` */\n  onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n  /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n  onRenderComplete?: (\n    g: Selection<SVGGElement, unknown, null, undefined>,\n    nodes: GraphNode<N, L>[],\n    links: GraphLink<N, L>[],\n    config: GraphConfigInterface<N, L>,\n    duration: number,\n    zoomLevel: number,\n    width: number,\n    height: number\n  ) => void;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  zoomEventFilter: undefined,\n  disableDrag: false,\n  disableBrush: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n\n  layoutGroupOrder: [],\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  selectedLinkId: undefined,\n  nodeGaugeAnimDuration: 1500,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n  nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n\n  selectedNodeId: undefined,\n  selectedNodeIds: undefined,\n\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onZoomStart: undefined,\n  onZoomEnd: undefined,\n  onLayoutCalculated: undefined,\n  onNodeSelectionBrush: undefined,\n  onNodeSelectionDrag: undefined,\n  onRenderComplete: undefined,\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent, ZoomTransform } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\nimport { ElkShape } from 'elkjs'\n\n// Core\nimport type { GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { isEqual } from 'utils/data'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n  GraphNodeSelectionHighlightMode,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Custom Zoom event filter to better control which actions should trigger zooming.\n   * Learn more: https://d3js.org/d3-zoom#zoom_filter.\n   * Default: `undefined` */\n  zoomEventFilter?: (event: PointerEvent) => boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Disable brush for multiple node selection. Default: `false` */\n  disableBrush?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n  /** A function to be called per graph node to get the ELK shape object.\n   * This enables you to provide custom node dimensions (through the `width` and `height` properties)\n   * and coordinates (through the `x` and `y` properties) if needed.\n   * Default: `undefined`\n  */\n  layoutElkGetNodeShape?: (d: GraphNode<N, L>, i: number) => ElkShape;\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles. Default: `20000` */\n  linkFlowAnimDuration?: NumericAccessor<L>;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: NumericAccessor<L>;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Highlight links on hover. Default: `true` */\n  linkHighlightOnHover?: boolean;\n  /** Offset [x,y] in pixels from the source node's center point where the link should start. Default: `undefined` */\n  linkSourcePointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Offset [x,y] in pixels from the target node's center point where the link should end. Default: `undefined` */\n  linkTargetPointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Custom \"enter\" function for node rendering. Default: `undefined` */\n  nodeEnterCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"update\" function for node rendering. Default: `undefined` */\n  nodeUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom partial \"update\" function for node rendering which will be triggered after the following events:\n   * - Full node update (`nodeUpdateCustomRenderFunction`);\n   * - Background click;\n   * - Node and Link mouseover and mouseout;\n   * - Node brushing,\n   * Default: `undefined` */\n  nodePartialUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"exit\" function for node rendering. Default: `undefined` */\n  nodeExitCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom render function that will be called while zooming / panning the graph. Default: `undefined` */\n  nodeOnZoomCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, zoomLevel: number) => void;\n  /** Define the mode for highlighting selected nodes in the graph. Default: `GraphNodeSelectionHighlightMode.GreyoutNonConnected` */\n  nodeSelectionHighlightMode?: GraphNodeSelectionHighlightMode;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n  /** Set selected nodes by unique id. Default: `undefined` */\n  selectedNodeIds?: number[] | string[];\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom start event callback. Default: `undefined` */\n  onZoomStart?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom end event callback. Default: `undefined` */\n  onZoomEnd?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (nodes: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n  /** Graph node selection brush callback function. Default: `undefined` */\n  onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n  /** Graph multiple node drag callback function. Default: `undefined` */\n  onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n  /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n  onRenderComplete?: (\n    g: Selection<SVGGElement, unknown, null, undefined>,\n    nodes: GraphNode<N, L>[],\n    links: GraphLink<N, L>[],\n    config: GraphConfigInterface<N, L>,\n    duration: number,\n    zoomLevel: number,\n    width: number,\n    height: number\n  ) => void;\n\n  /** Determines whether the component should update when new data is provided.\n   * This function takes the previous and new data as parameters and returns a boolean\n   * indicating whether the update should proceed. Useful for fine-grained control over\n   * update behavior when your data has a complex nested structure.\n   * By default the `isEqual` function from Unovis will be used to do the comparison.\n   */\n  shouldDataUpdate?: (\n    prevData: GraphInputData<N, L>,\n    nextData: GraphInputData<N, L>,\n    datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>\n  ) => boolean;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  zoomEventFilter: undefined,\n  disableDrag: false,\n  disableBrush: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n\n  layoutGroupOrder: [],\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n  layoutElkGetNodeShape: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  linkHighlightOnHover: true,\n  linkSourcePointOffset: undefined,\n  linkTargetPointOffset: undefined,\n  selectedLinkId: undefined,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n  nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n  nodeGaugeAnimDuration: 1500,\n\n  selectedNodeId: undefined,\n  selectedNodeIds: undefined,\n\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onZoomStart: undefined,\n  onZoomEnd: undefined,\n  onLayoutCalculated: undefined,\n  onNodeSelectionBrush: undefined,\n  onNodeSelectionDrag: undefined,\n  onRenderComplete: undefined,\n\n  shouldDataUpdate: (prevData: GraphInputData<GraphInputNode, GraphInputLink>, nextData: GraphInputData<GraphInputNode, GraphInputLink>): boolean => {\n    return !isEqual(prevData, nextData)\n  },\n}\n"],"names":[],"mappings":";;;;;AASA;MA8Ra,kBAAkB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC1B,sBAAsB,CACzB,EAAA,EAAA,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAC7B,WAAW,EAAE,KAAK,EAClB,eAAe,EAAE,SAAS,EAC1B,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,gCAAgC,EAAE,GAAG,EACrC,UAAU,EAAE,eAAe,CAAC,KAAK,EACjC,aAAa,EAAE,IAAI,EACnB,sBAAsB,EAAE,GAAG,EAC3B,uBAAuB,EAAE,KAAK,EAE9B,gBAAgB,EAAE,EAAE,EACpB,6BAA6B,EAAE,CAAC,EAChC,4BAA4B,EAAE,CAAC,EAC/B,0BAA0B,EAAE,SAAS,EACrC,oCAAoC,EAAE,SAAS,EAC/C,eAAe,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EAC9E,0BAA0B,EAAE,CAAC,CAAiB,KAAc,CAA0B,CAAC,QAAQ,EAE/F,mBAAmB,EAAE;AACnB,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,8BAA8B,EAAE,KAAK;AACtC,KAAA,EAED,mBAAmB,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,MAAM,EAAE,cAAc;AACvB,KAAA,EAED,iBAAiB,EAAE,SAAS,EAC5B,mBAAmB,EAAE,SAAS,EAC9B,qBAAqB,EAAE,SAAS,EAEhC,oBAAoB,EAAE,KAAK,EAC3B,oBAAoB,EAAE,CAAC,EACvB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,cAAc,CAAC,KAAK,EAC/B,aAAa,EAAE,CAAC,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,SAAS,EACpB,wBAAwB,EAAE,IAAI,EAC9B,mBAAmB,EAAE,CAAC,EACtB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,CAAC,EAChB,oBAAoB,EAAE,IAAI,EAC1B,qBAAqB,EAAE,SAAS,EAChC,qBAAqB,EAAE,SAAS,EAChC,cAAc,EAAE,SAAS,EAEzB,QAAQ,EAAE,EAAE,EACZ,eAAe,EAAE,CAAC,EAClB,SAAS,EAAE,cAAc,CAAC,MAAM,EAChC,cAAc,EAAE,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EACxE,aAAa,EAAE,IAAI,EACnB,mBAAmB,EAAE,EAAE,EACvB,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,YAAY,EAAE,EAAE,EAChB,gBAAgB,EAAE,IAAI,EACtB,sBAAsB,EAAE,EAAE,EAC1B,oBAAoB,EAAE,QAAQ,CAAC,MAAM,EACrC,cAAc,EAAE,SAAS,EACzB,cAAc,EAAE,SAAS,EACzB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,CAAC,CAAiB,KAAc,CAAwB,CAAC,MAAM,EAC3E,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,SAAS,EAC3B,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,SAAS,EACnB,0BAA0B,EAAE,+BAA+B,CAAC,mBAAmB,EAC/E,qBAAqB,EAAE,IAAI,EAE3B,cAAc,EAAE,SAAS,EACzB,eAAe,EAAE,SAAS,EAE1B,MAAM,EAAE,SAAS,EAEjB,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAE,SAAS,EACrB,aAAa,EAAE,SAAS,EACxB,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,SAAS,EAC7B,oBAAoB,EAAE,SAAS,EAC/B,mBAAmB,EAAE,SAAS,EAC9B,gBAAgB,EAAE,SAAS,EAE3B,gBAAgB,EAAE,CAAC,QAAwD,EAAE,QAAwD,KAAa;AAChJ,QAAA,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AACrC,KAAC;;;;"}

package/components/graph/index.d.ts

@@ -1,15 +1,12 @@
 import { Selection } from 'd3-selection';
 import { ComponentCore } from "../../core/component";
 import { GraphDataModel } from "../../data-models/graph";
-import { GraphInputLink, GraphInputNode } from "../../types/graph";
+import { GraphInputLink, GraphInputNode, GraphInputData } from "../../types/graph";
 import { Spacing } from "../../types/spacing";
 import { GraphNode, GraphLink } from './types';
 import { GraphConfigInterface } from './config';
 import * as nodeSelectors from './modules/node/style';
-export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> extends ComponentCore<{
-    nodes: N[];
-    links?: L[];
-}, GraphConfigInterface<N, L>> {
+export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> extends ComponentCore<GraphInputData<N, L>, GraphConfigInterface<N, L>> {
     static selectors: {
         root: string;
         graphGroup: string;
@@ -22,6 +19,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
         dimmedNode: string;
         link: string;
         linkLine: string;
+        linkLabel: string;
         dimmedLink: string;
         panel: string;
         panelRect: string;
@@ -63,6 +61,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _isDragging;
     private _brushBehavior;
     private _groupDragInit;
+    private _linkPathLengthMap;
     events: {
         [x: string]: {
             click: () => void;
@@ -82,10 +81,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     get selectedNodes(): GraphNode<N, L>[];
     get selectedLink(): GraphLink<N, L>;
     constructor(config?: GraphConfigInterface<N, L>);
-    setData(data: {
-        nodes: N[];
-        links?: L[];
-    }): void;
+    setData(data: GraphInputData<N, L>): void;
     setConfig(config: GraphConfigInterface<N, L>): void;
     get bleed(): Spacing;
     _render(customDuration?: number): void;
@@ -143,4 +139,11 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
         x: number;
         y: number;
     } | undefined;
+    /** Set the node state by id */
+    setNodeStateById(nodeId: string, state: GraphNode<N, L>['_state']): void;
+    /** Call a partial render to update the positions of the nodes and their links.
+      * This can be useful when you've changed the node positions manually outside
+      * of the component and want to update the graph.
+    */
+    updateNodePositions(duration?: number): void;
 }