@unovis/ts 1.0.0-alpha.4

package/components/chord-diagram/config.d.ts

@@ -0,0 +1,42 @@
+import { ComponentConfigInterface, ComponentConfig } from "../../core/component/config";
+import { ColorAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
+import { CurveType } from "../../types/curve";
+import { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNode } from './types';
+export interface ChordDiagramConfigInterface<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfigInterface {
+    /** Link value accessor function. Default: `l => l.value` */
+    linkValue?: NumericAccessor<L>;
+    /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['level1', 'level2']. Default: `[]` */
+    nodeLevels?: string[];
+    /** Node width in pixels. Default: `15` */
+    nodeWidth?: number;
+    /** Node color accessor function ot constant value. Default: `d => d.color` */
+    nodeColor?: ColorAccessor<ChordNode<N>>;
+    /** Node label accessor function. Default: `d => d.label ?? d.key` */
+    nodeLabel?: StringAccessor<N>;
+    /** Node label alignment. Default: `ChordLabelAlignment.Along` */
+    nodeLabelAlignment?: ChordLabelAlignment | string;
+    /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */
+    padAngle?: NumericAccessor<N>;
+    /** Corner radius constant value or accessor function. Default: `2` */
+    cornerRadius?: NumericAccessor<N>;
+    /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */
+    angleRange?: [number, number];
+    /** Curve type. Default: `CurveType.CatmullRom` */
+    curveType?: CurveType;
+    /** The exponent property of the radius scale. Default: `2` */
+    radiusScaleExponent?: number;
+}
+export declare class ChordDiagramConfig<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfig implements ChordDiagramConfigInterface<N, L> {
+    duration: number;
+    linkValue: (d: L) => number;
+    nodeLevels: any[];
+    nodeWidth: number;
+    nodeColor: any;
+    nodeLabel: (d: N) => string;
+    nodeLabelAlignment: ChordLabelAlignment;
+    padAngle: number;
+    cornerRadius: number;
+    angleRange: [number, number];
+    curveType: CurveType;
+    radiusScaleExponent: number;
+}

package/components/chord-diagram/config.js

@@ -0,0 +1,25 @@
+import { ComponentConfig } from '../../core/component/config.js';
+import { CurveType } from '../../types/curve.js';
+import { ChordLabelAlignment } from './types.js';
+
+/* eslint-disable dot-notation */
+class ChordDiagramConfig extends ComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.duration = 800;
+        this.linkValue = (d) => d['value'];
+        this.nodeLevels = [];
+        this.nodeWidth = 15;
+        this.nodeColor = undefined;
+        this.nodeLabel = (d) => { var _a; return (_a = d['label']) !== null && _a !== void 0 ? _a : d['key']; };
+        this.nodeLabelAlignment = ChordLabelAlignment.Along;
+        this.padAngle = 0.02;
+        this.cornerRadius = 2;
+        this.angleRange = [0, 2 * Math.PI];
+        this.curveType = CurveType.CatmullRom;
+        this.radiusScaleExponent = 2;
+    }
+}
+
+export { ChordDiagramConfig };
+//# sourceMappingURL=config.js.map

package/components/chord-diagram/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/chord-diagram/config.ts"],"sourcesContent":["/* eslint-disable dot-notation */\n\n// Core\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { CurveType } from 'types/curve'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNode } from './types'\n\nexport interface ChordDiagramConfigInterface<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfigInterface {\n  /** Link value accessor function. Default: `l => l.value` */\n  linkValue?: NumericAccessor<L>;\n  /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['level1', 'level2']. Default: `[]` */\n  nodeLevels?: string[];\n  /** Node width in pixels. Default: `15` */\n  nodeWidth?: number;\n  /** Node color accessor function ot constant value. Default: `d => d.color` */\n  nodeColor?: ColorAccessor<ChordNode<N>>;\n  /** Node label accessor function. Default: `d => d.label ?? d.key` */\n  nodeLabel?: StringAccessor<N>;\n  /** Node label alignment. Default: `ChordLabelAlignment.Along` */\n  nodeLabelAlignment?: ChordLabelAlignment | string;\n  /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */\n  padAngle?: NumericAccessor<N>;\n  /** Corner radius constant value or accessor function. Default: `2` */\n  cornerRadius?: NumericAccessor<N>;\n  /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */\n  angleRange?: [number, number];\n  /** Curve type. Default: `CurveType.CatmullRom` */\n  curveType?: CurveType;\n  /** The exponent property of the radius scale. Default: `2` */\n  radiusScaleExponent?: number;\n}\n\nexport class ChordDiagramConfig<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfig implements ChordDiagramConfigInterface<N, L> {\n  duration = 800\n  linkValue = (d: L): number => d['value']\n  nodeLevels = []\n  nodeWidth = 15\n  nodeColor = undefined\n  nodeLabel = (d: N): string => d['label'] ?? d['key']\n  nodeLabelAlignment = ChordLabelAlignment.Along\n  padAngle = 0.02\n  cornerRadius = 2\n  angleRange: [number, number] = [0, 2 * Math.PI]\n  curveType = CurveType.CatmullRom\n  radiusScaleExponent = 2\n}\n"],"names":[],"mappings":";;;;AAAA;AAqCM,MAAO,kBAAuE,SAAQ,eAAe,CAAA;AAA3G,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAA;QACd,IAAS,CAAA,SAAA,GAAG,CAAC,CAAI,KAAa,CAAC,CAAC,OAAO,CAAC,CAAA;QACxC,IAAU,CAAA,UAAA,GAAG,EAAE,CAAA;QACf,IAAS,CAAA,SAAA,GAAG,EAAE,CAAA;QACd,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;AACrB,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAAI,KAAY,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,CAAC,mCAAI,CAAC,CAAC,KAAK,CAAC,CAAA,EAAA,CAAA;AACpD,QAAA,IAAA,CAAA,kBAAkB,GAAG,mBAAmB,CAAC,KAAK,CAAA;QAC9C,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAU,CAAA,UAAA,GAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,QAAA,IAAA,CAAA,SAAS,GAAG,SAAS,CAAC,UAAU,CAAA;QAChC,IAAmB,CAAA,mBAAA,GAAG,CAAC,CAAA;KACxB;AAAA;;;;"}

package/components/chord-diagram/index.d.ts

@@ -0,0 +1,52 @@
+import { Selection } from 'd3-selection';
+import { ScalePower } from 'd3-scale';
+import { ComponentCore } from "../../core/component";
+import { GraphDataModel } from "../../data-models/graph";
+import { Spacing } from "../../types/spacing";
+import { ChordInputNode, ChordInputLink, ChordNode, ChordRibbon, ChordRibbonPoint } from './types';
+import { ChordDiagramConfig, ChordDiagramConfigInterface } from './config';
+import * as s from './style';
+export declare class ChordDiagram<N extends ChordInputNode, L extends ChordInputLink> extends ComponentCore<{
+    nodes: N[];
+    links?: L[];
+}> {
+    static selectors: typeof s;
+    config: ChordDiagramConfig<N, L>;
+    datamodel: GraphDataModel<N, L>;
+    nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    arcGen: import("d3-shape").Arc<any, ChordNode<N>>;
+    radiusScale: ScalePower<number, number>;
+    linkAreaGen: import("d3-shape").Area<ChordRibbonPoint>;
+    private _nodes;
+    private _links;
+    private _rootNode;
+    private _hierarchyNodes;
+    events: {
+        [x: string]: {
+            mouseover: (d: ChordNode<N>) => void;
+            mouseout: () => void;
+        } | {
+            mouseover: (d: ChordRibbon<N>) => void;
+            mouseout: () => void;
+        };
+    };
+    constructor(config?: ChordDiagramConfigInterface<N, L>);
+    setData(data: {
+        nodes: N[];
+        links?: L[];
+    }): void;
+    setConfig(config: ChordDiagramConfigInterface<N, L>): void;
+    get bleed(): Spacing;
+    _render(customDuration?: number): void;
+    private _getHierarchyNodes;
+    private _getRibbons;
+    private _convertRadialToCartesian;
+    private _calculateRadialPosition;
+    private _onNodeMouseOver;
+    private _onNodeMouseOut;
+    private _onLinkMouseOver;
+    private _onLinkMouseOut;
+    private _highlightOnHover;
+}

package/components/chord-diagram/index.js

@@ -0,0 +1,280 @@
+import { nest } from 'd3-collection';
+import { hierarchy, partition } from 'd3-hierarchy';
+import { arc, area } from 'd3-shape';
+import { scalePow } from 'd3-scale';
+import { max } from 'd3-array';
+import { ComponentCore } from '../../core/component/index.js';
+import { GraphDataModel } from '../../data-models/graph.js';
+import { isNumber, getNumber, groupBy } from '../../utils/data.js';
+import { Curve } from '../../types/curve.js';
+import { ChordLabelAlignment } from './types.js';
+import { ChordDiagramConfig } from './config.js';
+import { createNode, updateNode, removeNode } from './modules/node.js';
+import { createLabel, updateLabel, removeLabel } from './modules/label.js';
+import { createLink, updateLink, removeLink } from './modules/link.js';
+import * as style from './style.js';
+import { nodes, links, labels, link, node, gLabel, labelExit, hoveredNode, hoveredLink, transparent } from './style.js';
+
+class ChordDiagram extends ComponentCore {
+    constructor(config) {
+        super();
+        this.config = new ChordDiagramConfig();
+        this.datamodel = new GraphDataModel();
+        this.arcGen = arc();
+        this.radiusScale = scalePow();
+        this.linkAreaGen = area();
+        this._nodes = [];
+        this._links = [];
+        this.events = {
+            [ChordDiagram.selectors.node]: {
+                mouseover: this._onNodeMouseOver.bind(this),
+                mouseout: this._onNodeMouseOut.bind(this),
+            },
+            [ChordDiagram.selectors.link]: {
+                mouseover: this._onLinkMouseOver.bind(this),
+                mouseout: this._onLinkMouseOut.bind(this),
+            },
+        };
+        if (config)
+            this.config.init(config);
+        this.linkGroup = this.g.append('g').attr('class', nodes);
+        this.nodeGroup = this.g.append('g').attr('class', links);
+        this.labelGroup = this.g.append('g').attr('class', labels);
+    }
+    setData(data) {
+        this.datamodel.data = data;
+        this._hierarchyNodes = this._getHierarchyNodes();
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        this._hierarchyNodes = this._getHierarchyNodes();
+    }
+    get bleed() {
+        return { top: 4, bottom: 4, left: 4, right: 4 };
+    }
+    _render(customDuration) {
+        var _a, _b;
+        super._render(customDuration);
+        const { config, config: { nodeLabelAlignment, radiusScaleExponent }, radiusScale } = this;
+        const nodes = this._hierarchyNodes;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        this.arcGen
+            .startAngle(d => d.x0)
+            .endAngle(d => d.x1)
+            .cornerRadius(d => getNumber(d, config.cornerRadius))
+            .innerRadius(d => this.radiusScale(d.y1) - getNumber(d, config.nodeWidth))
+            .outerRadius(d => this.radiusScale(d.y1));
+        const curveGen = Curve[config.curveType];
+        if ('alpha' in curveGen)
+            (_b = (_a = curveGen).alpha) === null || _b === void 0 ? void 0 : _b.call(_a, 0.25);
+        this.linkAreaGen
+            .x0(d => d.x0)
+            .x1(d => d.x1)
+            .y0(d => d.y0)
+            .y1(d => d.y1)
+            .curve(curveGen);
+        const hierarchyData = hierarchy(nodes, (d) => d.values);
+        hierarchyData.sum((d) => {
+            var _a;
+            return (_a = d._state) === null || _a === void 0 ? void 0 : _a.value;
+        });
+        let radius = Math.min(this._width, this._height) / 2 - max([this.bleed.top, this.bleed.bottom, this.bleed.left, this.bleed.right]);
+        let labelWidth = nodeLabelAlignment === ChordLabelAlignment.Perpendicular ? radius / (hierarchyData.height + 1) - config.nodeWidth : 0;
+        radius = radius - labelWidth;
+        radiusScale
+            .exponent(radiusScaleExponent)
+            .range([0, radius]);
+        labelWidth -= labelWidth / (hierarchyData.height + 1);
+        const partitionData = partition().size([config.angleRange[1], 1])(hierarchyData);
+        this._calculateRadialPosition(partitionData);
+        const partitionDataWithRoot = partitionData.descendants();
+        this._rootNode = partitionDataWithRoot.find(d => d.depth === 0);
+        this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0); // Filter out the root node
+        this._links = this._getRibbons(partitionData);
+        // Create Node and Link state objects
+        this._nodes.forEach(node => { node._state = {}; });
+        this._links.forEach(link => { link._state = {}; });
+        // Center the view
+        this.g.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
+        // Links
+        const linksSelection = this.linkGroup
+            .selectAll(`.${link}`)
+            .data(this._links);
+        const linksEnter = linksSelection.enter().append('path')
+            .attr('class', link)
+            .call(createLink, this.linkAreaGen);
+        const linksMerged = linksSelection.merge(linksEnter);
+        linksMerged.call(updateLink, this.linkAreaGen, duration);
+        linksSelection.exit()
+            .call(removeLink, duration);
+        // Nodes
+        const nodesSelection = this.nodeGroup
+            .selectAll(`.${node}`)
+            .data(this._nodes);
+        const nodesEnter = nodesSelection.enter().append('path')
+            .attr('class', node)
+            .call(createNode, config);
+        const nodesMerged = nodesSelection.merge(nodesEnter);
+        nodesMerged.call(updateNode, config, this.arcGen, duration);
+        nodesSelection.exit()
+            .call(removeNode, duration);
+        // Labels
+        const labels = this.labelGroup
+            .selectAll(`.${gLabel}`)
+            .data(this._nodes);
+        const labelEnter = labels.enter().append('g')
+            .attr('class', gLabel)
+            .call(createLabel, config, radiusScale);
+        const labelsMerged = labels.merge(labelEnter);
+        labelsMerged.call(updateLabel, config, labelWidth, radiusScale, duration);
+        labels.exit()
+            .attr('class', labelExit)
+            .call(removeLabel, duration);
+    }
+    _getHierarchyNodes() {
+        const { config, datamodel: { nodes, links } } = this;
+        nodes.forEach(n => { delete n._state.value; });
+        links.forEach(l => {
+            delete l._state.points;
+            l.source._state.value = (l.source._state.value || 0) + getNumber(l, config.linkValue);
+            l.target._state.value = (l.target._state.value || 0) + getNumber(l, config.linkValue);
+        });
+        // Todo: replace with d3 group
+        const nestGen = nest();
+        config.nodeLevels.forEach(levelAccessor => {
+            nestGen.key(d => d[levelAccessor]);
+        });
+        return { key: 'root', values: nestGen.entries(nodes) };
+    }
+    _getRibbons(partitionData) {
+        const { config, datamodel: { links } } = this;
+        const findNode = (nodes, id) => nodes.find(n => n.data.id === id);
+        const leafNodes = partitionData.leaves();
+        const groupedBySource = groupBy(links, d => d.source.id);
+        const groupedByTarget = groupBy(links, d => d.target.id);
+        const getNodesInRibbon = (source, target, partitionHeight, nodes = []) => {
+            nodes[source.height] = source;
+            nodes[partitionHeight * 2 - target.height] = target;
+            if (source.parent && target.parent)
+                getNodesInRibbon(source.parent, target.parent, partitionHeight, nodes);
+            return nodes;
+        };
+        const calculatePoints = (links, type, depth) => {
+            links.forEach(link => {
+                var _a;
+                if (!link._state.points)
+                    link._state.points = [];
+                const sourceLeaf = findNode(leafNodes, link.source.id);
+                const targetLeaf = findNode(leafNodes, link.target.id);
+                const nodesInRibbon = getNodesInRibbon(type === 'out' ? sourceLeaf : targetLeaf, type === 'out' ? targetLeaf : sourceLeaf, partitionData.height);
+                const currNode = nodesInRibbon[depth];
+                const len = currNode.x1 - currNode.x0;
+                const x0 = (_a = currNode._prevX1) !== null && _a !== void 0 ? _a : currNode.x0;
+                const x1 = x0 + len * getNumber(link, config.linkValue) / currNode.value;
+                currNode._prevX1 = x1;
+                const converted = this._convertRadialToCartesian(type === 'out' ? x0 : x1, type === 'out' ? x1 : x0, currNode.y1, 0);
+                const pointIdx = type === 'out' ? depth : partitionData.height * 2 - 1 - depth;
+                link._state.points[pointIdx] = { x0: converted.x0, x1: converted.x1, y0: converted.y0, y1: converted.y1 };
+            });
+        };
+        leafNodes.forEach(leafNode => {
+            const outLinks = groupedBySource[leafNode.data.id] || [];
+            const inLinks = groupedByTarget[leafNode.data.id] || [];
+            for (let depth = 0; depth < partitionData.height; depth += 1) {
+                calculatePoints(outLinks, 'out', depth);
+                calculatePoints(inLinks, 'in', depth);
+            }
+        });
+        const ribbons = links.map((l) => {
+            const sourceNode = findNode(leafNodes, l.source.id);
+            const targetNode = findNode(leafNodes, l.target.id);
+            return {
+                source: sourceNode,
+                target: targetNode,
+                points: l._state.points,
+                _state: {},
+            };
+        });
+        return ribbons;
+    }
+    _convertRadialToCartesian(x0, x1, y, nodeWidth) {
+        const r0 = this.radiusScale(y) - nodeWidth / 2;
+        const a0 = x0 - Math.PI / 2;
+        const r1 = this.radiusScale(y) - nodeWidth / 2;
+        const a1 = x1 - Math.PI / 2;
+        return {
+            x0: r0 * Math.cos(a0),
+            x1: r1 * Math.cos(a1),
+            y0: r0 * Math.sin(a0),
+            y1: r1 * Math.sin(a1),
+        };
+    }
+    _calculateRadialPosition(hierarchyNode, scalingCoeff = 0.95, nodePadding = 0.02) {
+        if (!hierarchyNode.children)
+            return;
+        // Calculate x0 and x1
+        const nodeLength = (hierarchyNode.x1 - hierarchyNode.x0);
+        const scaledNodeLength = nodeLength * scalingCoeff;
+        const delta = nodeLength - scaledNodeLength;
+        let x0 = hierarchyNode.x0 + delta / 2;
+        for (const node of hierarchyNode.children) {
+            const childX0 = x0;
+            const childX1 = x0 + (node.value / hierarchyNode.value) * scaledNodeLength - nodePadding / 2;
+            const childNodeLength = childX1 - childX0;
+            const scaledChildNodeLength = childNodeLength * scalingCoeff;
+            const childDelta = childNodeLength - scaledChildNodeLength;
+            node.x0 = childX0 + childDelta / 2;
+            node.x1 = node.x0 + scaledChildNodeLength;
+            x0 = childX1 + nodePadding / 2 + childDelta / 2;
+        }
+        // Go deeper in the hierarchy
+        for (const node of hierarchyNode.children) {
+            this._calculateRadialPosition(node, scalingCoeff, nodePadding);
+        }
+    }
+    _onNodeMouseOver(d) {
+        let ribbons;
+        if (d.children) {
+            const leaves = d.leaves();
+            ribbons = this._links.filter(l => leaves.find(leaf => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id));
+        }
+        else {
+            const leaf = d;
+            ribbons = this._links.filter(l => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id);
+        }
+        this._highlightOnHover(ribbons);
+    }
+    _onNodeMouseOut() {
+        this._highlightOnHover();
+    }
+    _onLinkMouseOver(d) {
+        this._highlightOnHover([d]);
+    }
+    _onLinkMouseOut() {
+        this._highlightOnHover();
+    }
+    _highlightOnHover(links) {
+        if (links) {
+            links.forEach(l => {
+                l._state.hovered = true;
+                const sourcePath = l.source.path(this._rootNode);
+                const targetPath = l.target.path(this._rootNode);
+                sourcePath.forEach(n => { if (n.depth)
+                    n._state.hovered = true; });
+                targetPath.forEach(n => { if (n.depth)
+                    n._state.hovered = true; });
+            });
+        }
+        else {
+            this._nodes.forEach(n => { delete n._state.hovered; });
+            this._links.forEach(l => { delete l._state.hovered; });
+        }
+        this.nodeGroup.selectAll(`.${node}`).classed(hoveredNode, (d) => d._state.hovered);
+        this.linkGroup.selectAll(`.${link}`).classed(hoveredLink, (d) => d._state.hovered);
+        this.g.classed(transparent, !!links);
+    }
+}
+ChordDiagram.selectors = style;
+
+export { ChordDiagram };
+//# sourceMappingURL=index.js.map

package/components/chord-diagram/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/chord-diagram/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { nest } from 'd3-collection'\nimport { hierarchy, partition } from 'd3-hierarchy'\nimport { arc, area, CurveCatmullRomFactory, CurveFactory } from 'd3-shape'\nimport { scalePow, ScalePower } from 'd3-scale'\nimport { max } from 'd3-array'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { getNumber, isNumber, groupBy } from 'utils/data'\n\n// Types\nimport { GraphNodeCore } from 'types/graph'\nimport { Spacing } from 'types/spacing'\nimport { Curve } from 'types/curve'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordHierarchy, ChordNode, ChordRibbon, ChordLabelAlignment, ChordLeafNode, ChordRibbonPoint } from './types'\n\n// Config\nimport { ChordDiagramConfig, ChordDiagramConfigInterface } from './config'\n\n// Modules\nimport { createNode, updateNode, removeNode } from './modules/node'\nimport { createLabel, updateLabel, removeLabel } from './modules/label'\nimport { createLink, updateLink, removeLink } from './modules/link'\n\n// Styles\nimport * as s from './style'\n\nexport class ChordDiagram<N extends ChordInputNode, L extends ChordInputLink> extends ComponentCore<{ nodes: N[]; links?: L[] }> {\n  static selectors = s\n  config: ChordDiagramConfig<N, L> = new ChordDiagramConfig()\n  datamodel: GraphDataModel<N, L> = new GraphDataModel()\n\n  nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  arcGen = arc<ChordNode<N>>()\n  radiusScale: ScalePower<number, number> = scalePow()\n  linkAreaGen = area<ChordRibbonPoint>()\n  private _nodes: ChordNode<N>[] = []\n  private _links: ChordRibbon<N>[] = []\n  private _rootNode: ChordNode<N>\n  private _hierarchyNodes: ChordHierarchy<GraphNodeCore<N, L>>\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  }\n\n  constructor (config?: ChordDiagramConfigInterface<N, L>) {\n    super()\n    if (config) this.config.init(config)\n    this.linkGroup = this.g.append('g').attr('class', s.nodes)\n    this.nodeGroup = this.g.append('g').attr('class', s.links)\n    this.labelGroup = this.g.append('g').attr('class', s.labels)\n  }\n\n  setData (data: { nodes: N[]; links?: L[] }): void {\n    this.datamodel.data = data\n    this._hierarchyNodes = this._getHierarchyNodes()\n  }\n\n  setConfig (config: ChordDiagramConfigInterface<N, L>): void {\n    super.setConfig(config)\n    this._hierarchyNodes = this._getHierarchyNodes()\n  }\n\n  get bleed (): Spacing {\n    return { top: 4, bottom: 4, left: 4, right: 4 }\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, config: { nodeLabelAlignment, radiusScaleExponent }, radiusScale } = this\n    const nodes = this._hierarchyNodes\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    this.arcGen\n      .startAngle(d => d.x0)\n      .endAngle(d => d.x1)\n      .cornerRadius(d => getNumber(d, config.cornerRadius))\n      .innerRadius(d => this.radiusScale(d.y1) - getNumber(d, config.nodeWidth))\n      .outerRadius(d => this.radiusScale(d.y1))\n\n    const curveGen = Curve[config.curveType]\n    if ('alpha' in curveGen) (curveGen as CurveCatmullRomFactory).alpha?.(0.25)\n    this.linkAreaGen\n      .x0(d => d.x0)\n      .x1(d => d.x1)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\n      .curve(curveGen as CurveFactory)\n\n    const hierarchyData = hierarchy(nodes, (d: ChordHierarchy<GraphNodeCore<N, L>>) => d.values)\n    hierarchyData.sum((d) => {\n      return (d as GraphNodeCore<N, L>)._state?.value\n    })\n\n    let radius = Math.min(this._width, this._height) / 2 - max([this.bleed.top, this.bleed.bottom, this.bleed.left, this.bleed.right])\n    let labelWidth = nodeLabelAlignment === ChordLabelAlignment.Perpendicular ? radius / (hierarchyData.height + 1) - config.nodeWidth : 0\n    radius = radius - labelWidth\n    radiusScale\n      .exponent(radiusScaleExponent)\n      .range([0, radius])\n    labelWidth -= labelWidth / (hierarchyData.height + 1)\n\n    const partitionData = partition<N | ChordHierarchy<GraphNodeCore<N, L>>>().size([config.angleRange[1], 1])(hierarchyData) as ChordNode<N>\n    this._calculateRadialPosition(partitionData)\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 = this._getRibbons(partitionData)\n\n    // Create Node and Link state objects\n    this._nodes.forEach(node => { node._state = {} })\n    this._links.forEach(link => { link._state = {} })\n\n    // Center the view\n    this.g.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    // Links\n    const linksSelection = this.linkGroup\n      .selectAll(`.${s.link}`)\n      .data(this._links)\n\n    const linksEnter = linksSelection.enter().append('path')\n      .attr('class', s.link)\n      .call(createLink, this.linkAreaGen)\n\n    const linksMerged = linksSelection.merge(linksEnter)\n    linksMerged.call(updateLink, this.linkAreaGen, duration)\n\n    linksSelection.exit()\n      .call(removeLink, duration)\n\n    // Nodes\n    const nodesSelection = this.nodeGroup\n      .selectAll(`.${s.node}`)\n      .data(this._nodes)\n\n    const nodesEnter = nodesSelection.enter().append('path')\n      .attr('class', s.node)\n      .call(createNode, config)\n\n    const nodesMerged = nodesSelection.merge(nodesEnter)\n    nodesMerged.call(updateNode, config, this.arcGen, duration)\n\n    nodesSelection.exit()\n      .call(removeNode, duration)\n\n    // Labels\n    const labels = this.labelGroup\n      .selectAll(`.${s.gLabel}`)\n      .data(this._nodes)\n\n    const labelEnter = labels.enter().append('g')\n      .attr('class', s.gLabel)\n      .call(createLabel, config, radiusScale)\n\n    const labelsMerged = labels.merge(labelEnter)\n    labelsMerged.call(updateLabel, config, labelWidth, radiusScale, duration)\n\n    labels.exit()\n      .attr('class', s.labelExit)\n      .call(removeLabel, duration)\n  }\n\n  private _getHierarchyNodes (): ChordHierarchy<GraphNodeCore<N, L>> {\n    const { config, datamodel: { nodes, links } } = this\n    nodes.forEach(n => { delete n._state.value })\n    links.forEach(l => {\n      delete l._state.points\n      l.source._state.value = (l.source._state.value || 0) + getNumber(l, config.linkValue)\n      l.target._state.value = (l.target._state.value || 0) + getNumber(l, config.linkValue)\n    })\n\n    // Todo: replace with d3 group\n    const nestGen = nest<N>()\n    config.nodeLevels.forEach(levelAccessor => {\n      nestGen.key(d => d[levelAccessor])\n    })\n\n    return { key: 'root', values: nestGen.entries(nodes) }\n  }\n\n  private _getRibbons (partitionData: ChordNode<N>): ChordRibbon<N>[] {\n    const { config, datamodel: { links } } = this\n    const findNode = (\n      nodes: ChordLeafNode<N>[],\n      id: string\n    ): ChordLeafNode<N> => nodes.find(n => n.data.id === id)\n    const leafNodes = partitionData.leaves() as ChordLeafNode<N>[]\n\n    type LinksArrayType = typeof links\n    const groupedBySource: Record<string, LinksArrayType> = groupBy(links, d => d.source.id)\n    const groupedByTarget: Record<string, LinksArrayType> = groupBy(links, d => d.target.id)\n\n    const getNodesInRibbon = (\n      source: ChordLeafNode<N>,\n      target: ChordLeafNode<N>,\n      partitionHeight: number,\n      nodes: ChordLeafNode<N>[] = []\n    ): ChordNode<N>[] => {\n      nodes[source.height] = source\n      nodes[partitionHeight * 2 - target.height] = target\n      if (source.parent && target.parent) getNodesInRibbon(source.parent, target.parent, partitionHeight, nodes)\n      return nodes\n    }\n\n    const calculatePoints = (\n      links: LinksArrayType,\n      type: 'in' | 'out',\n      depth: number\n    ): void => {\n      links.forEach(link => {\n        if (!link._state.points) link._state.points = []\n        const sourceLeaf = findNode(leafNodes, link.source.id)\n        const targetLeaf = findNode(leafNodes, link.target.id)\n        const nodesInRibbon = getNodesInRibbon(\n          type === 'out' ? sourceLeaf : targetLeaf,\n          type === 'out' ? targetLeaf : sourceLeaf,\n          partitionData.height)\n        const currNode = nodesInRibbon[depth]\n        const len = currNode.x1 - currNode.x0\n        const x0 = currNode._prevX1 ?? currNode.x0\n        const x1 = x0 + len * getNumber(link, config.linkValue) / currNode.value\n        currNode._prevX1 = x1\n\n        const converted = this._convertRadialToCartesian(\n          type === 'out' ? x0 : x1,\n          type === 'out' ? x1 : x0,\n          currNode.y1, 0)\n        const pointIdx = type === 'out' ? depth : partitionData.height * 2 - 1 - depth\n        link._state.points[pointIdx] = { x0: converted.x0, x1: converted.x1, y0: converted.y0, y1: converted.y1 }\n      })\n    }\n\n    leafNodes.forEach(leafNode => {\n      const outLinks = groupedBySource[leafNode.data.id] || []\n      const inLinks = groupedByTarget[leafNode.data.id] || []\n      for (let depth = 0; depth < partitionData.height; depth += 1) {\n        calculatePoints(outLinks, 'out', depth)\n        calculatePoints(inLinks, 'in', depth)\n      }\n    })\n\n    const ribbons = links.map((l) => {\n      const sourceNode = findNode(leafNodes, l.source.id)\n      const targetNode = findNode(leafNodes, l.target.id)\n\n      return {\n        source: sourceNode,\n        target: targetNode,\n        points: l._state.points,\n        _state: {},\n      }\n    })\n\n    return ribbons\n  }\n\n  private _convertRadialToCartesian (x0: number, x1: number, y: number, nodeWidth: number): { x0: number; x1: number; y0: number; y1: number } {\n    const r0 = this.radiusScale(y) - nodeWidth / 2\n    const a0 = x0 - Math.PI / 2\n    const r1 = this.radiusScale(y) - nodeWidth / 2\n    const a1 = x1 - Math.PI / 2\n\n    return {\n      x0: r0 * Math.cos(a0),\n      x1: r1 * Math.cos(a1),\n      y0: r0 * Math.sin(a0),\n      y1: r1 * Math.sin(a1),\n    }\n  }\n\n  private _calculateRadialPosition (\n    hierarchyNode: ChordNode<N>,\n    scalingCoeff = 0.95,\n    nodePadding = 0.02\n  ): void {\n    if (!hierarchyNode.children) return\n\n    // Calculate x0 and x1\n    const nodeLength = (hierarchyNode.x1 - hierarchyNode.x0)\n    const scaledNodeLength = nodeLength * scalingCoeff\n    const delta = nodeLength - scaledNodeLength\n    let x0 = hierarchyNode.x0 + delta / 2\n    for (const node of hierarchyNode.children) {\n      const childX0 = x0\n      const childX1 = x0 + (node.value / hierarchyNode.value) * scaledNodeLength - nodePadding / 2\n      const childNodeLength = childX1 - childX0\n      const scaledChildNodeLength = childNodeLength * scalingCoeff\n      const childDelta = childNodeLength - scaledChildNodeLength\n      node.x0 = childX0 + childDelta / 2\n      node.x1 = node.x0 + scaledChildNodeLength\n      x0 = childX1 + nodePadding / 2 + childDelta / 2\n    }\n    // Go deeper in the hierarchy\n    for (const node of hierarchyNode.children) {\n      this._calculateRadialPosition(node, scalingCoeff, nodePadding)\n    }\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    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 (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(`.${s.node}`).classed(s.hoveredNode, (d: ChordNode<N>) => d._state.hovered)\n    this.linkGroup.selectAll(`.${s.link}`).classed(s.hoveredLink, (d: ChordRibbon<N>) => d._state.hovered)\n    this.g.classed(s.transparent, !!links)\n  }\n}\n"],"names":["s.nodes","s.links","s.labels","s.link","s.node","s.gLabel","s.labelExit","s.hoveredNode","s.hoveredLink","s.transparent","s"],"mappings":"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"}

package/components/chord-diagram/modules/label.d.ts

@@ -0,0 +1,8 @@
+import { Selection } from 'd3-selection';
+import { ScaleContinuousNumeric } from 'd3-scale';
+import { ChordDiagramConfig } from '../config';
+import { ChordInputLink, ChordInputNode, ChordNode } from '../types';
+export declare const LABEL_PADDING = 3;
+export declare function createLabel<N extends ChordInputNode, L extends ChordInputLink>(selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>, config: ChordDiagramConfig<N, L>, radiusScale: ScaleContinuousNumeric<number, number>): void;
+export declare function updateLabel<N extends ChordInputNode, L extends ChordInputLink>(selection: Selection<SVGElement, ChordNode<N>, SVGGElement, unknown>, config: ChordDiagramConfig<N, L>, width: number, radiusScale: ScaleContinuousNumeric<number, number>, duration: number): void;
+export declare function removeLabel<N extends ChordInputNode, L extends ChordInputLink>(selection: Selection<SVGElement, ChordNode<N>, SVGGElement, unknown>, duration: number): void;

package/components/chord-diagram/modules/label.js

@@ -0,0 +1,128 @@
+import { select } from 'd3-selection';
+import { color } from 'd3-color';
+import { getCSSColorVariable } from '../../../styles/colors.js';
+import { wrapTextElement } from '../../../utils/text.js';
+import { smartTransition } from '../../../utils/d3.js';
+import { getString, getNumber } from '../../../utils/data.js';
+import { getColor, hexToBrightness } from '../../../utils/color.js';
+import { ChordLabelAlignment } from '../types.js';
+import { label } from '../style.js';
+
+const LABEL_PADDING = 3;
+function createLabel(selection, config, radiusScale) {
+    selection.style('opacity', 0);
+    if (config.nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {
+        selection.attr('transform', d => {
+            const angleCenter = (d.x0 + d.x1) / 2;
+            const angle = angleCenter - Math.PI / 2;
+            const r = radiusScale(d.y1) + LABEL_PADDING;
+            const x = r * Math.cos(angle);
+            const y = r * Math.sin(angle);
+            return `translate(${x}, ${y})`;
+        });
+    }
+    selection.append('text')
+        .attr('class', label)
+        .style('fill', d => getColor(d, config.nodeColor, d.depth));
+}
+function getLabelFillColor(d, config, context) {
+    const { nodeLabelAlignment, nodeColor } = config;
+    switch (nodeLabelAlignment) {
+        case ChordLabelAlignment.Perpendicular: {
+            return getColor(d, nodeColor, d.depth);
+        }
+        case ChordLabelAlignment.Along: {
+            const c = getColor(d, nodeColor) || window.getComputedStyle(context).getPropertyValue(getCSSColorVariable(d.depth));
+            const colorParsed = color(c);
+            const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0;
+            return brightness > 0.65 ? 'var(--vis-chord-diagram-label-text-fill-color-dark)' : 'var(--vis-chord-diagram-label-text-fill-color-bright)';
+        }
+    }
+}
+function getLabelTextAnchor(d, config) {
+    const { nodeLabelAlignment } = config;
+    switch (nodeLabelAlignment) {
+        case ChordLabelAlignment.Perpendicular: {
+            const angleCenter = (d.x0 + d.x1) / 2;
+            const angleDegree = angleCenter * 180 / Math.PI;
+            return angleDegree < 180 ? 'start' : 'end';
+        }
+        case ChordLabelAlignment.Along: {
+            return null;
+        }
+    }
+}
+function updateLabel(selection, config, width, radiusScale, duration) {
+    const { nodeLabel, nodeWidth, nodeLabelAlignment } = config;
+    selection.style('opacity', 0);
+    const selTransition = smartTransition(selection, duration)
+        .style('opacity', 1);
+    if (nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {
+        selTransition.attr('transform', d => {
+            const angleCenter = (d.x0 + d.x1) / 2;
+            const angle = angleCenter - Math.PI / 2;
+            const r = radiusScale(d.y1) + LABEL_PADDING;
+            const x = r * Math.cos(angle);
+            const y = r * Math.sin(angle);
+            return `translate(${x}, ${y})`;
+        });
+    }
+    else {
+        selection.attr('transform', null);
+    }
+    const label$1 = selection.select(`.${label}`);
+    label$1.select('textPath').remove();
+    label$1
+        .text(d => getString(d.data, nodeLabel))
+        .style('display', d => {
+        if (config.nodeLabelAlignment === ChordLabelAlignment.Perpendicular)
+            return null;
+        const radianArcLength = d.x1 - d.x0 - getNumber(d, config.padAngle) * 2;
+        const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2;
+        const arcLength = radius * radianArcLength;
+        // Hide label if the length of node arc is less then 70 px
+        return arcLength < 70 ? 'none' : null;
+    });
+    label$1
+        .style('fill', d => getLabelFillColor(d, config, label$1.node()))
+        .style('text-anchor', d => getLabelTextAnchor(d, config));
+    label$1
+        .each((d, i, elements) => {
+        let textWidth = width;
+        if (nodeLabelAlignment === ChordLabelAlignment.Along) {
+            const radianArcLength = d.x1 - d.x0 - getNumber(d, config.padAngle) * 2;
+            const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2;
+            textWidth = radius * radianArcLength;
+        }
+        select(elements[i]).call(wrapTextElement, { width: textWidth - LABEL_PADDING * 2, trimOnly: true });
+        if (nodeLabelAlignment === ChordLabelAlignment.Along) {
+            const labelText = select(elements[i]).text();
+            select(elements[i])
+                .attr('dx', LABEL_PADDING)
+                .attr('dy', getNumber(d, nodeWidth) / 2)
+                .text('');
+            select(elements[i]).append('textPath')
+                .attr('xlink:href', `#chord-node-${i}`)
+                .text(labelText);
+        }
+    });
+    if (nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {
+        smartTransition(label$1, duration)
+            .attr('transform', d => {
+            const angleCenter = (d.x0 + d.x1) / 2;
+            const angleDegree = angleCenter * 180 / Math.PI;
+            return `rotate(${angleDegree < 180 ? angleDegree - 90 : angleDegree + 90})`;
+        });
+    }
+    else {
+        label$1.attr('transform', null);
+    }
+}
+function removeLabel(selection, duration) {
+    smartTransition(selection, duration)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { LABEL_PADDING, createLabel, removeLabel, updateLabel };
+//# sourceMappingURL=label.js.map

package/components/chord-diagram/modules/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../../src/components/chord-diagram/modules/label.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { ScaleContinuousNumeric } from 'd3-scale'\nimport { color } from 'd3-color'\n\n// Core\nimport { getCSSColorVariable } from 'styles/colors'\n\n// Utils\nimport { wrapTextElement } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\nimport { getNumber, getString } from 'utils/data'\nimport { getColor, hexToBrightness } from 'utils/color'\n\n// Config\nimport { ChordDiagramConfig } from '../config'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNode } from '../types'\n\n// Styles\nimport * as s from '../style'\n\nexport const LABEL_PADDING = 3\n\nexport function createLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfig<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): void {\n  selection.style('opacity', 0)\n\n  if (config.nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n    selection.attr('transform', d => {\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angle = angleCenter - Math.PI / 2\n      const r = radiusScale(d.y1) + LABEL_PADDING\n      const x = r * Math.cos(angle)\n      const y = r * Math.sin(angle)\n      return `translate(${x}, ${y})`\n    })\n  }\n\n  selection.append('text')\n    .attr('class', s.label)\n    .style('fill', d => getColor(d, config.nodeColor, d.depth))\n}\n\nfunction getLabelFillColor<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfig<N, L>,\n  context: SVGTextElement\n): string {\n  const { nodeLabelAlignment, nodeColor } = config\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      return getColor(d, nodeColor, d.depth)\n    }\n    case ChordLabelAlignment.Along: {\n      const c = getColor(d, nodeColor) || window.getComputedStyle(context).getPropertyValue(getCSSColorVariable(d.depth))\n      const colorParsed = color(c)\n      const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0\n      return brightness > 0.65 ? 'var(--vis-chord-diagram-label-text-fill-color-dark)' : 'var(--vis-chord-diagram-label-text-fill-color-bright)'\n    }\n  }\n}\n\nfunction getLabelTextAnchor<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfig<N, L>\n): string | null {\n  const { nodeLabelAlignment } = config\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleDegree = angleCenter * 180 / Math.PI\n      return angleDegree < 180 ? 'start' : 'end'\n    }\n    case ChordLabelAlignment.Along: {\n      return null\n    }\n  }\n}\n\nexport function updateLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfig<N, L>,\n  width: number,\n  radiusScale: ScaleContinuousNumeric<number, number>,\n  duration: number\n): void {\n  const { nodeLabel, nodeWidth, nodeLabelAlignment } = config\n  selection.style('opacity', 0)\n  const selTransition = smartTransition(selection, duration)\n    .style('opacity', 1)\n  if (nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n    selTransition.attr('transform', d => {\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angle = angleCenter - Math.PI / 2\n      const r = radiusScale(d.y1) + LABEL_PADDING\n      const x = r * Math.cos(angle)\n      const y = r * Math.sin(angle)\n      return `translate(${x}, ${y})`\n    })\n  } else {\n    selection.attr('transform', null)\n  }\n\n  const label: Selection<SVGTextElement, ChordNode<N>, SVGElement, unknown> = selection.select(`.${s.label}`)\n  label.select('textPath').remove()\n  label\n    .text(d => getString(d.data, nodeLabel))\n    .style('display', d => {\n      if (config.nodeLabelAlignment === ChordLabelAlignment.Perpendicular) return null\n      const radianArcLength = d.x1 - d.x0 - getNumber(d, config.padAngle) * 2\n      const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2\n      const arcLength = radius * radianArcLength\n      // Hide label if the length of node arc is less then 70 px\n      return arcLength < 70 ? 'none' : null\n    })\n\n  label\n    .style('fill', d => getLabelFillColor(d, config, label.node()))\n    .style('text-anchor', d => getLabelTextAnchor(d, config))\n\n  label\n    .each((d: any, i, elements) => {\n      let textWidth = width\n      if (nodeLabelAlignment === ChordLabelAlignment.Along) {\n        const radianArcLength = d.x1 - d.x0 - getNumber(d, config.padAngle) * 2\n        const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2\n        textWidth = radius * radianArcLength\n      }\n\n      select(elements[i]).call(wrapTextElement, { width: textWidth - LABEL_PADDING * 2, trimOnly: true })\n\n      if (nodeLabelAlignment === ChordLabelAlignment.Along) {\n        const labelText = select(elements[i]).text()\n        select(elements[i])\n          .attr('dx', LABEL_PADDING)\n          .attr('dy', getNumber(d, nodeWidth) / 2)\n          .text('')\n\n        select(elements[i]).append('textPath')\n          .attr('xlink:href', `#chord-node-${i}`)\n          .text(labelText)\n      }\n    })\n\n  if (nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n    smartTransition(label, duration)\n      .attr('transform', d => {\n        const angleCenter = (d.x0 + d.x1) / 2\n        const angleDegree = angleCenter * 180 / Math.PI\n\n        return `rotate(${angleDegree < 180 ? angleDegree - 90 : angleDegree + 90})`\n      })\n  } else {\n    label.attr('transform', null)\n  }\n}\n\nexport function removeLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGElement, ChordNode<N>, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["s.label","label"],"mappings":"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"}