@unovis/ts 1.4.0-version.12 → 1.4.1-alpha.0

package/components/annotations/config.d.ts

@@ -0,0 +1,19 @@
+import { ComponentConfigInterface } from "../../core/component/config";
+import { AnnotationItem } from './types';
+export interface AnnotationsConfigInterface extends ComponentConfigInterface {
+    /** Legend items. Array of `AnnotationItem`:
+     * ```
+     * {
+     *   content: string | UnovisText | UnovisText[];
+     *   subject?: AnnotationSubject;
+     *   x?: LengthUnit;
+     *   y?: LengthUnit;
+     *   width?: LengthUnit;
+     *   height?: LengthUnit;
+     * }
+     * ```
+     * To learn more, see our docs https://unovis.dev/docs/auxiliary/Annotations/
+    * Default: `[]` */
+    items: AnnotationItem[] | undefined;
+}
+export declare const AnnotationsDefaultConfig: AnnotationsConfigInterface;

package/components/annotations/config.js

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

package/components/annotations/config.js.map

@@ -0,0 +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;;;;"}

package/components/annotations/index.d.ts

@@ -0,0 +1,26 @@
+import { Selection } from 'd3-selection';
+import { ComponentCore } from "../../core/component";
+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);
+    _render(customDuration?: number): void;
+    private _renderSubject;
+}

package/components/annotations/index.js

@@ -0,0 +1,110 @@
+import { select } from 'd3-selection';
+import { ComponentCore } from '../../core/component/index.js';
+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, annotationSubject, variables } from './style.js';
+
+class Annotations extends ComponentCore {
+    constructor(config) {
+        super();
+        this._defaultConfig = AnnotationsDefaultConfig;
+        this.config = this._defaultConfig;
+        this.events = {};
+        if (config)
+            this.setConfig(config);
+    }
+    _render(customDuration) {
+        super._render(customDuration);
+        const { config } = this;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        const annotations = this.g.selectAll(`.${annotation}`)
+            .data(config.items, d => JSON.stringify(d));
+        const annotationsEnter = annotations.enter().append('g')
+            .attr('class', annotation)
+            .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) => {
+            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);
+            }
+            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) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        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;
+        const subjectFillColor = (_d = subject === null || subject === void 0 ? void 0 : subject.fillColor) !== null && _d !== void 0 ? _d : null;
+        const subjectStrokeDasharray = (_e = subject === null || subject === void 0 ? void 0 : subject.strokeDasharray) !== null && _e !== void 0 ? _e : null;
+        const connectorLineColor = (_f = subject === null || subject === void 0 ? void 0 : subject.connectorLineColor) !== null && _f !== void 0 ? _f : null;
+        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 = 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;
+        const x2 = (dx < dy) && ((subjectY < contentBbox.y) || (subjectY > (contentBbox.y + contentBbox.height)))
+            ? contentBbox.x + contentBbox.width / 2
+            : (subjectX < contentBbox.x) ? contentBbox.x - annotationPadding : contentBbox.x + contentBbox.width + annotationPadding;
+        const y2 = (dx >= dy) || ((subjectY >= contentBbox.y) && (subjectY <= (contentBbox.y + contentBbox.height)))
+            ? contentBbox.y + contentBbox.height / 2
+            : (subjectY < contentBbox.y) ? contentBbox.y - annotationPadding : contentBbox.y + contentBbox.height + annotationPadding;
+        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);
+        subjectGroup.select('circle')
+            .attr('visibility', subject ? null : 'hidden')
+            .attr('cx', subjectX)
+            .attr('cy', subjectY)
+            .attr('r', subjectRadius)
+            .style('stroke', subjectStrokeColor)
+            .style('fill', subjectFillColor)
+            .style('stroke-dasharray', subjectStrokeDasharray);
+        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);
+    }
+}
+Annotations.selectors = style;
+Annotations.cssVariables = variables;
+
+export { Annotations };
+//# sourceMappingURL=index.js.map

package/components/annotations/index.js.map

@@ -0,0 +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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"}

package/components/annotations/style.d.ts

@@ -0,0 +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;

package/components/annotations/style.js

@@ -0,0 +1,47 @@
+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;
+`;
+const variables = getCssVarNames(cssVarDefaults);
+injectGlobalCssVariables(cssVarDefaults, root);
+const annotation = css `
+  label: annotation;
+`;
+const annotationSubject = css `
+  label: annotationSubject;
+
+  line {
+    stroke: var(${variables.annotationsConnectorStrokeColor});
+    stroke-width: var(${variables.annotationsConnectorStrokeWidth});
+    stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});
+  }
+
+  circle {
+    stroke: var(${variables.annotationsSubjectStrokeColor});
+    fill: var(${variables.annotationsSubjectFillColor});
+    stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});
+  }
+`;
+const annotationContent = css `
+  label: annotationContent;
+  > text {
+    fill: var(--vis-annotations-text-color);
+  }
+`;
+
+export { annotation, annotationContent, annotationSubject, root, variables };
+//# sourceMappingURL=style.js.map

package/components/annotations/style.js.map

@@ -0,0 +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;;;;;;;;;"}

package/components/annotations/types.d.ts

@@ -0,0 +1,32 @@
+import { LengthUnit } from "../../types/misc";
+import { UnovisText, UnovisTextFrameOptions } from "../../types/text";
+export declare type AnnotationItem = UnovisTextFrameOptions & {
+    content: string | UnovisText | UnovisText[];
+    subject?: AnnotationSubject;
+    x?: LengthUnit;
+    y?: LengthUnit;
+    width?: LengthUnit;
+    height?: LengthUnit;
+    cursor?: string;
+};
+export declare type AnnotationSubjectLocationXY = {
+    x: LengthUnit | (() => LengthUnit);
+    y: LengthUnit | (() => LengthUnit);
+};
+export declare type AnnotationSubjectStyle = {
+    /** Subject radius */
+    radius?: number;
+    /** Subject fill color */
+    fillColor?: string;
+    /** Subject stroke color */
+    strokeColor?: string;
+    /** Subject stroke-dasharray configuration */
+    strokeDasharray?: string;
+    /** Padding between the subject and the connector line */
+    padding?: number;
+    /** Connector line color */
+    connectorLineColor?: string;
+    /** Connector line stroke-dasharray configuration */
+    connectorLineStrokeDasharray?: string;
+};
+export declare type AnnotationSubject = AnnotationSubjectStyle & AnnotationSubjectLocationXY;

package/components/annotations/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/components/annotations/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/area/config.d.ts

@@ -5,7 +5,7 @@ export interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<D
     /** Area color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */
     color?: ColorAccessor<Datum[]>;
     /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */
-    curveType?: CurveType;
+    curveType?: CurveType | string;
     /** Baseline value or accessor function. Default: `undefined` */
     baseline?: NumericAccessor<Datum>;
     /** Opacity value or accessor function. Default: `1` */

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;\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.\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: `false` */\n  minHeight1Px?: 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}\n"],"names":[],"mappings":";;;AAwBO,MAAM,iBAAiB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACzB,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,YAAY,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, 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.\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: `false` */\n  minHeight1Px?: 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}\n"],"names":[],"mappings":";;;AAwBO,MAAM,iBAAiB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACzB,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,YAAY,EAAE,KAAK;;;;"}

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 } 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]\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/bullet-legend/config.d.ts

@@ -1,10 +1,12 @@
-import { BulletLegendItemInterface, BulletShape } from './types';
+import { GenericAccessor } from "../../types/accessor";
+import { BulletLegendItemInterface, BulletShape, BulletLegendOrientation } from './types';
 export interface BulletLegendConfigInterface {
     /** Legend items. Array of `BulletLegendItemInterface`:
      * ```
      * {
      *   name: string | number;
      *   color?: string;
+     *   shape?: BulletShape;
      *   inactive?: boolean;
      *   hidden?: boolean;
      *   pointer?: boolean;
@@ -22,7 +24,13 @@ export interface BulletLegendConfigInterface {
     labelMaxWidth?: string | null;
     /** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */
     bulletSize?: string | null;
-    /** Bullet shape: `BulletShape.Circle`, `BulletShape.Line` or `BulletShape.Square`. Default: `BulletShape.Circle` */
-    bulletShape?: BulletShape;
+    /** Bullet shape enum value or accessor function. Default: `d => d.shape ?? BulletShape.Circle */
+    bulletShape?: GenericAccessor<BulletShape, BulletLegendItemInterface>;
+    /** Legend orientation. When set to `BulletLegendOrientation.Horizontal`, each legend item will
+     * start on a new line. Default: `BulletLegendOrientation.Horizontal` */
+    orientation?: BulletLegendOrientation | string;
+    /** If set to true, the legend will be rendered directly into the HTML element provided to the constructor
+     * without creating additional `div` element. Default: `false` */
+    renderIntoProvidedDomNode?: boolean;
 }
 export declare const BulletLegendDefaultConfig: BulletLegendConfigInterface;

package/components/bullet-legend/config.js

@@ -1,6 +1,5 @@
-import { BulletShape } from './types.js';
+import { BulletShape, BulletLegendOrientation } from './types.js';
 
-// Local Types
 const BulletLegendDefaultConfig = {
     items: [],
     labelClassName: '',
@@ -8,7 +7,9 @@ const BulletLegendDefaultConfig = {
     labelFontSize: null,
     labelMaxWidth: null,
     bulletSize: null,
-    bulletShape: BulletShape.Circle,
+    bulletShape: d => { var _a; return (_a = d.shape) !== null && _a !== void 0 ? _a : BulletShape.Circle; },
+    orientation: BulletLegendOrientation.Horizontal,
+    renderIntoProvidedDomNode: false,
 };
 
 export { BulletLegendDefaultConfig };

package/components/bullet-legend/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["// Local Types\nimport { BulletLegendItemInterface, BulletShape } from './types'\n\nexport interface BulletLegendConfigInterface {\n  /** Legend items. Array of `BulletLegendItemInterface`:\n   * ```\n   * {\n   *   name: string | number;\n   *   color?: string;\n   *   inactive?: boolean;\n   *   hidden?: boolean;\n   *   pointer?: boolean;\n   * }\n   * ```\n  * Default: `[]` */\n  items: BulletLegendItemInterface[];\n  /** Apply a specific class to the labels. Default: `''` */\n  labelClassName?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n  /** Label text (<span> element) font-size CSS. Default: `null` */\n  labelFontSize?: string | null;\n  /** Label text (<span> element) max-width CSS property. Default: `null` */\n  labelMaxWidth?: string | null;\n  /** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */\n  bulletSize?: string | null;\n  /** Bullet shape: `BulletShape.Circle`, `BulletShape.Line` or `BulletShape.Square`. Default: `BulletShape.Circle` */\n  bulletShape?: BulletShape;\n}\n\nexport const BulletLegendDefaultConfig: BulletLegendConfigInterface = {\n  items: [],\n  labelClassName: '',\n  onLegendItemClick: undefined,\n  labelFontSize: null,\n  labelMaxWidth: null,\n  bulletSize: null,\n  bulletShape: BulletShape.Circle,\n}\n"],"names":[],"mappings":";;AAAA;AA8Ba,MAAA,yBAAyB,GAAgC;AACpE,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,cAAc,EAAE,EAAE;AAClB,IAAA,iBAAiB,EAAE,SAAS;AAC5B,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,WAAW,CAAC,MAAM;;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["// Local Types\nimport { GenericAccessor } from 'types/accessor'\nimport { BulletLegendItemInterface, BulletShape, BulletLegendOrientation } from './types'\n\nexport interface BulletLegendConfigInterface {\n  /** Legend items. Array of `BulletLegendItemInterface`:\n   * ```\n   * {\n   *   name: string | number;\n   *   color?: string;\n   *   shape?: BulletShape;\n   *   inactive?: boolean;\n   *   hidden?: boolean;\n   *   pointer?: boolean;\n   * }\n   * ```\n  * Default: `[]` */\n  items: BulletLegendItemInterface[];\n  /** Apply a specific class to the labels. Default: `''` */\n  labelClassName?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n  /** Label text (<span> element) font-size CSS. Default: `null` */\n  labelFontSize?: string | null;\n  /** Label text (<span> element) max-width CSS property. Default: `null` */\n  labelMaxWidth?: string | null;\n  /** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */\n  bulletSize?: string | null;\n  /** Bullet shape enum value or accessor function. Default: `d => d.shape ?? BulletShape.Circle */\n  bulletShape?: GenericAccessor<BulletShape, BulletLegendItemInterface>;\n  /** Legend orientation. When set to `BulletLegendOrientation.Horizontal`, each legend item will\n   * start on a new line. Default: `BulletLegendOrientation.Horizontal` */\n  orientation?: BulletLegendOrientation | string;\n  /** If set to true, the legend will be rendered directly into the HTML element provided to the constructor\n   * without creating additional `div` element. Default: `false` */\n  renderIntoProvidedDomNode?: boolean;\n}\n\nexport const BulletLegendDefaultConfig: BulletLegendConfigInterface = {\n  items: [],\n  labelClassName: '',\n  onLegendItemClick: undefined,\n  labelFontSize: null,\n  labelMaxWidth: null,\n  bulletSize: null,\n  bulletShape: d => d.shape ?? BulletShape.Circle,\n  orientation: BulletLegendOrientation.Horizontal,\n  renderIntoProvidedDomNode: false,\n}\n"],"names":[],"mappings":";;AAsCa,MAAA,yBAAyB,GAAgC;AACpE,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,cAAc,EAAE,EAAE;AAClB,IAAA,iBAAiB,EAAE,SAAS;AAC5B,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,WAAW,EAAE,CAAC,cAAI,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,WAAW,CAAC,MAAM,CAAA,EAAA;IAC/C,WAAW,EAAE,uBAAuB,CAAC,UAAU;AAC/C,IAAA,yBAAyB,EAAE,KAAK;;;;;"}

package/components/bullet-legend/index.d.ts

@@ -6,7 +6,7 @@ export declare class BulletLegend {
     static selectors: typeof s;
     protected _defaultConfig: BulletLegendConfigInterface;
     config: BulletLegendConfigInterface;
-    div: Selection<HTMLDivElement, unknown, null, undefined>;
+    div: Selection<HTMLElement, unknown, null, undefined>;
     element: HTMLElement;
     prevConfig: BulletLegendConfigInterface;
     protected _container: HTMLElement;

package/components/bullet-legend/index.js

@@ -1,9 +1,11 @@
 import { select } from 'd3-selection';
+import { cx } from '@emotion/css';
 import { merge } from '../../utils/data.js';
 import { BulletLegendDefaultConfig } from './config.js';
+import { BulletLegendOrientation } from './types.js';
 import { createBullets, updateBullets } from './modules/shape.js';
 import * as style from './style.js';
-import { root, item, bullet, label, clickable } from './style.js';
+import { root, item, itemVertical, clickable, bullet, label } from './style.js';
 
 class BulletLegend {
     constructor(element, config) {
@@ -11,10 +13,8 @@ class BulletLegend {
         this.config = this._defaultConfig;
         this._colorAccessor = (d) => d.color;
         this._container = element;
-        // Create SVG element for visualizations
-        this.div = select(this._container)
-            .append('div')
-            .attr('class', root);
+        this.div = (config === null || config === void 0 ? void 0 : config.renderIntoProvidedDomNode) ? select(this._container) : select(this._container).append('div');
+        this.div.attr('class', root);
         this.element = this.div.node();
         if (config)
             this.update(config);
@@ -26,28 +26,29 @@ class BulletLegend {
     }
     render() {
         const { config } = this;
-        const legendItems = this.div.selectAll(`.${item}`)
-            .data(config.items);
-        const legendItemsEnter = legendItems.enter()
-            .append('div')
-            .attr('class', item)
+        const legendItems = this.div.selectAll(`.${item}`).data(config.items);
+        const legendItemsEnter = legendItems.enter().append('div')
+            .attr('class', d => cx(item, config.orientation === BulletLegendOrientation.Vertical && itemVertical, d.className))
             .on('click', this._onItemClick.bind(this));
-        legendItemsEnter.append('span')
-            .attr('class', bullet)
-            .call(createBullets, config);
-        legendItemsEnter.append('span')
-            .attr('class', label)
-            .classed(config.labelClassName, true)
-            .style('max-width', config.labelMaxWidth)
-            .style('font-size', config.labelFontSize);
         const legendItemsMerged = legendItemsEnter.merge(legendItems);
         legendItemsMerged
             .classed(clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))
             .style('display', (d) => d.hidden ? 'none' : null);
+        // Bullet
+        legendItemsEnter.append('span')
+            .attr('class', bullet)
+            .call(createBullets);
         legendItemsMerged.select(`.${bullet}`)
-            .style('min-width', config.bulletSize)
+            .style('width', config.bulletSize)
             .style('height', config.bulletSize)
+            .style('box-sizing', 'content-box')
             .call(updateBullets, this.config, this._colorAccessor);
+        // Labels
+        legendItemsEnter.append('span')
+            .attr('class', label)
+            .classed(config.labelClassName, true)
+            .style('max-width', config.labelMaxWidth)
+            .style('font-size', config.labelFontSize);
         legendItemsMerged.select(`.${label}`)
             .text((d) => d.name);
         legendItems.exit().remove();
@@ -63,7 +64,8 @@ class BulletLegend {
             onLegendItemClick(d, index);
     }
     destroy() {
-        this.div.remove();
+        if (this.element !== this._container)
+            this.div.remove();
     }
 }
 BulletLegend.selectors = style;

package/components/bullet-legend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Config\nimport { BulletLegendDefaultConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\n// Modules\nimport { createBullets, updateBullets } from './modules/shape'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n  static selectors = s\n  protected _defaultConfig = BulletLegendDefaultConfig as BulletLegendConfigInterface\n  public config: BulletLegendConfigInterface = this._defaultConfig\n\n  div: Selection<HTMLDivElement, unknown, null, undefined>\n  element: HTMLElement\n  prevConfig: BulletLegendConfigInterface\n  protected _container: HTMLElement\n\n  private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n  constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n    this._container = element\n\n    // Create SVG element for visualizations\n    this.div = select(this._container)\n      .append('div')\n      .attr('class', s.root)\n\n    this.element = this.div.node()\n\n    if (config) this.update(config)\n  }\n\n  update (config: BulletLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = merge(this._defaultConfig, config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n    const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`)\n      .data(config.items)\n\n    const legendItemsEnter = legendItems.enter()\n      .append('div')\n      .attr('class', s.item)\n      .on('click', this._onItemClick.bind(this))\n\n    legendItemsEnter.append('span')\n      .attr('class', s.bullet)\n      .call(createBullets, config)\n\n    legendItemsEnter.append('span')\n      .attr('class', s.label)\n      .classed(config.labelClassName, true)\n      .style('max-width', config.labelMaxWidth)\n      .style('font-size', config.labelFontSize)\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    legendItemsMerged\n      .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n      .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n\n    legendItemsMerged.select<HTMLSpanElement>(`.${s.bullet}`)\n      .style('min-width', config.bulletSize)\n      .style('height', config.bulletSize)\n      .call(updateBullets, this.config, this._colorAccessor)\n\n    legendItemsMerged.select(`.${s.label}`)\n      .text((d: BulletLegendItemInterface) => d.name)\n\n    legendItems.exit().remove()\n  }\n\n  _isItemClickable (item: BulletLegendItemInterface): boolean {\n    return item.pointer === undefined ? true : item.pointer\n  }\n\n  _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n    const { config: { onLegendItemClick } } = this\n\n    const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n    const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n    if (onLegendItemClick) onLegendItemClick(d, index)\n  }\n\n  public destroy (): void {\n    this.div.remove()\n  }\n}\n"],"names":["s.root","s.item","s.bullet","s.label","s.clickable","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { cx } from '@emotion/css'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Config\nimport { BulletLegendDefaultConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface, BulletLegendOrientation } from './types'\n\n// Modules\nimport { createBullets, updateBullets } from './modules/shape'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n  static selectors = s\n  protected _defaultConfig = BulletLegendDefaultConfig as BulletLegendConfigInterface\n  public config: BulletLegendConfigInterface = this._defaultConfig\n\n  div: Selection<HTMLElement, unknown, null, undefined>\n  element: HTMLElement\n  prevConfig: BulletLegendConfigInterface\n  protected _container: HTMLElement\n\n  private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n  constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n    this._container = element\n\n    this.div = config?.renderIntoProvidedDomNode ? select(this._container) : select(this._container).append<HTMLElement>('div')\n    this.div.attr('class', s.root)\n\n    this.element = this.div.node()\n\n    if (config) this.update(config)\n  }\n\n  update (config: BulletLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = merge(this._defaultConfig, config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n\n    const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`).data(config.items)\n\n    const legendItemsEnter = legendItems.enter().append('div')\n      .attr('class', d => cx(\n        s.item,\n        config.orientation === BulletLegendOrientation.Vertical && s.itemVertical,\n        d.className)\n      )\n      .on('click', this._onItemClick.bind(this))\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    legendItemsMerged\n      .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n      .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n\n    // Bullet\n    legendItemsEnter.append('span')\n      .attr('class', s.bullet)\n      .call(createBullets)\n\n    legendItemsMerged.select<SVGElement>(`.${s.bullet}`)\n      .style('width', config.bulletSize)\n      .style('height', config.bulletSize)\n      .style('box-sizing', 'content-box')\n      .call(updateBullets, this.config, this._colorAccessor)\n\n    // Labels\n    legendItemsEnter.append('span')\n      .attr('class', s.label)\n      .classed(config.labelClassName, true)\n      .style('max-width', config.labelMaxWidth)\n      .style('font-size', config.labelFontSize)\n\n    legendItemsMerged.select(`.${s.label}`)\n      .text((d: BulletLegendItemInterface) => d.name)\n\n    legendItems.exit().remove()\n  }\n\n  _isItemClickable (item: BulletLegendItemInterface): boolean {\n    return item.pointer === undefined ? true : item.pointer\n  }\n\n  _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n    const { config: { onLegendItemClick } } = this\n\n    const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n    const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n    if (onLegendItemClick) onLegendItemClick(d, index)\n  }\n\n  public destroy (): void {\n    if (this.element !== this._container) this.div.remove()\n  }\n}\n"],"names":["s.root","s.item","s.itemVertical","s.clickable","s.bullet","s.label","s"],"mappings":"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"}

package/components/bullet-legend/modules/shape.d.ts

@@ -2,5 +2,5 @@ import { Selection } from 'd3-selection';
 import { ColorAccessor } from "../../../types/accessor";
 import { BulletLegendConfigInterface } from '../config';
 import { BulletLegendItemInterface } from '../types';
-export declare function createBullets(container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLDivElement, unknown>, config: BulletLegendConfigInterface): void;
-export declare function updateBullets(container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLDivElement, unknown>, config: BulletLegendConfigInterface, colorAccessor: ColorAccessor<BulletLegendItemInterface>): void;
+export declare function createBullets(container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLElement, unknown>): void;
+export declare function updateBullets(container: Selection<SVGElement, BulletLegendItemInterface, HTMLElement, unknown>, config: BulletLegendConfigInterface, colorAccessor: ColorAccessor<BulletLegendItemInterface>): void;