@globalpayments/vega 2.19.0 → 2.20.0

package/dist/collection/helpers/chart/input-processors/layout-input-processor.js

@@ -0,0 +1,27 @@
+import { ChartDimensionController, DEFAULT_LAYOUT, } from '../controllers/chart-dimension-controller';
+/** The LayoutInputProcessor class processes input chart options to calculate layout dimensions and margins. */
+export class LayoutInputProcessor {
+  /**
+   * This function processes chart options and returns layout dimensions and margins.
+   *
+   * @param {ChartOptions<unknown>} input - A ChartOptions object containing the container and layout properties.
+   * @returns {LayoutProcessResultType} An object with properties `width`, `height`, `innerWidth`, `innerHeight`, `top`, `right`,
+   * `bottom`, and `left`.
+   */
+  process(input) {
+    const { container, layout } = input;
+    const { top, right, bottom, left } = ((layout === null || layout === void 0 ? void 0 : layout.margin) ||
+      DEFAULT_LAYOUT.margin);
+    const dimensionController = new ChartDimensionController(container);
+    return {
+      width: dimensionController.getContainerClientWidth(layout),
+      height: dimensionController.getContainerClientHeight(layout),
+      innerWidth: dimensionController.getContainerInnerWidth(layout),
+      innerHeight: dimensionController.getContainerInnerHeight(layout),
+      top,
+      right,
+      bottom,
+      left,
+    };
+  }
+}

package/dist/collection/helpers/chart/interacting-entry-generator/arc-path-hover-generator.js

@@ -0,0 +1,69 @@
+import { InteractingEntryGenerator } from './interacting-entry-generator';
+import { select as d3Select } from 'd3';
+/** The `ArcPathHoverGenerator` class is a TypeScript function that handles mouseover events on SVG elements with a specific class and modifies their appearance. */
+export class ArcPathHoverGenerator extends InteractingEntryGenerator {
+  constructor() {
+    super(...arguments);
+    this.eventType = 'mouseover';
+  }
+  /**
+   * The function "createShouldHandle" returns a function that takes an event as a parameter and returns a boolean value.
+   *
+   * @returns {InteractingEntry['shouldHandle']} A function that takes an event as an argument and returns a boolean value.
+   */
+  createShouldHandle() {
+    return this.shouldHandle;
+  }
+  /**
+   * The function "createHandle" returns the handle property of an InteractingEntry object.
+   *
+   * @returns {InteractingEntry['handle']} The `handle` property of the `InteractingEntry` object is being returned.
+   */
+  createHandle() {
+    return this.handle;
+  }
+  /**
+   * The function checks if the target element of a mouse event has a specific class.
+   *
+   * @param {MouseEvent} event - MouseEvent is a type of event that is triggered when a mouse action
+   * occurs, such as a click or hover. It contains information about the event, such as the target
+   * element and the position of the mouse. In this code snippet, the function `shouldHandle` takes in a
+   * MouseEvent as a parameter.
+   * @returns {boolean} The function `shouldHandle` is returning a boolean value. It checks if the `event.target`
+   * is an HTML element with the class name `vega-chart-arc-path`. If it is, then it returns `true`,
+   * otherwise it returns `false`.
+   */
+  shouldHandle(event) {
+    return event.target.classList.contains('vega-chart-arc-path');
+  }
+  /**
+   * This function handles mouse events on a D3 selection of SVG elements, specifically for hovering over and highlighting a specific path element.
+   *
+   * @param {MouseEvent} event - The event parameter is of type MouseEvent, which is an object that
+   * contains information about a mouse event, such as the type of event (click, hover, etc.), the
+   * target element that triggered the event, and the position of the mouse cursor.
+   */
+  handle(event) {
+    const svgSelection = d3Select(event.currentTarget);
+    const targetPathNode = event.target;
+    const name = targetPathNode.dataset.name;
+    svgSelection.selectAll('.vega-chart-arc-path').each(function () {
+      const pathNode = this;
+      if (pathNode !== targetPathNode && pathNode.classList.contains('hover')) {
+        pathNode.classList.remove('hover');
+        const oldPath = pathNode.getAttribute('d');
+        const newPath = pathNode.dataset.d;
+        pathNode.dataset.d = oldPath;
+        d3Select(this).transition(100).duration(100).attr('d', newPath);
+      }
+      else if (!targetPathNode.classList.contains('hover')) {
+        targetPathNode.classList.add('hover');
+        const oldPath = targetPathNode.getAttribute('d');
+        const newPath = targetPathNode.dataset.d;
+        targetPathNode.dataset.d = oldPath;
+        d3Select(targetPathNode).transition(100).duration(100).attr('d', newPath);
+        svgSelection.select('.vega-chart-draw-g text').text(name);
+      }
+    });
+  }
+}

package/dist/collection/helpers/chart/interacting-entry-generator/pie-legend-hover-generator.js

@@ -0,0 +1,76 @@
+import { InteractingEntryGenerator } from './interacting-entry-generator';
+import { select as d3Select } from 'd3';
+/** The PieLegendHoverGenerator class generates an InteractingEntry object that handles mouseover events on a legend of a D3 pie chart and triggers a mouseover event on the corresponding path element. */
+export class PieLegendHoverGenerator extends InteractingEntryGenerator {
+  constructor() {
+    super(...arguments);
+    this.eventType = 'mouseover';
+  }
+  /**
+   * The function "createShouldHandle" returns a function that takes an event as a parameter and returns a boolean value.
+   *
+   * @returns {InteractingEntry['shouldHandle']} A function that takes an event as an argument and returns a boolean value.
+   */
+  createShouldHandle() {
+    return this.shouldHandle;
+  }
+  /**
+   * The function "createHandle" returns the handle property of an InteractingEntry object.
+   *
+   * @param {LegendInputType} options the legend render options
+   * @returns {InteractingEntry['handle']} The `handle` property of the `InteractingEntry` object is being returned.
+   */
+  createHandle(options) {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    return (event) => {
+      this.handle(event, options);
+    };
+  }
+  /**
+   * This function checks if a mouse event should be handled based on whether the target or its parent element has a specific class.
+   *
+   * @param {MouseEvent} event - MouseEvent is a type of event that is triggered by a mouse action, such
+   * as clicking, hovering, or scrolling. It contains information about the event, such as the target
+   * element and the position of the mouse.
+   * @returns {boolean} A boolean value is being returned. The method `shouldHandle` checks if the target element
+   * or its parent element has a class of `vega-chart-legend-item` and returns `true` if it does, and
+   * `false` otherwise.
+   */
+  shouldHandle(event) {
+    var _a;
+    const target = event.target;
+    const currentTarget = event.currentTarget;
+    const container = currentTarget.parentElement && currentTarget.parentElement.nodeType !== 11
+      ? currentTarget.parentElement
+      : currentTarget.parentNode['host'];
+    return (container.tagName === 'VEGA-PIE-CHART' &&
+      (target.classList.contains('vega-chart-legend-item') ||
+        !!((_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('vega-chart-legend-item'))));
+  }
+  /**
+   * The function handles a mouse event on a legend and triggers a mouseover event on the corresponding path element in a D3 chart.
+   *
+   * @param {MouseEvent} event - The event parameter is a MouseEvent, which represents a user action
+   * (such as a click or hover) on a specific element in the DOM.
+   * @param {LegendInputType} options - LegendInputType is a custom type that likely contains
+   * information about the data being displayed in the chart, such as the names of the categories or
+   * series being plotted. It may also include information about the chart's appearance or behavior,
+   * such as the colors or labels used in the legend. Without more information about
+   */
+  handle(event, options) {
+    var _a;
+    const svgSelection = d3Select(event.currentTarget);
+    const target = event.target;
+    const targetTextNode = target.tagName === 'text'
+      ? target
+      : target.tagName === 'circle'
+        ? target.nextElementSibling
+        : target.querySelector('text');
+    const name = targetTextNode ? targetTextNode.textContent : '';
+    const index = name ? options.data.indexOf(name) : 0;
+    const paths = svgSelection
+      .selectAll(`path.vega-chart-arc-path`)
+      .nodes();
+    (_a = paths[index]) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+  }
+}

package/dist/collection/helpers/chart/interactors/canvas-interactor.js

@@ -0,0 +1,6 @@
+import { BaseInteractor } from './base-interactor';
+/**
+ * The CanvasInteractor class extends the BaseInteractor class and provides empty methods for handling mouse move, click, and hover events on a HTML canvas element.
+ */
+export class CanvasInteractor extends BaseInteractor {
+}

package/dist/collection/helpers/chart/interactors/interactor-factory.js

@@ -0,0 +1,26 @@
+import { CanvasInteractor } from './canvas-interactor';
+import { SVGInteractor } from './svg-interactor';
+/** The InteractorFactory class provides a static method to create and return an appropriate interactor based on the type of context provided. */
+export class InteractorFactory {
+  /**
+   * This function returns a BaseInteractor object based on the type of context passed in (SVGElement or HTMLCanvasElement).
+   *
+   * @param {SVGElement | HTMLCanvasElement} context - The `context` parameter is either an SVGElement
+   * or an HTMLCanvasElement. It is used to determine which type of interactor to create and return. If
+   * the context is an SVGElement, an instance of SVGInteractor is returned. If the context is an
+   * HTMLCanvasElement, an instance of
+   * @returns {BaseInteractor<SVGElement | HTMLCanvasElement>} A `BaseInteractor` object that is either an instance of `SVGInteractor` or
+   * `CanvasInteractor`, depending on the type of the `context` parameter passed to the `get` method.
+   */
+  static get(context) {
+    if (context instanceof SVGElement) {
+      return new SVGInteractor(context);
+    }
+    else if (context instanceof HTMLCanvasElement) {
+      return new CanvasInteractor(context);
+    }
+    else {
+      throw new Error('Invalid context');
+    }
+  }
+}

package/dist/collection/helpers/chart/interactors/svg-interactor.js

@@ -0,0 +1,29 @@
+import { BaseInteractor } from './base-interactor';
+/**
+ *  The SVGInteractor class extends the BaseInteractor class and provides methods for handling mouse events on SVG elements.
+ */
+export class SVGInteractor extends BaseInteractor {
+  /**
+   * This is a constructor function that adds event listeners for click and mouseover events to an SVG element.
+   *
+   * @param {SVGElement} context - The context parameter is an SVGElement, which is the element that the
+   * constructor is being called on. It is used to add event listeners to the element for mouseover and
+   * click events.
+   */
+  constructor(context) {
+    super(context);
+    this.addContextListener();
+  }
+  /**
+   * This function adds event listeners for click and mouseover events to the context element and calls
+   * a registry function with the corresponding event type and event object.
+   */
+  addContextListener() {
+    this.context.addEventListener('click', (event) => {
+      this.callRegistry('click', event);
+    });
+    this.context.addEventListener('mouseover', (event) => {
+      this.callRegistry('mouseover', event);
+    });
+  }
+}

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

@@ -0,0 +1,65 @@
+import { BaseChart } from './base-chart';
+import { XAxisDrawer } from './drawers/x-axis-drawer';
+import { YAxisDrawer } from './drawers/y-axis-drawer';
+import { PathDrawer } from './drawers/path-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 { LinePathInputProcessor } from './input-processors/line-path-input-processor';
+import { FormatTimePositionsInputProcessor } from './input-processors/format-time-positions-input-processor';
+import { SortPositionsInputProcessor } from './input-processors/sort-positions-input-processor';
+import { XAxisLabelFormatterInputProcessor } from './input-processors/x-axis-label-formatter-input-processor';
+/**
+ * The LineChart class is a TypeScript implementation of a line chart that extends the BaseChart class
+ * and includes methods for creating a drawer chain
+ */
+export class LineChart extends BaseChart {
+  constructor() {
+    super(...arguments);
+    this.layoutInputProcessor = new LayoutInputProcessor();
+    this.lineDataSourceInputProcessorChain = new ProcessorChain([new FormatTimePositionsInputProcessor(), new SortPositionsInputProcessor()]);
+    this.xAxisInputProcessorChain = new ProcessorChain([
+      this.layoutInputProcessor,
+      new XAxisInputProcessor(),
+      new XAxisLabelFormatterInputProcessor(),
+    ]);
+    this.yAxisInputProcessorChain = new ProcessorChain([this.layoutInputProcessor, new YAxisInputProcessor()]);
+    this.legendInputProcessorChain = new ProcessorChain([
+      this.layoutInputProcessor,
+      new LegendInputProcessor(),
+    ]);
+    this.linePathInputProcessor = new LinePathInputProcessor();
+  }
+  /**
+   * 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 lineRenderOptionsOutput = this.lineDataSourceInputProcessorChain.process(this.options);
+    const xAxisOutput = this.xAxisInputProcessorChain.process(lineRenderOptionsOutput);
+    const yAxisOutput = this.yAxisInputProcessorChain.process(lineRenderOptionsOutput);
+    return [
+      new XAxisDrawer(renderer, interactor, {
+        renderOptions: xAxisOutput,
+      }),
+      new YAxisDrawer(renderer, interactor, {
+        renderOptions: yAxisOutput,
+      }),
+      new LegendDrawer(renderer, interactor, {
+        renderOptions: this.legendInputProcessorChain.process(this.options),
+      }),
+      new PathDrawer(renderer, interactor, {
+        renderOptions: this.linePathInputProcessor.process(lineRenderOptionsOutput, {
+          xScale: xAxisOutput.scale,
+          yScale: yAxisOutput.scale,
+        }),
+      }),
+    ];
+  }
+}

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

@@ -0,0 +1,56 @@
+import { BaseChart } from './base-chart';
+import { ArcPathDrawer } from './drawers/arc-path-drawer';
+import { LegendDrawer } from './drawers/legend-drawer';
+import { TextDrawer } from './drawers/text-drawer';
+import { LayoutInputProcessor } from './input-processors/layout-input-processor';
+import { ProcessorChain } from './input-processors/processor-chain';
+import { PieChartArchPathInputProcessor } from './input-processors/pie-chart-arc-path-input-processor';
+import { PieChartTextInputProcessor } from './input-processors/pie-chart-text-input-processor';
+import { LegendInputProcessor } from './input-processors/legend-input-processor';
+import { PieChartFilterInputProcessor } from './input-processors/pie-chart-filter-input-processor';
+import { PieChartRadiusInputProcessor } from './input-processors/pie-chart-radius-input-processor';
+/**
+ * The PieChart class is a TypeScript implementation of a pie chart that extends the BaseChart class
+ * and includes methods for creating a drawer chain
+ */
+export class PieChart extends BaseChart {
+  constructor() {
+    super(...arguments);
+    this.layoutInputProcessor = new LayoutInputProcessor();
+    this.filterInputProcessor = new PieChartFilterInputProcessor();
+    this.radiusInputProcessor = new PieChartRadiusInputProcessor();
+    this.arcPathInputProcessorChain = new ProcessorChain([
+      this.filterInputProcessor,
+      this.layoutInputProcessor,
+      this.radiusInputProcessor,
+      new PieChartArchPathInputProcessor(),
+    ]);
+    this.textInputProcessor = new PieChartTextInputProcessor();
+    this.legendInputProcessChain = new ProcessorChain([
+      this.layoutInputProcessor,
+      new LegendInputProcessor(),
+    ]);
+  }
+  /**
+   * This function creates an array of BaseDrawer objects for rendering a chart with 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 arcPathProcessorChainOutput = this.arcPathInputProcessorChain.process(this.options);
+    const legendInputProcessChainOutput = this.legendInputProcessChain.process(this.options);
+    return [
+      new ArcPathDrawer(renderer, interactor, {
+        renderOptions: arcPathProcessorChainOutput,
+      }),
+      new TextDrawer(renderer, interactor, {
+        renderOptions: this.textInputProcessor.process(arcPathProcessorChainOutput),
+      }),
+      new LegendDrawer(renderer, interactor, {
+        renderOptions: legendInputProcessChainOutput,
+      }),
+    ];
+  }
+}

package/dist/collection/helpers/chart/renderers/canvas-renderer.js

@@ -0,0 +1,198 @@
+import { BaseRenderer } from './base-renderer';
+import { line as d3Line, create as d3Create } from 'd3';
+/**
+ * The CanvasRenderer class is a TypeScript class that extends the BaseRenderer class and provides
+ * methods for drawing various shapes and elements on a canvas.
+ */
+export class CanvasRenderer extends BaseRenderer {
+  /**
+   * The function sets the layout of a chart.
+   *
+   * @param {number} width - chart width
+   * @param {number} height - chart height
+   */
+  setLayout(width, height) {
+    this.context.width = width;
+    this.context.height = height;
+    this.context.style.display = 'block';
+    this.initCanvasContext2d();
+  }
+  /**
+   * The function `drawLine` takes two `ChartPosition` parameters and draws a line between them.
+   *
+   * @param {ChartPosition} from - The starting position of the line on the chart. It is of type ChartPosition.
+   * @param {ChartPosition} to - The "to" parameter in the "drawLine" function is a ChartPosition object
+   * that represents the end point of the line to be drawn. It contains information about the x and y
+   * coordinates of the point on the chart where the line should end.
+   */
+  drawLine(from, to) {
+    const context2d = this.getContext2d();
+    context2d.beginPath();
+    context2d.moveTo(from.x, from.y);
+    context2d.lineTo(to.x, to.y);
+    context2d.closePath();
+  }
+  /**
+   * This function draws the X-axis on a chart and takes in a parameter of type ChartExtend.
+   *
+   * @param {ChartExtend<unknown>} extend - The parameter "extend" is of type "ChartExtend" which is a generic type that can
+   * take any data type as an argument. It is likely used to extend or modify the properties of the chart's X-axis
+   */
+  drawXAxis(extend) {
+    this.drawLine(extend.start, extend.end);
+  }
+  /**
+   * This function draws the Y-axis on a chart.
+   *
+   * @param {ChartExtend<unknown>} extend - The parameter "extend" is of type ChartExtend, which is a generic type that
+   * represents the range of values for a chart axis. It contains information such as the minimum and
+   * maximum values for the axis
+   */
+  drawYAxis(extend) {
+    this.drawLine(extend.start, extend.end);
+  }
+  /**
+   * The function `drawCircle` takes in a center position, radius, and color and draws a circle.
+   *
+   * @param {ChartPosition} center - The center of the circle, represented by a ChartPosition object
+   * that contains the x and y coordinates of the center point.
+   * @param {number} radius - The _radius parameter is a number that represents the radius of the
+   * circle to be drawn. The radius is the distance from the center of the circle to any point on its circumference.
+   * @param {string} fillColor - The _color,
+   * which is a type that represents a color value that can be used as a background color for a chart element
+   * @param {number} strokeWidth - the border width
+   * @param {string} strokeColor - the border color
+   */
+  drawCircle(center, radius, fillColor, strokeWidth, strokeColor) {
+    const context2d = this.getContext2d();
+    if (strokeWidth && strokeColor) {
+      context2d.fillStyle = strokeColor;
+      context2d.beginPath();
+      context2d.arc(center.x, center.y, radius, 0, Math.PI * 2);
+      context2d.fill();
+    }
+    context2d.fillStyle = fillColor;
+    context2d.beginPath();
+    context2d.arc(center.x, center.y, radius - (strokeWidth || 0), 0, Math.PI * 2);
+    context2d.fill();
+  }
+  /**
+   * The function draws a legend on a chart with a circle and text at a specified position and color.
+   *
+   * @param {ChartPosition} position - ChartPosition is a type that represents the position of an
+   * element on a chart. It could be an object with properties like x and y coordinates or a string that
+   * represents a predefined position.
+   * @param {string} text - The text parameter is a string that represents the label or name of the
+   * legend that will be displayed on the chart.
+   * @param {string} color - color string
+   * represents a color for the legend. It could be a string or a number that corresponds to a specific
+   * color value.
+   * @returns {HTMLCanvasElement} chart canvas element
+   */
+  drawLegend(position, text, color) {
+    this.drawCircle(position, 4, color);
+    this.drawText(position, text);
+    return this.context;
+  }
+  /**
+   * The function `drawText` takes a position and a string of text as parameters and does not return anything.
+   *
+   * @param {ChartPosition} position - ChartPosition is a data type that represents the position of the
+   * text on a chart. It could be an object with properties such as x and y coordinates, or it could be
+   * a string that represents a pre-defined position on the chart (e.g. "top-left", "bottom-right",
+   * etc.).
+   * @param {string} text - The text parameter is a string that represents the text that needs to be drawn on the chart.
+   */
+  drawText(position, text) {
+    this.getContext2d().fillText(text, position.x, position.y);
+  }
+  /**
+   * The function `drawRect` takes in a position, width, height, and optional color parameter to draw a rectangle.
+   *
+   * @param {ChartPosition} position - The position parameter is of type ChartPosition and represents
+   * the position of the rectangle on the chart. It could be an object with x and y properties
+   * representing the coordinates of the top-left corner of the rectangle.
+   * @param {number} width - The width parameter is a number that represents the width of the rectangle
+   * to be drawn. It determines how wide the rectangle will be on the chart.
+   * @param {number} height - The `height` parameter in the `drawRect` function specifies the height of
+   * the rectangle to be drawn. It is a required parameter and must be a number value.
+   * @param {string} [color] - The color parameter is an optional parameter that
+   * specifies the background color of the rectangle. It is of type string, which is
+   * a custom type that represents a color token
+   */
+  drawRect(position, width, height, color) {
+    const context2d = this.getContext2d();
+    context2d.fillStyle = color;
+    context2d.fillRect(position.x, position.y, width, height);
+  }
+  /**
+   * The function `drawLinePath` takes in an array of `ChartPosition` objects and a `string` color and draws a path.
+   *
+   * @param {ChartPosition[]} positions - An array of ChartPosition objects that represent the
+   * coordinates of points on a chart. Each ChartPosition object has an x and y property that represent
+   * the horizontal and vertical position of the point on the chart.
+   * @param {string} color - The `color` parameter is of type
+   * `string` and represents the color of the path to be drawn. This parameter is
+   * used to set the background color of the chart.
+   */
+  drawLinePath(positions, color) {
+    const pathNode = d3Create('svg:path')
+      .datum(positions)
+      .attr('d', d3Line()
+      .x((position) => position.x)
+      .y((position) => position.y))
+      .node();
+    const path = new Path2D(pathNode.getAttribute('d'));
+    const context2d = this.getContext2d();
+    context2d.lineWidth = 3;
+    context2d.strokeStyle = color;
+    context2d.stroke(path);
+  }
+  /**
+   * This function draws an arc path using D3 library and applies color and radius based on input parameters.
+   *
+   * @param {ChartPosition} center - arc center position
+   * @param {ArcPathItem} record - an object containing data for the arc path to be drawn
+   * @param {string} color - The color parameter
+   * and is used to set the fill color of the arc path.
+   * @param {number} outerRadius - The outer radius parameter is a number that determines the outer
+   * radius of the arc path being drawn.
+   * @param {number} innerRadius - The inner radius of the arc path, specified as a number.
+   * @returns {HTMLCanvasElement} chart canvas element.
+   */
+  drawArcPath(center, record, color, outerRadius, innerRadius) {
+    const context2d = this.getContext2d();
+    context2d.beginPath();
+    context2d.moveTo(center.x, center.y);
+    context2d.arc(center.x, center.y, outerRadius, record.startAngle, record.endAngle);
+    context2d.fillStyle = color;
+    context2d.fill();
+    if (innerRadius) {
+      this.drawCircle(center, innerRadius, '#F0F3F7');
+    }
+    return this.context;
+  }
+  /**
+   * The function "clear"
+   */
+  clear() {
+    this.getContext2d().clearRect(0, 0, this.context.width, this.context.height);
+  }
+  /**
+   * This function initializes a 2D canvas context.
+   */
+  initCanvasContext2d() {
+    this.canvasContext2d = this.context.getContext('2d');
+  }
+  /**
+   * This function returns the canvas 2D rendering context and initializes it if it doesn't exist.
+   *
+   * @returns {CanvasRenderingContext2D} The function `getContext2d()` returns the `CanvasRenderingContext2D` object.
+   */
+  getContext2d() {
+    if (!this.canvasContext2d) {
+      this.initCanvasContext2d();
+    }
+    return this.canvasContext2d;
+  }
+}

package/dist/collection/helpers/chart/renderers/renderer-factory.js

@@ -0,0 +1,25 @@
+import { SVGRenderer } from './svg-renderer';
+import { CanvasRenderer } from './canvas-renderer';
+/** The RendererFactory class provides a static method to create a renderer based on the type of context provided. */
+export class RendererFactory {
+  /**
+   * This function returns a renderer based on the type of context provided (SVG or Canvas).
+   *
+   * @param {SVGElement | HTMLCanvasElement} context - The `context` parameter is either an
+   * SVGElement or a HTMLCanvasElement. It is used to determine which renderer to instantiate and
+   * return
+   * @returns {BaseRenderer<SVGElement | HTMLCanvasElement> } based on the type of the `context` parameter. If
+   * the `context` is an instance of `SVGElement`, an `SVGRenderer` object is returned
+   */
+  static get(context) {
+    if (context instanceof SVGElement) {
+      return new SVGRenderer(context);
+    }
+    else if (context instanceof HTMLCanvasElement) {
+      return new CanvasRenderer(context);
+    }
+    else {
+      throw new Error('Invalid context');
+    }
+  }
+}