pace-chart-lib 1.0.2 → 1.0.4

package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/NormalizedStackHorizontalBarChart.js

@@ -1,473 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region Imports
-import * as d3 from "d3";
-import * as d3Annotation from "d3-svg-annotation";
-import { useEffect, useRef } from "react";
-import { logError } from "../../../../Services/ErrorLog";
-import { staticLegendShape } from "../../Core/Common.types";
-import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxisBar, initYaxisBar, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, stacklineAnnotations, yAxistitle } from "../ChartsWithAxisFunctions";
-import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const NormalizedStackHorizontalBarChart = ({ isDateType, formatOptions, data, }) => {
-    // adding variables as per requirement
-    const chartId = crypto.randomUUID();
-    let columnWidth = 0; // coz line chart
-    const chartType = actualChartTypes.stackBar100;
-    const svgRef = useRef();
-    const seriesData = generalizedChartData(data.ChartData, data.DimensionList);
-    const dimensionList = data.DimensionList;
-    const barChart = true;
-    const isSecondaryAxisDrawn = false;
-    let isPrimaryAxisDrawn = true;
-    let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
-    let customYaxisMaxValue = parseFloat(formatOptions.yAxisLabel.yAxisMaxText);
-    let secondaryCustomYaxisMinValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMinText);
-    let secondaryCustomYaxisMaxValue = parseFloat(formatOptions.secondaryYAxisLabel.secondaryYAxisMaxText);
-    let margin;
-    let yLabel;
-    let xLabel;
-    let yTitle;
-    let xTitle;
-    let dimensionHeightWidthArray;
-    let chartTitleHeight;
-    let secondaryAxisTitleWidth;
-    let legendMargin;
-    let secondaryYLabel;
-    let maxNumberForPrimaryAxis;
-    let maxNumberForSecondaryAxis;
-    let innerWidth;
-    let innerHeight;
-    let width;
-    let height;
-    let dataTable;
-    let dataTableHeight;
-    let svg;
-    let gTag;
-    let xScaleBottom;
-    let yScale;
-    let seriesLabels;
-    let calculatedRange;
-    let seriesLabelWidth;
-    let xAxisBottom;
-    let yAxis;
-    let filteredDimension;
-    let filteredData = [];
-    let scrollPosition = 0;
-    const visibleBars = 2;
-    let stackLineData = [];
-    let stackChartData = [];
-    const isNormalizedChart = true;
-    let chartJSON = {
-        dimensionList: dimensionList,
-        chartType: chartType,
-        chartData: [],
-        formatOptions: formatOptions,
-        legendList: [],
-        secondaryAxisDrawn: false,
-        yMaxLeft: 0,
-        yMaxRight: 0,
-        yMinLeft: 0,
-        yMinRight: 0,
-        hideZeroValues: false,
-        formattedDimensionListMap: new Map(),
-    };
-    //#region UseEffect
-    useEffect(() => {
-        try {
-            createNormalizedStackBarChart();
-        }
-        catch (error) {
-            logError("StackNormalizedStackBarchart", "createNormalizedStackBarChart", error);
-        }
-    }, [formatOptions]);
-    //#endregion
-    const createNormalizedStackBarChart = () => {
-        ({ formatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        preProcessChartData(); // preaparing data related to chart creation
-        // Applies custom Y-axis label formatting and calculates the necessary margin based on axis extremes.
-        ({ maxNumberForPrimaryAxis, maxNumberForSecondaryAxis } =
-            customYscaleLabelFormatting(
-            // for calculating primary/secondary axis max number so that we can calculate margin accordinglt
-            formatOptions, chartJSON.yMinLeft, chartJSON.yMaxLeft, chartJSON.yMinRight, chartJSON.yMaxRight));
-        ({
-            margin,
-            yLabel,
-            xLabel,
-            yTitle,
-            xTitle,
-            dimensionHeightWidthArray,
-            chartTitleHeight,
-            secondaryAxisTitleWidth,
-            legendMargin,
-            secondaryYLabel,
-        } = marginCalculation(
-        // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType, barChart));
-        setSVGContainer(margin); // for innerWidth/height static width/height
-        ({ dataTable, dataTableHeight } = dataTablePreCalculation(
-        // calculations for data tables
-        formatOptions, yLabel, yTitle, seriesData, chartJSON.dimensionList));
-        initSvg(
-        // for svg creation
-        svg, width, height, formatOptions);
-        //d3.select(svgRef.current, width, height);
-        gTag = initChartArea(svg, margin); // creating chart area
-        initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
-        initScale();
-        initAxis();
-        initYaxisBar(formatOptions, gTag, xLabel, innerHeight, innerWidth, yAxis, undefined, xScaleBottom, chartJSON.yMaxLeft, filteredDimension, chartType, isDateType, width, dimensionHeightWidthArray, columnWidth);
-        horizontalScrollBar(seriesData, height, svg, margin, innerWidth);
-        if (formatOptions.dataTableProperties &&
-            formatOptions.dataTableProperties.dataTable) {
-            if (formatOptions.xAxisLabel.xAxisPosition != "1") {
-                formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-            }
-            addDataTable(formatOptions.plotArea.fitChart, svg, gTag, dataTable, columnWidth, xScaleBottom, undefined, undefined, undefined, undefined, dataTableHeight, chartType, formatOptions, yLabel, yTitle, chartJSON.dimensionList, innerWidth, calculatedRange, chartJSON.formattedDimensionListMap, chartId, margin, innerHeight);
-        }
-        setXaxistitle(formatOptions, barChart, svg, margin, xLabel, height, xTitle, chartJSON.chartType, yLabel, innerWidth, innerHeight);
-        yAxistitle(innerHeight, formatOptions, dataTableHeight, barChart, svg, margin, yTitle, yLabel);
-        setChartTitle(svg, formatOptions, width, chartTitleHeight);
-        drawLegends(height, svg, dimensionHeightWidthArray, chartTitleHeight, width, legendMargin, formatOptions, seriesData, chartId, staticLegendShape.rectangle);
-    };
-    const preProcessChartData = () => {
-        const allChartData = [];
-        const legendList = [];
-        seriesData.forEach((series, index) => {
-            // Prefix legend
-            const prefixedLegend = `${index}~$~${series.properties.legend}`;
-            series.properties.legend = prefixedLegend;
-            legendList.push(prefixedLegend);
-            // Flatten data & collect dimensions
-            for (const point of series.data) {
-                allChartData.push(point);
-            }
-        });
-        // Assign computed values
-        chartJSON.chartData = allChartData;
-        chartJSON.legendList = legendList;
-        // getting unique x values as dimension list
-        filteredData = JSON.parse(JSON.stringify(seriesData));
-        let tempStackLineData = getStackedData(chartJSON.dimensionList, seriesData, isNormalizedChart);
-        if (!formatOptions.plotArea.fitChart) {
-            filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
-            filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-        }
-        else {
-            filteredDimension = chartJSON.dimensionList;
-        }
-        const allStackDataChart = d3
-            .stack()
-            .keys(chartJSON.legendList)
-            .offset(d3.stackOffsetDiverging)(tempStackLineData);
-        createStackLineData();
-        // Compute min and max from stacked data in one loop
-        let yMinLeft = Infinity;
-        for (const series of allStackDataChart) {
-            for (const [start, end] of series) {
-                yMinLeft = Math.min(yMinLeft, start);
-            }
-        }
-        chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
-        chartJSON.yMaxLeft = 1;
-        let formatedDimensionList = isDateType
-            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-            : chartJSON.dimensionList;
-        chartJSON.dimensionList.forEach((d, i) => {
-            chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
-        });
-        if (formatOptions.plotArea.hideZeroValues) {
-            chartJSON.hideZeroValues = true;
-        }
-    };
-    const initScale = () => {
-        // rounding the ymin & ymax
-        let yAxisLabelArray = responsiveYaxisLabel(customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerHeight, formatOptions, chartJSON, customYaxisMinValue, customYaxisMaxValue, barChart, innerWidth).yAxisLabelArray;
-        chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
-        chartJSON.yMinLeft = yAxisLabelArray[0];
-        if (isPrimaryAxisDrawn) {
-            xScaleBottom = d3
-                .scaleLinear()
-                .domain([chartJSON.yMinLeft < 0 ? -1 : 0, 1])
-                .range([0,
-                dataTableHeight > 0 ? innerWidth - dataTableHeight : innerWidth,
-            ]);
-        }
-        calculatedRange = [innerHeight, 0];
-        if (formatOptions.seriesLabel.seriesLabelVisibility) {
-            let labelObj = prepareDataForSeriesLabel(innerWidth, xScaleBottom, formatOptions, filteredData, undefined, isSecondaryAxisDrawn, true);
-            seriesLabels = labelObj.labelArray;
-            formatOptions.seriesLabel.seriesLabelPosition == "Right" &&
-                (seriesLabelWidth = labelObj.heightWidth[0]);
-            formatOptions.seriesLabel.seriesLabelPosition == "Right"
-                ? (calculatedRange = [0, innerHeight - labelObj.heightWidth[0]])
-                : (calculatedRange = [labelObj.heightWidth[0], innerHeight]);
-        }
-        getYScale();
-    };
-    const getYScale = () => {
-        columnWidth =
-            (0.51 +
-                (0.61 * (100 - parseFloat(formatOptions.plotArea.plotAreaGapWidth))) /
-                    100) *
-                (innerHeight / filteredDimension.length);
-        yScale = d3
-            .scaleBand()
-            .domain(filteredDimension)
-            .range(calculatedRange)
-            .padding((0.3 * parseFloat(formatOptions.plotArea.plotAreaGapWidth) / 100));
-    };
-    const initAxis = () => {
-        getYAxis();
-        if (isPrimaryAxisDrawn) {
-            xAxisBottom = d3
-                .axisBottom(xScaleBottom)
-                // .tickFormat((d: number) =>
-                //     getNumberWithFormat(
-                //         d,
-                //         formatOptions.yAxisLabel.yAxisDisplayUnits,
-                //         formatOptions.yAxisLabel.yAxisNumberFormat,
-                //         formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
-                //     )
-                // )
-                .tickSize(formatOptions.plotArea.gridLinesVisibility
-                ? formatOptions.plotArea.gridLinesHorizontal
-                    ? -innerHeight + (seriesLabelWidth ? seriesLabelWidth : 0)
-                    : 0
-                : 0)
-                // .tickValues(
-                //     responsiveYaxisLabel(
-                //         customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
-                //         chartJSON.yMinLeft,
-                //         innerHeight,
-                //         formatOptions,
-                //         chartJSON,
-                //         customYaxisMinValue,
-                //         customYaxisMaxValue,
-                //         barChart,
-                //         innerWidth
-                //     ).yAxisLabelArray
-                // )
-                .ticks(dataTableHeight > 0
-                ? (innerWidth - dataTableHeight) / 30
-                : innerWidth / 30, "%")
-                .tickSizeOuter(0);
-        }
-    };
-    const getYAxis = () => {
-        yAxis = d3
-            .axisLeft(yScale)
-            .tickSize(formatOptions.plotArea.gridLinesVisibility
-            ? formatOptions.plotArea.gridLinesVertical
-                ? formatOptions.plotArea.gridLinesVertical
-                    ? -(dataTableHeight > 0
-                        ? innerHeight - dataTableHeight
-                        : innerHeight)
-                    : parseFloat(formatOptions.plotArea.ticksHeight) *
-                        ((dataTableHeight > 0
-                            ? innerHeight - dataTableHeight
-                            : innerHeight) /
-                            100) *
-                        (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1)
-                : 0
-            : 0)
-            .tickSizeOuter(0)
-            .tickValues(responsiveXaxisLabel(filteredDimension, innerHeight));
-    };
-    const getChartType = (lineData) => {
-        // to convert data value to percentage
-        stackChartData.forEach((data, i) => data.forEach((item, position) => {
-            lineData[i].data[position][0] = item[0] =
-                item.data.total === 0 ? 0 : item[0] / item.data.total;
-            lineData[i].data[position][1] = item[1] =
-                item.data.total === 0 ? 0 : item[1] / item.data.total;
-        }));
-        lineData.forEach((lData) => {
-            lData.data.forEach((cData) => {
-                cData.hideZero = lData.properties.hideZeroValues;
-                cData.axis = lData.properties.axis;
-            });
-        });
-        // Bind dummy data to ensure a single group is created
-        // lineData.forEach((data) => {
-        // Step 1: Outer group for the whole chart
-        // Create parent group for columns
-        let columns = gTag.selectAll(".parentGroup").data([stackChartData.reverse()]);
-        columns = columns
-            .enter()
-            .append("g")
-            .attr("class", "columns parentGroup")
-            .merge(columns);
-        // JOIN: one group per stack series
-        let columnGroups = columns.selectAll(".column-group").data((d) => d);
-        // ENTER
-        let columnGroupsEnter = columnGroups
-            .enter()
-            .append("g")
-            .attr("class", (d) => "column-group " + d.key.replace(/ /g, "-"))
-            .attr("hoverId", (d) => d.key.includes("~$~")
-            ? d.key.split("~$~")[1].replace(/ /g, "-")
-            : d.key.replace(/ /g, "-"));
-        columnGroups = columnGroupsEnter.merge(columnGroups);
-        // JOIN rects inside each series
-        let rects = columnGroups.selectAll("rect").data((d) => d);
-        // ENTER
-        rects
-            .enter()
-            .append("rect")
-            .merge(rects)
-            .attr("y", (d) => yScale(d.data.dimension))
-            .attr("x", (d) => xScaleBottom(d[0]))
-            .attr("width", (d) => Math.max(0, xScaleBottom(d[1]) - xScaleBottom(d[0])))
-            .attr("height", yScale.bandwidth())
-            .attr("fill", (d, i, nodes) => {
-            // `nodes[i]` gives access to parent node so we can infer which group (series) we're in
-            const groupIndex = Array.from(columnGroups.nodes()).indexOf(nodes[i].parentNode);
-            return seriesData[groupIndex]?.properties?.color || "gray";
-        })
-            .attr("stroke", (d, i, nodes) => {
-            const groupIndex = Array.from(columnGroups.nodes()).indexOf(nodes[i].parentNode);
-            const props = seriesData[groupIndex]?.properties;
-            return props?.stackBorderStyle === 0
-                ? "none"
-                : formatOptions.column.stackBorderVisibility
-                    ? props.stackBorderColor
-                    : "none";
-        })
-            .attr("stroke-dasharray", (d, i, nodes) => {
-            const groupIndex = Array.from(columnGroups.nodes()).indexOf(nodes[i].parentNode);
-            return seriesData[groupIndex]?.properties.stackBorderStyle === 2
-                ? "5,3"
-                : "0";
-        })
-            .attr("stroke-width", (d, i, nodes) => {
-            const groupIndex = Array.from(columnGroups.nodes()).indexOf(nodes[i].parentNode);
-            return ((seriesData[groupIndex]?.properties.stackBorderWidth || 0) + "px");
-        })
-            // EXIT
-            // columnGroups.exit().remove();
-            .on("mousemove", (event, d) => {
-            showTooltipOnMouseMove([
-                {
-                    key: formatOptions.xAxisTitle.xAxisTitleText.includes("~$~")
-                        ? formatOptions.xAxisTitle.xAxisTitleText.split("~$~")[1]
-                        : formatOptions.xAxisTitle.xAxisTitleText,
-                    value: chartJSON.formattedDimensionListMap.get(d.data.dimension),
-                },
-                {
-                    key: formatOptions.yAxisTitle.yAxisTitleText || d.value,
-                    value: getNumberWithFormat(d[1] - d[0], formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision),
-                },
-                {
-                    key: "Legend",
-                    value: d.key.includes("~$~") ? d.key.split("~$~")[1] : d.key,
-                },
-            ], formatOptions, event);
-        })
-            .on("mouseout", hideTooltipOnMouseOut);
-        // EXIT: remove old groups
-        columnGroups.exit().remove();
-        // });
-    };
-    const setSVGContainer = (margin) => {
-        innerWidth = width - margin.left - margin.right;
-        innerHeight = height - margin.bottom - margin.top;
-    };
-    const horizontalScrollBar = (seriesData, height, svg, margin, innerWidth) => {
-        if (!formatOptions.plotArea.fitChart) {
-            // Scrollbar parameters
-            const scrollMax = seriesData[0].data.length - visibleBars;
-            // Scrollbar track & handle
-            const scrollbarY = height - 20;
-            filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
-            getYScale();
-            filteredData = JSON.parse(JSON.stringify(seriesData));
-            filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-            createStackLineData();
-            getYAxis();
-            svg
-                .append("rect")
-                .attr("x", margin.left)
-                .attr("y", scrollbarY)
-                .attr("width", innerWidth)
-                .attr("height", 8)
-                .attr("fill", "#ddd")
-                .attr("rx", 4);
-            const handleWidth = (innerWidth * visibleBars) / chartJSON.dimensionList.length;
-            const handle = svg
-                .append("rect")
-                .attr("x", margin.left)
-                .attr("y", scrollbarY)
-                .attr("width", handleWidth)
-                .attr("height", 8)
-                .attr("fill", "#999")
-                .attr("rx", 4)
-                .style("cursor", "ew-resize")
-                .call(d3.drag().on("drag", (event) => {
-                let x = Math.min(Math.max(event.x, margin.left), margin.left + innerWidth - handleWidth);
-                handle.attr("x", x);
-                scrollPosition = Math.round(((x - margin.left) / (innerWidth - handleWidth)) * scrollMax);
-                filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
-                getYScale();
-                filteredData = JSON.parse(JSON.stringify(seriesData));
-                filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-                createStackLineData();
-                getYAxis();
-                drawLineChart();
-            }));
-            svg.on("wheel", (event) => {
-                event.preventDefault();
-                const scrollDelta = Math.abs(event.deltaX) > Math.abs(event.deltaY)
-                    ? event.deltaX
-                    : event.deltaY;
-                scrollPosition += scrollDelta > 0 ? 1 : -1;
-                scrollPosition = Math.max(0, Math.min(scrollPosition, scrollMax));
-                const x = margin.left +
-                    ((innerWidth - handleWidth) * scrollPosition) / scrollMax;
-                handle.attr("x", x);
-                getYScale();
-                filteredData = JSON.parse(JSON.stringify(seriesData));
-                filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-                createStackLineData();
-                getYAxis();
-                drawLineChart();
-            });
-        }
-        drawLineChart();
-    };
-    const drawLineChart = () => {
-        // filteredData.forEach((data) => getChartType([data]));
-        getChartType(filteredData);
-        initXaxisBar(formatOptions, gTag, yLabel, innerHeight, innerWidth, xAxisBottom);
-        stacklineAnnotations(stackChartData, yScale, xScaleBottom, undefined, // need to pass secondary axis scale if secondary axis is drawn
-        margin, d3Annotation, [], //this.labelExcludeList,
-        [], //this.individualLabelColor,
-        [], //this.attributes.Id ? formatOptions.plotArea.dataLabelsCoordinates : this.parentReference.objService.tempAnnotationArray
-        formatOptions, chartType, height, width, innerWidth, filteredDimension, innerHeight, chartId, svg, dataTableHeight, barChart);
-    };
-    const createStackLineData = () => {
-        let stackLineData = getStackedData(filteredDimension, filteredData, isNormalizedChart);
-        // }
-        stackChartData = d3
-            .stack()
-            .keys(chartJSON.legendList)
-            .offset(d3.stackOffsetDiverging)(stackLineData);
-        filteredData.forEach((data, index) => data.data.forEach((axisData, position) => {
-            axisData["0"] = stackChartData[index][position][0];
-            axisData["1"] = stackChartData[index][position][1];
-        }));
-        //Appending Extra key for tooltip color
-        let seriesColor = formatOptions.annotation.annotationSetLabelColor;
-        stackChartData.forEach((K, j) => K.forEach((d) => {
-            d["key"] = K.key;
-            K["color"] = JSON.parse(JSON.stringify(seriesData[j].properties.color));
-            d.data.labelPosition = seriesData[j].properties.dataLabelPosition;
-            d.data["labelColor"] =
-                seriesColor == "2"
-                    ? JSON.parse(JSON.stringify(seriesData[j].properties.color))
-                    : seriesData[j].properties.labelColor;
-            d["hideZero"] = JSON.parse(JSON.stringify(seriesData[j].properties.hideZeroValues));
-        }));
-    };
-    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 NormalizedStackHorizontalBarChart;