@unovis/ts 1.4.0-alpha.9 → 1.4.0-beta.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,24 @@
+import { Selection } from 'd3-selection';
+import { ComponentCore } from "../../core/component";
+import { Spacing } from "../../types/spacing";
+import { AnnotationsConfigInterface } from './config';
+import * as s from './style';
+export declare class Annotations extends ComponentCore<unknown[], AnnotationsConfigInterface> {
+    static selectors: typeof s;
+    static cssVariables: {
+        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";
+    };
+    protected _defaultConfig: AnnotationsConfigInterface;
+    config: AnnotationsConfigInterface;
+    g: Selection<SVGGElement, unknown, null, undefined>;
+    events: {};
+    constructor(config?: AnnotationsConfigInterface);
+    get bleed(): Spacing;
+    _render(customDuration?: number): void;
+    private _renderSubject;
+}

package/components/annotations/index.js

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

package/components/annotations/style.d.ts

@@ -0,0 +1,13 @@
+export declare const root: string;
+export declare const variables: {
+    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";
+};
+export declare const annotation: string;
+export declare const annotationSubject: string;
+export declare const annotationContent: string;
+export declare const clickable: string;

package/components/annotations/style.js

@@ -0,0 +1,43 @@
+import { css } from '@emotion/css';
+import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
+
+const cssVarDefaults = {
+    '--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',
+};
+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;
+`;
+const clickable = css `
+  cursor: pointer;
+`;
+
+export { annotation, annotationContent, annotationSubject, clickable, 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-connector-stroke-color': '#444',\n  '--vis-annotations-connector-stroke-width': '1px',\n  '--vis-annotations-connector-stroke-dasharray': 'none',\n\n  '--vis-annotations-subject-stroke-color': '#444',\n  '--vis-annotations-subject-fill-color': 'none',\n  '--vis-annotations-subject-stroke-dasharray': 'none',\n}\n\nexport const root = css`\n  label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n  label: annotation;\n`\n\nexport const annotationSubject = css`\n  label: annotationSubject;\n\n  line {\n    stroke: var(${variables.annotationsConnectorStrokeColor});\n    stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n    stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n  }\n\n  circle {\n    stroke: var(${variables.annotationsSubjectStrokeColor});\n    fill: var(${variables.annotationsSubjectFillColor});\n    stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n  }\n`\n\nexport const annotationContent = css`\n  label: annotationContent;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;CACrD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;MACY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;AAIlB,gBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACnC,sBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACrC,0BAAA,EAAA,SAAS,CAAC,mCAAmC,CAAA;;;;AAIvD,gBAAA,EAAA,SAAS,CAAC,6BAA6B,CAAA;AACzC,cAAA,EAAA,SAAS,CAAC,2BAA2B,CAAA;AACzB,0BAAA,EAAA,SAAS,CAAC,iCAAiC,CAAA;;EAEtE;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;EAEnC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/components/annotations/types.d.ts

@@ -0,0 +1,43 @@
+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;
+};
+export declare type AnnotationSubjectLocationXY = {
+    x: LengthUnit | (() => LengthUnit);
+    y: LengthUnit | (() => LengthUnit);
+};
+export declare enum AnnotationSubjectType {
+    Circle = "circle",
+    Rect = "rect"
+}
+export declare type AnnotationSubjectStyle = {
+    /** Type of the subject: AnnotationSubjectType.Circle or AnnotationSubjectType.Rect
+    * Default: AnnotationSubjectType.Circle
+    */
+    shape?: AnnotationSubjectType | string;
+    /** Subject width. Only for `AnnotationSubjectType.Rect` */
+    width?: number;
+    /** Subject height. Only for `AnnotationSubjectType.Rect` */
+    height?: number;
+    /** Subject radius. Only for `AnnotationSubjectType.Circle` */
+    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,8 @@
+var AnnotationSubjectType;
+(function (AnnotationSubjectType) {
+    AnnotationSubjectType["Circle"] = "circle";
+    AnnotationSubjectType["Rect"] = "rect";
+})(AnnotationSubjectType || (AnnotationSubjectType = {}));
+
+export { AnnotationSubjectType };
+//# sourceMappingURL=types.js.map

package/components/annotations/types.js.map

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

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.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\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,3 +1,4 @@
+import { GenericAccessor } from "../../types/accessor";
 import { BulletLegendItemInterface, BulletShape } from './types';
 export interface BulletLegendConfigInterface {
     /** Legend items. Array of `BulletLegendItemInterface`:
@@ -5,6 +6,7 @@ export interface BulletLegendConfigInterface {
      * {
      *   name: string | number;
      *   color?: string;
+     *   shape?: BulletShape;
      *   inactive?: boolean;
      *   hidden?: boolean;
      *   pointer?: boolean;
@@ -22,7 +24,7 @@ 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>;
 }
 export declare const BulletLegendDefaultConfig: BulletLegendConfigInterface;

package/components/bullet-legend/config.js

@@ -1,6 +1,5 @@
 import { BulletShape } from './types.js';
 
-// Local Types
 const BulletLegendDefaultConfig = {
     items: [],
     labelClassName: '',
@@ -8,7 +7,7 @@ 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; },
 };
 
 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 } 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}\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}\n"],"names":[],"mappings":";;AAgCa,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;;;;;"}

package/components/bullet-legend/index.js

@@ -1,9 +1,9 @@
 import { select } from 'd3-selection';
 import { merge } from '../../utils/data.js';
 import { BulletLegendDefaultConfig } from './config.js';
-import { createBullets, updateBullets } from './modules/shape.js';
+import { updateBullets } from './modules/shape.js';
 import * as style from './style.js';
-import { root, item, bullet, label, clickable } from './style.js';
+import { root, item, clickable, bullet, label } from './style.js';
 
 class BulletLegend {
     constructor(element, config) {
@@ -26,28 +26,26 @@ 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 => { var _a; return `${item} ${(_a = d.className) !== null && _a !== void 0 ? _a : ''}`; })
             .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('svg')
+            .attr('class', bullet)
+            .append('path');
         legendItemsMerged.select(`.${bullet}`)
-            .style('min-width', config.bulletSize)
-            .style('height', config.bulletSize)
             .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();

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'\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 { 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\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 => `${s.item} ${d.className ?? ''}`)\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('svg')\n      .attr('class', s.bullet)\n      .append('path')\n\n    legendItemsMerged.select<SVGElement>(`.${s.bullet}`)\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    this.div.remove()\n  }\n}\n"],"names":["s.root","s.item","s.clickable","s.bullet","s.label","s"],"mappings":"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"}

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

@@ -2,5 +2,4 @@ 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 updateBullets(container: Selection<SVGElement, BulletLegendItemInterface, HTMLDivElement, unknown>, config: BulletLegendConfigInterface, colorAccessor: ColorAccessor<BulletLegendItemInterface>): void;