@heartlandone/vega-sandbox-pr-1475-b1e358890f4e71c36ade3ba715f51e7030022002 2.26.0

package/dist/collection/helpers/change-manager/change-manager.js

@@ -0,0 +1,73 @@
+import { LogUtility } from '../../utils/log';
+/**
+ * The ChangeManager is a class that allows observers to register themselves to a subject
+ * and notify the observer if signaled by subject
+ *
+ * @requires Subject
+ * @requires Observer
+ * @property {Map<Subject, Observer<unknown>[]>} pubSubMap - the map of subject to observers
+ */
+class ChangeManager {
+  constructor() {
+    this.pubSubMap = new Map();
+  }
+  /**
+   * If the subject is already in the map, add the observer to the list of observers for that subject. If the subject is not
+   * in the map, add the subject to the map and add the observer to the list of observers for that subject
+   *
+   * @param {Subject} subject - The subject of the event.
+   * @param {Observer<unknown>} observer - The observer that will be registered.
+   */
+  register(subject, observer) {
+    if (this.pubSubMap.has(subject)) {
+      const observers = this.pubSubMap.get(subject);
+      if (observers && !observers.includes(observer)) {
+        observers.push(observer);
+      }
+    }
+    else {
+      this.pubSubMap.set(subject, [observer]);
+    }
+  }
+  /**
+   * If the subject is in the map, remove the observer from the list of observers for that subject
+   *
+   * @param {Subject} subject - The subject of the event.
+   * @param {Observer<unknown>} observer - The observer to be unregistered.
+   */
+  unregister(subject, observer) {
+    if (this.pubSubMap.has(subject)) {
+      const observers = this.pubSubMap.get(subject);
+      if (observers && observers.includes(observer)) {
+        observers.splice(observers.indexOf(observer), 1);
+      }
+    }
+  }
+  /**
+   * The function clears the observers for a given subject in a pub-sub map.
+   *
+   * @param {Subject} subject - The subject parameter is an object that represents the subject of the observer pattern. It is used as a key to identify the observers that are subscribed to it.
+   */
+  clearObserversBySubject(subject) {
+    this.pubSubMap.delete(subject);
+  }
+  /**
+   * If the subject is in the map, then notify all observers of the subject
+   *
+   * @param {Subject} subject - Subject
+   * @param {unknown} payload - The payload to be sent to the observer.
+   */
+  notify(subject, payload) {
+    if (this.pubSubMap.has(subject)) {
+      this.pubSubMap.get(subject).forEach((observer) => {
+        try {
+          observer.notify(payload);
+        }
+        catch (e) {
+          LogUtility.warn(`Encountered error while notifying observer for subject ${subject.getDescription()}`, e);
+        }
+      });
+    }
+  }
+}
+export default new ChangeManager();

package/dist/collection/helpers/change-manager/observer/observer.js

@@ -0,0 +1,28 @@
+/**
+ *  An Observer is a class that has a listener method that accepts a value of type T
+ *  and calls the listener method with a value of type T
+ */
+export class Observer {
+  /**
+   * It accepts a function that accepts a value and returns a boolean, and a function that accepts a value of the type that
+   * the first function accepts
+   *
+   * @typedef T generic type parameter
+   * @param {(input: unknown) => input is T} accept - A function that indicate if the input is acceptable by the observer
+   * @param {(input: T) => void} listener - A function handle the input for the observer if the input is accepted
+   */
+  constructor(accept, listener) {
+    this.accept = accept;
+    this.listener = listener;
+  }
+  /**
+   * If the input is of the type that this handler is interested in, then call the listener function
+   *
+   * @param {unknown} input - unknown
+   */
+  notify(input) {
+    if (this.accept(input)) {
+      this.listener(input);
+    }
+  }
+}

package/dist/collection/helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory.js

@@ -0,0 +1,72 @@
+import { DomNodeSubject } from './dom-node-subject';
+import { isParent } from '../../../../utils/ui';
+/** The `DomNodesSubjectFactory` class is responsible for managing and caching `DomNodeSubject` objects associated with HTML elements. */
+class DomNodeSubjectFactory {
+  constructor() {
+    this.cache = new Map();
+  }
+  /**
+   * The function `getSubject` returns the subject associated with a given node and event ID, either from the cache or by setting it if it doesn't exist.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an HTMLElement, which represents an element in the HTML document.
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of the event for which we want to get the subject.
+   * @returns {DomNodeSubject} a `DomNodeSubject` object.
+   */
+  getSubject(node, eventId) {
+    if (this.isExist(node, eventId)) {
+      return this.cache.get(node).get(eventId);
+    }
+    else {
+      return this.setSubject(node, eventId);
+    }
+  }
+  /**
+   * The function checks if a given node exists in the cache and if it has a specific event ID.
+   *
+   * @param {HTMLElement} node - The "node" parameter is an HTMLElement, which represents an HTML element in the DOM (Document Object Model). It could be any HTML element such as a div, span, button, etc.
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents an event ID that is used to identify a specific event.
+   * @returns {boolean} a boolean value.
+   */
+  isExist(node, eventId) {
+    if (node) {
+      return (this.cache.has(node) &&
+        this.cache.get(node) !== undefined &&
+        this.cache.get(node).has(eventId));
+    }
+    return false;
+  }
+  /**
+   * The function find if the parent of a given node exists in the cache and if it has a specific event ID.
+   *
+   * @param {HTMLElement} childNode - Child node.
+   * @param {VegaEventIDInterface} eventId - eventId.
+   * @returns {DomNodeSubject} - Parent node subject.
+   */
+  getSubjectFromParentNodeByEventId(childNode, eventId) {
+    let subject;
+    for (const entry of this.cache) {
+      if (isParent(childNode, entry[0]) && entry[1].has(eventId)) {
+        subject = entry[1].get(eventId);
+        break;
+      }
+    }
+    return subject;
+  }
+  /**
+   * The function `setSubject` creates a new `DomNodeSubject` and associates it with a given `node` and `eventId`, and then returns the created subject.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an HTMLElement object representing an HTML element in the DOM (Document Object Model).
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   * @returns {DomNodeSubject} dom node subject object
+   */
+  setSubject(node, eventId) {
+    const subjectTitle = `${node.tagName}:${eventId.getName()}`;
+    const subject = new DomNodeSubject(subjectTitle, node);
+    if (!this.cache.get(node)) {
+      this.cache.set(node, new Map());
+    }
+    this.cache.get(node).set(eventId, subject);
+    return subject;
+  }
+}
+export default new DomNodeSubjectFactory();

package/dist/collection/helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory.js

@@ -0,0 +1,40 @@
+import changeManager from '../../change-manager';
+import { Observer } from '../../observer/observer';
+import domNodesSubjectFactory from './dom-node-subject-factory';
+/**
+ * The function `domAcceptableHandle` always returns `true`.
+ *
+ * @returns {boolean} true
+ */
+const domAcceptableHandle = () => {
+  return true;
+};
+/** The `DomNodeSubjectObserverFactory` class provides methods to add and remove observers to HTML element nodes. */
+export class DomNodeSubjectObserverFactory {
+  /**
+   * add observer to a given HTML element node
+   *
+   * @param {HTMLElement} node the node ref
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   * @param {(input?: unknown) => void} callback the callback handle
+   * @param {(input?: unknown) => boolean} acceptableHandle the acceptable handle
+   */
+  static addUniqueObserverToNode(node, eventId, callback, acceptableHandle) {
+    if (node) {
+      const domNodesObserver = new Observer(typeof acceptableHandle === 'function' ? acceptableHandle.bind(null) : domAcceptableHandle, callback);
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(node, eventId);
+      changeManager.register(domNodesSubjectFactory.getSubject(node, eventId), domNodesObserver);
+    }
+  }
+  /**
+   * The function removes observers from a given HTML element node.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an `HTMLElement` object representing an HTML element in the DOM (Document Object Model).
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   */
+  static removeUniqueObserverFromNode(node, eventId) {
+    if (domNodesSubjectFactory.isExist(node, eventId)) {
+      changeManager.clearObserversBySubject(domNodesSubjectFactory.getSubject(node, eventId));
+    }
+  }
+}

package/dist/collection/helpers/change-manager/subject/dom-node-subject/dom-node-subject.js

@@ -0,0 +1,23 @@
+/** The DomNodeSubject class represents a subject related to DOM nodes. */
+export class DomNodeSubject {
+  /**
+   * The constructor function takes a SubjectTitle parameter and assigns it to the private title property.
+   *
+   * @param {SubjectTitle} title - The "title" parameter is a private property of the class that is of type "SubjectTitle".
+   * @param {HTMLElement} host - The `host` parameter is an HTMLElement that represents the container or
+   * parent element where the subject title will be displayed. It is used to specify the location where
+   * the title will be rendered on the web page.
+   */
+  constructor(title, host) {
+    this.title = title;
+    this.host = host;
+  }
+  /**
+   * The getDescription function returns the title of an object as a string.
+   *
+   * @returns {string} The title of the object.
+   */
+  getDescription() {
+    return `, this is a dom nodes subject of ${this.title}.(class name:${this.host.className}, id:${this.host.id})`;
+  }
+}

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject-title.js

@@ -0,0 +1,25 @@
+import { StaticSubject } from './static-subject';
+export const SIDENAV_LINK_SELECTED_TOPIC = new StaticSubject('SIDENAV_LINK_SELECTED_TOPIC');
+export const LEFT_NAV_LINK_SELECTED_TOPIC = new StaticSubject('LEFT_NAV_LINK_SELECTED_TOPIC');
+export const ACCORDION_EXPAND_TOPIC = new StaticSubject('ACCORDION_EXPAND_TOPIC');
+export const FORM_RESET_OPERATION_TRIGGERED = new StaticSubject('FORM_RESET_OPERATION_TRIGGERED');
+export const FORM_FIELD_ELEMENT_DISCONNECTED = new StaticSubject('FORM_FIELD_ELEMENT_DISCONNECTED');
+export const FORM_SUBMIT = new StaticSubject('FORM_SUBMIT');
+export const FORM_RESET = new StaticSubject('FORM_RESET');
+export const RADIO_GROUP_DISABLED_CHANGE = new StaticSubject('RADIO_GROUP_DISABLED_CHANGE');
+export const CHECKBOX_GROUP_DISABLED_CHANGE = new StaticSubject('CHECKBOX_GROUP_DISABLED_CHANGE');
+export const FORM_FIELD_PENDING_VALID_CHANGE = new StaticSubject('FORM_FIELD_PENDING_VALID_CHANGE');
+export const TAB_PANEL_ADD_OR_DEL_TO_GROUP = new StaticSubject('TAB_PANEL_ADD_OR_DEL_TO_GROUP');
+export const TABLE_EXPAND_ROW = new StaticSubject('TABLE_EXPAND_ROW');
+export const TABLE_ROW_SELECTION = new StaticSubject('TABLE_ROW_SELECTION');
+export const TABLE_ROW_SELECTION_ALL = new StaticSubject('TABLE_ROW_SELECTION_ALL');
+export const TABLE_ROW_CLICK = new StaticSubject('TABLE_ROW_CLICK');
+export const FIELD_ERROR_MESSAGE_CHANGE = new StaticSubject('FIELD_ERROR_MESSAGE_CHANGE');
+export const DROPDOWN_ITEM_CLICK = new StaticSubject('DROPDOWN_ITEM_CLICK');
+export const CHECKBOX_VALUE_CHANGE = new StaticSubject('CHECKBOX_VALUE_CHANGE');
+export const RADIO_VALUE_CHANGE = new StaticSubject('RADIO_VALUE_CHANGE');
+export const FORM_ELEMENT_VALUE_CHANGE = new StaticSubject('FORM_ELEMENT_VALUE_CHANGE');
+export const FORM_ELEMENT_VALIDATE = new StaticSubject('FORM_EMEMENT_VALIDATE');
+export const FIELD_ERROR_STATE_CHANGE = new StaticSubject('FIELD_ERROR_STATE_CHANGE');
+export const VEGA_VIRTUAL_SCROLL_TO_BOTTOM = new StaticSubject('VEGA_VIRTUAL_SCROLL_TO_BOTTOM');
+export const SELECTION_TILE_VALUE_CHANGE = new StaticSubject('SELECTION_TILE_VALUE_CHANGE');

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject.js

@@ -0,0 +1,21 @@
+/**
+ * A subject class is used for register by observer
+ */
+export class StaticSubject {
+  /**
+   * It takes a subject title and returns a SubjectTitle object
+   *
+   * @param {SubjectTitle} title - The title of the subject.
+   */
+  constructor(title) {
+    this.title = title;
+  }
+  /**
+   * Get the title of the subject
+   *
+   * @returns {SubjectTitle} The title of the subject.
+   */
+  getDescription() {
+    return this.title;
+  }
+}

package/dist/collection/helpers/change-manager/subject/subject-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/helpers/change-manager/test/change-manager.test.js

@@ -0,0 +1,30 @@
+import ChangeManager from '../change-manager';
+import { Observer } from '../observer/observer';
+import { StaticSubject } from '../subject/static-subject/static-subject';
+const TEST_TOPIC = new StaticSubject('SIDENAV_LINK_SELECTED_TOPIC');
+const OTHER_TOPIC = new StaticSubject('SIDENAV_LINK_SELECTED_TOPIC');
+let result = '';
+const acceptable = (input) => typeof input === 'string';
+const observerListener = (input) => {
+  result = input;
+};
+test('return result as expect when call register and notify', () => {
+  const observer = new Observer(acceptable, observerListener.bind(this));
+  ChangeManager.register(TEST_TOPIC, observer);
+  ChangeManager.notify(TEST_TOPIC, '123');
+  expect(result).toEqual('123');
+});
+test('return result as expect when call unregister', () => {
+  const observer = new Observer(acceptable, observerListener.bind(this));
+  ChangeManager.register(OTHER_TOPIC, observer);
+  ChangeManager.unregister(OTHER_TOPIC, observer);
+  ChangeManager.notify(OTHER_TOPIC, '456');
+  expect(result).not.toEqual('456');
+});
+test('should remove the subject when call clearObserversBySubject', () => {
+  const observer = new Observer(acceptable, observerListener.bind(this));
+  ChangeManager.register(OTHER_TOPIC, observer);
+  const length = ChangeManager['pubSubMap'].size;
+  ChangeManager.clearObserversBySubject(OTHER_TOPIC);
+  expect(ChangeManager['pubSubMap'].size).toEqual(length - 1);
+});

package/dist/collection/helpers/change-manager/test/dom-node-subject-factory.test.js

@@ -0,0 +1,38 @@
+import { VegaClick } from '../../event-manager/event-id/vega-event-id';
+import changeManager from '../change-manager';
+import domNodesSubjectFactory from '../subject/dom-node-subject/dom-node-subject-factory';
+import { DomNodeSubjectObserverFactory } from '../subject/dom-node-subject/dom-node-subject-observer-factory';
+test('domNodesSubjectFactory', () => {
+  const div = document.createElement('div');
+  div.className = 'test';
+  expect(domNodesSubjectFactory.isExist(div, VegaClick)).toBeFalsy();
+  const divSubject = domNodesSubjectFactory.getSubject(div, VegaClick);
+  expect(divSubject).not.toBeNull();
+  expect(domNodesSubjectFactory.isExist(div, VegaClick)).toBeTruthy();
+  expect(divSubject.getDescription()).toEqual(`, this is a dom nodes subject of ${div.tagName}:${VegaClick.getVegaName()}.(class name:test, id:)`);
+  expect(domNodesSubjectFactory['isExist'].call(null, null)).toBeFalsy();
+});
+test('domNodesSubjectFactory getSubjectFromParentNodeByEventId', () => {
+  const parent = document.createElement('div');
+  parent.className = 'parent';
+  const child = document.createElement('div');
+  child.className = 'child';
+  parent.append(child);
+  const parentSubject = domNodesSubjectFactory.getSubject(parent, VegaClick);
+  expect(parentSubject).not.toBeNull();
+  expect(domNodesSubjectFactory.getSubjectFromParentNodeByEventId(child, VegaClick)).toEqual(parentSubject);
+  const element = document.createElement('div');
+  expect(domNodesSubjectFactory.getSubjectFromParentNodeByEventId(element, VegaClick)).toEqual(undefined);
+});
+test('addUniqueObserverToNode', () => {
+  const div = document.createElement('div');
+  const length = changeManager['pubSubMap'].size;
+  const mockCallback = jest.fn();
+  DomNodeSubjectObserverFactory.addUniqueObserverToNode(div, VegaClick, mockCallback);
+  expect(changeManager['pubSubMap'].size).toEqual(length + 1);
+  changeManager.notify(domNodesSubjectFactory.getSubject(div, VegaClick), div);
+  expect(mockCallback).toBeCalledTimes(1);
+  DomNodeSubjectObserverFactory.addUniqueObserverToNode(div, VegaClick, mockCallback, (node) => node.tagName === 'SPAN');
+  changeManager.notify(domNodesSubjectFactory.getSubject(div, VegaClick), div);
+  expect(mockCallback).toBeCalledTimes(1);
+});

package/dist/collection/helpers/chart/bar-chart.js

@@ -0,0 +1,67 @@
+import { BaseChart } from './base-chart';
+import { XAxisDrawer } from './drawers/x-axis-drawer';
+import { YAxisDrawer } from './drawers/y-axis-drawer';
+import { RectDrawer } from './drawers/rect-drawer';
+import { LegendDrawer } from './drawers/legend-drawer';
+import { LayoutInputProcessor } from './input-processors/layout-input-processor';
+import { ProcessorChain } from './input-processors/processor-chain';
+import { XAxisInputProcessor } from './input-processors/x-axis-input-processor';
+import { YAxisInputProcessor } from './input-processors/y-axis-input-processor';
+import { LegendInputProcessor } from './input-processors/legend-input-processor';
+import { HorizontalXAxisInputProcessor } from './input-processors/horizontal-x-axis-input-processor';
+import { HorizontalYAxisInputProcessor } from './input-processors/horizontal-y-axis-input-processor';
+/**
+ * The BarChart class is a TypeScript implementation of a bar chart that extends the BaseChart class
+ * and includes methods for creating a drawer chain
+ */
+export class BarChart extends BaseChart {
+  constructor() {
+    super(...arguments);
+    this.layoutInputProcessor = new LayoutInputProcessor();
+    this.xAxisInputProcessorChain = new ProcessorChain([this.layoutInputProcessor, new XAxisInputProcessor()]);
+    this.horizontalXAxisInputProcessorChain = new ProcessorChain([this.layoutInputProcessor, new HorizontalXAxisInputProcessor()]);
+    this.yAxisInputProcessorChain = new ProcessorChain([this.layoutInputProcessor, new YAxisInputProcessor()]);
+    this.horizontalYAxisInputProcessorChain = new ProcessorChain([this.layoutInputProcessor, new HorizontalYAxisInputProcessor()]);
+    this.legendInputProcessorChain = new ProcessorChain([
+      this.layoutInputProcessor,
+      new LegendInputProcessor(),
+    ]);
+  }
+  /**
+   * This function creates an array of BaseDrawer objects for rendering a chart with axes, legends, and paths.
+   *
+   * @param {BaseRenderer<SVGElement | HTMLCanvasElement>} renderer - an instance of a BaseRenderer class that can render SVG or Canvas elements.
+   * @param {BaseInteractor<SVGElement | HTMLCanvasElement>} interactor - an instance of a BaseInteractor class
+   * @returns {BaseDrawer<unknown>[]} An array of BaseDrawer array.
+   */
+  createDrawerChain(renderer, interactor) {
+    const { colors, xAxis, dataSource, direction } = this.options;
+    const renderOptions = Object.assign(Object.assign({}, this.options), { xAxis: Object.assign(Object.assign({}, xAxis), { type: 'category' }) });
+    const xAxisOutput = direction === 'horizontal'
+      ? this.horizontalXAxisInputProcessorChain.process(renderOptions)
+      : this.xAxisInputProcessorChain.process(renderOptions);
+    const yAxisOutput = direction === 'horizontal'
+      ? this.horizontalYAxisInputProcessorChain.process(renderOptions)
+      : this.yAxisInputProcessorChain.process(renderOptions);
+    return [
+      new XAxisDrawer(renderer, interactor, {
+        renderOptions: xAxisOutput,
+      }),
+      new YAxisDrawer(renderer, interactor, {
+        renderOptions: yAxisOutput,
+      }),
+      new LegendDrawer(renderer, interactor, {
+        renderOptions: this.legendInputProcessorChain.process(renderOptions),
+      }),
+      new RectDrawer(renderer, interactor, {
+        renderOptions: {
+          dataSource,
+          xScale: xAxisOutput.scale,
+          yScale: yAxisOutput.scale,
+          colors,
+          direction,
+        },
+      }),
+    ];
+  }
+}

package/dist/collection/helpers/chart/base-chart.js

@@ -0,0 +1,88 @@
+import { GraphContextFactory } from './graph-context-factory';
+import { RendererFactory } from './renderers/renderer-factory';
+import { ChartDimensionController, DEFAULT_LAYOUT } from './controllers/chart-dimension-controller';
+import { InteractorFactory } from './interactors/interactor-factory';
+/** This is a TypeScript class called `BaseChart` that serves as a base class for creating charts */
+export class BaseChart {
+  /**
+   * This is a constructor function that initializes a chart with options and creates a chain of drawers for rendering.
+   *
+   * @param {ChartOptions<unknown>} options - generic type that represents the configuration options for the chart
+   */
+  constructor(options) {
+    this.options = options;
+    this.isLayoutSet = false;
+    this.drawers = [];
+    const context = GraphContextFactory.get(options.mode, options.container.shadowRoot ? options.container.shadowRoot : options.container);
+    this.dimensionController = new ChartDimensionController(options.container);
+    this.renderer = RendererFactory.get(context);
+    this.interactor = InteractorFactory.get(context);
+    this.initLayoutOptions(options);
+  }
+  /**
+   * The function clears the renderer.
+   */
+  clear() {
+    this.renderer.clear();
+  }
+  /**
+   * This function updates the chart options, creates a new drawer chain, resets the layout, and renders the chart.
+   *
+   * @param {ChartOptions<unknown>} options - ChartOptions<T> is a generic type that represents the configuration options for a
+   * chart. It can include properties such as the chart type, data, labels, colors, and other stylingoptions
+   */
+  updateOptions(options) {
+    this.initLayoutOptions(options);
+    this.isLayoutSet = false;
+    this.render();
+  }
+  /**
+   * re render the chart using existing options
+   */
+  reRender() {
+    this.updateOptions(this.options);
+  }
+  /**
+   * sets the layout if it hasn't been set yet, and executes all the drawers. unregister the interactor by drawer
+   */
+  render() {
+    this.unregisterByDrawer();
+    this.drawers = this.createDrawerChain(this.renderer, this.interactor);
+    this.clear();
+    if (!this.isLayoutSet) {
+      this.setLayout();
+      this.isLayoutSet = true;
+    }
+    this.drawers.forEach((drawer) => drawer.execute());
+  }
+  /**
+   * sets the layout of a renderer using the options provided.
+   */
+  setLayout() {
+    const layout = this.options.layout;
+    const width = this.dimensionController.getContainerClientWidth(layout), height = this.dimensionController.getContainerClientHeight(layout), margin = (layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin;
+    this.renderer.setLayout(width, height, margin.top, margin.left);
+  }
+  /**
+   * This function initializes layout options for a chart.
+   *
+   * @param {ChartOptions} options - ChartOptions<T> is a generic type that represents the configuration options for a
+   * chart. It includes properties such as data, layout, and style.
+   */
+  initLayoutOptions(options) {
+    const newLayout = this.dimensionController.mergeLayout(options.container.tagName, options.layout, options.legends && options.legends.length ? true : false);
+    this.options = Object.assign(options, { layout: newLayout });
+    this.dimensionController.setContainerWidthAndHeight(newLayout);
+    this.options.container.style.display = 'block';
+  }
+  /**
+   * This function un-registers drawers from the interactor.
+   */
+  unregisterByDrawer() {
+    if (this.drawers) {
+      this.drawers.forEach((drawer) => {
+        this.interactor.unregisterByDrawer(drawer);
+      });
+    }
+  }
+}

package/dist/collection/helpers/chart/controllers/chart-dimension-controller.js

@@ -0,0 +1,113 @@
+import { parseNumberToPixelString, parsePixelStringToNumber } from '../../../utils/pixel';
+export const DEFAULT_LAYOUT = {
+  width: undefined,
+  height: undefined,
+  margin: {
+    top: 30,
+    right: 30,
+    bottom: 30,
+    left: 30,
+  },
+};
+export const DEFAULT_MARGIN_TOP_WITH_LEGENDS = 60;
+export const DEFAULT_MARGIN_LEFT_WITH_AXIS = 60;
+/** The ChartDimensionController class contains methods for setting and retrieving the width and height of a chart container element. */
+export class ChartDimensionController {
+  /**
+   * This is a constructor function that takes an HTMLElement as a parameter and assigns it to a private property called "container".
+   *
+   * @param {HTMLElement} container - The "container" parameter is a reference to an HTML element that
+   * will be used as a container for the component or module being constructed. This parameter is
+   * typically passed in during the instantiation of the component or module and is used to specify
+   * where the component or module should be rendered in the DOM.
+   */
+  constructor(container) {
+    this.container = container;
+  }
+  /**
+   * This function sets the width and height of a container element based on a given layout object. if the layout is null, then will not update,
+   * prevent the original style is changed
+   *
+   * @param {ChartLayout} layout - ChartLayout object that contains the width and height values for the chart container.
+   */
+  setContainerWidthAndHeight(layout) {
+    const { width, height } = layout;
+    if (width !== undefined) {
+      this.container.style.width = parseNumberToPixelString(width);
+    }
+    if (height !== undefined) {
+      this.container.style.height = parseNumberToPixelString(height);
+    }
+  }
+  /**
+   * This function returns the client width of a container or parses the width from a layout object.
+   *
+   * @param {ChartLayout} layout - In this function, the layout parameter is used to determine the width of the chart container. If the container's
+   * clientWidth property is not available,
+   * @returns {number} returning a number. The number is either the client width of the container element or the parsed width value from the `ChartLayout` object.
+   */
+  getContainerClientWidth(layout) {
+    return (this.container.clientWidth ||
+      parsePixelStringToNumber((layout === null || layout === void 0 ? void 0 : layout.width) || this.container.style.width));
+  }
+  /**
+   * This function returns the height of a container element in pixels, either by accessing its clientHeight property or by parsing a string value from the layout object.
+   *
+   * @param {ChartLayout} layout -  the layout parameter is used to determine the height of the chart container if it is not already set.
+   * @returns {number} The function `getContainerClientHeight` returns a number which represents the height of
+   * the container client or the parsed height value from the `ChartLayout` object.
+   */
+  getContainerClientHeight(layout) {
+    return (this.container.clientHeight ||
+      parsePixelStringToNumber((layout === null || layout === void 0 ? void 0 : layout.height) || this.container.style.height));
+  }
+  /**
+   * This function calculates the inner width of a chart container by subtracting the left and right margins from the client width.
+   *
+   * @param {ChartLayout} layout - ChartLayout object that contains information about the chart layout,
+   * including the container width and margin.
+   * @returns {number} the inner width of a container element, which is calculated by subtracting the left and
+   * right margins from the client width of the container.
+   */
+  getContainerInnerWidth(layout) {
+    const width = this.getContainerClientWidth(layout);
+    const { left, right } = ((layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin);
+    return width ? width - right - left : 0;
+  }
+  /**
+   * This function calculates the inner height of a chart container by subtracting the top and bottom margins from the client height.
+   *
+   * @param {ChartLayout} layout - The `layout` parameter is an object of type `ChartLayout` which
+   * contains information about the layout of a chart, including its dimensions and margins.
+   * @returns {number} the inner height of a container element, which is calculated by subtracting the top and
+   * bottom margins from the client height of the container. The returned value is a number.
+   */
+  getContainerInnerHeight(layout) {
+    const height = this.getContainerClientHeight(layout);
+    const { top, bottom } = ((layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin);
+    return height ? height - top - bottom : 0;
+  }
+  /**
+   * This function merges a given chart layout with default values and returns the updated layout.
+   *
+   * @param {string} chartName - A string representing the name of the chart.
+   * @param {ChartLayout} layout - The `layout` parameter is an optional object that contains properties
+   * for the width, height, and margin of a chart. If provided, it will be merged with the default
+   * layout settings to create a new layout object. If not provided, the default layout settings will be
+   * used.
+   * @param {boolean} hasLegends - A boolean value indicating whether the chart has legends or not.
+   * @returns {ChartLayout} a ChartLayout object.
+   */
+  mergeLayout(chartName, layout, hasLegends) {
+    const defaultTop = hasLegends ? DEFAULT_MARGIN_TOP_WITH_LEGENDS : DEFAULT_LAYOUT.margin.top;
+    const defaultLeft = chartName === 'VEGA-LINE-CHART' || chartName === 'VEGA-BAR-CHART'
+      ? DEFAULT_MARGIN_LEFT_WITH_AXIS
+      : DEFAULT_LAYOUT.margin.left;
+    const newLayout = {
+      width: layout && layout.width ? layout.width : DEFAULT_LAYOUT.width,
+      height: layout && layout.height ? layout.height : DEFAULT_LAYOUT.height,
+      margin: Object.assign({}, DEFAULT_LAYOUT.margin, { top: defaultTop, left: defaultLeft }, layout && layout.margin ? layout.margin : {}),
+    };
+    return newLayout;
+  }
+}

package/dist/collection/helpers/chart/drawers/arc-path-drawer.js

@@ -0,0 +1,32 @@
+import { ArcPathHoverGenerator } from '../interacting-entry-generator/arc-path-hover-generator';
+import { BaseDrawer } from './base-drawer';
+/** The PathDrawer class draws a path on a chart using provided data and color options. */
+export class ArcPathDrawer extends BaseDrawer {
+  constructor() {
+    super(...arguments);
+    this.arcPathHoverEntryGenerator = new ArcPathHoverGenerator();
+  }
+  /**
+   * This function adds interaction support to a given drawPiece using an interactor and an arcPathHoverEntryGenerator.
+   *
+   * @param {(SVGPathElement | HTMLCanvasElement)[]} drawPiece - drawPiece is an array of SVGPathElement
+   * or HTMLCanvasElement objects that represent the pieces to be drawn on the screen. These elements
+   * are used to render the game board and interact with the user. The addInteractionSupport method
+   * registers the current object as an interactive element with the interactor
+   */
+  addInteractionSupport(drawPiece) {
+    this.interactor.register(this, drawPiece, this.arcPathHoverEntryGenerator.generate());
+  }
+  /**
+   * This function draws a chart with arcs using data and options provided, and returns an array of SVGPathElement or HTMLCanvasElement.
+   *
+   * @returns {(SVGPathElement | HTMLCanvasElement)[]} An array of either SVGPathElement or HTMLCanvasElement, depending on the result of the map function.
+   */
+  draw() {
+    const { data, colors, donutRadius, outerRadius, center } = this.options.renderOptions;
+    return data.map((item, index) => {
+      const color = this.getColorFromToken(this.getColorByIndex(index, colors));
+      return this.renderer.drawArcPath(center, item, color, outerRadius, donutRadius);
+    });
+  }
+}