@unovis/ts 1.3.0-beta.2 → 1.3.0-beta.3

package/core/component/config.js

@@ -1,8 +1,14 @@
-const ComponentDefaultConfig = {
-    duration: 600,
-    events: {},
-    attributes: {},
-};
+import { Config } from '../config/index.js';
 
-export { ComponentDefaultConfig };
+/* eslint-disable no-irregular-whitespace */
+class ComponentConfig extends Config {
+    constructor() {
+        super(...arguments);
+        this.duration = 600;
+        this.events = {};
+        this.attributes = {};
+    }
+}
+
+export { ComponentConfig };
 //# sourceMappingURL=config.js.map

package/core/component/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/core/component/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { VisEventCallback, VisEventType } from 'core/component/types'\n\nexport interface ComponentConfigInterface {\n  /** Animation duration of the data update transitions in milliseconds. Default: `600` */\n  duration?: number;\n  /** Events configuration. An object containing properties in the following format:\n   *\n   * ```\n   * {\n   *   [selectorString]: {\n   *       [eventType]: callbackFunction\n   *   }\n   * }\n   * ```\n   * e.g.:\n   * ```\n   * {\n   *   [Area.selectors.area]: {\n   *     click: (d) => console.log(\"Clicked Area\", d)\n   *   }\n   * }\n   * ```\n   */\n  events?: {\n    [selector: string]: {\n      [eventType in VisEventType]?: VisEventCallback;\n    };\n  };\n  /** You can set every SVG and HTML visualization object to have a custom DOM attributes, which is useful\n   * when you want to do unit or end-to-end testing. Attributes configuration object has the following structure:\n   *\n   * ```\n   * {\n   *   [selectorString]: {\n   *       [attributeName]: attribute constant value or accessor function\n   *   }\n   * }\n   * ```\n   * e.g.:\n   * ```\n   * {\n   *   [Area.selectors.area]: {\n   *     \"test-value\": d => d.value\n   *   }\n   * }\n   * ```\n   */\n  attributes?: {\n    [selector: string]: {\n      [attr: string]: string | number | boolean | ((datum: any) => string | number | boolean);\n    };\n  };\n}\n\nexport const ComponentDefaultConfig: ComponentConfigInterface = {\n  duration: 600,\n  events: {},\n  attributes: {},\n}\n"],"names":[],"mappings":"AAuDa,MAAA,sBAAsB,GAA6B;AAC9D,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,MAAM,EAAE,EAAE;AACV,IAAA,UAAU,EAAE,EAAE;;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/core/component/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { Config } from 'core/config'\nimport { VisEventCallback, VisEventType } from 'core/component/types'\n\nexport interface ComponentConfigInterface {\n  /** Animation duration of the data update transitions in milliseconds. Default: `600` */\n  duration?: number;\n  /** Events configuration. An object containing properties in the following format:\n   *\n   * ```\n   * {\n   *   [selectorString]: {\n   *       [eventType]: callbackFunction\n   *   }\n   * }\n   * ```\n   * e.g.:\n   * ```\n   * {\n   *   [Area.selectors.area]: {\n   *     click: (d) => console.log(\"Clicked Area\", d)\n   *   }\n   * }\n   * ```\n   */\n  events?: {\n    [selector: string]: {\n      [eventType in VisEventType]?: VisEventCallback;\n    };\n  };\n  /** You can set every SVG and HTML visualization object to have a custom DOM attributes, which is useful\n   * when you want to do unit or end-to-end testing. Attributes configuration object has the following structure:\n   *\n   * ```\n   * {\n   *   [selectorString]: {\n   *       [attributeName]: attribute constant value or accessor function\n   *   }\n   * }\n   * ```\n   * e.g.:\n   * ```\n   * {\n   *   [Area.selectors.area]: {\n   *     \"test-value\": d => d.value\n   *   }\n   * }\n   * ```\n   */\n  attributes?: {\n    [selector: string]: {\n      [attr: string]: string | number | boolean | ((datum: any) => string | number | boolean);\n    };\n  };\n}\n\nexport class ComponentConfig extends Config implements ComponentConfigInterface {\n  duration = 600\n  events = {}\n  attributes = {}\n}\n"],"names":[],"mappings":";;AAAA;AAwDM,MAAO,eAAgB,SAAQ,MAAM,CAAA;AAA3C,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAA;QACd,IAAM,CAAA,MAAA,GAAG,EAAE,CAAA;QACX,IAAU,CAAA,UAAA,GAAG,EAAE,CAAA;KAChB;AAAA;;;;"}

package/core/component/index.d.ts

@@ -3,23 +3,21 @@ import { CoreDataModel } from "../../data-models/core";
 import { ComponentType, Sizing } from "../../types/component";
 import { Spacing } from "../../types/spacing";
 import { VisEventCallback, VisEventType } from './types';
-import { ComponentConfigInterface } from './config';
-export declare class ComponentCore<CoreDatum, ConfigInterface extends ComponentConfigInterface = ComponentConfigInterface> {
+import { ComponentConfig, ComponentConfigInterface } from './config';
+export declare class ComponentCore<CoreDatum, ConfigClass extends ComponentConfig = ComponentConfig, ConfigInterface extends ComponentConfigInterface = ComponentConfigInterface> {
     element: SVGGElement | HTMLElement;
     type: ComponentType;
     g: Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>;
-    config: ComponentConfigInterface;
-    prevConfig: ComponentConfigInterface;
+    config: ConfigClass;
+    prevConfig: ConfigClass;
     datamodel: CoreDataModel<CoreDatum>;
     sizing: Sizing | string;
     uid: string;
-    protected events: {
+    events: {
         [selector: string]: {
             [eventType in VisEventType]?: VisEventCallback;
         };
     };
-    /** Default configuration */
-    protected _defaultConfig: ComponentConfigInterface;
     /** Component width in pixels. This property is set automatically by the container. */
     protected _width: number;
     /** Component height in pixels. This property is set automatically by the container. */

package/core/component/index.js

@@ -1,9 +1,8 @@
 import { select } from 'd3-selection';
 import { CoreDataModel } from '../../data-models/core.js';
-import { throttle, merge } from '../../utils/data.js';
+import { throttle } from '../../utils/data.js';
 import { guid } from '../../utils/misc.js';
 import { ComponentType, Sizing } from '../../types/component.js';
-import { ComponentDefaultConfig } from './config.js';
 
 class ComponentCore {
     constructor(type = ComponentType.SVG) {
@@ -12,8 +11,6 @@ class ComponentCore {
         this.datamodel = new CoreDataModel();
         this.sizing = Sizing.Fit; // Supported by SingleContainer and a subset of components only (Sankey)
         this.events = {};
-        /** Default configuration */
-        this._defaultConfig = ComponentDefaultConfig;
         /** Component width in pixels. This property is set automatically by the container. */
         this._width = 400;
         /** Component height in pixels. This property is set automatically by the container. */
@@ -39,8 +36,10 @@ class ComponentCore {
             this.g.attr('class', rootClass);
     }
     setConfig(config) {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const ConfigModel = this.config.constructor;
         this.prevConfig = this.config; // Store the previous config instance
-        this.config = merge(this._defaultConfig, config);
+        this.config = new ConfigModel().init(config);
     }
     setData(data) {
         this.datamodel.data = data;
@@ -81,9 +80,9 @@ class ComponentCore {
         const attributeMap = this.config.attributes;
         Object.keys(attributeMap).forEach(className => {
             Object.keys(attributeMap[className]).forEach(attr => {
-                const selection = this.g
-                    .selectAll(`.${className}`);
-                selection.attr(attr, attributeMap[className][attr]);
+                this.g
+                    .selectAll(`.${className}`)
+                    .attr(attr, attributeMap[className][attr]);
             });
         });
     }

package/core/component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/core/component/index.ts"],"sourcesContent":["import { select, Selection, ValueFn } from 'd3-selection'\nimport { Transition } from 'd3-transition'\n\n// Core\nimport { CoreDataModel } from 'data-models/core'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\nimport { guid } from 'utils/misc'\n\n// Types\nimport { ComponentType, Sizing } from 'types/component'\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { VisEventCallback, VisEventType } from './types'\n\n// Config\nimport { ComponentDefaultConfig, ComponentConfigInterface } from './config'\n\nexport class ComponentCore<\n  CoreDatum,\n  ConfigInterface extends ComponentConfigInterface = ComponentConfigInterface,\n> {\n  public element: SVGGElement | HTMLElement\n  public type: ComponentType = ComponentType.SVG\n  public g: Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n  public config: ComponentConfigInterface\n  public prevConfig: ComponentConfigInterface\n  public datamodel: CoreDataModel<CoreDatum> = new CoreDataModel()\n  public sizing: Sizing | string = Sizing.Fit // Supported by SingleContainer and a subset of components only (Sankey)\n  public uid: string\n\n  protected events: {\n    [selector: string]: {\n      [eventType in VisEventType]?: VisEventCallback;\n    };\n  } = {}\n\n  /** Default configuration */\n  protected _defaultConfig: ComponentConfigInterface = ComponentDefaultConfig\n  /** Component width in pixels. This property is set automatically by the container. */\n  protected _width = 400\n  /** Component height in pixels. This property is set automatically by the container. */\n  protected _height = 200\n  /** Container width in pixels. This property is set automatically by the container. */\n  protected _containerWidth: number | undefined = undefined\n  /** Container height in pixels. This property is set automatically by the container. */\n  protected _containerHeight: number | undefined = undefined\n\n  _setUpComponentEventsThrottled = throttle(this._setUpComponentEvents, 500)\n  _setCustomAttributesThrottled = throttle(this._setCustomAttributes, 500)\n\n  constructor (type = ComponentType.SVG) {\n    if (type === ComponentType.SVG) {\n      this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n    } else {\n      this.element = document.createElement('div')\n    }\n    this.uid = guid()\n    this.g = select(this.element) as Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n\n    // Setting the root class if available\n    // eslint-disable-next-line dot-notation\n    const rootClass = this.constructor?.['selectors']?.root as string\n    if (rootClass) this.g.attr('class', rootClass)\n  }\n\n  setConfig (config: ConfigInterface): void {\n    this.prevConfig = this.config // Store the previous config instance\n    this.config = merge(this._defaultConfig, config)\n  }\n\n  setData (data: CoreDatum): void {\n    this.datamodel.data = data\n  }\n\n  setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n    if (isFinite(width)) this._width = width\n    if (isFinite(height)) this._height = height\n    if (isFinite(containerWidth)) this._containerWidth = containerWidth\n    if (isFinite(containerHeight)) this._containerHeight = containerHeight\n  }\n\n  render (duration = this.config.duration): void {\n    this._render(duration)\n\n    // While transition is in progress, we add the 'animating' attribute to the component's SVG group\n    const ANIMATING_ATTR = 'animating'\n    if (duration) {\n      this.g.attr(ANIMATING_ATTR, '')\n      const transition = this.g\n        .transition(ANIMATING_ATTR)\n        .duration(duration) as Transition<SVGGElement | HTMLElement, unknown, null, undefined>\n\n      transition.on('end interrupt', () => {\n        this.g.attr(ANIMATING_ATTR, null)\n      })\n    }\n    this._setUpComponentEventsThrottled()\n    this._setCustomAttributesThrottled()\n  }\n\n  get bleed (): Spacing {\n    return { top: 0, bottom: 0, left: 0, right: 0 }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  _render (duration = this.config.duration): void {\n  }\n\n  private _setCustomAttributes (): void {\n    const attributeMap = this.config.attributes\n\n    Object.keys(attributeMap).forEach(className => {\n      Object.keys(attributeMap[className]).forEach(attr => {\n        const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>)\n          .selectAll<SVGGElement | HTMLElement, unknown>(`.${className}`)\n\n        selection.attr(attr, attributeMap[className][attr] as ValueFn<SVGGElement | HTMLElement, unknown, string | number | boolean>)\n      })\n    })\n  }\n\n  private _setUpComponentEvents (): void {\n    // Set up default events\n    this._bindEvents(this.events)\n\n    // Set up user-defined events\n    this._bindEvents(this.config.events, '.user')\n  }\n\n  private _bindEvents (events = this.events, suffix = ''): void {\n    Object.keys(events).forEach(className => {\n      Object.keys(events[className]).forEach(eventType => {\n        const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>).selectAll(`.${className}`)\n        selection.on(eventType + suffix, (event: Event, d) => {\n          const els = selection.nodes()\n          const i = els.indexOf(event.currentTarget as SVGGElement | HTMLElement)\n          return events[className][eventType](d, event, i, els)\n        })\n      })\n    })\n  }\n\n  public destroy (): void {\n    this.g?.remove()\n    this.element = undefined\n  }\n\n  public isDestroyed (): boolean {\n    return !this.element\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/core/component/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\n\n// Core\nimport { CoreDataModel } from 'data-models/core'\n\n// Utils\nimport { throttle } from 'utils/data'\nimport { guid } from 'utils/misc'\n\n// Types\nimport { ComponentType, Sizing } from 'types/component'\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { VisEventCallback, VisEventType } from './types'\n\n// Config\nimport { ComponentConfig, ComponentConfigInterface } from './config'\n\nexport class ComponentCore<\n  CoreDatum,\n  ConfigClass extends ComponentConfig = ComponentConfig,\n  ConfigInterface extends ComponentConfigInterface = ComponentConfigInterface,\n> {\n  element: SVGGElement | HTMLElement\n  type: ComponentType = ComponentType.SVG\n  g: Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n  config: ConfigClass\n  prevConfig: ConfigClass\n  datamodel: CoreDataModel<CoreDatum> = new CoreDataModel()\n  sizing: Sizing | string = Sizing.Fit // Supported by SingleContainer and a subset of components only (Sankey)\n  uid: string\n\n  events: {\n    [selector: string]: {\n      [eventType in VisEventType]?: VisEventCallback;\n    };\n  } = {}\n\n  /** Component width in pixels. This property is set automatically by the container. */\n  protected _width = 400\n  /** Component height in pixels. This property is set automatically by the container. */\n  protected _height = 200\n  /** Container width in pixels. This property is set automatically by the container. */\n  protected _containerWidth: number | undefined = undefined\n  /** Container height in pixels. This property is set automatically by the container. */\n  protected _containerHeight: number | undefined = undefined\n\n  _setUpComponentEventsThrottled = throttle(this._setUpComponentEvents, 500)\n  _setCustomAttributesThrottled = throttle(this._setCustomAttributes, 500)\n\n  constructor (type = ComponentType.SVG) {\n    if (type === ComponentType.SVG) {\n      this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n    } else {\n      this.element = document.createElement('div')\n    }\n    this.uid = guid()\n    this.g = select(this.element) as Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n\n    // Setting the root class if available\n    // eslint-disable-next-line dot-notation\n    const rootClass = this.constructor?.['selectors']?.root as string\n    if (rootClass) this.g.attr('class', rootClass)\n  }\n\n  setConfig (config: ConfigInterface): void {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const ConfigModel = (this.config.constructor as typeof ComponentConfig)\n    this.prevConfig = this.config // Store the previous config instance\n    this.config = new ConfigModel().init(config) as ConfigClass\n  }\n\n  setData (data: CoreDatum): void {\n    this.datamodel.data = data\n  }\n\n  setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n    if (isFinite(width)) this._width = width\n    if (isFinite(height)) this._height = height\n    if (isFinite(containerWidth)) this._containerWidth = containerWidth\n    if (isFinite(containerHeight)) this._containerHeight = containerHeight\n  }\n\n  render (duration = this.config.duration): void {\n    this._render(duration)\n\n    // While transition is in progress, we add the 'animating' attribute to the component's SVG group\n    const ANIMATING_ATTR = 'animating'\n    if (duration) {\n      this.g.attr(ANIMATING_ATTR, '')\n      const transition = this.g\n        .transition(ANIMATING_ATTR)\n        .duration(duration) as Transition<SVGGElement | HTMLElement, unknown, null, undefined>\n\n      transition.on('end interrupt', () => {\n        this.g.attr(ANIMATING_ATTR, null)\n      })\n    }\n    this._setUpComponentEventsThrottled()\n    this._setCustomAttributesThrottled()\n  }\n\n  get bleed (): Spacing {\n    return { top: 0, bottom: 0, left: 0, right: 0 }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  _render (duration = this.config.duration): void {\n  }\n\n  private _setCustomAttributes (): void {\n    const attributeMap = this.config.attributes\n\n    Object.keys(attributeMap).forEach(className => {\n      Object.keys(attributeMap[className]).forEach(attr => {\n        (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>)\n          .selectAll(`.${className}`)\n          .attr(attr, attributeMap[className][attr])\n      })\n    })\n  }\n\n  private _setUpComponentEvents (): void {\n    // Set up default events\n    this._bindEvents(this.events)\n\n    // Set up user-defined events\n    this._bindEvents(this.config.events, '.user')\n  }\n\n  private _bindEvents (events = this.events, suffix = ''): void {\n    Object.keys(events).forEach(className => {\n      Object.keys(events[className]).forEach(eventType => {\n        const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>).selectAll(`.${className}`)\n        selection.on(eventType + suffix, (event: Event, d) => {\n          const els = selection.nodes()\n          const i = els.indexOf(event.currentTarget as SVGGElement | HTMLElement)\n          return events[className][eventType](d, event, i, els)\n        })\n      })\n    })\n  }\n\n  public destroy (): void {\n    this.g?.remove()\n    this.element = undefined\n  }\n\n  public isDestroyed (): boolean {\n    return !this.element\n  }\n}\n"],"names":[],"mappings":"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"}

package/core/config/index.d.ts

@@ -0,0 +1,3 @@
+export declare class Config {
+    init<T>(config: T): this;
+}

package/core/config/index.js

@@ -0,0 +1,16 @@
+import { isPlainObject, merge } from '../../utils/data.js';
+
+class Config {
+    init(config) {
+        Object.keys(config).forEach(key => {
+            if (isPlainObject(this[key]) && isPlainObject(config[key]))
+                this[key] = merge(this[key], config[key]);
+            else
+                this[key] = config[key];
+        });
+        return this;
+    }
+}
+
+export { Config };
+//# sourceMappingURL=index.js.map

package/core/config/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/core/config/index.ts"],"sourcesContent":["import { isPlainObject, merge } from 'utils/data'\n\nexport class Config {\n  init<T> (config: T): this {\n    Object.keys(config).forEach(key => {\n      if (isPlainObject(this[key]) && isPlainObject(config[key])) this[key] = merge(this[key], config[key])\n      else this[key] = config[key]\n    })\n\n    return this\n  }\n}\n"],"names":[],"mappings":";;MAEa,MAAM,CAAA;AACjB,IAAA,IAAI,CAAK,MAAS,EAAA;QAChB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,IAAG;AAChC,YAAA,IAAI,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAAE,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;;gBAChG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;AAC9B,SAAC,CAAC,CAAA;AAEF,QAAA,OAAO,IAAI,CAAA;KACZ;AACF;;;;"}

package/core/container/config.d.ts

@@ -1,3 +1,4 @@
+import { Config } from "../config";
 import { Sizing } from "../../types/component";
 import { Spacing } from "../../types/spacing";
 export interface ContainerConfigInterface {
@@ -30,4 +31,23 @@ export interface ContainerConfigInterface {
     */
     ariaLabel?: string | null | undefined;
 }
-export declare const ContainerDefaultConfig: ContainerConfigInterface;
+export declare class ContainerConfig extends Config implements ContainerConfigInterface {
+    duration: any;
+    margin: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    padding: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    sizing: Sizing;
+    width: any;
+    height: any;
+    svgDefs: any;
+    ariaLabel: any;
+}

package/core/container/config.js

@@ -1,26 +1,30 @@
+import { Config } from '../config/index.js';
 import { Sizing } from '../../types/component.js';
 
 // Core
-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,
-};
+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;
+    }
+}
 
-export { ContainerDefaultConfig };
+export { ContainerConfig };
 //# 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\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;;;;;"}
+{"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;;;;"}

package/core/container/index.d.ts

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

package/core/container/index.js

@@ -1,12 +1,10 @@
 import { select } from 'd3-selection';
 import { Sizing } from '../../types/component.js';
-import { merge, clamp, isEqual } from '../../utils/data.js';
+import { 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;
@@ -26,8 +24,9 @@ class ContainerCore {
     }
     updateContainer(config) {
         // eslint-disable-next-line @typescript-eslint/naming-convention
+        const ConfigModel = this.config.constructor;
         this.prevConfig = this.config;
-        this.config = merge(this._defaultConfig, config);
+        this.config = new ConfigModel().init(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, 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  protected _svgDefs: Selection<SVGDefsElement, unknown, null, 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._svgDefs = this.svg.append('defs')\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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"}
+{"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  protected _svgDefs: Selection<SVGDefsElement, unknown, null, 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._svgDefs = this.svg.append('defs')\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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"}

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

@@ -1,6 +1,6 @@
 import { ContinuousScale } from "../../types/scale";
 import { ColorAccessor, NumericAccessor } from "../../types/accessor";
-import { ComponentConfigInterface } from '../component/config';
+import { ComponentConfig, 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,4 +27,12 @@ export interface XYComponentConfigInterface<Datum> extends ComponentConfigInterf
     */
     excludeFromDomainCalculation?: boolean;
 }
-export declare const XYComponentDefaultConfig: XYComponentConfigInterface<unknown>;
+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;
+}

package/core/xy-component/config.js

@@ -1,11 +1,20 @@
-import { ComponentDefaultConfig } from '../component/config.js';
+import { ComponentConfig } from '../component/config.js';
 
 // Config
-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 });
+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;
+    }
+}
 
-export { XYComponentDefaultConfig };
+export { XYComponentConfig };
 //# 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 { 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;;;;"}
+{"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;;;;"}

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

@@ -2,18 +2,17 @@ import { Selection } from 'd3-selection';
 import { ComponentCore } from "../component";
 import { SeriesDataModel } from "../../data-models/series";
 import { ContinuousScale, ScaleDimension } from "../../types/scale";
-import { XYComponentConfigInterface } from './config';
-export declare class XYComponentCore<Datum, ConfigInterface extends Partial<XYComponentConfigInterface<Datum>> = Partial<XYComponentConfigInterface<Datum>>> extends ComponentCore<Datum[], ConfigInterface> {
+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> {
     element: SVGGraphicsElement;
     g: Selection<SVGGElement, unknown, null, undefined>;
-    config: ConfigInterface;
-    prevConfig: ConfigInterface;
+    config: ConfigClass;
+    prevConfig: ConfigClass;
     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,7 +2,6 @@ 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 {
@@ -13,7 +12,6 @@ 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 { 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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"}
+{"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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"}

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, i: number) => string);
+    pointId: ((n: PointDatum) => 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, i) => this.pointId(node, i) === pointIdentifier);
+            foundPoint = points.find(node => this.pointId(node) === 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, 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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"}
+{"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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"}

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-beta.2",
+  "version": "1.3.0-beta.3",
   "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 | null | undefined;
+export declare type ColorAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => string | null | undefined) | string | 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;