pace-chart-lib 1.0.2 → 1.0.4

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/ScatterChart.js

@@ -1,807 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region imports
-import * as d3 from "d3";
-import { useEffect, useRef } from "react";
-import { fontStyleOptions, horizontalLegendAllignment, referenceLineTypes, staticLegendPosition, verticalLegendAllignment, } from "../../Core/Common.types";
-import { calculateLegendsMaxPossibleWidth, convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initSvg, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import { customXscaleLabelFormatting, customYscaleLabelFormatting, initXaxis, initYaxis, marginCalculationForBubbleScatter, responsiveXaxisLabelForNumericValue, responsiveYaxisLabel, setnumberOfBubbles, setXaxistitle, yAxistitle, } from "../ChartsWithoutAxisFunctions";
-import { logError } from "../../../../Services/ErrorLog";
-//#endregion
-const fileName = "ScatterChart.tsx";
-const ScatterChart = ({ data, formatOptions, chartId, shapesList, colorsList, }) => {
-    //#region Variables
-    const svgRef = useRef(); // Reference to the SVG element
-    let chartFormatOptions; // Format options for the chart
-    let maxLegendDimensions = [0, 0]; // to calculate margins [width, height]
-    let width; // svg total width
-    let height; // svg total height
-    let chartTitleHeight = 40; // Height of the chart title
-    let margins = chartMargins; // Margins for the chart
-    let innerHeight; // Height of the chart excluding margins
-    let innerWidth; // Width of the chart excluding margins
-    let chartAreaTagG; // Group element for the chart area
-    let svg; // SVG element for the chart
-    let measuresList = []; // List of measures for the bubble chart
-    let dimensionsList = []; // List of dimensions for the bubble chart
-    let minDimension; // Longest dimension for the chart
-    let maxDimension; // Longest measure for the chart
-    let minMeasure; // Longest measure for the chart
-    let maxMeasure; // Longest measure for the chart
-    let yLabel; // Y-axis label
-    let xLabel; // X-axis label
-    let yTitle; // Y-axis title
-    let xTitle; // X-axis title
-    let legendMargin; // Margin for the legend
-    let longestDimension; // Longest dimension for the chart
-    let customXaxisIntervalValue; // Custom X-axis interval value
-    let customXaxisMaxValue; // Custom X-axis maximum value
-    let customXaxisMinValue; // Custom X-axis minimum value
-    let longestMeasure; // Longest measure for the chart
-    let customYaxisIntervalValue; // Custom Y-axis interval value
-    let customYaxisMaxValue; // Custom Y-axis maximum value
-    let customYaxisMinValue; // Custom Y-axis minimum value
-    let xScale; // X-axis scale
-    let yScale; // Y-axis scale
-    let colorsMap = new Map(); // Map to store colors for the chart
-    let shapesMap = new Map(); // Map to store shapes for the chartl
-    //#endregion
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions, data, chartId]);
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        let tempLegendEntries = [
-            ...shapesList,
-            ...colorsList,
-        ];
-        maxLegendDimensions = calculateLegendsMaxPossibleWidth(chartFormatOptions, tempLegendEntries, "alias");
-        iterateOverChartData();
-        ({
-            longestMeasure,
-            customYaxisIntervalValue,
-            customYaxisMaxValue,
-            customYaxisMinValue,
-        } = customYscaleLabelFormatting(chartFormatOptions, minMeasure, maxMeasure));
-        ({
-            longestDimension,
-            customXaxisIntervalValue,
-            customXaxisMaxValue,
-            customXaxisMinValue,
-        } = customXscaleLabelFormatting(chartFormatOptions, minDimension, maxDimension));
-        ({
-            margins,
-            yLabel,
-            xLabel,
-            yTitle,
-            xTitle,
-            chartTitleHeight,
-            legendMargin,
-            innerHeight,
-            innerWidth,
-        } = marginCalculationForBubbleScatter(width, height, longestMeasure, chartFormatOptions, longestDimension, maxLegendDimensions));
-        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
-        chartAreaTagG = initChartArea(svg, margins);
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        initScale();
-        drawXAxis();
-        drawYAxis();
-        setXaxistitle(formatOptions, false, svg, margins, xLabel, height, xTitle, "Scatter", yLabel, innerWidth, innerHeight);
-        yAxistitle(innerHeight, formatOptions, 0, false, svg, margins, yTitle, yLabel);
-        drawReferenceLines();
-        // initLegendList();
-        initCircles();
-        drawColors();
-        drawShapes();
-        setnumberOfBubbles(svg, chartFormatOptions.legends.legendPosition, chartFormatOptions, height, width, margins, innerHeight, xTitle, xLabel, data.length);
-    };
-    const initCircles = () => {
-        try {
-            const circles = chartAreaTagG
-                .append("g")
-                .attr("class", "circles")
-                .attr("class", "parentGroup");
-            //Lines
-            circles
-                .append("g")
-                .selectAll(".bubbleScatter")
-                .data(data)
-                .enter()
-                .append("g")
-                .attr("fill", (d) => d.selectedColor)
-                .attr("colorId", (d) => d.legendName.includes("-")
-                ? d.legendName.split("-")[0].replace(/ /g, "-")
-                : d.legendName.replace(/ /g, "-"))
-                .attr("shapeId", (d) => d.legendName.includes("-")
-                ? d.legendName.split("-")[1].replace(/ /g, "-")
-                : d.legendName.replace(/ /g, "-"))
-                .append("path")
-                .attr("class", "path")
-                .attr("id", function (d, i) {
-                d3.select(this).attr("d", d3
-                    .symbol()
-                    .type(getMarkershapes(d.selectedShape))
-                    .size((d.sizeValue ? d.sizeValue : 10) *
-                    2 *
-                    convertStringToNumber(chartFormatOptions.plotArea.scatterSizeIndex)));
-            })
-                .attr("transform", function (d) {
-                return `translate(${xScale(d.dimension)}, ${yScale(d.measure)})`;
-            })
-                .attr("opacity", chartFormatOptions.plotArea.fillOpacity)
-                .style("visibility", (d, i) => d.dimension[0] === 0 ||
-                (d.measure === 0 && chartFormatOptions.plotArea.hideZeroValues) ||
-                d.dimension < customXaxisMinValue ||
-                d.dimension > customXaxisMaxValue ||
-                d.measure < customYaxisMinValue ||
-                d.measure > customYaxisMaxValue
-                ? "hidden"
-                : "visible")
-                .on("mousemove", (event, d) => {
-                showTooltipOnMouseMove([
-                    {
-                        key: chartFormatOptions.xAxisTitle.xAxisTitleText,
-                        value: getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.dimension),
-                    },
-                    {
-                        key: chartFormatOptions.yAxisTitle.yAxisTitleText,
-                        value: getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.measure),
-                    },
-                    { key: "Legend", value: d.legendName },
-                    // { key: "Calculated Tooltip", value: d.tooltip },
-                ], chartFormatOptions);
-            })
-                .on("mouseout", () => {
-                hideTooltipOnMouseOut();
-            });
-            function getMarkershapes(Shape) {
-                return Shape == "Square"
-                    ? d3.symbolSquare
-                    : Shape == "Circle"
-                        ? d3.symbolCircle
-                        : Shape == "Cross"
-                            ? d3.symbolCross
-                            : Shape == "Triangle"
-                                ? d3.symbolTriangle
-                                : Shape == "Star"
-                                    ? d3.symbolStar
-                                    : Shape == "Diamond"
-                                        ? d3.symbolDiamond
-                                        : Shape == "Wye"
-                                            ? d3.symbolWye
-                                            : d3.symbolCircle;
-            }
-        }
-        catch (e) {
-            logError(fileName, "initCircles", e);
-        }
-    };
-    const iterateOverChartData = () => {
-        try {
-            colorsList.forEach((colorObject) => {
-                colorsMap.set(colorObject.name, colorObject.color);
-            });
-            shapesList.forEach((shapeObject) => {
-                shapesMap.set(shapeObject.name, shapeObject.markerShape);
-            });
-            data.forEach((d) => {
-                let legendNameArr = d.legendName.split("-");
-                d["selectedColor"] = colorsMap.get(legendNameArr[0]) || "#6ba2b8ff";
-                d["selectedShape"] = shapesMap.get(legendNameArr[1]) || "Circle";
-                if (d.measureName) {
-                    measuresList.push(d.measure);
-                    if (d.measure < minMeasure || minMeasure === undefined) {
-                        minMeasure = d.measure;
-                    }
-                    if (d.measure > maxMeasure || maxMeasure === undefined) {
-                        maxMeasure = d.measure;
-                    }
-                }
-                if (d.dimensionName) {
-                    dimensionsList.push(d.dimension);
-                    if (d.dimension < minDimension || minDimension === undefined) {
-                        minDimension = d.dimension;
-                    }
-                    if (d.dimension > maxDimension || maxDimension === undefined) {
-                        maxDimension = d.dimension;
-                    }
-                }
-            });
-        }
-        catch (e) {
-            logError(fileName, "iterateOverChartData", e);
-        }
-    };
-    const initScale = () => {
-        try {
-            let xStartValue = chartFormatOptions.xAxisLabel.xAxisIntervalsVisibility &&
-                chartFormatOptions.xAxisLabel.xAxisMinText !== ""
-                ? parseFloat(chartFormatOptions.xAxisLabel.xAxisMinText)
-                : minDimension > 0
-                    ? 0
-                    : minDimension * 1.1;
-            let xEndValue = chartFormatOptions.xAxisLabel.xAxisIntervalsVisibility &&
-                chartFormatOptions.xAxisLabel.xAxisMaxText !== ""
-                ? parseFloat(chartFormatOptions.xAxisLabel.xAxisMaxText)
-                : maxDimension * 1.1;
-            let yStartValue = chartFormatOptions.yAxisLabel.yAxisIntervalsVisibility &&
-                chartFormatOptions.yAxisLabel.yAxisMinText !== ""
-                ? parseFloat(chartFormatOptions.yAxisLabel.yAxisMinText)
-                : minMeasure > 0
-                    ? 0
-                    : minMeasure * 1.1;
-            let yEndValue = chartFormatOptions.yAxisLabel.yAxisIntervalsVisibility &&
-                chartFormatOptions.yAxisLabel.yAxisMaxText !== ""
-                ? parseFloat(chartFormatOptions.yAxisLabel.yAxisMaxText)
-                : maxMeasure * 1.1;
-            xScale = d3
-                .scaleLinear()
-                .domain([xStartValue, xEndValue])
-                .range([0, innerWidth]);
-            yScale = d3
-                .scaleLinear()
-                .domain([yStartValue, yEndValue])
-                .range([innerHeight, 0]);
-        }
-        catch (e) {
-            logError(fileName, "initScale", e);
-        }
-    };
-    const drawXAxis = () => {
-        try {
-            let { xAxisLabelArray, customTickValue } = responsiveXaxisLabelForNumericValue(maxDimension, minDimension, innerWidth, formatOptions, customXaxisMinValue, customXaxisMaxValue, innerHeight, false);
-            const xAxis = d3
-                .axisBottom(xScale)
-                .tickFormat(getNumberWithFormatFunction(formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"))
-                .tickSize(chartFormatOptions.plotArea.gridLinesVisibility
-                ? chartFormatOptions.plotArea.gridLinesVertical
-                    ? chartFormatOptions.xAxisLabel.xAxisPosition === "0"
-                        ? -innerHeight
-                        : chartFormatOptions.xAxisLabel.xAxisPosition === "1"
-                            ? innerHeight
-                            : 0
-                    : 0
-                : 0)
-                .tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null)
-                .ticks(customTickValue)
-                .tickSizeOuter(0);
-            initXaxis(chartAreaTagG, chartFormatOptions, 0, xLabel, xAxis, innerHeight, innerWidth, margins, yScale);
-        }
-        catch (e) {
-            logError(fileName, "drawXAxis", e);
-        }
-    };
-    const drawYAxis = () => {
-        try {
-            let { yAxisLabelArray, customTickValue } = responsiveYaxisLabel(maxMeasure, minMeasure, innerHeight, formatOptions, customYaxisMinValue, customYaxisMaxValue);
-            const yAxis = d3
-                .axisLeft(yScale)
-                .tickFormat(getNumberWithFormatFunction(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2"))
-                .tickSize(chartFormatOptions.plotArea.gridLinesVisibility
-                ? chartFormatOptions.plotArea.gridLinesHorizontal
-                    ? -innerWidth
-                    : 0
-                : 0)
-                .tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null)
-                .ticks(customTickValue)
-                .tickSizeOuter(0);
-            initYaxis(chartAreaTagG, chartFormatOptions, 0, yLabel, yAxis, innerHeight);
-        }
-        catch (e) {
-            logError(fileName, "drawYAxis", e);
-        }
-    };
-    const drawReferenceLines = () => {
-        try {
-            if (chartFormatOptions.plotArea.xCoordinate != referenceLineTypes.None) {
-                let xCordinate;
-                switch (chartFormatOptions.plotArea.xCoordinate) {
-                    case referenceLineTypes.Mean:
-                        xCordinate = d3.mean(data, (d) => d.dimension);
-                        break;
-                    case referenceLineTypes.Median:
-                        xCordinate = d3.median(data, (d) => d.dimension);
-                        break;
-                    case referenceLineTypes.Custom:
-                        xCordinate = convertStringToNumber(chartFormatOptions.plotArea.xscaleposition);
-                        break;
-                }
-                chartAreaTagG
-                    .append("line")
-                    .attr("x1", xScale(xCordinate))
-                    .attr("y1", 0)
-                    .attr("x2", xScale(xCordinate))
-                    .attr("y2", innerHeight)
-                    .attr("stroke", chartFormatOptions.plotArea.refLineBorderColor)
-                    .attr("stroke-width", chartFormatOptions.plotArea.refLineBorderThickness);
-                // .attr("stroke-dasharray", chartFormatOptions.plotArea.refLineStyle);
-            }
-            if (chartFormatOptions.plotArea.yCoordinate != referenceLineTypes.None) {
-                let yCordinate;
-                switch (chartFormatOptions.plotArea.yCoordinate) {
-                    case referenceLineTypes.Mean:
-                        yCordinate = d3.mean(data, (d) => d.measure);
-                        break;
-                    case referenceLineTypes.Median:
-                        yCordinate = d3.median(data, (d) => d.measure);
-                        break;
-                    case referenceLineTypes.Custom:
-                        yCordinate = convertStringToNumber(chartFormatOptions.plotArea.yscaleposition);
-                        break;
-                }
-                chartAreaTagG
-                    .append("line")
-                    .attr("x1", 0)
-                    .attr("y1", yScale(yCordinate))
-                    .attr("x2", innerWidth)
-                    .attr("y2", yScale(yCordinate))
-                    .attr("stroke", chartFormatOptions.plotArea.refLineBorderColor)
-                    .attr("stroke-width", chartFormatOptions.plotArea.refLineBorderThickness);
-                // .attr("stroke-dasharray", chartFormatOptions.plotArea.refLineStyle);
-            }
-        }
-        catch (e) {
-            logError(fileName, "drawReferenceLines", e);
-        }
-    };
-    const drawColors = () => {
-        try {
-            // to set default values for newly added legend props for old saved reports.
-            chartFormatOptions.legends.legendAlignment === undefined
-                ? (chartFormatOptions.legends.legendAlignment = "Top")
-                : null;
-            chartFormatOptions.legends.legendAlignmentTopBottom === undefined
-                ? (chartFormatOptions.legends.legendAlignmentTopBottom = "Start")
-                : null;
-            let position = chartFormatOptions.legends.legendPosition;
-            let alignmentLeftRight = chartFormatOptions.legends.legendAlignment;
-            let alignmentTopBottom = chartFormatOptions.legends.legendAlignmentTopBottom;
-            switch (position) {
-                case staticLegendPosition.none:
-                    break;
-                case staticLegendPosition.right:
-                    colorListWithScroll(colorsList, width - legendMargin - 30, chartTitleHeight + 5, legendMargin + 25, height - chartTitleHeight - 10);
-                    break;
-                case staticLegendPosition.top:
-                    colorListWithScroll(colorsList, 5, chartTitleHeight + 5, width - 10, 30);
-                    break;
-                case staticLegendPosition.left:
-                    colorListWithScroll(colorsList, 5, chartTitleHeight + 5, legendMargin + 25, height - chartTitleHeight - 10);
-                    break;
-                case staticLegendPosition.bottom:
-                    colorListWithScroll(colorsList, 5, height - 35, width - 10, 30);
-                    break;
-            }
-        }
-        catch (error) {
-            logError(fileName, "drawColors", error);
-        }
-    };
-    const drawShapes = () => {
-        try {
-            // to set default values for newly added legend props for old saved reports.
-            chartFormatOptions.legends.legendAlignment === undefined
-                ? (chartFormatOptions.legends.legendAlignment =
-                    verticalLegendAllignment.top)
-                : null;
-            chartFormatOptions.legends.legendAlignmentTopBottom === undefined
-                ? (chartFormatOptions.legends.legendAlignmentTopBottom =
-                    horizontalLegendAllignment.start)
-                : null;
-            let position = chartFormatOptions.legends.legendPosition;
-            if (shapesList.length > 0) {
-                switch (position) {
-                    case staticLegendPosition.none:
-                        break;
-                    case staticLegendPosition.right:
-                        shapeListWithScroll(shapesList, width - legendMargin - 30, height / 2 + 10, legendMargin + 25, height - chartTitleHeight - 10);
-                        break;
-                    case staticLegendPosition.top:
-                        shapeListWithScroll(shapesList, width / 2 + 5, chartTitleHeight + 5, width - 10, 30);
-                        break;
-                    case staticLegendPosition.left:
-                        shapeListWithScroll(shapesList, 5, height / 2 + 10, legendMargin + 25, height - chartTitleHeight - 10);
-                        break;
-                    case staticLegendPosition.bottom:
-                        shapeListWithScroll(shapesList, width / 2 + 5, height - 35, width - 10, 30);
-                        break;
-                }
-            }
-        }
-        catch (error) {
-            logError(fileName, "drawShapes", error);
-        }
-    };
-    const colorListWithScroll = (ColorList, x, y, width, height) => {
-        try {
-            let legendPosition = chartFormatOptions.legends.legendPosition;
-            let fontStyle = chartFormatOptions.legends.legendFontStyle;
-            let object = svg
-                .append("foreignObject")
-                .attr("visibility", chartFormatOptions.legends.legendVisibility ? "visible" : "hidden")
-                .attr("x", x)
-                .attr("y", y)
-                .attr("width", width)
-                .attr("height", height)
-                .style("user-select", "none");
-            let widthPercentage = (legendPosition == staticLegendPosition.top ||
-                legendPosition == staticLegendPosition.bottom) &&
-                shapesList.length > 0
-                ? "50%"
-                : "100%";
-            var div = object
-                .append("xhtml:div")
-                .style("width", widthPercentage)
-                .style("display", "flex")
-                .style("height", legendPosition == staticLegendPosition.top ||
-                legendPosition == staticLegendPosition.bottom
-                ? height - 1 + "px"
-                : "calc(50% - 5px)")
-                .style("border", chartFormatOptions.legends.legendBorder
-                ? `${chartFormatOptions.legends.legendBorderThickness +
-                    "px" +
-                    " solid" +
-                    chartFormatOptions.legends.legendBorderColor}`
-                : "none")
-                .append("div")
-                .attr("id", "colorsObject" + chartId)
-                .style("width", "100%")
-                .attr("class", "scrollbar")
-                .style("display", "flex")
-                .style("overflow", "auto")
-                .style("justify-content", legendPosition == staticLegendPosition.top ||
-                legendPosition == staticLegendPosition.bottom
-                ? chartFormatOptions.legends.legendAlignmentTopBottom ==
-                    horizontalLegendAllignment.start
-                    ? "flex-Start"
-                    : chartFormatOptions.legends.legendAlignmentTopBottom ==
-                        horizontalLegendAllignment.middle
-                        ? "center"
-                        : "flex-end"
-                : chartFormatOptions.legends.legendAlignment ==
-                    verticalLegendAllignment.top
-                    ? "flex-Start"
-                    : chartFormatOptions.legends.legendAlignment ==
-                        verticalLegendAllignment.middle
-                        ? "center"
-                        : "flex-end")
-                .style("flex-direction", legendPosition == staticLegendPosition.top ||
-                legendPosition == staticLegendPosition.bottom
-                ? "row"
-                : "column")
-                .style("flex-wrap", "nowrap")
-                .style("padding-left", "3px");
-            ColorList.forEach((d, i) => {
-                let innerdiv = div
-                    .append("div")
-                    .style("display", "inline-flex")
-                    .style("justify-content", "flex-start")
-                    .style("align-items", "center")
-                    .style("margin", "3px 0px")
-                    .style("width", "fit-content")
-                    .style("flex-wrap", "nowrap")
-                    .style("white-space", "nowrap")
-                    .style("font-size", chartFormatOptions.legends.legendFontSize + "px")
-                    .style("font-family", chartFormatOptions.legends.legendFontFamily)
-                    //added below code to provide hover effect functionality
-                    .on("mousemove", function (d) {
-                    svg
-                        .selectAll(".parentGroup")
-                        .classed("highlight", false)
-                        .classed("unhighlight", true);
-                    svg
-                        .selectAll('[colorId="' +
-                        getJQuerySelector(this.textContent.replace(/ /g, "-")) +
-                        '"]')
-                        .classed("highlight", true)
-                        .classed("unhighlight", false);
-                })
-                    .on("mouseout", function (d) {
-                    svg
-                        .selectAll(".parentGroup")
-                        .classed("highlight", false)
-                        .classed("unhighlight", false);
-                    svg
-                        .selectAll('[colorId="' +
-                        getJQuerySelector(this.textContent.replace(/ /g, "-")) +
-                        '"]')
-                        .classed("highlight", false)
-                        .classed("unhighlight", false);
-                });
-                /* hover effect code end */
-                if (legendPosition == staticLegendPosition.bottom ||
-                    legendPosition == staticLegendPosition.top)
-                    innerdiv.style("margin-right", "16px").style("white-space", "nowrap");
-                innerdiv
-                    .append("div")
-                    .style("height", "10px")
-                    .style("width", "10px")
-                    .style("background", d.color)
-                    .style("border-radius", "1px");
-                let legendColor = chartFormatOptions.legends.legendColorMode == "1"
-                    ? d.color
-                        ? d.color
-                        : "#000000"
-                    : chartFormatOptions.legends.legendSelectedUnicolor;
-                innerdiv
-                    .append("div")
-                    .style("margin-left", "5px")
-                    .style("color", legendColor)
-                    .attr("title", d.name)
-                    .style("font-size", chartFormatOptions.legends.legendFontSize + "px")
-                    .style("font-family", chartFormatOptions.legends.legendFontFamily)
-                    .style("font-style", fontStyle.includes(fontStyleOptions.italic)
-                    ? fontStyleOptions.italic
-                    : "")
-                    .style("text-decoration", fontStyle.includes(fontStyleOptions.underline)
-                    ? fontStyleOptions.underline
-                    : "")
-                    .style("font-weight", fontStyle.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : "")
-                    .style("white-space", "nowrap")
-                    .html(d.name);
-            });
-        }
-        catch (e) {
-            logError(fileName, "colorListWithScroll", e);
-        }
-    };
-    const shapeListWithScroll = (ShapeList, x, y, width, height) => {
-        try {
-            let legendPosition = chartFormatOptions.legends.legendPosition;
-            let fontStyle = chartFormatOptions.legends.legendFontStyle;
-            let object = svg
-                .append("foreignObject")
-                .attr("visibility", chartFormatOptions.legends.legendVisibility ? "visible" : "hidden")
-                .attr("x", x)
-                .attr("y", y)
-                .attr("width", width)
-                .attr("height", height)
-                .style("user-select", "none");
-            let widthPercentage = chartFormatOptions.legends.legendPosition == staticLegendPosition.top ||
-                chartFormatOptions.legends.legendPosition == staticLegendPosition.bottom
-                ? "calc(50% - 5px)"
-                : "calc(100%)";
-            var div = object
-                .append("xhtml:div")
-                .style("width", widthPercentage)
-                .style("display", "flex")
-                .style("height", legendPosition == staticLegendPosition.top ||
-                legendPosition == staticLegendPosition.bottom
-                ? height - 1 + "px"
-                : "50%")
-                .style("padding", "2px")
-                .style("position", "absolute")
-                .style("border", chartFormatOptions.legends.legendBorder
-                ? `${chartFormatOptions.legends.legendBorderThickness +
-                    "px" +
-                    " solid" +
-                    chartFormatOptions.legends.legendBorderColor}`
-                : "none")
-                .append("div")
-                // .style("min-width", "150px")
-                .attr("id", "shapesObject" + chartId)
-                .style("width", "100%")
-                .attr("class", "scrollbar")
-                .style("overflow", "auto")
-                .style("display", "flex")
-                .style("justify-content", legendPosition == staticLegendPosition.top ||
-                legendPosition == staticLegendPosition.bottom
-                ? chartFormatOptions.legends.legendAlignmentTopBottom ==
-                    horizontalLegendAllignment.start
-                    ? "flex-Start"
-                    : chartFormatOptions.legends.legendAlignmentTopBottom ==
-                        horizontalLegendAllignment.middle
-                        ? "center"
-                        : "flex-end"
-                : chartFormatOptions.legends.legendAlignment ==
-                    verticalLegendAllignment.top
-                    ? "flex-Start"
-                    : chartFormatOptions.legends.legendAlignment ==
-                        verticalLegendAllignment.middle
-                        ? "center"
-                        : "flex-end")
-                .style("flex-direction", legendPosition == staticLegendPosition.top ||
-                legendPosition == staticLegendPosition.bottom
-                ? "row"
-                : "column")
-                .style("flex-wrap", "nowrap")
-                .style("padding-left", "3px");
-            ShapeList.forEach((d, i) => {
-                let innerdiv = div
-                    .append("div")
-                    .style("width", "fit-content")
-                    .style("display", "inline-flex")
-                    .style("justify-content", "flex-start")
-                    .style("align-items", "center")
-                    .style("margin", "3px 0px")
-                    .style("flex-wrap", "nowrap")
-                    .style("white-space", "nowrap")
-                    //added below code to provide hover effect functionality
-                    .on("mousemove", function (d) {
-                    if (chartFormatOptions.legends.onHoverEffect) {
-                        svg
-                            .selectAll(".parentGroup")
-                            .classed("highlight", false)
-                            .classed("unhighlight", true);
-                        svg
-                            .selectAll('[shapeId="' +
-                            getJQuerySelector(this.textContent.replace(/ /g, "-")) +
-                            '"]')
-                            .classed("highlight", true)
-                            .classed("unhighlight", false);
-                    }
-                })
-                    .on("mouseout", function (d) {
-                    if (chartFormatOptions.legends.onHoverEffect) {
-                        svg
-                            .selectAll(".parentGroup")
-                            .classed("highlight", false)
-                            .classed("unhighlight", false);
-                        svg
-                            .selectAll('[shapeId="' +
-                            getJQuerySelector(this.textContent.replace(/ /g, "-")) +
-                            '"]')
-                            .classed("highlight", false)
-                            .classed("unhighlight", false);
-                    }
-                });
-                /* hover effect code end */
-                if (legendPosition == staticLegendPosition.top ||
-                    legendPosition == staticLegendPosition.bottom)
-                    innerdiv.style("margin-right", "16px").style("white-space", "nowrap");
-                // this function is used to give different shapes to  different shapeList entries.
-                shapesForScatterPlot(innerdiv, d.markerShape);
-                let legendColor = chartFormatOptions.legends.legendColorMode == "1"
-                    ? "#000000"
-                    : chartFormatOptions.legends.legendSelectedUnicolor;
-                innerdiv
-                    .append("div")
-                    .style("margin-left", "5px")
-                    .style("color", legendColor)
-                    .attr("title", d.name)
-                    .style("font-size", chartFormatOptions.legends.legendFontSize + "px")
-                    .style("font-family", chartFormatOptions.legends.legendFontFamily)
-                    .style("font-style", fontStyle.includes(fontStyleOptions.italic)
-                    ? fontStyleOptions.italic
-                    : "")
-                    .style("text-decoration", fontStyle.includes(fontStyleOptions.underline)
-                    ? fontStyleOptions.underline
-                    : "")
-                    .style("font-weight", fontStyle.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : "")
-                    .style("white-space", "nowrap")
-                    .html(d.name);
-            });
-        }
-        catch (e) {
-            logError(fileName, "shapeListWithScroll", e);
-        }
-    };
-    const shapesForScatterPlot = (innerdiv, shapes) => {
-        try {
-            shapes = shapes.toLowerCase();
-            switch (shapes) {
-                case "circle":
-                case "none":
-                    innerdiv
-                        .append("svg")
-                        .attr("height", "10px")
-                        .attr("width", "10px")
-                        .append("circle")
-                        .attr("cx", "5px")
-                        .attr("cy", "5px")
-                        .attr("r", "5px")
-                        .style("fill", "black");
-                    break;
-                case "square":
-                    innerdiv
-                        .append("div")
-                        .style("height", "10px")
-                        .style("width", "10px")
-                        .style("background", "black")
-                        .style("border-radius", "1px");
-                    break;
-                case "triangle":
-                    innerdiv
-                        .append("div")
-                        .style("border-left", "6px solid transparent")
-                        .style("border-right", "6px solid transparent")
-                        .style("border-bottom", "10px solid black");
-                    break;
-                case "cross":
-                    innerdiv
-                        .append("div")
-                        .style("height", "4px")
-                        .style("width", "10px")
-                        .style("background", "black")
-                        .style("border-radius", "1px")
-                        .append("div")
-                        .style("height", "10px")
-                        .style("width", "4px")
-                        .style("background", "black")
-                        .style("border-radius", "1px")
-                        .style("position", "relative")
-                        .style("top", "-3px")
-                        .style("left", "3px");
-                    break;
-                case "diamond":
-                    innerdiv
-                        .append("div")
-                        .style("height", "10px")
-                        .style("width", "10px")
-                        .style("background", "black")
-                        .style("border-radius", "1px")
-                        .style("transform", "rotate(45deg)");
-                    break;
-                case "star":
-                    innerdiv
-                        .append("div")
-                        .style("border-left", "6px solid transparent")
-                        .style("border-right", "6px solid transparent")
-                        .style("border-bottom", "10px solid black")
-                        .style("position", "relative")
-                        .style("top", "-2px")
-                        .style("transform", "rotate(0deg)")
-                        .append("div")
-                        .style("border-left", "6px solid transparent")
-                        .style("border-right", "6px solid transparent")
-                        .style("border-top", "10px solid black")
-                        .style("position", "absolute")
-                        .style("top", "2px")
-                        .style("left", "-5.5px")
-                        .style("transform", "rotate(360deg)");
-                    break;
-                case "wye":
-                    innerdiv
-                        .append("div")
-                        .style("height", "6.5px")
-                        .style("width", "3px")
-                        .style("background", "black")
-                        .append("div")
-                        .style("height", "5px")
-                        .style("width", "3px")
-                        .style("background", "black")
-                        .style("transform", "rotate(-55deg)")
-                        .style("position", "relative")
-                        .style("top", "-2px")
-                        .style("left", "-2px")
-                        .append("div")
-                        .style("height", "5px")
-                        .style("width", "3px")
-                        .style("background", "black")
-                        .style("transform", "rotate(108deg)")
-                        .style("position", "relative")
-                        .style("top", "3px")
-                        .style("left", "2px");
-                    break;
-                default:
-                    break;
-            }
-        }
-        catch (error) {
-            logError(fileName, "shapesForScatterPlot", error);
-        }
-    };
-    const getJQuerySelector = (strSeletor = "") => {
-        try {
-            return strSeletor.replace(/(#|;|&|,|\.|\+|\*|~|'|:|"|!|\^|\$|\[|\]|\(|\)|=|<|>|\||\/)/g, "\\$1");
-        }
-        catch (error) {
-            logError(fileName, "getJQuerySelector", error);
-        }
-    };
-    // return (
-    //   <div style={{ width: "100%", height: "100%" }}>
-    //     <svg
-    //       className="chartSVG"
-    //       style={{ width: "100%", height: "100%" }}
-    //       ref={svgRef}
-    //     ></svg>
-    //   </div>
-    // );
-    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { id: "chartTooltipDiv" }), _jsx("svg", { className: "chartSVG", ref: svgRef, id: chartId, style: { width: "100%", height: "100%" } })] }));
-};
-export default ScatterChart;