@unovis/ts 1.4.0-beta.6 → 1.4.0

package/components/annotations/index.d.ts

@@ -1,24 +1,26 @@
 import { Selection } from 'd3-selection';
 import { ComponentCore } from "../../core/component";
-import { Spacing } from "../../types/spacing";
 import { AnnotationsConfigInterface } from './config';
 import * as s from './style';
 export declare class Annotations extends ComponentCore<unknown[], AnnotationsConfigInterface> {
     static selectors: typeof s;
     static cssVariables: {
+        annotationsTextColor: "--vis-annotations-text-color";
         annotationsConnectorStrokeColor: "--vis-annotations-connector-stroke-color";
         annotationsConnectorStrokeWidth: "--vis-annotations-connector-stroke-width";
         annotationsConnectorStrokeDasharray: "--vis-annotations-connector-stroke-dasharray";
         annotationsSubjectStrokeColor: "--vis-annotations-subject-stroke-color";
         annotationsSubjectFillColor: "--vis-annotations-subject-fill-color";
         annotationsSubjectStrokeDasharray: "--vis-annotations-subject-stroke-dasharray";
+        darkAnnotationsTextColor: "--vis-dark-annotations-text-color";
+        darkAnnotationsConnectorStrokeColor: "--vis-dark-annotations-connector-stroke-color";
+        darkAnnotationsSubjectStrokeColor: "--vis-dark-annotations-subject-stroke-color";
     };
     protected _defaultConfig: AnnotationsConfigInterface;
     config: AnnotationsConfigInterface;
     g: Selection<SVGGElement, unknown, null, undefined>;
     events: {};
     constructor(config?: AnnotationsConfigInterface);
-    get bleed(): Spacing;
     _render(customDuration?: number): void;
     private _renderSubject;
 }

package/components/annotations/index.js

@@ -4,9 +4,10 @@ import { isNumber } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { renderTextIntoFrame } from '../../utils/text.js';
 import { parseUnit } from '../../utils/misc.js';
+import { UNOVIS_TEXT_DEFAULT } from '../../styles/index.js';
 import { AnnotationsDefaultConfig } from './config.js';
 import * as style from './style.js';
-import { annotation, annotationContent, clickable, annotationSubject, variables } from './style.js';
+import { annotation, annotationContent, annotationSubject, variables } from './style.js';
 
 class Annotations extends ComponentCore {
     constructor(config) {
@@ -17,56 +18,49 @@ class Annotations extends ComponentCore {
         if (config)
             this.setConfig(config);
     }
-    // Todo: implement
-    get bleed() {
-        return { top: 0, bottom: 0, left: 0, right: 0 };
-    }
     _render(customDuration) {
-        var _a, _b;
         super._render(customDuration);
         const { config } = this;
         const duration = isNumber(customDuration) ? customDuration : config.duration;
-        const annotations = this.g
-            .selectAll(`.${annotation}`)
-            .data((_a = config.items) !== null && _a !== void 0 ? _a : []);
+        const annotations = this.g.selectAll(`.${annotation}`)
+            .data(config.items, d => JSON.stringify(d));
         const annotationsEnter = annotations.enter().append('g')
-            .attr('class', annotation);
-        annotationsEnter.append('g')
-            .attr('class', annotationContent)
-            .classed(clickable, ((_b = config.events) === null || _b === void 0 ? void 0 : _b[annotationContent]) !== undefined);
-        const annotationsSubject = annotationsEnter.append('g')
+            .attr('class', annotation)
+            .style('opacity', 0);
+        // Content
+        annotationsEnter.append('g').attr('class', annotationContent);
+        // Subject
+        const subject = annotationsEnter.append('g')
             .attr('class', annotationSubject);
-        annotationsSubject.append('circle');
-        annotationsSubject.append('line');
-        // Todo: smooth transition
-        annotationsEnter.merge(annotations)
+        subject.append('circle');
+        subject.append('line');
+        const annotationsMerged = annotationsEnter.merge(annotations)
+            .attr('cursor', d => d === null || d === void 0 ? void 0 : d.cursor)
             .each((annotation, i, elements) => {
-            // Content rendering
-            if (annotation === null || annotation === void 0 ? void 0 : annotation.content) {
-                const contentGroupElement = select(elements[i])
-                    .select(`.${annotationContent}`);
-                const content = typeof annotation.content === 'string' ? { text: annotation.content, fontSize: 12 } : annotation.content;
+            if (annotation.content) {
+                const content = typeof annotation.content === 'string' ? Object.assign(Object.assign({}, UNOVIS_TEXT_DEFAULT), { text: annotation.content }) : annotation.content;
                 const x = parseUnit(annotation.x, this._width);
                 const y = parseUnit(annotation.y, this._height);
                 const width = parseUnit(annotation.width, this._width);
                 const height = parseUnit(annotation.height, this._height);
                 const options = Object.assign(Object.assign({}, annotation), { x, y, width, height });
+                const contentGroupElement = select(elements[i]).select(`.${annotationContent}`);
                 renderTextIntoFrame(contentGroupElement.node(), content, options);
             }
-            // Subject rendering
-            if (annotation === null || annotation === void 0 ? void 0 : annotation.subject) {
-                requestAnimationFrame(() => this._renderSubject(elements[i], annotation.subject, duration));
+            if (annotation.subject) {
+                requestAnimationFrame(() => this._renderSubject(elements[i], annotation.subject));
             }
         });
+        smartTransition(annotationsMerged, duration)
+            .style('opacity', 1);
         smartTransition(annotations.exit(), duration)
             .style('opacity', 0)
             .remove();
     }
-    _renderSubject(annotationGroupElement, subject, duration) {
+    _renderSubject(annotationGroupElement, subject) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const contentGroupElement = annotationGroupElement.querySelector(`.${annotationContent}`);
-        const subjectGroupElement = annotationGroupElement.querySelector(`.${annotationSubject}`);
-        const subjectGroup = select(subjectGroupElement);
+        const contentGroup = select(annotationGroupElement).select(`.${annotationContent}`);
+        const subjectGroup = select(annotationGroupElement).select(`.${annotationSubject}`);
         const subjectX = (_a = parseUnit(typeof (subject === null || subject === void 0 ? void 0 : subject.x) === 'function' ? subject.x() : subject === null || subject === void 0 ? void 0 : subject.x, this._width)) !== null && _a !== void 0 ? _a : null;
         const subjectY = (_b = parseUnit(typeof (subject === null || subject === void 0 ? void 0 : subject.y) === 'function' ? subject.y() : subject === null || subject === void 0 ? void 0 : subject.y, this._height)) !== null && _b !== void 0 ? _b : null;
         const subjectStrokeColor = (_c = subject === null || subject === void 0 ? void 0 : subject.strokeColor) !== null && _c !== void 0 ? _c : null;
@@ -76,7 +70,7 @@ class Annotations extends ComponentCore {
         const connectorLineStrokeDasharray = (_g = subject === null || subject === void 0 ? void 0 : subject.connectorLineStrokeDasharray) !== null && _g !== void 0 ? _g : null;
         const subjectRadius = (_h = subject === null || subject === void 0 ? void 0 : subject.radius) !== null && _h !== void 0 ? _h : 0;
         const padding = (_j = subject === null || subject === void 0 ? void 0 : subject.padding) !== null && _j !== void 0 ? _j : 5;
-        const contentBbox = contentGroupElement.getBBox();
+        const contentBbox = contentGroup.node().getBBox();
         const dy = Math.abs(subjectY - (contentBbox.y + contentBbox.height / 2));
         const dx = Math.abs(subjectX - (contentBbox.x + contentBbox.width / 2));
         const annotationPadding = 5;
@@ -89,9 +83,7 @@ class Annotations extends ComponentCore {
         const angle = Math.atan2(y2 - subjectY, x2 - subjectX) * 180 / Math.PI;
         const x1 = subjectX + Math.cos(angle * Math.PI / 180) * (subjectRadius + padding);
         const y1 = subjectY + Math.sin(angle * Math.PI / 180) * (subjectRadius + padding);
-        const circleSelection = subjectGroup.select('circle');
-        const lineSelection = subjectGroup.select('line');
-        circleSelection
+        subjectGroup.select('circle')
             .attr('visibility', subject ? null : 'hidden')
             .attr('cx', subjectX)
             .attr('cy', subjectY)
@@ -99,15 +91,16 @@ class Annotations extends ComponentCore {
             .style('stroke', subjectStrokeColor)
             .style('fill', subjectFillColor)
             .style('stroke-dasharray', subjectStrokeDasharray);
-        lineSelection
+        subjectGroup.select('line')
             .attr('visibility', subject ? null : 'hidden')
             .attr('x1', x1)
             .attr('y1', y1)
+            .attr('x2', x1)
+            .attr('y2', y1)
             .attr('x2', x2)
             .attr('y2', y2)
             .style('stroke', connectorLineColor)
-            .style('stroke-dasharray', connectorLineStrokeDasharray)
-            .style('fill', 'none');
+            .style('stroke-dasharray', connectorLineStrokeDasharray);
     }
 }
 Annotations.selectors = style;

package/components/annotations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/annotations/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Utils\nimport { isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { renderTextIntoFrame } from 'utils/text'\nimport { parseUnit } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { AnnotationItem, AnnotationSubject } from './types'\n\n// Config\nimport { AnnotationsDefaultConfig, AnnotationsConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Annotations extends ComponentCore<unknown[], AnnotationsConfigInterface> {\n  static selectors = s\n  static cssVariables = s.variables\n  protected _defaultConfig = AnnotationsDefaultConfig as AnnotationsConfigInterface\n  public config: AnnotationsConfigInterface = this._defaultConfig\n\n  g: Selection<SVGGElement, unknown, null, undefined>\n\n  events = {}\n\n  constructor (config?: AnnotationsConfigInterface) {\n    super()\n    if (config) this.setConfig(config)\n  }\n\n  // Todo: implement\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 } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const annotations = this.g\n      .selectAll<SVGGElement, AnnotationItem>(`.${s.annotation}`)\n      .data(config.items ?? [])\n\n    const annotationsEnter = annotations.enter().append('g')\n      .attr('class', s.annotation)\n\n    annotationsEnter.append('g')\n      .attr('class', s.annotationContent)\n      .classed(s.clickable, config.events?.[s.annotationContent] !== undefined)\n\n    const annotationsSubject = annotationsEnter.append('g')\n      .attr('class', s.annotationSubject)\n\n    annotationsSubject.append('circle')\n    annotationsSubject.append('line')\n\n    // Todo: smooth transition\n    annotationsEnter.merge(annotations)\n      .each((annotation, i, elements) => {\n        // Content rendering\n        if (annotation?.content) {\n          const contentGroupElement = select(elements[i])\n            .select<SVGGElement>(`.${s.annotationContent}`)\n          const content = typeof annotation.content === 'string' ? { text: annotation.content, fontSize: 12 } : annotation.content\n          const x = parseUnit(annotation.x, this._width)\n          const y = parseUnit(annotation.y, this._height)\n          const width = parseUnit(annotation.width, this._width)\n          const height = parseUnit(annotation.height, this._height)\n          const options = { ...annotation, x, y, width, height }\n\n\n          renderTextIntoFrame(contentGroupElement.node(), content, options)\n        }\n        // Subject rendering\n        if (annotation?.subject) {\n          requestAnimationFrame(() => this._renderSubject(elements[i], annotation.subject, duration))\n        }\n      })\n    smartTransition(annotations.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  private _renderSubject (\n    annotationGroupElement: SVGGElement,\n    subject: AnnotationSubject | undefined,\n    duration?: number\n  ): void {\n    const contentGroupElement = annotationGroupElement.querySelector<SVGGElement>(`.${s.annotationContent}`)\n    const subjectGroupElement = annotationGroupElement.querySelector<SVGGElement>(`.${s.annotationSubject}`)\n    const subjectGroup = select(subjectGroupElement)\n\n    const subjectX: number | null = parseUnit(typeof subject?.x === 'function' ? subject.x() : subject?.x, this._width) ?? null\n    const subjectY: number | null = parseUnit(typeof subject?.y === 'function' ? subject.y() : subject?.y, this._height) ?? null\n    const subjectStrokeColor: string | null = subject?.strokeColor ?? null\n    const subjectFillColor: string | null = subject?.fillColor ?? null\n    const subjectStrokeDasharray: string | null = subject?.strokeDasharray ?? null\n    const connectorLineColor: string | null = subject?.connectorLineColor ?? null\n    const connectorLineStrokeDasharray: string | null = subject?.connectorLineStrokeDasharray ?? null\n    const subjectRadius: number | null = subject?.radius ?? 0\n    const padding = subject?.padding ?? 5\n\n    const contentBbox = contentGroupElement.getBBox()\n    const dy = Math.abs(subjectY - (contentBbox.y + contentBbox.height / 2))\n    const dx = Math.abs(subjectX - (contentBbox.x + contentBbox.width / 2))\n    const annotationPadding = 5\n    const x2 = (dx < dy) && ((subjectY < contentBbox.y) || (subjectY > (contentBbox.y + contentBbox.height)))\n      ? contentBbox.x + contentBbox.width / 2\n      : (subjectX < contentBbox.x) ? contentBbox.x - annotationPadding : contentBbox.x + contentBbox.width + annotationPadding\n\n    const y2 = (dx >= dy) || ((subjectY >= contentBbox.y) && (subjectY <= (contentBbox.y + contentBbox.height)))\n      ? contentBbox.y + contentBbox.height / 2\n      : (subjectY < contentBbox.y) ? contentBbox.y - annotationPadding : contentBbox.y + contentBbox.height + annotationPadding\n\n    const angle = Math.atan2(y2 - subjectY, x2 - subjectX) * 180 / Math.PI\n    const x1 = subjectX + Math.cos(angle * Math.PI / 180) * (subjectRadius + padding)\n    const y1 = subjectY + Math.sin(angle * Math.PI / 180) * (subjectRadius + padding)\n\n    const circleSelection = subjectGroup.select('circle')\n    const lineSelection = subjectGroup.select('line')\n    circleSelection\n      .attr('visibility', subject ? null : 'hidden')\n      .attr('cx', subjectX)\n      .attr('cy', subjectY)\n      .attr('r', subjectRadius)\n      .style('stroke', subjectStrokeColor)\n      .style('fill', subjectFillColor)\n      .style('stroke-dasharray', subjectStrokeDasharray)\n\n    lineSelection\n      .attr('visibility', subject ? null : 'hidden')\n      .attr('x1', x1)\n      .attr('y1', y1)\n      .attr('x2', x2)\n      .attr('y2', y2)\n      .style('stroke', connectorLineColor)\n      .style('stroke-dasharray', connectorLineStrokeDasharray)\n      .style('fill', 'none')\n  }\n}\n"],"names":["s.annotation","s.annotationContent","s.clickable","s.annotationSubject","s","s.variables"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/annotations/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Utils\nimport { isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { renderTextIntoFrame } from 'utils/text'\nimport { parseUnit } from 'utils/misc'\nimport { UNOVIS_TEXT_DEFAULT } from 'styles'\n\n// Local Types\nimport { AnnotationItem, AnnotationSubject } from './types'\n\n// Config\nimport { AnnotationsDefaultConfig, AnnotationsConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Annotations extends ComponentCore<unknown[], AnnotationsConfigInterface> {\n  static selectors = s\n  static cssVariables = s.variables\n  protected _defaultConfig = AnnotationsDefaultConfig as AnnotationsConfigInterface\n  public config: AnnotationsConfigInterface = this._defaultConfig\n\n  g: Selection<SVGGElement, unknown, null, undefined>\n\n  events = {}\n\n  constructor (config?: AnnotationsConfigInterface) {\n    super()\n    if (config) this.setConfig(config)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config } = this\n\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const annotations = this.g.selectAll<SVGGElement, AnnotationItem[]>(`.${s.annotation}`)\n      .data(config.items, d => JSON.stringify(d))\n\n    const annotationsEnter = annotations.enter().append('g')\n      .attr('class', s.annotation)\n      .style('opacity', 0)\n\n    // Content\n    annotationsEnter.append('g').attr('class', s.annotationContent)\n\n    // Subject\n    const subject = annotationsEnter.append('g')\n      .attr('class', s.annotationSubject)\n\n    subject.append('circle')\n    subject.append('line')\n\n    const annotationsMerged = annotationsEnter.merge(annotations)\n      .attr('cursor', d => d?.cursor)\n      .each((annotation, i, elements) => {\n        if (annotation.content) {\n          const content = typeof annotation.content === 'string' ? { ...UNOVIS_TEXT_DEFAULT, text: annotation.content } : annotation.content\n          const x = parseUnit(annotation.x, this._width)\n          const y = parseUnit(annotation.y, this._height)\n          const width = parseUnit(annotation.width, this._width)\n          const height = parseUnit(annotation.height, this._height)\n          const options = { ...annotation, x, y, width, height }\n\n          const contentGroupElement = select(elements[i]).select<SVGGElement>(`.${s.annotationContent}`)\n          renderTextIntoFrame(contentGroupElement.node(), content, options)\n        }\n\n        if (annotation.subject) {\n          requestAnimationFrame(() => this._renderSubject(elements[i], annotation.subject))\n        }\n      })\n\n    smartTransition(annotationsMerged, duration)\n      .style('opacity', 1)\n\n    smartTransition(annotations.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n\n  private _renderSubject (\n    annotationGroupElement: SVGElement,\n    subject: AnnotationSubject | undefined\n  ): void {\n    const contentGroup = select(annotationGroupElement).select<SVGGElement>(`.${s.annotationContent}`)\n    const subjectGroup = select(annotationGroupElement).select<SVGGElement>(`.${s.annotationSubject}`)\n\n    const subjectX: number | null = parseUnit(typeof subject?.x === 'function' ? subject.x() : subject?.x, this._width) ?? null\n    const subjectY: number | null = parseUnit(typeof subject?.y === 'function' ? subject.y() : subject?.y, this._height) ?? null\n\n    const subjectStrokeColor: string | null = subject?.strokeColor ?? null\n    const subjectFillColor: string | null = subject?.fillColor ?? null\n    const subjectStrokeDasharray: string | null = subject?.strokeDasharray ?? null\n    const connectorLineColor: string | null = subject?.connectorLineColor ?? null\n    const connectorLineStrokeDasharray: string | null = subject?.connectorLineStrokeDasharray ?? null\n    const subjectRadius: number | null = subject?.radius ?? 0\n    const padding = subject?.padding ?? 5\n\n    const contentBbox = contentGroup.node().getBBox()\n    const dy = Math.abs(subjectY - (contentBbox.y + contentBbox.height / 2))\n    const dx = Math.abs(subjectX - (contentBbox.x + contentBbox.width / 2))\n    const annotationPadding = 5\n    const x2 = (dx < dy) && ((subjectY < contentBbox.y) || (subjectY > (contentBbox.y + contentBbox.height)))\n      ? contentBbox.x + contentBbox.width / 2\n      : (subjectX < contentBbox.x) ? contentBbox.x - annotationPadding : contentBbox.x + contentBbox.width + annotationPadding\n\n    const y2 = (dx >= dy) || ((subjectY >= contentBbox.y) && (subjectY <= (contentBbox.y + contentBbox.height)))\n      ? contentBbox.y + contentBbox.height / 2\n      : (subjectY < contentBbox.y) ? contentBbox.y - annotationPadding : contentBbox.y + contentBbox.height + annotationPadding\n\n    const angle = Math.atan2(y2 - subjectY, x2 - subjectX) * 180 / Math.PI\n    const x1 = subjectX + Math.cos(angle * Math.PI / 180) * (subjectRadius + padding)\n    const y1 = subjectY + Math.sin(angle * Math.PI / 180) * (subjectRadius + padding)\n\n    subjectGroup.select('circle')\n      .attr('visibility', subject ? null : 'hidden')\n      .attr('cx', subjectX)\n      .attr('cy', subjectY)\n      .attr('r', subjectRadius)\n      .style('stroke', subjectStrokeColor)\n      .style('fill', subjectFillColor)\n      .style('stroke-dasharray', subjectStrokeDasharray)\n\n    subjectGroup.select('line')\n      .attr('visibility', subject ? null : 'hidden')\n      .attr('x1', x1)\n      .attr('y1', y1)\n      .attr('x2', x1)\n      .attr('y2', y1)\n      .attr('x2', x2)\n      .attr('y2', y2)\n      .style('stroke', connectorLineColor)\n      .style('stroke-dasharray', connectorLineStrokeDasharray)\n  }\n}\n"],"names":["s.annotation","s.annotationContent","s.annotationSubject","s","s.variables"],"mappings":"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"}

package/components/annotations/style.d.ts

@@ -1,13 +1,16 @@
 export declare const root: string;
 export declare const variables: {
+    annotationsTextColor: "--vis-annotations-text-color";
     annotationsConnectorStrokeColor: "--vis-annotations-connector-stroke-color";
     annotationsConnectorStrokeWidth: "--vis-annotations-connector-stroke-width";
     annotationsConnectorStrokeDasharray: "--vis-annotations-connector-stroke-dasharray";
     annotationsSubjectStrokeColor: "--vis-annotations-subject-stroke-color";
     annotationsSubjectFillColor: "--vis-annotations-subject-fill-color";
     annotationsSubjectStrokeDasharray: "--vis-annotations-subject-stroke-dasharray";
+    darkAnnotationsTextColor: "--vis-dark-annotations-text-color";
+    darkAnnotationsConnectorStrokeColor: "--vis-dark-annotations-connector-stroke-color";
+    darkAnnotationsSubjectStrokeColor: "--vis-dark-annotations-subject-stroke-color";
 };
 export declare const annotation: string;
 export declare const annotationSubject: string;
 export declare const annotationContent: string;
-export declare const clickable: string;

package/components/annotations/style.js

@@ -2,12 +2,16 @@ import { css } from '@emotion/css';
 import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
 
 const cssVarDefaults = {
+    '--vis-annotations-text-color': '#282C34',
     '--vis-annotations-connector-stroke-color': '#444',
     '--vis-annotations-connector-stroke-width': '1px',
     '--vis-annotations-connector-stroke-dasharray': 'none',
     '--vis-annotations-subject-stroke-color': '#444',
     '--vis-annotations-subject-fill-color': 'none',
     '--vis-annotations-subject-stroke-dasharray': 'none',
+    '--vis-dark-annotations-text-color': '#e8e9ef',
+    '--vis-dark-annotations-connector-stroke-color': '#fff',
+    '--vis-dark-annotations-subject-stroke-color': '#fff',
 };
 const root = css `
   label: annotations-component;
@@ -34,10 +38,10 @@ const annotationSubject = css `
 `;
 const annotationContent = css `
   label: annotationContent;
-`;
-const clickable = css `
-  cursor: pointer;
+  > text {
+    fill: var(--vis-annotations-text-color);
+  }
 `;
 
-export { annotation, annotationContent, annotationSubject, clickable, root, variables };
+export { annotation, annotationContent, annotationSubject, root, variables };
 //# sourceMappingURL=style.js.map

package/components/annotations/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/annotations/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  '--vis-annotations-connector-stroke-color': '#444',\n  '--vis-annotations-connector-stroke-width': '1px',\n  '--vis-annotations-connector-stroke-dasharray': 'none',\n\n  '--vis-annotations-subject-stroke-color': '#444',\n  '--vis-annotations-subject-fill-color': 'none',\n  '--vis-annotations-subject-stroke-dasharray': 'none',\n}\n\nexport const root = css`\n  label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n  label: annotation;\n`\n\nexport const annotationSubject = css`\n  label: annotationSubject;\n\n  line {\n    stroke: var(${variables.annotationsConnectorStrokeColor});\n    stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n    stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n  }\n\n  circle {\n    stroke: var(${variables.annotationsSubjectStrokeColor});\n    fill: var(${variables.annotationsSubjectFillColor});\n    stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n  }\n`\n\nexport const annotationContent = css`\n  label: annotationContent;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;CACrD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;MACY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;AAIlB,gBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACnC,sBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACrC,0BAAA,EAAA,SAAS,CAAC,mCAAmC,CAAA;;;;AAIvD,gBAAA,EAAA,SAAS,CAAC,6BAA6B,CAAA;AACzC,cAAA,EAAA,SAAS,CAAC,2BAA2B,CAAA;AACzB,0BAAA,EAAA,SAAS,CAAC,iCAAiC,CAAA;;EAEtE;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;EAEnC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/annotations/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  '--vis-annotations-text-color': '#282C34',\n\n  '--vis-annotations-connector-stroke-color': '#444',\n  '--vis-annotations-connector-stroke-width': '1px',\n  '--vis-annotations-connector-stroke-dasharray': 'none',\n\n  '--vis-annotations-subject-stroke-color': '#444',\n  '--vis-annotations-subject-fill-color': 'none',\n  '--vis-annotations-subject-stroke-dasharray': 'none',\n\n  '--vis-dark-annotations-text-color': '#e8e9ef',\n  '--vis-dark-annotations-connector-stroke-color': '#fff',\n  '--vis-dark-annotations-subject-stroke-color': '#fff',\n}\n\nexport const root = css`\n  label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n  label: annotation;\n`\n\nexport const annotationSubject = css`\n  label: annotationSubject;\n\n  line {\n    stroke: var(${variables.annotationsConnectorStrokeColor});\n    stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n    stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n  }\n\n  circle {\n    stroke: var(${variables.annotationsSubjectStrokeColor});\n    fill: var(${variables.annotationsSubjectFillColor});\n    stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n  }\n`\n\nexport const annotationContent = css`\n  label: annotationContent;\n  > text {\n    fill: var(--vis-annotations-text-color);\n  }\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,8BAA8B,EAAE,SAAS;AAEzC,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;AAEpD,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,+CAA+C,EAAE,MAAM;AACvD,IAAA,6CAA6C,EAAE,MAAM;CACtD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;MACY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;AAIlB,gBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACnC,sBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACrC,0BAAA,EAAA,SAAS,CAAC,mCAAmC,CAAA;;;;AAIvD,gBAAA,EAAA,SAAS,CAAC,6BAA6B,CAAA;AACzC,cAAA,EAAA,SAAS,CAAC,2BAA2B,CAAA;AACzB,0BAAA,EAAA,SAAS,CAAC,iCAAiC,CAAA;;EAEtE;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/annotations/types.d.ts

@@ -7,25 +7,14 @@ export declare type AnnotationItem = UnovisTextFrameOptions & {
     y?: LengthUnit;
     width?: LengthUnit;
     height?: LengthUnit;
+    cursor?: string;
 };
 export declare type AnnotationSubjectLocationXY = {
     x: LengthUnit | (() => LengthUnit);
     y: LengthUnit | (() => LengthUnit);
 };
-export declare enum AnnotationSubjectType {
-    Circle = "circle",
-    Rect = "rect"
-}
 export declare type AnnotationSubjectStyle = {
-    /** Type of the subject: AnnotationSubjectType.Circle or AnnotationSubjectType.Rect
-    * Default: AnnotationSubjectType.Circle
-    */
-    shape?: AnnotationSubjectType | string;
-    /** Subject width. Only for `AnnotationSubjectType.Rect` */
-    width?: number;
-    /** Subject height. Only for `AnnotationSubjectType.Rect` */
-    height?: number;
-    /** Subject radius. Only for `AnnotationSubjectType.Circle` */
+    /** Subject radius */
     radius?: number;
     /** Subject fill color */
     fillColor?: string;

package/components/annotations/types.js

@@ -1,8 +1,2 @@
-var AnnotationSubjectType;
-(function (AnnotationSubjectType) {
-    AnnotationSubjectType["Circle"] = "circle";
-    AnnotationSubjectType["Rect"] = "rect";
-})(AnnotationSubjectType || (AnnotationSubjectType = {}));
 
-export { AnnotationSubjectType };
 //# sourceMappingURL=types.js.map

package/components/annotations/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/annotations/types.ts"],"sourcesContent":["import { LengthUnit } from 'types/misc'\nimport { UnovisText, UnovisTextFrameOptions } from 'types/text'\n\nexport type AnnotationItem = UnovisTextFrameOptions & {\n  content: string | UnovisText | UnovisText[];\n  subject?: AnnotationSubject;\n  x?: LengthUnit;\n  y?: LengthUnit;\n  width?: LengthUnit;\n  height?: LengthUnit;\n}\n\nexport type AnnotationSubjectLocationXY = {\n  x: LengthUnit | (() => LengthUnit);\n  y: LengthUnit | (() => LengthUnit);\n}\n\nexport enum AnnotationSubjectType {\n  Circle = 'circle',\n  Rect = 'rect',\n}\n\nexport type AnnotationSubjectStyle = {\n  /** Type of the subject: AnnotationSubjectType.Circle or AnnotationSubjectType.Rect\n  * Default: AnnotationSubjectType.Circle\n  */\n  shape?: AnnotationSubjectType | string;\n  /** Subject width. Only for `AnnotationSubjectType.Rect` */\n  width?: number;\n  /** Subject height. Only for `AnnotationSubjectType.Rect` */\n  height?: number;\n  /** Subject radius. Only for `AnnotationSubjectType.Circle` */\n  radius?: number;\n  /** Subject fill color */\n  fillColor?: string;\n  /** Subject stroke color */\n  strokeColor?: string;\n  /** Subject stroke-dasharray configuration */\n  strokeDasharray?: string;\n  /** Padding between the subject and the connector line */\n  padding?: number;\n  /** Connector line color */\n  connectorLineColor?: string;\n  /** Connector line stroke-dasharray configuration */\n  connectorLineStrokeDasharray?: string;\n}\n\nexport type AnnotationSubject = AnnotationSubjectStyle & AnnotationSubjectLocationXY\n\n"],"names":[],"mappings":"IAiBY,sBAGX;AAHD,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,qBAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACf,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/area/index.js

@@ -21,6 +21,8 @@ class Area extends XYComponentCore {
         };
         if (config)
             this.setConfig(config);
+        // Determine if the provided chart should be stacked
+        this.stacked = Array.isArray(this.config.y);
     }
     _render(customDuration) {
         super._render(customDuration);

package/components/area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n  public config: AreaConfigInterface<Datum> = this._defaultConfig\n  public stacked = true\n  private _areaGen: AreaInterface<AreaDatum>\n  private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n  events = {\n    [Area.selectors.area]: {},\n  }\n\n  constructor (config?: AreaConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => {\n        const isSmallerThanPixel = Math.abs(d.y1 - d.y0) < 1\n        return d.y1 - ((isSmallerThanPixel && config.minHeight1Px) ? 1 : 0)\n      })\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.negative)\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => ({\n          y0: this.yScale(d[0]),\n          y1: this.yScale(d[1]),\n          x: areaDataX[j],\n        })\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = stackedData.reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this._areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this._areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n    return getStackedExtent(data, config.baseline, ...yAccessors)\n  }\n\n  _emptyPath (): string {\n    const xRange = this.xScale.range()\n    const yDomain = this.yScale.domain() as number[]\n\n    const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n    const y1 = y0\n\n    return this._areaGen([\n      { y0, y1, x: xRange[0] },\n      { y0, y1, x: xRange[1] },\n    ])\n  }\n}\n"],"names":["s.area","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n  public config: AreaConfigInterface<Datum> = this._defaultConfig\n  public stacked = true\n  private _areaGen: AreaInterface<AreaDatum>\n  private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n  events = {\n    [Area.selectors.area]: {},\n  }\n\n  constructor (config?: AreaConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n\n    // Determine if the provided chart should be stacked\n    this.stacked = Array.isArray(this.config.y)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => {\n        const isSmallerThanPixel = Math.abs(d.y1 - d.y0) < 1\n        return d.y1 - ((isSmallerThanPixel && config.minHeight1Px) ? 1 : 0)\n      })\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.negative)\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => ({\n          y0: this.yScale(d[0]),\n          y1: this.yScale(d[1]),\n          x: areaDataX[j],\n        })\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = stackedData.reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this._areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this._areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n    return getStackedExtent(data, config.baseline, ...yAccessors)\n  }\n\n  _emptyPath (): string {\n    const xRange = this.xScale.range()\n    const yDomain = this.yScale.domain() as number[]\n\n    const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n    const y1 = y0\n\n    return this._areaGen([\n      { y0, y1, x: xRange[0] },\n      { y0, y1, x: xRange[1] },\n    ])\n  }\n}\n"],"names":["s.area","s"],"mappings":"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"}

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

@@ -68,6 +68,7 @@ function updateLabel(selection, config, width, radiusScale, duration) {
     const label = selection.select(`.${labelText}`);
     label.selectAll('textPath').remove();
     label.text(d => getString(d.data, nodeLabel))
+        .style('transition', `fill ${duration}ms`)
         .style('fill', d => { var _a; return (_a = getColor(d.data, nodeLabelColor)) !== null && _a !== void 0 ? _a : getLabelFillColor(d, config); })
         .style('text-anchor', d => getLabelTextAnchor(d, config))
         .each((d, i, elements) => {

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

@@ -1 +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// Utils\nimport { trimSVGText } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\nimport { getNumber, getString, getValue } from 'utils/data'\nimport { getColor, hexToBrightness } from 'utils/color'\n\n// Config\nimport { ChordDiagramConfigInterface } 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\nfunction getLabelFillColor<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>\n): string {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      return getColor(d.data, config.nodeColor, d.height)\n    }\n    case ChordLabelAlignment.Along: {\n      const c = getColor(d.data, config.nodeColor, d.height)\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: ChordDiagramConfigInterface<N, L>\n): string | null {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\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\nfunction getLabelTransform<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): string | null {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      const r = radiusScale(d.y1) + LABEL_PADDING\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angle = angleCenter - Math.PI / 2\n      const x = r * Math.cos(angle)\n      const y = r * Math.sin(angle)\n      return `translate(${x}, ${y})`\n    }\n    case ChordLabelAlignment.Along:\n      return null\n  }\n}\n\nexport function createLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): void {\n  selection.style('opacity', 0)\n    .attr('transform', d => getLabelTransform(d, config, radiusScale))\n\n  selection.append('text')\n    .attr('class', s.labelText)\n    .style('fill', d => getColor(d.data, config.nodeColor, d.height))\n}\n\nexport function updateLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  width: number,\n  radiusScale: ScaleContinuousNumeric<number, number>,\n  duration: number\n): void {\n  const { nodeLabel, nodeLabelColor, nodeWidth } = config\n\n  smartTransition(selection, duration)\n    .attr('transform', d => getLabelTransform(d, config, radiusScale))\n    .style('opacity', 1)\n\n  const label: Selection<SVGTextElement, ChordNode<N>, SVGElement, unknown> = selection.select(`.${s.labelText}`)\n  label.selectAll('textPath').remove()\n\n  label.text(d => getString(d.data, nodeLabel))\n    .style('fill', d => getColor(d.data, nodeLabelColor) ?? getLabelFillColor(d, config))\n    .style('text-anchor', d => getLabelTextAnchor(d, config))\n    .each((d: ChordNode<N>, i: number, elements) => {\n      const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n      const radianArcLength = d.x1 - d.x0 - getNumber(d.data, config.padAngle) * 2\n      const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2\n      const arcLength = radius * radianArcLength\n      const maxWidth = (nodeLabelAlignment === ChordLabelAlignment.Along ? arcLength : width - LABEL_PADDING * 2)\n\n      const textElement = select(elements[i])\n        .call(trimSVGText, maxWidth)\n        .attr('dx', nodeLabelAlignment === ChordLabelAlignment.Along ? LABEL_PADDING : null)\n        .attr('dy', nodeLabelAlignment === ChordLabelAlignment.Along ? getNumber(d.data, nodeWidth) / 2 : null)\n\n      const textWidth = textElement.node().getComputedTextLength()\n      const labelText = textElement.text()\n      if (nodeLabelAlignment === ChordLabelAlignment.Along) {\n        textElement.text('')\n        if (textWidth <= maxWidth) {\n          textElement.append('textPath')\n            .attr('href', `#${d.uid}`)\n            .text(labelText)\n        }\n      }\n    })\n\n  smartTransition(label, duration)\n    .attr('transform', d => {\n      const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment)\n      if (nodeLabelAlignment !== ChordLabelAlignment.Perpendicular) return null\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleDegree = angleCenter * 180 / Math.PI\n      return `rotate(${angleDegree < 180 ? angleDegree - 90 : angleDegree + 90})`\n    })\n}\n\nexport function removeLabel (\n  selection: Selection<SVGGElement, unknown, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["s.labelText"],"mappings":"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"}
+{"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// Utils\nimport { trimSVGText } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\nimport { getNumber, getString, getValue } from 'utils/data'\nimport { getColor, hexToBrightness } from 'utils/color'\n\n// Config\nimport { ChordDiagramConfigInterface } 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\nfunction getLabelFillColor<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>\n): string {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      return getColor(d.data, config.nodeColor, d.height)\n    }\n    case ChordLabelAlignment.Along: {\n      const c = getColor(d.data, config.nodeColor, d.height)\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: ChordDiagramConfigInterface<N, L>\n): string | null {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\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\nfunction getLabelTransform<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): string | null {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      const r = radiusScale(d.y1) + LABEL_PADDING\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angle = angleCenter - Math.PI / 2\n      const x = r * Math.cos(angle)\n      const y = r * Math.sin(angle)\n      return `translate(${x}, ${y})`\n    }\n    case ChordLabelAlignment.Along:\n      return null\n  }\n}\n\nexport function createLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): void {\n  selection.style('opacity', 0)\n    .attr('transform', d => getLabelTransform(d, config, radiusScale))\n\n  selection.append('text')\n    .attr('class', s.labelText)\n    .style('fill', d => getColor(d.data, config.nodeColor, d.height))\n}\n\nexport function updateLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  width: number,\n  radiusScale: ScaleContinuousNumeric<number, number>,\n  duration: number\n): void {\n  const { nodeLabel, nodeLabelColor, nodeWidth } = config\n\n  smartTransition(selection, duration)\n    .attr('transform', d => getLabelTransform(d, config, radiusScale))\n    .style('opacity', 1)\n\n  const label: Selection<SVGTextElement, ChordNode<N>, SVGElement, unknown> = selection.select(`.${s.labelText}`)\n  label.selectAll('textPath').remove()\n\n  label.text(d => getString(d.data, nodeLabel))\n    .style('transition', `fill ${duration}ms`)\n    .style('fill', d => getColor(d.data, nodeLabelColor) ?? getLabelFillColor(d, config))\n    .style('text-anchor', d => getLabelTextAnchor(d, config))\n    .each((d: ChordNode<N>, i: number, elements) => {\n      const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n      const radianArcLength = d.x1 - d.x0 - getNumber(d.data, config.padAngle) * 2\n      const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2\n      const arcLength = radius * radianArcLength\n      const maxWidth = (nodeLabelAlignment === ChordLabelAlignment.Along ? arcLength : width - LABEL_PADDING * 2)\n\n      const textElement = select(elements[i])\n        .call(trimSVGText, maxWidth)\n        .attr('dx', nodeLabelAlignment === ChordLabelAlignment.Along ? LABEL_PADDING : null)\n        .attr('dy', nodeLabelAlignment === ChordLabelAlignment.Along ? getNumber(d.data, nodeWidth) / 2 : null)\n\n      const textWidth = textElement.node().getComputedTextLength()\n      const labelText = textElement.text()\n      if (nodeLabelAlignment === ChordLabelAlignment.Along) {\n        textElement.text('')\n        if (textWidth <= maxWidth) {\n          textElement.append('textPath')\n            .attr('href', `#${d.uid}`)\n            .text(labelText)\n        }\n      }\n    })\n\n  smartTransition(label, duration)\n    .attr('transform', d => {\n      const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment)\n      if (nodeLabelAlignment !== ChordLabelAlignment.Perpendicular) return null\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleDegree = angleCenter * 180 / Math.PI\n      return `rotate(${angleDegree < 180 ? angleDegree - 90 : angleDegree + 90})`\n    })\n}\n\nexport function removeLabel (\n  selection: Selection<SVGGElement, unknown, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["s.labelText"],"mappings":"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"}

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

@@ -43,7 +43,7 @@ function createLink(selection, radiusScale) {
 }
 function updateLink(selection, config, radiusScale, duration) {
     selection
-        .style('transition', `fill-opacity: ${duration}ms`)
+        .style('transition', `fill ${duration}ms`)
         .style('fill', d => getColor(d.data, config.linkColor))
         .style('stroke', d => getColor(d.data, config.linkColor));
     const transition = smartTransition(selection, duration)

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

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../../../src/components/chord-diagram/modules/link.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { ribbon } from 'd3-chord'\nimport { ScalePower } from 'd3-scale'\nimport { areaRadial } from 'd3-shape'\nimport { Transition } from 'd3-transition'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Types\nimport { Curve } from 'types/curve'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { convertLineToArc } from 'utils/path'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordRibbon, ChordRibbonPoint } from '../types'\nimport { ChordDiagramConfigInterface } from '../config'\n\n// Generators\nexport function emptyPath (): string {\n  return 'M0,0 L0,0'\n}\n\n// Generators\nconst ribbonGen = ribbon<ChordRibbonPoint[], ChordRibbonPoint>()\n  .source(d => d[0])\n  .target(d => d[d.length - 1])\n  .startAngle(d => d.a0)\n  .endAngle(d => d.a1)\n\nconst areaGen = areaRadial<ChordRibbonPoint>()\n  .curve(Curve.catmullRom.alpha(0.5))\n  .startAngle((d, i, points) => i < points.length / 2 ? d.a1 : d.a0)\n  .endAngle((d, i, points) => i < points.length / 2 ? d.a0 : d.a1)\n\n\n// Creates a path from set of points\nfunction linkGen (points: ChordRibbonPoint[], radiusScale: ScalePower<number, number>): string {\n  const link = (points.length === 2 ? ribbonGen : areaGen)\n  link.radius(d => radiusScale(d.r))\n\n  const linkPath = link(points) as string\n\n  if (points.length === 2) return linkPath\n\n  // Replace closePath with line to starting point\n  const area = linkPath.slice(0, -1)\n  const path = area.concat(`L${area.match(/M-?\\d*\\.?\\d*[,\\s*]-?\\d*\\.?\\d*/)?.[0].slice(1)}`)\n\n  // Convert line edges to arcs\n  const radius = Math.max(radiusScale(points[0].r), 0)\n  return convertLineToArc(path, radius)\n}\n\nexport function createLink<N extends ChordInputNode> (\n  selection: Selection<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>,\n  radiusScale: ScalePower<number, number>\n): void {\n  selection\n    .attr('d', d => linkGen(d.points, radiusScale) || emptyPath())\n    .style('opacity', 0)\n}\n\nexport function updateLink<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGPathElement, ChordRibbon<N, L>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScalePower<number, number>,\n  duration: number\n): void {\n  selection\n    .style('transition', `fill-opacity: ${duration}ms`)\n    .style('fill', d => getColor(d.data, config.linkColor))\n    .style('stroke', d => getColor(d.data, config.linkColor))\n\n  const transition = smartTransition(selection, duration)\n    .style('opacity', 1) as Transition<SVGPathElement, ChordRibbon<N, L>, SVGGElement, unknown>\n\n  if (duration) {\n    transition.attrTween('d', (d, i, el) => {\n      const previous = select(el[i]).attr('d')\n      const next = linkGen(d.points, radiusScale) || emptyPath()\n      return interpolatePath(previous, next)\n    })\n  } else {\n    transition.attr('d', d => linkGen(d.points, radiusScale) || 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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"}
+{"version":3,"file":"link.js","sources":["../../../../src/components/chord-diagram/modules/link.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { ribbon } from 'd3-chord'\nimport { ScalePower } from 'd3-scale'\nimport { areaRadial } from 'd3-shape'\nimport { Transition } from 'd3-transition'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Types\nimport { Curve } from 'types/curve'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { convertLineToArc } from 'utils/path'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordRibbon, ChordRibbonPoint } from '../types'\nimport { ChordDiagramConfigInterface } from '../config'\n\n// Generators\nexport function emptyPath (): string {\n  return 'M0,0 L0,0'\n}\n\n// Generators\nconst ribbonGen = ribbon<ChordRibbonPoint[], ChordRibbonPoint>()\n  .source(d => d[0])\n  .target(d => d[d.length - 1])\n  .startAngle(d => d.a0)\n  .endAngle(d => d.a1)\n\nconst areaGen = areaRadial<ChordRibbonPoint>()\n  .curve(Curve.catmullRom.alpha(0.5))\n  .startAngle((d, i, points) => i < points.length / 2 ? d.a1 : d.a0)\n  .endAngle((d, i, points) => i < points.length / 2 ? d.a0 : d.a1)\n\n\n// Creates a path from set of points\nfunction linkGen (points: ChordRibbonPoint[], radiusScale: ScalePower<number, number>): string {\n  const link = (points.length === 2 ? ribbonGen : areaGen)\n  link.radius(d => radiusScale(d.r))\n\n  const linkPath = link(points) as string\n\n  if (points.length === 2) return linkPath\n\n  // Replace closePath with line to starting point\n  const area = linkPath.slice(0, -1)\n  const path = area.concat(`L${area.match(/M-?\\d*\\.?\\d*[,\\s*]-?\\d*\\.?\\d*/)?.[0].slice(1)}`)\n\n  // Convert line edges to arcs\n  const radius = Math.max(radiusScale(points[0].r), 0)\n  return convertLineToArc(path, radius)\n}\n\nexport function createLink<N extends ChordInputNode> (\n  selection: Selection<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>,\n  radiusScale: ScalePower<number, number>\n): void {\n  selection\n    .attr('d', d => linkGen(d.points, radiusScale) || emptyPath())\n    .style('opacity', 0)\n}\n\nexport function updateLink<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGPathElement, ChordRibbon<N, L>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScalePower<number, number>,\n  duration: number\n): void {\n  selection\n    .style('transition', `fill ${duration}ms`)\n    .style('fill', d => getColor(d.data, config.linkColor))\n    .style('stroke', d => getColor(d.data, config.linkColor))\n\n  const transition = smartTransition(selection, duration)\n    .style('opacity', 1) as Transition<SVGPathElement, ChordRibbon<N, L>, SVGGElement, unknown>\n\n  if (duration) {\n    transition.attrTween('d', (d, i, el) => {\n      const previous = select(el[i]).attr('d')\n      const next = linkGen(d.points, radiusScale) || emptyPath()\n      return interpolatePath(previous, next)\n    })\n  } else {\n    transition.attr('d', d => linkGen(d.points, radiusScale) || 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/crosshair/config.d.ts

@@ -11,6 +11,10 @@ export interface CrosshairConfigInterface<Datum> extends WithOptional<XYComponen
     y?: NumericAccessor<Datum> | NumericAccessor<Datum>[];
     /** Optional color array or color accessor function for crosshair circles. Default: `d => d.color` */
     color?: ColorAccessor<Datum>;
+    /** Optional stroke color accessor function for crosshair circles. Default: `undefined` */
+    strokeColor?: ColorAccessor<Datum>;
+    /** Optional stroke width for crosshair circles. Default: `undefined` */
+    strokeWidth?: NumericAccessor<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` */

package/components/crosshair/config.js

@@ -1,6 +1,6 @@
 import { XYComponentDefaultConfig } from '../../core/xy-component/config.js';
 
-const CrosshairDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { yStacked: undefined, baseline: null, duration: 100, tooltip: undefined, template: (d, x) => '', hideWhenFarFromPointer: true, hideWhenFarFromPointerDistance: 100, snapToData: true, getCircles: undefined, color: undefined });
+const CrosshairDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { yStacked: undefined, baseline: null, duration: 100, tooltip: undefined, template: (d, x) => '', hideWhenFarFromPointer: true, hideWhenFarFromPointerDistance: 100, snapToData: true, getCircles: undefined, color: undefined, strokeColor: undefined, strokeWidth: undefined });
 
 export { CrosshairDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/crosshair/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/crosshair/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\nimport { Tooltip } from 'components/tooltip'\n\n// Types\nimport { NumericAccessor, ColorAccessor } from 'types/accessor'\nimport { ContinuousScale } from 'types/scale'\nimport { WithOptional } from 'types/misc'\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 WithOptional<XYComponentConfigInterface<Datum>, 'x' | 'y'> {\n  /** Optional accessor function for getting the values along the X axis. Default: `undefined` */\n  x?: NumericAccessor<Datum>;\n  /** Optional single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */\n  y?: NumericAccessor<Datum> | NumericAccessor<Datum>[];\n  /** Optional color array or color accessor function for crosshair circles. Default: `d => d.color` */\n  color?: ColorAccessor<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 | Date | Date, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[];\n}\n\nexport const CrosshairDefaultConfig: CrosshairConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  yStacked: undefined,\n  baseline: null,\n  duration: 100,\n  tooltip: undefined,\n  template: <Datum>(d: Datum, x: number | Date): string => '',\n  hideWhenFarFromPointer: true,\n  hideWhenFarFromPointerDistance: 100,\n  snapToData: true,\n  getCircles: undefined,\n  color: undefined,\n}\n\n"],"names":[],"mappings":";;AA4Ca,MAAA,sBAAsB,GAC9B,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,wBAAwB,KAC3B,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,CAAQ,CAAQ,EAAE,CAAgB,KAAa,EAAE,EAC3D,sBAAsB,EAAE,IAAI,EAC5B,8BAA8B,EAAE,GAAG,EACnC,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,SAAS,EACrB,KAAK,EAAE,SAAS,EAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/crosshair/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\nimport { Tooltip } from 'components/tooltip'\n\n// Types\nimport { NumericAccessor, ColorAccessor } from 'types/accessor'\nimport { ContinuousScale } from 'types/scale'\nimport { WithOptional } from 'types/misc'\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 WithOptional<XYComponentConfigInterface<Datum>, 'x' | 'y'> {\n  /** Optional accessor function for getting the values along the X axis. Default: `undefined` */\n  x?: NumericAccessor<Datum>;\n  /** Optional single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */\n  y?: NumericAccessor<Datum> | NumericAccessor<Datum>[];\n  /** Optional color array or color accessor function for crosshair circles. Default: `d => d.color` */\n  color?: ColorAccessor<Datum>;\n  /** Optional stroke color accessor function for crosshair circles. Default: `undefined` */\n  strokeColor?: ColorAccessor<Datum>;\n  /** Optional stroke width for crosshair circles. Default: `undefined` */\n  strokeWidth?: NumericAccessor<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 | Date | Date, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[];\n}\n\nexport const CrosshairDefaultConfig: CrosshairConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  yStacked: undefined,\n  baseline: null,\n  duration: 100,\n  tooltip: undefined,\n  template: <Datum>(d: Datum, x: number | Date): string => '',\n  hideWhenFarFromPointer: true,\n  hideWhenFarFromPointerDistance: 100,\n  snapToData: true,\n  getCircles: undefined,\n  color: undefined,\n  strokeColor: undefined,\n  strokeWidth: undefined,\n}\n\n"],"names":[],"mappings":";;AAgDO,MAAM,sBAAsB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC9B,wBAAwB,CAAA,EAAA,EAC3B,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,CAAQ,CAAQ,EAAE,CAAgB,KAAa,EAAE,EAC3D,sBAAsB,EAAE,IAAI,EAC5B,8BAA8B,EAAE,GAAG,EACnC,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,SAAS,EACrB,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,SAAS;;;;"}

package/components/crosshair/index.js

@@ -71,13 +71,17 @@ class Crosshair extends XYComponentCore {
             .attr('r', 0)
             .attr('cx', this.x)
             .attr('cy', d => d.y)
-            .style('fill', d => d.color);
+            .style('fill', d => d.color)
+            .style('stroke', d => d.strokeColor)
+            .style('stroke-width', d => d.strokeWidth);
         smartTransition(circlesEnter.merge(circles), duration, easeLinear)
             .attr('cx', this.x)
             .attr('cy', d => d.y)
             .attr('r', 4)
             .style('opacity', d => d.opacity)
-            .style('fill', d => d.color);
+            .style('fill', d => d.color)
+            .style('stroke', d => d.strokeColor)
+            .style('stroke-width', d => d.strokeWidth);
         circles.exit().remove();
     }
     hide() {
@@ -161,16 +165,20 @@ class Crosshair extends XYComponentCore {
             const stackedValues = getStackedValues(this.datum, this.datumIndex, ...yStackedAccessors)
                 .map((value, index, arr) => ({
                 y: this.yScale(value + baselineValue),
-                opacity: getNumber(this.datum, yStackedAccessors[index]) ? 1 : 0,
+                opacity: isNumber(getNumber(this.datum, yStackedAccessors[index])) ? 1 : 0,
                 color: getColor(this.datum, config.color, index),
+                strokeColor: config.strokeColor ? getColor(this.datum, config.strokeColor, index) : undefined,
+                strokeWidth: config.strokeWidth ? getNumber(this.datum, config.strokeWidth, index) : undefined,
             }));
             const regularValues = yAccessors
                 .map((a, index) => {
                 const value = getNumber(this.datum, a);
                 return {
                     y: this.yScale(value),
-                    opacity: value ? 1 : 0,
+                    opacity: isNumber(value) ? 1 : 0,
                     color: getColor(this.datum, config.color, stackedValues.length + index),
+                    strokeColor: config.strokeColor ? getColor(this.datum, config.strokeColor, index) : undefined,
+                    strokeWidth: config.strokeWidth ? getNumber(this.datum, config.strokeWidth, index) : undefined,
                 };
             });
             return stackedValues.concat(regularValues);