pace-chart-lib 1.0.2 → 1.0.4

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

@@ -1,367 +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 { referenceLineTypes, } from "../../Core/Common.types";
-import { calculateLegendsMaxPossibleWidth, convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initLegendListWithTotalValueAllowance, initSvg, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import { customXscaleLabelFormatting, customYscaleLabelFormatting, initXaxis, initYaxis, marginCalculationForBubbleScatter, responsiveXaxisLabelForNumericValue, responsiveYaxisLabel, setXaxistitle, yAxistitle, } from "../ChartsWithoutAxisFunctions";
-import { logError } from "../../../../Services/ErrorLog";
-//#endregion
-const BubbleChart = ({ data, formatOptions, chartId, legendEntries, }) => {
-    //#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
-    //#endregion
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions, data, chartId]);
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        let tempLegendEntries = legendEntries;
-        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, "Bubble", yLabel, innerWidth, innerHeight);
-        yAxistitle(innerHeight, formatOptions, 0, false, svg, margins, yTitle, yLabel);
-        drawReferenceLines();
-        initLegendList();
-        initCircles();
-    };
-    const initCircles = () => {
-        try {
-            let minBubbleSize = 5;
-            let maxBubbleSize = 30;
-            let sizeData = { minimumValue: minMeasure, maximumValue: maxMeasure };
-            const circles = chartAreaTagG
-                .append("g")
-                .attr("class", "circles")
-                .attr("class", "parentGroup");
-            //Lines
-            circles
-                .append("g")
-                .selectAll(".bubbleScatter")
-                .data(data)
-                .enter()
-                .append("g")
-                .attr("hoverId", (d) => d.legendName.replace(/ /g, "-"))
-                .attr("fill", (d) => d.legendColor !== "#ffffff" ? d.legendColor : "none")
-                .append("path")
-                .attr("class", "path")
-                .attr("id", function (d, i) {
-                d3.select(this).attr("d", d3
-                    .symbol()
-                    .type(d3.symbolCircle)
-                    .size(getBubbleSize(minBubbleSize, maxBubbleSize, sizeData, d.measure, 10) *
-                    convertStringToNumber(chartFormatOptions.plotArea.bubbleSizeIndex) *
-                    3));
-            })
-                .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();
-            });
-        }
-        catch (e) {
-            logError("BubbleChart", "initCircles", e);
-        }
-    };
-    function getBubbleSize(minBubbleSize, maxBubbleSize, sizeData, currentValue, defaultSize) {
-        try {
-            if (currentValue == undefined)
-                return defaultSize;
-            var f = sizeData.minimumValue;
-            var b = sizeData.maximumValue;
-            var i = maxBubbleSize * maxBubbleSize * 2 * Math.PI;
-            var a = minBubbleSize * minBubbleSize * 2 * Math.PI;
-            var l = defaultSize;
-            if (f == b)
-                l = maxBubbleSize;
-            else {
-                var k = currentValue;
-                var j = ((k - f) / (b - f)) * (i - a) + a;
-                if (j < a)
-                    j = a;
-                l = Math.sqrt(j / (Math.PI * 2));
-            }
-            return l;
-        }
-        catch (e) {
-            logError("BubbleChart", "getBubbleSize", e);
-            return defaultSize;
-        }
-    }
-    const iterateOverChartData = () => {
-        try {
-            // Clear arrays to prevent accumulation on each render
-            measuresList = [];
-            dimensionsList = [];
-            minMeasure = undefined;
-            maxMeasure = undefined;
-            minDimension = undefined;
-            maxDimension = undefined;
-            data.forEach((d) => {
-                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("BubbleChart", "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])
-                //.nice()
-                .range([0, innerWidth]);
-            yScale = d3
-                .scaleLinear()
-                .domain([yStartValue, yEndValue])
-                //.nice()
-                .range([innerHeight, 0]);
-        }
-        catch (e) {
-            logError("BubbleChart", "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("BubbleChart", "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("BubbleChart", "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("BubbleChart", "drawReferenceLines", e);
-        }
-    };
-    const initLegendList = () => {
-        try {
-            let tempLegendEntries = legendEntries.map((d) => {
-                let modifiedProperties = {
-                    ...d,
-                    legendFontStyle: d.fontStyle,
-                    fontSize: d.fontSize + "px",
-                    legendFontFamily: d.fontFamily,
-                };
-                return {
-                    legend: d.name,
-                    properties: modifiedProperties,
-                    data: {},
-                };
-            });
-            initLegendListWithTotalValueAllowance(chartFormatOptions, svg, tempLegendEntries, width, height, maxLegendDimensions[0], chartTitleHeight, chartId, margins);
-        }
-        catch (e) {
-            logError("BubbleChart", "initLegendList", e);
-        }
-    };
-    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 BubbleChart;