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

package/dist/collection/helpers/chart/renderers/canvasRenderer.js

@@ -0,0 +1,198 @@
+import { BaseRenderer } from './baseRenderer';
+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/rendererFactory.js

@@ -0,0 +1,25 @@
+import { SVGRenderer } from './svgRenderer';
+import { CanvasRenderer } from './canvasRenderer';
+/** 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');
+    }
+  }
+}

package/dist/collection/helpers/chart/renderers/svgRenderer.js

@@ -0,0 +1,297 @@
+import { BaseRenderer } from './baseRenderer';
+import { select as d3Select, create as d3Create, line as d3Line, axisBottom, axisLeft, arc as d3Arc, } from 'd3';
+/**  This class is used to render charts using SVG elements. */
+export class SVGRenderer extends BaseRenderer {
+  /**
+   * The function sets the layout of a chart using D3 and SVG.
+   *
+   * @param {number} width - chart width
+   * @param {number} height - chart height
+   * @param {number} top - chart margin top
+   * @param {number} left - chart margin left
+   */
+  setLayout(width, height, top, left) {
+    d3Select(this.context)
+      .attr('width', width)
+      .attr('height', height)
+      .attr('viewBox', [0, 0, width, height])
+      .attr('style', 'display:block;max-width:100%;height:auto;')
+      .call((g) => {
+      g.append('g')
+        .attr('class', 'vega-chart-draw-g')
+        .attr('transform', `translate(${left},${top})`);
+    })
+      .call((g) => {
+      g.append('g')
+        .attr('class', 'vega-chart-legend-g')
+        .attr('transform', `translate(${left / 3},${top / 4})`);
+    });
+  }
+  /**
+   * This function draws a line on a chart using D3.js library.
+   *
+   * @param {ChartPosition} from - The starting position of the line to be drawn on the chart. It is an
+   * object with two properties: x and y, representing the x and y coordinates of the starting point respectively.
+   * @param {ChartPosition} to - The "to" parameter is a ChartPosition object that represents the ending
+   * point of the line to be drawn. It contains the x and y coordinates of the point on the chart where the line should end.
+   * @param {string} color - The color of the line
+   */
+  drawLine(from, to, color) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('line')
+      .attr('x1', from.x)
+      .attr('y1', from.y)
+      .attr('x2', to.x)
+      .attr('y2', to.y)
+      .attr('stroke', color);
+  }
+  /**
+   * This function draws an x-axis on a chart using D3 and a given scale and end point.
+   *
+   * @param {ChartExtend<unknown>} extend - which is an object that contains information about the chart's scale and end position on the y-axis. The `scale` property
+   * is a D3 scale object that maps data values to pixel positions on the x-axis
+   * @param {string} color - The stroke color of axis
+   * @param {string} textStyle - The text style of the axis
+   */
+  drawXAxis(extend, color, textStyle) {
+    const { scale, end, labelFormatter, direction, height } = extend;
+    let axis = axisBottom(scale);
+    if (labelFormatter) {
+      axis = axis.tickFormat(labelFormatter);
+    }
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('g')
+      .attr('class', 'vega-chart-x-axis')
+      .attr('transform', `translate(0, ${end.y})`)
+      .call(axis)
+      .call((g) => {
+      g.select('.domain').attr('stroke-width', 2).attr('stroke', color);
+    })
+      .call((g) => {
+      g.selectAll('line').attr('stroke', color);
+      g.selectAll('text').attr('style', textStyle);
+    })
+      .call((g) => {
+      if (direction === 'horizontal') {
+        g.selectAll('line').clone().attr('y2', `${-height}`);
+        g.select('.domain').attr('stroke-width', 0);
+      }
+    });
+  }
+  /**
+   * This function draws the Y-axis of a chart using D3 and a given scale.
+   *
+   * @param {ChartExtend<unknown>} extend -  It likely contains additional information or settings related to the chart being drawn, but without more context it's
+   * difficult to say exactly what it contains.
+   * @param {string} color - The stroke color of the axis
+   * @param {string} textStyle - The text style of the axis
+   */
+  drawYAxis(extend, color, textStyle) {
+    const { scale, labelFormatter, width, tickSize, direction } = extend;
+    let axis = axisLeft(scale).ticks(tickSize);
+    if (labelFormatter) {
+      axis = axis.tickFormat(labelFormatter);
+    }
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('g')
+      .attr('class', 'vega-chart-y-axis')
+      .call(axis)
+      .call((g) => {
+      g.select('.domain').attr('stroke-width', 0).attr('stroke', color);
+    })
+      .call((g) => {
+      g.selectAll('line').attr('stroke-width', 2).attr('stroke', color);
+      g.selectAll('text').attr('style', textStyle);
+    })
+      .call((g) => {
+      if (direction !== 'horizontal') {
+        g.selectAll('line').clone().attr('x2', `${width}`);
+      }
+      else {
+        g.select('.domain').attr('stroke-width', 2).attr('stroke', color);
+      }
+    });
+  }
+  /**
+   * This function draws a circle with a given center, radius, and color using D3.js.
+   *
+   * @param {ChartPosition} center - ChartPosition, which is an object containing the x and y coordinates of the center of the circle.
+   * @param {number} radius - The radius parameter is a number that specifies the radius of the circle to be drawn.
+   * @param {string} fillColor - The color parameter is a string that represents the color of the circle to be drawn
+   * @param {number} strokeWidth - the border width
+   * @param {string} strokeColor - the border color
+   */
+  drawCircle(center, radius, fillColor, strokeWidth, strokeColor) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append(() => this.getCircleNode(center, radius, fillColor, strokeWidth, strokeColor));
+  }
+  /**
+   * This function draws text on a chart at a specified position using D3.js.
+   *
+   * @param {ChartPosition} position - ChartPosition is an object that contains the x and y coordinates where the text will be positioned on the chart.
+   * @param {string} text - The text parameter is a string that represents the text that will be
+   * displayed on the chart. It is the content that will be added to the text element created by this function.
+   * @param {string} textStyle - The text style of the axis
+   * @param {TextAnchorType} textAnchor - text anchor
+   * @param {number} rotate - rotate of the text
+   */
+  drawText(position, text, textStyle, textAnchor, rotate) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append(() => this.getTextNode(position, text, textStyle, textAnchor, rotate));
+  }
+  /**
+   * This function draws a legend item with a colored circle and text at a specified position on a chart.
+   *
+   * @param {ChartPosition} position - The position parameter is an object that contains the x and y
+   * coordinates where the legend should be placed on the chart.
+   * @param {string} text - The text to be displayed in the legend.
+   * @param {string} color - Background color token type, which is a type of color
+   * used in the chart's background.
+   * @param {string} textStyle - The text style of the axis
+   * @returns {SVGGElement} svg g element
+   */
+  drawLegend(position, text, color, textStyle) {
+    return d3Select(this.context)
+      .select('.vega-chart-legend-g')
+      .append('g')
+      .attr('class', 'vega-chart-legend-item')
+      .attr('data-legend', text)
+      .attr('transform', `translate(${position.x},${position.y})`)
+      .call((g) => {
+      g.append(() => this.getCircleNode({
+        x: -4,
+        y: -4,
+      }, 4, color));
+      g.append(() => this.getTextNode({ x: 8, y: 0 }, text, textStyle));
+    })
+      .node();
+  }
+  /**
+   * This function draws a rectangle with a specified position, width, height, and optional color using D3.js.
+   *
+   * @param {ChartPosition} position - The position parameter is an object that contains the x and y coordinates of the top-left corner of the rectangle.
+   * @param {number} width - The width of the rectangle to be drawn.
+   * @param {number} height - The height parameter is a number that represents the height of the rectangle to be drawn.
+   * @param {string} [color] - The color parameter is an optional string that represents the color of the rectangle to be drawn. If it is not provided, the rectangle will have no fill color.
+   */
+  drawRect(position, width, height, color) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('rect')
+      .attr('fill', color)
+      .attr('x', position.x)
+      .attr('y', position.y)
+      .attr('width', width)
+      .attr('height', height);
+  }
+  /**
+   * This function draws a path on a chart using D3 and SVG based on the provided positions and color.
+   *
+   * @param {ChartPosition[]} positions - An array of ChartPosition objects that represent the
+   * coordinates of the points on the path to be drawn. Each ChartPosition object contains an x and y
+   * value that represent the position of the point on the chart.
+   * @param {string} color - line color
+   * represents a color value. It is likely used to specify the color of the path that will be drawn on the chart.
+   */
+  drawLinePath(positions, color) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('path')
+      .attr('class', 'vega-chart-line-path')
+      .datum(positions)
+      .attr('fill', 'none')
+      .attr('stroke', color)
+      .attr('stroke-width', 3)
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-linejoin', 'round')
+      .attr('d', d3Line()
+      .x((position) => position.x)
+      .y((position) => position.y));
+  }
+  /**
+   * This function draws an arc path using D3 library and applies color and radius based on input parameters.
+   *
+   * @param {ChartPosition} center - the 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 {SVGPathElement} svg arc path element.
+   */
+  drawArcPath(center, record, color, outerRadius, innerRadius) {
+    return d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('path')
+      .datum(record)
+      .attr('class', 'vega-chart-arc-path')
+      .attr('data-name', (item) => item.data.name)
+      .attr('transform', `translate(${center.x},${center.y})`)
+      .attr('fill', color)
+      .attr('stroke-width', 0)
+      .attr('d', d3Arc().innerRadius(innerRadius).outerRadius(outerRadius))
+      .attr('data-d', d3Arc()
+      .innerRadius(innerRadius)
+      .outerRadius(outerRadius + 10))
+      .node();
+  }
+  /**
+   * This function clears all elements within two specific classes in a D3 selection.
+   */
+  clear() {
+    d3Select(this.context).selectAll('.vega-chart-draw-g').remove();
+    d3Select(this.context).selectAll('.vega-chart-legend-g').remove();
+  }
+  /**
+   * This TypeScript function creates and returns an SVG text element with the given position and text.
+   *
+   * @param {ChartPosition} position - The position parameter is an object that contains the x and y
+   * coordinates where the text element will be placed on the SVG canvas.
+   * @param {string} text - The text parameter is a string that represents the text content that will be
+   * displayed in the SVGTextElement.
+   * @param {string} textStyle - The text style of the axis
+   * @param {TextAnchorType} textAnchor - text anchor
+   * @param {number} rotate - rotate of the text
+   * @returns {SVGTextElement} an SVGTextElement node.
+   */
+  getTextNode(position, text, textStyle, textAnchor = 'start', rotate = 0) {
+    const TextSelectionType = d3Create('svg:text')
+      .attr('style', textStyle)
+      .attr('x', position.x)
+      .attr('y', position.y)
+      .attr('text-anchor', textAnchor)
+      .attr('rotate', rotate)
+      .text(text);
+    return TextSelectionType.node();
+  }
+  /**
+   * This TypeScript function creates an SVG circle element with a specified center, radius, and color.
+   *
+   * @param {ChartPosition} center - The center position of the circle on the chart, specified as an
+   * object with `x` and `y` properties.
+   * @param {number} radius - The radius parameter is a number that represents the radius of the circle
+   * to be created.
+   * @param {string} fillColor - The color parameter
+   * and is used to determine the fill color of the circle. It is likely an enum or string type that maps
+   * to a specific color value.
+   * @param {number} strokeWidth - the border width
+   * @param {string} strokeColor - the border color
+   * @returns {SVGCircleElement} an SVG circle element.
+   */
+  getCircleNode(center, radius, fillColor, strokeWidth, strokeColor) {
+    const circleSelection = d3Create('svg:circle')
+      .attr('r', radius)
+      .attr('cx', center.x)
+      .attr('cy', center.y)
+      .attr('fill', fillColor)
+      .attr('stroke-width', strokeWidth || 0)
+      .attr('stroke', strokeColor);
+    return circleSelection.node();
+  }
+}

package/dist/collection/helpers/chart/test/controllers/chartDimensionController.test.js

@@ -0,0 +1,63 @@
+import { ChartDimensionController, DEFAULT_LAYOUT } from '../../controllers/chartDimensionController';
+const DEFAULT_TEST_LAYOUT = {
+  width: 200,
+  height: 100,
+  margin: DEFAULT_LAYOUT.margin,
+};
+describe('chartDimensionController', () => {
+  it('should set container width and height correct when the layout is defined', () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    const controller = new ChartDimensionController(container);
+    controller.setContainerWidthAndHeight(DEFAULT_TEST_LAYOUT);
+    expect(container.style.width).toEqual(DEFAULT_TEST_LAYOUT.width + 'px');
+    expect(container.style.height).toEqual(DEFAULT_TEST_LAYOUT.height + 'px');
+  });
+  it('should get container width and height correct when the container client width and client height are not null', () => {
+    const mockContainer = { clientWidth: 200, clientHeight: 100 };
+    const controller = new ChartDimensionController(mockContainer);
+    expect(controller.getContainerClientWidth(DEFAULT_TEST_LAYOUT)).toEqual(mockContainer.clientWidth);
+    expect(controller.getContainerClientHeight(DEFAULT_TEST_LAYOUT)).toEqual(mockContainer.clientHeight);
+  });
+  it('should get container width and height correct when the container client width and client height are zero but the layout is defined', () => {
+    const mockContainer = { clientWidth: 0, clientHeight: 0 };
+    const controller = new ChartDimensionController(mockContainer);
+    expect(controller.getContainerClientWidth(DEFAULT_TEST_LAYOUT)).toEqual(DEFAULT_TEST_LAYOUT.width);
+    expect(controller.getContainerClientHeight(DEFAULT_TEST_LAYOUT)).toEqual(DEFAULT_TEST_LAYOUT.height);
+  });
+  it('should get container width and height correct when the container client width and client height are zero and the layout is not defined', () => {
+    const mockContainer = {
+      clientWidth: 0,
+      clientHeight: 0,
+      style: { width: '300px', height: '200px' },
+    };
+    const controller = new ChartDimensionController(mockContainer);
+    expect(controller.getContainerClientWidth(null)).toEqual(300);
+    expect(controller.getContainerClientHeight(null)).toEqual(200);
+  });
+  it('should get container inner width and inner height correct when the layout is defined', () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    const controller = new ChartDimensionController(container);
+    expect(controller.getContainerInnerWidth(DEFAULT_TEST_LAYOUT)).toEqual(DEFAULT_TEST_LAYOUT.width -
+      DEFAULT_TEST_LAYOUT.margin.left -
+      DEFAULT_TEST_LAYOUT.margin.right);
+    expect(controller.getContainerInnerHeight(DEFAULT_TEST_LAYOUT)).toEqual(DEFAULT_TEST_LAYOUT.height -
+      DEFAULT_TEST_LAYOUT.margin.top -
+      DEFAULT_TEST_LAYOUT.margin.bottom);
+  });
+  it('should get container inner width and inner height correct when the layout margin is null', () => {
+    const container = document.body.appendChild(document.createElement('div'));
+    const controller = new ChartDimensionController(container);
+    expect(controller.getContainerInnerWidth(Object.assign(Object.assign({}, DEFAULT_TEST_LAYOUT), { margin: null }))).toEqual(DEFAULT_TEST_LAYOUT.width -
+      DEFAULT_TEST_LAYOUT.margin.left -
+      DEFAULT_TEST_LAYOUT.margin.right);
+    expect(controller.getContainerInnerHeight(Object.assign(Object.assign({}, DEFAULT_TEST_LAYOUT), { margin: null }))).toEqual(DEFAULT_TEST_LAYOUT.height -
+      DEFAULT_TEST_LAYOUT.margin.top -
+      DEFAULT_TEST_LAYOUT.margin.bottom);
+  });
+  it('should get container inner width and inner height correct when the layout not defined', () => {
+    const mockContainer = { clientWidth: 200, clientHeight: 100 };
+    const controller = new ChartDimensionController(mockContainer);
+    expect(controller.getContainerInnerWidth(null)).toEqual(140);
+    expect(controller.getContainerInnerHeight(null)).toEqual(40);
+  });
+});

package/dist/collection/helpers/chart/test/drawers/arcPathDrawer.test.js

@@ -0,0 +1,55 @@
+import { SVGRenderer } from '../../renderers/svgRenderer';
+import { ArcPathDrawer } from '../../drawers/arcPathDrawer';
+import { pie as d3Pie } from 'd3';
+import { SVGInteractor } from '../../interactors/svgInteractor';
+describe('path drawer', () => {
+  it('should call renderer function when run the execute function', () => {
+    const mockContext = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const mockRenderer = new SVGRenderer(mockContext);
+    const mockInteractor = new SVGInteractor(mockContext);
+    const mockFn = jest.fn();
+    mockRenderer.drawArcPath = mockFn;
+    const pathOptions = {
+      dataSource: [{ name: '10', value: 20 }],
+      colors: ['bg-accent1-primary'],
+      type: 'Donut',
+      donutRadius: 2,
+    };
+    const arcRenderData = d3Pie().value((d) => d.value)(pathOptions.dataSource);
+    const drawer = new ArcPathDrawer(mockRenderer, mockInteractor, {
+      renderOptions: {
+        data: arcRenderData,
+        colors: pathOptions.colors,
+        donutRadius: 0.9 * 100,
+        center: { x: 0, y: 0 },
+        outerRadius: 100,
+      },
+    });
+    drawer.execute();
+    expect(mockFn).toBeCalledWith({ x: 0, y: 0 }, arcRenderData[0], drawer.getColorFromToken(pathOptions.colors[0]), 100, 90);
+  });
+  it('should render when inner radius set correct value', () => {
+    const mockContext = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const mockRenderer = new SVGRenderer(mockContext);
+    const mockInteractor = new SVGInteractor(mockContext);
+    const mockFn = jest.fn();
+    mockRenderer.drawArcPath = mockFn;
+    const pathOptions = {
+      dataSource: [{ name: '10', value: 20 }],
+      colors: ['bg-accent1-primary'],
+      donutRadius: 0.5,
+    };
+    const arcRenderData = d3Pie().value((d) => d.value)(pathOptions.dataSource);
+    const drawer = new ArcPathDrawer(mockRenderer, mockInteractor, {
+      renderOptions: {
+        data: arcRenderData,
+        colors: pathOptions.colors,
+        donutRadius: pathOptions.donutRadius * 100,
+        center: { x: 0, y: 0 },
+        outerRadius: 100,
+      },
+    });
+    drawer.execute();
+    expect(mockFn).toBeCalledWith({ x: 0, y: 0 }, arcRenderData[0], drawer.getColorFromToken(pathOptions.colors[0]), 100, 50);
+  });
+});