pace-chart-lib 0.0.7 → 0.0.8

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

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

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/OrganizationChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TOrganizationChartProps } from "../ChartsWithoutAxisTypes.types";
+declare const OrganizationChart: React.FC<TOrganizationChartProps>;
+export default OrganizationChart;