@heartlandone/vega-sandbox-pr-1525-a1131d0b9c266e13a8d224ec5db9f11524d2d02c 2.28.0

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

@@ -0,0 +1,297 @@
+import { BaseRenderer } from './base-renderer';
+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/chart-dimension-controller.test.js

@@ -0,0 +1,63 @@
+import { ChartDimensionController, DEFAULT_LAYOUT } from '../../controllers/chart-dimension-controller';
+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/arc-path-drawer.test.js

@@ -0,0 +1,55 @@
+import { SVGRenderer } from '../../renderers/svg-renderer';
+import { ArcPathDrawer } from '../../drawers/arc-path-drawer';
+import { pie as d3Pie } from 'd3';
+import { SVGInteractor } from '../../interactors/svg-interactor';
+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);
+  });
+});

package/dist/collection/helpers/chart/test/drawers/legend-drawer.test.js

@@ -0,0 +1,94 @@
+import { LegendDrawer } from '../../drawers/legend-drawer';
+import { SVGRenderer } from '../../renderers/svg-renderer';
+import { SVGInteractor } from '../../interactors/svg-interactor';
+describe('legend 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.drawLegend = mockFn;
+    const legendOptions = {
+      position: { x: 0, y: 0 },
+      data: ['Test'],
+      colors: ['bg-accent1-primary'],
+      width: 200,
+      height: 150,
+    };
+    const legendDrawer = new LegendDrawer(mockRenderer, mockInteractor, {
+      renderOptions: legendOptions,
+    });
+    legendDrawer.execute();
+    expect(mockFn).toBeCalledWith(legendOptions.position, legendOptions.data[0], '#73E6DC', 'font-family:"Inter", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px');
+  });
+  it('should not call renderer function when run the execute function and the legend is empty', () => {
+    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.drawLegend = mockFn;
+    const legendOptions = {
+      position: { x: 0, y: 0 },
+      data: undefined,
+      colors: ['bg-accent1-primary'],
+      width: 200,
+      height: 150,
+    };
+    const legendDrawer = new LegendDrawer(mockRenderer, mockInteractor, {
+      renderOptions: legendOptions,
+    });
+    legendDrawer.execute();
+    expect(mockFn).toBeCalledTimes(0);
+  });
+  it('should return the correct value when call the getChartLegendOptions function', () => {
+    const expectedOptions = {
+      position: {
+        x: 20,
+        y: 20,
+      },
+      legends: [{ field: 'Test', color: '#73E6DC', icon: '' }],
+    };
+    const mockContext = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const mockRenderer = new SVGRenderer(mockContext);
+    const mockInteractor = new SVGInteractor(mockContext);
+    const legendDrawer = new LegendDrawer(mockRenderer, mockInteractor, {
+      renderOptions: { data: [], width: 200, height: 150 },
+    });
+    const resultOptions = legendDrawer['getChartLegendOptions'](['Test'], null, {
+      x: 20,
+      y: 20,
+    });
+    expect(resultOptions).toEqual(expectedOptions);
+  });
+  it('should return expect when call the getChartLegendOptions function and position is null', () => {
+    const expectedOptions = {
+      position: {
+        x: 10,
+        y: 0,
+      },
+      legends: [{ field: 'Test', color: '#73E6DC', icon: '' }],
+    };
+    const mockContext = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const mockInteractor = new SVGInteractor(mockContext);
+    const mockRenderer = new SVGRenderer(mockContext);
+    const legendDrawer = new LegendDrawer(mockRenderer, mockInteractor, {
+      renderOptions: { data: [], width: 200, height: 150 },
+    });
+    const resultOptions = legendDrawer['getChartLegendOptions'](['Test'], null);
+    expect(resultOptions).toEqual(expectedOptions);
+  });
+  it('should return the default position when call the getLegendPosition', () => {
+    const expectPosition = {
+      x: 0,
+      y: 0,
+    };
+    const mockContext = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const mockRenderer = new SVGRenderer(mockContext);
+    const mockInteractor = new SVGInteractor(mockContext);
+    const legendDrawer = new LegendDrawer(mockRenderer, mockInteractor, {
+      renderOptions: { data: [], width: 200, height: 150 },
+    });
+    const position = legendDrawer['getLegendPosition']({ x: 0, y: 0 }, 0, 10);
+    expect(position).toEqual(expectPosition);
+  });
+});

package/dist/collection/helpers/chart/test/drawers/line-drawer.test.js

@@ -0,0 +1,25 @@
+import { LineDrawer } from '../../drawers/line-drawer';
+import { SVGRenderer } from '../../renderers/svg-renderer';
+import { SVGInteractor } from '../../interactors/svg-interactor';
+describe('line 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.drawLine = mockFn;
+    const from = {
+      x: 0,
+      y: 0,
+    };
+    const to = {
+      x: 100,
+      y: 100,
+    };
+    const lineDrawer = new LineDrawer(mockRenderer, mockInteractor, {
+      renderOptions: { from, to },
+    });
+    lineDrawer.execute();
+    expect(mockFn).toBeCalledWith(from, to, '#F0F3F7');
+  });
+});

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

@@ -0,0 +1,21 @@
+import { PathDrawer } from '../../drawers/path-drawer';
+import { SVGRenderer } from '../../renderers/svg-renderer';
+import { SVGInteractor } from '../../interactors/svg-interactor';
+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.drawLinePath = mockFn;
+    const pathOptions = {
+      positions: [{ x: 10, y: 20 }],
+      colors: ['bg-accent1-primary'],
+    };
+    const lineDrawer = new PathDrawer(mockRenderer, mockInteractor, {
+      renderOptions: pathOptions,
+    });
+    lineDrawer.execute();
+    expect(mockFn).toBeCalledWith(pathOptions.positions, '#73E6DC');
+  });
+});

package/dist/collection/helpers/chart/test/drawers/rect-drawer.test.js

@@ -0,0 +1,78 @@
+import { RectDrawer } from '../../drawers/rect-drawer';
+import { SVGRenderer } from '../../renderers/svg-renderer';
+import { SVGInteractor } from '../../interactors/svg-interactor';
+describe('react 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.drawRect = mockFn;
+    const xScale = jest.fn();
+    xScale['bandwidth'] = jest.fn();
+    const options = {
+      dataSource: [
+        { x: 'Mon', y: 1167 },
+        { x: 'Tue', y: 1492 },
+        { x: 'Wed', y: 1782 },
+        { x: 'Thu', y: 1253 },
+        { x: 'Fri', y: 1702 },
+        { x: 'Sat', y: 1288 },
+        { x: 'Sun', y: 1015 },
+      ],
+      xScale: xScale,
+      yScale: jest.fn(),
+      colors: ['bg-accent1-primary'],
+    };
+    const drawer = new RectDrawer(mockRenderer, mockInteractor, {
+      renderOptions: options,
+    });
+    drawer.execute();
+    expect(mockFn).toBeCalledTimes(7);
+  });
+  it('should not call renderer function when run the execute function and the data source is empty', () => {
+    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.drawRect = mockFn;
+    const xScale = jest.fn();
+    xScale['bandwidth'] = jest.fn();
+    const options = {
+      dataSource: undefined,
+      xScale: xScale,
+      yScale: jest.fn(),
+      colors: ['bg-accent1-primary'],
+    };
+    const drawer = new RectDrawer(mockRenderer, mockInteractor, {
+      renderOptions: options,
+    });
+    drawer.execute();
+    expect(mockFn).toBeCalledTimes(0);
+  });
+  it('should call renderer function with the expect parameter 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.drawRect = mockFn;
+    const xScale = jest.fn().mockReturnValue(0);
+    xScale['bandwidth'] = undefined;
+    const options = {
+      dataSource: [{ x: 'Mon', y: 1167 }],
+      xScale: xScale,
+      yScale: jest.fn().mockReturnValue(0),
+      colors: ['bg-accent1-primary'],
+    };
+    const drawer = new RectDrawer(mockRenderer, mockInteractor, {
+      renderOptions: options,
+    });
+    drawer.execute();
+    expect(mockFn).toBeCalledWith({ x: 0, y: 0 }, 5, 0, '#73E6DC');
+    const horizontalDrawer = new RectDrawer(mockRenderer, mockInteractor, {
+      renderOptions: Object.assign(Object.assign({}, options), { direction: 'horizontal' }),
+    });
+    horizontalDrawer.execute();
+    expect(mockFn).toBeCalledWith({ x: 0, y: 0 }, 5, 0, '#73E6DC');
+  });
+});

package/dist/collection/helpers/chart/test/drawers/text-drawer.test.js

@@ -0,0 +1,25 @@
+import { SVGRenderer } from '../../renderers/svg-renderer';
+import { TextDrawer } from '../../drawers/text-drawer';
+import { SVGInteractor } from '../../interactors/svg-interactor';
+describe('text 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.drawText = mockFn;
+    const textOptions = [
+      {
+        position: { x: 0, y: 0 },
+        styleToken: 'v-font-footnote2-short',
+        text: 'Test',
+        textAnchor: 'end',
+      },
+    ];
+    const drawer = new TextDrawer(mockRenderer, mockInteractor, {
+      renderOptions: textOptions,
+    });
+    drawer.execute();
+    expect(mockFn).toBeCalledWith(textOptions[0].position, textOptions[0].text, drawer.getStyleTextFromToken(textOptions[0].styleToken), textOptions[0].textAnchor, undefined);
+  });
+});