@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.9

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

@@ -0,0 +1,21 @@
+import { Selection } from 'd3-selection';
+import { Line } from 'd3-shape';
+import { ChordInputLink, ChordInputNode, ChordRibbon } from '../types';
+import { ChordDiagramConfig } from '../config';
+export interface ArcLink extends SVGElement {
+    _animState?: {
+        source: {
+            y0: number;
+            y1: number;
+        };
+        target: {
+            x0: number;
+            x1: number;
+            y1: number;
+        };
+    };
+}
+export declare function emptyPath(): string;
+export declare function createLink<N extends ChordInputNode>(selection: Selection<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>, lineGen: Line<[number, number]>): void;
+export declare function updateLink<N extends ChordInputNode, L extends ChordInputLink>(selection: Selection<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>, config: ChordDiagramConfig<N, L>, lineGen: Line<[number, number]>, duration: number): void;
+export declare function removeLink(selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>, duration: number): void;

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

@@ -0,0 +1,63 @@
+import { select } from 'd3-selection';
+import { path } from 'd3-path';
+import { interpolatePath } from 'd3-interpolate-path';
+import { getColor } from '../../../utils/color.js';
+import { smartTransition } from '../../../utils/d3.js';
+
+function emptyPath() {
+    return 'M0,0 L0,0';
+}
+// Creates a path consisting of the inner source arc, node arcs and connecting curves
+function linkGen(points, lineGen) {
+    const p = path();
+    const sourceArc = points[0];
+    const targetArc = points[points.length - 1];
+    if (points.length === 2) {
+        // Writing a custom curve here since generators won't produce a curved line from only two points
+        p.moveTo(sourceArc.x1, sourceArc.y1);
+        p.quadraticCurveTo(0, 0, targetArc.x0, targetArc.y0);
+        p.arc(0, 0, targetArc.r, targetArc.a0, targetArc.a1);
+        p.quadraticCurveTo(0, 0, sourceArc.x0, sourceArc.y0);
+        p.arc(0, 0, sourceArc.r, sourceArc.a0, sourceArc.a1);
+    }
+    else {
+        const inner = points.map((d, i) => i < points.length / 2 ? [d.x1, d.y1] : [d.x0, d.y0]);
+        const outer = points.map((d, i) => i < points.length / 2 ? [d.x0, d.y0] : [d.x1, d.y1]);
+        lineGen.context(p);
+        lineGen(inner);
+        p.arc(0, 0, targetArc.r, targetArc.a0, targetArc.a1);
+        lineGen(outer.reverse());
+        p.arc(0, 0, sourceArc.r, sourceArc.a0, sourceArc.a1);
+    }
+    return p.toString();
+}
+function createLink(selection, lineGen) {
+    selection
+        .attr('d', d => linkGen(d.points, lineGen) || emptyPath())
+        .style('opacity', 0);
+}
+function updateLink(selection, config, lineGen, duration) {
+    const selTransition = smartTransition(selection, duration)
+        .style('fill', d => getColor(d.data, config.linkColor))
+        .style('stroke', d => getColor(d.data, config.linkColor))
+        .style('opacity', 'var(--vis-chord-diagram-link-opacity)');
+    if (duration) {
+        const transition = selTransition;
+        transition.attrTween('d', (d, i, el) => {
+            const previous = select(el[i]).attr('d');
+            const next = linkGen(d.points, lineGen) || emptyPath();
+            return interpolatePath(previous, next);
+        });
+    }
+    else {
+        selTransition.attr('d', d => linkGen(d.points, lineGen) || emptyPath());
+    }
+}
+function removeLink(selection, duration) {
+    smartTransition(selection, duration)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { createLink, emptyPath, removeLink, updateLink };
+//# sourceMappingURL=link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../../../src/components/chord-diagram/modules/link.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { path } from 'd3-path'\nimport { Line } from 'd3-shape'\nimport { Transition } from 'd3-transition'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordRibbon, ChordRibbonPoint } from '../types'\nimport { ChordDiagramConfig } from '../config'\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 emptyPath (): string {\n  return 'M0,0 L0,0'\n}\n\n// Creates a path consisting of the inner source arc, node arcs and connecting curves\nfunction linkGen (points: ChordRibbonPoint[], lineGen: Line<[number, number]>): string {\n  const p = path()\n  const sourceArc = points[0]\n  const targetArc = points[points.length - 1]\n\n  if (points.length === 2) {\n    // Writing a custom curve here since generators won't produce a curved line from only two points\n    p.moveTo(sourceArc.x1, sourceArc.y1)\n    p.quadraticCurveTo(0, 0, targetArc.x0, targetArc.y0)\n    p.arc(0, 0, targetArc.r, targetArc.a0, targetArc.a1)\n    p.quadraticCurveTo(0, 0, sourceArc.x0, sourceArc.y0)\n    p.arc(0, 0, sourceArc.r, sourceArc.a0, sourceArc.a1)\n  } else {\n    const inner: [number, number][] = points.map((d, i) => i < points.length / 2 ? [d.x1, d.y1] : [d.x0, d.y0])\n    const outer: [number, number][] = points.map((d, i) => i < points.length / 2 ? [d.x0, d.y0] : [d.x1, d.y1])\n\n    lineGen.context(p as CanvasRenderingContext2D)\n    lineGen(inner)\n    p.arc(0, 0, targetArc.r, targetArc.a0, targetArc.a1)\n    lineGen(outer.reverse())\n    p.arc(0, 0, sourceArc.r, sourceArc.a0, sourceArc.a1)\n  }\n  return p.toString()\n}\n\nexport function createLink<N extends ChordInputNode> (\n  selection: Selection<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>,\n  lineGen: Line<[number, number]>\n): void {\n  selection\n    .attr('d', d => linkGen(d.points, lineGen) || emptyPath())\n    .style('opacity', 0)\n}\n\nexport function updateLink<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfig<N, L>,\n  lineGen: Line<[number, number]>,\n  duration: number\n): void {\n  const selTransition = smartTransition(selection, duration)\n    .style('fill', d => getColor(d.data, config.linkColor))\n    .style('stroke', d => getColor(d.data, config.linkColor))\n    .style('opacity', 'var(--vis-chord-diagram-link-opacity)')\n\n  if (duration) {\n    const transition = selTransition as Transition<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>\n    transition.attrTween('d', (d, i, el) => {\n      const previous = select(el[i]).attr('d')\n      const next = linkGen(d.points, lineGen) || emptyPath()\n      return interpolatePath(previous, next)\n    })\n  } else {\n    selTransition.attr('d', d => linkGen(d.points, lineGen) || emptyPath())\n  }\n}\n\nexport function removeLink (\n  selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import { Selection } from 'd3-selection';
+import { Arc } from 'd3-shape';
+import { ChordInputNode, ChordInputLink, ChordNode } from '../types';
+import { ChordDiagramConfig } from '../config';
+declare type AnimState = {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+};
+export interface ArcNode extends SVGElement {
+    _animState?: AnimState;
+}
+export declare function createNode<N extends ChordInputNode, L extends ChordInputLink>(selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>): void;
+export declare function updateNode<N extends ChordInputNode, L extends ChordInputLink>(selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>, config: ChordDiagramConfig<N, L>, arcGen: Arc<unknown, AnimState>, duration: number): void;
+export declare function removeNode<N extends ChordInputNode>(selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>, duration: number): void;
+export {};

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

@@ -0,0 +1,52 @@
+import { interpolate } from 'd3-interpolate';
+import { getColor } from '../../../utils/color.js';
+import { smartTransition } from '../../../utils/d3.js';
+
+function createNode(selection) {
+    selection
+        .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) {
+    const nodeColor = (d) => getColor(d.data, config.nodeColor, d.height);
+    selection
+        .attr('id', d => d.uid)
+        .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
+        .style('fill', nodeColor)
+        .style('stroke', nodeColor);
+    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))
+            .style('opacity', 1);
+    }
+}
+function removeNode(selection, duration) {
+    smartTransition(selection, duration)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { createNode, removeNode, updateNode };
+//# sourceMappingURL=node.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"node.js","sources":["../../../../src/components/chord-diagram/modules/node.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 { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordNode } from '../types'\n\n// Config\nimport { ChordDiagramConfig } from '../config'\n\ntype AnimState = { x0: number; x1: number; y0: number; y1: number }\nexport interface ArcNode extends SVGElement {\n  _animState?: AnimState;\n}\n\nexport function createNode<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>\n): void {\n  selection\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<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfig<N, L>,\n  arcGen: Arc<unknown, AnimState>,\n  duration: number\n): void {\n  const nodeColor = (d: ChordNode<N>): string => getColor(d.data, config.nodeColor, d.height)\n\n  selection\n    .attr('id', d => d.uid)\n    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables\n    .style('fill', nodeColor)\n    .style('stroke', nodeColor)\n\n  if (duration) {\n    const transition = smartTransition(selection, duration)\n      .style('opacity', 1) as Transition<SVGPathElement, ChordNode<N>, SVGGElement, ChordNode<N>>\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      .style('opacity', 1)\n  }\n}\n\nexport function removeNode<N extends ChordInputNode> (\n  selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":[],"mappings":";;;;AAoBM,SAAU,UAAU,CACxB,SAAwE,EAAA;IAExE,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,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;AACrC,QAAA,MAAM,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;QACxC,OAAO,CAAC,UAAU,GAAG;AACnB,YAAA,EAAE,EAAE,WAAW,GAAG,cAAc,GAAG,GAAG;AACtC,YAAA,EAAE,EAAE,WAAW,GAAG,cAAc,GAAG,GAAG;YACtC,EAAE,EAAE,CAAC,CAAC,EAAE;YACR,EAAE,EAAE,CAAC,CAAC,EAAE;SACT,CAAA;AACH,KAAC,CAAC,CAAA;AACN,CAAC;AAEK,SAAU,UAAU,CACxB,SAAwE,EACxE,MAAgC,EAChC,MAA+B,EAC/B,QAAgB,EAAA;IAEhB,MAAM,SAAS,GAAG,CAAC,CAAe,KAAa,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IAE3F,SAAS;SACN,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC;SACtB,KAAK,CAAC,YAAY,EAAE,CAAA,KAAA,EAAQ,QAAQ,CAAI,EAAA,CAAA,CAAC;AACzC,SAAA,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC;AACxB,SAAA,KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;AAE7B,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,MAAM,UAAU,GAAG,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACpD,aAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAwE,CAAA;AAE7F,QAAA,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,KAAI;AACtC,YAAA,MAAM,OAAO,GAAY,GAAG,CAAC,CAAC,CAAC,CAAA;YAC/B,MAAM,aAAa,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAA;YAChE,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,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;AACnC,aAAC,CAAA;AACH,SAAC,CAAC,CAAA;AACH,KAAA;AAAM,SAAA;AACL,QAAA,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;AAChC,aAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AACvB,KAAA;AACH,CAAC;AAEe,SAAA,UAAU,CACxB,SAAmE,EACnE,QAAgB,EAAA;AAEhB,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;AACnB,SAAA,MAAM,EAAE,CAAA;AACb;;;;"}

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

@@ -0,0 +1,13 @@
+export declare const root: string;
+export declare const variables: void;
+export declare const nodes: string;
+export declare const links: string;
+export declare const labels: string;
+export declare const node: string;
+export declare const hoveredNode: string;
+export declare const gLabel: string;
+export declare const label: string;
+export declare const labelExit: string;
+export declare const link: string;
+export declare const hoveredLink: string;
+export declare const transparent: string;

package/{src/components/chord-diagram/style.ts → components/chord-diagram/style.js}

@@ -1,10 +1,9 @@
-import { css, injectGlobal } from '@emotion/css'
+import { css, injectGlobal } from '@emotion/css';
 
-export const root = css`
+const root = css `
   label: chord-diagram-component;
-`
-
-export const variables = injectGlobal`
+`;
+const variables = injectGlobal `
   :root {
     --vis-chord-diagram-link-fill-color: #cad5f6;
     --vis-chord-diagram-link-stroke-color: #777777;
@@ -20,21 +19,17 @@ export const variables = injectGlobal`
   body.theme-dark ${`.${root}`} {
     --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);
   }
-`
-
-export const nodes = css`
+`;
+const nodes = css `
   label: nodes;
-`
-
-export const links = css`
+`;
+const links = css `
   label: links;
-`
-
-export const labels = css`
+`;
+const labels = css `
   label: labels;
-`
-
-export const node = css`
+`;
+const node = css `
   label: node;
   stroke-width: 0;
   fill: var(--vis-color-main);
@@ -43,19 +38,16 @@ export const node = css`
   &:hover {
     stroke-width: 2;
   }
-`
-
-export const hoveredNode = css`
+`;
+const hoveredNode = css `
   label: hovered;
   fill-opacity: 1;
   stroke-width: 1.5;
-`
-
-export const gLabel = css`
+`;
+const gLabel = css `
   label: group-label;
-`
-
-export const label = css`
+`;
+const label = css `
   label: label;
 
   dominant-baseline: middle;
@@ -65,13 +57,11 @@ export const label = css`
   > textPath {
     dominant-baseline: central;
   }
-`
-
-export const labelExit = css`
+`;
+const labelExit = css `
   label: label-exit;
-`
-
-export const link = css`
+`;
+const link = css `
   label: link;
 
   fill: var(--vis-chord-diagram-link-fill-color);
@@ -82,17 +72,18 @@ export const link = css`
   &:hover {
     fill-opacity: 1;
   }
-`
-
-export const hoveredLink = css`
+`;
+const hoveredLink = css `
   label: hovered;
   fill-opacity: 0.9;
-`
-
-export const transparent = css`
+`;
+const transparent = css `
   fill-opacity: 0.25;
 
   text {
     fill-opacity: 1;
   }
-`
+`;
+
+export { gLabel, hoveredLink, hoveredNode, label, labelExit, labels, link, links, node, nodes, root, transparent, variables };
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-chord-diagram-link-fill-color: #cad5f6;\n    --vis-chord-diagram-link-stroke-color: #777777;\n    --vis-chord-diagram-link-opacity: 0.5;\n    --vis-chord-diagram-link-stroke-opacity: 0.15;\n\n    --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n    --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n\n    --vis-dark-chord-diagram-link-fill-color: #575c65;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n  }\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const node = css`\n  label: node;\n  stroke-width: 0;\n  fill: var(--vis-color-main);\n  stroke: var(--vis-color-main);\n\n  &:hover {\n    stroke-width: 2;\n  }\n`\n\nexport const hoveredNode = css`\n  label: hovered;\n  fill-opacity: 1;\n  stroke-width: 1.5;\n`\n\nexport const gLabel = css`\n  label: group-label;\n`\n\nexport const label = css`\n  label: label;\n\n  dominant-baseline: middle;\n  user-select: none;\n  pointer-events: none;\n\n  > textPath {\n    dominant-baseline: central;\n  }\n`\n\nexport const labelExit = css`\n  label: label-exit;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: var(--vis-chord-diagram-link-fill-color);\n  stroke: var(--vis-chord-diagram-link-stroke-color);\n  stroke-opacity:  var(--vis-chord-diagram-link-stroke-opacity);\n  transition: .1s fill-opacity;\n\n  &:hover {\n    fill-opacity: 1;\n  }\n`\n\nexport const hoveredLink = css`\n  label: hovered;\n  fill-opacity: 0.9;\n`\n\nexport const transparent = css`\n  fill-opacity: 0.25;\n\n  text {\n    fill-opacity: 1;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;AAajB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAG7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAStB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWtB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;EAG7B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;"}

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

@@ -0,0 +1,58 @@
+import { HierarchyRectangularNode } from 'd3-hierarchy';
+import { GraphLinkCore, GraphNodeCore } from "../../types";
+export interface ChordInputNode {
+    id?: string;
+}
+export interface ChordInputLink {
+    id?: string;
+    source: number | string | ChordInputNode;
+    target: number | string | ChordInputNode;
+}
+export declare type ChordDiagramData<N extends ChordInputNode, L extends ChordInputLink> = {
+    nodes: N[];
+    links?: L[];
+};
+export interface ChordHierarchyNode<N> {
+    key: string;
+    values: (ChordHierarchyNode<N> | N)[];
+    depth?: number;
+    height?: number;
+    value?: number;
+    ancestors?: string[];
+}
+export declare type ChordNodeState = {
+    _state: {
+        hovered?: boolean;
+        value?: number;
+    };
+    _prevX1?: number;
+};
+export declare type ChordNodeCore<N> = HierarchyRectangularNode<N> & ChordNodeState & {
+    data: N;
+    uid: string;
+};
+export declare type ChordNodeDatum<N> = ChordHierarchyNode<N> | N;
+export declare type ChordNode<N extends ChordInputNode> = ChordNodeCore<ChordNodeDatum<N>>;
+export declare type ChordLeafNode<N extends ChordInputNode> = ChordNodeCore<GraphNodeCore<N, ChordInputLink>>;
+export declare type ChordRibbonPoint = {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+    a0: number;
+    a1: number;
+    r: number;
+};
+export interface ChordRibbon<N extends ChordInputNode> {
+    source: ChordLeafNode<N>;
+    target: ChordLeafNode<N>;
+    points: ChordRibbonPoint[];
+    data: GraphLinkCore<N, ChordInputLink>;
+    _state: {
+        hovered?: boolean;
+    };
+}
+export declare enum ChordLabelAlignment {
+    Along = "along",
+    Perpendicular = "perpendicular"
+}

package/components/chord-diagram/types.js

@@ -0,0 +1,8 @@
+var ChordLabelAlignment;
+(function (ChordLabelAlignment) {
+    ChordLabelAlignment["Along"] = "along";
+    ChordLabelAlignment["Perpendicular"] = "perpendicular";
+})(ChordLabelAlignment || (ChordLabelAlignment = {}));
+
+export { ChordLabelAlignment };
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/chord-diagram/types.ts"],"sourcesContent":["import { HierarchyRectangularNode } from 'd3-hierarchy'\nimport { GraphLinkCore, GraphNodeCore } from 'types'\n\n// Node data flow in the component:\n// Input data (N extends ChordInputNode, L extends ChordInputLink)\n//   => GraphNodeCore<N>[] (we reference it only in a few places when it's needed, to make the code easier to read)\n//   => ChordHierarchyNode (nested object representing node hierarchy)\n//   => ChordNode[] and ChordLeafNode[] (HierarchyRectangularNode[] from D3 partition)\n\nexport interface ChordInputNode {\n  id?: string;\n}\n\nexport interface ChordInputLink {\n  id?: string;\n  source: number | string | ChordInputNode;\n  target: number | string | ChordInputNode;\n}\n\nexport type ChordDiagramData<\n  N extends ChordInputNode,\n  L extends ChordInputLink,\n> = {\n  nodes: N[];\n  links?: L[];\n}\n\nexport interface ChordHierarchyNode<N> {\n  key: string;\n  values: (ChordHierarchyNode<N> | N)[];\n  depth?: number;\n  height?: number;\n  value?: number;\n  ancestors?: string[];\n}\n\nexport type ChordNodeState = {\n  _state: {\n    hovered?: boolean;\n    value?: number;\n  };\n  _prevX1?: number;\n}\n\nexport type ChordNodeCore<N> = HierarchyRectangularNode<N> & ChordNodeState & {\n  data: N;\n  uid: string; // Unique id for textPath href\n}\n\nexport type ChordNodeDatum<N> = ChordHierarchyNode<N> | N;\nexport type ChordNode<N extends ChordInputNode> = ChordNodeCore<ChordNodeDatum<N>>\nexport type ChordLeafNode<N extends ChordInputNode> = ChordNodeCore<GraphNodeCore<N, ChordInputLink>>\n\nexport type ChordRibbonPoint = { x0: number; x1: number; y0: number; y1: number; a0: number; a1: number; r: number }\nexport interface ChordRibbon<N extends ChordInputNode> {\n  source: ChordLeafNode<N>;\n  target: ChordLeafNode<N>;\n  points: ChordRibbonPoint[];\n  data: GraphLinkCore<N, ChordInputLink>;\n  _state: {\n    hovered?: boolean;\n  };\n}\n\nexport enum ChordLabelAlignment {\n  Along = 'along',\n  Perpendicular = 'perpendicular',\n}\n"],"names":[],"mappings":"IAgEY,oBAGX;AAHD,CAAA,UAAY,mBAAmB,EAAA;AAC7B,IAAA,mBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,mBAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AACjC,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,GAG9B,EAAA,CAAA,CAAA;;;;"}

package/components/crosshair/config.d.ts

@@ -0,0 +1,43 @@
+import { XYComponentConfigInterface, XYComponentConfig } from "../../core/xy-component/config";
+import { Tooltip } from "../tooltip";
+import { NumericAccessor } from "../../types/accessor";
+import { ContinuousScale } from "../../types/scale";
+import { CrosshairCircle } from './types';
+export interface CrosshairConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
+    /** Separate array of accessors for stacked components (eg StackedBar, Area). Default: `undefined` */
+    yStacked?: NumericAccessor<Datum>[];
+    /** Baseline accessor function for stacked values, useful with stacked areas. Default: `null` */
+    baseline?: NumericAccessor<Datum>;
+    /** An instance of the Tooltip component to be used with Crosshair. Default: `undefined` */
+    tooltip?: Tooltip | undefined;
+    /** Tooltip template accessor. The function is supposed to return either a valid HTML string or an HTMLElement. Default: `d => ''` */
+    template?: (data: Datum, x: number | Date) => string | HTMLElement;
+    /** Hide Crosshair when the corresponding element is far from mouse pointer. Default: `true` */
+    hideWhenFarFromPointer?: boolean;
+    /** Distance in pixels to check in the hideWhenFarFromPointer condition. Default: `100` */
+    hideWhenFarFromPointerDistance?: number;
+    /** Snap to the nearest data point.
+     * If disabled, the tooltip template will receive only the horizontal position of the crosshair and you'll be responsible
+     * for getting the underlying data records and crosshair circles (see the `getCircles` configuration option).
+     * Default: `true`
+    */
+    snapToData?: boolean;
+    /** Custom function for setting up the crosshair circles, usually needed when `snapToData` is set to `false`.
+     * The function receives the horizontal position of the crosshair (in the data space, not in pixels), the data array
+     * and the `yScale` instance to help you calculate the correct vertical position of the circles.
+     * It has to return an array of the CrosshairCircle objects: `{ y: number; color: string; opacity?: number }[]`.
+     * Default: `undefined`
+    */
+    getCircles?: (x: number, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[];
+}
+export declare class CrosshairConfig<Datum> extends XYComponentConfig<Datum> implements CrosshairConfigInterface<Datum> {
+    yStacked: any;
+    baseline: any;
+    duration: number;
+    tooltip: Tooltip;
+    template: ((data: Datum, x: number | Date) => string | HTMLElement);
+    hideWhenFarFromPointer: boolean;
+    hideWhenFarFromPointerDistance: number;
+    snapToData: boolean;
+    getCircles: any;
+}

package/components/crosshair/config.js

@@ -0,0 +1,19 @@
+import { XYComponentConfig } from '../../core/xy-component/config.js';
+
+class CrosshairConfig extends XYComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.yStacked = undefined;
+        this.baseline = null;
+        this.duration = 100;
+        this.tooltip = undefined;
+        this.template = (d) => '';
+        this.hideWhenFarFromPointer = true;
+        this.hideWhenFarFromPointerDistance = 100;
+        this.snapToData = true;
+        this.getCircles = undefined;
+    }
+}
+
+export { CrosshairConfig };
+//# sourceMappingURL=config.js.map

package/components/crosshair/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/crosshair/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\nimport { Tooltip } from 'components/tooltip'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { ContinuousScale } from 'types/scale'\nimport { CrosshairCircle } from './types'\n\n// We extend partial XY config interface because x and y properties are optional for Crosshair\nexport interface CrosshairConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Separate array of accessors for stacked components (eg StackedBar, Area). Default: `undefined` */\n  yStacked?: NumericAccessor<Datum>[];\n  /** Baseline accessor function for stacked values, useful with stacked areas. Default: `null` */\n  baseline?: NumericAccessor<Datum>;\n  /** An instance of the Tooltip component to be used with Crosshair. Default: `undefined` */\n  tooltip?: Tooltip | undefined;\n  /** Tooltip template accessor. The function is supposed to return either a valid HTML string or an HTMLElement. Default: `d => ''` */\n  template?: (data: Datum, x: number | Date) => string | HTMLElement;\n  /** Hide Crosshair when the corresponding element is far from mouse pointer. Default: `true` */\n  hideWhenFarFromPointer?: boolean;\n  /** Distance in pixels to check in the hideWhenFarFromPointer condition. Default: `100` */\n  hideWhenFarFromPointerDistance?: number;\n  /** Snap to the nearest data point.\n   * If disabled, the tooltip template will receive only the horizontal position of the crosshair and you'll be responsible\n   * for getting the underlying data records and crosshair circles (see the `getCircles` configuration option).\n   * Default: `true`\n  */\n  snapToData?: boolean;\n  /** Custom function for setting up the crosshair circles, usually needed when `snapToData` is set to `false`.\n   * The function receives the horizontal position of the crosshair (in the data space, not in pixels), the data array\n   * and the `yScale` instance to help you calculate the correct vertical position of the circles.\n   * It has to return an array of the CrosshairCircle objects: `{ y: number; color: string; opacity?: number }[]`.\n   * Default: `undefined`\n  */\n  getCircles?: (x: number, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[];\n}\n\nexport class CrosshairConfig<Datum> extends XYComponentConfig<Datum> implements CrosshairConfigInterface<Datum> {\n  yStacked = undefined\n  baseline = null\n  duration = 100\n  tooltip: Tooltip = undefined\n  template: ((data: Datum, x: number | Date) => string | HTMLElement) = (d: Datum): string => ''\n  hideWhenFarFromPointer = true\n  hideWhenFarFromPointerDistance = 100\n  snapToData = true\n  getCircles = undefined\n}\n"],"names":[],"mappings":";;AAqCM,MAAO,eAAuB,SAAQ,iBAAwB,CAAA;AAApE,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;QACpB,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAA;QACd,IAAO,CAAA,OAAA,GAAY,SAAS,CAAA;AAC5B,QAAA,IAAA,CAAA,QAAQ,GAA8D,CAAC,CAAQ,KAAa,EAAE,CAAA;QAC9F,IAAsB,CAAA,sBAAA,GAAG,IAAI,CAAA;QAC7B,IAA8B,CAAA,8BAAA,GAAG,GAAG,CAAA;QACpC,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;QACjB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;KACvB;AAAA;;;;"}

package/components/crosshair/index.d.ts

@@ -0,0 +1,35 @@
+import { Selection } from 'd3-selection';
+import { XYComponentCore } from "../../core/xy-component";
+import { Tooltip } from "../tooltip";
+import { CrosshairAccessors } from './types';
+import { CrosshairConfig, CrosshairConfigInterface } from './config';
+import * as s from './style';
+export declare class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairConfig<Datum>, CrosshairConfigInterface<Datum>> {
+    static selectors: typeof s;
+    clippable: boolean;
+    config: CrosshairConfig<Datum>;
+    container: Selection<SVGSVGElement, any, SVGSVGElement, any>;
+    line: Selection<SVGLineElement, any, SVGElement, any>;
+    x: number;
+    datum: Datum;
+    datumIndex: number;
+    show: boolean;
+    private _animFrameId;
+    /** Tooltip component to be used by Crosshair if not provided by the config.
+     * This property is supposed to be set externally by a container component like XYContainer. */
+    tooltip: Tooltip;
+    /** Accessors passed externally (e.g. from XYContainer) */
+    private _accessors;
+    set accessors(accessors: CrosshairAccessors<Datum>);
+    get accessors(): CrosshairAccessors<Datum>;
+    constructor(config?: CrosshairConfigInterface<Datum>);
+    setContainer(containerSvg: Selection<SVGSVGElement, unknown, SVGSVGElement, unknown>): void;
+    _render(customDuration?: number): void;
+    hide(): void;
+    _onMouseMove(event: MouseEvent): void;
+    _onMouseOut(): void;
+    _showTooltip(event: MouseEvent): void;
+    _hideTooltip(): void;
+    getYDataExtent(): number[];
+    private getCircleData;
+}