@globalpayments/vega 1.0.0 → 2.13.0-backfill-beta.0

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/domNodeSubject.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/dom-node-subject/domNodeSubjectFactory.js

@@ -0,0 +1,54 @@
+import { DomNodeSubject } from './domNodeSubject';
+/** The `DomNodesSubjectFactory` class is responsible for managing and caching `DomNodeSubject` objects associated with HTML elements. */
+class DomNodeSubjectFactory {
+  constructor() {
+    this.cache = new WeakMap();
+  }
+  /**
+   * 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 `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/domNodeSubjectObserverFactory.js

@@ -0,0 +1,40 @@
+import changeManager from '../../changeManager';
+import { Observer } from '../../observer/observer';
+import domNodesSubjectFactory from './domNodeSubjectFactory';
+/**
+ * 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/static-subject/staticSubject.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/static-subject/staticSubjectTitle.js

@@ -0,0 +1,25 @@
+import { StaticSubject } from './staticSubject';
+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/subjectInterface.js

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

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

@@ -0,0 +1,30 @@
+import ChangeManager from '../changeManager';
+import { Observer } from '../observer/observer';
+import { StaticSubject } from '../subject/static-subject/staticSubject';
+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/domNodeSubjectFactory.test.js

@@ -0,0 +1,26 @@
+import { VegaClick } from '../../event-manager/eventID/vegaEventId';
+import changeManager from '../changeManager';
+import domNodesSubjectFactory from '../subject/dom-node-subject/domNodeSubjectFactory';
+import { DomNodeSubjectObserverFactory } from '../subject/dom-node-subject/domNodeSubjectObserverFactory';
+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('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/barChart.js

@@ -0,0 +1,67 @@
+import { BaseChart } from './baseChart';
+import { XAxisDrawer } from './drawers/xAxisDrawer';
+import { YAxisDrawer } from './drawers/yAxisDrawer';
+import { RectDrawer } from './drawers/rectDrawer';
+import { LegendDrawer } from './drawers/legendDrawer';
+import { LayoutInputProcessor } from './inputProcessors/layoutInputProcessor';
+import { ProcessorChain } from './inputProcessors/processorChain';
+import { XAxisInputProcessor } from './inputProcessors/xAxisInputProcessor';
+import { YAxisInputProcessor } from './inputProcessors/yAxisInputProcessor';
+import { LegendInputProcessor } from './inputProcessors/legendInputProcessor';
+import { HorizontalXAxisInputProcessor } from './inputProcessors/horizontalXAxisInputProcessor';
+import { HorizontalYAxisInputProcessor } from './inputProcessors/horizontalYAxisInputProcessor';
+/**
+ * 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/baseChart.js

@@ -0,0 +1,88 @@
+import { GraphContextFactory } from './graphContextFactory';
+import { RendererFactory } from './renderers/rendererFactory';
+import { ChartDimensionController, DEFAULT_LAYOUT } from './controllers/chartDimensionController';
+import { InteractorFactory } from './interactors/interactorFactory';
+/** 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/chartDimensionController.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/arcPathDrawer.js

@@ -0,0 +1,32 @@
+import { ArcPathHoverGenerator } from '../interactingEntryGenerator/arcPathHoverGenerator';
+import { BaseDrawer } from './baseDrawer';
+/** 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);
+    });
+  }
+}

package/dist/collection/helpers/chart/drawers/baseDrawer.js

@@ -0,0 +1,81 @@
+import { BackgroundColorsMappingLight } from '../../../constants/tokens/colorsMapping';
+import { Typography } from '../../../constants/tokens/typography';
+const CHART_DEFAULT_COLORS = [
+  'bg-accent1-primary',
+  'bg-accent2-primary',
+  'bg-accent3-primary',
+  'bg-accent4-primary',
+  'bg-accent5-primary',
+  'bg-accent6-primary',
+  'bg-accent7-primary',
+  'bg-accent8-primary',
+  'bg-accent9-primary',
+  'bg-accent10-primary',
+];
+const DEFAULT_FONT_FAMILY = 'font-family:"Inter", sans-serif;';
+const FONTSTYLEMAPPING = Object.keys(Typography).reduce((result, key) => {
+  result[key] =
+    DEFAULT_FONT_FAMILY +
+      Typography[key].filter((str) => str.indexOf('@apply') < 0).join(';');
+  return result;
+}, { 'v-text-secondary': `color:rgba(107, 116, 125, 1);` });
+/**
+ * base drawer that provides a common structure for drawing charts using a renderer and options.
+ */
+export class BaseDrawer {
+  /**
+   * This is a constructor function that takes in a renderer and options for a chart drawer.
+   *
+   * @param {BaseRenderer<SVGElement | HTMLCanvasElement>} renderer - `renderer` parameter is an instance of a `BaseRenderer` class that can render either SVG elements or a 2D canvas context
+   * @param {BaseInteractor<SVGElement | HTMLCanvasElement>} interactor - `renderer` parameter is an instance of a `BaseInteractor` class
+   * @param {ChartDrawerOptions<unknown>} options - where `T` is a generic type parameter. This parameter contains various options that can be used to customize the chart being drawn
+   */
+  constructor(renderer, interactor, options) {
+    this.renderer = renderer;
+    this.interactor = interactor;
+    this.options = options;
+  }
+  /**
+   * The function executes a draw method.
+   */
+  execute() {
+    const drawPiece = this.draw();
+    this.drawPiece = drawPiece;
+    this.addInteractionSupport(drawPiece);
+  }
+  /**
+   * returns a color token based on an index and an optional array of colors.
+   *
+   * @param {number} index - The index parameter is a number that represents the index of the color to be returned from the colors array.
+   * @param {BackgroundColorsTokenType[]} [colors] - `colors` is an optional parameter of type `BackgroundColorsTokenType[]`
+   * @returns {BackgroundColorsTokenType} color token
+   */
+  getColorByIndex(index, colors) {
+    colors = colors && colors.length ? colors : CHART_DEFAULT_COLORS;
+    index = index % colors.length;
+    return colors[index];
+  }
+  /**
+   * This function takes a token representing a background color and returns the corresponding color value from a predefined mapping.
+   *
+   * @param {BackgroundColorsTokenType} token - a string representing the token for a background color
+   * @returns {string} The string value returned is the color code
+   */
+  getColorFromToken(token) {
+    return BackgroundColorsMappingLight[token];
+  }
+  /**
+   * The function takes a token as input and returns the corresponding CSS style text from a predefined mapping.
+   *
+   * @param {string} token - The `token` parameter is a string that represents a specific style mapping
+   * in the `FONTSTYLEMAPPING` object. The function returns the CSS style text associated with the given `token`.
+   * @returns {string} a string that represents the CSS style associated with the input token. If the input token
+   * matches a key in the `FONTSTYLEMAPPING` object, the corresponding CSS style string is returned.
+   */
+  getStyleTextFromToken(token) {
+    return token
+      .split(' ')
+      .map((item) => FONTSTYLEMAPPING[item])
+      .join(';');
+  }
+}