pace-chart-lib 0.0.7 → 0.0.9

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

@@ -0,0 +1,807 @@
+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;