pace-chart-lib 1.0.1 → 1.0.3

package/dist/components/Charts/ChartsWithAxis/LineFamily/NormalisedStackLineChart.js

@@ -1,554 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region Imports
-import { useEffect, useRef } from "react";
-import * as d3 from "d3";
-import * as d3Annotation from "d3-svg-annotation";
-import { marginCalculation, initSvg, initChartArea, getNumberWithFormat, initYaxis, responsiveXaxisLabel, initXaxis, setDateFormats, 
-// initScrollingSvgClippath,
-drawSeriesLabels, setXaxistitle, yAxistitle, setChartTitle, 
-// responsiveSecondaryYaxisLabel,
-dataTablePreCalculation, setChartFloatingSVGContainer, addDataTable, initPlotArea, yAxistitleRight, getCurveType, getStackedData, prepareDataForSeriesLabel, stacklineAnnotations, } from "../ChartsWithAxisFunctions";
-import { legendsWithScroll, lineMarkers, } from "../../Core/CommonFunctions";
-import { legendShape } from "../../Core/Common.types";
-import { logError } from "../../../../Services/ErrorLog";
-const NormalisedStackLineChart = ({ title, width, height, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
-    // adding variables as per requirement
-    const barWidth = 0; // coz line chart
-    const chartType = "NormalizedStackLine";
-    const svgRef = useRef();
-    const seriesData = data;
-    const barChart = false;
-    const chartsWithXScrollFlag = true;
-    const chartsWithYScrollFlag = false;
-    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 staticSvgInnerWidth;
-    let staticSvgInnerHeight;
-    let totalHeight;
-    let totalWidth;
-    let dataTable;
-    let dataTableHeight;
-    let floatingSvg;
-    let svg;
-    let gTag;
-    let floatingTagG;
-    let yScaleLeft;
-    let yScaleRight;
-    let xScale;
-    let seriesLabels;
-    let calculatedRange;
-    let seriesLabelWidth;
-    let yAxisLeft;
-    let xAxis;
-    let yAxisRight;
-    let filteredDimension;
-    let filteredData;
-    let scrollPosition = 0;
-    const visibleBars = 2;
-    let stackLineData = [];
-    let stackChartData = [];
-    const isNormalizedChart = true;
-    let chartJSON = {
-        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 {
-            createLineChart();
-        }
-        catch (error) {
-            logError("StackLinechart", "createLineChart", error);
-        }
-    }, []);
-    //#endregion
-    const createLineChart = () => {
-        // firstFunctionForDrawChart(); // not required in library
-        preProcessChartData(); // preaparing data related to chart creation
-        // Applies custom Y-axis label formatting and calculates the necessary margin based on axis extremes.
-        // const resultCustomYscaleLabelFormatting = customYscaleLabelFormatting(
-        //   // for calculating primary/secondary axis max number so that we can calculate margin accordinglt
-        //   formatOptions,
-        //   chartJSON.yMinLeft,
-        //   chartJSON.yMaxLeft,
-        //   chartJSON.yMinRight,
-        //   chartJSON.yMaxRight
-        // );
-        // maxNumberForPrimaryAxis =
-        //   resultCustomYscaleLabelFormatting.maxNumberForPrimaryAxis;
-        // maxNumberForSecondaryAxis =
-        //   resultCustomYscaleLabelFormatting.maxNumberForSecondaryAxis;
-        const marginResult = marginCalculation(
-        // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart);
-        margin = marginResult.margin;
-        yLabel = marginResult.yLabel;
-        xLabel = marginResult.xLabel;
-        yTitle = marginResult.yTitle;
-        xTitle = marginResult.xTitle;
-        dimensionHeightWidthArray = marginResult.dimensionHeightWidthArray;
-        chartTitleHeight = marginResult.chartTitleHeight;
-        secondaryAxisTitleWidth = marginResult.secondaryAxisTitleWidth;
-        legendMargin = marginResult.legendMargin;
-        secondaryYLabel = marginResult.secondaryYLabel;
-        setSVGContainer(margin); // for innerWidth/height static width/height
-        const resultDataTablePreCalculation = dataTablePreCalculation(
-        // calculations for data tables
-        formatOptions, yLabel, yTitle, seriesData, chartJSON.dimensionList);
-        dataTable = resultDataTablePreCalculation.dataTable;
-        dataTableHeight = resultDataTablePreCalculation.dataTableHeight;
-        svg = initSvg(
-        // for svg creation
-        svg, svgRef.current, width, height, formatOptions, chartsWithXScrollFlag, chartsWithYScrollFlag, chartId, totalWidth, totalHeight);
-        //d3.select(svgRef.current, width, height);
-        gTag = initChartArea(svg, margin); // creating chart area
-        floatingTagG = setChartFloatingSVGContainer(
-        // might not needed after dynamic scrolling effect // marked for review for final
-        gTag, formatOptions, floatingSvg, margin, chartsWithXScrollFlag, chartsWithYScrollFlag);
-        initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
-        initScale();
-        initAxis();
-        initYaxis(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, innerHeight, floatingTagG, chartsWithXScrollFlag, chartsWithYScrollFlag);
-        // initYaxisRight(
-        //   gTag,
-        //   formatOptions,
-        //   dataTableHeight,
-        //   secondaryYLabel,
-        //   yAxisRight,
-        //   innerHeight,
-        //   staticSvgInnerWidth,
-        //   floatingTagG
-        // );
-        horizontalScrollBar(seriesData, height, svg, margin, innerWidth);
-        setDataTable(gTag, floatingTagG, dataTable, barWidth, yScaleLeft, xScale, dataTableHeight, yLabel, yTitle, calculatedRange, chartJSON.formattedDimensionListMap, chartId, margin, svg, innerWidth, innerHeight); // data tables to be added later
-        setXaxistitle(formatOptions, barChart, svg, margin, xLabel, height, xTitle, chartJSON.chartType, yLabel, staticSvgInnerWidth, innerHeight);
-        yAxistitle(innerHeight, formatOptions, dataTableHeight, barChart, svg, margin, yTitle, yLabel);
-        yAxistitleRight(svg, isSecondaryAxisDrawn, margin, formatOptions, dataTableHeight, staticSvgInnerHeight, staticSvgInnerWidth, secondaryYLabel, secondaryAxisTitleWidth, innerHeight); // to be added later
-        setChartTitle(svg, formatOptions, width, chartTitleHeight);
-        drawLegends(height, svg, dimensionHeightWidthArray, chartTitleHeight, width, legendMargin);
-        //
-    };
-    const preProcessChartData = () => {
-        chartJSON.chartData = seriesData.flatMap((s) => s.data); // Flattening the data from all series
-        for (let k = 0; k < seriesData.length; k++) {
-            seriesData[k].properties.legend =
-                k + "~$~" + seriesData[k].properties.legend;
-        }
-        chartJSON.dimensionList = Array.from(new Set(chartJSON.chartData.map((data) => data.dimension))); // getting unique x values as dimension list
-        filteredData = JSON.parse(JSON.stringify(seriesData));
-        // if (formatOptions.scrollChart.scrollX) {
-        if (false) {
-            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;
-        }
-        if (formatOptions.plotArea.hideZeroValues) {
-            chartJSON.hideZeroValues = true;
-        }
-        chartJSON.legendList = seriesData.map((data) => data.properties.legend); // getting legend list from series data
-        let tempStackLineData = getStackedData(chartJSON.dimensionList, seriesData, isNormalizedChart);
-        let allStackDataChart = d3
-            .stack()
-            .keys(chartJSON.legendList)
-            .offset(d3.stackOffsetDiverging)(tempStackLineData);
-        createStackLineData();
-        function stackMin(series) {
-            return d3.min(series, function (d) {
-                return d[0];
-            });
-        }
-        function stackMax(series) {
-            return d3.max(series, function (d) {
-                return d[1];
-            });
-        }
-        chartJSON.yMaxLeft = 1; // max value from chart Data
-        chartJSON.yMinLeft = parseFloat(d3.min(allStackDataChart, stackMin)); // min value from chart Data
-        let xAxisObject = xAxisObj[0];
-        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-            xAxisObject.dataType === "DATE"
-            ? setDateFormats(xAxisObject.name.name, formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList, xAxisObject.name.dataSourceId).map((d) => d[0])
-            : chartJSON.dimensionList;
-        chartJSON.dimensionList.forEach((d, i) => {
-            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
-        });
-        let secondaryAxisMinValue = 0;
-        let secondaryAxisMaxValue = 0;
-        if (isSecondaryAxisDrawn) {
-            seriesData?.forEach((data) => {
-                if (data.properties.axis == "Secondary") {
-                    // isSecondaryAxisDrawn = true;
-                    if (secondaryAxisMinValue >
-                        d3.min(data.data, (d) => d.value)) {
-                        secondaryAxisMinValue = d3.min(data.data, (d) => d.value);
-                    }
-                    if (secondaryAxisMaxValue <
-                        d3.max(data.data, (d) => d.value)) {
-                        secondaryAxisMaxValue = d3.max(data.data, (d) => d.value);
-                    }
-                }
-            });
-            chartJSON.yMinRight = secondaryAxisMinValue;
-            chartJSON.yMaxRight = secondaryAxisMaxValue;
-        }
-    };
-    const initScale = () => {
-        if (isPrimaryAxisDrawn) {
-            yScaleLeft = d3
-                .scaleLinear()
-                .domain([chartJSON.yMinLeft < 0 ? -1 : 0, 1])
-                .range([
-                dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight,
-                0,
-            ]);
-        }
-        if (isSecondaryAxisDrawn) {
-            yScaleRight = d3
-                .scaleLinear()
-                .domain([
-                chartJSON.yMinRight >= 0
-                    ? (secondaryCustomYaxisMinValue ||
-                        secondaryCustomYaxisMinValue == 0) &&
-                        !Number.isNaN(secondaryCustomYaxisMinValue)
-                        ? secondaryCustomYaxisMinValue
-                        : 0
-                    : (secondaryCustomYaxisMinValue ||
-                        secondaryCustomYaxisMinValue == 0) &&
-                        !Number.isNaN(secondaryCustomYaxisMinValue)
-                        ? secondaryCustomYaxisMinValue
-                        : chartJSON.yMinRight * 1.1,
-                chartJSON.yMaxRight <= 0
-                    ? secondaryCustomYaxisMaxValue
-                        ? secondaryCustomYaxisMaxValue
-                        : 0
-                    : secondaryCustomYaxisMaxValue
-                        ? secondaryCustomYaxisMaxValue
-                        : chartJSON.yMaxRight * 1.1,
-            ])
-                .range([
-                dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight,
-                0,
-            ]);
-        }
-        calculatedRange = [0, innerWidth];
-        if (formatOptions.seriesLabel.seriesLabelVisibility) {
-            let labelObj = prepareDataForSeriesLabel(innerWidth, yScaleLeft, formatOptions, filteredData, undefined, isSecondaryAxisDrawn, true);
-            seriesLabels = labelObj.labelArray;
-            formatOptions.seriesLabel.seriesLabelPosition == "Right" &&
-                (seriesLabelWidth = labelObj.heightWidth[0]);
-            formatOptions.seriesLabel.seriesLabelPosition == "Right"
-                ? (calculatedRange = [0, innerWidth - labelObj.heightWidth[0]])
-                : (calculatedRange = [labelObj.heightWidth[0], innerWidth]);
-        }
-        getXScale();
-    };
-    const getXScale = () => {
-        xScale = d3
-            .scalePoint()
-            .domain(filteredDimension)
-            .range(calculatedRange)
-            .padding(0.5);
-    };
-    const initAxis = () => {
-        getXAxis();
-        if (isPrimaryAxisDrawn) {
-            yAxisLeft = d3
-                .axisLeft(yScaleLeft)
-                .tickFormat((d) => getNumberWithFormat(d, formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision))
-                .tickSize(formatOptions.plotArea.gridLinesVisibility
-                ? formatOptions.plotArea.gridLinesHorizontal
-                    ? -innerWidth + (seriesLabelWidth ? seriesLabelWidth : 0)
-                    : 0
-                : 0)
-                .ticks(dataTableHeight > 0
-                ? (innerHeight - dataTableHeight) / 30
-                : innerHeight / 30)
-                .tickSizeOuter(0);
-        }
-    };
-    const getXAxis = () => {
-        xAxis = d3
-            .axisBottom(xScale)
-            .tickSize(formatOptions.plotArea.gridLinesVisibility
-            ? formatOptions.plotArea.gridLinesVeritcal
-                ? formatOptions.plotArea.gridLinesVeritcal
-                    ? -(dataTableHeight > 0
-                        ? innerHeight - dataTableHeight
-                        : innerHeight)
-                    : formatOptions.plotArea.ticksHeight *
-                        ((dataTableHeight > 0
-                            ? innerHeight - dataTableHeight
-                            : innerHeight) /
-                            100) *
-                        (formatOptions.xAxisLabel.xAxisPosition == 1 ? 1 : -1)
-                : 0
-            : 0)
-            .tickSizeOuter(0)
-            .tickValues(responsiveXaxisLabel(filteredDimension, innerWidth));
-    };
-    const getChartType = (lineData) => {
-        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;
-            });
-        });
-        const lineGenerator = d3
-            .line()
-            .x((d) => xScale(d.data.dimension)
-            ? xScale(d.data.dimension)
-            : null)
-            .y((d) => (d[1] > 0 ? yScaleLeft(d[1]) : yScaleLeft(d[0])))
-            // .defined((d) => (d.hideZero ? Boolean(d.value) : true))
-            .curve(getCurveType(formatOptions));
-        //Lines
-        // Bind dummy data to ensure a single group is created
-        let lines = gTag.selectAll(".parentGroup").data([stackChartData]);
-        lines = lines
-            .enter()
-            .append("g")
-            .attr("class", "lines parentGroup")
-            .merge(lines);
-        // JOIN: one group per line
-        let lineGroups = lines.selectAll(".line-group").data((d) => d);
-        // ENTER: create group for each new line
-        let lineGroupsEnter = lineGroups
-            .enter()
-            .append("g")
-            .attr("class", (d) => "line-group " + d.key.replace(/ /g, "-"));
-        // .attr("class", (d) => d.key.replace(/ /g, "-"));
-        lineGroupsEnter
-            .attr("hoverId", (d) => d.key.includes("~$~")
-            ? d.key.split("~$~")[1].replace(/ /g, "-")
-            : d.key.replace(/ /g, "-"))
-            .append("path")
-            .attr("class", "line")
-            .attr("fill", "none");
-        // ENTER + UPDATE
-        lineGroupsEnter
-            .merge(lineGroups)
-            .select("path")
-            .attr("d", (d, i) => lineGenerator(d))
-            .attr("stroke", (d) => (d.color !== "#ffffff" ? d.color : "none"))
-            // .style("visibility", (d,i) => (this.individualLegendStyle[i].hideZero && d[i].data[d.key] === 0) ? "hidden" : "visible")
-            .attr("stroke-dasharray", (d, i) => seriesData[i].properties.lineStyle === "dotted"
-            ? "0,3"
-            : seriesData[i].properties.lineStyle === "dashed"
-                ? "20,10,5,5,5,10"
-                : "")
-            .attr("stroke-linecap", (d, i) => seriesData[i].properties.lineStyle === "dotted" ? "round" : "")
-            .attr("stroke-width", (d, i) => seriesData[i].properties.lineStyle !== "None"
-            ? seriesData[i].properties.lineWidth
-            : "0");
-        // EXIT: remove old groups
-        lineGroups.exit().remove();
-        //Markers
-        lineMarkers(lines, lineData, chartType, xScale, yScaleLeft, yScaleRight, null, formatOptions, chartJSON, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue);
-    };
-    const drawLegends = (height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin) => {
-        try {
-            let position = formatOptions.legends.legendPosition;
-            let horizontalLegendAlignment = formatOptions.legends.legendAlignmentTopBottom;
-            let verticalLegendAlignment = formatOptions.legends.legendAlignment;
-            switch (position) {
-                case "None":
-                    break;
-                case "Right":
-                    let heightRight = !formatOptions.plotArea.fitChart
-                        ? height - chartTitleHeight - 20
-                        : height - chartTitleHeight - 10;
-                    legendsWithScroll(svg, seriesData, width - maxLegendDimensions[0] - 30, chartTitleHeight + 5, legendMargin + 25, heightRight, position, verticalLegendAlignment, legendShape.line, formatOptions, chartId);
-                    break;
-                case "Top":
-                    legendsWithScroll(svg, seriesData, 7, chartTitleHeight + 5, width - 10, 30, position, horizontalLegendAlignment, legendShape.line, formatOptions, chartId);
-                    break;
-                case "Left":
-                    let heightLeft = !formatOptions.plotArea.fitChart
-                        ? height - chartTitleHeight - 20
-                        : height - chartTitleHeight - 10;
-                    legendsWithScroll(svg, seriesData, 7, chartTitleHeight + 5, legendMargin + 25, heightLeft, position, verticalLegendAlignment, legendShape.line, formatOptions, chartId);
-                    break;
-                case "Bottom":
-                    legendsWithScroll(svg, seriesData, 7, height - 25, width - 10, 30, position, horizontalLegendAlignment, legendShape.line, formatOptions, chartId);
-                    break;
-            }
-        }
-        catch (error) {
-            console.log(error);
-        }
-    };
-    const setSVGContainer = (margin) => {
-        totalHeight = height;
-        totalWidth = width;
-        if (chartsWithXScrollFlag) {
-            totalWidth = formatOptions.plotArea.scaleFactor * width;
-        }
-        if (chartsWithYScrollFlag) {
-            totalHeight = formatOptions.plotArea.scaleFactor * height;
-        }
-        innerWidth =
-            (!formatOptions.plotArea.fitChart ? totalWidth : width) -
-                margin.left -
-                margin.right;
-        innerHeight =
-            (!formatOptions.plotArea.fitChart && chartsWithYScrollFlag
-                ? totalHeight
-                : height) -
-                margin.bottom -
-                margin.top;
-        staticSvgInnerWidth = width - margin.left - margin.right;
-        staticSvgInnerHeight = height - margin.top - margin.bottom;
-    };
-    const setDataTable = (gTag, floatingTagG, dataTable, barWidth, yScaleLeft, xScale, dataTableHeight, yLabel, yTitle, calculatedRange, formatedDimensionMap, chartId, margin, svg, innerWidth, innerHeight) => {
-        try {
-            if (formatOptions.dataTableProperties &&
-                formatOptions.dataTableProperties.dataTable) {
-                if (formatOptions.xAxisLabel.xAxisPosition != 1)
-                    formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-                let requiredTag = formatOptions.plotArea.fitChart ? gTag : floatingTagG;
-                addDataTable(formatOptions.plotArea.fitChart, svg, requiredTag, dataTable, barWidth, yScaleLeft, xScale, undefined, undefined, undefined, dataTableHeight, "Line", formatOptions, yLabel, yTitle, chartJSON.dimensionList, innerWidth, calculatedRange, formatedDimensionMap, chartId, margin, innerHeight);
-            }
-        }
-        catch (error) {
-            // loggerService.logError(error,{componentName :constructor.name,functionName :"setDataTable"});    }
-        }
-    };
-    const horizontalScrollBar = (seriesData, height, svg, margin, innerWidth) => {
-        // if (formatOptions.scrollChart.scrollX) {
-        if (false) {
-            // Scrollbar parameters
-            const scrollMax = seriesData[0].data.length - visibleBars;
-            // Scrollbar track & handle
-            const scrollbarY = height - 20;
-            filteredDimension = chartJSON.dimensionList.slice(scrollPosition, scrollPosition + visibleBars);
-            getXScale();
-            filteredData = JSON.parse(JSON.stringify(seriesData));
-            filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-            createStackLineData();
-            getXAxis();
-            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) / seriesData.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);
-                getXScale();
-                filteredData = JSON.parse(JSON.stringify(seriesData));
-                filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-                createStackLineData();
-                getXAxis();
-                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);
-                getXScale();
-                filteredData = JSON.parse(JSON.stringify(seriesData));
-                filteredData.forEach((data, i) => (filteredData[i].data = data.data.filter((d) => filteredDimension.includes(d.dimension))));
-                createStackLineData();
-                getXAxis();
-                drawLineChart();
-            });
-        }
-        drawLineChart();
-    };
-    const drawLineChart = () => {
-        // filteredData.forEach((data) => getChartType([data]));
-        getChartType(filteredData);
-        initXaxis(formatOptions.plotArea.fitChart ? gTag : floatingTagG, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, barWidth, xAxisObj[0].dataType, innerWidth, innerHeight, filteredDimension);
-        stacklineAnnotations(stackChartData, xScale, yScaleLeft, yScaleRight, // 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);
-        let newSeriesLabelArray = prepareDataForSeriesLabel(innerWidth, yScaleLeft, formatOptions, filteredData, undefined, isSecondaryAxisDrawn, true).labelArray;
-        // adding series labels ( appending legends at the end of line : by default) in plot area
-        drawSeriesLabels(formatOptions, floatingTagG, newSeriesLabelArray);
-    };
-    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", { children: [_jsx("div", { id: "chartTooltipDiv" }), _jsx("svg", { className: "chartSVG", ref: svgRef, id: chartId, width: width, height: height })] }));
-};
-export default NormalisedStackLineChart;

package/dist/components/Charts/ChartsWithAxis/LineFamily/NormalizedStackLineChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type TChartProps } from "../ChartsWithAxisTypes.types";
-declare const NormalisedStackLineChart: React.FC<TChartProps>;
-export default NormalisedStackLineChart;