@unovis/ts 1.7.0-pre.0 → 1.7.0-pre.1

package/components/annotations/config.d.ts

@@ -15,5 +15,7 @@ export interface AnnotationsConfigInterface extends ComponentConfigInterface {
      * To learn more, see our docs https://unovis.dev/docs/auxiliary/Annotations/
     * Default: `[]` */
     items: AnnotationItem[] | undefined;
+    /** Debug option to render bounding boxes around text elements. Default: `false` */
+    renderTextBoundingBoxes?: boolean;
 }
 export declare const AnnotationsDefaultConfig: AnnotationsConfigInterface;

package/components/annotations/config.js

@@ -1,6 +1,6 @@
 import { ComponentDefaultConfig } from '../../core/component/config.js';
 
-const AnnotationsDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { items: [] });
+const AnnotationsDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { items: [], renderTextBoundingBoxes: false });
 
 export { AnnotationsDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/annotations/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/annotations/config.ts"],"sourcesContent":["import { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { AnnotationItem } from './types'\n\nexport interface AnnotationsConfigInterface extends ComponentConfigInterface {\n  /** Legend items. Array of `AnnotationItem`:\n   * ```\n   * {\n   *   content: string | UnovisText | UnovisText[];\n   *   subject?: AnnotationSubject;\n   *   x?: LengthUnit;\n   *   y?: LengthUnit;\n   *   width?: LengthUnit;\n   *   height?: LengthUnit;\n   * }\n   * ```\n   * To learn more, see our docs https://unovis.dev/docs/auxiliary/Annotations/\n  * Default: `[]` */\n  items: AnnotationItem[] | undefined;\n}\n\nexport const AnnotationsDefaultConfig: AnnotationsConfigInterface = {\n  ...ComponentDefaultConfig,\n  items: [],\n}\n"],"names":[],"mappings":";;AAsBa,MAAA,wBAAwB,GAChC,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,sBAAsB,KACzB,KAAK,EAAE,EAAE,EAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/annotations/config.ts"],"sourcesContent":["import { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { AnnotationItem } from './types'\n\nexport interface AnnotationsConfigInterface extends ComponentConfigInterface {\n  /** Legend items. Array of `AnnotationItem`:\n   * ```\n   * {\n   *   content: string | UnovisText | UnovisText[];\n   *   subject?: AnnotationSubject;\n   *   x?: LengthUnit;\n   *   y?: LengthUnit;\n   *   width?: LengthUnit;\n   *   height?: LengthUnit;\n   * }\n   * ```\n   * To learn more, see our docs https://unovis.dev/docs/auxiliary/Annotations/\n  * Default: `[]` */\n  items: AnnotationItem[] | undefined;\n  /** Debug option to render bounding boxes around text elements. Default: `false` */\n  renderTextBoundingBoxes?: boolean;\n}\n\nexport const AnnotationsDefaultConfig: AnnotationsConfigInterface = {\n  ...ComponentDefaultConfig,\n  items: [],\n  renderTextBoundingBoxes: false,\n}\n"],"names":[],"mappings":";;AAwBO,MAAM,wBAAwB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAChC,sBAAsB,CACzB,EAAA,EAAA,KAAK,EAAE,EAAE,EACT,uBAAuB,EAAE,KAAK;;;;"}

package/components/annotations/index.d.ts

@@ -12,6 +12,7 @@ export declare class Annotations extends ComponentCore<unknown[], AnnotationsCon
         annotationsSubjectStrokeColor: "--vis-annotations-subject-stroke-color";
         annotationsSubjectFillColor: "--vis-annotations-subject-fill-color";
         annotationsSubjectStrokeDasharray: "--vis-annotations-subject-stroke-dasharray";
+        annotationsDebugBoundingBoxStrokeColor: "--vis-annotations-debug-bounding-box-stroke-color";
         darkAnnotationsTextColor: "--vis-dark-annotations-text-color";
         darkAnnotationsConnectorStrokeColor: "--vis-dark-annotations-connector-stroke-color";
         darkAnnotationsSubjectStrokeColor: "--vis-dark-annotations-subject-stroke-color";

package/components/annotations/index.js

@@ -7,7 +7,7 @@ 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, annotationSubject, variables } from './style.js';
+import { annotation, annotationContent, debugBoundingBox, annotationSubject, variables } from './style.js';
 
 class Annotations extends ComponentCore {
     constructor(config) {
@@ -29,11 +29,6 @@ class Annotations extends ComponentCore {
             .style('opacity', 0);
         // Content
         annotationsEnter.append('g').attr('class', annotationContent);
-        // Subject
-        const subject = annotationsEnter.append('g')
-            .attr('class', annotationSubject);
-        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) => {
@@ -46,10 +41,25 @@ class Annotations extends ComponentCore {
                 const options = Object.assign(Object.assign({}, annotation), { x, y, width, height });
                 const contentGroupElement = select(elements[i]).select(`.${annotationContent}`);
                 renderTextIntoFrame(contentGroupElement.node(), content, options);
+                // Render debug bounding boxes showing the frame (x, y, width, height)
+                contentGroupElement.selectAll(`.${debugBoundingBox}`).remove();
+                if (config.renderTextBoundingBoxes) {
+                    const debugWidth = width !== null && width !== void 0 ? width : 100;
+                    const debugHeight = height || 0.1;
+                    contentGroupElement.append('rect')
+                        .attr('class', debugBoundingBox)
+                        .attr('x', x)
+                        .attr('y', y)
+                        .attr('width', debugWidth)
+                        .attr('height', debugHeight);
+                }
             }
             if (annotation.subject) {
                 requestAnimationFrame(() => this._renderSubject(elements[i], annotation.subject));
             }
+            else {
+                select(elements[i]).select(`.${annotationSubject}`).remove();
+            }
         });
         smartTransition(annotationsMerged, duration)
             .style('opacity', 1);
@@ -59,8 +69,15 @@ class Annotations extends ComponentCore {
     }
     _renderSubject(annotationGroupElement, subject) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const contentGroup = select(annotationGroupElement).select(`.${annotationContent}`);
-        const subjectGroup = select(annotationGroupElement).select(`.${annotationSubject}`);
+        const annotationGroup = select(annotationGroupElement);
+        const contentGroup = annotationGroup.select(`.${annotationContent}`);
+        // Create subject group if it doesn't exist
+        let subjectGroup = annotationGroup.select(`.${annotationSubject}`);
+        if (subjectGroup.empty()) {
+            subjectGroup = annotationGroup.append('g').attr('class', annotationSubject);
+            subjectGroup.append('circle');
+            subjectGroup.append('line');
+        }
         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;
@@ -84,7 +101,6 @@ class Annotations extends ComponentCore {
         const x1 = subjectX + Math.cos(angle * Math.PI / 180) * (subjectRadius + padding);
         const y1 = subjectY + Math.sin(angle * Math.PI / 180) * (subjectRadius + padding);
         subjectGroup.select('circle')
-            .attr('visibility', subject ? null : 'hidden')
             .attr('cx', subjectX)
             .attr('cy', subjectY)
             .attr('r', subjectRadius)
@@ -92,7 +108,6 @@ class Annotations extends ComponentCore {
             .style('fill', subjectFillColor)
             .style('stroke-dasharray', subjectStrokeDasharray);
         subjectGroup.select('line')
-            .attr('visibility', subject ? null : 'hidden')
             .attr('x1', x1)
             .attr('y1', y1)
             .attr('x2', x1)

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'\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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"}
+{"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    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          // Render debug bounding boxes showing the frame (x, y, width, height)\n          contentGroupElement.selectAll(`.${s.debugBoundingBox}`).remove()\n          if (config.renderTextBoundingBoxes) {\n            const debugWidth = width ?? 100\n            const debugHeight = height || 0.1\n            contentGroupElement.append('rect')\n              .attr('class', s.debugBoundingBox)\n              .attr('x', x)\n              .attr('y', y)\n              .attr('width', debugWidth)\n              .attr('height', debugHeight)\n          }\n        }\n\n        if (annotation.subject) {\n          requestAnimationFrame(() => this._renderSubject(elements[i], annotation.subject))\n        } else {\n          select(elements[i]).select(`.${s.annotationSubject}`).remove()\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 annotationGroup = select(annotationGroupElement)\n    const contentGroup = annotationGroup.select<SVGGElement>(`.${s.annotationContent}`)\n\n    // Create subject group if it doesn't exist\n    let subjectGroup = annotationGroup.select<SVGGElement>(`.${s.annotationSubject}`)\n    if (subjectGroup.empty()) {\n      subjectGroup = annotationGroup.append('g').attr('class', s.annotationSubject)\n      subjectGroup.append('circle')\n      subjectGroup.append('line')\n    }\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('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('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.debugBoundingBox","s.annotationSubject","s","s.variables"],"mappings":"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"}

package/components/annotations/style.d.ts

@@ -7,6 +7,7 @@ export declare const variables: {
     annotationsSubjectStrokeColor: "--vis-annotations-subject-stroke-color";
     annotationsSubjectFillColor: "--vis-annotations-subject-fill-color";
     annotationsSubjectStrokeDasharray: "--vis-annotations-subject-stroke-dasharray";
+    annotationsDebugBoundingBoxStrokeColor: "--vis-annotations-debug-bounding-box-stroke-color";
     darkAnnotationsTextColor: "--vis-dark-annotations-text-color";
     darkAnnotationsConnectorStrokeColor: "--vis-dark-annotations-connector-stroke-color";
     darkAnnotationsSubjectStrokeColor: "--vis-dark-annotations-subject-stroke-color";
@@ -14,3 +15,4 @@ export declare const variables: {
 export declare const annotation: string;
 export declare const annotationSubject: string;
 export declare const annotationContent: string;
+export declare const debugBoundingBox: string;

package/components/annotations/style.js

@@ -9,6 +9,7 @@ const cssVarDefaults = {
     '--vis-annotations-subject-stroke-color': '#444',
     '--vis-annotations-subject-fill-color': 'none',
     '--vis-annotations-subject-stroke-dasharray': 'none',
+    '--vis-annotations-debug-bounding-box-stroke-color': '#f00',
     '--vis-dark-annotations-text-color': '#e8e9ef',
     '--vis-dark-annotations-connector-stroke-color': '#fff',
     '--vis-dark-annotations-subject-stroke-color': '#fff',
@@ -41,7 +42,13 @@ const annotationContent = css `
   > text {
     fill: var(--vis-annotations-text-color);
   }
+`;
+const debugBoundingBox = css `
+  label: debugBoundingBox;
+  fill: none;
+  stroke: var(--vis-annotations-debug-bounding-box-stroke-color);
+  stroke-width: 1;
 `;
 
-export { annotation, annotationContent, annotationSubject, root, variables };
+export { annotation, annotationContent, annotationSubject, debugBoundingBox, 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-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;;;;;;;;;"}
+{"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-annotations-debug-bounding-box-stroke-color': '#f00',\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\nexport const debugBoundingBox = css`\n  label: debugBoundingBox;\n  fill: none;\n  stroke: var(--vis-annotations-debug-bounding-box-stroke-color);\n  stroke-width: 1;\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,mDAAmD,EAAE,MAAM;AAE3D,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;;;;;EAKnC;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/area/config.d.ts

@@ -1,6 +1,6 @@
 import { XYComponentConfigInterface } from "../../core/xy-component/config";
 import { CurveType } from "../../types/curve";
-import { ColorAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
+import { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
 export interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
     /** Area color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */
     color?: ColorAccessor<Datum[]>;
@@ -12,6 +12,14 @@ export interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<D
     opacity?: NumericAccessor<Datum[]>;
     /** Optional area cursor. String or accessor function. Default: `null` */
     cursor?: StringAccessor<Datum[]>;
+    /** Display a line on the top of the area. Default: `false` */
+    line?: boolean;
+    /** Line color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */
+    lineColor?: ColorAccessor<Datum[]>;
+    /** Line width in pixels. Default: `2` */
+    lineWidth?: number;
+    /** Line dash array, see SVG's stroke-dasharray. Default: `undefined` */
+    lineDashArray?: GenericAccessor<number[], Datum[]>;
     /** If an area is smaller than 1px, extend it to have 1px height. Default: `false`
      * @deprecated Use minHeight instead
      */

package/components/area/config.js

@@ -1,7 +1,7 @@
 import { XYComponentDefaultConfig } from '../../core/xy-component/config.js';
 import { CurveType } from '../../types/curve.js';
 
-const AreaDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { color: undefined, curveType: CurveType.MonotoneX, baseline: () => 0, opacity: 1, cursor: null, minHeight1Px: false, minHeight: undefined, stackMinHeight: false });
+const AreaDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { color: undefined, curveType: CurveType.MonotoneX, baseline: () => 0, opacity: 1, cursor: null, line: false, lineColor: undefined, lineWidth: 2, lineDashArray: undefined, minHeight1Px: false, minHeight: undefined, stackMinHeight: false });
 
 export { AreaDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/area/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/area/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { CurveType } from 'types/curve'\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\nexport interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n  /** Area color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */\n  color?: ColorAccessor<Datum[]>;\n  /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */\n  curveType?: CurveType | string;\n  /** Baseline value or accessor function. Default: `undefined` */\n  baseline?: NumericAccessor<Datum>;\n  /** Opacity value or accessor function. Default: `1` */\n  opacity?: NumericAccessor<Datum[]>;\n  /** Optional area cursor. String or accessor function. Default: `null` */\n  cursor?: StringAccessor<Datum[]>;\n  /** If an area is smaller than 1px, extend it to have 1px height. Default: `false`\n   * @deprecated Use minHeight instead\n   */\n  minHeight1Px?: boolean;\n  /** Minimum height of the area, use carefully.\n   * This setting is useful when some of the area values are zeros or very small so visually they become\n   * practically invisible, but you want to show that the data behind them exists and they're not just empty segments.\n   * Default: `undefined` */\n  minHeight?: number;\n  /** Whether to stack min height areas or not. Default: `undefined` */\n  stackMinHeight?: boolean;\n}\n\nexport const AreaDefaultConfig: AreaConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  color: undefined,\n  curveType: CurveType.MonotoneX,\n  baseline: (): number => 0,\n  opacity: 1,\n  cursor: null,\n  minHeight1Px: false,\n  minHeight: undefined,\n  stackMinHeight: false,\n}\n"],"names":[],"mappings":";;;AA8Ba,MAAA,iBAAiB,mCACzB,wBAAwB,CAAA,EAAA,EAC3B,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,QAAQ,EAAE,MAAc,CAAC,EACzB,OAAO,EAAE,CAAC,EACV,MAAM,EAAE,IAAI,EACZ,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,KAAK;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/area/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { CurveType } from 'types/curve'\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\nexport interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n  /** Area color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */\n  color?: ColorAccessor<Datum[]>;\n  /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */\n  curveType?: CurveType | string;\n  /** Baseline value or accessor function. Default: `undefined` */\n  baseline?: NumericAccessor<Datum>;\n  /** Opacity value or accessor function. Default: `1` */\n  opacity?: NumericAccessor<Datum[]>;\n  /** Optional area cursor. String or accessor function. Default: `null` */\n  cursor?: StringAccessor<Datum[]>;\n  /** Display a line on the top of the area. Default: `false` */\n  line?: boolean;\n  /** Line color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */\n  lineColor?: ColorAccessor<Datum[]>;\n  /** Line width in pixels. Default: `2` */\n  lineWidth?: number;\n  /** Line dash array, see SVG's stroke-dasharray. Default: `undefined` */\n  lineDashArray?: GenericAccessor<number[], Datum[]>;\n  /** If an area is smaller than 1px, extend it to have 1px height. Default: `false`\n   * @deprecated Use minHeight instead\n   */\n  minHeight1Px?: boolean;\n  /** Minimum height of the area, use carefully.\n   * This setting is useful when some of the area values are zeros or very small so visually they become\n   * practically invisible, but you want to show that the data behind them exists and they're not just empty segments.\n   * Default: `undefined` */\n  minHeight?: number;\n  /** Whether to stack min height areas or not. Default: `undefined` */\n  stackMinHeight?: boolean;\n}\n\nexport const AreaDefaultConfig: AreaConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  color: undefined,\n  curveType: CurveType.MonotoneX,\n  baseline: (): number => 0,\n  opacity: 1,\n  cursor: null,\n  line: false,\n  lineColor: undefined,\n  lineWidth: 2,\n  lineDashArray: undefined,\n  minHeight1Px: false,\n  minHeight: undefined,\n  stackMinHeight: false,\n}\n"],"names":[],"mappings":";;;AAsCa,MAAA,iBAAiB,GACzB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,wBAAwB,CAC3B,EAAA,EAAA,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,QAAQ,EAAE,MAAc,CAAC,EACzB,OAAO,EAAE,CAAC,EACV,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,EACZ,aAAa,EAAE,SAAS,EACxB,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,KAAK,EAAA;;;;"}

package/components/area/index.d.ts

@@ -1,4 +1,6 @@
 import { XYComponentCore } from "../../core/xy-component";
+import { Spacing } from "../../types/spacing";
+import { AreaDatum } from './types';
 import { AreaConfigInterface } from './config';
 import * as s from './style';
 export declare class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {
@@ -7,12 +9,16 @@ export declare class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterf
     config: AreaConfigInterface<Datum>;
     stacked: boolean;
     private _areaGen;
+    private _lineGen;
     private _prevNegative;
     events: {
         [x: string]: {};
     };
     constructor(config?: AreaConfigInterface<Datum>);
+    get bleed(): Spacing;
     _render(customDuration?: number): void;
+    _renderLines(duration: number, stackedData: AreaDatum[][]): void;
     getYDataExtent(scaleByVisibleData: boolean): number[];
     _emptyPath(): string;
+    _emptyLinePath(): string;
 }

package/components/area/index.js

@@ -1,14 +1,15 @@
 import { select } from 'd3-selection';
-import { area } from 'd3-shape';
+import { area, line } from 'd3-shape';
 import { interpolatePath } from 'd3-interpolate-path';
 import { XYComponentCore } from '../../core/xy-component/index.js';
-import { isNumber, isArray, getNumber, getStackedData, getString, filterDataByRange, getStackedExtent } from '../../utils/data.js';
+import { isNumber, isArray, getNumber, getStackedData, getString, getValue, filterDataByRange, getStackedExtent } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { getColor } from '../../utils/color.js';
 import { Curve } from '../../types/curve.js';
+import { Direction } from '../../types/direction.js';
 import { AreaDefaultConfig } from './config.js';
 import * as style from './style.js';
-import { area as area$1 } from './style.js';
+import { area as area$1, areaLinePath } from './style.js';
 
 class Area extends XYComponentCore {
     constructor(config) {
@@ -24,6 +25,24 @@ class Area extends XYComponentCore {
         // Determine if the provided chart should be stacked
         this.stacked = Array.isArray(this.config.y);
     }
+    get bleed() {
+        const { config: { line, lineWidth } } = this;
+        if (!line)
+            return { top: 0, bottom: 0, left: 0, right: 0 };
+        const yDomain = this.yScale.domain();
+        const yDirection = this.yScale.range()[0] > this.yScale.range()[1]
+            ? Direction.North
+            : Direction.South;
+        const isYDirectionSouth = yDirection === Direction.South;
+        const isLineThick = lineWidth > 3;
+        const isLineVeryThick = lineWidth >= 10;
+        return {
+            top: !isLineVeryThick && ((!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))) ? 0 : lineWidth / 2,
+            bottom: !isLineVeryThick && ((!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))) ? 0 : lineWidth / 2,
+            left: isLineThick ? lineWidth / 2 : 0,
+            right: isLineThick ? lineWidth / 2 : 0,
+        };
+    }
     _render(customDuration) {
         super._render(customDuration);
         const { config, datamodel: { data } } = this;
@@ -70,7 +89,7 @@ class Area extends XYComponentCore {
         // We reverse the data in order to have the first areas to be displayed on top
         //   for better visibility when they're close to zero
         const areaMaxIdx = stackedData.length - 1;
-        const stackedDataReversed = stackedData.reverse();
+        const stackedDataReversed = [...stackedData].reverse();
         const areas = this.g
             .selectAll(`.${area$1}`)
             .data(stackedDataReversed);
@@ -100,6 +119,52 @@ class Area extends XYComponentCore {
         smartTransition(areas.exit(), duration)
             .style('opacity', 0)
             .remove();
+        if (config.line) {
+            this._renderLines(duration, stackedData);
+        }
+    }
+    _renderLines(duration, stackedData) {
+        var _a;
+        const { config, datamodel: { data } } = this;
+        const areaMaxIdx = stackedData.length - 1;
+        const stackedDataReversed = [...stackedData].reverse();
+        const colorAccessor = (_a = config.lineColor) !== null && _a !== void 0 ? _a : config.color;
+        const lines = this.g
+            .selectAll(`.${areaLinePath}`)
+            .data(stackedDataReversed);
+        const areas = this.g.selectAll(`.${area$1}`).nodes();
+        const linesEnter = lines.enter().insert('path', (d, i) => areas[i + 1])
+            .attr('class', areaLinePath)
+            .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))
+            .attr('stroke-width', config.lineWidth)
+            .attr('stroke-opacity', 0);
+        const linesMerged = smartTransition(linesEnter.merge(lines), duration)
+            .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))
+            .attr('stroke-width', config.lineWidth)
+            .attr('stroke-opacity', 1)
+            .attr('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))
+            .style('stroke-dasharray', (d, i) => { var _a, _b; return (_b = (_a = getValue(data, config.lineDashArray, i)) === null || _a === void 0 ? void 0 : _a.join(' ')) !== null && _b !== void 0 ? _b : null; });
+        const curveGen = Curve[config.curveType];
+        this._lineGen = line()
+            .x(d => d.x)
+            .y(d => d.y1)
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            .curve(curveGen);
+        if (duration) {
+            const lineTransition = linesMerged;
+            lineTransition.attrTween('d', (d, i, el) => {
+                const previous = select(el[i]).attr('d') || this._emptyLinePath();
+                const next = this._lineGen(d) || this._emptyLinePath();
+                return interpolatePath(previous, next);
+            });
+        }
+        else {
+            linesMerged.attr('d', d => this._lineGen(d) || this._emptyLinePath());
+        }
+        smartTransition(lines.exit(), duration)
+            .style('opacity', 0)
+            .remove();
     }
     getYDataExtent(scaleByVisibleData) {
         const { config, datamodel } = this;
@@ -118,6 +183,11 @@ class Area extends XYComponentCore {
             { y0, y1, x: xRange[1] },
         ]);
     }
+    _emptyLinePath() {
+        const xRange = this.xScale.range();
+        const yRange = this.yScale.range();
+        return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`;
+    }
 }
 Area.selectors = style;
 

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    // Determine if the provided chart should be stacked\n    this.stacked = Array.isArray(this.config.y)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n    const minHeightCumulativeArray: number[] = []\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => {\n          const x = areaDataX[j]\n          const y0 = this.yScale(d[0])\n          const y1 = this.yScale(d[1])\n          const isNegativeArea = y1 > y0\n\n          // Only apply cumulative adjustment if `config.stackMinHeight` is true\n          const cumulative = config.stackMinHeight ? (minHeightCumulativeArray[j] || 0) : 0\n          const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n          const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n          // Calculate height adjustment if needed\n          let heightAdjustment = 0\n          if ((config.minHeight || config.minHeight1Px) &&\n              Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n            heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n\n            // Only update cumulative array if we're stacking min heights\n            if (config.stackMinHeight) {\n              minHeightCumulativeArray[j] = cumulative + heightAdjustment\n            }\n          }\n\n          return {\n            x,\n            y0: adjustedY0,\n            y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n          }\n        }\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = stackedData.reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this._areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this._areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const xDomain = this.xScale.domain() as [number, number]\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, xDomain, config.x, true) : 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, line, Line as LineInterface } 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, getValue } 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'\nimport { Spacing } from 'types/spacing'\nimport { Direction } from 'types/direction'\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 _lineGen: LineInterface<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  get bleed (): Spacing {\n    const { config: { line, lineWidth } } = this\n    if (!line) return { top: 0, bottom: 0, left: 0, right: 0 }\n\n    const yDomain = this.yScale.domain() as [number, number]\n    const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n      ? Direction.North\n      : Direction.South\n    const isYDirectionSouth = yDirection === Direction.South\n\n    const isLineThick = lineWidth > 3\n    const isLineVeryThick = lineWidth >= 10\n    return {\n      top: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n      ) ? 0 : lineWidth / 2,\n      bottom: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n      ) ? 0 : lineWidth / 2,\n      left: isLineThick ? lineWidth / 2 : 0,\n      right: isLineThick ? lineWidth / 2 : 0,\n    }\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n    const minHeightCumulativeArray: number[] = []\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => {\n          const x = areaDataX[j]\n          const y0 = this.yScale(d[0])\n          const y1 = this.yScale(d[1])\n          const isNegativeArea = y1 > y0\n\n          // Only apply cumulative adjustment if `config.stackMinHeight` is true\n          const cumulative = config.stackMinHeight ? (minHeightCumulativeArray[j] || 0) : 0\n          const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n          const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n          // Calculate height adjustment if needed\n          let heightAdjustment = 0\n          if ((config.minHeight || config.minHeight1Px) &&\n              Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n            heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n\n            // Only update cumulative array if we're stacking min heights\n            if (config.stackMinHeight) {\n              minHeightCumulativeArray[j] = cumulative + heightAdjustment\n            }\n          }\n\n          return {\n            x,\n            y0: adjustedY0,\n            y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n          }\n        }\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = [...stackedData].reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this._areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this._areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n\n    if (config.line) {\n      this._renderLines(duration, stackedData)\n    }\n  }\n\n  _renderLines (duration: number, stackedData: AreaDatum[][]): void {\n    const { config, datamodel: { data } } = this\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = [...stackedData].reverse()\n    const colorAccessor = config.lineColor ?? config.color\n    const lines = this.g\n      .selectAll<SVGPathElement, AreaDatum[]>(`.${s.areaLinePath}`)\n      .data(stackedDataReversed)\n\n    const areas = this.g.selectAll(`.${s.area}`).nodes()\n    const linesEnter = lines.enter().insert('path', (d, i) => areas[i + 1])\n      .attr('class', s.areaLinePath)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 0)\n\n    const linesMerged = smartTransition(linesEnter.merge(lines), duration)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 1)\n      .attr('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n      .style('stroke-dasharray', (d, i) => getValue<Datum[], number[]>(data, config.lineDashArray, i)?.join(' ') ?? null)\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._lineGen = line<AreaDatum>()\n      .x(d => d.x)\n      .y(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    if (duration) {\n      const lineTransition = linesMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      lineTransition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d') || this._emptyLinePath()\n        const next = this._lineGen(d) || this._emptyLinePath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      linesMerged.attr('d', d => this._lineGen(d) || this._emptyLinePath())\n    }\n\n    smartTransition(lines.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 xDomain = this.xScale.domain() as [number, number]\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, xDomain, config.x, true) : 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  _emptyLinePath (): string {\n    const xRange = this.xScale.range()\n    const yRange = this.yScale.range()\n    return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n  }\n}\n"],"names":["s.area","s.areaLinePath","s"],"mappings":"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"}

package/components/area/style.d.ts

@@ -1,3 +1,4 @@
 export declare const root: string;
 export declare const globalStyles: void;
 export declare const area: string;
+export declare const areaLinePath: string;

package/components/area/style.js

@@ -36,7 +36,13 @@ const area = css `
     fill-opacity: var(--vis-area-hover-fill-opacity);
     stroke-width: var(--vis-area-hover-stroke-width);
   }
+`;
+const areaLinePath = css `
+  label: areaLinePath;
+  fill: none;
+  stroke-dasharray: var(--vis-line-stroke-dasharray);
+  stroke-dashoffset: var(--vis-line-stroke-dashoffset);
 `;
 
-export { area, globalStyles, root };
+export { area, areaLinePath, globalStyles, root };
 //# sourceMappingURL=style.js.map

package/components/area/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n\nexport const root = css`\n  label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-area-cursor: default;\n    --vis-area-fill-opacity: 1;\n    --vis-area-stroke-color: none;\n    --vis-area-stroke-width: 0px;\n    --vis-area-stroke-dasharray: none;\n    --vis-area-stroke-opacity: 1;\n    --vis-area-hover-fill-opacity: none;\n    --vis-area-hover-stroke-width: none;\n\n    /* Dark Theme */\n    --vis-dark-area-stroke-color: none;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n  }\n\n`\nexport const area = css`\n  label: area;\n  cursor: var(--vis-area-cursor);\n  fill-opacity: var(--vis-area-fill-opacity);\n  stroke-width: var(--vis-area-stroke-width);\n  stroke-dasharray: var(--vis-area-stroke-dasharray);\n  stroke: var(--vis-area-stroke-color);\n  stroke-opacity: var(--vis-area-stroke-opacity);\n\n  &:hover {\n    fill-opacity: var(--vis-area-hover-fill-opacity);\n    stroke-width: var(--vis-area-hover-stroke-width);\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;AAepB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AACM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n\nexport const root = css`\n  label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-area-cursor: default;\n    --vis-area-fill-opacity: 1;\n    --vis-area-stroke-color: none;\n    --vis-area-stroke-width: 0px;\n    --vis-area-stroke-dasharray: none;\n    --vis-area-stroke-opacity: 1;\n    --vis-area-hover-fill-opacity: none;\n    --vis-area-hover-stroke-width: none;\n\n    /* Dark Theme */\n    --vis-dark-area-stroke-color: none;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n  }\n\n`\nexport const area = css`\n  label: area;\n  cursor: var(--vis-area-cursor);\n  fill-opacity: var(--vis-area-fill-opacity);\n  stroke-width: var(--vis-area-stroke-width);\n  stroke-dasharray: var(--vis-area-stroke-dasharray);\n  stroke: var(--vis-area-stroke-color);\n  stroke-opacity: var(--vis-area-stroke-opacity);\n\n  &:hover {\n    fill-opacity: var(--vis-area-hover-fill-opacity);\n    stroke-width: var(--vis-area-hover-stroke-width);\n  }\n`\n\nexport const areaLinePath = css`\n  label: areaLinePath;\n  fill: none;\n  stroke-dasharray: var(--vis-line-stroke-dasharray);\n  stroke-dashoffset: var(--vis-line-stroke-dashoffset);\n`\n"],"names":[],"mappings":";;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;AAepB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AACM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAatB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/axis/index.d.ts

@@ -15,6 +15,7 @@ export declare class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterf
     private _requiredMargin;
     private _defaultNumTicks;
     private _collideTickLabelsAnimFrameId;
+    private _tickTextStyleCached;
     protected events: {};
     constructor(config?: AxisConfigInterface<Datum>);
     /** Renders axis to an invisible grouped to calculate automatic chart margins */
@@ -40,6 +41,7 @@ export declare class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterf
     private _getFullDomainPath;
     private _renderAxisLabel;
     private _getLabelDY;
+    private _getTickTextOffset;
     private _alignTickLabels;
     private _getYTickTextTranslate;
 }