@unovis/ts 1.0.0-beta.0

package/components/line/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/line/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { line, Line as LineGenInterface, CurveFactoryLineOnly } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getValue, isNumber, isArray, getNumber, getString } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Curve, CurveType } from 'types/curve'\n\n// Local Types\nimport { LineData, LineDatum } from './types'\n\n// Config\nimport { LineConfig, LineConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Line<Datum> extends XYComponentCore<Datum> {\n  static selectors = s\n  config: LineConfig<Datum> = new LineConfig()\n  lineGen: LineGenInterface<{ x: number; y: number; defined: boolean }>\n  curve: CurveFactoryLineOnly = Curve[CurveType.MonotoneX]\n  events = {\n    [Line.selectors.line]: {\n      mouseover: this._highlight.bind(this),\n      mouseleave: this._resetHighlight.bind(this),\n    },\n  }\n\n  constructor (config?: LineConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n  }\n\n  get bleed (): Spacing {\n    const { config: { lineWidth } } = this\n    return { top: lineWidth, bottom: lineWidth, left: lineWidth, right: lineWidth }\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    this.curve = Curve[config.curveType]\n    this.lineGen = line<{ x: number; y: number; defined: boolean }>()\n      .x(d => d.x)\n      .y(d => d.y)\n      .defined(d => d.defined)\n      .curve(this.curve)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const lineDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n    const lineData: LineData[] = yAccessors.map(a => {\n      const ld: LineDatum[] = data.map((d, i) => {\n        const rawValue = getNumber(d, a, i)\n        // If `rawValue` is not numerical or if it's not finite (`NaN`, `undefined`, ...), we replace it with `config.fallbackValue`\n        const value = (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue) ? rawValue : config.fallbackValue\n        return {\n          x: lineDataX[i],\n          y: this.yScale(value ?? 0),\n          defined: isFinite(value),\n          value,\n        }\n      })\n\n      const defined = ld.reduce((def, d) => (d.defined || def), false)\n      // If the line consists only of `null` values, we'll still render it but it'll be invisible.\n      // Such trick allows us to have better animated transitions.\n      const visible = defined && ld.some(d => d.value !== null)\n      return {\n        values: ld,\n        defined,\n        visible,\n      }\n    })\n\n    const lines = this.g\n      .selectAll<SVGGElement, LineData>(`.${s.line}`)\n      .data(lineData)\n\n    const linesEnter = lines.enter().append('g')\n      .attr('class', s.line)\n\n    linesEnter\n      .append('path')\n      .attr('class', s.linePath)\n      .attr('d', this._emptyPath())\n      .attr('stroke', (d, i) => getColor(data, config.color, i))\n      .attr('stroke-opacity', 0)\n      .attr('stroke-width', config.lineWidth)\n\n    linesEnter\n      .append('path')\n      .attr('class', s.lineSelectionHelper)\n      .attr('d', this._emptyPath())\n\n    const linesMerged = linesEnter.merge(lines)\n    linesMerged.style('cursor', (d, i) => getString(data, config.cursor, i))\n    linesMerged.each((d, i, elements) => {\n      const group = select(elements[i])\n      const linePath = group.select(`.${s.linePath}`)\n      const lineSelectionHelper = group.select(`.${s.lineSelectionHelper}`)\n\n      const isLineVisible = d.visible\n      const dashArray = getValue<LineData, number[]>(d, config.lineDashArray, i)\n      const transition = smartTransition(linePath, duration)\n        .attr('stroke', getColor(data, config.color, i))\n        .attr('stroke-width', config.lineWidth)\n        .attr('stroke-opacity', isLineVisible ? 1 : 0)\n        .style('stroke-dasharray', dashArray?.join(' ') ?? null) // We use `.style` because there's also a default CSS-variable for stroke-dasharray\n\n      const hasUndefinedSegments = d.values.some(d => !d.defined)\n      const svgPathD = this.lineGen(d.values)\n\n      if (duration && !hasUndefinedSegments) {\n        const previous = linePath.attr('d') || this._emptyPath()\n        const next = svgPathD || this._emptyPath()\n        const t = transition as Transition<SVGPathElement, LineData, SVGGElement, LineData>\n        t.attrTween('d', () => interpolatePath(previous, next))\n      } else if (d.visible) {\n        transition.attr('d', svgPathD)\n      }\n\n      lineSelectionHelper\n        .attr('d', svgPathD)\n        .attr('visibility', isLineVisible ? null : 'hidden')\n    })\n\n    smartTransition(lines.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  private _emptyPath (): string {\n    const xRange = this.xScale.range()\n    const yRange = this.yScale.range()\n    return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n  }\n\n  private _highlight (datum, i, els): void {\n    const { config } = this\n\n    if (config.highlightOnHover) {\n      this.g\n        .selectAll(`.${s.line}`)\n        .classed(s.dim, d => d !== datum)\n    }\n  }\n\n  private _resetHighlight (d, i, els): void {\n    const { config } = this\n\n    if (config.highlightOnHover) {\n      this.g\n        .selectAll(`.${s.line}`)\n        .classed(s.dim, false)\n    }\n  }\n}\n"],"names":["s.line","s.linePath","s.lineSelectionHelper","linePath","lineSelectionHelper","s.dim","s"],"mappings":"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"}

package/components/line/style.d.ts

@@ -0,0 +1,6 @@
+export declare const global: void;
+export declare const root: string;
+export declare const line: string;
+export declare const linePath: string;
+export declare const lineSelectionHelper: string;
+export declare const dim: string;

package/components/line/style.js

@@ -0,0 +1,35 @@
+import { injectGlobal, css } from '@emotion/css';
+
+const global = injectGlobal `
+  :root {
+    --vis-line-cursor: default;
+    --vis-line-stroke-dasharray: none;
+    --vis-line-stroke-dashoffset: 0;
+  }
+`;
+const root = css `
+  label: line-component;
+`;
+const line = css `
+  label: line;
+  transition: opacity 200ms;
+  cursor: var(--vis-line-cursor);
+`;
+const linePath = css `
+  label: linePath;
+  fill: none;
+  stroke-dasharray: var(--vis-line-stroke-dasharray);
+  stroke-dashoffset: var(--vis-line-stroke-dashoffset);
+`;
+const lineSelectionHelper = css `
+  label: lineSelectionHelper;
+  fill: none;
+  stroke: rgba(0, 0, 0, 0);
+  stroke-width: 8px;
+`;
+const dim = css `
+  opacity: 0.2;
+`;
+
+export { dim, global, line, linePath, lineSelectionHelper, root };
+//# sourceMappingURL=style.js.map

package/components/line/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/line/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const global = injectGlobal`\n  :root {\n    --vis-line-cursor: default;\n    --vis-line-stroke-dasharray: none;\n    --vis-line-stroke-dashoffset: 0;\n  }\n`\n\nexport const root = css`\n  label: line-component;\n`\n\nexport const line = css`\n  label: line;\n  transition: opacity 200ms;\n  cursor: var(--vis-line-cursor);\n`\n\nexport const linePath = css`\n  label: linePath;\n  fill: none;\n  stroke-dasharray: var(--vis-line-stroke-dasharray);\n  stroke-dashoffset: var(--vis-line-stroke-dashoffset);\n`\n\nexport const lineSelectionHelper = css`\n  label: lineSelectionHelper;\n  fill: none;\n  stroke: rgba(0, 0, 0, 0);\n  stroke-width: 8px;\n`\n\nexport const dim = css`\n  opacity: 0.2;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,MAAM,GAAG,YAAY,CAAA,CAAA;;;;;;EAMjC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;EAItB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;EAK1B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;EAKrC;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/components/line/types.d.ts

@@ -0,0 +1,12 @@
+/** Data type for Line Generator: [x, y, defined] */
+export declare type LineDatum = {
+    x: number;
+    y: number;
+    value: number | null | undefined;
+    defined: boolean;
+};
+export declare type LineData = {
+    values: LineDatum[];
+    defined: boolean;
+    visible: boolean;
+};

package/components/radial-dendrogram/config.d.ts

@@ -0,0 +1,34 @@
+import { ComponentConfigInterface, ComponentConfig } from "../../core/component/config";
+import { ColorAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
+import { Hierarchy } from './types';
+export interface RadialDendrogramConfigInterface<H extends Hierarchy> extends ComponentConfigInterface {
+    /** Children accessor function. Default: `d.children || d.values` */
+    children?: (d: H) => H[];
+    /** Value accessor function. Default: `d => d.value` */
+    value?: NumericAccessor<H>;
+    /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['site', 'sublabel']. Default: `[]` */
+    nodeLevels?: string[];
+    /** Node width in pixels. Default: `15` */
+    nodeWidth?: number;
+    /** Node color accessor function ot constant value. Default: `d => d.color` */
+    nodeColor?: ColorAccessor<H>;
+    /** Node label accessor function. Default: `d => d.label ?? d.key` */
+    nodeLabel?: StringAccessor<H>;
+    /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */
+    padAngle?: NumericAccessor<H>;
+    /** Corner radius constant value or accessor function. Default: `2` */
+    cornerRadius?: NumericAccessor<H>;
+    /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */
+    angleRange?: [number, number];
+}
+export declare class RadialDendrogramConfig<H extends Hierarchy> extends ComponentConfig implements RadialDendrogramConfigInterface<H> {
+    duration: number;
+    children: (d: H) => H[];
+    value: (d: H) => number;
+    nodeWidth: number;
+    nodeColor: (d: H) => string;
+    nodeLabel: (d: H) => string;
+    padAngle: number;
+    cornerRadius: number;
+    angleRange: [number, number];
+}

package/components/radial-dendrogram/config.js

@@ -0,0 +1,20 @@
+import { ComponentConfig } from '../../core/component/config.js';
+
+/* eslint-disable dot-notation */
+class RadialDendrogramConfig extends ComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.duration = 800;
+        this.children = (d) => d['children'] || d['values'];
+        this.value = (d) => d['value'];
+        this.nodeWidth = 15;
+        this.nodeColor = (d) => d['color'];
+        this.nodeLabel = (d) => { var _a; return (_a = d['label']) !== null && _a !== void 0 ? _a : d['key']; };
+        this.padAngle = 0.01;
+        this.cornerRadius = 2;
+        this.angleRange = [0, 2 * Math.PI];
+    }
+}
+
+export { RadialDendrogramConfig };
+//# sourceMappingURL=config.js.map

package/components/radial-dendrogram/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/radial-dendrogram/config.ts"],"sourcesContent":["/* eslint-disable dot-notation */\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\n// Local Types\nimport { Hierarchy } from './types'\n\nexport interface RadialDendrogramConfigInterface<H extends Hierarchy> extends ComponentConfigInterface {\n  /** Children accessor function. Default: `d.children || d.values` */\n  children?: (d: H) => H[];\n  /** Value accessor function. Default: `d => d.value` */\n  value?: NumericAccessor<H>;\n  /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['site', 'sublabel']. 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<H>;\n  /** Node label accessor function. Default: `d => d.label ?? d.key` */\n  nodeLabel?: StringAccessor<H>;\n  /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */\n  padAngle?: NumericAccessor<H>;\n  /** Corner radius constant value or accessor function. Default: `2` */\n  cornerRadius?: NumericAccessor<H>;\n  /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */\n  angleRange?: [number, number];\n}\n\nexport class RadialDendrogramConfig<H extends Hierarchy> extends ComponentConfig implements RadialDendrogramConfigInterface<H> {\n  duration = 800\n  children = (d: H): H[] => d['children'] || d['values']\n  value = (d: H): number => d['value']\n  nodeWidth = 15\n  nodeColor = (d: H): string => d['color']\n  nodeLabel = (d: H): string => d['label'] ?? d['key']\n  padAngle = 0.01\n  cornerRadius = 2\n  angleRange: [number, number] = [0, 2 * Math.PI]\n}\n"],"names":[],"mappings":";;AAAA;AA8BM,MAAO,sBAA4C,SAAQ,eAAe,CAAA;AAAhF,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAA;AACd,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,CAAI,KAAU,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAA;QACtD,IAAK,CAAA,KAAA,GAAG,CAAC,CAAI,KAAa,CAAC,CAAC,OAAO,CAAC,CAAA;QACpC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAA;QACd,IAAS,CAAA,SAAA,GAAG,CAAC,CAAI,KAAa,CAAC,CAAC,OAAO,CAAC,CAAA;AACxC,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;QACpD,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;KAChD;AAAA;;;;"}

package/components/radial-dendrogram/index.d.ts

@@ -0,0 +1,22 @@
+import { Selection } from 'd3-selection';
+import { HierarchyRectangularNode } from 'd3-hierarchy';
+import { ComponentCore } from "../../core/component";
+import { Spacing } from "../../types/spacing";
+import { Hierarchy, Link } from './types';
+import { RadialDendrogramConfig, RadialDendrogramConfigInterface } from './config';
+import * as s from './style';
+export declare class RadialDendrogram<H extends Hierarchy> extends ComponentCore<H> {
+    static selectors: typeof s;
+    config: RadialDendrogramConfig<H>;
+    nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    arcGen: import("d3-shape").Arc<any, HierarchyRectangularNode<H>>;
+    linkArcGen: import("d3-shape").Arc<any, Link<H>>;
+    events: {
+        [x: string]: {};
+    };
+    constructor(config?: RadialDendrogramConfigInterface<H>);
+    get bleed(): Spacing;
+    _render(customDuration?: number): void;
+}

package/components/radial-dendrogram/index.js

@@ -0,0 +1,98 @@
+import { hierarchy, partition } from 'd3-hierarchy';
+import { arc } from 'd3-shape';
+import { ComponentCore } from '../../core/component/index.js';
+import { isNumber, getNumber } from '../../utils/data.js';
+import { RadialDendrogramConfig } 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 { link, node, gLabel } from './style.js';
+
+class RadialDendrogram extends ComponentCore {
+    constructor(config) {
+        super();
+        this.config = new RadialDendrogramConfig();
+        this.arcGen = arc();
+        this.linkArcGen = arc();
+        this.events = {
+            [RadialDendrogram.selectors.node]: {},
+        };
+        if (config)
+            this.config.init(config);
+        this.linkGroup = this.g.append('g');
+        this.nodeGroup = this.g.append('g');
+        this.labelGroup = this.g.append('g');
+    }
+    get bleed() {
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+    _render(customDuration) {
+        super._render(customDuration);
+        const { config, datamodel: { data } } = this;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        this.arcGen
+            .startAngle(d => config.angleRange[0] + d.x0)
+            .endAngle(d => config.angleRange[0] + d.x1)
+            .padAngle(d => Math.min((d.x1 - d.x0) / 2, getNumber(d, config.padAngle)))
+            .cornerRadius(d => getNumber(d, config.cornerRadius))
+            .innerRadius(d => d.y1 - getNumber(d, config.nodeWidth))
+            .outerRadius(d => d.y1);
+        this.linkArcGen
+            .startAngle(d => config.angleRange[0] + d.target.x0)
+            .endAngle(d => config.angleRange[0] + d.target.x1)
+            .padAngle(d => Math.min((d.target.x1 - d.target.x0) / 2, getNumber(d, config.padAngle)))
+            .cornerRadius(d => getNumber(d, config.cornerRadius))
+            .innerRadius(d => d.source.y1)
+            .outerRadius(d => d.target.y1 - getNumber(d, config.nodeWidth));
+        const hierarchyData = hierarchy(data, d => config.children(d));
+        hierarchyData.sum(d => getNumber(d, config.value));
+        let radius = Math.min(this._width, this._height) / 2;
+        let ladelWidth = radius / (hierarchyData.height + 1) - config.nodeWidth;
+        radius = radius - ladelWidth;
+        ladelWidth -= ladelWidth / (hierarchyData.height + 1);
+        const dendogram = partition().size([config.angleRange[1], radius]);
+        const dendogramDataWithRoot = dendogram(hierarchyData).descendants();
+        // Filter from the root node
+        const dendogramData = dendogramDataWithRoot.filter(d => d.depth !== 0);
+        const linksData = dendogramDataWithRoot[0].links().filter(l => l.source.parent);
+        this.g.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
+        // Links
+        const links = this.linkGroup
+            .selectAll(`.${link}`)
+            .data(linksData);
+        const linkEnter = links.enter().append('path')
+            .attr('class', link)
+            .call(createLink);
+        const linksMerged = links.merge(linkEnter);
+        linksMerged.call(updateLink, this.linkArcGen, duration);
+        const linksRemove = links.exit();
+        linksRemove.call(removeLink, duration);
+        // Nodes
+        const nodes = this.nodeGroup
+            .selectAll(`.${node}`)
+            .data(dendogramData);
+        const nodesEnter = nodes.enter().append('path')
+            .attr('class', node)
+            .call(createNode, config);
+        const nodesMerged = nodes.merge(nodesEnter);
+        nodesMerged.call(updateNode, config, this.arcGen, duration);
+        nodes.exit()
+            .call(removeNode, duration);
+        // Labels
+        const labels = this.labelGroup
+            .selectAll(`.${gLabel}`)
+            .data(dendogramData);
+        const labelEnter = labels.enter().append('g')
+            .attr('class', gLabel)
+            .call(createLabel, config);
+        const labelsMerged = labels.merge(labelEnter);
+        labelsMerged.call(updateLabel, config, ladelWidth, duration);
+        labels.exit()
+            .call(removeLabel, duration);
+    }
+}
+RadialDendrogram.selectors = style;
+
+export { RadialDendrogram };
+//# sourceMappingURL=index.js.map

package/components/radial-dendrogram/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/radial-dendrogram/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { hierarchy, partition, HierarchyRectangularNode } from 'd3-hierarchy'\nimport { arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Utils\nimport { getNumber, isNumber } from 'utils/data'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { Hierarchy, Link } from './types'\n\n// Config\nimport { RadialDendrogramConfig, RadialDendrogramConfigInterface } 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 RadialDendrogram<H extends Hierarchy> extends ComponentCore<H> {\n  static selectors = s\n  config: RadialDendrogramConfig<H> = new RadialDendrogramConfig()\n  nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  arcGen = arc<HierarchyRectangularNode<H>>()\n  linkArcGen = arc<Link<H>>()\n\n  events = {\n    [RadialDendrogram.selectors.node]: {},\n  }\n\n  constructor (config?: RadialDendrogramConfigInterface<H>) {\n    super()\n    if (config) this.config.init(config)\n    this.linkGroup = this.g.append('g')\n    this.nodeGroup = this.g.append('g')\n    this.labelGroup = this.g.append('g')\n  }\n\n  get bleed (): Spacing {\n    return { top: 0, bottom: 0, left: 0, right: 0 }\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    this.arcGen\n      .startAngle(d => config.angleRange[0] + d.x0)\n      .endAngle(d => config.angleRange[0] + d.x1)\n      .padAngle(d => Math.min((d.x1 - d.x0) / 2, getNumber(d, config.padAngle)))\n      .cornerRadius(d => getNumber(d, config.cornerRadius))\n      .innerRadius(d => d.y1 - getNumber(d, config.nodeWidth))\n      .outerRadius(d => d.y1)\n\n    this.linkArcGen\n      .startAngle(d => config.angleRange[0] + d.target.x0)\n      .endAngle(d => config.angleRange[0] + d.target.x1)\n      .padAngle(d => Math.min((d.target.x1 - d.target.x0) / 2, getNumber(d, config.padAngle)))\n      .cornerRadius(d => getNumber(d, config.cornerRadius))\n      .innerRadius(d => d.source.y1)\n      .outerRadius(d => d.target.y1 - getNumber(d, config.nodeWidth))\n\n    const hierarchyData = hierarchy(data, d => config.children(d))\n    hierarchyData.sum(d => getNumber(d, config.value))\n\n    let radius = Math.min(this._width, this._height) / 2\n    let ladelWidth = radius / (hierarchyData.height + 1) - config.nodeWidth\n    radius = radius - ladelWidth\n    ladelWidth -= ladelWidth / (hierarchyData.height + 1)\n    const dendogram = partition<H>().size([config.angleRange[1], radius])\n    const dendogramDataWithRoot = dendogram(hierarchyData).descendants()\n    // Filter from the root node\n    const dendogramData = dendogramDataWithRoot.filter(d => d.depth !== 0)\n\n    const linksData = dendogramDataWithRoot[0].links().filter(l => l.source.parent)\n\n    this.g.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    // Links\n    const links = this.linkGroup\n      .selectAll(`.${s.link}`)\n      .data(linksData)\n\n    const linkEnter = links.enter().append('path')\n      .attr('class', s.link)\n      .call(createLink)\n\n    const linksMerged = links.merge(linkEnter)\n    linksMerged.call(updateLink, this.linkArcGen, duration)\n\n    const linksRemove = links.exit()\n    linksRemove.call(removeLink, duration)\n\n    // Nodes\n    const nodes = this.nodeGroup\n      .selectAll(`.${s.node}`)\n      .data(dendogramData)\n\n    const nodesEnter = nodes.enter().append('path')\n      .attr('class', s.node)\n      .call(createNode, config)\n\n    const nodesMerged = nodes.merge(nodesEnter)\n    nodesMerged.call(updateNode, config, this.arcGen, duration)\n\n    nodes.exit()\n      .call(removeNode, duration)\n\n    // Labels\n    const labels = this.labelGroup\n      .selectAll(`.${s.gLabel}`)\n      .data(dendogramData)\n\n    const labelEnter = labels.enter().append('g')\n      .attr('class', s.gLabel)\n      .call(createLabel, config)\n\n    const labelsMerged = labels.merge(labelEnter)\n    labelsMerged.call(updateLabel, config, ladelWidth, duration)\n\n    labels.exit()\n      .call(removeLabel, duration)\n  }\n}\n"],"names":["s.link","s.node","s.gLabel","s"],"mappings":"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"}

package/components/radial-dendrogram/modules/label.d.ts

@@ -0,0 +1,8 @@
+import { Selection } from 'd3-selection';
+import { HierarchyRectangularNode } from 'd3-hierarchy';
+import { Hierarchy } from '../types';
+import { RadialDendrogramConfig } from '../config';
+export declare const LABEL_PADDING = 3;
+export declare function createLabel<H extends Hierarchy>(selection: Selection<SVGGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, config: RadialDendrogramConfig<H>): void;
+export declare function updateLabel<H extends Hierarchy>(selection: Selection<SVGGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, config: RadialDendrogramConfig<H>, width: number, duration: number): void;
+export declare function removeLabel<H extends Hierarchy>(selection: Selection<SVGGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, duration: number): void;

package/components/radial-dendrogram/modules/label.js

@@ -0,0 +1,70 @@
+import { select } from 'd3-selection';
+import { wrapTextElement } from '../../../utils/text.js';
+import { smartTransition } from '../../../utils/d3.js';
+import { getString } from '../../../utils/data.js';
+import { getColor } from '../../../utils/color.js';
+import { label } from '../style.js';
+
+const LABEL_PADDING = 3;
+function createLabel(selection, config) {
+    selection
+        .style('opacity', 0)
+        .attr('transform', d => {
+        const angleCenter = (d.x0 + d.x1) / 2;
+        const angle = angleCenter - Math.PI / 2;
+        const r = 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.data, config.nodeColor, d.depth));
+}
+function updateLabel(selection, config, width, duration) {
+    const { nodeLabel } = config;
+    selection.style('opacity', 0);
+    smartTransition(selection, duration)
+        .style('opacity', 1)
+        .attr('transform', d => {
+        const angleCenter = (d.x0 + d.x1) / 2;
+        const angle = angleCenter - Math.PI / 2;
+        const r = d.y1 + LABEL_PADDING;
+        const x = r * Math.cos(angle);
+        const y = r * Math.sin(angle);
+        return `translate(${x}, ${y})`;
+    });
+    const label$1 = selection.select(`.${label}`);
+    label$1
+        .text(d => getString(d.data, nodeLabel))
+        .style('fill', d => getColor(d.data, config.nodeColor, d.depth))
+        .style('display', d => {
+        const radianArcLength = d.x1 - d.x0;
+        const arcLength = 2 * Math.PI * d.y1 * radianArcLength;
+        // Hide label if length of node arc less then 70
+        return arcLength < 70 ? 'none' : 'block';
+    })
+        .style('text-anchor', d => {
+        const angleCenter = (d.x0 + d.x1) / 2;
+        const angleDegree = angleCenter * 180 / Math.PI;
+        return angleDegree < 180 ? 'start' : 'end';
+    })
+        .each((d, i, elements) => {
+        select(elements[i])
+            .call(wrapTextElement, { width: width - LABEL_PADDING * 2, trimOnly: true });
+    });
+    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})`;
+    });
+}
+function removeLabel(selection, duration) {
+    smartTransition(selection, duration)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { LABEL_PADDING, createLabel, removeLabel, updateLabel };
+//# sourceMappingURL=label.js.map

package/components/radial-dendrogram/modules/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../../src/components/radial-dendrogram/modules/label.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { HierarchyRectangularNode } from 'd3-hierarchy'\n\n// Utils\nimport { wrapTextElement } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\nimport { getString } from 'utils/data'\nimport { getColor } from 'utils/color'\n\n// Local Types\nimport { Hierarchy } from '../types'\n\n// Config\nimport { RadialDendrogramConfig } from '../config'\n\n// Styles\nimport * as s from '../style'\n\nexport const LABEL_PADDING = 3\n\nexport function createLabel<H extends Hierarchy> (selection: Selection<SVGGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, config: RadialDendrogramConfig<H>): void {\n  selection\n    .style('opacity', 0)\n    .attr('transform', d => {\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angle = angleCenter - Math.PI / 2\n      const r = 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  selection.append('text')\n    .attr('class', s.label)\n    .style('fill', d => getColor(d.data, config.nodeColor, d.depth))\n}\n\nexport function updateLabel<H extends Hierarchy> (selection: Selection<SVGGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, config: RadialDendrogramConfig<H>, width: number, duration: number): void {\n  const { nodeLabel } = config\n  selection.style('opacity', 0)\n  smartTransition(selection, duration)\n    .style('opacity', 1)\n    .attr('transform', d => {\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angle = angleCenter - Math.PI / 2\n      const r = 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  const label: Selection<SVGTextElement, any, SVGElement, any> = selection.select(`.${s.label}`)\n  label\n    .text(d => getString(d.data, nodeLabel))\n    .style('fill', d => getColor(d.data, config.nodeColor, d.depth))\n    .style('display', d => {\n      const radianArcLength = d.x1 - d.x0\n      const arcLength = 2 * Math.PI * d.y1 * radianArcLength\n      // Hide label if length of node arc less then 70\n      return arcLength < 70 ? 'none' : 'block'\n    })\n    .style('text-anchor', d => {\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleDegree = angleCenter * 180 / Math.PI\n      return angleDegree < 180 ? 'start' : 'end'\n    })\n    .each((d, i, elements) => {\n      select(elements[i])\n        .call(wrapTextElement, { width: width - LABEL_PADDING * 2, trimOnly: true })\n    })\n  smartTransition(label, duration)\n\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}\n\nexport function removeLabel<H extends Hierarchy> (selection: Selection<SVGGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, duration: number): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["s.label","label"],"mappings":"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"}

package/components/radial-dendrogram/modules/link.d.ts

@@ -0,0 +1,19 @@
+import { Selection } from 'd3-selection';
+import { Arc } from 'd3-shape';
+import { Hierarchy, Link } from '../types';
+export interface ArcLink extends SVGElement {
+    _animState?: {
+        source: {
+            y0: number;
+            y1: number;
+        };
+        target: {
+            x0: number;
+            x1: number;
+            y1: number;
+        };
+    };
+}
+export declare function createLink<L extends Link<Hierarchy>>(selection: Selection<SVGPathElement, L, SVGGElement, L[]>): void;
+export declare function updateLink<L extends Link<Hierarchy>>(selection: Selection<SVGPathElement, L, SVGGElement, L[]>, linkArcGen: Arc<any, any>, duration: number): void;
+export declare function removeLink<L extends Link<Hierarchy>>(selection: Selection<SVGPathElement, L, SVGGElement, L[]>, duration: number): void;

package/components/radial-dendrogram/modules/link.js

@@ -0,0 +1,59 @@
+import { interpolate } from 'd3-interpolate';
+import { smartTransition } from '../../../utils/d3.js';
+
+function createLink(selection) {
+    selection
+        .style('opacity', 0)
+        .each((d, i, els) => {
+        const arcLink = els[i];
+        const angleCenter = (d.target.x0 + d.target.x1) / 2;
+        const angleHalfWidth = (d.target.x1 - d.target.x0) / 2;
+        arcLink._animState = {
+            target: {
+                x0: angleCenter - angleHalfWidth * 0.8,
+                x1: angleCenter + angleHalfWidth * 0.8,
+                y1: d.target.y1,
+            },
+            source: {
+                y0: d.source.y0,
+                y1: d.source.y1,
+            },
+        };
+    });
+}
+function updateLink(selection, linkArcGen, duration) {
+    if (duration) {
+        const transition = smartTransition(selection, duration)
+            .style('opacity', 1);
+        transition.attrTween('d', (d, i, els) => {
+            const arcLink = els[i];
+            const nextAnimState = {
+                target: {
+                    x0: d.target.x0,
+                    x1: d.target.x1,
+                    y1: d.target.y1,
+                },
+                source: {
+                    y0: d.source.y0,
+                    y1: d.source.y1,
+                },
+            };
+            const datum = interpolate(arcLink._animState, nextAnimState);
+            return (t) => {
+                arcLink._animState = datum(t);
+                return linkArcGen(arcLink._animState);
+            };
+        });
+    }
+    else {
+        selection.attr('d', d => linkArcGen(d));
+    }
+}
+function removeLink(selection, duration) {
+    smartTransition(selection, duration)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { createLink, removeLink, updateLink };
+//# sourceMappingURL=link.js.map

package/components/radial-dendrogram/modules/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../../../src/components/radial-dendrogram/modules/link.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolate } from 'd3-interpolate'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { Hierarchy, Link } from '../types'\n\nexport interface ArcLink extends SVGElement {\n  _animState?: {\n    source: { y0: number; y1: number };\n    target: { x0: number; x1: number; y1: number };\n  };\n}\n\nexport function createLink<L extends Link<Hierarchy>> (selection: Selection<SVGPathElement, L, SVGGElement, L[]>): void {\n  selection\n    .style('opacity', 0)\n    .each((d, i, els) => {\n      const arcLink: ArcLink = els[i]\n      const angleCenter = (d.target.x0 + d.target.x1) / 2\n      const angleHalfWidth = (d.target.x1 - d.target.x0) / 2\n      arcLink._animState = {\n        target: {\n          x0: angleCenter - angleHalfWidth * 0.8,\n          x1: angleCenter + angleHalfWidth * 0.8,\n          y1: d.target.y1,\n        },\n        source: {\n          y0: d.source.y0,\n          y1: d.source.y1,\n        },\n      }\n    })\n}\n\nexport function updateLink<L extends Link<Hierarchy>> (selection: Selection<SVGPathElement, L, SVGGElement, L[]>, linkArcGen: Arc<any, any>, duration: number): void {\n  if (duration) {\n    const transition = smartTransition(selection, duration)\n      .style('opacity', 1) as Transition<SVGElement, L, SVGGElement, L[]>\n\n    transition.attrTween('d', (d, i, els) => {\n      const arcLink: ArcLink = els[i]\n      const nextAnimState = {\n        target: {\n          x0: d.target.x0,\n          x1: d.target.x1,\n          y1: d.target.y1,\n        },\n        source: {\n          y0: d.source.y0,\n          y1: d.source.y1,\n        },\n      }\n      const datum = interpolate(arcLink._animState, nextAnimState)\n\n      return (t: number): string => {\n        arcLink._animState = datum(t)\n        return linkArcGen(arcLink._animState)\n      }\n    })\n  } else {\n    selection.attr('d', d => linkArcGen(d))\n  }\n}\n\nexport function removeLink<L extends Link<Hierarchy>> (selection: Selection<SVGPathElement, L, SVGGElement, L[]>, duration: number): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":[],"mappings":";;;AAkBM,SAAU,UAAU,CAA6B,SAAyD,EAAA;IAC9G,SAAS;AACN,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;SACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,KAAI;AAClB,QAAA,MAAM,OAAO,GAAY,GAAG,CAAC,CAAC,CAAC,CAAA;AAC/B,QAAA,MAAM,WAAW,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;AACnD,QAAA,MAAM,cAAc,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;QACtD,OAAO,CAAC,UAAU,GAAG;AACnB,YAAA,MAAM,EAAE;AACN,gBAAA,EAAE,EAAE,WAAW,GAAG,cAAc,GAAG,GAAG;AACtC,gBAAA,EAAE,EAAE,WAAW,GAAG,cAAc,GAAG,GAAG;AACtC,gBAAA,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;AAChB,aAAA;AACD,YAAA,MAAM,EAAE;AACN,gBAAA,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;AACf,gBAAA,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;AAChB,aAAA;SACF,CAAA;AACH,KAAC,CAAC,CAAA;AACN,CAAC;SAEe,UAAU,CAA6B,SAAyD,EAAE,UAAyB,EAAE,QAAgB,EAAA;AAC3J,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,MAAM,UAAU,GAAG,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACpD,aAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAgD,CAAA;AAErE,QAAA,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,KAAI;AACtC,YAAA,MAAM,OAAO,GAAY,GAAG,CAAC,CAAC,CAAC,CAAA;AAC/B,YAAA,MAAM,aAAa,GAAG;AACpB,gBAAA,MAAM,EAAE;AACN,oBAAA,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;AACf,oBAAA,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;AACf,oBAAA,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;AAChB,iBAAA;AACD,gBAAA,MAAM,EAAE;AACN,oBAAA,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;AACf,oBAAA,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE;AAChB,iBAAA;aACF,CAAA;YACD,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,CAAA;YAE5D,OAAO,CAAC,CAAS,KAAY;AAC3B,gBAAA,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;AAC7B,gBAAA,OAAO,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;AACvC,aAAC,CAAA;AACH,SAAC,CAAC,CAAA;AACH,KAAA;AAAM,SAAA;AACL,QAAA,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;AACxC,KAAA;AACH,CAAC;AAEe,SAAA,UAAU,CAA6B,SAAyD,EAAE,QAAgB,EAAA;AAChI,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;AACnB,SAAA,MAAM,EAAE,CAAA;AACb;;;;"}

package/components/radial-dendrogram/modules/node.d.ts

@@ -0,0 +1,16 @@
+import { Selection } from 'd3-selection';
+import { HierarchyRectangularNode } from 'd3-hierarchy';
+import { Arc } from 'd3-shape';
+import { Hierarchy } from '../types';
+import { RadialDendrogramConfig } from '../config';
+export interface ArcNode extends SVGElement {
+    _animState?: {
+        x0: number;
+        x1: number;
+        y0: number;
+        y1: number;
+    };
+}
+export declare function createNode<H extends Hierarchy>(selection: Selection<SVGPathElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, config: RadialDendrogramConfig<H>): void;
+export declare function updateNode<H extends Hierarchy>(selection: Selection<SVGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, config: RadialDendrogramConfig<H>, arcGen: Arc<any, any>, duration: number): void;
+export declare function removeNode<H>(selection: Selection<SVGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, duration: number): void;

package/components/radial-dendrogram/modules/node.js

@@ -0,0 +1,51 @@
+import { interpolate } from 'd3-interpolate';
+import { getColor } from '../../../utils/color.js';
+import { smartTransition } from '../../../utils/d3.js';
+
+function createNode(selection, config) {
+    selection
+        .style('fill', d => getColor(d.data, config.nodeColor, d.depth))
+        .style('stroke', d => getColor(d.data, config.nodeColor, d.depth))
+        .style('opacity', 0)
+        .each((d, i, els) => {
+        const arcNode = els[i];
+        const angleCenter = (d.x0 + d.x1) / 2;
+        const angleHalfWidth = (d.x1 - d.x0) / 2;
+        arcNode._animState = {
+            x0: angleCenter - angleHalfWidth * 0.8,
+            x1: angleCenter + angleHalfWidth * 0.8,
+            y0: d.y0,
+            y1: d.y1,
+        };
+    });
+}
+function updateNode(selection, config, arcGen, duration) {
+    selection
+        .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
+        .style('fill', d => getColor(d.data, config.nodeColor, d.depth))
+        .style('stroke', d => getColor(d.data, config.nodeColor, d.depth));
+    if (duration) {
+        const transition = smartTransition(selection, duration)
+            .style('opacity', 1);
+        transition.attrTween('d', (d, i, els) => {
+            const arcNode = els[i];
+            const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 };
+            const datum = interpolate(arcNode._animState, nextAnimState);
+            return (t) => {
+                arcNode._animState = datum(t);
+                return arcGen(arcNode._animState);
+            };
+        });
+    }
+    else {
+        selection.attr('d', d => arcGen(d));
+    }
+}
+function removeNode(selection, duration) {
+    smartTransition(selection, duration)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { createNode, removeNode, updateNode };
+//# sourceMappingURL=node.js.map

package/components/radial-dendrogram/modules/node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.js","sources":["../../../../src/components/radial-dendrogram/modules/node.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolate } from 'd3-interpolate'\nimport { HierarchyRectangularNode } from 'd3-hierarchy'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { Hierarchy } from '../types'\n\n// Config\nimport { RadialDendrogramConfig } from '../config'\n\nexport interface ArcNode extends SVGElement {\n  _animState?: { x0: number; x1: number; y0: number; y1: number };\n}\n\nexport function createNode<H extends Hierarchy> (selection: Selection<SVGPathElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, config: RadialDendrogramConfig<H>): void {\n  selection\n    .style('fill', d => getColor(d.data, config.nodeColor, d.depth))\n    .style('stroke', d => getColor(d.data, config.nodeColor, d.depth))\n    .style('opacity', 0)\n    .each((d, i, els) => {\n      const arcNode: ArcNode = els[i]\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleHalfWidth = (d.x1 - d.x0) / 2\n      arcNode._animState = {\n        x0: angleCenter - angleHalfWidth * 0.8,\n        x1: angleCenter + angleHalfWidth * 0.8,\n        y0: d.y0,\n        y1: d.y1,\n      }\n    })\n}\n\nexport function updateNode<H extends Hierarchy> (selection: Selection<SVGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, config: RadialDendrogramConfig<H>, arcGen: Arc<any, any>, duration: number): void {\n  selection\n    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables\n    .style('fill', d => getColor(d.data, config.nodeColor, d.depth))\n    .style('stroke', d => getColor(d.data, config.nodeColor, d.depth))\n\n  if (duration) {\n    const transition = smartTransition(selection, duration)\n      .style('opacity', 1) as Transition<SVGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>\n\n    transition.attrTween('d', (d, i, els) => {\n      const arcNode: ArcNode = els[i]\n      const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }\n      const datum = interpolate(arcNode._animState, nextAnimState)\n\n      return (t: number): string => {\n        arcNode._animState = datum(t)\n        return arcGen(arcNode._animState)\n      }\n    })\n  } else {\n    selection.attr('d', d => arcGen(d))\n  }\n}\n\nexport function removeNode<H> (selection: Selection<SVGElement, HierarchyRectangularNode<H>, SVGGElement, HierarchyRectangularNode<H>[]>, duration: number): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":[],"mappings":"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"}

package/components/radial-dendrogram/style.d.ts

@@ -0,0 +1,6 @@
+export declare const root: string;
+export declare const variables: void;
+export declare const node: string;
+export declare const gLabel: string;
+export declare const label: string;
+export declare const link: string;

package/components/radial-dendrogram/style.js

@@ -0,0 +1,54 @@
+import { css, injectGlobal } from '@emotion/css';
+
+const root = css `
+  label: radial-dendrogram-component;
+`;
+const variables = injectGlobal `
+  :root {
+    --vis-radial-dendrogram-link-color: #cad5f6;
+    --vis-radial-dendrogram-label-font-family: var(--vis-font-family);
+
+    --vis-dark-radial-dendrogram-link-color: #333333;
+  }
+
+  body.theme-dark ${`.${root}`} {
+    --vis-radial-dendrogram-link-color: var(--vis-dark-radial-dendrogram-link-color);
+  }
+`;
+const node = css `
+  label: node;
+  stroke-width: 0;
+  fill: var(--vis-color-main);
+  stroke: var(--vis-color-main);
+
+  &:hover {
+    stroke-width: 2;
+  }
+`;
+const gLabel = css `
+  label: group-label;
+`;
+const label = css `
+  label: label;
+
+  &, tspan {
+    font-family: var(--vis-radial-dendrogram-label-font-family);
+  }
+
+  dominant-baseline: middle;
+  user-select: none;
+`;
+const link = css `
+  label: link;
+
+  fill: var(--vis-radial-dendrogram-link-color);
+  fill-opacity: 0.5;
+  transition: .1s fill-opacity;
+
+  &:hover {
+    fill-opacity: 1;
+  }
+`;
+
+export { gLabel, label, link, node, root, variables };
+//# sourceMappingURL=style.js.map