@unovis/ts 1.3.0-alpha.2 → 1.3.0-beta.0

package/core/container/config.js

@@ -1,30 +1,26 @@
-import { Config } from '../config/index.js';
 import { Sizing } from '../../types/component.js';
 
 // Core
-class ContainerConfig extends Config {
-    constructor() {
-        super(...arguments);
-        this.duration = undefined;
-        this.margin = {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-        };
-        this.padding = {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-        };
-        this.sizing = Sizing.Fit;
-        this.width = undefined;
-        this.height = undefined;
-        this.svgDefs = undefined;
-        this.ariaLabel = undefined;
-    }
-}
+const ContainerDefaultConfig = {
+    duration: undefined,
+    margin: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    padding: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    sizing: Sizing.Fit,
+    width: undefined,
+    height: undefined,
+    svgDefs: undefined,
+    ariaLabel: undefined,
+};
 
-export { ContainerConfig };
+export { ContainerDefaultConfig };
 //# sourceMappingURL=config.js.map

package/core/container/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/core/container/config.ts"],"sourcesContent":["// Core\nimport { Config } from 'core/config'\n\n// Types\nimport { Sizing } from 'types/component'\nimport { Spacing } from 'types/spacing'\n\nexport interface ContainerConfigInterface {\n  /** Animation duration of all the components within the container. Default: `undefined` */\n  duration?: number;\n  /** Margins. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */\n  margin?: Spacing;\n  /** Padding. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */\n  padding?: Spacing;\n  /** Defines whether components should fit into the container or the container should expand to fit to the component's size. Default: `Sizing.Fit` */\n  sizing?: Sizing | string;\n  /** Width in pixels or in CSS units.\n   * Percentage units `\"%\"` are not supported here. If you want to set `width` as a percentage, do it via `style`\n   * of the corresponding DOM element.\n   * By default, Container automatically fits to the size of the parent element.\n   * Default: `undefined`\n  */\n  width?: number | string;\n  /** Height in pixels or in CSS units.\n   * Percentage units `\"%\"` are not supported here. If you want to set `height` as a percentage, do it via `style`\n   * of the corresponding DOM element.\n   * By default, Container automatically fits to the size of the parent element.\n   * Default: `undefined`\n  */\n  height?: number | string;\n  /** Custom SVG defs available to all the components within the container. Default: `undefined`. */\n  svgDefs?: string;\n  /** Alternative text description of the chart for accessibility purposes. It will be applied as an\n   * `aria-label` attribute to the div element containing your chart. Default: `undefined`.\n  */\n  ariaLabel?: string | null | undefined;\n}\n\nexport class ContainerConfig extends Config implements ContainerConfigInterface {\n  duration = undefined\n  margin = {\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  }\n\n  padding = {\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  }\n\n  sizing = Sizing.Fit\n  width = undefined\n  height = undefined\n\n  svgDefs = undefined\n  ariaLabel = undefined\n}\n"],"names":[],"mappings":";;;AAAA;AAsCM,MAAO,eAAgB,SAAQ,MAAM,CAAA;AAA3C,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;AACpB,QAAA,IAAA,CAAA,MAAM,GAAG;AACP,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,KAAK,EAAE,CAAC;SACT,CAAA;AAED,QAAA,IAAA,CAAA,OAAO,GAAG;AACR,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,KAAK,EAAE,CAAC;SACT,CAAA;AAED,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;QACnB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAM,CAAA,MAAA,GAAG,SAAS,CAAA;QAElB,IAAO,CAAA,OAAA,GAAG,SAAS,CAAA;QACnB,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;KACtB;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/core/container/config.ts"],"sourcesContent":["// Core\n\n// Types\nimport { Sizing } from 'types/component'\nimport { Spacing } from 'types/spacing'\n\nexport interface ContainerConfigInterface {\n  /** Animation duration of all the components within the container. Default: `undefined` */\n  duration?: number;\n  /** Margins. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */\n  margin?: Spacing;\n  /** Padding. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */\n  padding?: Spacing;\n  /** Defines whether components should fit into the container or the container should expand to fit to the component's size. Default: `Sizing.Fit` */\n  sizing?: Sizing | string;\n  /** Width in pixels or in CSS units.\n   * Percentage units `\"%\"` are not supported here. If you want to set `width` as a percentage, do it via `style`\n   * of the corresponding DOM element.\n   * By default, Container automatically fits to the size of the parent element.\n   * Default: `undefined`\n  */\n  width?: number | string;\n  /** Height in pixels or in CSS units.\n   * Percentage units `\"%\"` are not supported here. If you want to set `height` as a percentage, do it via `style`\n   * of the corresponding DOM element.\n   * By default, Container automatically fits to the size of the parent element.\n   * Default: `undefined`\n  */\n  height?: number | string;\n  /** Custom SVG defs available to all the components within the container. Default: `undefined`. */\n  svgDefs?: string;\n  /** Alternative text description of the chart for accessibility purposes. It will be applied as an\n   * `aria-label` attribute to the div element containing your chart. Default: `undefined`.\n  */\n  ariaLabel?: string | null | undefined;\n}\n\nexport const ContainerDefaultConfig: ContainerConfigInterface = {\n  duration: undefined,\n  margin: {\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n\n  padding: {\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n\n  sizing: Sizing.Fit,\n  width: undefined,\n  height: undefined,\n\n  svgDefs: undefined,\n  ariaLabel: undefined,\n}\n"],"names":[],"mappings":";;AAAA;AAqCa,MAAA,sBAAsB,GAA6B;AAC9D,IAAA,QAAQ,EAAE,SAAS;AACnB,IAAA,MAAM,EAAE;AACN,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;AAED,IAAA,OAAO,EAAE;AACP,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;IAED,MAAM,EAAE,MAAM,CAAC,GAAG;AAClB,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,MAAM,EAAE,SAAS;AAEjB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,SAAS,EAAE,SAAS;;;;;"}

package/core/container/index.d.ts

@@ -1,10 +1,11 @@
 import { Selection } from 'd3-selection';
-import { ContainerConfig, ContainerConfigInterface } from './config';
+import { ContainerConfigInterface } from './config';
 export declare class ContainerCore {
     svg: Selection<SVGSVGElement, unknown, null, undefined>;
     element: SVGSVGElement;
-    prevConfig: ContainerConfig;
-    config: ContainerConfig;
+    prevConfig: ContainerConfigInterface;
+    config: ContainerConfigInterface;
+    protected _defaultConfig: ContainerConfigInterface;
     protected _container: HTMLElement;
     protected _requestedAnimationFrame: number;
     protected _isFirstRender: boolean;
@@ -15,7 +16,7 @@ export declare class ContainerCore {
     updateContainer<T extends ContainerConfigInterface>(config: T): void;
     protected _preRender(): void;
     protected _render(duration?: number): void;
-    render(duration?: any): void;
+    render(duration?: number): void;
     get containerWidth(): number;
     get containerHeight(): number;
     get width(): number;

package/core/container/index.js

@@ -1,10 +1,12 @@
 import { select } from 'd3-selection';
 import { Sizing } from '../../types/component.js';
-import { clamp, isEqual } from '../../utils/data.js';
+import { merge, clamp, isEqual } from '../../utils/data.js';
 import { ResizeObserver } from '../../utils/resize-observer.js';
+import { ContainerDefaultConfig } from './config.js';
 
 class ContainerCore {
     constructor(element) {
+        this._defaultConfig = ContainerDefaultConfig;
         this._isFirstRender = true;
         this._requestedAnimationFrame = null;
         this._container = element;
@@ -23,9 +25,8 @@ class ContainerCore {
     }
     updateContainer(config) {
         // eslint-disable-next-line @typescript-eslint/naming-convention
-        const ConfigModel = this.config.constructor;
         this.prevConfig = this.config;
-        this.config = new ConfigModel().init(config);
+        this.config = merge(this._defaultConfig, config);
     }
     // The `_preRender` step should be used to perform some actions before rendering.
     // For example, calculating scales, setting component sizes, etc ...

package/core/container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/core/container/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Types\nimport { Sizing } from 'types/component'\n\n// Utils\nimport { isEqual, clamp } from 'utils/data'\nimport { ResizeObserver } from 'utils/resize-observer'\n\n// Config\nimport { ContainerConfig, ContainerConfigInterface } from './config'\n\nexport class ContainerCore {\n  svg: Selection<SVGSVGElement, unknown, null, undefined>\n  element: SVGSVGElement\n  prevConfig: ContainerConfig\n  config: ContainerConfig\n\n  protected _container: HTMLElement\n  protected _requestedAnimationFrame: number\n  protected _isFirstRender = true\n  protected _resizeObserver: ResizeObserver | undefined\n  private _containerSize: { width: number; height: number }\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  static DEFAULT_CONTAINER_HEIGHT = 300\n\n  constructor (element: HTMLElement) {\n    this._requestedAnimationFrame = null\n    this._container = element\n\n    // Setting `role` attribute to `image` to make the container accessible\n    const container = select(this._container)\n    container.attr('role', 'figure')\n\n    // Create SVG element for visualizations\n    this.svg = container.append('svg')\n      // We set `display` to `block` because inline elements have an invisible\n      //   inline space that adds 4px to the height of the container\n      .style('display', 'block')\n      .attr('xmlns', 'http://www.w3.org/2000/svg')\n      .attr('height', ContainerCore.DEFAULT_CONTAINER_HEIGHT) // Overriding default SVG height of 150\n      .attr('aria-hidden', true)\n\n    this.element = this.svg.node()\n  }\n\n  public updateContainer<T extends ContainerConfigInterface> (config: T): void {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const ConfigModel = (this.config.constructor as typeof ContainerConfig)\n    this.prevConfig = this.config\n    this.config = new ConfigModel().init(config)\n  }\n\n  // The `_preRender` step should be used to perform some actions before rendering.\n  // For example, calculating scales, setting component sizes, etc ...\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  protected _preRender (): void {}\n\n  // The `_render` step should be used to perform the actual rendering\n  protected _render (duration?: number): void {\n    const { config } = this\n\n    // Add `svgDefs` if provided in the config\n    if (config.svgDefs) {\n      this.svg.select('.svgDefs').remove()\n      this.svg.append('defs').attr('class', 'svgDefs').html(config.svgDefs)\n    }\n\n    // Apply the `aria-label` attribute\n    select(this._container)\n      .attr('aria-label', config.ariaLabel)\n\n    this._isFirstRender = false\n  }\n\n  // Warning: Some Containers (i.e. Single Container) may override this method, so if you introduce any changes here,\n  // make sure to check that other containers didn't break after them.\n  public render (duration = this.config.duration): void {\n    const width = this.config.width || this.containerWidth\n    const height = this.config.height || this.containerHeight\n\n    // We set SVG size in `render()` instead of `_render()`, because the size values in pixels will become\n    // available only in the next animation when being accessed via `element.clientWidth` and `element.clientHeight`,\n    // and we rely on those values when setting width and size of the components.\n    this.svg\n      .attr('width', width)\n      .attr('height', height)\n\n    // Set up Resize Observer. We do it in `render()` to capture container size change if it happened\n    // in the next animation frame after the initial `render` was called.\n    if (!this._resizeObserver) this._setUpResizeObserver()\n\n    // Schedule the actual rendering in the next frame\n    cancelAnimationFrame(this._requestedAnimationFrame)\n    this._requestedAnimationFrame = requestAnimationFrame(() => {\n      this._preRender()\n      this._render(duration)\n    })\n  }\n\n  get containerWidth (): number {\n    return this.config.width\n      ? this.element.clientWidth\n      : (this._container.clientWidth || this._container.getBoundingClientRect().width)\n  }\n\n  get containerHeight (): number {\n    return this.config.height\n      ? this.element.clientHeight\n      : (this._container.clientHeight || this._container.getBoundingClientRect().height || ContainerCore.DEFAULT_CONTAINER_HEIGHT)\n  }\n\n  get width (): number {\n    return clamp(this.containerWidth - this.config.margin.left - this.config.margin.right, 0, Number.POSITIVE_INFINITY)\n  }\n\n  get height (): number {\n    return clamp(this.containerHeight - this.config.margin.top - this.config.margin.bottom, 0, Number.POSITIVE_INFINITY)\n  }\n\n  protected _removeAllChildren (): void {\n    while (this.element.firstChild) {\n      this.element.removeChild(this.element.firstChild)\n    }\n  }\n\n  protected _onResize (): void {\n    const { config } = this\n    const redrawOnResize = config.sizing === Sizing.Fit || config.sizing === Sizing.FitWidth\n    if (redrawOnResize) this.render(0)\n  }\n\n  protected _setUpResizeObserver (): void {\n    if (this._resizeObserver) return\n    const containerRect = this._container.getBoundingClientRect()\n    this._containerSize = { width: containerRect.width, height: containerRect.height }\n\n    this._resizeObserver = new ResizeObserver((entries, observer) => {\n      const resizedContainerRect = this._container.getBoundingClientRect()\n      const resizedContainerSize = { width: resizedContainerRect.width, height: resizedContainerRect.height }\n      const hasSizeChanged = !isEqual(this._containerSize, resizedContainerSize)\n      // Do resize only if element is attached to the DOM\n      // will come in useful when some ancestor of container becomes detached\n      if (hasSizeChanged && resizedContainerSize.width && resizedContainerSize.height) {\n        this._containerSize = resizedContainerSize\n        this._onResize()\n      }\n    })\n    this._resizeObserver.observe(this._container)\n  }\n\n  public destroy (): void {\n    cancelAnimationFrame(this._requestedAnimationFrame)\n    this._resizeObserver?.disconnect()\n    this.svg.remove()\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/core/container/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Types\nimport { Sizing } from 'types/component'\n\n// Utils\nimport { isEqual, clamp, merge } from 'utils/data'\nimport { ResizeObserver } from 'utils/resize-observer'\n\n// Config\nimport { ContainerDefaultConfig, ContainerConfigInterface } from './config'\n\nexport class ContainerCore {\n  public svg: Selection<SVGSVGElement, unknown, null, undefined>\n  public element: SVGSVGElement\n  public prevConfig: ContainerConfigInterface\n  public config: ContainerConfigInterface\n\n  protected _defaultConfig: ContainerConfigInterface = ContainerDefaultConfig\n  protected _container: HTMLElement\n  protected _requestedAnimationFrame: number\n  protected _isFirstRender = true\n  protected _resizeObserver: ResizeObserver | undefined\n  private _containerSize: { width: number; height: number }\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  static DEFAULT_CONTAINER_HEIGHT = 300\n\n  constructor (element: HTMLElement) {\n    this._requestedAnimationFrame = null\n    this._container = element\n\n    // Setting `role` attribute to `image` to make the container accessible\n    const container = select(this._container)\n    container.attr('role', 'figure')\n\n    // Create SVG element for visualizations\n    this.svg = container.append('svg')\n      // We set `display` to `block` because inline elements have an invisible\n      //   inline space that adds 4px to the height of the container\n      .style('display', 'block')\n      .attr('xmlns', 'http://www.w3.org/2000/svg')\n      .attr('height', ContainerCore.DEFAULT_CONTAINER_HEIGHT) // Overriding default SVG height of 150\n      .attr('aria-hidden', true)\n\n    this.element = this.svg.node()\n  }\n\n  public updateContainer<T extends ContainerConfigInterface> (config: T): void {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    this.prevConfig = this.config\n    this.config = merge(this._defaultConfig, config)\n  }\n\n  // The `_preRender` step should be used to perform some actions before rendering.\n  // For example, calculating scales, setting component sizes, etc ...\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  protected _preRender (): void {}\n\n  // The `_render` step should be used to perform the actual rendering\n  protected _render (duration?: number): void {\n    const { config } = this\n\n    // Add `svgDefs` if provided in the config\n    if (config.svgDefs) {\n      this.svg.select('.svgDefs').remove()\n      this.svg.append('defs').attr('class', 'svgDefs').html(config.svgDefs)\n    }\n\n    // Apply the `aria-label` attribute\n    select(this._container)\n      .attr('aria-label', config.ariaLabel)\n\n    this._isFirstRender = false\n  }\n\n  // Warning: Some Containers (i.e. Single Container) may override this method, so if you introduce any changes here,\n  // make sure to check that other containers didn't break after them.\n  public render (duration = this.config.duration): void {\n    const width = this.config.width || this.containerWidth\n    const height = this.config.height || this.containerHeight\n\n    // We set SVG size in `render()` instead of `_render()`, because the size values in pixels will become\n    // available only in the next animation when being accessed via `element.clientWidth` and `element.clientHeight`,\n    // and we rely on those values when setting width and size of the components.\n    this.svg\n      .attr('width', width)\n      .attr('height', height)\n\n    // Set up Resize Observer. We do it in `render()` to capture container size change if it happened\n    // in the next animation frame after the initial `render` was called.\n    if (!this._resizeObserver) this._setUpResizeObserver()\n\n    // Schedule the actual rendering in the next frame\n    cancelAnimationFrame(this._requestedAnimationFrame)\n    this._requestedAnimationFrame = requestAnimationFrame(() => {\n      this._preRender()\n      this._render(duration)\n    })\n  }\n\n  get containerWidth (): number {\n    return this.config.width\n      ? this.element.clientWidth\n      : (this._container.clientWidth || this._container.getBoundingClientRect().width)\n  }\n\n  get containerHeight (): number {\n    return this.config.height\n      ? this.element.clientHeight\n      : (this._container.clientHeight || this._container.getBoundingClientRect().height || ContainerCore.DEFAULT_CONTAINER_HEIGHT)\n  }\n\n  get width (): number {\n    return clamp(this.containerWidth - this.config.margin.left - this.config.margin.right, 0, Number.POSITIVE_INFINITY)\n  }\n\n  get height (): number {\n    return clamp(this.containerHeight - this.config.margin.top - this.config.margin.bottom, 0, Number.POSITIVE_INFINITY)\n  }\n\n  protected _removeAllChildren (): void {\n    while (this.element.firstChild) {\n      this.element.removeChild(this.element.firstChild)\n    }\n  }\n\n  protected _onResize (): void {\n    const { config } = this\n    const redrawOnResize = config.sizing === Sizing.Fit || config.sizing === Sizing.FitWidth\n    if (redrawOnResize) this.render(0)\n  }\n\n  protected _setUpResizeObserver (): void {\n    if (this._resizeObserver) return\n    const containerRect = this._container.getBoundingClientRect()\n    this._containerSize = { width: containerRect.width, height: containerRect.height }\n\n    this._resizeObserver = new ResizeObserver((entries, observer) => {\n      const resizedContainerRect = this._container.getBoundingClientRect()\n      const resizedContainerSize = { width: resizedContainerRect.width, height: resizedContainerRect.height }\n      const hasSizeChanged = !isEqual(this._containerSize, resizedContainerSize)\n      // Do resize only if element is attached to the DOM\n      // will come in useful when some ancestor of container becomes detached\n      if (hasSizeChanged && resizedContainerSize.width && resizedContainerSize.height) {\n        this._containerSize = resizedContainerSize\n        this._onResize()\n      }\n    })\n    this._resizeObserver.observe(this._container)\n  }\n\n  public destroy (): void {\n    cancelAnimationFrame(this._requestedAnimationFrame)\n    this._resizeObserver?.disconnect()\n    this.svg.remove()\n  }\n}\n"],"names":[],"mappings":"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"}

package/core/xy-component/config.d.ts

@@ -1,6 +1,6 @@
 import { ContinuousScale } from "../../types/scale";
 import { ColorAccessor, NumericAccessor } from "../../types/accessor";
-import { ComponentConfig, ComponentConfigInterface } from '../component/config';
+import { ComponentConfigInterface } from '../component/config';
 export interface XYComponentConfigInterface<Datum> extends ComponentConfigInterface {
     /** Accessor function for getting the values along the X axis. Default: `undefined` */
     x: NumericAccessor<Datum>;
@@ -27,12 +27,4 @@ export interface XYComponentConfigInterface<Datum> extends ComponentConfigInterf
     */
     excludeFromDomainCalculation?: boolean;
 }
-export declare class XYComponentConfig<Datum> extends ComponentConfig implements XYComponentConfigInterface<Datum> {
-    x: any;
-    y: any;
-    id: (d: Datum, i: number) => string;
-    color: (d: Datum | Datum[]) => string;
-    xScale: any;
-    yScale: any;
-    excludeFromDomainCalculation: boolean;
-}
+export declare const XYComponentDefaultConfig: XYComponentConfigInterface<unknown>;

package/core/xy-component/config.js

@@ -1,20 +1,11 @@
-import { ComponentConfig } from '../component/config.js';
+import { ComponentDefaultConfig } from '../component/config.js';
 
 // Config
-class XYComponentConfig extends ComponentConfig {
-    constructor() {
-        super(...arguments);
-        this.x = undefined;
-        this.y = undefined;
-        // eslint-disable-next-line dot-notation
-        this.id = (d, i) => { var _a; return (_a = d['id']) !== null && _a !== void 0 ? _a : `${i}`; };
-        // eslint-disable-next-line dot-notation
-        this.color = (d) => d['color'];
-        this.xScale = undefined;
-        this.yScale = undefined;
-        this.excludeFromDomainCalculation = false;
-    }
-}
+const XYComponentDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { x: undefined, y: undefined, 
+    // eslint-disable-next-line dot-notation
+    id: (d, i) => { var _a; return (_a = d['id']) !== null && _a !== void 0 ? _a : `${i}`; }, 
+    // eslint-disable-next-line dot-notation
+    color: (d) => d['color'], xScale: undefined, yScale: undefined, excludeFromDomainCalculation: false });
 
-export { XYComponentConfig };
+export { XYComponentDefaultConfig };
 //# sourceMappingURL=config.js.map

package/core/xy-component/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/core/xy-component/config.ts"],"sourcesContent":["import { ContinuousScale } from 'types/scale'\n\n// Types\nimport { ColorAccessor, NumericAccessor } from 'types/accessor'\n\n// Config\nimport { ComponentConfig, ComponentConfigInterface } from '../component/config'\n\nexport interface XYComponentConfigInterface<Datum> extends ComponentConfigInterface {\n  /** Accessor function for getting the values along the X axis. Default: `undefined` */\n  x: NumericAccessor<Datum>;\n  /** A single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */\n  y: NumericAccessor<Datum> | NumericAccessor<Datum>[];\n  /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */\n  id?: ((d: Datum, i: number, ...any: any[]) => string);\n  /** Component color accessor function. Default: `d => d.color` */\n  color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>;\n  /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.\n   * Only continuous scales are supported.\n   * Default: `undefined`\n  */\n  xScale?: ContinuousScale;\n  /** Scale for Y dimension, e.g. Scale.scaleLinear(). If you set yScale you'll be responsible for setting it's `domain` and `range` as well.\n   * Only continuous scales are supported.\n   * Default: `undefined`\n  */\n  yScale?: ContinuousScale;\n  /** Identifies whether the component should be excluded from overall X and Y domain calculations or not.\n   * This property can be useful when you want pass individual data to a component and you don't want it to affect\n   * the scales of the chart.\n   * Default: `false`\n  */\n  excludeFromDomainCalculation?: boolean;\n}\n\nexport class XYComponentConfig<Datum> extends ComponentConfig implements XYComponentConfigInterface<Datum> {\n  x = undefined\n  y = undefined\n  // eslint-disable-next-line dot-notation\n  id = (d: Datum, i: number): string => d['id'] ?? `${i}`\n  // eslint-disable-next-line dot-notation\n  color = (d: Datum | Datum[]): string => d['color']\n  xScale = undefined\n  yScale = undefined\n  excludeFromDomainCalculation = false\n}\n"],"names":[],"mappings":";;AAKA;AA8BM,MAAO,iBAAyB,SAAQ,eAAe,CAAA;AAA7D,IAAA,WAAA,GAAA;;QACE,IAAC,CAAA,CAAA,GAAG,SAAS,CAAA;QACb,IAAC,CAAA,CAAA,GAAG,SAAS,CAAA;;QAEb,IAAE,CAAA,EAAA,GAAG,CAAC,CAAQ,EAAE,CAAS,eAAa,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAA,EAAG,CAAC,CAAE,CAAA,CAAA,EAAA,CAAA;;QAEvD,IAAK,CAAA,KAAA,GAAG,CAAC,CAAkB,KAAa,CAAC,CAAC,OAAO,CAAC,CAAA;QAClD,IAAM,CAAA,MAAA,GAAG,SAAS,CAAA;QAClB,IAAM,CAAA,MAAA,GAAG,SAAS,CAAA;QAClB,IAA4B,CAAA,4BAAA,GAAG,KAAK,CAAA;KACrC;AAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/core/xy-component/config.ts"],"sourcesContent":["import { ContinuousScale } from 'types/scale'\n\n// Types\nimport { ColorAccessor, NumericAccessor } from 'types/accessor'\n\n// Config\nimport { ComponentDefaultConfig, ComponentConfigInterface } from '../component/config'\n\nexport interface XYComponentConfigInterface<Datum> extends ComponentConfigInterface {\n  /** Accessor function for getting the values along the X axis. Default: `undefined` */\n  x: NumericAccessor<Datum>;\n  /** A single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */\n  y: NumericAccessor<Datum> | NumericAccessor<Datum>[];\n  /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */\n  id?: ((d: Datum, i: number, ...any: any[]) => string);\n  /** Component color accessor function. Default: `d => d.color` */\n  color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>;\n  /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.\n   * Only continuous scales are supported.\n   * Default: `undefined`\n  */\n  xScale?: ContinuousScale;\n  /** Scale for Y dimension, e.g. Scale.scaleLinear(). If you set yScale you'll be responsible for setting it's `domain` and `range` as well.\n   * Only continuous scales are supported.\n   * Default: `undefined`\n  */\n  yScale?: ContinuousScale;\n  /** Identifies whether the component should be excluded from overall X and Y domain calculations or not.\n   * This property can be useful when you want pass individual data to a component and you don't want it to affect\n   * the scales of the chart.\n   * Default: `false`\n  */\n  excludeFromDomainCalculation?: boolean;\n}\n\nexport const XYComponentDefaultConfig: XYComponentConfigInterface<unknown> = {\n  ...ComponentDefaultConfig,\n  x: undefined,\n  y: undefined,\n  // eslint-disable-next-line dot-notation\n  id: <Datum>(d: Datum, i: number): string => d['id'] ?? `${i}`,\n  // eslint-disable-next-line dot-notation\n  color: <Datum>(d: Datum | Datum[]): string => d['color'],\n  xScale: undefined,\n  yScale: undefined,\n  excludeFromDomainCalculation: false,\n}\n"],"names":[],"mappings":";;AAKA;AA8BO,MAAM,wBAAwB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAChC,sBAAsB,CAAA,EAAA,EACzB,CAAC,EAAE,SAAS,EACZ,CAAC,EAAE,SAAS;;AAEZ,IAAA,EAAE,EAAE,CAAQ,CAAQ,EAAE,CAAS,KAAa,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,MAAA,CAAC,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,GAAG,CAAC,CAAA,CAAE,CAAA,EAAA;;IAE7D,KAAK,EAAE,CAAQ,CAAkB,KAAa,CAAC,CAAC,OAAO,CAAC,EACxD,MAAM,EAAE,SAAS,EACjB,MAAM,EAAE,SAAS,EACjB,4BAA4B,EAAE,KAAK,EAAA;;;;"}

package/core/xy-component/index.d.ts

@@ -2,17 +2,18 @@ import { Selection } from 'd3-selection';
 import { ComponentCore } from "../component";
 import { SeriesDataModel } from "../../data-models/series";
 import { ContinuousScale, ScaleDimension } from "../../types/scale";
-import { XYComponentConfig, XYComponentConfigInterface } from './config';
-export declare class XYComponentCore<Datum, ConfigClass extends XYComponentConfig<Datum> = XYComponentConfig<Datum>, ConfigInterface extends Partial<XYComponentConfigInterface<Datum>> = Partial<XYComponentConfigInterface<Datum>>> extends ComponentCore<Datum[], ConfigClass, ConfigInterface> {
+import { XYComponentConfigInterface } from './config';
+export declare class XYComponentCore<Datum, ConfigInterface extends Partial<XYComponentConfigInterface<Datum>> = Partial<XYComponentConfigInterface<Datum>>> extends ComponentCore<Datum[], ConfigInterface> {
     element: SVGGraphicsElement;
     g: Selection<SVGGElement, unknown, null, undefined>;
-    config: ConfigClass;
-    prevConfig: ConfigClass;
+    config: ConfigInterface;
+    prevConfig: ConfigInterface;
     datamodel: SeriesDataModel<Datum>;
     /** Clippable components can be affected by a clipping path (set up in the container) */
     clippable: boolean;
     /** Identifies whether the component displayed stacked data (eg StackedBar, Area) */
     stacked: boolean;
+    protected _defaultConfig: ConfigInterface;
     private _xScale;
     private _yScale;
     get xScale(): ContinuousScale;

package/core/xy-component/index.js

@@ -2,6 +2,7 @@ import { ComponentCore } from '../component/index.js';
 import { SeriesDataModel } from '../../data-models/series.js';
 import { getExtent, filterDataByRange, isArray } from '../../utils/data.js';
 import { Scale, ScaleDimension } from '../../types/scale.js';
+import { XYComponentDefaultConfig } from './config.js';
 
 // Core
 class XYComponentCore extends ComponentCore {
@@ -12,6 +13,7 @@ class XYComponentCore extends ComponentCore {
         this.clippable = true;
         /** Identifies whether the component displayed stacked data (eg StackedBar, Area) */
         this.stacked = false;
+        this._defaultConfig = XYComponentDefaultConfig;
         this._xScale = Scale.scaleLinear();
         this._yScale = Scale.scaleLinear();
     }

package/core/xy-component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/core/xy-component/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Utils\nimport { filterDataByRange, getExtent, isArray } from 'utils/data'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { ContinuousScale, Scale, ScaleDimension } from 'types/scale'\n\n// Config\nimport { XYComponentConfig, XYComponentConfigInterface } from './config'\n\nexport class XYComponentCore<\n  Datum,\n  ConfigClass extends XYComponentConfig<Datum> = XYComponentConfig<Datum>,\n  ConfigInterface extends Partial<XYComponentConfigInterface<Datum>> = Partial<XYComponentConfigInterface<Datum>>,\n> extends ComponentCore<Datum[], ConfigClass, ConfigInterface> {\n  element: SVGGraphicsElement\n  g: Selection<SVGGElement, unknown, null, undefined>\n  config: ConfigClass\n  prevConfig: ConfigClass\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  /** Clippable components can be affected by a clipping path (set up in the container) */\n  clippable = true\n\n  /** Identifies whether the component displayed stacked data (eg StackedBar, Area) */\n  stacked = false\n\n  private _xScale: ContinuousScale = Scale.scaleLinear()\n  private _yScale: ContinuousScale = Scale.scaleLinear()\n\n  get xScale (): ContinuousScale {\n    return this.config.xScale || this._xScale\n  }\n\n  get yScale (): ContinuousScale {\n    return this.config.yScale || this._yScale\n  }\n\n  setConfig (config: ConfigInterface): void {\n    // We don't allow changing scales after the component has been initialized\n    if (this.config?.xScale) config.xScale = this.config.xScale\n    if (this.config?.yScale) config.yScale = this.config.yScale\n\n    super.setConfig(config)\n  }\n\n  setScaleDomain (dimension: ScaleDimension, domain: number[]): void {\n    if (dimension === ScaleDimension.X) this._xScale?.domain(domain)\n    if (dimension === ScaleDimension.Y) this._yScale?.domain(domain)\n  }\n\n  setScaleRange (dimension: ScaleDimension, range: number[]): void {\n    if (dimension === ScaleDimension.X) this._xScale?.range(range)\n    if (dimension === ScaleDimension.Y) this._yScale?.range(range)\n  }\n\n  setScale (dimension: ScaleDimension, scale: ContinuousScale): void {\n    if (scale && (dimension === ScaleDimension.X)) this._xScale = scale\n    if (scale && (dimension === ScaleDimension.Y)) this._yScale = scale\n  }\n\n  getDataExtent (dimension: ScaleDimension, scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n\n    switch (dimension) {\n      case ScaleDimension.X: return this.getXDataExtent()\n      case ScaleDimension.Y: return this.getYDataExtent(scaleByVisibleData)\n      default: return getExtent(datamodel.data, config[dimension])\n    }\n  }\n\n  getXDataExtent (): number[] {\n    const { config, datamodel } = this\n    return getExtent(datamodel.data, config.x)\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    return getExtent(data, ...yAccessors)\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/core/xy-component/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Utils\nimport { filterDataByRange, getExtent, isArray } from 'utils/data'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { ContinuousScale, Scale, ScaleDimension } from 'types/scale'\n\n// Config\nimport { XYComponentDefaultConfig, XYComponentConfigInterface } from './config'\n\nexport class XYComponentCore<\n  Datum,\n  ConfigInterface extends Partial<XYComponentConfigInterface<Datum>> = Partial<XYComponentConfigInterface<Datum>>,\n> extends ComponentCore<Datum[], ConfigInterface> {\n  public element: SVGGraphicsElement\n  public g: Selection<SVGGElement, unknown, null, undefined>\n  public config: ConfigInterface\n  public prevConfig: ConfigInterface\n  public datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  /** Clippable components can be affected by a clipping path (set up in the container) */\n  public clippable = true\n\n  /** Identifies whether the component displayed stacked data (eg StackedBar, Area) */\n  public stacked = false\n\n  protected _defaultConfig: ConfigInterface = XYComponentDefaultConfig as ConfigInterface\n\n  private _xScale: ContinuousScale = Scale.scaleLinear()\n  private _yScale: ContinuousScale = Scale.scaleLinear()\n\n  get xScale (): ContinuousScale {\n    return this.config.xScale || this._xScale\n  }\n\n  get yScale (): ContinuousScale {\n    return this.config.yScale || this._yScale\n  }\n\n  setConfig (config: ConfigInterface): void {\n    // We don't allow changing scales after the component has been initialized\n    if (this.config?.xScale) config.xScale = this.config.xScale\n    if (this.config?.yScale) config.yScale = this.config.yScale\n\n    super.setConfig(config)\n  }\n\n  setScaleDomain (dimension: ScaleDimension, domain: number[]): void {\n    if (dimension === ScaleDimension.X) this._xScale?.domain(domain)\n    if (dimension === ScaleDimension.Y) this._yScale?.domain(domain)\n  }\n\n  setScaleRange (dimension: ScaleDimension, range: number[]): void {\n    if (dimension === ScaleDimension.X) this._xScale?.range(range)\n    if (dimension === ScaleDimension.Y) this._yScale?.range(range)\n  }\n\n  setScale (dimension: ScaleDimension, scale: ContinuousScale): void {\n    if (scale && (dimension === ScaleDimension.X)) this._xScale = scale\n    if (scale && (dimension === ScaleDimension.Y)) this._yScale = scale\n  }\n\n  getDataExtent (dimension: ScaleDimension, scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n\n    switch (dimension) {\n      case ScaleDimension.X: return this.getXDataExtent()\n      case ScaleDimension.Y: return this.getYDataExtent(scaleByVisibleData)\n      default: return getExtent(datamodel.data, config[dimension])\n    }\n  }\n\n  getXDataExtent (): number[] {\n    const { config, datamodel } = this\n    return getExtent(datamodel.data, config.x)\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    return getExtent(data, ...yAccessors)\n  }\n}\n"],"names":[],"mappings":"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"}

package/data-models/map-graph.d.ts

@@ -9,7 +9,7 @@ export declare class MapGraphDataModel<AreaDatum, PointDatum, LinkDatum> extends
     private _areas;
     private _points;
     private _links;
-    pointId: ((n: PointDatum) => string);
+    pointId: ((n: PointDatum, i: number) => string);
     linkSource: ((l: LinkDatum) => number | string | PointDatum);
     linkTarget: ((l: LinkDatum) => number | string | PointDatum);
     get data(): MapGraphData<AreaDatum, PointDatum, LinkDatum>;

package/data-models/map-graph.js

@@ -48,7 +48,7 @@ class MapGraphDataModel extends CoreDataModel {
         if (isNumber(pointIdentifier))
             foundPoint = points[pointIdentifier];
         else if (isString(pointIdentifier))
-            foundPoint = points.find(node => this.pointId(node) === pointIdentifier);
+            foundPoint = points.find((node, i) => this.pointId(node, i) === pointIdentifier);
         else if (isObject(pointIdentifier))
             foundPoint = points.find(node => node === pointIdentifier);
         if (!foundPoint) {

package/data-models/map-graph.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-graph.js","sources":["../../src/data-models/map-graph.ts"],"sourcesContent":["// Utils\nimport { cloneDeep, isNumber, isObject, isString } from 'utils/data'\n\n// Core Data Model\nimport { CoreDataModel } from 'data-models/core'\n\n// Types\nimport { MapLink } from 'types/map'\n\nexport type MapGraphData<AreaDatum, PointDatum, LinkDatum> = {\n  areas?: AreaDatum[];\n  points?: PointDatum[];\n  links?: LinkDatum[];\n}\n\nexport class MapGraphDataModel<AreaDatum, PointDatum, LinkDatum> extends CoreDataModel<MapGraphData<AreaDatum, PointDatum, LinkDatum>> {\n  private _areas: AreaDatum[] = []\n  private _points: PointDatum[] = []\n  private _links: MapLink<PointDatum, LinkDatum>[] = []\n\n  // Model configuration\n  /* eslint-disable-next-line dot-notation */\n  public pointId: ((n: PointDatum) => string) = n => n['id']\n  /* eslint-disable-next-line dot-notation */\n  public linkSource: ((l: LinkDatum) => number | string | PointDatum) = l => l['source']\n  /* eslint-disable-next-line dot-notation */\n  public linkTarget: ((l: LinkDatum) => number | string | PointDatum) = l => l['target']\n\n  get data (): MapGraphData<AreaDatum, PointDatum, LinkDatum> {\n    return this._data\n  }\n\n  set data (data: MapGraphData<AreaDatum, PointDatum, LinkDatum>) {\n    if (!data) return\n    this._data = data\n\n    this._areas = cloneDeep(data?.areas ?? [])\n    this._points = cloneDeep(data?.points ?? [])\n\n    this._links = cloneDeep(data?.links ?? []).reduce((arr, link) => {\n      const source = this.findPoint(this.points, this.linkSource(link))\n      const target = this.findPoint(this.points, this.linkTarget(link))\n      if (source && target) arr.push({ source, target })\n      return arr\n    }, [])\n  }\n\n  get areas (): AreaDatum[] {\n    return this._areas\n  }\n\n  get points (): PointDatum[] {\n    return this._points\n  }\n\n  get links (): MapLink<PointDatum, LinkDatum>[] {\n    return this._links\n  }\n\n  private findPoint (points: PointDatum[], pointIdentifier: number | string | PointDatum): PointDatum | undefined {\n    let foundPoint: PointDatum | undefined\n    if (isNumber(pointIdentifier)) foundPoint = points[pointIdentifier as number]\n    else if (isString(pointIdentifier)) foundPoint = points.find(node => this.pointId(node) === pointIdentifier)\n    else if (isObject(pointIdentifier)) foundPoint = points.find(node => node === pointIdentifier)\n\n    if (!foundPoint) {\n      console.warn(`Point ${pointIdentifier} is missing from the points list`)\n    }\n\n    return foundPoint\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"map-graph.js","sources":["../../src/data-models/map-graph.ts"],"sourcesContent":["// Utils\nimport { cloneDeep, isNumber, isObject, isString } from 'utils/data'\n\n// Core Data Model\nimport { CoreDataModel } from 'data-models/core'\n\n// Types\nimport { MapLink } from 'types/map'\n\nexport type MapGraphData<AreaDatum, PointDatum, LinkDatum> = {\n  areas?: AreaDatum[];\n  points?: PointDatum[];\n  links?: LinkDatum[];\n}\n\nexport class MapGraphDataModel<AreaDatum, PointDatum, LinkDatum> extends CoreDataModel<MapGraphData<AreaDatum, PointDatum, LinkDatum>> {\n  private _areas: AreaDatum[] = []\n  private _points: PointDatum[] = []\n  private _links: MapLink<PointDatum, LinkDatum>[] = []\n\n  // Model configuration\n  /* eslint-disable-next-line dot-notation */\n  public pointId: ((n: PointDatum, i: number) => string) = n => n['id']\n  /* eslint-disable-next-line dot-notation */\n  public linkSource: ((l: LinkDatum) => number | string | PointDatum) = l => l['source']\n  /* eslint-disable-next-line dot-notation */\n  public linkTarget: ((l: LinkDatum) => number | string | PointDatum) = l => l['target']\n\n  get data (): MapGraphData<AreaDatum, PointDatum, LinkDatum> {\n    return this._data\n  }\n\n  set data (data: MapGraphData<AreaDatum, PointDatum, LinkDatum>) {\n    if (!data) return\n    this._data = data\n\n    this._areas = cloneDeep(data?.areas ?? [])\n    this._points = cloneDeep(data?.points ?? [])\n\n    this._links = cloneDeep(data?.links ?? []).reduce((arr, link) => {\n      const source = this.findPoint(this.points, this.linkSource(link))\n      const target = this.findPoint(this.points, this.linkTarget(link))\n      if (source && target) arr.push({ source, target })\n      return arr\n    }, [])\n  }\n\n  get areas (): AreaDatum[] {\n    return this._areas\n  }\n\n  get points (): PointDatum[] {\n    return this._points\n  }\n\n  get links (): MapLink<PointDatum, LinkDatum>[] {\n    return this._links\n  }\n\n  private findPoint (points: PointDatum[], pointIdentifier: number | string | PointDatum): PointDatum | undefined {\n    let foundPoint: PointDatum | undefined\n    if (isNumber(pointIdentifier)) foundPoint = points[pointIdentifier as number]\n    else if (isString(pointIdentifier)) foundPoint = points.find((node, i) => this.pointId(node, i) === pointIdentifier)\n    else if (isObject(pointIdentifier)) foundPoint = points.find(node => node === pointIdentifier)\n\n    if (!foundPoint) {\n      console.warn(`Point ${pointIdentifier} is missing from the points list`)\n    }\n\n    return foundPoint\n  }\n}\n"],"names":[],"mappings":"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"}

package/index.js

@@ -50,6 +50,7 @@ export { GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeShape }
 export { SankeyEnterTransitionType, SankeyExitTransitionType, SankeyLayout, SankeyNodeAlign, SankeySubLabelPlacement } from './components/sankey/types.js';
 export { VisControlsOrientation } from './components/vis-controls/types.js';
 export { FreeBrushMode } from './components/free-brush/types.js';
+export { BulletShape } from './components/bullet-legend/types.js';
 export { XYLabelPositioning } from './components/xy-labels/types.js';
 export { NestedDonutDirection, NestedDonutSegmentLabelAlignment } from './components/nested-donut/types.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/ts",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.3.0-alpha.2",
+  "version": "1.3.0-beta.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",

package/types/accessor.d.ts

@@ -1,5 +1,5 @@
 export declare type NumericAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => number | null | undefined) | number | null | undefined;
 export declare type StringAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => string | null | undefined) | string | null;
-export declare type ColorAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => string | null | undefined) | string | string[] | null | undefined;
+export declare type ColorAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => string | null | undefined) | string | null | undefined;
 export declare type BooleanAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => boolean | null | undefined) | boolean | null | undefined;
 export declare type GenericAccessor<ReturnType, Datum> = ((d: Datum, i: number, ...any: any[]) => ReturnType | null | undefined) | ReturnType | null | undefined;

package/types.js

@@ -22,7 +22,7 @@ export { GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeShape }
 export { SankeyEnterTransitionType, SankeyExitTransitionType, SankeyLayout, SankeyNodeAlign, SankeySubLabelPlacement } from './components/sankey/types.js';
 export { VisControlsOrientation } from './components/vis-controls/types.js';
 export { FreeBrushMode } from './components/free-brush/types.js';
-import './components/bullet-legend/types.js';
+export { BulletShape } from './components/bullet-legend/types.js';
 export { XYLabelPositioning } from './components/xy-labels/types.js';
 export { NestedDonutDirection, NestedDonutSegmentLabelAlignment } from './components/nested-donut/types.js';
 

package/utils/color.d.ts

@@ -1,10 +1,14 @@
 import { ColorAccessor } from "../types/accessor";
-/** Retrieves color from the data if provided, fallbacks to CSS variables if the index was passed */
-export declare function getColor<T>(d: T, accessor: ColorAccessor<T>, index?: number, dontFallbackToCssVar?: boolean): string | null;
-export declare function hexToRgb(hex: string): {
+declare type RGBColor = {
     r: number;
     g: number;
     b: number;
 };
+/** Retrieves color from the data if provided, fallbacks to CSS variables if the index was passed */
+export declare function getColor<T>(d: T, accessor: ColorAccessor<T>, index?: number, dontFallbackToCssVar?: boolean): string | null;
+export declare function hexToRgb(hex: string): RGBColor;
+export declare function rgbToBrightness(rgb: RGBColor): number;
 export declare function hexToBrightness(hex: string): number;
 export declare function getHexValue(s: string, context: HTMLElement | SVGElement): string;
+export declare function rgbaToRgb(rgba: string, backgroundColor?: string): RGBColor;
+export {};

package/utils/color.js

@@ -18,15 +18,31 @@ function hexToRgb(hex) {
         b: parseInt(parsed[3], 16),
     } : { r: 0, g: 0, b: 0 };
 }
+function rgbToBrightness(rgb) {
+    return (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
+}
 function hexToBrightness(hex) {
     const rgb = hexToRgb(hex);
-    return (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
+    return rgbToBrightness(rgb);
 }
 function getHexValue(s, context) {
     var _a;
     const hex = isStringCSSVariable(s) ? getCSSVariableValue(s, context) : s;
     return (_a = color(hex)) === null || _a === void 0 ? void 0 : _a.formatHex();
+}
+function rgbaToRgb(rgba, backgroundColor) {
+    var _a;
+    const rgb = (_a = color(rgba)) === null || _a === void 0 ? void 0 : _a.rgb();
+    if (!rgb || rgb.opacity === 1)
+        return rgb;
+    const alpha = 1 - rgb.opacity;
+    const bg = color(backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#fff').rgb();
+    return {
+        r: Math.round((rgb.opacity * (rgb.r / 255) + (alpha * (bg.r / 255))) * 255),
+        g: Math.round((rgb.opacity * (rgb.g / 255) + (alpha * (bg.g / 255))) * 255),
+        b: Math.round((rgb.opacity * (rgb.b / 255) + (alpha * (bg.b / 255))) * 255),
+    };
 }
 
-export { getColor, getHexValue, hexToBrightness, hexToRgb };
+export { getColor, getHexValue, hexToBrightness, hexToRgb, rgbToBrightness, rgbaToRgb };
 //# sourceMappingURL=color.js.map

package/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sources":["../../src/utils/color.ts"],"sourcesContent":["import { color } from 'd3-color'\n\n// Core\nimport { getCSSColorVariable } from 'styles/colors'\n\n// Utils\nimport { ColorAccessor, StringAccessor } from 'types/accessor'\nimport { getString, isNumber } from 'utils/data'\nimport { isStringCSSVariable, getCSSVariableValue } from 'utils/misc'\n\n/** Retrieves color from the data if provided, fallbacks to CSS variables if the index was passed */\nexport function getColor<T> (\n  d: T,\n  accessor: ColorAccessor<T>,\n  index?: number,\n  dontFallbackToCssVar?: boolean\n): string | null {\n  if (Array.isArray(accessor) && isFinite(index)) return accessor[index % accessor.length]\n\n  const value = getString(d, accessor as StringAccessor<T>, index)\n  return (value || ((isNumber(index) && !dontFallbackToCssVar) ? `var(${getCSSColorVariable(index)})` : null))\n}\n\nexport function hexToRgb (hex: string): { r: number; g: number; b: number } {\n  const parsed = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n  return parsed ? {\n    r: parseInt(parsed[1], 16),\n    g: parseInt(parsed[2], 16),\n    b: parseInt(parsed[3], 16),\n  } : { r: 0, g: 0, b: 0 }\n}\n\nexport function hexToBrightness (hex: string): number {\n  const rgb = hexToRgb(hex)\n  return (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255\n}\n\nexport function getHexValue (s: string, context: HTMLElement | SVGElement): string {\n  const hex = isStringCSSVariable(s) ? getCSSVariableValue(s, context) : s\n  return color(hex)?.formatHex()\n}\n"],"names":[],"mappings":";;;;;AAUA;AACM,SAAU,QAAQ,CACtB,CAAI,EACJ,QAA0B,EAC1B,KAAc,EACd,oBAA8B,EAAA;IAE9B,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAExF,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,EAAE,QAA6B,EAAE,KAAK,CAAC,CAAA;AAChE,IAAA,QAAQ,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAO,IAAA,EAAA,mBAAmB,CAAC,KAAK,CAAC,CAAA,CAAA,CAAG,GAAG,IAAI,CAAC,EAAC;AAC9G,CAAC;AAEK,SAAU,QAAQ,CAAE,GAAW,EAAA;IACnC,MAAM,MAAM,GAAG,2CAA2C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACpE,OAAO,MAAM,GAAG;QACd,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAC1B,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAC1B,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3B,KAAA,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAC1B,CAAC;AAEK,SAAU,eAAe,CAAE,GAAW,EAAA;AAC1C,IAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAA;IACzB,OAAO,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,CAAC,CAAC,IAAI,GAAG,CAAA;AACjE,CAAC;AAEe,SAAA,WAAW,CAAE,CAAS,EAAE,OAAiC,EAAA;;AACvE,IAAA,MAAM,GAAG,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;IACxE,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,GAAG,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAS,EAAE,CAAA;AAChC;;;;"}
+{"version":3,"file":"color.js","sources":["../../src/utils/color.ts"],"sourcesContent":["import { color } from 'd3-color'\n\n// Core\nimport { getCSSColorVariable } from 'styles/colors'\n\n// Utils\nimport { ColorAccessor, StringAccessor } from 'types/accessor'\nimport { getString, isNumber } from 'utils/data'\nimport { isStringCSSVariable, getCSSVariableValue } from 'utils/misc'\n\ntype RGBColor = { r: number; g: number; b: number }\n\n/** Retrieves color from the data if provided, fallbacks to CSS variables if the index was passed */\nexport function getColor<T> (\n  d: T,\n  accessor: ColorAccessor<T>,\n  index?: number,\n  dontFallbackToCssVar?: boolean\n): string | null {\n  if (Array.isArray(accessor) && isFinite(index)) return accessor[index % accessor.length]\n\n  const value = getString(d, accessor as StringAccessor<T>, index)\n  return (value || ((isNumber(index) && !dontFallbackToCssVar) ? `var(${getCSSColorVariable(index)})` : null))\n}\n\nexport function hexToRgb (hex: string): RGBColor {\n  const parsed = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n  return parsed ? {\n    r: parseInt(parsed[1], 16),\n    g: parseInt(parsed[2], 16),\n    b: parseInt(parsed[3], 16),\n  } : { r: 0, g: 0, b: 0 }\n}\n\nexport function rgbToBrightness (rgb: RGBColor): number {\n  return (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255\n}\n\nexport function hexToBrightness (hex: string): number {\n  const rgb = hexToRgb(hex)\n  return rgbToBrightness(rgb)\n}\n\nexport function getHexValue (s: string, context: HTMLElement | SVGElement): string {\n  const hex = isStringCSSVariable(s) ? getCSSVariableValue(s, context) : s\n  return color(hex)?.formatHex()\n}\n\nexport function rgbaToRgb (rgba: string, backgroundColor?: string): RGBColor {\n  const rgb = color(rgba)?.rgb()\n  if (!rgb || rgb.opacity === 1) return rgb\n  const alpha = 1 - rgb.opacity\n  const bg = color(backgroundColor ?? '#fff').rgb()\n  return {\n    r: Math.round((rgb.opacity * (rgb.r / 255) + (alpha * (bg.r / 255))) * 255),\n    g: Math.round((rgb.opacity * (rgb.g / 255) + (alpha * (bg.g / 255))) * 255),\n    b: Math.round((rgb.opacity * (rgb.b / 255) + (alpha * (bg.b / 255))) * 255),\n  }\n}\n"],"names":[],"mappings":"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"}

package/utils/data.d.ts

@@ -6,7 +6,7 @@ export declare const isFunction: <T>(a: T) => boolean;
 export declare const isUndefined: <T>(a: T) => boolean;
 export declare const isNil: <T>(a: T) => boolean;
 export declare const isString: <T>(a: T) => boolean;
-export declare const isArray: <T>(a: T) => boolean;
+export declare const isArray: <T>(a: T) => a is T extends any[] ? T : never;
 export declare const isObject: <T>(a: T) => boolean;
 export declare const isAClassInstance: <T>(a: T) => boolean;
 export declare const isPlainObject: <T>(a: T) => boolean;