@heartlandone/vega-sandbox-pr-1500-870f51f32881a7fe6311a97b3d19020f0ba7dabd 2.28.0

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

@@ -0,0 +1,54 @@
+import { convertArrayToNestedArray, flatNestedArray } from '../../../utils/array';
+/** The `LinePathInputProcessor` class generates chart path options based on input data and previous scale records for a line chart. */
+export class LinePathInputProcessor {
+  /**
+   * This function generates chart path options based on input data and previous scale records.
+   *
+   * @param {ChartOptions<LineChartDataType>} input - The input parameter is an object of type ChartOptions that contains two properties:
+   * dataSource and colors. The dataSource property is of type LineChartDataType and represents the data
+   * used to generate the chart. The colors property is an array of strings that represents the colors
+   * to be used for the chart.
+   * @param {ScaleRecordType} previousOutput - The `previousOutput` parameter is of type
+   * `ScaleRecordType` and is the output of the previous step in the chart rendering process. It
+   * contains the x and y scales that were calculated in the previous step and are used in this step to
+   * generate the positions for the chart path.
+   * @returns {ChartPathOptions} A `ChartPathOptions` object is being returned, which contains an array of `positions`
+   * generated using the `pathPositionGenerator` and the `xScale` and `yScale` scales from the
+   * `previousOutput`, as well as the `colors` from the `dataSource`.
+   */
+  process(input, previousOutput) {
+    const { dataSource, colors } = input;
+    const { xScale, yScale } = previousOutput;
+    return {
+      positions: this.getPathPositions(dataSource, xScale, yScale),
+      colors,
+    };
+  }
+  /**
+   * convert array to array[], convert x,y position to relative position
+   *
+   * @param {LineChartDataType['dataSource']} originData origin line data source
+   * @param {AxisScale<AxisDomain>} xScale x scale
+   * @param {AxisScale<AxisDomain>} yScale y scale
+   * @returns {ChartPosition[][]} x,y relative position
+   */
+  getPathPositions(originData, xScale, yScale) {
+    const flatData = flatNestedArray(originData);
+    let dataLengthArr = [];
+    const flatPathData = flatData.map(({ x, y }) => {
+      return {
+        x: xScale(x),
+        y: yScale(y),
+      };
+    });
+    let pathData = [];
+    if (originData && Array.isArray(originData[0])) {
+      dataLengthArr = originData.map((item) => item.length);
+      pathData = convertArrayToNestedArray(flatPathData, dataLengthArr);
+    }
+    else {
+      pathData = [flatPathData];
+    }
+    return pathData;
+  }
+}

package/dist/collection/helpers/chart/input-processors/pie-chart-arc-path-input-processor.js

@@ -0,0 +1,24 @@
+import { pie as d3Pie } from 'd3';
+/** The PieChartArchPathInputProcessor class processes input data to generate options for rendering a pie or donut chart with D3.js. */
+export class PieChartArchPathInputProcessor {
+  /**
+   * This function processes input data to generate options for rendering a pie or donut chart with D3.js.
+   *
+   * @param {ChartOptions<PieChartSourceType>} input - The input parameter is an object containing chart options, including the data source, colors, layout, donut radius, and type of chart.
+   * @param {PieChartRadiusProcessResultType} previousOutput - previous result from the other input process
+   * @returns {{ renderOptions: ChartArcOptions }} An object with a property `renderOptions` which contains an object with properties `data`,
+   * `colors`, `outerRadius`, `donutRadius`, and `center`.
+   */
+  process(input, previousOutput) {
+    const { dataSource: filterDataSource, colors } = input;
+    const { radius, innerRadius, center } = previousOutput;
+    const renderData = d3Pie().value((d) => d.value)(filterDataSource);
+    return {
+      data: renderData,
+      colors,
+      outerRadius: radius,
+      donutRadius: innerRadius,
+      center,
+    };
+  }
+}

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

@@ -0,0 +1,17 @@
+/** The PieChartFilterInputProcessor class filters out any items in the input dataSource that do not have a name and value property for a pie chart. */
+export class PieChartFilterInputProcessor {
+  /**
+   * This function filters out any items in the input dataSource that do not have a name and value property.
+   *
+   * @param {ChartOptions<PieChartSourceType>} input - The input parameter is of type ChartOptions<PieChartSourceType>, which is an object
+   * containing options for a pie chart. It includes properties such as the chart title, data source,
+   * and chart configuration options. The function is designed to filter out any data items in the data
+   * source that do not have a name or value
+   * @returns {ChartOptions<PieChartSourceType>} the modified input object of type `ChartOptions<PieChartSourceType>`.
+   */
+  process(input) {
+    const filterDataSource = input.dataSource.filter((item) => !!(item.name && item.value));
+    input.dataSource = filterDataSource;
+    return input;
+  }
+}

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

@@ -0,0 +1,28 @@
+/** The PieChartRadiusInputProcessor class calculates the radius, inner radius, and center of a pie chart based on input options and previous layout results. */
+export class PieChartRadiusInputProcessor {
+  /**
+   * This function calculates the radius and center position of a pie chart based on input options and previous layout results.
+   *
+   * @param {ChartOptions<PieChartSourceType>} input - An object of type ChartOptions that contains options for the pie chart, including
+   * the type of chart (either "Pie" or "Donut") and the donut radius (a number between 0 and 1 that
+   * determines the size of the hole in the center of a donut chart).
+   * @param {LayoutProcessResultType} previousOutput - The `previousOutput` parameter is of type
+   * `LayoutProcessResultType` and represents the output of the previous layout process. It contains
+   * information about the inner width and height of the chart area, which is used to calculate the
+   * radius and center of the pie chart.
+   * @returns {PieChartRadiusProcessResultType} an object of type `PieChartRadiusProcessResultType` which contains the `radius`,
+   * `innerRadius`, and `center` properties.
+   */
+  process(input, previousOutput) {
+    const { type, donutRadius } = input;
+    const { innerWidth, innerHeight } = previousOutput;
+    const radius = Math.min(innerWidth, innerHeight) / 2;
+    const innerRadius = type === 'Donut' ? (!donutRadius || donutRadius <= 0 ? 0.6 : Math.min(donutRadius, 0.9)) : 0;
+    // left pie chart, right legend center should be x: innerWidth/4, the top legend, bottom chart center should be x: innerWidth/2
+    const center = {
+      x: innerWidth / 2,
+      y: innerHeight / 2,
+    };
+    return { radius, innerRadius: innerRadius * radius, center };
+  }
+}

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

@@ -0,0 +1,22 @@
+/** The PieChartArchPathInputProcessor class processes input data to generate options for rendering a pie or donut chart with D3.js. */
+export class PieChartTextInputProcessor {
+  /**
+   * This function processes input data to generate options for rendering a pie or donut chart with D3.js.
+   *
+   * @param {ChartArcOptions} input - chartArcPathInputProcessor process result
+   * @returns {{ renderOptions: TextInputType[] }} An object with a property `renderOptions` which contains an object with properties `data`,
+   * `colors`, `outerRadius`, `donutRadius`, and `center`.
+   */
+  process(input) {
+    const { center } = input;
+    const textArray = [
+      {
+        text: '',
+        position: center,
+        textAnchor: 'middle',
+        styleToken: 'v-font-footnote2-short',
+      },
+    ];
+    return textArray;
+  }
+}

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

@@ -0,0 +1,28 @@
+/** The `ProcessorChain` class takes an array of input processors, processes input through them, and returns the final output. */
+export class ProcessorChain {
+  /**
+   * This is a constructor function that takes an array of input processors as a parameter.
+   *
+   * @param {InputProcessor<unknown, unknown, unknown>[]} processors - The `processors` parameter is a
+   * private property of the class that is of type `InputProcessor` which is an interface that takes
+   * three type parameters - `Input`, `Output`, and `Context`. It is an array of instances of classes
+   * that implement the `InputProcessor` interface. These processors are
+   */
+  constructor(processors) {
+    this.processors = processors;
+  }
+  /**
+   * This function processes input through a series of processors and returns the final output.
+   *
+   * @param {unknown} input - The input parameter is of type unknown, which means it can be any type of
+   * value. It is the data that will be processed by the processors.
+   * @returns {unknown} the output of the last processor in the `this.processors` array.
+   */
+  process(input) {
+    let previousOutput;
+    for (const processor of this.processors) {
+      previousOutput = processor.process(input, previousOutput);
+    }
+    return previousOutput;
+  }
+}

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

@@ -0,0 +1,31 @@
+import { sortArrayOrNestedArray, sortAsExistArray } from '../../../utils/array';
+/** The SortPositionsInputProcessor class sorts the data source of a line chart based on the type of x-axis. */
+export class SortPositionsInputProcessor {
+  /**
+   * This function sorts the data source of a line chart based on the type of x-axis.
+   *
+   * @param {ChartOptions<LineChartDataType>} input - The input parameter is an object of type ChartOptions with a generic type of
+   * LineChartDataType. It contains the data source and configuration options for a line chart,
+   * including the x-axis type.
+   * @returns {ChartOptions<LineChartDataType>} a modified version of the input `ChartOptions` object with the `dataSource` property
+   * sorted based on the `xAxis` type. The modified `ChartOptions` object is of type
+   * `ChartOptions<LineChartDataType>`.
+   */
+  process(input) {
+    const { dataSource, xAxis } = input;
+    const xAxisType = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) || 'value';
+    let renderData = dataSource;
+    switch (xAxisType) {
+      case 'time':
+        renderData = sortArrayOrNestedArray(dataSource, (data) => data.x.valueOf());
+        break;
+      case 'value':
+        renderData = sortArrayOrNestedArray(dataSource, (data) => data.x);
+        break;
+      case 'category':
+        renderData = sortAsExistArray(dataSource, (item) => item.x, xAxis.sorter);
+    }
+    input.dataSource = renderData;
+    return input;
+  }
+}

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

@@ -0,0 +1,60 @@
+import { flatNestedArray } from '../../../utils/array';
+import { scaleTime, scaleLinear, scaleBand, extent as d3Extent } from 'd3';
+/** The XAxisInputProcessor class generates X-axis options for a line chart based on input data and previous layout results. */
+export class XAxisInputProcessor {
+  /**
+   * This function generates X-axis options for a line chart based on input data and previous layout results.
+   *
+   * @param {ChartOptions<LineChartDataType>} input - An object containing chart options, including the data source, x-axis options, and
+   * container element.
+   * @param {LayoutProcessResultType} [previousOutput] - The optional output from the previous layout
+   * process. It is of type LayoutProcessResultType and contains information about the innerWidth and
+   * innerHeight of the chart container.
+   * @returns {ChartExtend<AxisScale<AxisDomain>>} a ChartExtend object that contains the options for the X-axis of a line chart, including
+   * the scale generated by the scaleGenerator and the axis options generated by the axisGenerator.
+   */
+  process(input, previousOutput) {
+    const { dataSource, xAxis, container } = input;
+    const { innerWidth, innerHeight } = previousOutput;
+    const xAxisType = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) || 'value';
+    const scale = this.getScale(dataSource, innerWidth, xAxisType, container.tagName === 'VEGA-LINE-CHART' ? 1 : 0.1, xAxis === null || xAxis === void 0 ? void 0 : xAxis.sorter);
+    return {
+      start: { x: 0, y: innerHeight },
+      end: { x: innerWidth, y: innerHeight },
+      tickSize: 4,
+      scale: scale,
+      labelFormatter: xAxis === null || xAxis === void 0 ? void 0 : xAxis.labelFormatter,
+      width: innerWidth,
+      height: innerHeight,
+    };
+  }
+  /**
+   * get x scale
+   *
+   * @param {ChartDataSourceItem[]} data data source
+   * @param {number} width svg width
+   * @param {ChartXAxisType} xAxisType x axis data type
+   * @param {number} padding x position offset value
+   * @param {(item:string,nextItem:string)=>number} sorter the sorter function using when the category type
+   * @returns {AxisScale<AxisDomain>} x scale
+   */
+  getScale(data, width, xAxisType, padding = 0.1, sorter) {
+    const flatData = flatNestedArray(data);
+    const xData = flatData.map((item) => item.x);
+    let xScale;
+    if (xAxisType === 'time') {
+      xScale = scaleTime()
+        .domain(d3Extent(xData))
+        .range([0, width]);
+    }
+    else if (xAxisType === 'category') {
+      xScale = scaleBand(typeof sorter === 'function' ? xData.sort(sorter) : xData, [0, width]).padding(padding);
+    }
+    else {
+      xScale = scaleLinear()
+        .domain(d3Extent(xData))
+        .range([0, width]);
+    }
+    return xScale;
+  }
+}

package/dist/collection/helpers/chart/input-processors/x-axis-label-formatter-input-processor.js

@@ -0,0 +1,67 @@
+import { timeFormat, timeSecond, timeMinute, timeHour, timeDay, timeMonth, timeWeek, timeYear } from 'd3';
+/** The XAxisInputProcessor class generates X-axis options for a line chart based on input data and previous layout results. */
+export class XAxisLabelFormatterInputProcessor {
+  constructor() {
+    this.formatMillisecond = timeFormat('.%L');
+    this.formatSecond = timeFormat(':%S');
+    this.formatMinute = timeFormat('%I:%M');
+    //return 18:00
+    this.formatHour = timeFormat('%H:00');
+    //return 01
+    this.formatDay = timeFormat('%d');
+    //return Jan 01
+    this.formatWeek = timeFormat('%b %d');
+    //return Jan
+    this.formatMonth = timeFormat('%b');
+    //return 2023
+    this.formatYear = timeFormat('%Y');
+  }
+  /**
+   * This function checks if the xAxis type is 'time' and sets a tickFormat if a labelFormatter is not provided.
+   *
+   * @param {ChartOptions<unknown>} input - An object containing chart options, including the type of x-axis and a label
+   * formatter function.
+   * @param {ChartExtend<AxisScale<AxisDomain>>} previousOutput - `previousOutput` is a parameter that represents the output of the previous
+   * step in the charting process. It is of type `ChartExtend<AxisScale<AxisDomain>>`, which is an
+   * object that contains information about the chart's axis scales. This parameter is used to update
+   * the axis scale information
+   * @returns {ChartExtend<AxisScale<AxisDomain>>} a `ChartExtend` object that contains an `AxisScale` object with a tick format function.
+   * The tick format function is either the `timeFormatter` function or the previous tick format
+   * function if the `xAxisType` is not `'time'`.
+   */
+  process(input, previousOutput) {
+    const { xAxis } = input;
+    const xAxisType = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) || 'value';
+    if (xAxisType === 'time' && typeof previousOutput.labelFormatter !== 'function') {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      previousOutput.scale['tickFormat'] = () => this.timeFormatter.bind(this);
+    }
+    return previousOutput;
+  }
+  /**
+   * override the scaleTime default ticks label formatter function
+   * The function formats a given date object based on its time interval using a set of predefined format strings.
+   *
+   * @param {Date} date - The input date that needs to be formatted.
+   * @returns {string} A string representing the formatted date based on the input date parameter. The format of
+   * the string depends on the time interval between the input date and the current time, and is
+   * determined by the conditional statements in the function.
+   */
+  timeFormatter(date) {
+    return (timeSecond(date) < date
+      ? this.formatMillisecond
+      : timeMinute(date) < date
+        ? this.formatSecond
+        : timeHour(date) < date
+          ? this.formatMinute
+          : timeDay(date) < date
+            ? this.formatHour
+            : timeMonth(date) < date
+              ? timeWeek(date) < date
+                ? this.formatDay
+                : this.formatWeek
+              : timeYear(date) < date
+                ? this.formatMonth
+                : this.formatYear)(date);
+  }
+}

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

@@ -0,0 +1,59 @@
+import { flatNestedArray } from '../../../utils/array';
+import { min as d3Min, max as d3Max, extent as d3Extent, scaleLinear } from 'd3';
+/** The YAxisInputProcessor class generates Y-axis options for a line chart based on input data and previous layout results. */
+export class YAxisInputProcessor {
+  /**
+   * This function generates the Y-axis options for a line chart based on the input data and previous layout results.
+   *
+   * @param {ChartOptions<LineChartDataType>} input - An object containing the chart options and data for a line chart. It includes the
+   * dataSource and yAxis properties.
+   * @param {LayoutProcessResultType} [previousOutput] - The output of the previous layout process,
+   * which is an object containing the innerWidth and innerHeight of the chart. This parameter is
+   * optional and can be undefined if it's the first layout process.
+   * @returns {ChartExtend<AxisScale<AxisDomain>>} an object of type `ChartExtend<AxisScale<AxisDomain>>`, which is the result of calling the
+   * `getAxisOptions` method of the `axisGenerator` object. This object contains options for the Y-axis
+   * of a line chart, including the scale used for the axis.
+   */
+  process(input, previousOutput) {
+    const { dataSource, yAxis } = input;
+    const { innerWidth, innerHeight } = previousOutput;
+    const { scale, ticks } = this.getScale(dataSource, [innerHeight, 0], 4);
+    return {
+      start: { x: 0, y: 0 },
+      end: { x: 0, y: innerHeight },
+      tickSize: ticks,
+      scale: scale,
+      labelFormatter: yAxis === null || yAxis === void 0 ? void 0 : yAxis.labelFormatter,
+      width: innerWidth,
+      height: innerHeight,
+    };
+  }
+  /**
+   * get y scale
+   *
+   * @param {ChartDataSourceItem[]} data data source
+   * @param {number[]} range svg scale range
+   * @param {number} ticks the y-axis ticks
+   * @returns {AxisScale<AxisDomain>}y scale
+   */
+  getScale(data, range, ticks) {
+    const flatData = flatNestedArray(data);
+    const yData = flatData.map((item) => item.y).concat(0);
+    let maxYData = d3Max(yData);
+    let minYData = d3Min(yData);
+    let yScale = scaleLinear().domain([minYData, maxYData]);
+    const ticksValue = yScale.ticks(ticks);
+    const step = Math.abs(ticksValue[ticksValue.length - 1] - ticksValue[ticksValue.length - 2]);
+    const [minTickValue, maxTickValue] = d3Extent(ticksValue);
+    if (minYData < minTickValue) {
+      minYData = minTickValue - step;
+      ticks += 1;
+    }
+    if (maxYData > maxTickValue) {
+      maxYData = maxTickValue + step;
+      ticks += 1;
+    }
+    yScale = scaleLinear().domain([minYData, maxYData]).range(range);
+    return { scale: yScale, ticks };
+  }
+}

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/interacting-entry-generator.js

@@ -0,0 +1,16 @@
+/** The code is defining an abstract class called `InteractingEntryGenerator` with a generic type `T`. This class is responsible for generating an `InteractingEntry` object based on the provided options. */
+export class InteractingEntryGenerator {
+  /**
+   * The function generates an InteractingEntry object based on the provided options.
+   *
+   * @param {unknown} options - The `options` parameter is a generic type `T` that represents the options or configuration for the `generate` function. It can be any type that you define when calling the `generate` function.
+   * @returns {InteractingEntry} An object of type InteractingEntry is being returned.
+   */
+  generate(options) {
+    return {
+      eventType: this.eventType,
+      shouldHandle: this.createShouldHandle(options),
+      handle: this.createHandle(options),
+    };
+  }
+}

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/base-interactor.js

@@ -0,0 +1,92 @@
+/**
+ * This is a TypeScript code that defines an abstract class `BaseInteractor` with a generic type `T` that extends either `SVGElement` or `HTMLCanvasElement`.
+ */
+export class BaseInteractor {
+  /**
+   * This is a constructor function that takes a parameter of type T and sets it as a protected property called "context".
+   *
+   * @param {SVGElement | HTMLCanvasElement} context - The "context" parameter is a protected property of a class constructor that is
+   * of type "T". It is used to store a reference to an object or data that is required by the class
+   * methods to perform their tasks. The "protected" keyword means that the property can only be
+   * accessed within the class
+   */
+  constructor(context) {
+    this.context = context;
+    this.interactingEntryForEventRegistry = new Map();
+    this.interactingEntryForDrawerRegistry = new WeakMap();
+  }
+  /**
+   * This function registers an interacting entry with a drawer, draw piece, and event type in an interactor registry.
+   *
+   * @param {BaseDrawer<unknown>} drawer - The drawer parameter is an instance of a class that extends the BaseDrawer class,
+   * which is used for drawing on a canvas or other graphical surface.
+   * @param {DrawPiece} drawPiece - DrawPiece is a type that represents a specific piece that can be
+   * drawn on a canvas or other graphical surface. It could include information such as the shape,
+   * color, size, and position of the piece.
+   * @param {InteractingEntry} interactingEntry - InteractingEntry is a data structure that represents
+   * an interaction between a user and a graphical element on the screen. It contains information such
+   * as the type of event that triggered the interaction (e.g. mouse click, touch)
+   */
+  register(drawer, drawPiece, interactingEntry) {
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const eventType = interactingEntry.eventType;
+    if (!this.interactingEntryForEventRegistry.get(eventType)) {
+      this.interactingEntryForEventRegistry.set(eventType, []);
+    }
+    this.interactingEntryForEventRegistry.get(eventType).push(interactingEntry);
+    if (!this.interactingEntryForDrawerRegistry.get(drawer)) {
+      this.interactingEntryForDrawerRegistry.set(drawer, new WeakMap());
+    }
+    if (!this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece)) {
+      this.interactingEntryForDrawerRegistry.get(drawer).set(drawPiece, []);
+    }
+    this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece).push(interactingEntry);
+    /* eslint-enable @typescript-eslint/no-non-null-assertion */
+  }
+  /**
+   * This function unregisters a drawer from the interactor registry.
+   *
+   * @param {BaseDrawer<unknown>} drawer - The parameter `drawer` is of type `BaseDrawer<unknown>`. It is an object that
+   * represents a drawer and is used to unregister the drawer from the `interactorRegistry`. The
+   * `interactorRegistry` is a `WeakMap` that stores a mapping between an `Interactor` and
+   */
+  unregisterByDrawer(drawer) {
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const drawPiece = drawer.drawPiece;
+    if (drawPiece &&
+      this.interactingEntryForDrawerRegistry.has(drawer) &&
+      this.interactingEntryForDrawerRegistry.get(drawer) &&
+      this.interactingEntryForDrawerRegistry.get(drawer).has(drawPiece) &&
+      this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece)) {
+      this.interactingEntryForEventRegistry.forEach((value, key) => {
+        this.interactingEntryForEventRegistry.set(key, value.filter((interactingEntry) => {
+          return (this.interactingEntryForDrawerRegistry
+            .get(drawer)
+            .get(drawPiece)
+            .indexOf(interactingEntry) < 0);
+        }));
+      });
+      /* eslint-enable @typescript-eslint/no-non-null-assertion */
+    }
+    this.interactingEntryForDrawerRegistry.delete(drawer);
+  }
+  /**
+   * This function handles mouse events for registered interactor and drawers.
+   *
+   * @param {EventType} eventType - The type of event being registered in the registry, such as "click" or "mousemove".
+   * @param {MouseEvent} event - The `event` parameter is of type `MouseEvent`, which represents a
+   * mouse-related event (such as a click, double-click, or mouse movement) that occurred on the web
+   * page. It contains information about the event, such as the type of event, the target element that
+   * triggered the event
+   */
+  callRegistry(eventType, event) {
+    const interactingEntryArray = this.interactingEntryForEventRegistry.get(eventType);
+    if (interactingEntryArray) {
+      interactingEntryArray.forEach((interactingEntry) => {
+        if (interactingEntry.shouldHandle(event)) {
+          interactingEntry.handle(event);
+        }
+      });
+    }
+  }
+}