@unovis/ts 1.5.1 → 1.6.0-pre.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/area/config.d.ts +7 -3
- package/components/area/config.js +1 -1
- package/components/area/config.js.map +1 -1
- package/components/area/index.js +25 -9
- package/components/area/index.js.map +1 -1
- package/components/chord-diagram/index.js +3 -1
- package/components/chord-diagram/index.js.map +1 -1
- package/components/graph/config.d.ts +12 -4
- package/components/graph/config.js +3 -3
- package/components/graph/config.js.map +1 -1
- package/components/graph/index.d.ts +2 -2
- package/components/graph/index.js +56 -23
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/link/index.js +8 -6
- package/components/graph/modules/link/index.js.map +1 -1
- package/components/graph/modules/link/style.js +4 -1
- package/components/graph/modules/link/style.js.map +1 -1
- package/components/graph/types.d.ts +7 -0
- package/components/graph/types.js +10 -2
- package/components/graph/types.js.map +1 -1
- package/components/tooltip/config.d.ts +6 -4
- package/components/tooltip/config.js +3 -1
- package/components/tooltip/config.js.map +1 -1
- package/components/tooltip/index.d.ts +7 -3
- package/components/tooltip/index.js +39 -9
- package/components/tooltip/index.js.map +1 -1
- package/index.js +1 -1
- package/package.json +5 -5
- package/types.js +1 -1
|
@@ -12,10 +12,14 @@ export interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<D
|
|
|
12
12
|
opacity?: NumericAccessor<Datum[]>;
|
|
13
13
|
/** Optional area cursor. String or accessor function. Default: `null` */
|
|
14
14
|
cursor?: StringAccessor<Datum[]>;
|
|
15
|
-
/** If an area is smaller than 1px, extend it to have 1px height.
|
|
15
|
+
/** If an area is smaller than 1px, extend it to have 1px height. Default: `false`
|
|
16
|
+
* @deprecated Use minHeight instead
|
|
17
|
+
*/
|
|
18
|
+
minHeight1Px?: boolean;
|
|
19
|
+
/** Minimum height of the area, use carefully.
|
|
16
20
|
* This setting is useful when some of the area values are zeros or very small so visually they become
|
|
17
21
|
* practically invisible, but you want to show that the data behind them exists and they're not just empty segments.
|
|
18
|
-
* Default: `
|
|
19
|
-
|
|
22
|
+
* Default: `undefined` */
|
|
23
|
+
minHeight?: number;
|
|
20
24
|
}
|
|
21
25
|
export declare const AreaDefaultConfig: AreaConfigInterface<unknown>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { XYComponentDefaultConfig } from '../../core/xy-component/config.js';
|
|
2
2
|
import { CurveType } from '../../types/curve.js';
|
|
3
3
|
|
|
4
|
-
const AreaDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { color: undefined, curveType: CurveType.MonotoneX, baseline: () => 0, opacity: 1, cursor: null, minHeight1Px: false });
|
|
4
|
+
const AreaDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { color: undefined, curveType: CurveType.MonotoneX, baseline: () => 0, opacity: 1, cursor: null, minHeight1Px: false, minHeight: undefined });
|
|
5
5
|
|
|
6
6
|
export { AreaDefaultConfig };
|
|
7
7
|
//# sourceMappingURL=config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/area/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { CurveType } from 'types/curve'\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\nexport interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n /** Area color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */\n color?: ColorAccessor<Datum[]>;\n /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */\n curveType?: CurveType | string;\n /** Baseline value or accessor function. Default: `undefined` */\n baseline?: NumericAccessor<Datum>;\n /** Opacity value or accessor function. Default: `1` */\n opacity?: NumericAccessor<Datum[]>;\n /** Optional area cursor. String or accessor function. Default: `null` */\n cursor?: StringAccessor<Datum[]>;\n /** If an area is smaller than 1px, extend it to have 1px height.\n * This setting is useful when some of the area values are zeros or very small so visually they become\n * practically invisible, but you want to show that the data behind them exists and they're not just empty segments.\n * Default: `
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/area/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { CurveType } from 'types/curve'\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\nexport interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n /** Area color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */\n color?: ColorAccessor<Datum[]>;\n /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */\n curveType?: CurveType | string;\n /** Baseline value or accessor function. Default: `undefined` */\n baseline?: NumericAccessor<Datum>;\n /** Opacity value or accessor function. Default: `1` */\n opacity?: NumericAccessor<Datum[]>;\n /** Optional area cursor. String or accessor function. Default: `null` */\n cursor?: StringAccessor<Datum[]>;\n /** If an area is smaller than 1px, extend it to have 1px height. Default: `false`\n * @deprecated Use minHeight instead\n */\n minHeight1Px?: boolean;\n /** Minimum height of the area, use carefully.\n * This setting is useful when some of the area values are zeros or very small so visually they become\n * practically invisible, but you want to show that the data behind them exists and they're not just empty segments.\n * Default: `undefined` */\n minHeight?: number;\n}\n\nexport const AreaDefaultConfig: AreaConfigInterface<unknown> = {\n ...XYComponentDefaultConfig,\n color: undefined,\n curveType: CurveType.MonotoneX,\n baseline: (): number => 0,\n opacity: 1,\n cursor: null,\n minHeight1Px: false,\n minHeight: undefined,\n}\n"],"names":[],"mappings":";;;AA4Ba,MAAA,iBAAiB,GACzB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,wBAAwB,KAC3B,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,QAAQ,EAAE,MAAc,CAAC,EACzB,OAAO,EAAE,CAAC,EACV,MAAM,EAAE,IAAI,EACZ,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,SAAS;;;;"}
|
package/components/area/index.js
CHANGED
|
@@ -32,10 +32,7 @@ class Area extends XYComponentCore {
|
|
|
32
32
|
this._areaGen = area()
|
|
33
33
|
.x(d => d.x)
|
|
34
34
|
.y0(d => d.y0)
|
|
35
|
-
.y1(d =>
|
|
36
|
-
const isSmallerThanPixel = Math.abs(d.y1 - d.y0) < 1;
|
|
37
|
-
return d.y1 - ((isSmallerThanPixel && config.minHeight1Px) ? 1 : 0);
|
|
38
|
-
})
|
|
35
|
+
.y1(d => d.y1)
|
|
39
36
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
40
37
|
// @ts-ignore
|
|
41
38
|
.curve(curveGen);
|
|
@@ -43,11 +40,30 @@ class Area extends XYComponentCore {
|
|
|
43
40
|
const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)));
|
|
44
41
|
const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative);
|
|
45
42
|
this._prevNegative = stacked.map(s => !!s.isMostlyNegative);
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
x
|
|
50
|
-
|
|
43
|
+
const minHeightCumulativeArray = [];
|
|
44
|
+
const stackedData = stacked.map(arr => arr.map((d, j) => {
|
|
45
|
+
var _a, _b;
|
|
46
|
+
const x = areaDataX[j];
|
|
47
|
+
const y0 = this.yScale(d[0]);
|
|
48
|
+
const y1 = this.yScale(d[1]);
|
|
49
|
+
const isNegativeArea = y1 > y0;
|
|
50
|
+
// Get cumulative adjustment and apply in the correct direction
|
|
51
|
+
const cumulative = minHeightCumulativeArray[j] || 0;
|
|
52
|
+
const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative;
|
|
53
|
+
const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative;
|
|
54
|
+
// Calculate height adjustment if needed
|
|
55
|
+
let heightAdjustment = 0;
|
|
56
|
+
if ((config.minHeight || config.minHeight1Px) &&
|
|
57
|
+
Math.abs(adjustedY1 - adjustedY0) < ((_a = config.minHeight) !== null && _a !== void 0 ? _a : 1)) {
|
|
58
|
+
heightAdjustment = ((_b = config.minHeight) !== null && _b !== void 0 ? _b : 1) - Math.abs(adjustedY1 - adjustedY0);
|
|
59
|
+
minHeightCumulativeArray[j] = cumulative + heightAdjustment;
|
|
60
|
+
}
|
|
61
|
+
return {
|
|
62
|
+
x,
|
|
63
|
+
y0: adjustedY0,
|
|
64
|
+
y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,
|
|
65
|
+
};
|
|
66
|
+
}));
|
|
51
67
|
// We reverse the data in order to have the first areas to be displayed on top
|
|
52
68
|
// for better visibility when they're close to zero
|
|
53
69
|
const areaMaxIdx = stackedData.length - 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n static selectors = s\n protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n public config: AreaConfigInterface<Datum> = this._defaultConfig\n public stacked = true\n private _areaGen: AreaInterface<AreaDatum>\n private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n events = {\n [Area.selectors.area]: {},\n }\n\n constructor (config?: AreaConfigInterface<Datum>) {\n super()\n if (config) this.setConfig(config)\n\n // Determine if the provided chart should be stacked\n this.stacked = Array.isArray(this.config.y)\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, datamodel: { data } } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n const curveGen = Curve[config.curveType as CurveType]\n this._areaGen = area<AreaDatum>()\n .x(d => d.x)\n .y0(d => d.y0)\n .y1(d => {\n const isSmallerThanPixel = Math.abs(d.y1 - d.y0) < 1\n return d.y1 - ((isSmallerThanPixel && config.minHeight1Px) ? 1 : 0)\n })\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n .curve(curveGen)\n\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n const stackedData: AreaDatum[][] = stacked.map(\n arr => arr.map(\n (d, j) => ({\n y0: this.yScale(d[0]),\n y1: this.yScale(d[1]),\n x: areaDataX[j],\n })\n )\n )\n\n // We reverse the data in order to have the first areas to be displayed on top\n // for better visibility when they're close to zero\n const areaMaxIdx = stackedData.length - 1\n const stackedDataReversed = stackedData.reverse()\n const areas = this.g\n .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n .data(stackedDataReversed)\n\n const areasEnter = areas.enter().append('path')\n .attr('class', s.area)\n .attr('d', d => this._areaGen(d) || this._emptyPath())\n .style('opacity', 0)\n .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n .style('opacity', (d, i) => {\n const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n })\n .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n if (duration) {\n const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n transition.attrTween('d', (d, i, el) => {\n const previous = select(el[i]).attr('d')\n const next = this._areaGen(d) || this._emptyPath()\n return interpolatePath(previous, next)\n })\n } else {\n areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n }\n\n smartTransition(areas.exit(), duration)\n .style('opacity', 0)\n .remove()\n }\n\n getYDataExtent (scaleByVisibleData: boolean): number[] {\n const { config, datamodel } = this\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n return getStackedExtent(data, config.baseline, ...yAccessors)\n }\n\n _emptyPath (): string {\n const xRange = this.xScale.range()\n const yDomain = this.yScale.domain() as number[]\n\n const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n const y1 = y0\n\n return this._areaGen([\n { y0, y1, x: xRange[0] },\n { y0, y1, x: xRange[1] },\n ])\n }\n}\n"],"names":["s.area","s"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n static selectors = s\n protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n public config: AreaConfigInterface<Datum> = this._defaultConfig\n public stacked = true\n private _areaGen: AreaInterface<AreaDatum>\n private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n events = {\n [Area.selectors.area]: {},\n }\n\n constructor (config?: AreaConfigInterface<Datum>) {\n super()\n if (config) this.setConfig(config)\n\n // Determine if the provided chart should be stacked\n this.stacked = Array.isArray(this.config.y)\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, datamodel: { data } } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n const curveGen = Curve[config.curveType as CurveType]\n this._areaGen = area<AreaDatum>()\n .x(d => d.x)\n .y0(d => d.y0)\n .y1(d => d.y1)\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n .curve(curveGen)\n\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n const minHeightCumulativeArray: number[] = []\n const stackedData: AreaDatum[][] = stacked.map(\n arr => arr.map(\n (d, j) => {\n const x = areaDataX[j]\n const y0 = this.yScale(d[0])\n const y1 = this.yScale(d[1])\n const isNegativeArea = y1 > y0\n\n // Get cumulative adjustment and apply in the correct direction\n const cumulative = minHeightCumulativeArray[j] || 0\n const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n // Calculate height adjustment if needed\n let heightAdjustment = 0\n if ((config.minHeight || config.minHeight1Px) &&\n Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n minHeightCumulativeArray[j] = cumulative + heightAdjustment\n }\n\n return {\n x,\n y0: adjustedY0,\n y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n }\n }\n )\n )\n\n // We reverse the data in order to have the first areas to be displayed on top\n // for better visibility when they're close to zero\n const areaMaxIdx = stackedData.length - 1\n const stackedDataReversed = stackedData.reverse()\n const areas = this.g\n .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n .data(stackedDataReversed)\n\n const areasEnter = areas.enter().append('path')\n .attr('class', s.area)\n .attr('d', d => this._areaGen(d) || this._emptyPath())\n .style('opacity', 0)\n .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n .style('opacity', (d, i) => {\n const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n })\n .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n if (duration) {\n const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n transition.attrTween('d', (d, i, el) => {\n const previous = select(el[i]).attr('d')\n const next = this._areaGen(d) || this._emptyPath()\n return interpolatePath(previous, next)\n })\n } else {\n areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n }\n\n smartTransition(areas.exit(), duration)\n .style('opacity', 0)\n .remove()\n }\n\n getYDataExtent (scaleByVisibleData: boolean): number[] {\n const { config, datamodel } = this\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n return getStackedExtent(data, config.baseline, ...yAccessors)\n }\n\n _emptyPath (): string {\n const xRange = this.xScale.range()\n const yDomain = this.yScale.domain() as number[]\n\n const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n const y1 = y0\n\n return this._areaGen([\n { y0, y1, x: xRange[0] },\n { y0, y1, x: xRange[1] },\n ])\n }\n}\n"],"names":["s.area","s"],"mappings":"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"}
|
|
@@ -94,7 +94,8 @@ class ChordDiagram extends ComponentCore {
|
|
|
94
94
|
this._layoutData();
|
|
95
95
|
}
|
|
96
96
|
_layoutData() {
|
|
97
|
-
const { nodes
|
|
97
|
+
const { nodes } = this.datamodel;
|
|
98
|
+
let { links } = this.datamodel;
|
|
98
99
|
const { padAngle, linkValue, nodeLevels } = this.config;
|
|
99
100
|
nodes.forEach(n => { delete n._state.value; });
|
|
100
101
|
links.forEach(l => {
|
|
@@ -103,6 +104,7 @@ class ChordDiagram extends ComponentCore {
|
|
|
103
104
|
l.source._state.value = (l.source._state.value || 0) + getNumber(l, linkValue);
|
|
104
105
|
l.target._state.value = (l.target._state.value || 0) + getNumber(l, linkValue);
|
|
105
106
|
});
|
|
107
|
+
links = links.filter(d => d._state.value);
|
|
106
108
|
const root = getHierarchyNodes(nodes, d => { var _a; return (_a = d._state) === null || _a === void 0 ? void 0 : _a.value; }, nodeLevels);
|
|
107
109
|
const partitionData = partition().size([this.config.angleRange[1], 1])(root);
|
|
108
110
|
partitionData.each((n, i) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/chord-diagram/index.ts"],"sourcesContent":["import { max } from 'd3-array'\nimport { partition } from 'd3-hierarchy'\nimport { Selection } from 'd3-selection'\nimport { scalePow, ScalePower } from 'd3-scale'\nimport { arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { GraphData, GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { getNumber, isNumber, getString, getValue } from 'utils/data'\nimport { estimateStringPixelLength } from 'utils/text'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordDiagramData, ChordNode, ChordRibbon, ChordLabelAlignment, ChordLeafNode } from './types'\n\n// Config\nimport { ChordDiagramDefaultConfig, ChordDiagramConfigInterface } from './config'\n\n// Modules\nimport { createNode, updateNode, removeNode } from './modules/node'\nimport { createLabel, updateLabel, removeLabel, LABEL_PADDING } from './modules/label'\nimport { getHierarchyNodes, getRibbons, positionChildren } from './modules/layout'\nimport { createLink, updateLink, removeLink } from './modules/link'\n\n// Styles\nimport * as s from './style'\n\nexport class ChordDiagram<\n N extends ChordInputNode,\n L extends ChordInputLink,\n> extends ComponentCore<\n ChordDiagramData<N, L>,\n ChordDiagramConfigInterface<N, L>\n > {\n static selectors = s\n protected _defaultConfig = ChordDiagramDefaultConfig as ChordDiagramConfigInterface<N, L>\n public config: ChordDiagramConfigInterface<N, L> = this._defaultConfig\n datamodel: GraphDataModel<N, L> = new GraphDataModel()\n\n background: Selection<SVGRectElement, unknown, SVGGElement, unknown>\n nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n\n arcGen = arc<ChordNode<N>>()\n radiusScale: ScalePower<number, number> = scalePow()\n\n events = {\n [ChordDiagram.selectors.node]: {\n mouseover: this._onNodeMouseOver.bind(this),\n mouseout: this._onNodeMouseOut.bind(this),\n },\n [ChordDiagram.selectors.link]: {\n mouseover: this._onLinkMouseOver.bind(this),\n mouseout: this._onLinkMouseOut.bind(this),\n },\n [ChordDiagram.selectors.label]: {\n mouseover: this._onNodeMouseOver.bind(this),\n mouseout: this._onNodeMouseOut.bind(this),\n },\n }\n\n private _nodes: ChordNode<N>[] = []\n private _links: ChordRibbon<N>[] = []\n private _rootNode: ChordNode<N>\n\n private get _forceHighlight (): boolean {\n return this.config.highlightedNodeId !== undefined || this.config.highlightedLinkIds?.length > 0\n }\n\n constructor (config?: ChordDiagramConfigInterface<N, L>) {\n super()\n if (config) this.setConfig(config)\n\n this.background = this.g.append('rect').attr('class', s.background)\n this.linkGroup = this.g.append('g').attr('class', s.links)\n this.nodeGroup = this.g.append('g').attr('class', s.nodes)\n this.labelGroup = this.g.append('g').attr('class', s.labels)\n }\n\n get bleed (): Spacing {\n const { config } = this\n const padding = LABEL_PADDING * 2\n let top = 0; let bottom = 0; let right = 0; let left = 0\n this._nodes.forEach(n => {\n const nodeLabelAlignment = getValue(n.data, config.nodeLabelAlignment)\n if (n.height === 0 && nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n const label = getString(n.data as N, config.nodeLabel) ?? ''\n const fontSize = getCSSVariableValueInPixels('var(--vis-chord-diagram-label-text-font-size)', this.element)\n const labelWidth = estimateStringPixelLength(label, fontSize)\n\n const [x, y] = this.arcGen.centroid(n)\n\n if (x < 0) left = Math.max(left, labelWidth)\n else right = Math.max(right, labelWidth)\n\n if (y < 0) top = Math.max(top, labelWidth)\n else bottom = Math.max(bottom, labelWidth)\n }\n })\n left += padding\n right += padding\n bottom += padding\n top += padding\n return { top, bottom, left, right }\n }\n\n setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n super.setSize(width, height, containerWidth, containerHeight)\n\n // Setting radius for initial bleed calculation. This ensures the correct radius is set when render is called\n this.radiusScale\n .exponent(this.config.radiusScaleExponent)\n .range([0, Math.min(width, height) / 2])\n }\n\n setData (data: GraphData<N, L>): void {\n super.setData(data)\n this._layoutData()\n }\n\n _layoutData (): void {\n const { nodes, links } = this.datamodel\n const { padAngle, linkValue, nodeLevels } = this.config\n nodes.forEach(n => { delete n._state.value })\n links.forEach(l => {\n delete l._state.points\n l._state.value = getNumber(l, linkValue)\n l.source._state.value = (l.source._state.value || 0) + getNumber(l, linkValue)\n l.target._state.value = (l.target._state.value || 0) + getNumber(l, linkValue)\n })\n\n const root = getHierarchyNodes(nodes, d => d._state?.value, nodeLevels)\n\n const partitionData = partition().size([this.config.angleRange[1], 1])(root) as ChordNode<N>\n partitionData.each((n, i) => {\n positionChildren(n, padAngle)\n n.uid = `${this.uid.substr(0, 4)}-${i}`\n n.x0 = Number.isNaN(n.x0) ? 0 : n.x0\n n.x1 = Number.isNaN(n.x1) ? 0 : n.x1\n n._state = {}\n })\n\n const partitionDataWithRoot = partitionData.descendants()\n this._rootNode = partitionDataWithRoot.find(d => d.depth === 0)\n this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0) // Filter out the root node\n this._links = getRibbons<N>(partitionData, links, padAngle)\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, bleed } = this\n\n this._layoutData()\n const duration = isNumber(customDuration) ? customDuration : config.duration\n const size = Math.min(this._width, this._height)\n const radius = size / 2 - max([bleed.top, bleed.bottom, bleed.left, bleed.right])\n\n const numLevels = 1 + config.nodeLevels?.length\n const maxSpace = config.nodeWidth * numLevels\n const nodeWidth = radius > maxSpace ? config.nodeWidth : Math.max(radius / numLevels, 0)\n\n this.radiusScale.range([0, Math.max(radius, 0)])\n\n this.arcGen\n .startAngle(d => d.x0 + config.padAngle / 2 - (d.value ? 0 : Math.PI / 360))\n .endAngle(d => d.x1 - config.padAngle / 2 + (d.value ? 0 : Math.PI / 360))\n .cornerRadius(d => getNumber(d.data, config.cornerRadius))\n .innerRadius(d => Math.max(this.radiusScale(d.y1) - nodeWidth, 0))\n .outerRadius(d => this.radiusScale(d.y1))\n\n this.g.classed(s.transparent, this._forceHighlight)\n this.background\n .attr('width', this._width)\n .attr('height', this._height)\n .style('opacity', 0)\n\n // Center the view\n this.nodeGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n this.labelGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n this.linkGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n // Links\n const linksSelection = this.linkGroup\n .selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n .data(this._links, d => String(d.data._id))\n\n const linksEnter = linksSelection.enter().append('path')\n .attr('class', s.link)\n .call(createLink, this.radiusScale)\n\n const linksMerged = linksSelection\n .merge(linksEnter)\n .classed(s.highlightedLink, l => {\n const linkId = l.data.id ?? l.data._indexGlobal\n return config.highlightedLinkIds?.includes(linkId)\n })\n linksMerged.call(updateLink, config, this.radiusScale, duration)\n\n linksSelection.exit()\n .call(removeLink, duration)\n\n // Nodes\n const nodesSelection = this.nodeGroup\n .selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n .data(this._nodes, d => String(d.uid))\n\n const nodesEnter = nodesSelection.enter().append('path')\n .attr('class', s.node)\n .call(createNode, config)\n\n const nodesMerged = nodesSelection\n .merge(nodesEnter)\n .classed(s.highlightedNode, d => config.highlightedNodeId === d.data._id)\n nodesMerged.call(updateNode, config, this.arcGen, duration, this.bleed)\n\n nodesSelection.exit()\n .call(removeNode, duration)\n\n // Labels\n const labelWidth = size - radius\n const labels = this.labelGroup\n .selectAll<SVGGElement, ChordNode<N>>(`.${s.label}`)\n .data(this._nodes, d => String(d.uid))\n\n const labelEnter = labels.enter().append('g')\n .attr('class', s.label)\n .call(createLabel, config, this.radiusScale)\n\n const labelsMerged = labels.merge(labelEnter)\n labelsMerged.call(updateLabel, config, labelWidth, this.radiusScale, duration)\n\n labels.exit()\n .attr('class', s.labelExit)\n .call(removeLabel, duration)\n }\n\n private _onNodeMouseOver (d: ChordNode<N>): void {\n let ribbons: ChordRibbon<N>[]\n if (d.children) {\n const leaves = d.leaves() as ChordLeafNode<N>[]\n ribbons = this._links.filter(l =>\n leaves.find(leaf => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n )\n } else {\n const leaf = d as ChordLeafNode<N>\n ribbons = this._links.filter(l => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n }\n\n // Nodes without links should still be highlighted\n if (!ribbons.length) d._state.hovered = true\n this._highlightOnHover(ribbons)\n }\n\n private _onNodeMouseOut (): void {\n this._highlightOnHover()\n }\n\n private _onLinkMouseOver (d: ChordRibbon<N>): void {\n this._highlightOnHover([d])\n }\n\n private _onLinkMouseOut (): void {\n this._highlightOnHover()\n }\n\n private _highlightOnHover (links?: ChordRibbon<N>[]): void {\n if (this._forceHighlight) return\n if (links) {\n links.forEach(l => {\n l._state.hovered = true\n const sourcePath = (l.source as ChordNode<N>).path(this._rootNode)\n const targetPath = (l.target as ChordNode<N>).path(this._rootNode)\n sourcePath.forEach(n => { if (n.depth) n._state.hovered = true })\n targetPath.forEach(n => { if (n.depth) n._state.hovered = true })\n })\n } else {\n this._nodes.forEach(n => { delete n._state.hovered })\n this._links.forEach(l => { delete l._state.hovered })\n }\n\n this.nodeGroup.selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n .classed(s.highlightedNode, d => d._state.hovered)\n this.linkGroup.selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n .classed(s.highlightedLink, d => d._state.hovered)\n\n this.g.classed(s.transparent, !!links)\n }\n}\n"],"names":["s.background","s.links","s.nodes","s.labels","s.transparent","s.link","s.highlightedLink","s.node","s.highlightedNode","s.label","s.labelExit","s"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/chord-diagram/index.ts"],"sourcesContent":["import { max } from 'd3-array'\nimport { partition } from 'd3-hierarchy'\nimport { Selection } from 'd3-selection'\nimport { scalePow, ScalePower } from 'd3-scale'\nimport { arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { GraphData, GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { getNumber, isNumber, getString, getValue } from 'utils/data'\nimport { estimateStringPixelLength } from 'utils/text'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordDiagramData, ChordNode, ChordRibbon, ChordLabelAlignment, ChordLeafNode } from './types'\n\n// Config\nimport { ChordDiagramDefaultConfig, ChordDiagramConfigInterface } from './config'\n\n// Modules\nimport { createNode, updateNode, removeNode } from './modules/node'\nimport { createLabel, updateLabel, removeLabel, LABEL_PADDING } from './modules/label'\nimport { getHierarchyNodes, getRibbons, positionChildren } from './modules/layout'\nimport { createLink, updateLink, removeLink } from './modules/link'\n\n// Styles\nimport * as s from './style'\n\nexport class ChordDiagram<\n N extends ChordInputNode,\n L extends ChordInputLink,\n> extends ComponentCore<\n ChordDiagramData<N, L>,\n ChordDiagramConfigInterface<N, L>\n > {\n static selectors = s\n protected _defaultConfig = ChordDiagramDefaultConfig as ChordDiagramConfigInterface<N, L>\n public config: ChordDiagramConfigInterface<N, L> = this._defaultConfig\n datamodel: GraphDataModel<N, L> = new GraphDataModel()\n\n background: Selection<SVGRectElement, unknown, SVGGElement, unknown>\n nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n\n arcGen = arc<ChordNode<N>>()\n radiusScale: ScalePower<number, number> = scalePow()\n\n events = {\n [ChordDiagram.selectors.node]: {\n mouseover: this._onNodeMouseOver.bind(this),\n mouseout: this._onNodeMouseOut.bind(this),\n },\n [ChordDiagram.selectors.link]: {\n mouseover: this._onLinkMouseOver.bind(this),\n mouseout: this._onLinkMouseOut.bind(this),\n },\n [ChordDiagram.selectors.label]: {\n mouseover: this._onNodeMouseOver.bind(this),\n mouseout: this._onNodeMouseOut.bind(this),\n },\n }\n\n private _nodes: ChordNode<N>[] = []\n private _links: ChordRibbon<N>[] = []\n private _rootNode: ChordNode<N>\n\n private get _forceHighlight (): boolean {\n return this.config.highlightedNodeId !== undefined || this.config.highlightedLinkIds?.length > 0\n }\n\n constructor (config?: ChordDiagramConfigInterface<N, L>) {\n super()\n if (config) this.setConfig(config)\n\n this.background = this.g.append('rect').attr('class', s.background)\n this.linkGroup = this.g.append('g').attr('class', s.links)\n this.nodeGroup = this.g.append('g').attr('class', s.nodes)\n this.labelGroup = this.g.append('g').attr('class', s.labels)\n }\n\n get bleed (): Spacing {\n const { config } = this\n const padding = LABEL_PADDING * 2\n let top = 0; let bottom = 0; let right = 0; let left = 0\n this._nodes.forEach(n => {\n const nodeLabelAlignment = getValue(n.data, config.nodeLabelAlignment)\n if (n.height === 0 && nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n const label = getString(n.data as N, config.nodeLabel) ?? ''\n const fontSize = getCSSVariableValueInPixels('var(--vis-chord-diagram-label-text-font-size)', this.element)\n const labelWidth = estimateStringPixelLength(label, fontSize)\n\n const [x, y] = this.arcGen.centroid(n)\n\n if (x < 0) left = Math.max(left, labelWidth)\n else right = Math.max(right, labelWidth)\n\n if (y < 0) top = Math.max(top, labelWidth)\n else bottom = Math.max(bottom, labelWidth)\n }\n })\n left += padding\n right += padding\n bottom += padding\n top += padding\n return { top, bottom, left, right }\n }\n\n setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n super.setSize(width, height, containerWidth, containerHeight)\n\n // Setting radius for initial bleed calculation. This ensures the correct radius is set when render is called\n this.radiusScale\n .exponent(this.config.radiusScaleExponent)\n .range([0, Math.min(width, height) / 2])\n }\n\n setData (data: GraphData<N, L>): void {\n super.setData(data)\n this._layoutData()\n }\n\n _layoutData (): void {\n const { nodes } = this.datamodel\n let { links } = this.datamodel\n const { padAngle, linkValue, nodeLevels } = this.config\n nodes.forEach(n => { delete n._state.value })\n links.forEach(l => {\n delete l._state.points\n l._state.value = getNumber(l, linkValue)\n l.source._state.value = (l.source._state.value || 0) + getNumber(l, linkValue)\n l.target._state.value = (l.target._state.value || 0) + getNumber(l, linkValue)\n })\n\n links = links.filter(d => d._state.value)\n const root = getHierarchyNodes(nodes, d => d._state?.value, nodeLevels)\n\n const partitionData = partition().size([this.config.angleRange[1], 1])(root) as ChordNode<N>\n partitionData.each((n, i) => {\n positionChildren(n, padAngle)\n n.uid = `${this.uid.substr(0, 4)}-${i}`\n n.x0 = Number.isNaN(n.x0) ? 0 : n.x0\n n.x1 = Number.isNaN(n.x1) ? 0 : n.x1\n n._state = {}\n })\n\n const partitionDataWithRoot = partitionData.descendants()\n this._rootNode = partitionDataWithRoot.find(d => d.depth === 0)\n this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0) // Filter out the root node\n this._links = getRibbons<N>(partitionData, links, padAngle)\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, bleed } = this\n\n this._layoutData()\n const duration = isNumber(customDuration) ? customDuration : config.duration\n const size = Math.min(this._width, this._height)\n const radius = size / 2 - max([bleed.top, bleed.bottom, bleed.left, bleed.right])\n\n const numLevels = 1 + config.nodeLevels?.length\n const maxSpace = config.nodeWidth * numLevels\n const nodeWidth = radius > maxSpace ? config.nodeWidth : Math.max(radius / numLevels, 0)\n\n this.radiusScale.range([0, Math.max(radius, 0)])\n\n this.arcGen\n .startAngle(d => d.x0 + config.padAngle / 2 - (d.value ? 0 : Math.PI / 360))\n .endAngle(d => d.x1 - config.padAngle / 2 + (d.value ? 0 : Math.PI / 360))\n .cornerRadius(d => getNumber(d.data, config.cornerRadius))\n .innerRadius(d => Math.max(this.radiusScale(d.y1) - nodeWidth, 0))\n .outerRadius(d => this.radiusScale(d.y1))\n\n this.g.classed(s.transparent, this._forceHighlight)\n this.background\n .attr('width', this._width)\n .attr('height', this._height)\n .style('opacity', 0)\n\n // Center the view\n this.nodeGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n this.labelGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n this.linkGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n // Links\n const linksSelection = this.linkGroup\n .selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n .data(this._links, d => String(d.data._id))\n\n const linksEnter = linksSelection.enter().append('path')\n .attr('class', s.link)\n .call(createLink, this.radiusScale)\n\n const linksMerged = linksSelection\n .merge(linksEnter)\n .classed(s.highlightedLink, l => {\n const linkId = l.data.id ?? l.data._indexGlobal\n return config.highlightedLinkIds?.includes(linkId)\n })\n linksMerged.call(updateLink, config, this.radiusScale, duration)\n\n linksSelection.exit()\n .call(removeLink, duration)\n\n // Nodes\n const nodesSelection = this.nodeGroup\n .selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n .data(this._nodes, d => String(d.uid))\n\n const nodesEnter = nodesSelection.enter().append('path')\n .attr('class', s.node)\n .call(createNode, config)\n\n const nodesMerged = nodesSelection\n .merge(nodesEnter)\n .classed(s.highlightedNode, d => config.highlightedNodeId === d.data._id)\n nodesMerged.call(updateNode, config, this.arcGen, duration, this.bleed)\n\n nodesSelection.exit()\n .call(removeNode, duration)\n\n // Labels\n const labelWidth = size - radius\n const labels = this.labelGroup\n .selectAll<SVGGElement, ChordNode<N>>(`.${s.label}`)\n .data(this._nodes, d => String(d.uid))\n\n const labelEnter = labels.enter().append('g')\n .attr('class', s.label)\n .call(createLabel, config, this.radiusScale)\n\n const labelsMerged = labels.merge(labelEnter)\n labelsMerged.call(updateLabel, config, labelWidth, this.radiusScale, duration)\n\n labels.exit()\n .attr('class', s.labelExit)\n .call(removeLabel, duration)\n }\n\n private _onNodeMouseOver (d: ChordNode<N>): void {\n let ribbons: ChordRibbon<N>[]\n if (d.children) {\n const leaves = d.leaves() as ChordLeafNode<N>[]\n ribbons = this._links.filter(l =>\n leaves.find(leaf => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n )\n } else {\n const leaf = d as ChordLeafNode<N>\n ribbons = this._links.filter(l => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n }\n\n // Nodes without links should still be highlighted\n if (!ribbons.length) d._state.hovered = true\n this._highlightOnHover(ribbons)\n }\n\n private _onNodeMouseOut (): void {\n this._highlightOnHover()\n }\n\n private _onLinkMouseOver (d: ChordRibbon<N>): void {\n this._highlightOnHover([d])\n }\n\n private _onLinkMouseOut (): void {\n this._highlightOnHover()\n }\n\n private _highlightOnHover (links?: ChordRibbon<N>[]): void {\n if (this._forceHighlight) return\n if (links) {\n links.forEach(l => {\n l._state.hovered = true\n const sourcePath = (l.source as ChordNode<N>).path(this._rootNode)\n const targetPath = (l.target as ChordNode<N>).path(this._rootNode)\n sourcePath.forEach(n => { if (n.depth) n._state.hovered = true })\n targetPath.forEach(n => { if (n.depth) n._state.hovered = true })\n })\n } else {\n this._nodes.forEach(n => { delete n._state.hovered })\n this._links.forEach(l => { delete l._state.hovered })\n }\n\n this.nodeGroup.selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n .classed(s.highlightedNode, d => d._state.hovered)\n this.linkGroup.selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n .classed(s.highlightedLink, d => d._state.hovered)\n\n this.g.classed(s.transparent, !!links)\n }\n}\n"],"names":["s.background","s.links","s.nodes","s.labels","s.transparent","s.link","s.highlightedLink","s.node","s.highlightedNode","s.label","s.labelExit","s"],"mappings":"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"}
|
|
@@ -6,9 +6,10 @@ import { ElkShape } from 'elkjs';
|
|
|
6
6
|
import type { GraphDataModel } from "../../data-models/graph";
|
|
7
7
|
import { ComponentConfigInterface } from "../../core/component/config";
|
|
8
8
|
import { TrimMode } from "../../types/text";
|
|
9
|
+
import { Spacing } from "../../types/spacing";
|
|
9
10
|
import { GraphInputLink, GraphInputNode, GraphInputData } from "../../types/graph";
|
|
10
11
|
import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from "../../types/accessor";
|
|
11
|
-
import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape, GraphDagreLayoutSetting, GraphNode, GraphLink, GraphNodeSelectionHighlightMode } from './types';
|
|
12
|
+
import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape, GraphDagreLayoutSetting, GraphNode, GraphLink, GraphNodeSelectionHighlightMode, GraphFitViewAlignment } from './types';
|
|
12
13
|
export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
|
|
13
14
|
/** Zoom level constraints. Default: [0.35, 1.25] */
|
|
14
15
|
zoomScaleExtent?: [number, number];
|
|
@@ -24,6 +25,10 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
|
|
|
24
25
|
disableBrush?: boolean;
|
|
25
26
|
/** Interval to re-render the graph when zooming. Default: `100` */
|
|
26
27
|
zoomThrottledUpdateNodeThreshold?: number;
|
|
28
|
+
/** Padding for the graph when fitting to container. Default: `50` */
|
|
29
|
+
fitViewPadding?: Spacing | number;
|
|
30
|
+
/** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */
|
|
31
|
+
fitViewAlign?: GraphFitViewAlignment;
|
|
27
32
|
/** Type of the graph layout. Default: `GraphLayoutType.Force` */
|
|
28
33
|
layoutType?: GraphLayoutType | string;
|
|
29
34
|
/** Fit the graph to container on data or config updates, or on container resize. Default: `true` */
|
|
@@ -101,10 +106,13 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
|
|
|
101
106
|
linkDisabled?: BooleanAccessor<L>;
|
|
102
107
|
/** Link flow animation accessor function or constant value. Default: `false` */
|
|
103
108
|
linkFlow?: BooleanAccessor<L>;
|
|
104
|
-
/** Animation duration of the flow (traffic) circles.
|
|
105
|
-
|
|
109
|
+
/** Animation duration of the flow (traffic) circles in milliseconds. If `linkFlowParticleSpeed` is provided,
|
|
110
|
+
* this duration will be calculated based on the link length and particle speed. Default: `20000` */
|
|
111
|
+
linkFlowAnimDuration?: NumericAccessor<L>;
|
|
106
112
|
/** Size of the moving particles that represent traffic flow. Default: `2` */
|
|
107
|
-
linkFlowParticleSize?:
|
|
113
|
+
linkFlowParticleSize?: NumericAccessor<L>;
|
|
114
|
+
/** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */
|
|
115
|
+
linkFlowParticleSpeed?: NumericAccessor<L>;
|
|
108
116
|
/** Link label accessor function or constant value. Default: `undefined` */
|
|
109
117
|
linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;
|
|
110
118
|
/** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { isEqual } from '../../utils/data.js';
|
|
2
2
|
import { ComponentDefaultConfig } from '../../core/component/config.js';
|
|
3
3
|
import { TrimMode } from '../../types/text.js';
|
|
4
|
-
import { GraphLayoutType, GraphLinkStyle, GraphNodeShape, GraphNodeSelectionHighlightMode } from './types.js';
|
|
4
|
+
import { GraphLayoutType, GraphFitViewAlignment, GraphLinkStyle, GraphNodeShape, GraphNodeSelectionHighlightMode } from './types.js';
|
|
5
5
|
|
|
6
6
|
// Utils
|
|
7
|
-
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: {
|
|
7
|
+
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, fitViewPadding: 50, fitViewAlign: GraphFitViewAlignment.Center, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
|
|
8
8
|
linkDistance: 60,
|
|
9
9
|
linkStrength: 0.45,
|
|
10
10
|
charge: -500,
|
|
@@ -15,7 +15,7 @@ const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfi
|
|
|
15
15
|
}, dagreLayoutSettings: {
|
|
16
16
|
rankdir: 'BT',
|
|
17
17
|
ranker: 'longest-path',
|
|
18
|
-
}, 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) => {
|
|
18
|
+
}, layoutElkSettings: undefined, layoutElkNodeGroups: undefined, layoutElkGetNodeShape: undefined, linkFlowAnimDuration: 20000, linkFlowParticleSize: 2, linkFlowParticleSpeed: undefined, 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) => {
|
|
19
19
|
return !isEqual(prevData, nextData);
|
|
20
20
|
} });
|
|
21
21
|
|
|
@@ -1 +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'\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\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?: 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 /** 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":"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"}
|
|
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'\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 { Spacing } from 'types/spacing'\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 GraphFitViewAlignment,\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 /** Padding for the graph when fitting to container. Default: `50` */\n fitViewPadding?: Spacing | number;\n /** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */\n fitViewAlign?: GraphFitViewAlignment;\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 in milliseconds. If `linkFlowParticleSpeed` is provided,\n * this duration will be calculated based on the link length and particle speed. Default: `20000` */\n linkFlowAnimDuration?: NumericAccessor<L>;\n /** Size of the moving particles that represent traffic flow. Default: `2` */\n linkFlowParticleSize?: NumericAccessor<L>;\n /** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */\n linkFlowParticleSpeed?: 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 fitViewPadding: 50,\n fitViewAlign: GraphFitViewAlignment.Center,\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 linkFlowParticleSpeed: undefined,\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":"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"}
|
|
@@ -3,7 +3,7 @@ import { ComponentCore } from "../../core/component";
|
|
|
3
3
|
import { GraphDataModel } from "../../data-models/graph";
|
|
4
4
|
import { GraphInputLink, GraphInputNode, GraphInputData } from "../../types/graph";
|
|
5
5
|
import { Spacing } from "../../types/spacing";
|
|
6
|
-
import { GraphNode, GraphLink } from './types';
|
|
6
|
+
import { GraphNode, GraphLink, GraphFitViewAlignment } from './types';
|
|
7
7
|
import { GraphConfigInterface } from './config';
|
|
8
8
|
import * as nodeSelectors from './modules/node/style';
|
|
9
9
|
export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> extends ComponentCore<GraphInputData<N, L>, GraphConfigInterface<N, L>> {
|
|
@@ -124,7 +124,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
|
|
|
124
124
|
zoomOut(increment?: number): void;
|
|
125
125
|
setZoom(zoomLevel: number): void;
|
|
126
126
|
getZoom(): number;
|
|
127
|
-
fitView(duration?: number, nodeIds?: (string | number)[]): void;
|
|
127
|
+
fitView(duration?: number, nodeIds?: (string | number)[], alignment?: GraphFitViewAlignment): void;
|
|
128
128
|
/** Enable automatic fitting to container if it was disabled due to previous zoom / pan interactions */
|
|
129
129
|
resetAutofitState(): void;
|
|
130
130
|
/** Get current coordinates of the nodes as an array of { id: string; x: number; y: number } objects */
|